better button??

src/assets/locales/en.json

@@ -368,6 +368,7 @@
         "customChoice": "Drop or upload file",
         "customizeLabel": "Customize",
         "offChoice": "Off",
+        "OpenSubtitlesChoice": "OpenSubtitles",
         "settings": {
           "backlink": "Custom subtitles",
           "delay": "Subtitle delay",

src/components/player/atoms/Settings.tsx

@@ -62,7 +62,7 @@ function SettingsOverlay({ id }: { id: string }) {
           id={id}
           path="/captions/opensubtitles"
           width={343}
-          height={450}
+          height={431}
         >
           <Menu.Card>
             <OpenSubtitlesCaptionView id={id} />

src/components/player/atoms/settings/CaptionsView.tsx

@@ -29,6 +29,7 @@ export function CaptionOption(props: {
   loading?: boolean;
   onClick?: () => void;
   error?: React.ReactNode;
+  chevron?: boolean;
 }) {
   return (
     <SelectableLink
@@ -36,6 +37,7 @@ export function CaptionOption(props: {
       loading={props.loading}
       error={props.error}
       onClick={props.onClick}
+      chevron={props.chevron}
     >
       <span
         data-active-link={props.selected ? true : undefined}
@@ -233,13 +235,8 @@ export function CaptionsView({ id }: { id: string }) {
         }}
         onDrop={(event) => onDrop(event)}
       >
-        <div className="flex flex-row gap-2 mt-3">
+        <div className="mt-3">
           <Input value={searchQuery} onInput={setSearchQuery} />
-          <button
-            type="button"
-            onClick={() => router.navigate("/captions/opensubtitles")}
-            className="p-2 rounded tabbable duration-200 hover:bg-video-context-light hover:bg-opacity-10"
-          />
         </div>
         <Menu.ScrollToActiveSection className="!pt-1 mt-2 pb-3">
           <CaptionOption
@@ -249,6 +246,13 @@ export function CaptionsView({ id }: { id: string }) {
             {t("player.menus.subtitles.offChoice")}
           </CaptionOption>
           <CustomCaptionOption />
+          <CaptionOption
+            onClick={() => router.navigate("/captions/opensubtitles")}
+            selected={useSubtitleStore((s) => s.isOpenSubtitles)}
+            chevron
+          >
+            {t("player.menus.subtitles.OpenSubtitlesChoice")}
+          </CaptionOption>
           {content}
         </Menu.ScrollToActiveSection>
       </FileDropHandler>

src/components/player/atoms/settings/opensubtitles.tsx

@@ -127,33 +127,8 @@ export function OpenSubtitlesCaptionView({ id }: { id: string }) {
   return (
     <>
       <div>
-        <div
-          className={classNames(
-            "absolute inset-0 flex items-center justify-center text-white z-10 pointer-events-none transition-opacity duration-300",
-            dragging ? "opacity-100" : "opacity-0",
-          )}
-        >
-          <div className="flex flex-col items-center">
-            <Icon className="text-5xl mb-4" icon={Icons.UPLOAD} />
-            <span className="text-xl weight font-medium">
-              {t("player.menus.subtitles.dropSubtitleFile")}
-            </span>
-          </div>
-        </div>
-
-        <Menu.BackLink
-          onClick={() => router.navigate("/captions")}
-          rightSide={
-            <button
-              type="button"
-              onClick={() => router.navigate("/captions/settings")}
-              className="-mr-2 -my-1 px-2 p-[0.4em] rounded tabbable hover:bg-video-context-light hover:bg-opacity-10"
-            >
-              {t("player.menus.subtitles.customizeLabel")}
-            </button>
-          }
-        >
-          {t("player.menus.subtitles.title")}
+        <Menu.BackLink onClick={() => router.navigate("/captions")}>
+          {t("player.menus.subtitles.OpenSubtitlesChoice")}
         </Menu.BackLink>
       </div>
       <div className="mt-3">

src/components/player/hooks/useCaptions.ts

@@ -19,6 +19,7 @@ export function useCaptions() {
   );
   const setCaption = usePlayerStore((s) => s.setCaption);
   const lastSelectedLanguage = useSubtitleStore((s) => s.lastSelectedLanguage);
+  const setIsOpenSubtitles = useSubtitleStore((s) => s.setIsOpenSubtitles);
 
   const captionList = usePlayerStore((s) => s.captionList);
   const getHlsCaptionList = usePlayerStore((s) => s.display?.getCaptionList);
@@ -77,11 +78,13 @@ export function useCaptions() {
         captionToSet.srtData = srtData;
       }
 
+      setIsOpenSubtitles(!!caption.opensubtitles);
       setCaption(captionToSet);
       resetSubtitleSpecificSettings();
       setLanguage(caption.language);
     },
     [
+      setIsOpenSubtitles,
       setLanguage,
       captions,
       setCaption,
@@ -101,9 +104,10 @@ export function useCaptions() {
   );
 
   const disable = useCallback(async () => {
+    setIsOpenSubtitles(false);
     setCaption(null);
     setLanguage(null);
-  }, [setCaption, setLanguage]);
+  }, [setCaption, setLanguage, setIsOpenSubtitles]);
 
   const selectLastUsedLanguage = useCallback(async () => {
     const language = lastSelectedLanguage ?? "en";

src/components/player/internals/ContextMenu/Links.tsx

@@ -123,14 +123,34 @@ export function SelectableLink(props: {
   children?: ReactNode;
   disabled?: boolean;
   error?: ReactNode;
+  chevron?: boolean;
 }) {
   let rightContent;
   if (props.selected) {
+    if (props.chevron) {
+      rightContent = (
+        <span className="flex items-center">
+          <Icon
+            icon={Icons.CIRCLE_CHECK}
+            className="text-xl text-video-context-type-accent"
+          />
+          <Icon
+            className="text-white text-xl ml-1 -mr-1.5"
+            icon={Icons.CHEVRON_RIGHT}
+          />
+        </span>
+      );
+    } else {
+      rightContent = (
+        <Icon
+          icon={Icons.CIRCLE_CHECK}
+          className="text-xl text-video-context-type-accent"
+        />
+      );
+    }
+  } else if (props.chevron) {
     rightContent = (
-      <Icon
-        icon={Icons.CIRCLE_CHECK}
-        className="text-xl text-video-context-type-accent"
-      />
+      <Icon className="text-xl ml-1 -mr-1.5" icon={Icons.CHEVRON_RIGHT} />
     );
   }
   if (props.error)

src/stores/subtitles/index.ts

@@ -36,11 +36,13 @@ export interface SubtitleStore {
   };
   enabled: boolean;
   lastSelectedLanguage: string | null;
+  isOpenSubtitles: boolean;
   styling: SubtitleStyling;
   overrideCasing: boolean;
   delay: number;
   updateStyling(newStyling: Partial<SubtitleStyling>): void;
   setLanguage(language: string | null): void;
+  setIsOpenSubtitles(isOpenSubtitles: boolean): void;
   setCustomSubs(): void;
   setOverrideCasing(enabled: boolean): void;
   setDelay(delay: number): void;
@@ -56,6 +58,7 @@ export const useSubtitleStore = create(
         lastSelectedLanguage: null,
       },
       lastSelectedLanguage: null,
+      isOpenSubtitles: false,
       overrideCasing: false,
       delay: 0,
       styling: {
@@ -96,6 +99,11 @@ export const useSubtitleStore = create(
           if (lang) s.lastSelectedLanguage = lang;
         });
       },
+      setIsOpenSubtitles(isOpenSubtitles) {
+        set((s) => {
+          s.isOpenSubtitles = isOpenSubtitles;
+        });
+      },
       setCustomSubs() {
         set((s) => {
           s.enabled = true;