From eb306f3772d7cf10513d07aecb74e1a8c92d26b1 Mon Sep 17 00:00:00 2001
From: mrjvs <jellevs@gmail.com>
Date: Sun, 13 Mar 2022 17:46:56 +0100
Subject: [PATCH] add support for captions

---
 src/components/media/VideoPlayer.tsx | 6 +++++-
 src/providers/list/theflix/index.ts  | 3 ++-
 src/providers/types.ts               | 6 ++++++
 src/views/MediaView.tsx              | 1 +
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/src/components/media/VideoPlayer.tsx b/src/components/media/VideoPlayer.tsx
index 351d6202..947b782a 100644
--- a/src/components/media/VideoPlayer.tsx
+++ b/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>
     </>
   );
diff --git a/src/providers/list/theflix/index.ts b/src/providers/list/theflix/index.ts
index fadfd53b..16f434c9 100644
--- a/src/providers/list/theflix/index.ts
+++ b/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(
diff --git a/src/providers/types.ts b/src/providers/types.ts
index 1bd47a48..4f3795e0 100644
--- a/src/providers/types.ts
+++ b/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 {
diff --git a/src/views/MediaView.tsx b/src/views/MediaView.tsx
index cfceedf3..7b2020d1 100644
--- a/src/views/MediaView.tsx
+++ b/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}
     />