content.js

import {
    processPageElements,
    addZoneOverlays,
    removeZoneOverlays,
} from "./utils";
import { Zone } from "./model";

// Subdivision of zones
document.addEventListener("click", (e) => {
    const zoneEl = e.target.closest("[zone]");
    if (zoneEl) {
        e.stopPropagation();
        console.log(zoneEl);
    }
});

// ---- Zone overlays
let volumeMouseMoveListener = null;

browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
    if (message.action === "getPage") {
        let startTime = performance.now();
        const html = processPageElements();
        console.log(
            ` > Page processing time: ${performance.now() - startTime}ms`
        );
        sendResponse({ url: window.location.href, html: html });
    }

    if (message.action === "toggleOverlays") {
        if (message.checked) {
            addZoneOverlays();
            sendResponse({ success: true });
        }
        if (!message.checked) {
            removeZoneOverlays();
            sendResponse({ success: true });
        }
    }

    if (message.action === "play") {
        const zoneElements = document.querySelectorAll("[zone]");
        const zones = Array.from(zoneElements).map((el) => new Zone(el));

        zones.forEach((zone) => zone.playAudio());

        let lastMouseX = window.innerWidth / 2;
        let lastMouseY = window.innerHeight / 2;
        let stopTimeout = null;

        const updateVolumes = (currentX, currentY, previousX, previousY) => {
            zones.forEach((zone) =>
                zone.updateVolume(currentX, currentY, previousX, previousY)
            );
        };

        const movementTimeOut = 250;
        const volumeMouseMoveListener = (e) => {
            const currentX = e.clientX;
            const currentY = e.clientY;
            updateVolumes(currentX, currentY, lastMouseX, lastMouseY);
            lastMouseX = currentX;
            lastMouseY = currentY;

            if (stopTimeout) clearTimeout(stopTimeout);
            stopTimeout = setTimeout(() => {
                updateVolumes(lastMouseX, lastMouseY, lastMouseX, lastMouseY);
            }, movementTimeOut);
        };

        document.addEventListener("mousemove", volumeMouseMoveListener);

        sendResponse({ status: "playing" });
    }

    if (message.action === "stop") {
        const audioElements = document.querySelectorAll("[zone] audio");

        if (audioElements.length > 0) {
            if (volumeMouseMoveListener) {
                document.removeEventListener(
                    "mousemove",
                    volumeMouseMoveListener
                );
                volumeMouseMoveListener = null;
            }
            audioElements.forEach((audio) => {
                if (typeof audio.pause === "function") {
                    audio.pause();
                    audio.currentTime = 0;
                } else {
                    console.warn(
                        "Audio element within zone did not support pause()"
                    );
                }
            });
            sendResponse({ status: "stopped" });
        } else {
            console.error(
                "No audio elements found within elements with a 'zone' attribute"
            );
            sendResponse({
                status: "error",
                message: "No audio element found.",
            });
        }
    }
});