vidply 1.0.3 → 1.0.5

package/dist/vidply.min.meta.json

@@ -10,18 +10,8 @@
       "imports": [],
       "format": "esm"
     },
-    "src/utils/TimeUtils.js": {
-      "bytes": 1940,
-      "imports": [],
-      "format": "esm"
-    },
-    "src/icons/Icons.js": {
-      "bytes": 12356,
-      "imports": [],
-      "format": "esm"
-    },
     "src/i18n/translations.js": {
-      "bytes": 15062,
+      "bytes": 16450,
       "imports": [],
       "format": "esm"
     },
@@ -36,8 +26,24 @@
       ],
       "format": "esm"
     },
+    "src/utils/TimeUtils.js": {
+      "bytes": 2155,
+      "imports": [
+        {
+          "path": "src/i18n/i18n.js",
+          "kind": "import-statement",
+          "original": "../i18n/i18n.js"
+        }
+      ],
+      "format": "esm"
+    },
+    "src/icons/Icons.js": {
+      "bytes": 12356,
+      "imports": [],
+      "format": "esm"
+    },
     "src/controls/ControlBar.js": {
-      "bytes": 70888,
+      "bytes": 74720,
       "imports": [
         {
           "path": "src/utils/DOMUtils.js",
@@ -136,7 +142,7 @@
       "format": "esm"
     },
     "src/core/Player.js": {
-      "bytes": 34580,
+      "bytes": 35845,
       "imports": [
         {
           "path": "src/utils/EventEmitter.js",
@@ -202,7 +208,7 @@
       "format": "esm"
     },
     "src/features/PlaylistManager.js": {
-      "bytes": 10068,
+      "bytes": 17043,
       "imports": [
         {
           "path": "src/utils/DOMUtils.js",
@@ -252,20 +258,20 @@
         "src/utils/DOMUtils.js": {
           "bytesInOutput": 1581
         },
-        "src/utils/TimeUtils.js": {
-          "bytesInOutput": 728
-        },
-        "src/icons/Icons.js": {
-          "bytesInOutput": 10407
-        },
         "src/i18n/translations.js": {
-          "bytesInOutput": 12646
+          "bytesInOutput": 13713
         },
         "src/i18n/i18n.js": {
           "bytesInOutput": 720
         },
+        "src/utils/TimeUtils.js": {
+          "bytesInOutput": 839
+        },
+        "src/icons/Icons.js": {
+          "bytesInOutput": 10407
+        },
         "src/controls/ControlBar.js": {
-          "bytesInOutput": 35686
+          "bytesInOutput": 36374
         },
         "src/controls/CaptionManager.js": {
           "bytesInOutput": 3599
@@ -277,7 +283,7 @@
           "bytesInOutput": 12461
         },
         "src/core/Player.js": {
-          "bytesInOutput": 16383
+          "bytesInOutput": 16746
         },
         "src/renderers/YouTubeRenderer.js": {
           "bytesInOutput": 4140
@@ -289,10 +295,10 @@
           "bytesInOutput": 5386
         },
         "src/features/PlaylistManager.js": {
-          "bytesInOutput": 5245
+          "bytesInOutput": 8100
         }
       },
-      "bytes": 123711
+      "bytes": 128795
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vidply",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Universal, accessible video & audio player with ES6 modules",
   "type": "module",
   "main": "dist/vidply.js",
@@ -46,6 +46,9 @@
     "email": "vidply@mpeltzer.de"
   },
   "homepage": "https://matthiaspeltzer.github.io/vidply/",
+  "publishConfig": {
+    "access": "public"
+  },
   "devDependencies": {
     "esbuild": "^0.25.10",
     "clean-css": "^5.3.3"

package/src/controls/ControlBar.js

@@ -698,13 +698,30 @@ export class ControlBar {
 
     createTimeDisplay() {
         const container = DOMUtils.createElement('div', {
-            className: `${this.player.options.classPrefix}-time`
+            className: `${this.player.options.classPrefix}-time`,
+            attributes: {
+                'role': 'group',
+                'aria-label': i18n.t('time.display')
+            }
         });
 
+        // Current time - visual text hidden, only aria-label announced
         this.controls.currentTimeDisplay = DOMUtils.createElement('span', {
             className: `${this.player.options.classPrefix}-current-time`,
-            textContent: '00:00'
+            attributes: {
+                'aria-label': i18n.t('time.seconds', { count: 0 })
+            }
+        });
+        
+        // Create visual text inside, hidden from screen readers
+        const currentTimeVisual = DOMUtils.createElement('span', {
+            textContent: '00:00',
+            attributes: {
+                'aria-hidden': 'true'
+            }
         });
+        this.controls.currentTimeDisplay.appendChild(currentTimeVisual);
+        this.controls.currentTimeVisual = currentTimeVisual;
 
         const separator = DOMUtils.createElement('span', {
             textContent: ' / ',
@@ -713,10 +730,23 @@ export class ControlBar {
             }
         });
 
+        // Duration - visual text hidden, only aria-label announced
         this.controls.durationDisplay = DOMUtils.createElement('span', {
             className: `${this.player.options.classPrefix}-duration`,
-            textContent: '00:00'
+            attributes: {
+                'aria-label': i18n.t('time.durationPrefix') + i18n.t('time.seconds', { count: 0 })
+            }
+        });
+        
+        // Create visual text inside, hidden from screen readers
+        const durationVisual = DOMUtils.createElement('span', {
+            textContent: '00:00',
+            attributes: {
+                'aria-hidden': 'true'
+            }
         });
+        this.controls.durationDisplay.appendChild(durationVisual);
+        this.controls.durationVisual = durationVisual;
 
         container.appendChild(this.controls.currentTimeDisplay);
         container.appendChild(separator);
@@ -1790,14 +1820,22 @@ export class ControlBar {
         this.controls.played.style.width = `${percent}%`;
         this.controls.progress.setAttribute('aria-valuenow', String(Math.round(percent)));
 
-        if (this.controls.currentTimeDisplay) {
-            this.controls.currentTimeDisplay.textContent = TimeUtils.formatTime(this.player.state.currentTime);
+        if (this.controls.currentTimeVisual) {
+            const currentTime = this.player.state.currentTime;
+            // Update visual text (hidden from screen readers)
+            this.controls.currentTimeVisual.textContent = TimeUtils.formatTime(currentTime);
+            // Update aria-label with human-readable format
+            this.controls.currentTimeDisplay.setAttribute('aria-label', TimeUtils.formatDuration(currentTime));
         }
     }
 
     updateDuration() {
-        if (this.controls.durationDisplay) {
-            this.controls.durationDisplay.textContent = TimeUtils.formatTime(this.player.state.duration);
+        if (this.controls.durationVisual) {
+            const duration = this.player.state.duration;
+            // Update visual text (hidden from screen readers)
+            this.controls.durationVisual.textContent = TimeUtils.formatTime(duration);
+            // Update aria-label with human-readable format
+            this.controls.durationDisplay.setAttribute('aria-label', i18n.t('time.durationPrefix') + TimeUtils.formatDuration(duration));
         }
     }
 

package/src/core/Player.js

@@ -515,6 +515,23 @@ export class Player extends EventEmitter {
                 this.captionManager.destroy();
                 this.captionManager = new CaptionManager(this);
             }
+            
+            // Reinitialize transcript manager to pick up new tracks
+            if (this.transcriptManager) {
+                const wasVisible = this.transcriptManager.isVisible;
+                this.transcriptManager.destroy();
+                this.transcriptManager = new TranscriptManager(this);
+                
+                // Restore visibility state if transcript was open
+                if (wasVisible) {
+                    this.transcriptManager.showTranscript();
+                }
+            }
+            
+            // Update control bar to show/hide feature buttons based on new tracks
+            if (this.controlBar) {
+                this.updateControlBar();
+            }
 
             this.emit('sourcechange', config);
             this.log('Media loaded successfully');
@@ -529,6 +546,25 @@ export class Player extends EventEmitter {
      * @param {string} src - New source URL
      * @returns {boolean}
      */
+    /**
+     * Update control bar to refresh button visibility based on available features
+     */
+    updateControlBar() {
+        if (!this.controlBar) return;
+        
+        const controlBar = this.controlBar;
+        
+        // Clear existing controls content
+        controlBar.element.innerHTML = '';
+        
+        // Recreate controls with updated feature detection
+        controlBar.createControls();
+        
+        // Reattach events for the new controls
+        controlBar.attachEvents();
+        controlBar.setupAutoHide();
+    }
+    
     shouldChangeRenderer(src) {
         if (!this.renderer) return true;