vidply 1.0.3 → 1.0.5

package/src/i18n/translations.js

@@ -101,6 +101,16 @@ export const translations = {
     },
     speeds: {
       normal: 'Normal'
+    },
+    time: {
+      display: 'Time display',
+      durationPrefix: 'Duration: ',
+      hour: '{count} hour',
+      hours: '{count} hours',
+      minute: '{count} minute',
+      minutes: '{count} minutes',
+      second: '{count} second',
+      seconds: '{count} seconds'
     }
   },
   
@@ -202,6 +212,16 @@ export const translations = {
     },
     speeds: {
       normal: 'Normal'
+    },
+    time: {
+      display: 'Zeitanzeige',
+      durationPrefix: 'Dauer: ',
+      hour: '{count} Stunde',
+      hours: '{count} Stunden',
+      minute: '{count} Minute',
+      minutes: '{count} Minuten',
+      second: '{count} Sekunde',
+      seconds: '{count} Sekunden'
     }
   },
 
@@ -303,6 +323,16 @@ export const translations = {
     },
     speeds: {
       normal: 'Normal'
+    },
+    time: {
+      display: 'Visualización de tiempo',
+      durationPrefix: 'Duración: ',
+      hour: '{count} hora',
+      hours: '{count} horas',
+      minute: '{count} minuto',
+      minutes: '{count} minutos',
+      second: '{count} segundo',
+      seconds: '{count} segundos'
     }
   },
 
@@ -404,6 +434,16 @@ export const translations = {
     },
     speeds: {
       normal: 'Normal'
+    },
+    time: {
+      display: 'Affichage du temps',
+      durationPrefix: 'Durée : ',
+      hour: '{count} heure',
+      hours: '{count} heures',
+      minute: '{count} minute',
+      minutes: '{count} minutes',
+      second: '{count} seconde',
+      seconds: '{count} secondes'
     }
   },
 
@@ -505,6 +545,16 @@ export const translations = {
     },
     speeds: {
       normal: '通常'
+    },
+    time: {
+      display: '時間表示',
+      durationPrefix: '再生時間: ',
+      hour: '{count}時間',
+      hours: '{count}時間',
+      minute: '{count}分',
+      minutes: '{count}分',
+      second: '{count}秒',
+      seconds: '{count}秒'
     }
   }
 };

package/src/styles/vidply.css

@@ -1387,6 +1387,8 @@
 }
 
 .vidply-playlist-list {
+    list-style: none;
+    margin: 0;
     padding: 4px 0;
 }
 
@@ -1399,6 +1401,7 @@
     display: flex;
     gap: 12px;
     padding: 12px 16px;
+    position: relative;
     transition: all 0.2s ease;
 }
 
@@ -1410,9 +1413,23 @@
 .vidply-playlist-item:focus {
     background: var(--vidply-white-08);
     border-left-color: var(--vidply-primary);
+    outline: 2px solid var(--vidply-primary-light);
+    outline-offset: -2px;
+    z-index: 1;
+}
+
+.vidply-playlist-item:focus:not(:focus-visible) {
     outline: none;
 }
 
+.vidply-playlist-item:focus-visible {
+    background: var(--vidply-white-08);
+    border-left-color: var(--vidply-primary);
+    outline: 2px solid var(--vidply-primary-light);
+    outline-offset: -2px;
+    z-index: 1;
+}
+
 .vidply-playlist-item-active {
     background: var(--vidply-primary-15);
     border-left-color: var(--vidply-primary);
@@ -1422,6 +1439,13 @@
     background: var(--vidply-primary-20);
 }
 
+.vidply-playlist-item-active:focus,
+.vidply-playlist-item-active:focus-visible {
+    background: var(--vidply-primary-20);
+    outline: 2px solid var(--vidply-primary-light);
+    outline-offset: -2px;
+}
+
 /* Playlist Thumbnail */
 .vidply-playlist-thumbnail {
     align-items: center;

package/src/utils/TimeUtils.js

@@ -2,6 +2,8 @@
  * Time formatting and conversion utilities
  */
 
+import {i18n} from '../i18n/i18n.js';
+
 export const TimeUtils = {
   /**
    * Format seconds to time string (HH:MM:SS or MM:SS)
@@ -49,7 +51,7 @@ export const TimeUtils = {
    */
   formatDuration(seconds) {
     if (!isFinite(seconds) || seconds < 0) {
-      return '0 seconds';
+      return i18n.t('time.seconds', { count: 0 });
     }
     
     const hours = Math.floor(seconds / 3600);
@@ -59,13 +61,16 @@ export const TimeUtils = {
     const parts = [];
     
     if (hours > 0) {
-      parts.push(`${hours} hour${hours !== 1 ? 's' : ''}`);
+      const key = hours === 1 ? 'time.hour' : 'time.hours';
+      parts.push(i18n.t(key, { count: hours }));
     }
     if (minutes > 0) {
-      parts.push(`${minutes} minute${minutes !== 1 ? 's' : ''}`);
+      const key = minutes === 1 ? 'time.minute' : 'time.minutes';
+      parts.push(i18n.t(key, { count: minutes }));
     }
     if (secs > 0 || parts.length === 0) {
-      parts.push(`${secs} second${secs !== 1 ? 's' : ''}`);
+      const key = secs === 1 ? 'time.second' : 'time.seconds';
+      parts.push(i18n.t(key, { count: secs }));
     }
     
     return parts.join(', ');