Overlays and UI components

import {
  ConnectOverlay,
  DisconnectOverlay,
  AFKOverlay,
  PlayOverlay,
  InfoOverlay,
  ErrorOverlay,
  OverlayBase,
  ActionOverlay,
  TextOverlay,
} from 'streampixelsdk';

/* Hide all default Pixel Streaming UI */
#uiFeatures {
  display: none !important;
}

/* Hide specific overlays */
#afkOverlay {
  display: none !important;
}

#connectOverlay {
  display: none !important;
}

#infoOverlay {
  display: none !important;
}

// After initialization
const uiFeatures = appStream.uiFeaturesElement
  || appStream.rootElement?.querySelector('#uiFeatures');
if (uiFeatures) uiFeatures.style.display = 'none';

// Show the disconnect overlay with a custom message
appStream.showDisconnectOverlay('Connection lost. Click to reconnect.');

// Show a text overlay
appStream.showTextOverlay('Loading...');

<div id="controls" style="position: fixed; bottom: 20px; right: 20px; display: flex; gap: 8px;">
  <button id="mute-btn">Unmute</button>
  <button id="fullscreen-btn">Fullscreen</button>
  <button id="stats-btn">Stats</button>
</div>

// Mute/Unmute
let muted = true;
document.getElementById('mute-btn').addEventListener('click', () => {
  muted = !muted;

  const video = appStream.stream.videoElementParent.querySelector('video');
  const audio = appStream.stream._webRtcController?.streamController?.audioElement;

  if (video) video.muted = muted;
  if (audio) {
    audio.muted = muted;
    if (!muted && audio.paused) audio.play().catch(() => {});
  }

  document.getElementById('mute-btn').textContent = muted ? 'Unmute' : 'Mute';
});

// Fullscreen
document.getElementById('fullscreen-btn').addEventListener('click', () => {
  if (!document.fullscreenElement) {
    document.documentElement.requestFullscreen();
  } else {
    document.exitFullscreen();
  }
});

// Stats
document.getElementById('stats-btn').addEventListener('click', () => {
  const stats = UIControl.getStreamStats();
  console.log(stats);
});