add support for captions

src/components/media/VideoPlayer.tsx

@@ -1,11 +1,12 @@
 import { IconPatch } from "components/buttons/IconPatch";
 import { Icons } from "components/Icon";
 import { Loading } from "components/layout/Loading";
-import { MWMediaStream } from "providers";
+import { MWMediaCaption, MWMediaStream } from "providers";
 import { ReactElement, useEffect, useRef, useState } from "react";
 
 export interface VideoPlayerProps {
   source: MWMediaStream;
+  captions: MWMediaCaption[];
   startAt?: number;
   onProgress?: (event: ProgressEvent) => void;
 }
@@ -74,6 +75,9 @@ export function VideoPlayer(props: VideoPlayerProps) {
         {!mustUseHls ? (
           <source src={props.source.url} type="video/mp4" />
         ) : null}
+        {props.captions.map((v) => (
+          <track key={v.id} kind="captions" label={v.label} src={v.url} />
+        ))}
       </video>
     </>
   );

src/providers/list/theflix/index.ts

@@ -69,7 +69,8 @@ export const theFlixScraper: MWMediaProvider = {
     }
 
     const data = JSON.parse(prop.textContent);
-    return { url: data.props.pageProps.videoUrl, type: "mp4" };
+
+    return { url: data.props.pageProps.videoUrl, type: "mp4", captions: [] };
   },
 
   async getSeasonDataFromMedia(

src/providers/types.ts

@@ -13,9 +13,15 @@ export interface MWPortableMedia {
 }
 
 export type MWMediaStreamType = "m3u8" | "mp4";
+export interface MWMediaCaption {
+  id: string;
+  url: string;
+  label: string;
+}
 export interface MWMediaStream {
   url: string;
   type: MWMediaStreamType;
+  captions: MWMediaCaption[];
 }
 
 export interface MWMediaMeta extends MWPortableMedia {

src/views/MediaView.tsx

@@ -52,6 +52,7 @@ function StyledMediaView(props: StyledMediaViewProps) {
   return (
     <VideoPlayer
       source={props.stream}
+      captions={props.stream.captions}
       onProgress={(e) => updateProgress(e)}
       startAt={startAtTime}
     />