vidply 1.0.2 → 1.0.4

package/dist/vidply.esm.js

@@ -1212,6 +1212,42 @@ var ControlBar = class {
       document.addEventListener("keydown", handleEscape);
     }, 100);
   }
+  // Helper method to add keyboard navigation to menus (arrow keys)
+  attachMenuKeyboardNavigation(menu) {
+    const menuItems = Array.from(menu.querySelectorAll(`.${this.player.options.classPrefix}-menu-item`));
+    if (menuItems.length === 0) return;
+    const handleKeyDown = (e) => {
+      const currentIndex = menuItems.indexOf(document.activeElement);
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          const nextIndex = (currentIndex + 1) % menuItems.length;
+          menuItems[nextIndex].focus();
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          const prevIndex = (currentIndex - 1 + menuItems.length) % menuItems.length;
+          menuItems[prevIndex].focus();
+          break;
+        case "Home":
+          e.preventDefault();
+          menuItems[0].focus();
+          break;
+        case "End":
+          e.preventDefault();
+          menuItems[menuItems.length - 1].focus();
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault();
+          if (document.activeElement && menuItems.includes(document.activeElement)) {
+            document.activeElement.click();
+          }
+          break;
+      }
+    };
+    menu.addEventListener("keydown", handleKeyDown);
+  }
   createElement() {
     this.element = DOMUtils.createElement("div", {
       className: `${this.player.options.classPrefix}-controls`,
@@ -1615,12 +1651,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": "Time display"
+      }
     });
     this.controls.currentTimeDisplay = DOMUtils.createElement("span", {
       className: `${this.player.options.classPrefix}-current-time`,
-      textContent: "00:00"
+      attributes: {
+        "aria-label": "0 seconds"
+      }
+    });
+    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: {
@@ -1629,8 +1679,18 @@ var ControlBar = class {
     });
     this.controls.durationDisplay = DOMUtils.createElement("span", {
       className: `${this.player.options.classPrefix}-duration`,
-      textContent: "00:00"
+      attributes: {
+        "aria-label": "Duration: 0 seconds"
+      }
+    });
+    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);
@@ -1706,7 +1766,8 @@ var ControlBar = class {
             className: `${this.player.options.classPrefix}-menu-item`,
             attributes: {
               "type": "button",
-              "role": "menuitem"
+              "role": "menuitem",
+              "tabindex": "-1"
             }
           });
           const timeLabel = DOMUtils.createElement("span", {
@@ -1726,6 +1787,13 @@ var ControlBar = class {
           });
           menu.appendChild(item);
         }
+        this.attachMenuKeyboardNavigation(menu);
+        setTimeout(() => {
+          const firstItem = menu.querySelector(`.${this.player.options.classPrefix}-menu-item`);
+          if (firstItem) {
+            firstItem.focus();
+          }
+        }, 0);
       }
     }
     button.appendChild(menu);
@@ -1779,19 +1847,22 @@ var ControlBar = class {
         });
         menu.appendChild(noQualityItem);
       } else {
+        let activeItem = null;
         if (isHLS) {
           const autoItem = DOMUtils.createElement("button", {
             className: `${this.player.options.classPrefix}-menu-item`,
             textContent: i18n.t("player.auto"),
             attributes: {
               "type": "button",
-              "role": "menuitem"
+              "role": "menuitem",
+              "tabindex": "-1"
             }
           });
           const isAuto = this.player.renderer.hls && this.player.renderer.hls.currentLevel === -1;
           if (isAuto) {
             autoItem.classList.add(`${this.player.options.classPrefix}-menu-item-active`);
             autoItem.appendChild(createIconElement("check"));
+            activeItem = autoItem;
           }
           autoItem.addEventListener("click", () => {
             if (this.player.renderer.switchQuality) {
@@ -1807,12 +1878,14 @@ var ControlBar = class {
             textContent: quality.name || `${quality.height}p`,
             attributes: {
               "type": "button",
-              "role": "menuitem"
+              "role": "menuitem",
+              "tabindex": "-1"
             }
           });
           if (quality.index === currentQuality) {
             item.classList.add(`${this.player.options.classPrefix}-menu-item-active`);
             item.appendChild(createIconElement("check"));
+            activeItem = item;
           }
           item.addEventListener("click", () => {
             if (this.player.renderer.switchQuality) {
@@ -1822,6 +1895,13 @@ var ControlBar = class {
           });
           menu.appendChild(item);
         });
+        this.attachMenuKeyboardNavigation(menu);
+        setTimeout(() => {
+          const focusTarget = activeItem || menu.querySelector(`.${this.player.options.classPrefix}-menu-item`);
+          if (focusTarget) {
+            focusTarget.focus();
+          }
+        }, 0);
       }
     } else {
       const noSupportItem = DOMUtils.createElement("div", {
@@ -1915,6 +1995,12 @@ var ControlBar = class {
     menu.style.minWidth = "220px";
     button.appendChild(menu);
     this.attachMenuCloseHandler(menu, button, true);
+    setTimeout(() => {
+      const firstSelect = menu.querySelector("select");
+      if (firstSelect) {
+        firstSelect.focus();
+      }
+    }, 0);
   }
   createStyleControl(label, property, options) {
     const group = DOMUtils.createElement("div", {
@@ -2127,18 +2213,21 @@ var ControlBar = class {
       }
     });
     const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
+    let activeItem = null;
     speeds.forEach((speed) => {
       const item = DOMUtils.createElement("button", {
         className: `${this.player.options.classPrefix}-menu-item`,
         textContent: this.formatSpeedLabel(speed),
         attributes: {
           "type": "button",
-          "role": "menuitem"
+          "role": "menuitem",
+          "tabindex": "-1"
         }
       });
       if (speed === this.player.state.playbackSpeed) {
         item.classList.add(`${this.player.options.classPrefix}-menu-item-active`);
         item.appendChild(createIconElement("check"));
+        activeItem = item;
       }
       item.addEventListener("click", () => {
         this.player.setPlaybackSpeed(speed);
@@ -2147,7 +2236,14 @@ var ControlBar = class {
       menu.appendChild(item);
     });
     button.appendChild(menu);
+    this.attachMenuKeyboardNavigation(menu);
     this.attachMenuCloseHandler(menu, button);
+    setTimeout(() => {
+      const focusTarget = activeItem || menu.querySelector(`.${this.player.options.classPrefix}-menu-item`);
+      if (focusTarget) {
+        focusTarget.focus();
+      }
+    }, 0);
   }
   createCaptionsButton() {
     const button = DOMUtils.createElement("button", {
@@ -2190,17 +2286,20 @@ var ControlBar = class {
       this.attachMenuCloseHandler(menu, button);
       return;
     }
+    let activeItem = null;
     const offItem = DOMUtils.createElement("button", {
       className: `${this.player.options.classPrefix}-menu-item`,
       textContent: i18n.t("captions.off"),
       attributes: {
         "type": "button",
-        "role": "menuitem"
+        "role": "menuitem",
+        "tabindex": "-1"
       }
     });
     if (!this.player.state.captionsEnabled) {
       offItem.classList.add(`${this.player.options.classPrefix}-menu-item-active`);
       offItem.appendChild(createIconElement("check"));
+      activeItem = offItem;
     }
     offItem.addEventListener("click", () => {
       this.player.disableCaptions();
@@ -2216,12 +2315,14 @@ var ControlBar = class {
         attributes: {
           "type": "button",
           "role": "menuitem",
-          "lang": track.language
+          "lang": track.language,
+          "tabindex": "-1"
         }
       });
       if (this.player.state.captionsEnabled && this.player.captionManager.currentTrack === this.player.captionManager.tracks[track.index]) {
         item.classList.add(`${this.player.options.classPrefix}-menu-item-active`);
         item.appendChild(createIconElement("check"));
+        activeItem = item;
       }
       item.addEventListener("click", () => {
         this.player.captionManager.switchTrack(track.index);
@@ -2231,7 +2332,14 @@ var ControlBar = class {
       menu.appendChild(item);
     });
     button.appendChild(menu);
+    this.attachMenuKeyboardNavigation(menu);
     this.attachMenuCloseHandler(menu, button);
+    setTimeout(() => {
+      const focusTarget = activeItem || menu.querySelector(`.${this.player.options.classPrefix}-menu-item`);
+      if (focusTarget) {
+        focusTarget.focus();
+      }
+    }, 0);
   }
   updateCaptionsButton() {
     if (!this.controls.captions) return;
@@ -2406,36 +2514,43 @@ 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", "Duration: " + TimeUtils.formatDuration(duration));
     }
   }
   updateVolumeDisplay() {
-    if (!this.controls.volumeFill) return;
     const percent = this.player.state.volume * 100;
-    this.controls.volumeFill.style.height = `${percent}%`;
+    if (this.controls.volumeFill) {
+      this.controls.volumeFill.style.height = `${percent}%`;
+    }
     if (this.controls.mute) {
       const icon = this.controls.mute.querySelector(".vidply-icon");
-      let iconName;
-      if (this.player.state.muted || this.player.state.volume === 0) {
-        iconName = "volumeMuted";
-      } else if (this.player.state.volume < 0.3) {
-        iconName = "volumeLow";
-      } else if (this.player.state.volume < 0.7) {
-        iconName = "volumeMedium";
-      } else {
-        iconName = "volumeHigh";
+      if (icon) {
+        let iconName;
+        if (this.player.state.muted || this.player.state.volume === 0) {
+          iconName = "volumeMuted";
+        } else if (this.player.state.volume < 0.3) {
+          iconName = "volumeLow";
+        } else if (this.player.state.volume < 0.7) {
+          iconName = "volumeMedium";
+        } else {
+          iconName = "volumeHigh";
+        }
+        icon.innerHTML = createIconElement(iconName).innerHTML;
+        this.controls.mute.setAttribute(
+          "aria-label",
+          this.player.state.muted ? i18n.t("player.unmute") : i18n.t("player.mute")
+        );
       }
-      icon.innerHTML = createIconElement(iconName).innerHTML;
-      this.controls.mute.setAttribute(
-        "aria-label",
-        this.player.state.muted ? i18n.t("player.unmute") : i18n.t("player.mute")
-      );
     }
     if (this.controls.volumeSlider) {
       this.controls.volumeSlider.setAttribute("aria-valuenow", String(Math.round(percent)));
@@ -2620,7 +2735,6 @@ var CaptionManager = class {
         this.updateCaptions();
       };
       selectedTrack.track.addEventListener("cuechange", this.cueChangeHandler);
-      this.element.style.display = "block";
       this.player.emit("captionsenabled", selectedTrack);
     }
   }
@@ -2763,6 +2877,9 @@ var KeyboardManager = class {
         }
       }
     }
+    if (!handled && this.player.options.debug) {
+      console.log("[VidPly] Unhandled key:", e.key, "code:", e.code, "shiftKey:", e.shiftKey);
+    }
   }
   executeAction(action, event) {
     switch (action) {
@@ -2781,12 +2898,6 @@ var KeyboardManager = class {
       case "seek-backward":
         this.player.seekBackward();
         return true;
-      case "seek-forward-large":
-        this.player.seekForward(this.player.options.seekIntervalLarge);
-        return true;
-      case "seek-backward-large":
-        this.player.seekBackward(this.player.options.seekIntervalLarge);
-        return true;
       case "mute":
         this.player.toggleMute();
         return true;
@@ -2795,14 +2906,22 @@ var KeyboardManager = class {
         return true;
       case "captions":
         if (this.player.captionManager && this.player.captionManager.tracks.length > 1) {
-          const captionsButton = document.querySelector(".vidply-captions");
-          if (captionsButton && this.player.controlBar) {
+          const captionsButton = this.player.controlBar && this.player.controlBar.controls.captions;
+          if (captionsButton) {
             this.player.controlBar.showCaptionsMenu(captionsButton);
+          } else {
+            this.player.toggleCaptions();
           }
         } else {
           this.player.toggleCaptions();
         }
         return true;
+      case "caption-style-menu":
+        if (this.player.controlBar && this.player.controlBar.controls.captionStyle) {
+          this.player.controlBar.showCaptionStyleMenu(this.player.controlBar.controls.captionStyle);
+          return true;
+        }
+        return false;
       case "speed-up":
         this.player.setPlaybackSpeed(
           Math.min(2, this.player.state.playbackSpeed + 0.25)
@@ -2813,9 +2932,30 @@ var KeyboardManager = class {
           Math.max(0.25, this.player.state.playbackSpeed - 0.25)
         );
         return true;
-      case "settings":
-        this.player.showSettings();
-        return true;
+      case "speed-menu":
+        if (this.player.controlBar && this.player.controlBar.controls.speed) {
+          this.player.controlBar.showSpeedMenu(this.player.controlBar.controls.speed);
+          return true;
+        }
+        return false;
+      case "quality-menu":
+        if (this.player.controlBar && this.player.controlBar.controls.quality) {
+          this.player.controlBar.showQualityMenu(this.player.controlBar.controls.quality);
+          return true;
+        }
+        return false;
+      case "chapters-menu":
+        if (this.player.controlBar && this.player.controlBar.controls.chapters) {
+          this.player.controlBar.showChaptersMenu(this.player.controlBar.controls.chapters);
+          return true;
+        }
+        return false;
+      case "transcript-toggle":
+        if (this.player.transcriptManager) {
+          this.player.transcriptManager.toggleTranscript();
+          return true;
+        }
+        return false;
       default:
         return false;
     }
@@ -2882,317 +3022,6 @@ var KeyboardManager = class {
   }
 };
 
-// src/controls/SettingsDialog.js
-var SettingsDialog = class {
-  constructor(player) {
-    this.player = player;
-    this.element = null;
-    this.isOpen = false;
-    this.init();
-  }
-  init() {
-    this.createElement();
-  }
-  createElement() {
-    this.overlay = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-settings-overlay`,
-      attributes: {
-        "role": "dialog",
-        "aria-modal": "true",
-        "aria-label": i18n.t("settings.title")
-      }
-    });
-    this.overlay.style.display = "none";
-    this.element = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-settings-dialog`
-    });
-    const header = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-settings-header`
-    });
-    const title = DOMUtils.createElement("h2", {
-      textContent: i18n.t("settings.title"),
-      attributes: {
-        "id": `${this.player.options.classPrefix}-settings-title`
-      }
-    });
-    const closeButton = DOMUtils.createElement("button", {
-      className: `${this.player.options.classPrefix}-button ${this.player.options.classPrefix}-settings-close`,
-      attributes: {
-        "type": "button",
-        "aria-label": i18n.t("settings.close")
-      }
-    });
-    closeButton.appendChild(createIconElement("close"));
-    closeButton.addEventListener("click", () => this.hide());
-    header.appendChild(title);
-    header.appendChild(closeButton);
-    const content = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-settings-content`
-    });
-    content.appendChild(this.createSpeedSettings());
-    if (this.player.captionManager && this.player.captionManager.tracks.length > 0) {
-      content.appendChild(this.createCaptionSettings());
-    }
-    const footer = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-settings-footer`
-    });
-    const resetButton = DOMUtils.createElement("button", {
-      className: `${this.player.options.classPrefix}-button`,
-      textContent: i18n.t("settings.reset"),
-      attributes: {
-        "type": "button"
-      }
-    });
-    resetButton.addEventListener("click", () => this.resetSettings());
-    footer.appendChild(resetButton);
-    this.element.appendChild(header);
-    this.element.appendChild(content);
-    this.element.appendChild(footer);
-    this.overlay.appendChild(this.element);
-    this.player.container.appendChild(this.overlay);
-    this.overlay.addEventListener("click", (e) => {
-      if (e.target === this.overlay) {
-        this.hide();
-      }
-    });
-    document.addEventListener("keydown", (e) => {
-      if (e.key === "Escape" && this.isOpen) {
-        this.hide();
-      }
-    });
-  }
-  formatSpeedLabel(speed) {
-    if (speed === 1) {
-      return i18n.t("speeds.normal");
-    }
-    const speedStr = speed.toLocaleString(i18n.getLanguage(), {
-      minimumFractionDigits: 0,
-      maximumFractionDigits: 2
-    });
-    return `${speedStr}\xD7`;
-  }
-  createSpeedSettings() {
-    const section = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-settings-section`
-    });
-    const label = DOMUtils.createElement("label", {
-      textContent: i18n.t("settings.speed"),
-      attributes: {
-        "for": `${this.player.options.classPrefix}-speed-select`
-      }
-    });
-    const select = DOMUtils.createElement("select", {
-      className: `${this.player.options.classPrefix}-settings-select`,
-      attributes: {
-        "id": `${this.player.options.classPrefix}-speed-select`
-      }
-    });
-    const speeds = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
-    speeds.forEach((speed) => {
-      const option = DOMUtils.createElement("option", {
-        textContent: this.formatSpeedLabel(speed),
-        attributes: {
-          "value": String(speed)
-        }
-      });
-      if (speed === this.player.state.playbackSpeed) {
-        option.selected = true;
-      }
-      select.appendChild(option);
-    });
-    select.addEventListener("change", (e) => {
-      this.player.setPlaybackSpeed(parseFloat(e.target.value));
-    });
-    section.appendChild(label);
-    section.appendChild(select);
-    return section;
-  }
-  createCaptionSettings() {
-    const section = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-settings-section`
-    });
-    const heading = DOMUtils.createElement("h3", {
-      textContent: i18n.t("settings.captions")
-    });
-    section.appendChild(heading);
-    const trackLabel = DOMUtils.createElement("label", {
-      textContent: i18n.t("captions.select"),
-      attributes: {
-        "for": `${this.player.options.classPrefix}-caption-track-select`
-      }
-    });
-    const trackSelect = DOMUtils.createElement("select", {
-      className: `${this.player.options.classPrefix}-settings-select`,
-      attributes: {
-        "id": `${this.player.options.classPrefix}-caption-track-select`
-      }
-    });
-    const offOption = DOMUtils.createElement("option", {
-      textContent: i18n.t("captions.off"),
-      attributes: { "value": "-1" }
-    });
-    trackSelect.appendChild(offOption);
-    const tracks = this.player.captionManager.getAvailableTracks();
-    tracks.forEach((track) => {
-      const option = DOMUtils.createElement("option", {
-        textContent: track.label,
-        attributes: { "value": String(track.index) }
-      });
-      trackSelect.appendChild(option);
-    });
-    trackSelect.addEventListener("change", (e) => {
-      const index = parseInt(e.target.value);
-      if (index === -1) {
-        this.player.disableCaptions();
-      } else {
-        this.player.captionManager.switchTrack(index);
-      }
-    });
-    section.appendChild(trackLabel);
-    section.appendChild(trackSelect);
-    section.appendChild(this.createCaptionStyleControl("fontSize", i18n.t("captions.fontSize"), [
-      { label: i18n.t("fontSizes.small"), value: "80%" },
-      { label: i18n.t("fontSizes.medium"), value: "100%" },
-      { label: i18n.t("fontSizes.large"), value: "120%" },
-      { label: i18n.t("fontSizes.xlarge"), value: "150%" }
-    ]));
-    section.appendChild(this.createCaptionStyleControl("fontFamily", i18n.t("captions.fontFamily"), [
-      { label: i18n.t("fontFamilies.sansSerif"), value: "sans-serif" },
-      { label: i18n.t("fontFamilies.serif"), value: "serif" },
-      { label: i18n.t("fontFamilies.monospace"), value: "monospace" }
-    ]));
-    section.appendChild(this.createColorControl("color", i18n.t("captions.color")));
-    section.appendChild(this.createColorControl("backgroundColor", i18n.t("captions.backgroundColor")));
-    section.appendChild(this.createRangeControl("opacity", i18n.t("captions.opacity"), 0, 1, 0.1));
-    return section;
-  }
-  createCaptionStyleControl(property, label, options) {
-    const wrapper = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-settings-control`
-    });
-    const labelEl = DOMUtils.createElement("label", {
-      textContent: label,
-      attributes: {
-        "for": `${this.player.options.classPrefix}-caption-${property}`
-      }
-    });
-    const select = DOMUtils.createElement("select", {
-      className: `${this.player.options.classPrefix}-settings-select`,
-      attributes: {
-        "id": `${this.player.options.classPrefix}-caption-${property}`
-      }
-    });
-    options.forEach((opt) => {
-      const option = DOMUtils.createElement("option", {
-        textContent: opt.label,
-        attributes: { "value": opt.value }
-      });
-      if (opt.value === this.player.options[`captions${property.charAt(0).toUpperCase() + property.slice(1)}`]) {
-        option.selected = true;
-      }
-      select.appendChild(option);
-    });
-    select.addEventListener("change", (e) => {
-      this.player.captionManager.setCaptionStyle(property, e.target.value);
-    });
-    wrapper.appendChild(labelEl);
-    wrapper.appendChild(select);
-    return wrapper;
-  }
-  createColorControl(property, label) {
-    const wrapper = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-settings-control`
-    });
-    const labelEl = DOMUtils.createElement("label", {
-      textContent: label,
-      attributes: {
-        "for": `${this.player.options.classPrefix}-caption-${property}`
-      }
-    });
-    const input = DOMUtils.createElement("input", {
-      className: `${this.player.options.classPrefix}-settings-color`,
-      attributes: {
-        "type": "color",
-        "id": `${this.player.options.classPrefix}-caption-${property}`,
-        "value": this.player.options[`captions${property.charAt(0).toUpperCase() + property.slice(1)}`]
-      }
-    });
-    input.addEventListener("change", (e) => {
-      this.player.captionManager.setCaptionStyle(property, e.target.value);
-    });
-    wrapper.appendChild(labelEl);
-    wrapper.appendChild(input);
-    return wrapper;
-  }
-  createRangeControl(property, label, min, max, step) {
-    const wrapper = DOMUtils.createElement("div", {
-      className: `${this.player.options.classPrefix}-settings-control`
-    });
-    const labelEl = DOMUtils.createElement("label", {
-      textContent: label,
-      attributes: {
-        "for": `${this.player.options.classPrefix}-caption-${property}`
-      }
-    });
-    const input = DOMUtils.createElement("input", {
-      className: `${this.player.options.classPrefix}-settings-range`,
-      attributes: {
-        "type": "range",
-        "id": `${this.player.options.classPrefix}-caption-${property}`,
-        "min": String(min),
-        "max": String(max),
-        "step": String(step),
-        "value": String(this.player.options[`captions${property.charAt(0).toUpperCase() + property.slice(1)}`])
-      }
-    });
-    const valueDisplay = DOMUtils.createElement("span", {
-      className: `${this.player.options.classPrefix}-settings-value`,
-      textContent: String(this.player.options[`captions${property.charAt(0).toUpperCase() + property.slice(1)}`])
-    });
-    input.addEventListener("input", (e) => {
-      const value = parseFloat(e.target.value);
-      valueDisplay.textContent = value.toFixed(1);
-      this.player.captionManager.setCaptionStyle(property, value);
-    });
-    wrapper.appendChild(labelEl);
-    wrapper.appendChild(input);
-    wrapper.appendChild(valueDisplay);
-    return wrapper;
-  }
-  resetSettings() {
-    this.player.setPlaybackSpeed(1);
-    if (this.player.captionManager) {
-      this.player.captionManager.setCaptionStyle("fontSize", "100%");
-      this.player.captionManager.setCaptionStyle("fontFamily", "sans-serif");
-      this.player.captionManager.setCaptionStyle("color", "#FFFFFF");
-      this.player.captionManager.setCaptionStyle("backgroundColor", "#000000");
-      this.player.captionManager.setCaptionStyle("opacity", 0.8);
-    }
-    this.hide();
-    setTimeout(() => this.show(), 100);
-  }
-  show() {
-    this.overlay.style.display = "flex";
-    this.isOpen = true;
-    const closeButton = this.element.querySelector(`.${this.player.options.classPrefix}-settings-close`);
-    if (closeButton) {
-      closeButton.focus();
-    }
-    this.player.emit("settingsopen");
-  }
-  hide() {
-    this.overlay.style.display = "none";
-    this.isOpen = false;
-    this.player.container.focus();
-    this.player.emit("settingsclose");
-  }
-  destroy() {
-    if (this.overlay && this.overlay.parentNode) {
-      this.overlay.parentNode.removeChild(this.overlay);
-    }
-  }
-};
-
 // src/controls/TranscriptManager.js
 var TranscriptManager = class {
   constructor(player) {
@@ -4480,16 +4309,18 @@ var Player = class extends EventEmitter {
         "play-pause": [" ", "p", "k"],
         "volume-up": ["ArrowUp"],
         "volume-down": ["ArrowDown"],
-        "seek-forward": ["ArrowRight", "f"],
-        "seek-backward": ["ArrowLeft", "r"],
-        "seek-forward-large": ["l"],
-        "seek-backward-large": ["j"],
+        "seek-forward": ["ArrowRight"],
+        "seek-backward": ["ArrowLeft"],
         "mute": ["m"],
         "fullscreen": ["f"],
         "captions": ["c"],
+        "caption-style-menu": ["a"],
         "speed-up": [">"],
         "speed-down": ["<"],
-        "settings": ["s"]
+        "speed-menu": ["s"],
+        "quality-menu": ["q"],
+        "chapters-menu": ["j"],
+        "transcript-toggle": ["t"]
       },
       // Accessibility
       ariaLabels: {},
@@ -4578,9 +4409,6 @@ var Player = class extends EventEmitter {
       if (this.options.keyboard) {
         this.keyboardManager = new KeyboardManager(this);
       }
-      if (this.options.settingsButton) {
-        this.settingsDialog = new SettingsDialog(this);
-      }
       this.setupResponsiveHandlers();
       if (this.options.startTime > 0) {
         this.seek(this.options.startTime);
@@ -4758,6 +4586,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) {
@@ -4769,6 +4608,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");
@@ -4833,12 +4683,14 @@ var Player = class extends EventEmitter {
       this.renderer.setMuted(true);
     }
     this.state.muted = true;
+    this.emit("volumechange");
   }
   unmute() {
     if (this.renderer) {
       this.renderer.setMuted(false);
     }
     this.state.muted = false;
+    this.emit("volumechange");
   }
   toggleMute() {
     if (this.state.muted) {
@@ -5072,15 +4924,11 @@ var Player = class extends EventEmitter {
     }
   }
   // Settings
+  // Settings dialog removed - using individual control buttons instead
   showSettings() {
-    if (this.settingsDialog) {
-      this.settingsDialog.show();
-    }
+    console.warn("[VidPly] Settings dialog has been removed. Use individual control buttons (speed, captions, etc.)");
   }
   hideSettings() {
-    if (this.settingsDialog) {
-      this.settingsDialog.hide();
-    }
   }
   // Utility methods
   getCurrentTime() {
@@ -5177,9 +5025,6 @@ var Player = class extends EventEmitter {
     if (this.keyboardManager) {
       this.keyboardManager.destroy();
     }
-    if (this.settingsDialog) {
-      this.settingsDialog.destroy();
-    }
     if (this.transcriptManager) {
       this.transcriptManager.destroy();
     }
@@ -5233,7 +5078,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);
@@ -5242,6 +5089,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
@@ -5262,8 +5120,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;
@@ -5283,6 +5142,9 @@ var PlaylistManager = class {
       item: track,
       total: this.tracks.length
     });
+    if (userInitiated && this.player.container) {
+      this.player.container.focus();
+    }
     setTimeout(() => {
       this.player.play();
     }, 100);
@@ -5344,12 +5206,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);
@@ -5361,10 +5228,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";
   }
@@ -5374,14 +5245,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);
@@ -5393,20 +5279,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");
@@ -5414,12 +5319,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", {
@@ -5429,20 +5335,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)
    */
@@ -5450,11 +5400,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}.`);
       }
     });
   }
@@ -5472,10 +5436,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
    */