vidply 1.0.22 → 1.0.24

package/src/i18n/languages/de.js

@@ -164,7 +164,11 @@ export const de = {
         nowPlaying: 'Läuft gerade: Titel {current} von {total}. {title}{artist}',
         by: ' von ',
         untitled: 'Ohne Titel',
-        trackUntitled: 'Titel {number}'
+        trackUntitled: 'Titel {number}',
+        currentlyPlaying: 'Wird gerade abgespielt',
+        notPlaying: 'Nicht aktiv',
+        pressEnterPlay: 'Eingabetaste zum Abspielen',
+        pressEnterRestart: 'Eingabetaste zum Neustart'
     }
 };
 

package/src/i18n/languages/en.js

@@ -164,7 +164,11 @@ export const en = {
     nowPlaying: 'Now playing: Track {current} of {total}. {title}{artist}',
     by: ' by ',
     untitled: 'Untitled',
-    trackUntitled: 'Track {number}'
+    trackUntitled: 'Track {number}',
+    currentlyPlaying: 'Currently playing',
+    notPlaying: 'Not playing',
+    pressEnterPlay: 'Press Enter to play',
+    pressEnterRestart: 'Press Enter to restart'
   }
 };
 

package/src/i18n/languages/es.js

@@ -164,7 +164,11 @@ export const es = {
     nowPlaying: 'Reproduciendo ahora: Pista {current} de {total}. {title}{artist}',
     by: ' por ',
     untitled: 'Sin título',
-    trackUntitled: 'Pista {number}'
+    trackUntitled: 'Pista {number}',
+    currentlyPlaying: 'Reproduciendo actualmente',
+    notPlaying: 'Sin reproducir',
+    pressEnterPlay: 'Pulsa Enter para reproducir',
+    pressEnterRestart: 'Pulsa Enter para reiniciar'
   }
 };
 

package/src/i18n/languages/fr.js

@@ -164,7 +164,11 @@ export const fr = {
     nowPlaying: 'Lecture en cours : Piste {current} sur {total}. {title}{artist}',
     by: ' par ',
     untitled: 'Sans titre',
-    trackUntitled: 'Piste {number}'
+    trackUntitled: 'Piste {number}',
+    currentlyPlaying: 'En cours de lecture',
+    notPlaying: 'Non en lecture',
+    pressEnterPlay: 'Appuyez sur Entrée pour lire',
+    pressEnterRestart: 'Appuyez sur Entrée pour recommencer'
   }
 };
 

package/src/i18n/languages/ja.js

@@ -164,7 +164,11 @@ export const ja = {
     nowPlaying: '再生中: トラック {current}/{total}. {title}{artist}',
     by: ' - ',
     untitled: 'タイトルなし',
-    trackUntitled: 'トラック {number}'
+    trackUntitled: 'トラック {number}',
+    currentlyPlaying: '再生中',
+    notPlaying: '停止中',
+    pressEnterPlay: 'Enterキーで再生',
+    pressEnterRestart: 'Enterキーで最初から再生'
   }
 };
 

package/src/styles/vidply.css

@@ -489,7 +489,6 @@
     background: linear-gradient(135deg, var(--vidply-black) 0%, #2a2a2a 100%);
     height: 100%;
     order: 1; /* First in flex order */
-    overflow: hidden;
     position: relative;
     width: 100%;
     z-index: 1; /* Base video layer */
@@ -580,6 +579,8 @@
     transform: translate(-50%, -50%);
     transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
     z-index: var(--vidply-z-overlay);
+    border: 0.125rem solid var(--vidply-primary);
+    border-radius: 50%;
 }
 
 .vidply-play-overlay:hover {
@@ -669,7 +670,7 @@
 .vidply-progress-time-wrapper {
     align-items: center;
     display: flex;
-    gap: var(--vidply-gap-lg);
+    gap: 1.25rem;
     margin-bottom: var(--vidply-gap-lg);
     width: 100%;
 }
@@ -681,6 +682,7 @@
     cursor: pointer;
     flex: 1;
     height: 0.5625rem;
+    margin-right: 0.5rem;
     position: relative;
     transition: height 0.2s ease;
 }
@@ -802,6 +804,82 @@
     opacity: 0.5;
 }
 
+/* Button text - hidden by default, visible when CSS is disabled */
+.vidply-button-text {
+    display: none;
+}
+
+/* When CSS is disabled or unavailable, button text will be visible */
+
+/* This ensures buttons are functional even without CSS */
+
+/* Tooltip styles - aria-hidden popovers for sighted users */
+.vidply-tooltip {
+    background: #e0e0e0;
+    border-radius: var(--vidply-radius-sm);
+    color: #000;
+    font-size: var(--vidply-font-xs);
+    left: 50%;
+    opacity: 0;
+    padding: 0.375rem 0.5rem;
+    pointer-events: none;
+    position: absolute;
+    top: calc(100% + 0.5rem);
+    transform: translateX(-50%) translateY(-0.25rem);
+    transition: opacity var(--vidply-transition-fast), transform var(--vidply-transition-fast);
+    white-space: nowrap;
+    z-index: calc(var(--vidply-z-menu) + 1);
+}
+
+.vidply-tooltip::before {
+    border-color: transparent transparent #e0e0e0;
+    border-style: solid;
+    border-width: 0 0.375rem 0.375rem;
+    content: '';
+    left: 50%;
+    position: absolute;
+    top: -0.375rem;
+    transform: translateX(-50%);
+}
+
+/* Show tooltip on hover/focus */
+.vidply-tooltip-visible {
+    opacity: 1;
+    transform: translateX(-50%) translateY(0);
+}
+
+/* In fullscreen mode, position tooltips above buttons */
+.vidply-player.vidply-fullscreen .vidply-tooltip,
+.vidply-player:fullscreen .vidply-tooltip {
+    bottom: calc(100% + 0.5rem);
+    top: auto;
+    transform: translateX(-50%) translateY(0.25rem);
+}
+
+.vidply-player.vidply-fullscreen .vidply-tooltip-visible,
+.vidply-player:fullscreen .vidply-tooltip-visible {
+    transform: translateX(-50%) translateY(0);
+}
+
+/* Adjust tooltip arrow for fullscreen (pointing down instead of up) */
+.vidply-player.vidply-fullscreen .vidply-tooltip::before,
+.vidply-player:fullscreen .vidply-tooltip::before {
+    border-color: #e0e0e0 transparent transparent;
+    border-width: 0.375rem 0.375rem 0;
+    bottom: -0.375rem;
+    top: auto;
+}
+
+/* Ensure buttons with tooltips are positioned relatively */
+.vidply-button,
+.vidply-icon-button,
+.vidply-sign-language-settings,
+.vidply-sign-language-close,
+.vidply-transcript-settings,
+.vidply-transcript-close {
+    position: relative;
+}
+
 /* Icons */
 .vidply-icon {
     display: inline-block;
@@ -2139,14 +2217,29 @@
     padding: 1rem 1.25rem;
 }
 
+/* Track header - contains track number and duration */
+.vidply-track-header {
+    align-items: center;
+    display: flex;
+    gap: 0.75rem;
+    justify-content: space-between;
+    margin-bottom: 0.25rem;
+}
+
 .vidply-track-number {
     color: var(--vidply-text-muted);
     font-size: 0.75rem;
     letter-spacing: 0.0313rem;
-    margin-bottom: 0.25rem;
     text-transform: uppercase;
 }
 
+/* Duration in track info display */
+.vidply-track-duration {
+    color: var(--vidply-text-muted);
+    font-size: 0.75rem;
+    font-variant-numeric: tabular-nums;
+}
+
 .vidply-track-title {
     color: var(--vidply-white);
     font-size: 1.125rem;
@@ -2159,6 +2252,18 @@
     font-size: 0.875rem;
 }
 
+.vidply-track-description {
+    color: var(--vidply-white-60);
+    font-size: 0.8125rem;
+    line-height: 1.4;
+    margin-top: 0.5rem;
+    max-height: 3.5em;
+    overflow: hidden;
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+}
+
 /* Playlist Panel */
 .vidply-playlist-panel {
     background: var(--vidply-bg-playlist);
@@ -2264,6 +2369,13 @@
     box-shadow: 0 0.5rem 1.5rem var(--vidply-black-60);
 }
 
+/* Fullscreen thumbnail container - takes full width of card */
+.vidply-player.vidply-fullscreen .vidply-playlist-thumbnail-container,
+.vidply-player:fullscreen .vidply-playlist-thumbnail-container {
+    position: relative;
+    width: 100%;
+}
+
 .vidply-player.vidply-fullscreen .vidply-playlist-thumbnail,
 .vidply-player:fullscreen .vidply-playlist-thumbnail {
     width: 100%;
@@ -2271,11 +2383,26 @@
     border-radius: 0;
 }
 
+/* Larger duration badge in fullscreen for better visibility */
+.vidply-player.vidply-fullscreen .vidply-playlist-duration-badge,
+.vidply-player:fullscreen .vidply-playlist-duration-badge {
+    bottom: 0.375rem;
+    font-size: 0.75rem;
+    padding: 0.1875rem 0.375rem;
+    right: 0.375rem;
+}
+
 .vidply-player.vidply-fullscreen .vidply-playlist-item-info,
 .vidply-player:fullscreen .vidply-playlist-item-info {
     padding: 0.75rem;
 }
 
+/* Hide description in fullscreen to save space */
+.vidply-player.vidply-fullscreen .vidply-playlist-item-description,
+.vidply-player:fullscreen .vidply-playlist-item-description {
+    display: none;
+}
+
 .vidply-player.vidply-fullscreen .vidply-playlist-item-title,
 .vidply-player:fullscreen .vidply-playlist-item-title {
     font-size: 0.875rem;
@@ -2474,6 +2601,12 @@
     outline-offset: -0.125rem;
 }
 
+/* Playlist Thumbnail Container (wrapper for thumbnail + duration badge) */
+.vidply-playlist-thumbnail-container {
+    flex-shrink: 0;
+    position: relative;
+}
+
 /* Playlist Thumbnail */
 .vidply-playlist-thumbnail {
     align-items: center;
@@ -2505,6 +2638,23 @@
     color: var(--vidply-primary-light);
 }
 
+/* Duration badge on thumbnail (YouTube-style) */
+.vidply-playlist-duration-badge {
+    background: rgb(0 0 0 / 80%);
+    border-radius: 0.1875rem;
+    bottom: 0.125rem;
+    color: var(--vidply-white);
+    font-family: var(--vidply-font-family);
+    font-size: 0.625rem;
+    font-variant-numeric: tabular-nums;
+    font-weight: 500;
+    letter-spacing: 0.02em;
+    line-height: 1;
+    padding: 0.125rem 0.25rem;
+    position: absolute;
+    right: 0.125rem;
+}
+
 /* Playlist Item Info */
 .vidply-playlist-item-info {
     display: block;
@@ -2512,12 +2662,21 @@
     min-width: 0;
 }
 
+/* Title row - contains title and optional inline duration */
+.vidply-playlist-item-title-row {
+    align-items: center;
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 0.25rem;
+}
+
 .vidply-playlist-item-title {
     color: var(--vidply-white);
     display: block;
+    flex: 1;
     font-size: 0.875rem;
     font-weight: 500;
-    margin-bottom: 0.25rem;
+    min-width: 0;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
@@ -2527,6 +2686,14 @@
     color: var(--vidply-primary-light);
 }
 
+/* Inline duration (shown when no thumbnail) */
+.vidply-playlist-item-duration {
+    color: var(--vidply-text-disabled);
+    flex-shrink: 0;
+    font-size: 0.6875rem;
+    font-variant-numeric: tabular-nums;
+}
+
 .vidply-playlist-item-artist {
     color: var(--vidply-text-disabled);
     display: block;
@@ -2536,6 +2703,19 @@
     white-space: nowrap;
 }
 
+/* Description - truncated with ellipsis */
+.vidply-playlist-item-description {
+    -webkit-box-orient: vertical;
+    color: var(--vidply-text-subtle);
+    display: -webkit-box;
+    font-size: 0.6875rem;
+    -webkit-line-clamp: 2;
+    line-height: 1.4;
+    margin-top: 0.25rem;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 /* Playlist Item Icon */
 .vidply-playlist-item-icon {
     flex-shrink: 0;

package/src/utils/DOMUtils.js

@@ -149,6 +149,73 @@ export const DOMUtils = {
     
     temp.innerHTML = safeHtml;
     return temp.innerHTML;
+  },
+
+  /**
+   * Create a tooltip element that is aria-hidden (not read by screen readers)
+   * @param {string} text - Tooltip text
+   * @param {string} classPrefix - Class prefix for styling
+   * @returns {HTMLElement} Tooltip element
+   */
+  createTooltip(text, classPrefix = 'vidply') {
+    const tooltip = this.createElement('span', {
+      className: `${classPrefix}-tooltip`,
+      textContent: text,
+      attributes: {
+        'aria-hidden': 'true'
+      }
+    });
+    return tooltip;
+  },
+
+  /**
+   * Attach a tooltip to an element
+   * @param {HTMLElement} element - Element to attach tooltip to
+   * @param {string} text - Tooltip text
+   * @param {string} classPrefix - Class prefix for styling
+   */
+  attachTooltip(element, text, classPrefix = 'vidply') {
+    if (!element || !text) return;
+    
+    // Remove existing tooltip if any
+    const existingTooltip = element.querySelector(`.${classPrefix}-tooltip`);
+    if (existingTooltip) {
+      existingTooltip.remove();
+    }
+    
+    const tooltip = this.createTooltip(text, classPrefix);
+    element.appendChild(tooltip);
+    
+    // Show tooltip on hover/focus
+    const showTooltip = () => {
+      tooltip.classList.add(`${classPrefix}-tooltip-visible`);
+    };
+    
+    const hideTooltip = () => {
+      tooltip.classList.remove(`${classPrefix}-tooltip-visible`);
+    };
+    
+    element.addEventListener('mouseenter', showTooltip);
+    element.addEventListener('mouseleave', hideTooltip);
+    element.addEventListener('focus', showTooltip);
+    element.addEventListener('blur', hideTooltip);
+  },
+
+  /**
+   * Create visible button text that is hidden by CSS but visible when CSS is disabled
+   * @param {string} text - Button text
+   * @param {string} classPrefix - Class prefix for styling
+   * @returns {HTMLElement} Button text element
+   */
+  createButtonText(text, classPrefix = 'vidply') {
+    const buttonText = this.createElement('span', {
+      className: `${classPrefix}-button-text`,
+      textContent: text,
+      attributes: {
+        'aria-hidden': 'true'
+      }
+    });
+    return buttonText;
   }
 };
 

package/src/utils/MenuUtils.js

@@ -81,7 +81,8 @@ export function attachMenuKeyboardNavigation(menu, button, itemSelector, onClose
                 menuItems.forEach((item, idx) => {
                     item.setAttribute('tabindex', idx === nextIndex ? '0' : '-1');
                 });
-                menuItems[nextIndex].focus();
+                menuItems[nextIndex].focus({ preventScroll: false });
+                menuItems[nextIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                 break;
             
             case 'ArrowUp':
@@ -91,7 +92,8 @@ export function attachMenuKeyboardNavigation(menu, button, itemSelector, onClose
                 menuItems.forEach((item, idx) => {
                     item.setAttribute('tabindex', idx === prevIndex ? '0' : '-1');
                 });
-                menuItems[prevIndex].focus();
+                menuItems[prevIndex].focus({ preventScroll: false });
+                menuItems[prevIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                 break;
             
             case 'Home':
@@ -100,7 +102,8 @@ export function attachMenuKeyboardNavigation(menu, button, itemSelector, onClose
                 menuItems.forEach((item, idx) => {
                     item.setAttribute('tabindex', idx === 0 ? '0' : '-1');
                 });
-                menuItems[0].focus();
+                menuItems[0].focus({ preventScroll: false });
+                menuItems[0].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                 break;
             
             case 'End':
@@ -110,7 +113,8 @@ export function attachMenuKeyboardNavigation(menu, button, itemSelector, onClose
                 menuItems.forEach((item, idx) => {
                     item.setAttribute('tabindex', idx === lastIndex ? '0' : '-1');
                 });
-                menuItems[lastIndex].focus();
+                menuItems[lastIndex].focus({ preventScroll: false });
+                menuItems[lastIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                 break;
             
             case 'Enter':
@@ -159,6 +163,8 @@ export function focusFirstMenuItem(menu, itemSelector, delay = 0) {
                 item.setAttribute('tabindex', index === 0 ? '0' : '-1');
             });
             focusElement(menuItems[0], { delay: 0 });
+            // Scroll into view for keyboard users
+            menuItems[0].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
         }
     }, delay);
 }

package/src/utils/SettingsMenuFactory.js

@@ -190,7 +190,8 @@ export function setupSettingsMenuKeyboard(menu, button, onClose) {
                 menuItems.forEach((item, idx) => {
                     item.setAttribute('tabindex', idx === nextIndex ? '0' : '-1');
                 });
-                menuItems[nextIndex].focus();
+                menuItems[nextIndex].focus({ preventScroll: false });
+                menuItems[nextIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                 break;
 
             case 'ArrowUp':
@@ -199,7 +200,8 @@ export function setupSettingsMenuKeyboard(menu, button, onClose) {
                 menuItems.forEach((item, idx) => {
                     item.setAttribute('tabindex', idx === prevIndex ? '0' : '-1');
                 });
-                menuItems[prevIndex].focus();
+                menuItems[prevIndex].focus({ preventScroll: false });
+                menuItems[prevIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                 break;
 
             case 'Home':
@@ -207,7 +209,8 @@ export function setupSettingsMenuKeyboard(menu, button, onClose) {
                 menuItems.forEach((item, idx) => {
                     item.setAttribute('tabindex', idx === 0 ? '0' : '-1');
                 });
-                menuItems[0].focus();
+                menuItems[0].focus({ preventScroll: false });
+                menuItems[0].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                 break;
 
             case 'End':
@@ -216,7 +219,8 @@ export function setupSettingsMenuKeyboard(menu, button, onClose) {
                 menuItems.forEach((item, idx) => {
                     item.setAttribute('tabindex', idx === lastIndex ? '0' : '-1');
                 });
-                menuItems[lastIndex].focus();
+                menuItems[lastIndex].focus({ preventScroll: false });
+                menuItems[lastIndex].scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                 break;
 
             case 'Escape':

package/src/utils/WindowComponents.js

@@ -47,15 +47,16 @@ export function createWindowHeader({
     // Add settings button if requested
     let settingsButton = null;
     if (showSettings && onSettingsClick) {
+        const settingsAriaLabel = i18n.t('settings.title');
         settingsButton = DOMUtils.createElement('button', {
             className: `${classPrefix}-icon-button ${headerClass}-settings`,
             attributes: {
                 'type': 'button',
-                'aria-label': i18n.t('settings.title'),
-                'title': i18n.t('settings.title')
+                'aria-label': settingsAriaLabel
             }
         });
         settingsButton.appendChild(createIconElement('settings'));
+        DOMUtils.attachTooltip(settingsButton, settingsAriaLabel, classPrefix);
         settingsButton.addEventListener('click', onSettingsClick);
         leftSide.appendChild(settingsButton);
     }
@@ -74,15 +75,16 @@ export function createWindowHeader({
     leftSide.appendChild(title);
 
     // Create close button
+    const closeAriaLabel = i18n.t('player.close');
     const closeButton = DOMUtils.createElement('button', {
         className: `${classPrefix}-icon-button ${headerClass}-close`,
         attributes: {
             'type': 'button',
-            'aria-label': i18n.t('player.close'),
-            'title': i18n.t('player.close')
+            'aria-label': closeAriaLabel
         }
     });
     closeButton.appendChild(createIconElement('close'));
+    DOMUtils.attachTooltip(closeButton, closeAriaLabel, classPrefix);
     if (onClose) {
         closeButton.addEventListener('click', onClose);
     }