vidply 1.0.1 → 1.0.3

package/dist/vidply.js

@@ -523,7 +523,7 @@ var VidPly = (() => {
     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><circle cx="19" cy="19" r="3" fill="#3b82f6"/><path d="M17.5 19l1 1 2-2" stroke="white" stroke-width="1.5" fill="none" stroke-linecap="round" stroke-linejoin="round"/>`,
+    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"/>`,
@@ -1232,6 +1232,42 @@ var VidPly = (() => {
         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`,
@@ -1726,7 +1762,8 @@ var VidPly = (() => {
               className: `${this.player.options.classPrefix}-menu-item`,
               attributes: {
                 "type": "button",
-                "role": "menuitem"
+                "role": "menuitem",
+                "tabindex": "-1"
               }
             });
             const timeLabel = DOMUtils.createElement("span", {
@@ -1746,6 +1783,13 @@ var VidPly = (() => {
             });
             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);
@@ -1799,19 +1843,22 @@ var VidPly = (() => {
           });
           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) {
@@ -1827,12 +1874,14 @@ var VidPly = (() => {
               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) {
@@ -1842,6 +1891,13 @@ var VidPly = (() => {
             });
             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", {
@@ -1935,6 +1991,12 @@ var VidPly = (() => {
       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", {
@@ -2147,18 +2209,21 @@ var VidPly = (() => {
         }
       });
       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);
@@ -2167,7 +2232,14 @@ var VidPly = (() => {
         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", {
@@ -2210,17 +2282,20 @@ var VidPly = (() => {
         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();
@@ -2236,12 +2311,14 @@ var VidPly = (() => {
           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);
@@ -2251,7 +2328,14 @@ var VidPly = (() => {
         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;
@@ -2436,26 +2520,29 @@ var VidPly = (() => {
       }
     }
     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)));
@@ -2640,7 +2727,6 @@ var VidPly = (() => {
           this.updateCaptions();
         };
         selectedTrack.track.addEventListener("cuechange", this.cueChangeHandler);
-        this.element.style.display = "block";
         this.player.emit("captionsenabled", selectedTrack);
       }
     }
@@ -2783,6 +2869,9 @@ var VidPly = (() => {
           }
         }
       }
+      if (!handled && this.player.options.debug) {
+        console.log("[VidPly] Unhandled key:", e.key, "code:", e.code, "shiftKey:", e.shiftKey);
+      }
     }
     executeAction(action, event) {
       switch (action) {
@@ -2801,12 +2890,6 @@ var VidPly = (() => {
         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;
@@ -2815,14 +2898,22 @@ var VidPly = (() => {
           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)
@@ -2833,9 +2924,30 @@ var VidPly = (() => {
             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;
       }
@@ -2902,317 +3014,6 @@ var VidPly = (() => {
     }
   };
 
-  // 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) {
@@ -4500,16 +4301,18 @@ var VidPly = (() => {
           "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: {},
@@ -4598,9 +4401,6 @@ var VidPly = (() => {
         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);
@@ -4853,12 +4653,14 @@ var VidPly = (() => {
         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) {
@@ -5032,7 +4834,7 @@ var VidPly = (() => {
       if (!this.state.paused) {
         this.signLanguageVideo.play();
       }
-      this.container.appendChild(this.signLanguageVideo);
+      this.videoWrapper.appendChild(this.signLanguageVideo);
       this.signLanguageHandlers = {
         play: () => {
           if (this.signLanguageVideo) {
@@ -5092,15 +4894,11 @@ var VidPly = (() => {
       }
     }
     // 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() {
@@ -5197,9 +4995,6 @@ var VidPly = (() => {
       if (this.keyboardManager) {
         this.keyboardManager.destroy();
       }
-      if (this.settingsDialog) {
-        this.settingsDialog.destroy();
-      }
       if (this.transcriptManager) {
         this.transcriptManager.destroy();
       }