Mounting the stream

appStream.onVideoInitialized = () => {
  document.getElementById('video-container').appendChild(appStream.rootElement);
};

appStream.onVideoInitialized = () => {
  document.getElementById('video-container').appendChild(appStream.rootElement);

  // Access the video element
  const video = appStream.stream.videoElementParent.querySelector('video');
  if (video) {
    video.muted = true;       // Start muted (recommended for autoplay)
    video.autoplay = true;
    video.tabIndex = 0;       // Make focusable for keyboard input
    video.focus();            // Focus for immediate keyboard capture
  }

  // Mute the separate audio element
  const audio = appStream.stream._webRtcController?.streamController?.audioElement;
  if (audio) {
    audio.muted = true;
  }
};

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

// Also hide after mounting (the element may re-appear)
appStream.onVideoInitialized = () => {
  document.getElementById('video-container').appendChild(appStream.rootElement);

  const uiEl = appStream.rootElement?.querySelector('#uiFeatures');
  if (uiEl) uiEl.style.display = 'none';
};

#uiFeatures {
  display: none !important;
}

#afkOverlay {
  display: none !important;
}

appStream.onDisconnect = () => {
  // Show your disconnected UI
  document.getElementById('video-container').innerHTML = '';
  showDisconnectedMessage();
};

body {
  margin: 0;
  overflow: hidden;
}

#video-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
}

/* Ensure the SDK video fills the container */
#video-container video {
  width: 100%;
  height: 100%;
  object-fit: fill;
}