add toggle native subtitles keyboard command

src/assets/locales/en.json

@@ -285,6 +285,7 @@
         "randomCaption": "Select random caption from last used language",
         "syncSubtitlesEarlier": "Sync subtitles earlier (-0.5s)",
         "syncSubtitlesLater": "Sync subtitles later (+0.5s)",
+        "toggleNativeSubtitles": "Toggle native subtitles",
         "barrelRoll": "Do a barrel roll! 🌀",
         "closeOverlay": "Close overlay/modal",
         "nextEpisode": "Next episode",

src/components/overlays/KeyboardCommandsEditModal.tsx

@@ -165,6 +165,13 @@ const getShortcutGroups = (
             "global.keyboardShortcuts.shortcuts.syncSubtitlesLater",
           ),
         },
+        {
+          id: ShortcutId.TOGGLE_NATIVE_SUBTITLES,
+          config: shortcuts[ShortcutId.TOGGLE_NATIVE_SUBTITLES],
+          description: t(
+            "global.keyboardShortcuts.shortcuts.toggleNativeSubtitles",
+          ),
+        },
       ],
     },
     {

src/components/overlays/KeyboardCommandsModal.tsx

@@ -189,6 +189,13 @@ const getShortcutGroups = (
           ),
           config: getConfig(ShortcutId.SYNC_SUBTITLES_LATER),
         },
+        {
+          key: getDisplayKey(ShortcutId.TOGGLE_NATIVE_SUBTITLES) || "S",
+          description: t(
+            "global.keyboardShortcuts.shortcuts.toggleNativeSubtitles",
+          ),
+          config: getConfig(ShortcutId.TOGGLE_NATIVE_SUBTITLES),
+        },
       ],
     },
     {

src/components/player/internals/KeyboardEvents.tsx

@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 
 import { getMetaFromId } from "@/backend/metadata/getmeta";
 import { MWMediaType } from "@/backend/metadata/types/mw";
@@ -14,6 +14,7 @@ import { useSubtitleStore } from "@/stores/subtitles";
 import { useEmpheralVolumeStore } from "@/stores/volume";
 import { useWatchPartyStore } from "@/stores/watchParty";
 import {
+  DEFAULT_KEYBOARD_SHORTCUTS,
   LOCKED_SHORTCUTS,
   ShortcutId,
   matchesShortcut,
@@ -49,7 +50,23 @@ export function KeyboardEvents() {
     (s) => s.setShowDelayIndicator,
   );
   const enableHoldToBoost = usePreferencesStore((s) => s.enableHoldToBoost);
-  const keyboardShortcuts = usePreferencesStore((s) => s.keyboardShortcuts);
+  const storedKeyboardShortcuts = usePreferencesStore(
+    (s) => s.keyboardShortcuts,
+  );
+  // Merge defaults with stored shortcuts to ensure new shortcuts are available
+  const keyboardShortcuts = useMemo(
+    () => ({
+      ...DEFAULT_KEYBOARD_SHORTCUTS,
+      ...storedKeyboardShortcuts,
+    }),
+    [storedKeyboardShortcuts],
+  );
+  const enableNativeSubtitles = usePreferencesStore(
+    (s) => s.enableNativeSubtitles,
+  );
+  const setEnableNativeSubtitles = usePreferencesStore(
+    (s) => s.setEnableNativeSubtitles,
+  );
 
   const [isRolling, setIsRolling] = useState(false);
   const volumeDebounce = useRef<ReturnType<typeof setTimeout> | undefined>();
@@ -295,6 +312,8 @@ export function KeyboardEvents() {
     navigateToNextEpisode,
     navigateToPreviousEpisode,
     keyboardShortcuts,
+    enableNativeSubtitles,
+    setEnableNativeSubtitles,
   });
 
   useEffect(() => {
@@ -329,6 +348,8 @@ export function KeyboardEvents() {
       navigateToNextEpisode,
       navigateToPreviousEpisode,
       keyboardShortcuts,
+      enableNativeSubtitles,
+      setEnableNativeSubtitles,
     };
   }, [
     setShowVolume,
@@ -356,6 +377,8 @@ export function KeyboardEvents() {
     navigateToNextEpisode,
     navigateToPreviousEpisode,
     keyboardShortcuts,
+    enableNativeSubtitles,
+    setEnableNativeSubtitles,
   ]);
 
   useEffect(() => {
@@ -725,6 +748,20 @@ export function KeyboardEvents() {
           dataRef.current.setCurrentOverlay(null);
         }, 3000);
       }
+
+      // Toggle native subtitles - customizable
+      const toggleNativeSubtitles =
+        dataRef.current.keyboardShortcuts[ShortcutId.TOGGLE_NATIVE_SUBTITLES];
+      if (
+        toggleNativeSubtitles?.key &&
+        matchesShortcut(evt, toggleNativeSubtitles)
+      ) {
+        evt.preventDefault();
+        evt.stopPropagation();
+        dataRef.current.setEnableNativeSubtitles(
+          !dataRef.current.enableNativeSubtitles,
+        );
+      }
     };
 
     const keyupEventHandler = (evt: KeyboardEvent) => {

src/utils/keyboardShortcuts.ts

@@ -40,6 +40,7 @@ export enum ShortcutId {
   RANDOM_CAPTION = "randomCaption",
   SYNC_SUBTITLES_EARLIER = "syncSubtitlesEarlier",
   SYNC_SUBTITLES_LATER = "syncSubtitlesLater",
+  TOGGLE_NATIVE_SUBTITLES = "toggleNativeSubtitles",
 
   // Interface
   BARREL_ROLL = "barrelRoll",
@@ -67,6 +68,7 @@ export const DEFAULT_KEYBOARD_SHORTCUTS: KeyboardShortcuts = {
   [ShortcutId.RANDOM_CAPTION]: { modifier: "Shift", key: "C" },
   [ShortcutId.SYNC_SUBTITLES_EARLIER]: { key: "[" },
   [ShortcutId.SYNC_SUBTITLES_LATER]: { key: "]" },
+  [ShortcutId.TOGGLE_NATIVE_SUBTITLES]: { key: "S" },
   [ShortcutId.BARREL_ROLL]: { key: "R" },
 };