vidply 1.0.0 → 1.0.2

package/dist/vidply.min.meta.json

@@ -16,7 +16,7 @@
       "format": "esm"
     },
     "src/icons/Icons.js": {
-      "bytes": 12581,
+      "bytes": 12356,
       "imports": [],
       "format": "esm"
     },
@@ -157,7 +157,7 @@
       "format": "esm"
     },
     "src/core/Player.js": {
-      "bytes": 30756,
+      "bytes": 30813,
       "imports": [
         {
           "path": "src/utils/EventEmitter.js",
@@ -249,7 +249,7 @@
       "format": "esm"
     },
     "src/index.js": {
-      "bytes": 833,
+      "bytes": 2706,
       "imports": [
         {
           "path": "src/core/Player.js",
@@ -275,7 +275,7 @@
           "bytesInOutput": 4670
         },
         "src/index.js": {
-          "bytesInOutput": 307
+          "bytesInOutput": 1064
         },
         "src/utils/EventEmitter.js": {
           "bytesInOutput": 436
@@ -287,7 +287,7 @@
           "bytesInOutput": 728
         },
         "src/icons/Icons.js": {
-          "bytesInOutput": 10596
+          "bytesInOutput": 10407
         },
         "src/i18n/translations.js": {
           "bytesInOutput": 12646
@@ -311,7 +311,7 @@
           "bytesInOutput": 12461
         },
         "src/core/Player.js": {
-          "bytesInOutput": 16392
+          "bytesInOutput": 16389
         },
         "src/renderers/YouTubeRenderer.js": {
           "bytesInOutput": 4140
@@ -326,7 +326,7 @@
           "bytesInOutput": 5245
         }
       },
-      "bytes": 128662
+      "bytes": 129227
     }
   }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vidply",
-  "version": "1.0.0",
+  "version": "1.0.2",
   "description": "Universal, accessible video & audio player with ES6 modules",
   "type": "module",
   "main": "dist/vidply.js",

package/src/core/Player.js

@@ -828,7 +828,7 @@ export class Player extends EventEmitter {
     this.signLanguageVideo = document.createElement('video');
     this.signLanguageVideo.className = 'vidply-sign-language-video';
     this.signLanguageVideo.src = this.signLanguageSrc;
-    this.signLanguageVideo.setAttribute('aria-label', this.i18n.t('signLanguageVideo'));
+    this.signLanguageVideo.setAttribute('aria-label', i18n.t('player.signLanguage'));
     
     // Set position based on options
     const position = this.options.signLanguagePosition || 'bottom-right';
@@ -841,8 +841,8 @@ export class Player extends EventEmitter {
       this.signLanguageVideo.play();
     }
 
-    // Add to container
-    this.container.appendChild(this.signLanguageVideo);
+    // Add to video wrapper (so it overlays the video, not the entire container)
+    this.videoWrapper.appendChild(this.signLanguageVideo);
 
     // Create bound handlers to store references for cleanup
     this.signLanguageHandlers = {

package/src/icons/Icons.js

@@ -75,9 +75,9 @@ const iconPaths = {
 
     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: `<path d="M12 2C10.34 2 9 3.34 9 5v4c0 .34.07.66.18.96L7.5 8.29C7.19 8.1 6.85 8 6.5 8 5.12 8 4 9.12 4 10.5v3c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-3c0-.28.22-.5.5-.5s.5.22.5.5V14l2 2v-1c0-.55.45-1 1-1s1 .45 1 1v2c0 .55.45 1 1 1s1-.45 1-1V9c0-.55.45-1 1-1s1 .45 1 1v8c0 2.21-1.79 4-4 4s-4-1.79-4-4v-2.83l-2.93-2.93A3.93 3.93 0 0 1 4 8c0-1.66 1.34-3 3-3 .83 0 1.58.34 2.12.88L11 7.76V5c0-.55.45-1 1-1s1 .45 1 1v4c0 .55.45 1 1 1s1-.45 1-1V5c0-1.66-1.34-3-3-3z"/>`,
+    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: `<path d="M12 2C10.34 2 9 3.34 9 5v4c0 .34.07.66.18.96L7.5 8.29C7.19 8.1 6.85 8 6.5 8 5.12 8 4 9.12 4 10.5v3c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-3c0-.28.22-.5.5-.5s.5.22.5.5V14l2 2v-1c0-.55.45-1 1-1s1 .45 1 1v2c0 .55.45 1 1 1s1-.45 1-1V9c0-.55.45-1 1-1s1 .45 1 1v8c0 2.21-1.79 4-4 4s-4-1.79-4-4v-2.83l-2.93-2.93A3.93 3.93 0 0 1 4 8c0-1.66 1.34-3 3-3 .83 0 1.58.34 2.12.88L11 7.76V5c0-.55.45-1 1-1s1 .45 1 1v4c0 .55.45 1 1 1s1-.45 1-1V5c0-1.66-1.34-3-3-3z"/><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"/>`,
+    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"/>`,
 
@@ -121,7 +121,7 @@ export function createPlayOverlay() {
     svg.setAttribute('aria-hidden', 'true');
     svg.setAttribute('role', 'presentation');
     svg.style.cursor = 'pointer';
-    
+
     // Create filter for drop shadow
     const defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
     const filterId = `vidply-play-shadow-${Math.random().toString(36).substr(2, 9)}`;
@@ -131,36 +131,36 @@ export function createPlayOverlay() {
     filter.setAttribute('y', '-50%');
     filter.setAttribute('width', '200%');
     filter.setAttribute('height', '200%');
-    
+
     const feGaussianBlur = document.createElementNS('http://www.w3.org/2000/svg', 'feGaussianBlur');
     feGaussianBlur.setAttribute('in', 'SourceAlpha');
     feGaussianBlur.setAttribute('stdDeviation', '3');
-    
+
     const feOffset = document.createElementNS('http://www.w3.org/2000/svg', 'feOffset');
     feOffset.setAttribute('dx', '0');
     feOffset.setAttribute('dy', '2');
     feOffset.setAttribute('result', 'offsetblur');
-    
+
     const feComponentTransfer = document.createElementNS('http://www.w3.org/2000/svg', 'feComponentTransfer');
     const feFuncA = document.createElementNS('http://www.w3.org/2000/svg', 'feFuncA');
     feFuncA.setAttribute('type', 'linear');
     feFuncA.setAttribute('slope', '0.3');
     feComponentTransfer.appendChild(feFuncA);
-    
+
     const feMerge = document.createElementNS('http://www.w3.org/2000/svg', 'feMerge');
     const feMergeNode1 = document.createElementNS('http://www.w3.org/2000/svg', 'feMergeNode');
     const feMergeNode2 = document.createElementNS('http://www.w3.org/2000/svg', 'feMergeNode');
     feMergeNode2.setAttribute('in', 'SourceGraphic');
     feMerge.appendChild(feMergeNode1);
     feMerge.appendChild(feMergeNode2);
-    
+
     filter.appendChild(feGaussianBlur);
     filter.appendChild(feOffset);
     filter.appendChild(feComponentTransfer);
     filter.appendChild(feMerge);
     defs.appendChild(filter);
     svg.appendChild(defs);
-    
+
     // White circle background
     const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
     circle.setAttribute('cx', '40');
@@ -170,14 +170,14 @@ export function createPlayOverlay() {
     circle.setAttribute('filter', `url(#${filterId})`);
     circle.setAttribute('class', 'vidply-play-overlay-bg');
     svg.appendChild(circle);
-    
+
     // Play icon triangle (centered with optical adjustment)
     const playTriangle = document.createElementNS('http://www.w3.org/2000/svg', 'polygon');
     playTriangle.setAttribute('points', '32,28 32,52 54,40');
     playTriangle.setAttribute('fill', '#0a406e');
     playTriangle.setAttribute('class', 'vidply-play-overlay-icon');
     svg.appendChild(playTriangle);
-    
+
     return svg;
 }
 

package/src/index.js

@@ -11,14 +11,75 @@ function initializePlayers() {
   const elements = document.querySelectorAll('[data-vidply]');
   
   elements.forEach(element => {
-    // Parse options from data attribute
+    // Parse options from data attribute (JSON format)
     const options = element.dataset.vidplyOptions 
       ? JSON.parse(element.dataset.vidplyOptions)
       : {};
     
+    // Parse individual data attributes and merge with options
+    // This allows for easier HTML-based configuration
+    const dataOptions = parseDataAttributes(element.dataset);
+    const mergedOptions = { ...dataOptions, ...options };
+    
     // Create player instance
-    new Player(element, options);
+    new Player(element, mergedOptions);
+  });
+}
+
+// Helper function to parse data attributes into options
+function parseDataAttributes(dataset) {
+  const options = {};
+  
+  // Map of data attribute names to option keys (camelCase conversion)
+  const attributeMap = {
+    // Sign Language
+    'signLanguageSrc': 'signLanguageSrc',
+    'signLanguageButton': 'signLanguageButton',
+    'signLanguagePosition': 'signLanguagePosition',
+    
+    // Audio Description
+    'audioDescriptionSrc': 'audioDescriptionSrc',
+    'audioDescriptionButton': 'audioDescriptionButton',
+    
+    // Other common options
+    'autoplay': 'autoplay',
+    'loop': 'loop',
+    'muted': 'muted',
+    'controls': 'controls',
+    'poster': 'poster',
+    'width': 'width',
+    'height': 'height',
+    'language': 'language',
+    'captions': 'captions',
+    'captionsDefault': 'captionsDefault',
+    'transcript': 'transcript',
+    'transcriptButton': 'transcriptButton',
+    'keyboard': 'keyboard',
+    'responsive': 'responsive',
+    'pipButton': 'pipButton',
+    'fullscreenButton': 'fullscreenButton'
+  };
+  
+  // Parse each data attribute
+  Object.keys(attributeMap).forEach(dataKey => {
+    const optionKey = attributeMap[dataKey];
+    const value = dataset[dataKey];
+    
+    if (value !== undefined) {
+      // Convert string values to appropriate types
+      if (value === 'true') {
+        options[optionKey] = true;
+      } else if (value === 'false') {
+        options[optionKey] = false;
+      } else if (!isNaN(value) && value !== '') {
+        options[optionKey] = Number(value);
+      } else {
+        options[optionKey] = value;
+      }
+    }
   });
+  
+  return options;
 }
 
 // Auto-initialize on DOM ready

package/src/styles/vidply.css

@@ -145,6 +145,10 @@
     height: auto;
 }
 
+.vidply-player.vidply-audio .vidply-menu {
+    max-height: 150px;
+}
+
 /* Video/Audio Element */
 .vidply-player video,
 .vidply-player audio {
@@ -185,7 +189,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 */
@@ -216,7 +220,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 {
@@ -281,7 +285,7 @@
         position: relative;
         right: 0;
         width: 100%;
-        z-index: 100;
+        z-index: 10;
     }
 
     /* Allow menus to position within controls */
@@ -518,7 +522,7 @@
     position: fixed;
     right: 0;
     top: 0;
-    z-index: 999;
+    z-index: 19;
 }
 
 .vidply-menu-backdrop.visible {
@@ -562,8 +566,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 */
@@ -830,7 +834,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 {
@@ -864,7 +873,7 @@
     position: absolute;
     right: 0;
     top: 0;
-    z-index: 2000;
+    z-index: 20;
 }
 
 @keyframes vidply-fade-in {
@@ -1176,7 +1185,7 @@
         top: auto;
         transform: translateX(-50%);
         width: auto;
-        z-index: 200;
+        z-index: 15;
     }
 
     .vidply-menu::after {
@@ -1374,7 +1383,7 @@
     position: sticky;
     text-transform: uppercase;
     top: 0;
-    z-index: 10;
+    z-index: 2;
 }
 
 .vidply-playlist-list {
@@ -1540,7 +1549,7 @@
     position: absolute;
     top: 0;
     width: 400px;
-    z-index: 100;
+    z-index: 5;
 }
 
 /* Minimum height for audio player transcript */
@@ -1662,6 +1671,69 @@
     background: var(--vidply-border-hover);
 }
 
+/* Sign Language Video */
+.vidply-sign-language-video {
+    background: var(--vidply-black);
+    border: 2px solid var(--vidply-white-30);
+    border-radius: 4px;
+    box-shadow: 0 4px 12px var(--vidply-black-60);
+    height: auto !important;
+    max-width: 400px;
+    min-width: 150px;
+    position: absolute;
+    transition: opacity 0.3s ease;
+    width: 35% !important;
+    z-index: 3;
+}
+
+.vidply-fullscreen .vidply-sign-language-video {
+    max-width: 600px;
+}
+
+/* Sign Language Video Positions */
+.vidply-sign-position-bottom-right {
+    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: 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;
+}
+
+.vidply-sign-position-top-left {
+    left: 16px;
+    top: 16px;
+}
+
+/* Responsive Sign Language Video */
+@media (width <= 640px) {
+    .vidply-sign-language-video {
+        min-width: 120px;
+        width: 35%;
+    }
+    
+    .vidply-sign-position-bottom-right,
+    .vidply-sign-position-bottom-left {
+        bottom: 126px !important; /* Adjust for smaller controls */
+    }
+}
+
 /* Responsive Adjustments */
 @media (width <= 640px) {
     .vidply-playlist-thumbnail {
@@ -1691,7 +1763,7 @@
         order: 3; /* After controls (which are order: 2) */
         position: relative;
         width: 100%;
-        z-index: 50;
+        z-index: 5;
     }
 
     .vidply-transcript-header {