vidply 1.0.1 → 1.0.2

package/README.md

@@ -21,6 +21,9 @@ A modern, feature-rich video player built with vanilla ES6 JavaScript. Combines
 ### Accessibility Features
 - **Full Keyboard Navigation** - WCAG 2.1 compliant
 - **Screen Reader Support** - Complete ARIA labels
+- **Interactive Transcripts** - Click-to-seek transcript window
+- **Sign Language Overlay** - Picture-in-picture sign language video
+- **Audio Description** - Alternate audio track with descriptions
 - **Customizable Shortcuts** - User-definable hotkeys
 - **High Contrast Mode** - Windows HCM support
 - **Focus Indicators** - Clear visual focus states
@@ -29,9 +32,10 @@ A modern, feature-rich video player built with vanilla ES6 JavaScript. Combines
 ### Captions & Subtitles
 - **WebVTT Support** - Standard caption format
 - **Multiple Languages** - Multi-track support
-- **Customizable Display** - Font, size, color, opacity
-- **Caption Positioning** - Flexible placement
-- **Auto-generated Transcripts** - Interactive text
+- **Caption Selector** - Easy track switching with CC button
+- **Caption Styling** - Dedicated styling menu (font, size, color, opacity)
+- **Chapter Navigation** - Jump to video chapters
+- **Interactive Transcripts** - Full-text searchable transcript panel
 
 ### Playback Features
 - **Adjustable Speed** - 0.25x to 2x playback
@@ -198,8 +202,14 @@ const player = new Player('#video', {
   playPauseButton: true,
   progressBar: true,
   volumeControl: true,
+  chaptersButton: true,
+  qualityButton: true,
+  captionStyleButton: true,
   speedButton: true,
   captionsButton: true,
+  transcriptButton: true,
+  audioDescriptionButton: true,
+  signLanguageButton: true,
   fullscreenButton: true,
   pipButton: true,
   
@@ -212,6 +222,23 @@ const player = new Player('#video', {
   captionsBackgroundColor: '#000000',
   captionsOpacity: 0.8,
   
+  // Audio Description
+  audioDescription: true,
+  audioDescriptionSrc: null, // URL to audio-described version
+  audioDescriptionButton: true,
+  
+  // Sign Language
+  signLanguage: true,
+  signLanguageSrc: null, // URL to sign language video
+  signLanguageButton: true,
+  signLanguagePosition: 'bottom-right', // 'bottom-right', 'bottom-left', 'top-right', 'top-left'
+  
+  // Transcripts
+  transcript: false,
+  transcriptButton: true,
+  transcriptPosition: 'external',
+  transcriptContainer: null,
+  
   // Keyboard
   keyboard: true,
   keyboardShortcuts: {
@@ -254,9 +281,10 @@ const player = new Player('#video', {
 | <kbd>↑</kbd> / <kbd>↓</kbd> | Volume Up/Down |
 | <kbd>←</kbd> / <kbd>→</kbd> | Seek -10s / +10s |
 | <kbd>J</kbd> / <kbd>L</kbd> | Seek -30s / +30s |
-| <kbd>C</kbd> | Toggle Captions |
+| <kbd>C</kbd> | Toggle Captions (or open menu if multiple) |
 | <kbd><</kbd> / <kbd>></kbd> | Decrease/Increase Speed |
 | <kbd>S</kbd> | Open Settings |
+| <kbd>R</kbd> | Restart Video |
 
 ## API Reference
 
@@ -309,6 +337,30 @@ player.captionManager.switchTrack(0)  // Switch to first track
 player.captionManager.getAvailableTracks()  // Get all tracks
 ```
 
+### Transcript
+
+```javascript
+player.transcriptManager.showTranscript()  // Show transcript window
+player.transcriptManager.hideTranscript()  // Hide transcript window
+player.transcriptManager.toggleTranscript() // Toggle transcript
+```
+
+### Audio Description
+
+```javascript
+player.enableAudioDescription()   // Switch to described version
+player.disableAudioDescription()  // Switch back to original
+player.toggleAudioDescription()   // Toggle audio description
+```
+
+### Sign Language
+
+```javascript
+player.enableSignLanguage()   // Show sign language overlay
+player.disableSignLanguage()  // Hide sign language overlay
+player.toggleSignLanguage()   // Toggle sign language
+```
+
 ### Settings
 
 ```javascript
@@ -446,7 +498,9 @@ Contributions are welcome! Please feel free to submit a Pull Request.
 - Getting Started: See [GETTING_STARTED.md](docs/GETTING_STARTED.md)
 - Usage Examples: See [USAGE.md](docs/USAGE.md)
 - Playlist Guide: See [PLAYLIST.md](docs/PLAYLIST.md)
+- Transcript Guide: See [TRANSCRIPT.md](docs/TRANSCRIPT.md)
 - Build Guide: See [BUILD.md](docs/BUILD.md)
+- Changelog: See [CHANGELOG.md](docs/CHANGELOG.md)
 - Issues: Report on GitHub
 - Discussions: GitHub Discussions
 

package/dist/vidply.css

@@ -151,6 +151,10 @@
     height: auto;
 }
 
+.vidply-player.vidply-audio .vidply-menu {
+    max-height: 150px;
+}
+
 /* Video/Audio Element */
 .vidply-player video,
 .vidply-player audio {
@@ -191,7 +195,7 @@
     overflow: hidden;
     position: relative;
     width: 100%;
-    z-index: 10; /* Above track-info and playlist siblings */
+    z-index: 1; /* Base video layer */
 }
 
 /* Mobile: Simplify video wrapper */
@@ -222,7 +226,7 @@
     top: 50%;
     transform: translate(-50%, -50%);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-    z-index: 15;
+    z-index: 2;
 }
 
 .vidply-play-overlay:hover {
@@ -287,7 +291,7 @@
         position: relative;
         right: 0;
         width: 100%;
-        z-index: 100;
+        z-index: 10;
     }
 
     /* Allow menus to position within controls */
@@ -524,7 +528,7 @@
     position: fixed;
     right: 0;
     top: 0;
-    z-index: 999;
+    z-index: 19;
 }
 
 .vidply-menu-backdrop.visible {
@@ -568,8 +572,8 @@
     /* iOS momentum scrolling */
     transform: translateX(50%);
 
-    /* Ensure touch events work on iOS */
-    z-index: 1000;
+    /* Ensure menus appear above all player content including overlays */
+    z-index: 20;
 }
 
 /* Menu positioned below button */
@@ -836,7 +840,12 @@
     text-align: center;
     transform: translateX(-50%);
     transition: bottom 0.3s ease;
-    z-index: 5;
+    z-index: 4;
+}
+
+.vidply-audio .vidply-captions {
+    bottom: auto;
+    top: -42px;
 }
 
 .vidply-captions:empty {
@@ -870,7 +879,7 @@
     position: absolute;
     right: 0;
     top: 0;
-    z-index: 2000;
+    z-index: 20;
 }
 
 @keyframes vidply-fade-in {
@@ -1182,7 +1191,7 @@
         top: auto;
         transform: translateX(-50%);
         width: auto;
-        z-index: 200;
+        z-index: 15;
     }
 
     .vidply-menu::after {
@@ -1380,7 +1389,7 @@
     position: sticky;
     text-transform: uppercase;
     top: 0;
-    z-index: 10;
+    z-index: 2;
 }
 
 .vidply-playlist-list {
@@ -1546,7 +1555,7 @@
     position: absolute;
     top: 0;
     width: 400px;
-    z-index: 100;
+    z-index: 5;
 }
 
 /* Minimum height for audio player transcript */
@@ -1680,7 +1689,7 @@
     position: absolute;
     transition: opacity 0.3s ease;
     width: 35% !important;
-    z-index: 100;
+    z-index: 3;
 }
 
 .vidply-fullscreen .vidply-sign-language-video {
@@ -1689,15 +1698,25 @@
 
 /* Sign Language Video Positions */
 .vidply-sign-position-bottom-right {
-    bottom: 80px; /* Above controls */
+    bottom: 16px; /* Above controls */
     right: 16px;
 }
 
+.vidply-controls-visible + .vidply-sign-position-bottom-right,
+.vidply-controls-visible + .vidply-captions + .vidply-sign-position-bottom-right {
+    bottom: 95px; /* Above controls */
+}
+
 .vidply-sign-position-bottom-left {
-    bottom: 80px; /* Above controls */
+    bottom: 16px; /* Above controls */
     left: 16px;
 }
 
+.vidply-controls-visible + .vidply-sign-position-bottom-left,
+.vidply-controls-visible + .vidply-captions + .vidply-sign-position-bottom-left {
+    bottom: 95px; /* Above controls */
+}
+
 .vidply-sign-position-top-right {
     right: 16px;
     top: 16px;
@@ -1712,12 +1731,12 @@
 @media (width <= 640px) {
     .vidply-sign-language-video {
         min-width: 120px;
-        width: 30%;
+        width: 35%;
     }
     
     .vidply-sign-position-bottom-right,
     .vidply-sign-position-bottom-left {
-        bottom: 70px; /* Adjust for smaller controls */
+        bottom: 126px !important; /* Adjust for smaller controls */
     }
 }
 
@@ -1750,7 +1769,7 @@
         order: 3; /* After controls (which are order: 2) */
         position: relative;
         width: 100%;
-        z-index: 50;
+        z-index: 5;
     }
 
     .vidply-transcript-header {

package/dist/vidply.esm.js

@@ -503,7 +503,7 @@ var iconPaths = {
   audioDescription: `<path d="M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7z"/><path d="M10.5 19c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>`,
   audioDescriptionOn: `<path d="M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7z"/><path d="M10.5 19c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/><circle cx="19" cy="16" r="3" fill="#3b82f6"/><path d="M18.5 17.5l1-1 1.5 1.5" stroke="white" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>`,
   signLanguage: `<g transform="scale(1.5)"><path d="M16 11.3c-.1-.9-4.8 1.3-5.4 1.1-2.6-1 5.8-1.3 5.1-2.9s-5.1 1.5-6 1.4C6.5 9.4 16.5 9.1 13.5 8c-1.9-.6-8.8 2.9-6.8.4.7-.6.7-1.9-.7-1.7-9.7 7.2-.7 12.2 8.8 7 0-1.3-3.5.4-4.1.4-2.6 0 5.6-2 5.4-3ZM3.9 7.8c3.2-4.2 3.7 1.2 6 .1s.2-.2.2-.3c.7-2.7 2.5-7.5-1.5-1.3-1.6 0 1.1-4 1-4.6C8.9-1 7.3 4.4 7.2 4.9c-1.6.7-.9-1.4-.7-1.5 3-6-.6-3.1-.9.4-2.5 1.8 0-2.8 0-3.5C2.8-.9 4 9.4 1.1 4.9S.1 4.6 0 5c-.4 2.7 2.6 7.2 3.9 2.8Z"/></g>`,
-  signLanguageOn: `<g transform="scale(1.5)"><path d="M16 11.3c-.1-.9-4.8 1.3-5.4 1.1-2.6-1 5.8-1.3 5.1-2.9s-5.1 1.5-6 1.4C6.5 9.4 16.5 9.1 13.5 8c-1.9-.6-8.8 2.9-6.8.4.7-.6.7-1.9-.7-1.7-9.7 7.2-.7 12.2 8.8 7 0-1.3-3.5.4-4.1.4-2.6 0 5.6-2 5.4-3ZM3.9 7.8c3.2-4.2 3.7 1.2 6 .1s.2-.2.2-.3c.7-2.7 2.5-7.5-1.5-1.3-1.6 0 1.1-4 1-4.6C8.9-1 7.3 4.4 7.2 4.9c-1.6.7-.9-1.4-.7-1.5 3-6-.6-3.1-.9.4-2.5 1.8 0-2.8 0-3.5C2.8-.9 4 9.4 1.1 4.9S.1 4.6 0 5c-.4 2.7 2.6 7.2 3.9 2.8Z"/></g><circle cx="19" cy="19" r="3" fill="#3b82f6"/><path d="M17.5 19l1 1 2-2" stroke="white" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>`,
+  signLanguageOn: `<g transform="scale(1.5)"><path d="M16 11.3c-.1-.9-4.8 1.3-5.4 1.1-2.6-1 5.8-1.3 5.1-2.9s-5.1 1.5-6 1.4C6.5 9.4 16.5 9.1 13.5 8c-1.9-.6-8.8 2.9-6.8.4.7-.6.7-1.9-.7-1.7-9.7 7.2-.7 12.2 8.8 7 0-1.3-3.5.4-4.1.4-2.6 0 5.6-2 5.4-3ZM3.9 7.8c3.2-4.2 3.7 1.2 6 .1s.2-.2.2-.3c.7-2.7 2.5-7.5-1.5-1.3-1.6 0 1.1-4 1-4.6C8.9-1 7.3 4.4 7.2 4.9c-1.6.7-.9-1.4-.7-1.5 3-6-.6-3.1-.9.4-2.5 1.8 0-2.8 0-3.5C2.8-.9 4 9.4 1.1 4.9S.1 4.6 0 5c-.4 2.7 2.6 7.2 3.9 2.8Z"/></g>`,
   speaker: `<path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02z"/>`,
   music: `<path d="M12 3v9.28c-.47-.17-.97-.28-1.5-.28C8.01 12 6 14.01 6 16.5S8.01 21 10.5 21c2.31 0 4.2-1.75 4.45-4H15V6h4V3h-7zm-1.5 16c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/>`,
   moreVertical: `<path d="M12 8c1.1 0 2-.9 2-2s-.9-2-2-2-2 .9-2 2 .9 2 2 2zm0 2c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm0 6c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>`,
@@ -5012,7 +5012,7 @@ var Player = class extends EventEmitter {
     if (!this.state.paused) {
       this.signLanguageVideo.play();
     }
-    this.container.appendChild(this.signLanguageVideo);
+    this.videoWrapper.appendChild(this.signLanguageVideo);
     this.signLanguageHandlers = {
       play: () => {
         if (this.signLanguageVideo) {