sponsorblock: add skip notifications

FriedChickenButt · Jun 9, 2021 · 99d4103 · 99d4103
1 parent cf814b5
commit 99d4103
Show file tree

Hide file tree

Showing 3 changed files with 94 additions and 55 deletions.
diff --git a/src/sponsorblock.js b/src/sponsorblock.js
@@ -1,60 +1,39 @@
 import sha256 from 'tiny-sha256';
 import {configRead} from './config';
+import {showNotification} from './ui';
 
 // Copied from https://github.com/ajayyy/SponsorBlock/blob/9392d16617d2d48abb6125c00e2ff6042cb7bebe/src/config.ts#L179-L233
 const barTypes = {
-    "preview-chooseACategory": {
-        color: "#ffffff",
-        opacity: "0.7"
-    },
-    "sponsor": {
-        color: "#00d400",
-        opacity: "0.7"
-    },
-    "preview-sponsor": {
-        color: "#007800",
-        opacity: "0.7"
-    },
-    "intro": {
-        color: "#00ffff",
-        opacity: "0.7"
-    },
-    "preview-intro": {
-        color: "#008080",
-        opacity: "0.7"
-    },
-    "outro": {
-        color: "#0202ed",
-        opacity: "0.7"
-    },
-    "preview-outro": {
-        color: "#000070",
-        opacity: "0.7"
-    },
-    "interaction": {
-        color: "#cc00ff",
-        opacity: "0.7"
-    },
-    "preview-interaction": {
-        color: "#6c0087",
-        opacity: "0.7"
-    },
-    "selfpromo": {
-        color: "#ffff00",
-        opacity: "0.7"
-    },
-    "preview-selfpromo": {
-        color: "#bfbf35",
-        opacity: "0.7"
-    },
-    "music_offtopic": {
-        color: "#ff9900",
-        opacity: "0.7"
-    },
-    "preview-music_offtopic": {
-        color: "#a6634a",
-        opacity: "0.7"
-    }
+  "sponsor": {
+    color: "#00d400",
+    opacity: "0.7",
+    name: "sponsored segment",
+  },
+  "intro": {
+    color: "#00ffff",
+    opacity: "0.7",
+    name: "intro",
+  },
+  "outro": {
+    color: "#0202ed",
+    opacity: "0.7",
+    name: "outro",
+  },
+  "interaction": {
+    color: "#cc00ff",
+    opacity: "0.7",
+    name: "interaction reminder",
+  },
+  "selfpromo": {
+    color: "#ffff00",
+    opacity: "0.7",
+    name: "self-promotion",
+  },
+  "music_offtopic": {
+    color: "#ff9900",
+    opacity: "0.7",
+    name: "non-music part",
+  },
 };
 
 class SponsorBlockHandler {
@@ -180,7 +159,8 @@ class SponsorBlockHandler {
         return;
       }
 
-      console.info(this.videoID, 'Skipping', nextSegments[0]);
+      const skipName = barTypes[segment.category]?.name || segment.category;
+      showNotification(`Skipping ${skipName}`);
       this.video.currentTime = end;
       this.scheduleSkip();
     }, (start - this.video.currentTime) * 1000);

diff --git a/src/ui.css b/src/ui.css
@@ -9,8 +9,8 @@
     color: white;
     border-radius: 20px;
     padding: 20px;
-    z-index: 9999;
     font-size: 1.5rem;
+    z-index: 1000;
 }
 
 .ytaf-ui-container :focus {
@@ -32,3 +32,31 @@
     display: block;
     font-size: 2rem;
 }
+
+.ytaf-notification-container {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  font-size: 16pt;
+  z-index: 1200;
+}
+
+.ytaf-notification-container .message {
+  background: rgba(0,0,0,0.7);
+  color: white;
+  padding: 1em;
+  margin: 0.5em;
+  transition: all 0.3s ease-in-out;
+  opacity: 1;
+  line-height: 1;
+  border-right: 10px solid rgba(50,255,50,0.3);
+  display: inline-block;
+  float: right;
+}
+
+.ytaf-notification-container .message-hidden {
+  opacity: 0;
+  margin: 0 0.5em;
+  padding: 0 1em;
+  line-height: 0;
+}
diff --git a/src/ui.js b/src/ui.js
@@ -8,7 +8,6 @@ window.__spatialNavigation__.keyMode = 'NONE';
 const ARROW_KEY_CODE = {37: 'left', 38: 'up', 39: 'right', 40: 'down'};
 
 const uiContainer = document.createElement('div');
-
 uiContainer.classList.add('ytaf-ui-container');
 uiContainer.style['display'] = 'none';
 uiContainer.setAttribute('tabindex', 0);
@@ -77,3 +76,35 @@ const eventHandler = (evt) => {
 document.addEventListener("keydown", eventHandler, true);
 document.addEventListener("keypress", eventHandler, true);
 document.addEventListener("keyup", eventHandler, true);
+
+
+export function showNotification(text, time=3000) {
+  if (!document.querySelector('.ytaf-notification-container')) {
+    console.info('Adding notification container');
+    const c = document.createElement('div');
+    c.classList.add('ytaf-notification-container');
+    document.body.appendChild(c);
+  }
+
+  const elm = document.createElement('div');
+  const elmInner = document.createElement('div');
+  elmInner.innerText = text;
+  elmInner.classList.add('message');
+  elmInner.classList.add('message-hidden');
+  elm.appendChild(elmInner);
+  document.querySelector('.ytaf-notification-container').appendChild(elm);
+
+  setTimeout(() => {
+    elmInner.classList.remove('message-hidden');
+  }, 100);
+  setTimeout(() => {
+    elmInner.classList.add('message-hidden');
+    setTimeout(() => {
+      elm.remove();
+    }, 1000);
+  }, time);
+}
+
+setTimeout(() => {
+  showNotification('Press [GREEN] to open YTAF configuration screen');
+}, 500);