BubbleCam/popup.js

//popup.js
document.addEventListener('DOMContentLoaded', function() {
  const cameraMode = document.getElementById('camera-mode');
  const avatarMode = document.getElementById('avatar-mode');
  const avatarSection = document.getElementById('avatar-section');
  const avatarInput = document.getElementById('avatar-input');
  const avatarPreview = document.getElementById('avatar-img');
  
  // Mode switching
  cameraMode.addEventListener('click', () => {
      cameraMode.classList.add('active');
      avatarMode.classList.remove('active');
      avatarSection.style.display = 'none';
      chrome.storage.local.set({ mode: 'camera' });
      chrome.runtime.sendMessage({ type: 'mode-change', mode: 'camera' });
  });

  avatarMode.addEventListener('click', () => {
      avatarMode.classList.add('active');
      cameraMode.classList.remove('active');
      avatarSection.style.display = 'flex';
      chrome.storage.local.set({ mode: 'avatar' });
      chrome.runtime.sendMessage({ type: 'mode-change', mode: 'avatar' });
  });

  // Avatar upload handling
  avatarInput.addEventListener('change', function(e) {
      const file = e.target.files[0];
      if (file) {
          const reader = new FileReader();
          reader.onload = function(e) {
              const avatarData = e.target.result;
              avatarPreview.src = avatarData;
              chrome.storage.local.set({ avatarData: avatarData });
              chrome.runtime.sendMessage({ 
                  type: 'avatar-update', 
                  avatarData: avatarData 
              });
          };
          reader.readAsDataURL(file);
      }
  });

  // Load saved mode and avatar
  chrome.storage.local.get(['mode', 'avatarData'], function(data) {
      if (data.mode === 'avatar') {
          avatarMode.click();
          if (data.avatarData) {
              avatarPreview.src = data.avatarData;
          }
      }
  });
});

const recordTab = document.querySelector("#tab");
const recordScreen = document.querySelector("#screen");
const qualitySelect = document.querySelector('#quality');

const injectCamera = async () => {
  const tab = await chrome.tabs.query({ active: true, currentWindow: true });
  if (!tab) return;

  const tabId = tab[0].id;
  console.log("Injecting into tab", tabId);
  await chrome.scripting.executeScript({
      files: ["content.js"],
      target: { tabId },
  });
};

// Initialize camera bubble when popup opens
injectCamera();

const removeCamera = async () => {
  
  const tab = await chrome.tabs.query({ active: true, currentWindow: true });
  if (!tab) return;

  const tabId = tab[0].id;
  console.log("inject into tab", tabId);
  await chrome.scripting.executeScript({
    func: () => {
      const camera = document.querySelector("#purple-camera");
      if (!camera) return;
      camera.remove();
      document.querySelector("#purple-camera").style.display = "none";
    },
    target: { tabId },
  });
};




const checkRecording = async () => {
  const recording = await chrome.storage.local.get(["recording", "type"]);
  const recordingStatus = recording.recording || false;
  const recordingType = recording.type || "";
  console.log("recording status", recordingStatus, recordingType);
  return [recordingStatus, recordingType];
};

const init = async () => {
  const recordingState = await checkRecording();

  console.log("recording state", recordingState);

  if (recordingState[0] === true) {
    document.querySelector("#options").style.display = "none";
    if (recordingState[1] === "tab") {
     
      document.getElementById("tab-icon").classList.remove("fa-window-maximize");
      document.getElementById("tab-icon").classList.remove("fa-regular");
      document.getElementById("tab-icon").classList.add("fa-solid");
      document.getElementById("tab-icon").classList.add("fa-stop");
    } else {
      
      document.getElementById("screen-icon").classList.remove("fa-display");
      document.getElementById('screen-icon').classList.add("fa-stop");
    }
  } else {
    document.querySelector("#options").style.display = "block";
  }

  const updateRecording = async (type) => {
    console.log("start recording", type);

    const quality = qualitySelect.value;

    const recordingState = await checkRecording();

    if (recordingState[0] === true) {
     
      chrome.runtime.sendMessage({ type: "stop-recording" });
      removeCamera();
    } else {
      chrome.runtime.sendMessage({
        type: "start-recording",
        recordingType: type,
        quality: quality
      });
      injectCamera();
    }


    setTimeout(() => {
      window.close();
    }, 100);
  };

  recordTab.addEventListener("click", async () => {
    console.log("updateRecording tab clicked");
    updateRecording("tab");
  });

  recordScreen.addEventListener("click", async () => {
    console.log("updateRecording screen clicked");
    updateRecording("screen");
  });
};

init();