vidply 1.0.0

package/dist/vidply.min.meta.json

@@ -0,0 +1,332 @@
+{
+  "inputs": {
+    "src/utils/EventEmitter.js": {
+      "bytes": 949,
+      "imports": [],
+      "format": "esm"
+    },
+    "src/utils/DOMUtils.js": {
+      "bytes": 3730,
+      "imports": [],
+      "format": "esm"
+    },
+    "src/utils/TimeUtils.js": {
+      "bytes": 1940,
+      "imports": [],
+      "format": "esm"
+    },
+    "src/icons/Icons.js": {
+      "bytes": 12581,
+      "imports": [],
+      "format": "esm"
+    },
+    "src/i18n/translations.js": {
+      "bytes": 15062,
+      "imports": [],
+      "format": "esm"
+    },
+    "src/i18n/i18n.js": {
+      "bytes": 1573,
+      "imports": [
+        {
+          "path": "src/i18n/translations.js",
+          "kind": "import-statement",
+          "original": "./translations.js"
+        }
+      ],
+      "format": "esm"
+    },
+    "src/controls/ControlBar.js": {
+      "bytes": 66505,
+      "imports": [
+        {
+          "path": "src/utils/DOMUtils.js",
+          "kind": "import-statement",
+          "original": "../utils/DOMUtils.js"
+        },
+        {
+          "path": "src/utils/TimeUtils.js",
+          "kind": "import-statement",
+          "original": "../utils/TimeUtils.js"
+        },
+        {
+          "path": "src/icons/Icons.js",
+          "kind": "import-statement",
+          "original": "../icons/Icons.js"
+        },
+        {
+          "path": "src/i18n/i18n.js",
+          "kind": "import-statement",
+          "original": "../i18n/i18n.js"
+        }
+      ],
+      "format": "esm"
+    },
+    "src/controls/CaptionManager.js": {
+      "bytes": 6437,
+      "imports": [
+        {
+          "path": "src/utils/DOMUtils.js",
+          "kind": "import-statement",
+          "original": "../utils/DOMUtils.js"
+        },
+        {
+          "path": "src/i18n/i18n.js",
+          "kind": "import-statement",
+          "original": "../i18n/i18n.js"
+        }
+      ],
+      "format": "esm"
+    },
+    "src/controls/KeyboardManager.js": {
+      "bytes": 5131,
+      "imports": [],
+      "format": "esm"
+    },
+    "src/controls/SettingsDialog.js": {
+      "bytes": 12224,
+      "imports": [
+        {
+          "path": "src/utils/DOMUtils.js",
+          "kind": "import-statement",
+          "original": "../utils/DOMUtils.js"
+        },
+        {
+          "path": "src/icons/Icons.js",
+          "kind": "import-statement",
+          "original": "../icons/Icons.js"
+        },
+        {
+          "path": "src/i18n/i18n.js",
+          "kind": "import-statement",
+          "original": "../i18n/i18n.js"
+        }
+      ],
+      "format": "esm"
+    },
+    "src/controls/TranscriptManager.js": {
+      "bytes": 23405,
+      "imports": [
+        {
+          "path": "src/utils/DOMUtils.js",
+          "kind": "import-statement",
+          "original": "../utils/DOMUtils.js"
+        },
+        {
+          "path": "src/utils/TimeUtils.js",
+          "kind": "import-statement",
+          "original": "../utils/TimeUtils.js"
+        },
+        {
+          "path": "src/icons/Icons.js",
+          "kind": "import-statement",
+          "original": "../icons/Icons.js"
+        },
+        {
+          "path": "src/i18n/i18n.js",
+          "kind": "import-statement",
+          "original": "../i18n/i18n.js"
+        }
+      ],
+      "format": "esm"
+    },
+    "src/renderers/HTML5Renderer.js": {
+      "bytes": 8362,
+      "imports": [],
+      "format": "esm"
+    },
+    "src/renderers/YouTubeRenderer.js": {
+      "bytes": 6912,
+      "imports": [],
+      "format": "esm"
+    },
+    "src/renderers/VimeoRenderer.js": {
+      "bytes": 6442,
+      "imports": [],
+      "format": "esm"
+    },
+    "src/renderers/HLSRenderer.js": {
+      "bytes": 8455,
+      "imports": [
+        {
+          "path": "src/renderers/HTML5Renderer.js",
+          "kind": "dynamic-import",
+          "original": "./HTML5Renderer.js"
+        }
+      ],
+      "format": "esm"
+    },
+    "src/core/Player.js": {
+      "bytes": 30756,
+      "imports": [
+        {
+          "path": "src/utils/EventEmitter.js",
+          "kind": "import-statement",
+          "original": "../utils/EventEmitter.js"
+        },
+        {
+          "path": "src/utils/DOMUtils.js",
+          "kind": "import-statement",
+          "original": "../utils/DOMUtils.js"
+        },
+        {
+          "path": "src/utils/TimeUtils.js",
+          "kind": "import-statement",
+          "original": "../utils/TimeUtils.js"
+        },
+        {
+          "path": "src/controls/ControlBar.js",
+          "kind": "import-statement",
+          "original": "../controls/ControlBar.js"
+        },
+        {
+          "path": "src/controls/CaptionManager.js",
+          "kind": "import-statement",
+          "original": "../controls/CaptionManager.js"
+        },
+        {
+          "path": "src/controls/KeyboardManager.js",
+          "kind": "import-statement",
+          "original": "../controls/KeyboardManager.js"
+        },
+        {
+          "path": "src/controls/SettingsDialog.js",
+          "kind": "import-statement",
+          "original": "../controls/SettingsDialog.js"
+        },
+        {
+          "path": "src/controls/TranscriptManager.js",
+          "kind": "import-statement",
+          "original": "../controls/TranscriptManager.js"
+        },
+        {
+          "path": "src/renderers/HTML5Renderer.js",
+          "kind": "import-statement",
+          "original": "../renderers/HTML5Renderer.js"
+        },
+        {
+          "path": "src/renderers/YouTubeRenderer.js",
+          "kind": "import-statement",
+          "original": "../renderers/YouTubeRenderer.js"
+        },
+        {
+          "path": "src/renderers/VimeoRenderer.js",
+          "kind": "import-statement",
+          "original": "../renderers/VimeoRenderer.js"
+        },
+        {
+          "path": "src/renderers/HLSRenderer.js",
+          "kind": "import-statement",
+          "original": "../renderers/HLSRenderer.js"
+        },
+        {
+          "path": "src/icons/Icons.js",
+          "kind": "import-statement",
+          "original": "../icons/Icons.js"
+        },
+        {
+          "path": "src/i18n/i18n.js",
+          "kind": "import-statement",
+          "original": "../i18n/i18n.js"
+        }
+      ],
+      "format": "esm"
+    },
+    "src/features/PlaylistManager.js": {
+      "bytes": 10068,
+      "imports": [
+        {
+          "path": "src/utils/DOMUtils.js",
+          "kind": "import-statement",
+          "original": "../utils/DOMUtils.js"
+        },
+        {
+          "path": "src/icons/Icons.js",
+          "kind": "import-statement",
+          "original": "../icons/Icons.js"
+        }
+      ],
+      "format": "esm"
+    },
+    "src/index.js": {
+      "bytes": 833,
+      "imports": [
+        {
+          "path": "src/core/Player.js",
+          "kind": "import-statement",
+          "original": "./core/Player.js"
+        },
+        {
+          "path": "src/features/PlaylistManager.js",
+          "kind": "import-statement",
+          "original": "./features/PlaylistManager.js"
+        }
+      ],
+      "format": "esm"
+    }
+  },
+  "outputs": {
+    "dist/vidply.min.js": {
+      "imports": [],
+      "exports": [],
+      "entryPoint": "src/index.js",
+      "inputs": {
+        "src/renderers/HTML5Renderer.js": {
+          "bytesInOutput": 4670
+        },
+        "src/index.js": {
+          "bytesInOutput": 307
+        },
+        "src/utils/EventEmitter.js": {
+          "bytesInOutput": 436
+        },
+        "src/utils/DOMUtils.js": {
+          "bytesInOutput": 1581
+        },
+        "src/utils/TimeUtils.js": {
+          "bytesInOutput": 728
+        },
+        "src/icons/Icons.js": {
+          "bytesInOutput": 10596
+        },
+        "src/i18n/translations.js": {
+          "bytesInOutput": 12646
+        },
+        "src/i18n/i18n.js": {
+          "bytesInOutput": 720
+        },
+        "src/controls/ControlBar.js": {
+          "bytesInOutput": 34275
+        },
+        "src/controls/CaptionManager.js": {
+          "bytesInOutput": 3634
+        },
+        "src/controls/KeyboardManager.js": {
+          "bytesInOutput": 3002
+        },
+        "src/controls/SettingsDialog.js": {
+          "bytesInOutput": 7622
+        },
+        "src/controls/TranscriptManager.js": {
+          "bytesInOutput": 12461
+        },
+        "src/core/Player.js": {
+          "bytesInOutput": 16392
+        },
+        "src/renderers/YouTubeRenderer.js": {
+          "bytesInOutput": 4140
+        },
+        "src/renderers/VimeoRenderer.js": {
+          "bytesInOutput": 4204
+        },
+        "src/renderers/HLSRenderer.js": {
+          "bytesInOutput": 5386
+        },
+        "src/features/PlaylistManager.js": {
+          "bytesInOutput": 5245
+        }
+      },
+      "bytes": 128662
+    }
+  }
+}

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "vidply",
+  "version": "1.0.0",
+  "description": "Universal, accessible video & audio player with ES6 modules",
+  "type": "module",
+  "main": "dist/vidply.js",
+  "module": "dist/vidply.esm.js",
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "dev": "npx serve . -p 3000",
+    "start": "npm run build:js && npm run build:css && npm run dev",
+    "build": "npm run build:js && npm run build:css",
+    "build:js": "node build/build.js",
+    "build:css": "node build/build-css.js",
+    "watch": "node build/watch.js",
+    "clean": "node build/clean.js"
+  },
+  "keywords": [
+    "video",
+    "player",
+    "audio",
+    "accessible",
+    "wcag",
+    "a11y",
+    "html5",
+    "youtube",
+    "vimeo",
+    "hls",
+    "captions",
+    "subtitles",
+    "vanilla",
+    "es6",
+    "javascript"
+  ],
+  "author": "Matthias Peltzer",
+  "license": "GPL-2.0-or-later",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/MatthiasPeltzer/vidply.git"
+  },
+  "bugs": {
+    "url": "https://github.com/MatthiasPeltzer/vidply/issues",
+    "email": "vidply@mpeltzer.de"
+  },
+  "homepage": "https://matthiaspeltzer.github.io/vidply/",
+  "devDependencies": {
+    "esbuild": "^0.25.10",
+    "clean-css": "^5.3.3"
+  },
+  "dependencies": {}
+}

package/src/controls/CaptionManager.js

@@ -0,0 +1,250 @@
+/**
+ * Caption/Subtitle Manager
+ */
+
+import { DOMUtils } from '../utils/DOMUtils.js';
+import { i18n } from '../i18n/i18n.js';
+
+export class CaptionManager {
+  constructor(player) {
+    this.player = player;
+    this.element = null;
+    this.tracks = [];
+    this.currentTrack = null;
+    this.currentCue = null;
+    
+    this.init();
+  }
+
+  init() {
+    this.createElement();
+    this.loadTracks();
+    this.attachEvents();
+    
+    if (this.player.options.captionsDefault && this.tracks.length > 0) {
+      this.enable();
+    }
+  }
+
+  createElement() {
+    this.element = DOMUtils.createElement('div', {
+      className: `${this.player.options.classPrefix}-captions`,
+      attributes: {
+        'aria-live': 'polite',
+        'aria-atomic': 'true',
+        'role': 'region',
+        'aria-label': i18n.t('player.captions')
+      }
+    });
+
+    // Apply caption styles
+    this.updateStyles();
+    
+    // Append to videoWrapper if it exists, otherwise to container
+    const target = this.player.videoWrapper || this.player.container;
+    target.appendChild(this.element);
+  }
+
+  loadTracks() {
+    const textTracks = this.player.element.textTracks;
+    
+    for (let i = 0; i < textTracks.length; i++) {
+      const track = textTracks[i];
+      
+      if (track.kind === 'subtitles' || track.kind === 'captions') {
+        this.tracks.push({
+          track: track,
+          language: track.language,
+          label: track.label,
+          kind: track.kind,
+          index: i
+        });
+        
+        // Disable all tracks initially
+        track.mode = 'hidden';
+      }
+    }
+  }
+
+  attachEvents() {
+    this.player.on('timeupdate', () => {
+      this.updateCaptions();
+    });
+
+    this.player.on('captionschange', () => {
+      this.updateStyles();
+    });
+  }
+
+  enable(trackIndex = 0) {
+    if (this.tracks.length === 0) {
+      return;
+    }
+
+    // Disable current track
+    if (this.currentTrack) {
+      this.currentTrack.track.mode = 'hidden';
+    }
+
+    // Enable selected track
+    const selectedTrack = this.tracks[trackIndex];
+    
+    if (selectedTrack) {
+      // Set to 'hidden' not 'showing' to prevent browser from displaying native captions
+      // We'll handle the display ourselves
+      selectedTrack.track.mode = 'hidden';
+      this.currentTrack = selectedTrack;
+      this.player.state.captionsEnabled = true;
+      
+      // Remove any existing cuechange listener
+      if (this.cueChangeHandler) {
+        selectedTrack.track.removeEventListener('cuechange', this.cueChangeHandler);
+      }
+      
+      // Add event listener for cue changes
+      this.cueChangeHandler = () => {
+        this.updateCaptions();
+      };
+      selectedTrack.track.addEventListener('cuechange', this.cueChangeHandler);
+      
+      this.element.style.display = 'block';
+      
+      this.player.emit('captionsenabled', selectedTrack);
+    }
+  }
+
+  disable() {
+    if (this.currentTrack) {
+      this.currentTrack.track.mode = 'hidden';
+      this.currentTrack = null;
+    }
+
+    this.element.style.display = 'none';
+    this.element.innerHTML = '';
+    this.currentCue = null;
+    this.player.state.captionsEnabled = false;
+    this.player.emit('captionsdisabled');
+  }
+
+  updateCaptions() {
+    if (!this.currentTrack) {
+      return;
+    }
+    
+    if (!this.currentTrack.track.activeCues) {
+      return;
+    }
+
+    const activeCues = this.currentTrack.track.activeCues;
+    
+    if (activeCues.length > 0) {
+      const cue = activeCues[0];
+      
+      // Only update if the cue has changed
+      if (this.currentCue !== cue) {
+        this.currentCue = cue;
+        
+        // Parse and display cue text
+        let text = cue.text;
+        
+        // Handle VTT formatting
+        text = this.parseVTTFormatting(text);
+        
+        this.element.innerHTML = DOMUtils.sanitizeHTML(text);
+        
+        // Make sure it's visible when there's content
+        this.element.style.display = 'block';
+        
+        this.player.emit('captionchange', cue);
+      }
+    } else if (this.currentCue) {
+      // Clear caption
+      this.element.innerHTML = '';
+      this.element.style.display = 'none';
+      this.currentCue = null;
+    }
+  }
+
+  parseVTTFormatting(text) {
+    // Basic VTT tag support
+    text = text.replace(/<c[^>]*>(.*?)<\/c>/g, '<span class="caption-class">$1</span>');
+    text = text.replace(/<b>(.*?)<\/b>/g, '<strong>$1</strong>');
+    text = text.replace(/<i>(.*?)<\/i>/g, '<em>$1</em>');
+    text = text.replace(/<u>(.*?)<\/u>/g, '<u>$1</u>');
+    
+    // Voice tags
+    text = text.replace(/<v\s+([^>]+)>(.*?)<\/v>/g, '<span class="caption-voice" data-voice="$1">$2</span>');
+    
+    return text;
+  }
+
+  updateStyles() {
+    if (!this.element) return;
+
+    const options = this.player.options;
+    
+    this.element.style.fontSize = options.captionsFontSize;
+    this.element.style.fontFamily = options.captionsFontFamily;
+    this.element.style.color = options.captionsColor;
+    this.element.style.backgroundColor = this.hexToRgba(
+      options.captionsBackgroundColor, 
+      options.captionsOpacity
+    );
+  }
+
+  hexToRgba(hex, alpha) {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    if (result) {
+      return `rgba(${parseInt(result[1], 16)}, ${parseInt(result[2], 16)}, ${parseInt(result[3], 16)}, ${alpha})`;
+    }
+    return hex;
+  }
+
+  setCaptionStyle(property, value) {
+    switch (property) {
+      case 'fontSize':
+        this.player.options.captionsFontSize = value;
+        break;
+      case 'fontFamily':
+        this.player.options.captionsFontFamily = value;
+        break;
+      case 'color':
+        this.player.options.captionsColor = value;
+        break;
+      case 'backgroundColor':
+        this.player.options.captionsBackgroundColor = value;
+        break;
+      case 'opacity':
+        this.player.options.captionsOpacity = value;
+        break;
+    }
+    
+    this.updateStyles();
+    this.player.emit('captionschange');
+  }
+
+  getAvailableTracks() {
+    return this.tracks.map((t, index) => ({
+      index,
+      language: t.language,
+      label: t.label || t.language,
+      kind: t.kind
+    }));
+  }
+
+  switchTrack(trackIndex) {
+    if (trackIndex >= 0 && trackIndex < this.tracks.length) {
+      this.disable();
+      this.enable(trackIndex);
+    }
+  }
+
+  destroy() {
+    this.disable();
+    
+    if (this.element && this.element.parentNode) {
+      this.element.parentNode.removeChild(this.element);
+    }
+  }
+}
+