Merge pull request #725 from CelestialLemon/dev

fixed #614 multiple captions of the same language all appeared as selected when selecting only one

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

@@ -75,6 +75,7 @@ function CustomCaptionOption() {
             setCaption({
               language: "custom",
               srtData: converted,
+              id: "custom-caption",
             });
             setCustomSubs();
           });
@@ -115,39 +116,38 @@ function useSubtitleList(subs: CaptionListItem[], searchQuery: string) {
 export function CaptionsView({ id }: { id: string }) {
   const { t } = useTranslation();
   const router = useOverlayRouter(id);
-  const lang = usePlayerStore((s) => s.caption.selected?.language);
+  const selectedCaptionId = usePlayerStore((s) => s.caption.selected?.id);
   const [currentlyDownloading, setCurrentlyDownloading] = useState<
     string | null
   >(null);
-  const { selectLanguage, disable } = useCaptions();
+  const { selectCaptionById, disable } = useCaptions();
   const captionList = usePlayerStore((s) => s.captionList);
 
   const [searchQuery, setSearchQuery] = useState("");
   const subtitleList = useSubtitleList(captionList, searchQuery);
 
   const [downloadReq, startDownload] = useAsyncFn(
-    async (language: string) => {
-      setCurrentlyDownloading(language);
-      return selectLanguage(language);
+    async (captionId: string) => {
+      setCurrentlyDownloading(captionId);
+      return selectCaptionById(captionId);
     },
-    [selectLanguage, setCurrentlyDownloading],
+    [selectCaptionById, setCurrentlyDownloading],
   );
 
   const content = subtitleList.map((v, i) => {
     return (
       <CaptionOption
         // key must use index to prevent url collisions
-        // eslint-disable-next-line react/no-array-index-key
-        key={`${i}-${v.url}`}
+        key={v.id}
         countryCode={v.language}
-        selected={lang === v.language}
-        loading={v.language === currentlyDownloading && downloadReq.loading}
+        selected={v.id === selectedCaptionId}
+        loading={v.id === currentlyDownloading && downloadReq.loading}
         error={
-          v.language === currentlyDownloading && downloadReq.error
+          v.id === currentlyDownloading && downloadReq.error
             ? downloadReq.error.toString()
             : undefined
         }
-        onClick={() => startDownload(v.language)}
+        onClick={() => startDownload(v.id)}
       >
         {v.languageName}
       </CaptionOption>
@@ -176,7 +176,7 @@ export function CaptionsView({ id }: { id: string }) {
         </div>
       </div>
       <Menu.ScrollToActiveSection className="!pt-1 mt-2 pb-3">
-        <CaptionOption onClick={() => disable()} selected={!lang}>
+        <CaptionOption onClick={() => disable()} selected={!selectedCaptionId}>
           {t("player.menus.subtitles.offChoice")}
         </CaptionOption>
         <CustomCaptionOption />

src/components/player/display/displayInterface.ts

@@ -41,6 +41,7 @@ export interface DisplayMeta {
 }
 
 export interface DisplayCaption {
+  id: string;
   srtData: string;
   language: string;
   url?: string;

src/components/player/hooks/useCaptions.ts

@@ -14,22 +14,32 @@ export function useCaptions() {
   const lastSelectedLanguage = useSubtitleStore((s) => s.lastSelectedLanguage);
   const captionList = usePlayerStore((s) => s.captionList);
 
-  const selectLanguage = useCallback(
-    async (language: string) => {
-      const caption = captionList.find((v) => v.language === language);
+  const selectCaptionById = useCallback(
+    async (captionId: string) => {
+      const caption = captionList.find((v) => v.id === captionId);
       if (!caption) return;
       const srtData = await downloadCaption(caption);
       setCaption({
+        id: caption.id,
         language: caption.language,
         srtData,
         url: caption.url,
       });
       resetSubtitleSpecificSettings();
-      setLanguage(language);
+      setLanguage(caption.language);
     },
     [setLanguage, captionList, setCaption, resetSubtitleSpecificSettings],
   );
 
+  const selectLanguage = useCallback(
+    async (language: string) => {
+      const caption = captionList.find((v) => v.language === language);
+      if (!caption) return;
+      return selectCaptionById(caption.id);
+    },
+    [captionList, selectCaptionById],
+  );
+
   const disable = useCallback(async () => {
     setCaption(null);
     setLanguage(null);
@@ -56,5 +66,6 @@ export function useCaptions() {
     selectLastUsedLanguage,
     toggleLastUsed,
     selectLastUsedLanguageIfEnabled,
+    selectCaptionById,
   };
 }

src/components/player/utils/captions.ts

@@ -80,6 +80,7 @@ export function convertProviderCaption(
   captions: RunOutput["stream"]["captions"],
 ): CaptionListItem[] {
   return captions.map((v) => ({
+    id: v.id,
     language: v.language,
     url: v.url,
     needsProxy: v.hasCorsRestrictions,

src/stores/player/slices/source.ts

@@ -42,12 +42,14 @@ export interface PlayerMeta {
 }
 
 export interface Caption {
+  id: string;
   language: string;
   url?: string;
   srtData: string;
 }
 
 export interface CaptionListItem {
+  id: string;
   language: string;
   url: string;
   needsProxy: boolean;