app.js

/**
 * AWS Chime Client v3.0 - Enhanced with Cognito Authentication
 * - Background filters working (blur + image replacement)
 * - Cognito auth guard for backend calls
 * - Graceful 401 error handling
 * - All existing functionality preserved
 * - ESM module architecture
 */
import * as ChimeSDK from "https://esm.sh/amazon-chime-sdk-js@3.20.0";

// Use ChimeSDK's official CDN for WASM files, local worker (working pattern from v3.0)
const ROOT = window.location.origin + window.location.pathname.replace(/index\.html$/, "");
const FILTER_PATHS = {
  worker: `${ROOT}background-filters/worker.js`,
  wasm: `https://static.sdkassets.chime.aws/bgblur/wasm/_cwt-wasm.wasm`,
  simd: `https://static.sdkassets.chime.aws/bgblur/wasm/_cwt-wasm-simd.wasm`,
};

const API_URL =
  "https://jo2o2rgg5l.execute-api.ap-southeast-2.amazonaws.com/prod/join";

let meetingSession = null;
let audioVideo = null;
let logger = null;

let isVideoOn = false;
let isAudioOn = true;
let isSharingScreen = false;

let currentProcessor = null;
let currentTransformDevice = null;
let selectedBackgroundImage = null;

let statusEl,
  joinButton,
  leaveButton,
  toggleVideoButton,
  toggleAudioButton,
  shareButton,
  cameraSelect,
  micSelect,
  bgModeSelect,
  rosterList;

const roster = {}; // attendeeId -> { name, muted, isContent }

// --------------------------------------------------------------------------
// Helper
// --------------------------------------------------------------------------
function setStatus(msg) {
  if (statusEl) statusEl.textContent = msg;
}

function updateRosterUI() {
  rosterList.innerHTML = "";

  Object.values(roster)
    .sort((a, b) => a.name.localeCompare(b.name))
    .forEach((att) => {
      const li = document.createElement("li");

      li.innerHTML = `
        <span class="roster-name">${att.name}</span>
        <span class="roster-icons">
          ${att.isContent ? "🖥️" : ""}
          ${att.muted ? "🔇" : "🎤"}
        </span>
      `;

      rosterList.appendChild(li);
    });
}

// --------------------------------------------------------------------------
// Backend: Create/Join Meeting (with Cognito Auth Guard)
// --------------------------------------------------------------------------
async function fetchMeeting(meetingId, name, region) {
  if (!window.idToken) {
    throw new Error("Not authenticated. Please log in first.");
  }

  const payload = { meetingId, name, region };

  const res = await fetch(API_URL, {
    method: "POST",
    headers: { "Content-Type": "application/json" }, // Authorization added automatically by fetch interceptor
    body: JSON.stringify(payload),
  });

  if (res.status === 401) {
    throw new Error("Unauthorized. Please log in again.");
  }

  if (!res.ok) {
    const msg = await res.text();
    throw new Error(`Backend error: ${msg}`);
  }

  return await res.json();
}

// --------------------------------------------------------------------------
// Join Meeting
// --------------------------------------------------------------------------
async function joinMeeting() {
  try {
    if (!window.idToken) {
      setStatus("Please log in with Cognito first.");
      return;
    }

    const meetingId = document.getElementById("meetingId").value.trim();
    const name = document.getElementById("name").value.trim();
    const region = document.getElementById("region").value;

    if (!meetingId || !name) {
      setStatus("Enter meeting ID + name");
      return;
    }

    setStatus("Requesting meeting…");
    joinButton.disabled = true;

    const { meeting, attendee } = await fetchMeeting(
      meetingId,
      name,
      region
    );

    if (!ChimeSDK || !ChimeSDK.ConsoleLogger) {
      setStatus("ChimeSDK not loaded. Please check your internet connection or CDN script.");
      return;
    }

    logger = new ChimeSDK.ConsoleLogger(
      "ChimeClient",
      ChimeSDK.LogLevel.INFO
    );

    const deviceController = new ChimeSDK.DefaultDeviceController(logger);

    const config = new ChimeSDK.MeetingSessionConfiguration(
      meeting,
      attendee
    );

    meetingSession = new ChimeSDK.DefaultMeetingSession(
      config,
      logger,
      deviceController
    );

    audioVideo = meetingSession.audioVideo;

    // Start audio *before* listing devices (required by some browsers)
    await audioVideo.start();

    await populateDeviceLists();
    bindVideoTiles();

    toggleAudioButton.textContent = "Mute";
    isAudioOn = true;

    registerRosterObservers();

    setStatus("Joined meeting. Start video when ready.");
  } catch (err) {
    console.error(err);
    setStatus("Join error: " + err.message);
  } finally {
    joinButton.disabled = false;
  }
}

// --------------------------------------------------------------------------
// Roster Observers
// --------------------------------------------------------------------------
function registerRosterObservers() {
  const localId = meetingSession.configuration.credentials.attendeeId;

  audioVideo.realtimeSubscribeToAttendeeIdPresence(
    (attendeeId, present, externalUserId) => {
      if (present) {
        const name = externalUserId.split("#")[0];
        roster[attendeeId] = { name, muted: false, isContent: false };

        audioVideo.realtimeSubscribeToVolumeIndicator(
          attendeeId,
          (id, volume, muted) => {
            if (roster[id]) {
              roster[id].muted = muted;
              updateRosterUI();
            }
          }
        );
      } else {
        delete roster[attendeeId];
      }
      updateRosterUI();
    }
  );
}

// --------------------------------------------------------------------------
// Device Lists
// --------------------------------------------------------------------------
async function populateDeviceLists() {
  const videos = await audioVideo.listVideoInputDevices();
  const mics = await audioVideo.listAudioInputDevices();

  cameraSelect.innerHTML = "";
  micSelect.innerHTML = "";

  videos.forEach((d) => {
    const opt = document.createElement("option");
    opt.value = d.deviceId;
    opt.textContent = d.label || d.deviceId;
    cameraSelect.appendChild(opt);
  });

  mics.forEach((d) => {
    const opt = document.createElement("option");
    opt.value = d.deviceId;
    opt.textContent = d.label || d.deviceId;
    micSelect.appendChild(opt);
  });

  if (mics.length) {
    await audioVideo.startAudioInput(mics[0].deviceId);
    micSelect.value = mics[0].deviceId;
  }
}

// --------------------------------------------------------------------------
// Video Tile Binding
// --------------------------------------------------------------------------
function bindVideoTiles() {
  const preview = document.getElementById("video-preview");
  const remote = document.getElementById("remote-videos");

  const observer = {
    videoTileDidUpdate: (tileState) => {
      if (!tileState.boundAttendeeId) return;

      const attendee = roster[tileState.boundAttendeeId];
      if (attendee) {
        attendee.isContent = tileState.isContent;
        updateRosterUI();
      }

      let elementId;
      let container;

      if (tileState.isContent) {
        elementId = "screenShareTile";
        container = remote;
      } else if (tileState.localTile) {
        elementId = "localVideo";
        container = preview;
      } else {
        elementId = `remoteVideo-${tileState.tileId}`;
        container = remote;
      }

      const el = createVideoElement(elementId, container);

      audioVideo.bindVideoElement(tileState.tileId, el);
    },

    videoTileWasRemoved: (tileId) => {
      document
        .querySelector(`#remoteVideo-${tileId}`)
        ?.remove();
      document.getElementById("screenShareTile")?.remove();
    },
  };

  audioVideo.addObserver(observer);
}

function createVideoElement(id, container) {
  let el = document.getElementById(id);
  if (!el) {
    el = document.createElement("video");
    el.id = id;
    el.autoplay = true;
    el.playsInline = true;
    el.muted = id === "localVideo";
    el.style.width = "100%";
    el.style.height = "100%";
    el.style.objectFit = id === "screenShareTile" ? "contain" : "cover";

    if (id === "localVideo") container.innerHTML = "";

    container.appendChild(el);
  }
  return el;
}

// --------------------------------------------------------------------------
// Video Toggle
// --------------------------------------------------------------------------
async function toggleVideo() {
  if (!audioVideo) return;

  try {
    if (!isVideoOn) {
      await startVideoTransformDevice(cameraSelect.value);

      toggleVideoButton.textContent = "Stop Video";
      isVideoOn = true;
      return;
    }

    stopVideoTransformDevice();

    toggleVideoButton.textContent = "Start Video";
    isVideoOn = false;
  } catch (err) {
    console.error(err);
    setStatus("Video error: " + err.message);
  }
}

// --------------------------------------------------------------------------
// Transform Device (Blur/Image)
// --------------------------------------------------------------------------
async function startVideoTransformDevice(deviceId) {
  // Clean up previous processor
  if (currentProcessor) {
    await currentProcessor.destroy();
    currentProcessor = null;
  }
  if (currentTransformDevice) {
    currentTransformDevice = null;
  }

  await audioVideo.stopVideoInput();
  await audioVideo.startVideoInput(deviceId);
  audioVideo.startLocalVideoTile();
}

async function applyBackground(mode) {
  if (!isVideoOn) {
    setStatus("Start video first.");
    return;
  }

  try {
    setStatus("Applying background…");

    // Clean up previous processor
    if (currentProcessor) {
      await currentProcessor.destroy();
      currentProcessor = null;
    }

    if (mode === "none") {
      currentTransformDevice = null;
      await audioVideo.stopVideoInput();
      await audioVideo.startVideoInput(cameraSelect.value);
      audioVideo.startLocalVideoTile();
      setStatus("Background removed.");
      return;
    }

    if (mode === "blur") {
      currentProcessor = await ChimeSDK.BackgroundBlurVideoFrameProcessor.create(
        { paths: FILTER_PATHS },
        { blurStrength: 40 }
      );
    }

    if (mode === "image") {
      if (!selectedBackgroundImage) {
        setStatus("Upload a background image.");
        return;
      }

      currentProcessor = await ChimeSDK.BackgroundReplacementVideoFrameProcessor.create(
        { paths: FILTER_PATHS },
        { imageBlob: selectedBackgroundImage }
      );
    }

    currentTransformDevice = new ChimeSDK.DefaultVideoTransformDevice(
      logger,
      cameraSelect.value,
      [currentProcessor]
    );

    await audioVideo.stopVideoInput();
    await audioVideo.startVideoInput(currentTransformDevice);
    audioVideo.startLocalVideoTile();

    setStatus("Background applied.");
    
    audioVideo.startLocalVideoTile();

  } catch (err) {
    console.error(err);
    setStatus("Background error: " + err.message);
  }
}

// --------------------------------------------------------------------------
// Audio Toggle
// --------------------------------------------------------------------------
function toggleAudio() {
  if (!audioVideo) return;

  if (isAudioOn) {
    audioVideo.realtimeMuteLocalAudio();
    toggleAudioButton.textContent = "Unmute";
    isAudioOn = false;
  } else {
    audioVideo.realtimeUnmuteLocalAudio();
    toggleAudioButton.textContent = "Mute";
    isAudioOn = true;
  }
}

// --------------------------------------------------------------------------
// Screen Sharing
// --------------------------------------------------------------------------
async function toggleScreenShare() {
  if (!audioVideo) return;

  try {
    if (!isSharingScreen) {
      const stream = await navigator.mediaDevices.getDisplayMedia({
        video: true,
      });

      await audioVideo.startContentShare(stream);

      shareButton.textContent = "Stop Sharing";
      isSharingScreen = true;
      return;
    }

    await audioVideo.stopContentShare();

    shareButton.textContent = "Share Screen";
    isSharingScreen = false;
  } catch (err) {
    console.error(err);
    setStatus("Screen share error: " + err.message);
  }
}

// --------------------------------------------------------------------------
// Leave Meeting
// --------------------------------------------------------------------------
async function leaveMeeting() {
  try {
    if (isVideoOn) stopVideoTransformDevice();
    if (isSharingScreen) await audioVideo.stopContentShare();

    audioVideo.stop();

    meetingSession = null;
    audioVideo = null;
    currentProcessor = null;
    currentTransformDevice = null;

    document.getElementById("video-preview").innerHTML = "";
    document.getElementById("remote-videos").innerHTML = "";

    toggleVideoButton.textContent = "Start Video";
    toggleAudioButton.textContent = "Mute";
    shareButton.textContent = "Share Screen";

    setStatus("Left meeting.");
  } catch (err) {
    console.error(err);
  }
}

function stopVideoTransformDevice() {
  audioVideo.stopLocalVideoTile();
  audioVideo.stopVideoInput();
  if (currentProcessor) currentProcessor.destroy();
  currentProcessor = null;
  currentTransformDevice = null;
}

// --------------------------------------------------------------------------
// DOM Events
// --------------------------------------------------------------------------
document.addEventListener("DOMContentLoaded", () => {
  statusEl = document.getElementById("status");
  joinButton = document.getElementById("joinButton");
  leaveButton = document.getElementById("leaveButton");
  toggleVideoButton = document.getElementById("toggleVideo");
  toggleAudioButton = document.getElementById("toggleAudio");
  shareButton = document.getElementById("shareScreen");
  cameraSelect = document.getElementById("cameraSelect");
  micSelect = document.getElementById("micSelect");
  bgModeSelect = document.getElementById("bgMode");
  rosterList = document.getElementById("participantsList");

  joinButton.addEventListener("click", joinMeeting);
  leaveButton.addEventListener("click", leaveMeeting);
  toggleVideoButton.addEventListener("click", toggleVideo);
  toggleAudioButton.addEventListener("click", toggleAudio);
  shareButton.addEventListener("click", toggleScreenShare);

  cameraSelect.addEventListener("change", async () => {
    if (isVideoOn && audioVideo)
      await audioVideo.startVideoInput(cameraSelect.value);
  });

  micSelect.addEventListener("change", async () => {
    if (audioVideo)
      await audioVideo.startAudioInput(micSelect.value);
  });

  document
    .getElementById("bgImage")
    .addEventListener("change", (e) => {
      selectedBackgroundImage = e.target.files[0];
      setStatus("Background image loaded.");
    });

  bgModeSelect.addEventListener("change", (e) =>
    applyBackground(e.target.value)
  );
});