vidply 1.0.22 → 1.0.25

package/src/i18n/i18n.js

@@ -2,13 +2,14 @@
  * Internationalization system
  */
 
-import { loadBuiltInTranslations } from './translations.js';
+import { getBaseTranslations, getBuiltInLanguageLoaders, loadBuiltInTranslation } from './translations.js';
 
 class I18n {
   constructor() {
     this.currentLanguage = 'en';
-    this.translations = loadBuiltInTranslations();
+    this.translations = getBaseTranslations();
     this.loadingPromises = new Map(); // Cache for loading promises
+    this.builtInLanguageLoaders = getBuiltInLanguageLoaders();
   }
 
   setLanguage(lang) {
@@ -24,6 +25,47 @@ class I18n {
     return this.currentLanguage;
   }
 
+  /**
+   * Ensure a language is available, loading built-ins on demand.
+   * @param {string} lang Language code
+   * @returns {Promise<string|null>} Normalized language code if available
+   */
+  async ensureLanguage(lang) {
+    const normalizedLang = (lang || '').toLowerCase();
+    if (!normalizedLang) return this.currentLanguage;
+
+    if (this.translations[normalizedLang]) {
+      return normalizedLang;
+    }
+
+    if (this.loadingPromises.has(normalizedLang)) {
+      await this.loadingPromises.get(normalizedLang);
+      return this.translations[normalizedLang] ? normalizedLang : null;
+    }
+
+    if (!this.builtInLanguageLoaders[normalizedLang]) {
+      return null;
+    }
+
+    const loadPromise = (async () => {
+      try {
+        const loaded = await loadBuiltInTranslation(normalizedLang);
+        if (loaded) {
+          this.translations[normalizedLang] = loaded;
+        }
+      } catch (error) {
+        console.warn(`Language "${normalizedLang}" failed to load:`, error);
+      } finally {
+        this.loadingPromises.delete(normalizedLang);
+      }
+    })();
+
+    this.loadingPromises.set(normalizedLang, loadPromise);
+    await loadPromise;
+
+    return this.translations[normalizedLang] ? normalizedLang : null;
+  }
+
   t(key, replacements = {}) {
     const keys = key.split('.');
     let value = this.translations[this.currentLanguage];
@@ -84,20 +126,22 @@ class I18n {
         const contentType = response.headers.get('content-type') || '';
         let translations;
 
+        const buffer = await response.arrayBuffer();
+        const utf8Text = new TextDecoder('utf-8').decode(buffer);
+
         if (contentType.includes('application/json') || url.endsWith('.json')) {
-          translations = await response.json();
+          translations = JSON.parse(utf8Text);
         } else if (contentType.includes('text/yaml') || contentType.includes('application/x-yaml') || url.endsWith('.yaml') || url.endsWith('.yml')) {
           // For YAML, we'll need to parse it
           // Note: This requires a YAML parser library in production
           // For now, we'll try to parse as JSON first, then show a warning
-          const text = await response.text();
           try {
             // Try JSON first (in case server sends JSON with YAML content-type)
-            translations = JSON.parse(text);
+            translations = JSON.parse(utf8Text);
           } catch (e) {
             // If JSON parsing fails, try to use a YAML parser if available
             if (typeof window !== 'undefined' && window.jsyaml) {
-              translations = window.jsyaml.load(text);
+              translations = window.jsyaml.load(utf8Text);
             } else {
               console.warn('YAML parsing requires js-yaml library. Please include it or use JSON format.');
               throw new Error('YAML parsing not available. Please use JSON format or include js-yaml library.');
@@ -105,7 +149,7 @@ class I18n {
           }
         } else {
           // Try to parse as JSON by default
-          translations = await response.json();
+          translations = JSON.parse(utf8Text);
         }
 
         this.addTranslation(langCode, translations);

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/i18n/translations.js

@@ -1,31 +1,48 @@
 /**
  * Translation strings for VidPly
- * This file loads all built-in language files
+ * Lazily loads built-in language files to keep the base bundle small.
  */
 
 import { en } from './languages/en.js';
-import { de } from './languages/de.js';
-import { es } from './languages/es.js';
-import { fr } from './languages/fr.js';
-import { ja } from './languages/ja.js';
+
+const builtInLanguageLoaders = {
+  de: () => import('./languages/de.js'),
+  es: () => import('./languages/es.js'),
+  fr: () => import('./languages/fr.js'),
+  ja: () => import('./languages/ja.js')
+};
+
+/**
+ * Returns the base translations that are always available in the bundle.
+ * Currently this is English-only to minimize bundle size.
+ */
+export function getBaseTranslations() {
+  return { en };
+}
 
 /**
- * Load all built-in translations
- * @returns {Object} Object containing all built-in language translations
+ * Expose built-in language loaders so they can be loaded on demand.
  */
-export function loadBuiltInTranslations() {
-  return {
-    en,
-    de,
-    es,
-    fr,
-    ja
-  };
+export function getBuiltInLanguageLoaders() {
+  return builtInLanguageLoaders;
+}
+
+/**
+ * Load a single built-in language asynchronously.
+ * @param {string} lang Language code to load
+ * @returns {Promise<Object|null>} Loaded translation object or null if unavailable
+ */
+export async function loadBuiltInTranslation(lang) {
+  const loader = builtInLanguageLoaders[lang];
+  if (!loader) return null;
+
+  const module = await loader();
+  return module[lang] || module.default || null;
 }
 
 /**
- * Legacy export for backwards compatibility
- * @deprecated Use loadBuiltInTranslations() instead
+ * Legacy export for backwards compatibility (keeps API surface stable)
+ * Note: Only English is included by default; other languages are loaded on demand.
  */
-export const translations = loadBuiltInTranslations();
+export const translations = getBaseTranslations();
 

package/src/icons/Icons.js

@@ -47,26 +47,12 @@ const iconPaths = {
 
     check: `<path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>`,
 
-    arrowUp: `<path d="M7 14l5-5 5 5z"/>`,
-
-    arrowDown: `<path d="M7 10l5 5 5-5z"/>`,
-
-    arrowLeft: `<path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>`,
-
-    arrowRight: `<path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>`,
-
     loading: `<path d="M12 4V1L8 5l4 4V6c3.31 0 6 2.69 6 6 0 1.01-.25 1.97-.7 2.8l1.46 1.46C19.54 15.03 20 13.57 20 12c0-4.42-3.58-8-8-8zm0 14c-3.31 0-6-2.69-6-6 0-1.01.25-1.97.7-2.8L5.24 7.74C4.46 8.97 4 10.43 4 12c0 4.42 3.58 8 8 8v3l4-4-4-4v3z"/>`,
 
     error: `<path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>`,
 
-    download: `<path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/>`,
-
-    link: `<path d="M3.9 12c0-1.71 1.39-3.1 3.1-3.1h4V7H7c-2.76 0-5 2.24-5 5s2.24 5 5 5h4v-1.9H7c-1.71 0-3.1-1.39-3.1-3.1zM8 13h8v-2H8v2zm9-6h-4v1.9h4c1.71 0 3.1 1.39 3.1 3.1s-1.39 3.1-3.1 3.1h-4V17h4c2.76 0 5-2.24 5-5s-2.24-5-5-5z"/>`,
-
     playlist: `<path d="M15 6H3v2h12V6zm0 4H3v2h12v-2zM3 16h8v-2H3v2zM17 6v8.18c-.31-.11-.65-.18-1-.18-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3V8h3V6h-5z"/>`,
 
-    language: `<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zm6.93 6h-2.95c-.32-1.25-.78-2.45-1.38-3.56 1.84.63 3.37 1.91 4.33 3.56zM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96zM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56-1.84-.63-3.37-1.9-4.33-3.56zm2.95-8H5.08c.96-1.66 2.49-2.93 4.33-3.56C8.81 5.55 8.35 6.75 8.03 8zM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96zM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95c-.96 1.65-2.49 2.93-4.33 3.56zM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38z"/>`,
-
     hd: `<path d="M19 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.11 0 2-.9 2-2V5c0-1.1-.89-2-2-2zm-8 12H9.5v-2h-2v2H6V9h1.5v2.5h2V9H11v6zm7-1c0 .55-.45 1-1 1h-.75v1.5h-1.5V15H14c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v4zm-3.5-.5h2v-3h-2v3z"/>`,
 
     transcript: `<path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/>`,
@@ -81,18 +67,14 @@ const iconPaths = {
 
     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"/>`,
 
-    moreHorizontal: `<path d="M6 10c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm12 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2zm-6 0c-1.1 0-2 .9-2 2s.9 2 2 2 2-.9 2-2-.9-2-2-2z"/>`,
-    
     move: `<path d="M10 9h4V6h3l-5-5-5 5h3v3zm-1 1H6V7l-5 5 5 5v-3h3v-4zm14 2l-5-5v3h-3v4h3v3l5-5zm-9 3h-4v3H7l5 5 5-5h-3v-3z"/>`,
-    
+
     resize: `<path d="M21.71 11.29l-9-9c-.39-.39-1.02-.39-1.41 0l-9 9c-.39.39-.39 1.02 0 1.41l9 9c.39.39 1.02.39 1.41 0l9-9c.39-.38.39-1.01 0-1.41zM14 14.5V12h-4v2.5L7 11l3-3.5V10h4V7.5l3 3.5-3 3.5z"/>`,
-    
+
     clock: `<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"/><path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z"/>`
 };
 

package/src/renderers/HLSRenderer.js

@@ -309,6 +309,13 @@ export class HLSRenderer {
     return [];
   }
 
+  getCurrentQuality() {
+    if (this.hls) {
+      return this.hls.currentLevel;
+    }
+    return -1;
+  }
+
   destroy() {
     if (this.hls) {
       this.hls.destroy();

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;
   }
 };