Enhanced volume booster with closable panel, zoom feature, and improved stability - Fixed drag jump issue
# YouTube Volume Booster 600% Enhanced - Complete Feature Guide, Ctrl + Shift + V to reopen the panel.
## Overview
This is an advanced Tampermonkey/Greasemonkey userscript that enhances YouTube's audio capabilities by boosting volume up to 600% while providing a sophisticated, customizable control interface. The script uses the Web Audio API to amplify sound beyond YouTube's native 100% limit without quality loss.
---
## Core Features
### 1. **Volume Amplification (0% - 600%)**
- Extends YouTube's volume range from the default 100% to a maximum of 600%
- Uses Web Audio API with `GainNode` for high-quality audio processing
- Real-time volume adjustment with smooth transitions
- Maintains audio quality even at maximum amplification levels
### 2. **Elegant Floating Control Panel**
- **Modern Design**: Glassmorphism UI with gradient backgrounds, backdrop blur effects, and subtle shadows
- **Smooth Animations**: Fade-in/fade-out transitions with cubic-bezier easing for professional feel
- **Auto-hide Capability**: Panel appears only when video controls are visible, maintaining clean viewing experience
- **Visual Feedback**: Animated icons with pulse effects on interaction
### 3. **Draggable & Positionable Interface**
- **Free Positioning**: Click and drag the panel anywhere within the video player area
- **Smart Boundaries**: Automatically constrains panel within video player boundaries
- **Persistent Position**: Remembers panel location as percentage-based coordinates
- **Responsive Adjustment**: Automatically repositions when entering/exiting fullscreen or theater mode
- **Window Resize Handling**: Maintains relative position during browser window resizing
### 4. **Dynamic Zoom Feature**
- **Edge Hover Detection**: Hover near panel edges to activate zoom mode
- **Mouse Wheel Control**: Scroll up/down to zoom between 50% - 200% scale
- **Visual Indicator**: Magnifying glass emoji appears during zoom mode
- **Smooth Scaling**: CSS transform-based scaling with smooth transitions
- **Independent Zoom Storage**: Saves zoom level separately from position
### 5. **Global Volume Mode**
- **Tab-Wide Control**: Applies the same volume level across all YouTube videos in the current browser tab
- **Session Persistence**: Volume persists across video changes within the same tab
- **Unique Tab Identification**: Uses `crypto.randomUUID()` for reliable tab tracking
- **Toggle Icon**: Globe icon indicates when global mode is active (green highlight)
### 6. **Remember Per Video**
- **Individual Video Memory**: Saves unique volume settings for each video ID
- **Automatic Restoration**: Restores saved volume when revisiting a video
- **Efficient Storage**: Only stores non-default volumes (removes 100% entries)
- **Priority System**: Per-video settings override global volume when enabled
- **Bookmark Icon**: Visual indicator shows when feature is active
### 7. **Manual Save Button**
- **Explicit Save Control**: Save current volume for the specific video you're watching
- **Context-Aware**: Only enabled when "Remember Per Video" feature is active
- **Visual Confirmation**: Pulse animation confirms successful save operation
- **Floppy Disk Icon**: Classic save icon for intuitive recognition
### 8. **One-Time Restore Feature**
- **Browser Restart Recovery**: Automatically restores volume after browser crashes or force-closes
- **Session Detection**: Uses `sessionStorage` to track if restoration has occurred
- **Automatic Cleanup**: Clears restore data after successful restoration to prevent re-application
- **Priority Fallback**: Acts as middle-priority between per-video and global volumes
- **Refresh Icon**: Circular arrow icon indicates active state
### 9. **Bilingual Interface (English/Vietnamese)**
- **Instant Language Switch**: Toggle between English and Vietnamese with one click
- **Comprehensive Translation**: All tooltips, menu commands, and alerts fully translated
- **Persistent Preference**: Language choice saved across browser sessions
- **Globe Icon**: World map icon for language switching
### 10. **Close/Hide Panel**
- **Close Button**: Red circular button with X icon in top-right corner
- **Keyboard Shortcut**: Press `Ctrl+Shift+V` to show panel again after closing
- **Smooth Transitions**: Fade-out animation when closing
- **State Persistence**: Remembers visibility preference across sessions
- **Menu Command**: Right-click Tampermonkey icon → "Show Volume Booster Panel"
### 11. **Position & Size Saving**
- **Save Icon**: Floppy disk icon stores current position and zoom level
- **Percentage-Based Storage**: Saves coordinates as percentages for cross-resolution compatibility
- **Scale Display**: Tooltip shows current zoom percentage (e.g., "Save position & size (125%)")
- **Manual Control**: Only saves when explicitly clicked, preventing accidental overrides
---
## Advanced Technical Features
### 12. **Smart Video Detection**
- **URL Monitoring**: Watches for `/watch` path and video ID parameter changes
- **Multiple Detection Methods**:
- MutationObserver for DOM changes
- YouTube's custom events (`yt-page-data-updated`, `yt-navigate-finish`)
- Standard browser load events
- **Debounced Initialization**: 100ms debounce prevents duplicate processing
### 13. **Fullscreen & Theater Mode Handling**
- **Multi-Method Detection**:
- Standard Fullscreen API events (all browser prefixes)
- YouTube's theater mode class changes
- `ytd-watch-flexy` attribute monitoring
- **Automatic Repositioning**: Panel maintains relative position during view mode changes
- **Smooth Transitions**: 300ms delay allows smooth repositioning after mode change
### 14. **Performance Optimizations**
- **RequestAnimationFrame**: Uses RAF for smooth position updates and rendering
- **Debounced Resize Handler**: 150ms debounce prevents excessive calculations
- **Efficient Storage**: Only non-default values stored to minimize data footprint
- **Conditional Processing**: Features only activate when needed
### 15. **Data Management Menu Commands**
- **Clear "Remember Per Video" Storage**: Removes all saved per-video volume settings
- **Clear Toolbar Position**: Resets panel position and zoom to defaults
- **Confirmation Dialogs**: Prevents accidental data deletion
- **Accessible via Tampermonkey**: Right-click userscript icon for menu access
---
## Feature Priority System
When multiple features are enabled, volume is determined in this order:
1. **Remember Per Video** (highest priority) - if enabled and video has saved volume
2. **One-Time Restore** - if browser was restored and feature is enabled
3. **Global Volume** - if enabled, uses tab-wide volume
4. **Default** (100%) - fallback when no features apply
---
## Visual Design Elements
- **Color Scheme**: Dark theme with red accent (volume slider thumb)
- **Animations**: Hover effects, scale transitions, pulse animations on clicks
- **Icons**: SVG-based mask icons for crisp rendering at any scale
- **Shadows**: Layered box-shadows for depth perception
- **Blur Effects**: Backdrop-filter for modern glassmorphism appearance
---
## Browser Compatibility
- **Storage**: Uses GM_setValue/GM_getValue for cross-browser compatibility
- **Audio API**: Supports both AudioContext and webkitAudioContext
- **Fullscreen**: Handles all vendor-prefixed fullscreen events
- **Session Storage**: Uses sessionStorage for tab-specific tracking
---
This script transforms YouTube's audio experience with professional-grade controls while maintaining elegant design and robust functionality across all viewing modes.
