diff --git a/YouTubeVolumeControl/content.js b/YouTubeVolumeControl/content.js index 1ceba34..e5d4d23 100644 --- a/YouTubeVolumeControl/content.js +++ b/YouTubeVolumeControl/content.js @@ -10,22 +10,39 @@ const playerReady = setInterval(() => { if (videoPlayer && leftControls && volumeSliderHandle) { clearInterval(playerReady); - // Retrieve the saved volume level from localStorage - let savedVolume = localStorage.getItem("youtubeVolume"); - savedVolume = - savedVolume !== null ? parseFloat(savedVolume) : videoPlayer.volume; + // Retrieve the saved volume level from YouTube's localStorage or sessionStorage key "yt-player-volume" + let ytVolumeData = + localStorage.getItem("yt-player-volume") || + sessionStorage.getItem("yt-player-volume"); + let savedVolume = videoPlayer.volume; + let savedMuted = videoPlayer.muted; + let expiration = Date.now() + 2592000000; // Default expiration in 30 days + let creation = Date.now(); + + if (ytVolumeData) { + try { + ytVolumeData = JSON.parse(ytVolumeData); + const data = JSON.parse(ytVolumeData.data); + savedVolume = data.volume / 100; // YouTube stores volume from 0 to 100 + savedMuted = data.muted; + expiration = ytVolumeData.expiration || expiration; + creation = ytVolumeData.creation || creation; + } catch (e) { + console.error("Failed to parse yt-player-volume:", e); + } + } - // Ensure savedVolume is within [0, 1] range for the video player's volume property + // Ensure savedVolume is within [0, 1] range videoPlayer.volume = Math.max(0, Math.min(1, savedVolume)); - videoPlayer.muted = videoPlayer.volume === 0; + videoPlayer.muted = savedMuted; - // Update the slider handle position to reflect the saved volume + // Update the slider handle position const updateSliderHandle = (volume) => { volumeSliderHandle.style.left = `${volume * 100}%`; }; updateSliderHandle(videoPlayer.volume); - // Also set the aria-valuenow attribute on the .ytp-volume-panel element + // Set the aria-valuenow attribute on the volume panel if (volumePanel) { volumePanel.setAttribute("aria-valuenow", videoPlayer.volume * 100); } @@ -79,7 +96,7 @@ const playerReady = setInterval(() => { ); // Handle volume change from input - let lastSetVolume = savedVolume; + let lastSetVolume = videoPlayer.volume; volumeInput.addEventListener("input", () => { let volume = parseInt(volumeInput.value, 10); volume = isNaN(volume) ? 100 : Math.max(0, Math.min(100, volume)); // Clamp between 0 and 100 @@ -88,11 +105,21 @@ const playerReady = setInterval(() => { videoPlayer.muted = volume === 0; lastSetVolume = videoPlayer.volume; - // Update the YouTube slider handle position + // Update the slider handle position updateSliderHandle(videoPlayer.volume); - // Save the new volume to localStorage - localStorage.setItem("youtubeVolume", lastSetVolume); + // Save the new volume to localStorage and sessionStorage + const ytVolumeObject = { + data: JSON.stringify({ + volume: volume, // Volume from 0 to 100 + muted: videoPlayer.muted, + }), + expiration: Date.now() + 2592000000, // Expires in 30 days + creation: Date.now(), + }; + const ytVolumeString = JSON.stringify(ytVolumeObject); + localStorage.setItem("yt-player-volume", ytVolumeString); + sessionStorage.setItem("yt-player-volume", ytVolumeString); }); // Update input value when volume changes from other controls @@ -102,14 +129,25 @@ const playerReady = setInterval(() => { ? 0 : Math.round(videoPlayer.volume * 100); - // Update the slider handle position to reflect volume changes + // Update the slider handle position updateSliderHandle(videoPlayer.volume); - // Save the volume to localStorage when it changes - localStorage.setItem("youtubeVolume", videoPlayer.volume); + // Save the volume to localStorage and sessionStorage + const volumePercent = Math.round(videoPlayer.volume * 100); + const ytVolumeObject = { + data: JSON.stringify({ + volume: volumePercent, + muted: videoPlayer.muted, + }), + expiration: Date.now() + 2592000000, + creation: Date.now(), + }; + const ytVolumeString = JSON.stringify(ytVolumeObject); + localStorage.setItem("yt-player-volume", ytVolumeString); + sessionStorage.setItem("yt-player-volume", ytVolumeString); }); - // Listen for changes to the muted property and restore volume on unmute + // Observe changes to the muted property const observer = new MutationObserver(() => { if (!videoPlayer.muted) { videoPlayer.volume = lastSetVolume;