dark mode

inject.js

@@ -249,6 +249,7 @@ function defineVideoController() {
         }
       } else if (event.type === "pause" || event.type === "ended") {
         this.stopSubtitleNudge();
+        tc.isNudging = false;
       }
 
       // For seek events, don't mess with speed
@@ -369,17 +370,27 @@ function defineVideoController() {
       this.stopSubtitleNudge();
       return;
     }
+    // Additional  check to not start if paused
+    if (this.video.paused) {
+      return;
+    }
     log(`Nudge: Starting interval: ${tc.settings.subtitleNudgeInterval}ms.`, 5);
     this.nudgeIntervalId = setInterval(() => {
       if (
         !this.video ||
         this.video.paused ||
+        this.video.ended ||
         this.video.playbackRate === 1.0 ||
         tc.isNudging
       ) {
         this.stopSubtitleNudge();
         return;
       }
+      // Double-check pause state before nudging
+      if (this.video.paused) {
+        this.stopSubtitleNudge();
+        return;
+      }
       const currentRate = this.video.playbackRate;
       const nudgeAmount = tc.settings.subtitleNudgeAmount;
       tc.isNudging = true;

manifest.json

@@ -1,7 +1,7 @@
 {
   "name": "Video Speed Controller",
   "short_name": "videospeed",
-  "version": "1.5.1",
+  "version": "1.6.1",
   "manifest_version": 2,
   "description": "Speed up, slow down, advance and rewind HTML5 audio/video with shortcuts",
   "homepage_url": "https://github.com/SoPat712/videospeed",

options.css

@@ -5,6 +5,7 @@ body {
   font-family: sans-serif;
   font-size: 12px;
   color: rgb(48, 57, 66);
+  background-color: white;
 }
 
 h1,
@@ -110,3 +111,76 @@ select {
   color: transparent;
   text-shadow: 0 0 0 #000000;
 }
+
+/* Dark mode styles */
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #1a1a1a;
+    color: #e0e0e0;
+  }
+
+  h3 {
+    color: #ffffff;
+  }
+
+  header {
+    border-bottom: 1px solid #333;
+    background: linear-gradient(#1a1a1a, #1a1a1a 40%, rgba(26, 26, 26, 0.92));
+  }
+
+  button {
+    background-image: linear-gradient(#404040, #404040 38%, #353535);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08),
+      inset 0 1px 2px rgba(0, 0, 0, 0.75);
+    color: #e0e0e0;
+    text-shadow: 0 1px 0 rgb(20, 20, 20);
+  }
+
+  button:hover {
+    background-image: linear-gradient(#4a4a4a, #4a4a4a 38%, #3f3f3f);
+  }
+
+  input[type="text"], 
+  input[type="checkbox"],
+  select,
+  textarea {
+    background-color: #2a2a2a;
+    color: #e0e0e0;
+    border: 1px solid #555;
+  }
+
+  input[type="text"]:focus,
+  select:focus,
+  textarea:focus {
+    background-color: #333;
+    border-color: #777;
+    outline: none;
+  }
+
+  select option {
+    background-color: #2a2a2a;
+    color: #e0e0e0;
+  }
+
+  .customKey {
+    color: transparent;
+    text-shadow: 0 0 0 #e0e0e0;
+  }
+
+  #status {
+    color: #888;
+  }
+
+  a {
+    color: #66b3ff;
+  }
+
+  a:visited {
+    color: #cc99ff;
+  }
+
+  hr {
+    border-color: #333;
+  }
+}

popup.css

@@ -1,5 +1,7 @@
 body {
   min-width: 8em;
+  background-color: white;
+  color: #333;
 }
 
 hr {
@@ -32,3 +34,35 @@ button {
 .hide {
   display: none;
 }
+/* Dark mode styles */
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: #1a1a1a;
+    color: #e0e0e0;
+  }
+
+  hr {
+    border-top: 1px solid rgba(255, 255, 255, 0.3);
+  }
+
+  button {
+    background-image: linear-gradient(#404040, #404040 38%, #353535);
+    border: 1px solid rgba(255, 255, 255, 0.25);
+    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08),
+      inset 0 1px 2px rgba(0, 0, 0, 0.75);
+    color: #e0e0e0;
+    text-shadow: 0 1px 0 rgb(20, 20, 20);
+  }
+
+  button:hover {
+    background-image: linear-gradient(#4a4a4a, #4a4a4a 38%, #3f3f3f);
+  }
+
+  button:active {
+    background-image: linear-gradient(#353535, #353535 38%, #2a2a2a);
+  }
+
+  #status {
+    color: #ccc;
+  }
+}