BubbleCam/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');

  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' });
  });

  // Fix the avatar upload functionality
  avatarInput.addEventListener('change', function(e) {
    console.log("File input changed"); // Add this debug line
    const file = e.target.files[0];
    if (!file) {
      console.log("No file selected");
      return;
    }
    
    console.log("File selected:", file.name); // Add this debug line
    
    if (!file.type.match('image.*')) {
      alert('Please select an image file');
      return;
    }
    
    if (file.size > 2 * 1024 * 1024) {
      alert('Image is too large. Please select an image under 2MB.');
      return;
    }

    const reader = new FileReader();
    reader.onload = function(e) {
      try {
        const avatarData = e.target.result;
        console.log("File loaded successfully"); // Add this debug line
        
        avatarPreview.src = avatarData;
        avatarPreview.style.display = 'block';
        
        // Store the avatar data in Chrome storage
        chrome.storage.local.set({ avatarData: avatarData }, function() {
          if (chrome.runtime.lastError) {
            console.error('Error saving avatar:', chrome.runtime.lastError);
            return;
          }
          
          console.log("Avatar saved to storage"); // Add this debug line
          
          // Notify any active content scripts about the avatar change
          chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
            if (tabs[0]?.id) {
              chrome.runtime.sendMessage({ 
                type: 'avatar-update', 
                avatarData: avatarData 
              });
            }
          });
        });
      } catch (error) {
        console.error('Error processing avatar:', error);
        alert('There was an error processing your image. Please try another.');
      }
    };
    
    reader.onerror = function() {
      console.error('Error reading file');
      alert('Error reading the image file. Please try again.');
    };
    
    reader.readAsDataURL(file);
  });



  chrome.storage.local.get(['mode', 'avatarData'], function(data) {

      if (data.mode === 'avatar') {
          avatarMode.click();
      } else {
          cameraMode.click();
      }

      if (data.avatarData) {
          avatarPreview.src = data.avatarData;
          avatarPreview.style.display = 'block';
      } else {
         
          avatarPreview.src = 'avatar.png';
          avatarPreview.style.display = 'block';
      }
  });
});

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 },
  });
};


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("#camera-wrapper");
      if (camera) camera.remove();
    },
    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();