feat: Remove tabs permission, add reset via logo

Fixes #13 temporarily. Will resubmit to the Chrome Web Store after this change. Users can now reset the video onscreen and the extension properties by clicking the Dance Monkey icon. I'd like to create a more intuitive method of doing this, though! I may switch to using browser local storage to save default configurations for saved videos once I implement the Saved Videos page.
tararoshan · Mar 5, 2024 · dd1fdc8 · dd1fdc8
1 parent 37c7351
commit dd1fdc8
Show file tree

Hide file tree

Showing 5 changed files with 45 additions and 5 deletions.
diff --git a/chrome_dance_monkey.zip b/chrome_dance_monkey.zip
diff --git a/firefox_dance_monkey.zip b/firefox_dance_monkey.zip
diff --git a/manifest.json b/manifest.json
@@ -15,8 +15,7 @@
     },
     "permissions": [
         "scripting",
-        "storage",
-        "tabs"
+        "storage"
     ],
     "host_permissions": [
         "*://*.youtube.com/*",

diff --git a/popup/popup.html b/popup/popup.html
@@ -17,7 +17,7 @@
 
 <body>
     <div class="title-div">
-        <img class="title-icon icon" src="../assets/icon.svg">
+        <img id="dm-logo" class="title-icon icon" src="../assets/icon.svg">
         <h1 class="title-text">dance monkey</h1>
     </div>
 

diff --git a/popup/popup.js b/popup/popup.js
@@ -1,4 +1,4 @@
-// popup.js - BACKGROUND SCRIPT
+// popup.js - BACKGROUND SCRIPT (mostly, see end)
 
 /**
  * Note: chrome doesn't debug background scripts properly for manifest v3, see
@@ -16,6 +16,9 @@ var browser = chrome || browser;
 /**
  * ADD EVENT LISTENERS TO EXTENSION ELEMENTS
  */
+var dmLogo = document.getElementById("dm-logo");
+dmLogo.addEventListener("click", logoHandler);
+
 var mirrorCheckbox = document.getElementById("mirror-checkbox");
 mirrorCheckbox.addEventListener("change", mirrorHandler);
 
@@ -42,6 +45,38 @@ var delayNumInput = document.getElementById("delay-num");
 // Make the styles on the extension reflect those on the video
 loadStylesFromStorage();
 
+/**
+ * LOGO HANDLER - CLEAR ALL PROPERTIES
+ */
+async function logoHandler() {
+	// Clear values from storage and reset affected video elements
+	browser.storage.session.clear();
+	// Clear mirror
+	if (mirrorCheckbox.checked) {
+		// Remove the mutation observer, reset the video
+		mirrorCheckbox.checked = false;
+		mirrorHandler();
+	}
+	// Clear playback speed
+	speedNumInput.value = 1;
+	speedHandler.bind(!SLIDER_INPUT)();
+	// Clear loop -- if out of bounds of video duration, clears the loop 
+	let loopStartTime = 0;
+	let loopStopTime = Number.MAX_SAFE_INTEGER;
+	browser.scripting.executeScript({
+		args: [loopStartTime, loopStopTime],
+		func: loopVideoContentScript,
+		target: {
+			tabId: await getActiveTabId(),
+			allFrames: true,
+		},
+	});
+	loopStartMinsec.value = "";
+	loopStopMinsec.value = "";
+	// Clear delay
+	delayNumInput.value = 0;
+}
+
 /**
  * MIRROR VIDEO HANDLER
  */
@@ -230,7 +265,13 @@ async function getActiveTabId() {
 }
 
 /**
- *
+ * Clears the previous loop and starts looping with the new start and stop time.
+ * If the stop time is past the end of the video, loops to the end of the video.
+ * 
+ * Note that this function is a content script and runs in the same context as
+ * the scripts in observerContent.js. I'll move it there later when I clean up
+ * the code!
+ * 
  * @param {*} loopStartTime
  * @param {*} loopStopTime
  */