vidply 1.0.3 → 1.0.5

package/dist/vidply.esm.js

@@ -402,184 +402,6 @@ var DOMUtils = {
   }
 };
 
-// src/utils/TimeUtils.js
-var TimeUtils = {
-  /**
-   * Format seconds to time string (HH:MM:SS or MM:SS)
-   */
-  formatTime(seconds, alwaysShowHours = false) {
-    if (!isFinite(seconds) || seconds < 0) {
-      return alwaysShowHours ? "00:00:00" : "00:00";
-    }
-    const hours = Math.floor(seconds / 3600);
-    const minutes = Math.floor(seconds % 3600 / 60);
-    const secs = Math.floor(seconds % 60);
-    const pad = (num) => String(num).padStart(2, "0");
-    if (hours > 0 || alwaysShowHours) {
-      return `${pad(hours)}:${pad(minutes)}:${pad(secs)}`;
-    }
-    return `${pad(minutes)}:${pad(secs)}`;
-  },
-  /**
-   * Parse time string to seconds
-   */
-  parseTime(timeString) {
-    const parts = timeString.split(":").map((p) => parseInt(p, 10));
-    if (parts.length === 3) {
-      return parts[0] * 3600 + parts[1] * 60 + parts[2];
-    } else if (parts.length === 2) {
-      return parts[0] * 60 + parts[1];
-    } else if (parts.length === 1) {
-      return parts[0];
-    }
-    return 0;
-  },
-  /**
-   * Format seconds to readable duration
-   */
-  formatDuration(seconds) {
-    if (!isFinite(seconds) || seconds < 0) {
-      return "0 seconds";
-    }
-    const hours = Math.floor(seconds / 3600);
-    const minutes = Math.floor(seconds % 3600 / 60);
-    const secs = Math.floor(seconds % 60);
-    const parts = [];
-    if (hours > 0) {
-      parts.push(`${hours} hour${hours !== 1 ? "s" : ""}`);
-    }
-    if (minutes > 0) {
-      parts.push(`${minutes} minute${minutes !== 1 ? "s" : ""}`);
-    }
-    if (secs > 0 || parts.length === 0) {
-      parts.push(`${secs} second${secs !== 1 ? "s" : ""}`);
-    }
-    return parts.join(", ");
-  },
-  /**
-   * Format percentage
-   */
-  formatPercentage(value, total) {
-    if (total === 0) return 0;
-    return Math.round(value / total * 100);
-  }
-};
-
-// src/icons/Icons.js
-var iconPaths = {
-  play: `<path d="M8 5v14l11-7z"/>`,
-  pause: `<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>`,
-  stop: `<rect x="6" y="6" width="12" height="12"/>`,
-  rewind: `<path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/>`,
-  forward: `<path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/>`,
-  skipPrevious: `<path d="M6 6h2v12H6V6zm3 6l8.5 6V6L9 12z"/>`,
-  skipNext: `<path d="M16 6h2v12h-2V6zM6 6l8.5 6L6 18V6z"/>`,
-  restart: `<path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>`,
-  volumeHigh: `<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.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>`,
-  volumeMedium: `<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"/>`,
-  volumeLow: `<path d="M7 9v6h4l5 5V4l-5 5H7z"/>`,
-  volumeMuted: `<path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>`,
-  fullscreen: `<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>`,
-  fullscreenExit: `<path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>`,
-  settings: `<path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94L14.4 2.81c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>`,
-  captions: `<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1z"/>`,
-  captionsOff: `<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1z"/><path d="M0 0h24v24H0z" fill="none"/>`,
-  pip: `<path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z"/>`,
-  speed: `<path d="M20.38 8.57l-1.23 1.85a8 8 0 0 1-.22 7.58H5.07A8 8 0 0 1 15.58 6.85l1.85-1.23A10 10 0 0 0 3.35 19a2 2 0 0 0 1.72 1h13.85a2 2 0 0 0 1.74-1 10 10 0 0 0-.27-10.44z"/><path d="M10.59 15.41a2 2 0 0 0 2.83 0l5.66-8.49-8.49 5.66a2 2 0 0 0 0 2.83z"/>`,
-  close: `<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>`,
-  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"/>`,
-  audioDescription: `<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"/>`,
-  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: `<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: `<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"/>`
-};
-var svgWrapper = (paths) => `<svg viewBox="0 0 24 24" fill="currentColor">${paths}</svg>`;
-var Icons = Object.fromEntries(
-  Object.entries(iconPaths).map(([key, value]) => [key, svgWrapper(value)])
-);
-function getIcon(name) {
-  return Icons[name] || Icons.play;
-}
-function createIconElement(name, className = "") {
-  const wrapper = document.createElement("span");
-  wrapper.className = `vidply-icon ${className}`.trim();
-  wrapper.innerHTML = getIcon(name);
-  wrapper.setAttribute("aria-hidden", "true");
-  return wrapper;
-}
-function createPlayOverlay() {
-  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-  svg.setAttribute("class", "vidply-play-overlay");
-  svg.setAttribute("viewBox", "0 0 80 80");
-  svg.setAttribute("width", "80");
-  svg.setAttribute("height", "80");
-  svg.setAttribute("aria-hidden", "true");
-  svg.setAttribute("role", "presentation");
-  svg.style.cursor = "pointer";
-  const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
-  const filterId = `vidply-play-shadow-${Math.random().toString(36).substr(2, 9)}`;
-  const filter = document.createElementNS("http://www.w3.org/2000/svg", "filter");
-  filter.setAttribute("id", filterId);
-  filter.setAttribute("x", "-50%");
-  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);
-  const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
-  circle.setAttribute("cx", "40");
-  circle.setAttribute("cy", "40");
-  circle.setAttribute("r", "40");
-  circle.setAttribute("fill", "rgba(255, 255, 255, 0.95)");
-  circle.setAttribute("filter", `url(#${filterId})`);
-  circle.setAttribute("class", "vidply-play-overlay-bg");
-  svg.appendChild(circle);
-  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;
-}
-
 // src/i18n/translations.js
 var translations = {
   en: {
@@ -680,6 +502,16 @@ var 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"
     }
   },
   de: {
@@ -780,6 +612,16 @@ var 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"
     }
   },
   es: {
@@ -880,6 +722,16 @@ var translations = {
     },
     speeds: {
       normal: "Normal"
+    },
+    time: {
+      display: "Visualizaci\xF3n de tiempo",
+      durationPrefix: "Duraci\xF3n: ",
+      hour: "{count} hora",
+      hours: "{count} horas",
+      minute: "{count} minuto",
+      minutes: "{count} minutos",
+      second: "{count} segundo",
+      seconds: "{count} segundos"
     }
   },
   fr: {
@@ -980,6 +832,16 @@ var translations = {
     },
     speeds: {
       normal: "Normal"
+    },
+    time: {
+      display: "Affichage du temps",
+      durationPrefix: "Dur\xE9e : ",
+      hour: "{count} heure",
+      hours: "{count} heures",
+      minute: "{count} minute",
+      minutes: "{count} minutes",
+      second: "{count} seconde",
+      seconds: "{count} secondes"
     }
   },
   ja: {
@@ -1080,6 +942,16 @@ var translations = {
     },
     speeds: {
       normal: "\u901A\u5E38"
+    },
+    time: {
+      display: "\u6642\u9593\u8868\u793A",
+      durationPrefix: "\u518D\u751F\u6642\u9593: ",
+      hour: "{count}\u6642\u9593",
+      hours: "{count}\u6642\u9593",
+      minute: "{count}\u5206",
+      minutes: "{count}\u5206",
+      second: "{count}\u79D2",
+      seconds: "{count}\u79D2"
     }
   }
 };
@@ -1135,6 +1007,187 @@ var I18n = class {
 };
 var i18n = new I18n();
 
+// src/utils/TimeUtils.js
+var TimeUtils = {
+  /**
+   * Format seconds to time string (HH:MM:SS or MM:SS)
+   */
+  formatTime(seconds, alwaysShowHours = false) {
+    if (!isFinite(seconds) || seconds < 0) {
+      return alwaysShowHours ? "00:00:00" : "00:00";
+    }
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor(seconds % 3600 / 60);
+    const secs = Math.floor(seconds % 60);
+    const pad = (num) => String(num).padStart(2, "0");
+    if (hours > 0 || alwaysShowHours) {
+      return `${pad(hours)}:${pad(minutes)}:${pad(secs)}`;
+    }
+    return `${pad(minutes)}:${pad(secs)}`;
+  },
+  /**
+   * Parse time string to seconds
+   */
+  parseTime(timeString) {
+    const parts = timeString.split(":").map((p) => parseInt(p, 10));
+    if (parts.length === 3) {
+      return parts[0] * 3600 + parts[1] * 60 + parts[2];
+    } else if (parts.length === 2) {
+      return parts[0] * 60 + parts[1];
+    } else if (parts.length === 1) {
+      return parts[0];
+    }
+    return 0;
+  },
+  /**
+   * Format seconds to readable duration
+   */
+  formatDuration(seconds) {
+    if (!isFinite(seconds) || seconds < 0) {
+      return i18n.t("time.seconds", { count: 0 });
+    }
+    const hours = Math.floor(seconds / 3600);
+    const minutes = Math.floor(seconds % 3600 / 60);
+    const secs = Math.floor(seconds % 60);
+    const parts = [];
+    if (hours > 0) {
+      const key = hours === 1 ? "time.hour" : "time.hours";
+      parts.push(i18n.t(key, { count: hours }));
+    }
+    if (minutes > 0) {
+      const key = minutes === 1 ? "time.minute" : "time.minutes";
+      parts.push(i18n.t(key, { count: minutes }));
+    }
+    if (secs > 0 || parts.length === 0) {
+      const key = secs === 1 ? "time.second" : "time.seconds";
+      parts.push(i18n.t(key, { count: secs }));
+    }
+    return parts.join(", ");
+  },
+  /**
+   * Format percentage
+   */
+  formatPercentage(value, total) {
+    if (total === 0) return 0;
+    return Math.round(value / total * 100);
+  }
+};
+
+// src/icons/Icons.js
+var iconPaths = {
+  play: `<path d="M8 5v14l11-7z"/>`,
+  pause: `<path d="M6 4h4v16H6V4zm8 0h4v16h-4V4z"/>`,
+  stop: `<rect x="6" y="6" width="12" height="12"/>`,
+  rewind: `<path d="M11 18V6l-8.5 6 8.5 6zm.5-6l8.5 6V6l-8.5 6z"/>`,
+  forward: `<path d="M4 18l8.5-6L4 6v12zm9-12v12l8.5-6L13 6z"/>`,
+  skipPrevious: `<path d="M6 6h2v12H6V6zm3 6l8.5 6V6L9 12z"/>`,
+  skipNext: `<path d="M16 6h2v12h-2V6zM6 6l8.5 6L6 18V6z"/>`,
+  restart: `<path d="M12 5V1L7 6l5 5V7c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6H4c0 4.42 3.58 8 8 8s8-3.58 8-8-3.58-8-8-8z"/>`,
+  volumeHigh: `<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.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"/>`,
+  volumeMedium: `<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"/>`,
+  volumeLow: `<path d="M7 9v6h4l5 5V4l-5 5H7z"/>`,
+  volumeMuted: `<path d="M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z"/>`,
+  fullscreen: `<path d="M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z"/>`,
+  fullscreenExit: `<path d="M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z"/>`,
+  settings: `<path d="M19.14 12.94c.04-.3.06-.61.06-.94 0-.32-.02-.64-.07-.94l2.03-1.58c.18-.14.23-.41.12-.61l-1.92-3.32c-.12-.22-.37-.29-.59-.22l-2.39.96c-.5-.38-1.03-.7-1.62-.94L14.4 2.81c-.04-.24-.24-.41-.48-.41h-3.84c-.24 0-.43.17-.47.41l-.36 2.54c-.59.24-1.13.57-1.62.94l-2.39-.96c-.22-.08-.47 0-.59.22L2.74 8.87c-.12.21-.08.47.12.61l2.03 1.58c-.05.3-.09.63-.09.94s.02.64.07.94l-2.03 1.58c-.18.14-.23.41-.12.61l1.92 3.32c.12.22.37.29.59.22l2.39-.96c.5.38 1.03.7 1.62.94l.36 2.54c.05.24.24.41.48.41h3.84c.24 0 .44-.17.47-.41l.36-2.54c.59-.24 1.13-.56 1.62-.94l2.39.96c.22.08.47 0 .59-.22l1.92-3.32c.12-.22.07-.47-.12-.61l-2.01-1.58zM12 15.6c-1.98 0-3.6-1.62-3.6-3.6s1.62-3.6 3.6-3.6 3.6 1.62 3.6 3.6-1.62 3.6-3.6 3.6z"/>`,
+  captions: `<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1z"/>`,
+  captionsOff: `<path d="M19 4H5c-1.11 0-2 .9-2 2v12c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm-8 7H9.5v-.5h-2v3h2V13H11v1c0 .55-.45 1-1 1H7c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1zm7 0h-1.5v-.5h-2v3h2V13H18v1c0 .55-.45 1-1 1h-3c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1h3c.55 0 1 .45 1 1v1z"/><path d="M0 0h24v24H0z" fill="none"/>`,
+  pip: `<path d="M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z"/>`,
+  speed: `<path d="M20.38 8.57l-1.23 1.85a8 8 0 0 1-.22 7.58H5.07A8 8 0 0 1 15.58 6.85l1.85-1.23A10 10 0 0 0 3.35 19a2 2 0 0 0 1.72 1h13.85a2 2 0 0 0 1.74-1 10 10 0 0 0-.27-10.44z"/><path d="M10.59 15.41a2 2 0 0 0 2.83 0l5.66-8.49-8.49 5.66a2 2 0 0 0 0 2.83z"/>`,
+  close: `<path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/>`,
+  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"/>`,
+  audioDescription: `<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"/>`,
+  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: `<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: `<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"/>`
+};
+var svgWrapper = (paths) => `<svg viewBox="0 0 24 24" fill="currentColor">${paths}</svg>`;
+var Icons = Object.fromEntries(
+  Object.entries(iconPaths).map(([key, value]) => [key, svgWrapper(value)])
+);
+function getIcon(name) {
+  return Icons[name] || Icons.play;
+}
+function createIconElement(name, className = "") {
+  const wrapper = document.createElement("span");
+  wrapper.className = `vidply-icon ${className}`.trim();
+  wrapper.innerHTML = getIcon(name);
+  wrapper.setAttribute("aria-hidden", "true");
+  return wrapper;
+}
+function createPlayOverlay() {
+  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+  svg.setAttribute("class", "vidply-play-overlay");
+  svg.setAttribute("viewBox", "0 0 80 80");
+  svg.setAttribute("width", "80");
+  svg.setAttribute("height", "80");
+  svg.setAttribute("aria-hidden", "true");
+  svg.setAttribute("role", "presentation");
+  svg.style.cursor = "pointer";
+  const defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
+  const filterId = `vidply-play-shadow-${Math.random().toString(36).substr(2, 9)}`;
+  const filter = document.createElementNS("http://www.w3.org/2000/svg", "filter");
+  filter.setAttribute("id", filterId);
+  filter.setAttribute("x", "-50%");
+  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);
+  const circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
+  circle.setAttribute("cx", "40");
+  circle.setAttribute("cy", "40");
+  circle.setAttribute("r", "40");
+  circle.setAttribute("fill", "rgba(255, 255, 255, 0.95)");
+  circle.setAttribute("filter", `url(#${filterId})`);
+  circle.setAttribute("class", "vidply-play-overlay-bg");
+  svg.appendChild(circle);
+  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;
+}
+
 // src/controls/ControlBar.js
 var ControlBar = class {
   constructor(player) {
@@ -1651,12 +1704,26 @@ var ControlBar = class {
   }
   createTimeDisplay() {
     const container = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-time`
+      className: `${this.player.options.classPrefix}-time`,
+      attributes: {
+        "role": "group",
+        "aria-label": i18n.t("time.display")
+      }
     });
     this.controls.currentTimeDisplay = DOMUtils.createElement("span", {
       className: `${this.player.options.classPrefix}-current-time`,
-      textContent: "00:00"
+      attributes: {
+        "aria-label": i18n.t("time.seconds", { count: 0 })
+      }
+    });
+    const currentTimeVisual = DOMUtils.createElement("span", {
+      textContent: "00:00",
+      attributes: {
+        "aria-hidden": "true"
+      }
     });
+    this.controls.currentTimeDisplay.appendChild(currentTimeVisual);
+    this.controls.currentTimeVisual = currentTimeVisual;
     const separator = DOMUtils.createElement("span", {
       textContent: " / ",
       attributes: {
@@ -1665,8 +1732,18 @@ var ControlBar = class {
     });
     this.controls.durationDisplay = DOMUtils.createElement("span", {
       className: `${this.player.options.classPrefix}-duration`,
-      textContent: "00:00"
+      attributes: {
+        "aria-label": i18n.t("time.durationPrefix") + i18n.t("time.seconds", { count: 0 })
+      }
     });
+    const durationVisual = DOMUtils.createElement("span", {
+      textContent: "00:00",
+      attributes: {
+        "aria-hidden": "true"
+      }
+    });
+    this.controls.durationDisplay.appendChild(durationVisual);
+    this.controls.durationVisual = durationVisual;
     container.appendChild(this.controls.currentTimeDisplay);
     container.appendChild(separator);
     container.appendChild(this.controls.durationDisplay);
@@ -2490,13 +2567,17 @@ var ControlBar = class {
     const percent = this.player.state.currentTime / this.player.state.duration * 100;
     this.controls.played.style.width = `${percent}%`;
     this.controls.progress.setAttribute("aria-valuenow", String(Math.round(percent)));
-    if (this.controls.currentTimeDisplay) {
-      this.controls.currentTimeDisplay.textContent = TimeUtils.formatTime(this.player.state.currentTime);
+    if (this.controls.currentTimeVisual) {
+      const currentTime = this.player.state.currentTime;
+      this.controls.currentTimeVisual.textContent = TimeUtils.formatTime(currentTime);
+      this.controls.currentTimeDisplay.setAttribute("aria-label", TimeUtils.formatDuration(currentTime));
     }
   }
   updateDuration() {
-    if (this.controls.durationDisplay) {
-      this.controls.durationDisplay.textContent = TimeUtils.formatTime(this.player.state.duration);
+    if (this.controls.durationVisual) {
+      const duration = this.player.state.duration;
+      this.controls.durationVisual.textContent = TimeUtils.formatTime(duration);
+      this.controls.durationDisplay.setAttribute("aria-label", i18n.t("time.durationPrefix") + TimeUtils.formatDuration(duration));
     }
   }
   updateVolumeDisplay() {
@@ -4558,6 +4639,17 @@ var Player = class extends EventEmitter {
         this.captionManager.destroy();
         this.captionManager = new CaptionManager(this);
       }
+      if (this.transcriptManager) {
+        const wasVisible = this.transcriptManager.isVisible;
+        this.transcriptManager.destroy();
+        this.transcriptManager = new TranscriptManager(this);
+        if (wasVisible) {
+          this.transcriptManager.showTranscript();
+        }
+      }
+      if (this.controlBar) {
+        this.updateControlBar();
+      }
       this.emit("sourcechange", config);
       this.log("Media loaded successfully");
     } catch (error) {
@@ -4569,6 +4661,17 @@ var Player = class extends EventEmitter {
    * @param {string} src - New source URL
    * @returns {boolean}
    */
+  /**
+   * Update control bar to refresh button visibility based on available features
+   */
+  updateControlBar() {
+    if (!this.controlBar) return;
+    const controlBar = this.controlBar;
+    controlBar.element.innerHTML = "";
+    controlBar.createControls();
+    controlBar.attachEvents();
+    controlBar.setupAutoHide();
+  }
   shouldChangeRenderer(src) {
     if (!this.renderer) return true;
     const isYouTube = src.includes("youtube.com") || src.includes("youtu.be");
@@ -5028,7 +5131,9 @@ var PlaylistManager = class {
     this.trackInfoElement = null;
     this.handleTrackEnd = this.handleTrackEnd.bind(this);
     this.handleTrackError = this.handleTrackError.bind(this);
+    this.player.playlistManager = this;
     this.init();
+    this.updatePlayerControls();
   }
   init() {
     this.player.on("ended", this.handleTrackEnd);
@@ -5037,6 +5142,17 @@ var PlaylistManager = class {
       this.createUI();
     }
   }
+  /**
+   * Update player controls to add playlist navigation buttons
+   */
+  updatePlayerControls() {
+    if (!this.player.controlBar) return;
+    const controlBar = this.player.controlBar;
+    controlBar.element.innerHTML = "";
+    controlBar.createControls();
+    controlBar.attachEvents();
+    controlBar.setupAutoHide();
+  }
   /**
    * Load a playlist
    * @param {Array} tracks - Array of track objects
@@ -5057,8 +5173,9 @@ var PlaylistManager = class {
   /**
    * Play a specific track
    * @param {number} index - Track index
+   * @param {boolean} userInitiated - Whether this was triggered by user action (default: false)
    */
-  play(index) {
+  play(index, userInitiated = false) {
     if (index < 0 || index >= this.tracks.length) {
       console.warn("VidPly Playlist: Invalid track index", index);
       return;
@@ -5078,6 +5195,9 @@ var PlaylistManager = class {
       item: track,
       total: this.tracks.length
     });
+    if (userInitiated && this.player.container) {
+      this.player.container.focus();
+    }
     setTimeout(() => {
       this.player.play();
     }, 100);
@@ -5139,12 +5259,17 @@ var PlaylistManager = class {
       return;
     }
     this.trackInfoElement = DOMUtils.createElement("div", {
-      className: "vidply-track-info"
+      className: "vidply-track-info",
+      role: "status",
+      "aria-live": "polite",
+      "aria-atomic": "true"
     });
     this.trackInfoElement.style.display = "none";
     this.container.appendChild(this.trackInfoElement);
     this.playlistPanel = DOMUtils.createElement("div", {
-      className: "vidply-playlist-panel"
+      className: "vidply-playlist-panel",
+      role: "region",
+      "aria-label": "Media playlist"
     });
     this.playlistPanel.style.display = "none";
     this.container.appendChild(this.playlistPanel);
@@ -5156,10 +5281,14 @@ var PlaylistManager = class {
     if (!this.trackInfoElement) return;
     const trackNumber = this.currentIndex + 1;
     const totalTracks = this.tracks.length;
+    const trackTitle = track.title || "Untitled";
+    const trackArtist = track.artist || "";
+    const announcement = `Now playing: Track ${trackNumber} of ${totalTracks}. ${trackTitle}${trackArtist ? " by " + trackArtist : ""}`;
     this.trackInfoElement.innerHTML = `
-      <div class="vidply-track-number">Track ${trackNumber} of ${totalTracks}</div>
-      <div class="vidply-track-title">${DOMUtils.escapeHTML(track.title || "Untitled")}</div>
-      ${track.artist ? `<div class="vidply-track-artist">${DOMUtils.escapeHTML(track.artist)}</div>` : ""}
+      <span class="vidply-sr-only">${DOMUtils.escapeHTML(announcement)}</span>
+      <div class="vidply-track-number" aria-hidden="true">Track ${trackNumber} of ${totalTracks}</div>
+      <div class="vidply-track-title" aria-hidden="true">${DOMUtils.escapeHTML(trackTitle)}</div>
+      ${trackArtist ? `<div class="vidply-track-artist" aria-hidden="true">${DOMUtils.escapeHTML(trackArtist)}</div>` : ""}
     `;
     this.trackInfoElement.style.display = "block";
   }
@@ -5169,14 +5298,29 @@ var PlaylistManager = class {
   renderPlaylist() {
     if (!this.playlistPanel) return;
     this.playlistPanel.innerHTML = "";
-    const header = DOMUtils.createElement("div", {
-      className: "vidply-playlist-header"
+    const header = DOMUtils.createElement("h2", {
+      className: "vidply-playlist-header",
+      id: "vidply-playlist-heading"
     });
     header.textContent = `Playlist (${this.tracks.length})`;
     this.playlistPanel.appendChild(header);
-    const list = DOMUtils.createElement("div", {
-      className: "vidply-playlist-list"
-    });
+    const instructions = DOMUtils.createElement("div", {
+      className: "vidply-sr-only",
+      "aria-hidden": "false"
+    });
+    instructions.textContent = "Use arrow keys to navigate between tracks. Press Enter or Space to play a track. Press Home or End to jump to first or last track.";
+    this.playlistPanel.appendChild(instructions);
+    const list = DOMUtils.createElement("ul", {
+      className: "vidply-playlist-list",
+      "aria-labelledby": "vidply-playlist-heading",
+      "aria-describedby": "vidply-playlist-instructions"
+    });
+    const listDescription = DOMUtils.createElement("div", {
+      className: "vidply-sr-only",
+      id: "vidply-playlist-instructions"
+    });
+    listDescription.textContent = `Playlist with ${this.tracks.length} ${this.tracks.length === 1 ? "track" : "tracks"}`;
+    this.playlistPanel.appendChild(listDescription);
     this.tracks.forEach((track, index) => {
       const item = this.createPlaylistItem(track, index);
       list.appendChild(item);
@@ -5188,20 +5332,39 @@ var PlaylistManager = class {
    * Create playlist item element
    */
   createPlaylistItem(track, index) {
-    const item = DOMUtils.createElement("div", {
+    const trackPosition = `Track ${index + 1} of ${this.tracks.length}`;
+    const trackTitle = track.title || `Track ${index + 1}`;
+    const trackArtist = track.artist ? ` by ${track.artist}` : "";
+    const isActive = index === this.currentIndex;
+    const statusText = isActive ? "Currently playing" : "Not playing";
+    const actionText = isActive ? "Press Enter to restart" : "Press Enter to play";
+    const item = DOMUtils.createElement("li", {
       className: "vidply-playlist-item",
-      role: "button",
-      tabIndex: 0,
-      "aria-label": `Play ${track.title || "Track " + (index + 1)}`
-    });
-    if (index === this.currentIndex) {
+      tabIndex: index === 0 ? 0 : -1,
+      // Only first item is in tab order initially
+      "aria-label": `${trackPosition}. ${trackTitle}${trackArtist}. ${statusText}. ${actionText}.`,
+      "aria-posinset": index + 1,
+      "aria-setsize": this.tracks.length,
+      "data-playlist-index": index
+    });
+    if (isActive) {
       item.classList.add("vidply-playlist-item-active");
+      item.setAttribute("aria-current", "true");
+      item.setAttribute("tabIndex", "0");
     }
+    const positionInfo = DOMUtils.createElement("span", {
+      className: "vidply-sr-only"
+    });
+    positionInfo.textContent = `${trackPosition}: `;
+    item.appendChild(positionInfo);
     const thumbnail = DOMUtils.createElement("div", {
-      className: "vidply-playlist-thumbnail"
+      className: "vidply-playlist-thumbnail",
+      "aria-hidden": "true"
     });
     if (track.poster) {
       thumbnail.style.backgroundImage = `url(${track.poster})`;
+      thumbnail.setAttribute("role", "img");
+      thumbnail.setAttribute("aria-label", `${trackTitle} thumbnail`);
     } else {
       const icon = createIconElement("music");
       icon.classList.add("vidply-playlist-thumbnail-icon");
@@ -5209,12 +5372,13 @@ var PlaylistManager = class {
     }
     item.appendChild(thumbnail);
     const info = DOMUtils.createElement("div", {
-      className: "vidply-playlist-item-info"
+      className: "vidply-playlist-item-info",
+      "aria-hidden": "true"
     });
     const title = DOMUtils.createElement("div", {
       className: "vidply-playlist-item-title"
     });
-    title.textContent = track.title || `Track ${index + 1}`;
+    title.textContent = trackTitle;
     info.appendChild(title);
     if (track.artist) {
       const artist = DOMUtils.createElement("div", {
@@ -5224,20 +5388,64 @@ var PlaylistManager = class {
       info.appendChild(artist);
     }
     item.appendChild(info);
+    if (isActive) {
+      const statusIndicator = DOMUtils.createElement("span", {
+        className: "vidply-sr-only"
+      });
+      statusIndicator.textContent = " (Currently playing)";
+      item.appendChild(statusIndicator);
+    }
     const playIcon = createIconElement("play");
     playIcon.classList.add("vidply-playlist-item-icon");
+    playIcon.setAttribute("aria-hidden", "true");
     item.appendChild(playIcon);
     item.addEventListener("click", () => {
-      this.play(index);
+      this.play(index, true);
     });
     item.addEventListener("keydown", (e) => {
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        this.play(index);
-      }
+      this.handlePlaylistItemKeydown(e, index);
     });
     return item;
   }
+  /**
+   * Handle keyboard navigation in playlist items
+   */
+  handlePlaylistItemKeydown(e, index) {
+    const items = Array.from(this.playlistPanel.querySelectorAll(".vidply-playlist-item"));
+    let newIndex = -1;
+    switch (e.key) {
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        this.play(index, true);
+        break;
+      case "ArrowDown":
+        e.preventDefault();
+        if (index < items.length - 1) {
+          newIndex = index + 1;
+        }
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        if (index > 0) {
+          newIndex = index - 1;
+        }
+        break;
+      case "Home":
+        e.preventDefault();
+        newIndex = 0;
+        break;
+      case "End":
+        e.preventDefault();
+        newIndex = items.length - 1;
+        break;
+    }
+    if (newIndex !== -1 && newIndex !== index) {
+      items[index].setAttribute("tabIndex", "-1");
+      items[newIndex].setAttribute("tabIndex", "0");
+      items[newIndex].focus();
+    }
+  }
   /**
    * Update playlist UI (highlight current track)
    */
@@ -5245,11 +5453,25 @@ var PlaylistManager = class {
     if (!this.playlistPanel) return;
     const items = this.playlistPanel.querySelectorAll(".vidply-playlist-item");
     items.forEach((item, index) => {
+      const track = this.tracks[index];
+      const trackPosition = `Track ${index + 1} of ${this.tracks.length}`;
+      const trackTitle = track.title || `Track ${index + 1}`;
+      const trackArtist = track.artist ? ` by ${track.artist}` : "";
       if (index === this.currentIndex) {
         item.classList.add("vidply-playlist-item-active");
+        item.setAttribute("aria-current", "true");
+        item.setAttribute("tabIndex", "0");
+        const statusText = "Currently playing";
+        const actionText = "Press Enter to restart";
+        item.setAttribute("aria-label", `${trackPosition}. ${trackTitle}${trackArtist}. ${statusText}. ${actionText}.`);
         item.scrollIntoView({ behavior: "smooth", block: "nearest" });
       } else {
         item.classList.remove("vidply-playlist-item-active");
+        item.removeAttribute("aria-current");
+        item.setAttribute("tabIndex", "-1");
+        const statusText = "Not playing";
+        const actionText = "Press Enter to play";
+        item.setAttribute("aria-label", `${trackPosition}. ${trackTitle}${trackArtist}. ${statusText}. ${actionText}.`);
       }
     });
   }
@@ -5267,10 +5489,24 @@ var PlaylistManager = class {
       currentIndex: this.currentIndex,
       totalTracks: this.tracks.length,
       currentTrack: this.getCurrentTrack(),
-      hasNext: this.currentIndex < this.tracks.length - 1,
-      hasPrevious: this.currentIndex > 0
+      hasNext: this.hasNext(),
+      hasPrevious: this.hasPrevious()
     };
   }
+  /**
+   * Check if there is a next track
+   */
+  hasNext() {
+    if (this.options.loop) return true;
+    return this.currentIndex < this.tracks.length - 1;
+  }
+  /**
+   * Check if there is a previous track
+   */
+  hasPrevious() {
+    if (this.options.loop) return true;
+    return this.currentIndex > 0;
+  }
   /**
    * Add track to playlist
    */