tweaks

Author: dannyhope

.gitignore

@@ -0,0 +1 @@
+icons/.DS_Store

content.js

@@ -3,8 +3,12 @@ class VideoSpeedController {
         this.defaultSpeeds = [0.05, 0.1, 0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 3, 4, 6, 10];
         this.speeds = [...this.defaultSpeeds];
         this.currentSpeedIndex = this.speeds.indexOf(1);
+        this.previousSpeedIndex = null;
+        this.longPressTimer = null;
+        this.settings = null;
         this.overlay = this.createOverlay();
-        this.loadCustomSpeeds();
+        this.controls = this.createControls();
+        this.loadSettings();
         this.setupEventListeners();
     }
 
@@ -16,11 +20,59 @@ class VideoSpeedController {
         return overlay;
     }
 
-    async loadCustomSpeeds() {
-        const result = await chrome.storage.sync.get('customSpeeds');
-        if (result.customSpeeds) {
-            this.speeds = [...new Set([...this.defaultSpeeds, ...result.customSpeeds])].sort((a, b) => a - b);
-            this.currentSpeedIndex = this.speeds.indexOf(1);
+    createControls() {
+        const controls = document.createElement('div');
+        controls.className = 'video-speed-controls';
+        controls.innerHTML = `
+            <button class="speed-down" title="Decrease speed">
+                <span class="icon">-</span>
+                <span class="shortcut"></span>
+            </button>
+            <button class="speed-reset" title="Reset to normal speed">
+                <span class="icon">1×</span>
+                <span class="shortcut"></span>
+            </button>
+            <button class="speed-up" title="Increase speed">
+                <span class="icon">+</span>
+                <span class="shortcut"></span>
+            </button>
+        `;
+        document.body.appendChild(controls);
+        return controls;
+    }
+
+    async loadSettings() {
+        const defaultSettings = {
+            customSpeeds: this.defaultSpeeds,
+            shortcuts: {
+                speedUp: 'd',
+                speedDown: 's',
+                reset: 'r'
+            },
+            enableNumberShortcuts: true,
+            showSpeedButtons: true,
+            showShortcutHints: true
+        };
+
+        const result = await chrome.storage.sync.get(defaultSettings);
+        this.settings = result;
+        this.speeds = [...new Set([...this.defaultSpeeds, ...result.customSpeeds])].sort((a, b) => a - b);
+        this.currentSpeedIndex = this.speeds.indexOf(1);
+        this.updateControlsVisibility();
+        this.updateShortcutHints();
+    }
+
+    updateControlsVisibility() {
+        this.controls.style.display = this.settings.showSpeedButtons ? 'flex' : 'none';
+    }
+
+    updateShortcutHints() {
+        if (this.settings.showShortcutHints) {
+            this.controls.querySelector('.speed-down .shortcut').textContent = `[${this.settings.shortcuts.speedDown}]`;
+            this.controls.querySelector('.speed-reset .shortcut').textContent = `[${this.settings.shortcuts.reset}]`;
+            this.controls.querySelector('.speed-up .shortcut').textContent = `[${this.settings.shortcuts.speedUp}]`;
+        } else {
+            this.controls.querySelectorAll('.shortcut').forEach(el => el.textContent = '');
         }
     }
 
@@ -31,21 +83,56 @@ class VideoSpeedController {
             const video = document.querySelector('video');
             if (!video) return;
 
-            if (e.key === 's') {
-                this.changeSpeed(video, -1);
-            } else if (e.key === 'd') {
+            const key = e.key.toLowerCase();
+            
+            if (key === this.settings.shortcuts.speedUp) {
                 this.changeSpeed(video, 1);
+            } else if (key === this.settings.shortcuts.speedDown) {
+                this.changeSpeed(video, -1);
+            } else if (key === this.settings.shortcuts.reset) {
+                this.resetSpeed(video);
+            } else if (this.settings.enableNumberShortcuts && /^[1-9]$/.test(key)) {
+                this.jumpToSpeed(video, parseInt(key) - 1);
             }
         });
 
-        // Listen for custom speed updates
+        // Button click handlers
+        this.controls.querySelector('.speed-down').addEventListener('click', () => {
+            const video = document.querySelector('video');
+            if (video) this.changeSpeed(video, -1);
+        });
+
+        this.controls.querySelector('.speed-up').addEventListener('click', () => {
+            const video = document.querySelector('video');
+            if (video) this.changeSpeed(video, 1);
+        });
+
+        this.controls.querySelector('.speed-reset').addEventListener('click', () => {
+            const video = document.querySelector('video');
+            if (video) this.resetSpeed(video);
+        });
+
+        // Listen for settings updates
         chrome.storage.onChanged.addListener((changes) => {
-            if (changes.customSpeeds) {
-                this.loadCustomSpeeds();
-            }
+            this.loadSettings();
         });
     }
 
+    resetSpeed(video) {
+        this.currentSpeedIndex = this.speeds.indexOf(1);
+        video.playbackRate = 1;
+        this.showSpeedIndicator(1);
+    }
+
+    jumpToSpeed(video, index) {
+        if (index >= 0 && index < this.speeds.length) {
+            this.currentSpeedIndex = index;
+            const newSpeed = this.speeds[this.currentSpeedIndex];
+            video.playbackRate = newSpeed;
+            this.showSpeedIndicator(newSpeed);
+        }
+    }
+
     changeSpeed(video, direction) {
         this.currentSpeedIndex = Math.max(0, Math.min(this.speeds.length - 1, this.currentSpeedIndex + direction));
         const newSpeed = this.speeds[this.currentSpeedIndex];

docs/user-stories.md

@@ -0,0 +1,52 @@
+# Video Speed Controller - User Stories
+
+## Done
+
+### Core Speed Control
+- As a user, I want to press 'd' to increase video playback speed, so I can watch videos faster
+- As a user, I want to press 's' to decrease video playback speed, so I can watch videos slower
+- As a user, I want to long-press 'd' to jump to maximum speed that the browser supports, so I can quickly skip through unimportant sections
+- As a user, I want to press 's' after using max speed to return to my previous speed, so I can resume watching at my preferred pace
+- As a user, I want visual feedback showing my current playback speed, so I know how fast the video is playing
+
+### Speed Customization
+- As a user, I want to access a settings page to customize my available playback speeds
+- As a user, I want to add my own custom speeds to the list of available speeds
+- As a user, I want my custom speeds to persist between browser sessions
+- As a user, I want to see my custom speeds displayed in a clear list format
+- As a user, I want validation on my custom speeds to ensure they're between 0.05x and 16x
+
+### User Interface
+- As a user, I want an unobtrusive overlay that shows my current speed briefly when I change it
+- As a user, I want the speed controls to be disabled when I'm typing in input fields or text areas
+- As a user, I want to see the version and build number in the options page
+- As a user, I want the interface to use system fonts and have a clean, modern appearance
+
+### Default Behavior
+- As a user, I want a sensible set of default speeds (0.05, 0.1×, 0.25×, 0.5×, 0.75×, 1×, 1.25×, 1.5×, 2×, 5×, 10×, 16×) when I haven't set custom speeds
+- As a user, I want the video to start at normal (1x) speed by default
+- As a user, I want the speed overlay to automatically fade out after showing the current speed
+
+### Technical Requirements
+- The extension should work on all websites with HTML5 video players
+- The extension should maintain state using Chrome's storage sync API
+- The extension should follow semantic versioning (major.minor.build)
+- The extension should be lightweight and not impact page performance
+
+## Later
+
+### Keyboard Shortcuts
+- As a user, I want to customize my keyboard shortcuts, so I can use keys that feel natural to me
+- As a user, I want a keyboard shortcut to reset to normal (1x) speed, so I can quickly return to default
+- As a user, I want to use number keys 1-9 to jump directly to specific speeds, so I can change speed more efficiently
+
+### Advanced Features
+- As a user, I want to save different speed presets for different websites, so I can have site-specific defaults
+- As a user, I want to remember my last used speed per website, so I don't have to reset it each visit
+- As a user, I want to see a small speed indicator permanently in the corner (toggleable), so I always know my current speed
+- As a user, I want to control video speed with mouse wheel + modifier key, so I can adjust speed without keyboard
+
+### User Experience
+- As a user, I want to import/export my speed settings, so I can backup or share my configuration
+- As a user, I want to see a tutorial on first use, so I can learn the controls quickly
+- As a user, I want to see keyboard shortcut hints in the options page, so I can remember all available controls

icons/bug.svg

@@ -1,15 +1,23 @@
 {
-  "manifest_version": 3,
+  "manifest_version": 2,
   "name": "Video Speed Controller",
   "version": "1.0",
-  "description": "Control video playback speed with keyboard shortcuts",
-  "permissions": ["storage"],
+  "description": "Control video playback speed with customizable keyboard shortcuts",
+  "permissions": [
+    "storage",
+    "activeTab"
+  ],
+  "options_page": "options.html",
   "content_scripts": [
     {
       "matches": ["<all_urls>"],
       "css": ["styles.css"],
       "js": ["content.js"]
     }
   ],
-  "options_page": "options.html"
+  "icons": {
+    "16": "icons/icon-16.png",
+    "48": "icons/icon-48.png",
+    "128": "icons/icon-128.png"
+  }
 }