add mediaSession, remove bindMediaKey

package-lock.json

@@ -25,6 +25,7 @@
         "@types/firefox-webext-browser": "70.0.1",
         "@types/jest": "^24.0.23",
         "@types/jquery": "^3.3.31",
+        "@types/wicg-mediasession": "^1.1.3",
         "@typescript-eslint/eslint-plugin": "^4.9.1",
         "@typescript-eslint/parser": "^4.9.1",
         "chromedriver": "^92.0.0",
@@ -2044,6 +2045,12 @@
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
       "dev": true
     },
+    "node_modules/@types/wicg-mediasession": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@types/wicg-mediasession/-/wicg-mediasession-1.1.3.tgz",
+      "integrity": "sha512-lzoszzJJfW9vcaIxf6tDx3lCJq/4oaD+mplA7sCV7W21PGdR6yUPwErN047ziIcwFx61w8WMURIwUyj1V7KJIQ==",
+      "dev": true
+    },
     "node_modules/@types/yargs": {
       "version": "13.0.7",
       "integrity": "sha512-Sg9kNeJz+V+W+0fugcVhHC+mNHnydDR1RJrW5Qn2jVrDQARF8wfPVqIqwEzZp+bneuEBIm2ClsJ1/je42ZBzSg==",
@@ -20547,6 +20554,12 @@
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
       "dev": true
     },
+    "@types/wicg-mediasession": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@types/wicg-mediasession/-/wicg-mediasession-1.1.3.tgz",
+      "integrity": "sha512-lzoszzJJfW9vcaIxf6tDx3lCJq/4oaD+mplA7sCV7W21PGdR6yUPwErN047ziIcwFx61w8WMURIwUyj1V7KJIQ==",
+      "dev": true
+    },
     "@types/yargs": {
       "version": "13.0.7",
       "integrity": "sha512-Sg9kNeJz+V+W+0fugcVhHC+mNHnydDR1RJrW5Qn2jVrDQARF8wfPVqIqwEzZp+bneuEBIm2ClsJ1/je42ZBzSg==",

package.json

@@ -20,6 +20,7 @@
     "@types/firefox-webext-browser": "70.0.1",
     "@types/jest": "^24.0.23",
     "@types/jquery": "^3.3.31",
+    "@types/wicg-mediasession": "^1.1.3",
     "@typescript-eslint/eslint-plugin": "^4.9.1",
     "@typescript-eslint/parser": "^4.9.1",
     "chromedriver": "^92.0.0",

public/_locales/en/messages.json

@@ -918,11 +918,5 @@
     },
     "youtubeKeybindWarning": {
         "message": "This is a built-in YouTube shortcut. Are you sure you want to use it?"
-    },
-    "bindMediaKey": {
-        "message": "Play/Pause Current Video with Media Keys"
-    },
-    "bindMediaKeyDescription": {
-        "message": "Enable this if your media keys stop working after the audio notification is played."
     }
 }

public/options/options.html

@@ -264,20 +264,6 @@
 					<div class="small-description">__MSG_audioNotificationDescription__</div>
 				</div>
 
-				<div data-type="toggle" data-sync="bindMediaKey" data-dependent-on="audioNotificationOnSkip">
-					<div class="switch-container">
-						<label class="switch">
-							<input id="bindMediaKey" type="checkbox" checked>
-							<span class="slider round"></span>
-						</label>
-						<label class="switch-label" for="bindMediaKey">
-							__MSG_bindMediaKey__
-						</label>
-					</div>
-
-					<div class="small-description">__MSG_bindMediaKeyDescription__</div>
-				</div>
-	
 				<div data-type="toggle" data-sync="showTimeWithSkips">
 					<div class="switch-container">
 						<label class="switch">

src/config.ts

@@ -37,7 +37,6 @@ interface SBConfig {
     minDuration: number,
     skipNoticeDuration: number,
     audioNotificationOnSkip: boolean,
-    bindMediaKey: boolean,
     checkForUnlistedVideos: boolean,
     testingServer: boolean,
     refetchWhenNotFound: boolean,
@@ -199,7 +198,6 @@ const Config: SBObject = {
         minDuration: 0,
         skipNoticeDuration: 4,
         audioNotificationOnSkip: false,
-        bindMediaKey: false,
         checkForUnlistedVideos: false,
         testingServer: false,
         refetchWhenNotFound: true,

src/content.ts

@@ -967,7 +967,8 @@ function getYouTubeVideoIDFromURL(url: string): string | boolean {
         return id.length == 11 ? id : false;
     } else if (urlObject.pathname.startsWith("/embed/") || urlObject.pathname.startsWith("/shorts/")) {
         try {
-            return urlObject.pathname.split("/")[2].slice(0, 11);
+            const id = urlObject.pathname.split("/")[2]
+            if (id?.length >=11 ) return id.slice(0, 11);
         } catch (e) {
             console.error("[SB] Video ID not valid for " + url);
             return false;
@@ -1272,9 +1273,14 @@ function skipToTime({v, skipTime, skippingSegments, openNotice, forceAutoSkip, u
     if (autoSkip && Config.config.audioNotificationOnSkip) {
         const beep = new Audio(chrome.runtime.getURL("icons/beep.ogg"));
         beep.volume = video.volume * 0.1;
+        const oldMetadata = navigator.mediaSession.metadata
         beep.play();
-        if (Config.config.audioNotificationOnSkip && Config.config.bindMediaKey)
+        beep.addEventListener("ended", () => {
-            window.addEventListener("keydown", mediaPauseListener);
+            navigator.mediaSession.metadata = null
+            setTimeout(() =>
+                navigator.mediaSession.metadata = oldMetadata
+            )
+        })
     }
 
     if (!autoSkip 
@@ -1985,7 +1991,6 @@ function sendRequestToCustomServer(type, fullAddress, callback) {
 function updateAdFlag(): void {
     const wasAdPlaying = isAdPlaying;
     isAdPlaying = document.getElementsByClassName('ad-showing').length > 0;
-
     if(wasAdPlaying != isAdPlaying) {
         updatePreviewBar();
         updateVisibilityOfPlayerControlsButton();
@@ -2039,9 +2044,4 @@ function checkForPreloadedSegment() {
             }
         }
     }
-}
-
-function mediaPauseListener(e: KeyboardEvent) {
-    if (e.key === "MediaPlayPause")
-        video?.paused ? video.play() : video.pause();
 }