From ada128c65d7fe9bc6a36b2ae6ef54471aa1a766b Mon Sep 17 00:00:00 2001
From: mansoor-roeen-glitch
 <75437785+mansoor-roeen-glitch@users.noreply.github.com>
Date: Mon, 13 Sep 2021 23:57:14 +0530
Subject: [PATCH] Added captions support

---
 src/components/VideoElement.js | 9 ++++++---
 1 file changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/VideoElement.js b/src/components/VideoElement.js
index 13426eb0..1f26730a 100644
--- a/src/components/VideoElement.js
+++ b/src/components/VideoElement.js
@@ -9,7 +9,7 @@ import './VideoElement.css'
 // setProgress: (event: NativeEvent) => void
 // videoRef: useRef
 // startTime: number
-export function VideoElement({ streamUrl, loading, setProgress, videoRef, startTime }) {
+export function VideoElement({ streamUrl, loading, setProgress, videoRef, startTime, streamData }) {
     const [error, setError] = React.useState(false);
 
     function onLoad() {
@@ -48,11 +48,14 @@ export function VideoElement({ streamUrl, loading, setProgress, videoRef, startT
 
     if (!streamUrl.endsWith('.mp4')) {
         return (
-            <video className="videoElement" ref={videoRef} controls autoPlay onProgress={setProgress} onLoadedData={onLoad} />
+            <video crossorigin="anonymous" className="videoElement" ref={videoRef} controls autoPlay onProgress={setProgress} onLoadedData={onLoad}>
+                {streamData.subtitles && streamData.subtitles.map((sub, index) => {return <track key={index} kind="captions" label={sub.language} src={`${process.env.REACT_APP_CORS_PROXY_URL}https://lookmovie.io${sub.file}` }></track>})}
+            </video>
         )
     } else {
         return (
-            <video className="videoElement" ref={videoRef} controls autoPlay onProgress={setProgress} onLoadedData={onLoad}>
+            <video crossorigin="anonymous" className="videoElement" ref={videoRef} controls autoPlay onProgress={setProgress} onLoadedData={onLoad}>
+                {streamData.subtitles && streamData.subtitles.map((sub, index) => {return <track key={index} kind="captions" label={sub.language} src={`${process.env.REACT_APP_CORS_PROXY_URL}https://lookmovie.io${sub.file}` }></track>})}
                 <source src={streamUrl} type="video/mp4" />
             </video>
         )