Merge pull request #29 from mansoor-roeen-glitch/master

Added subtitles accessibility for Lookmovie

src/components/MovieRow.css

@@ -24,6 +24,13 @@
     margin-right: 0.5rem;
 }
 
+.movieRow .left .titleWrapper {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
 .movieRow .left .seasonEpisodeSubtitle,
 .movieRow .left .year {
     color: var(--text-secondary);
@@ -62,6 +69,14 @@
     margin-right: 10px;
 }
 
+.subtitleIcon {
+    width: 30px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-right: 10px;
+}
+
 @media screen and (max-width: 400px) {
     .movieRow {
         flex-direction: column;

src/components/MovieRow.js

@@ -21,10 +21,25 @@ export function MovieRow(props) {
 
     return (
         <div className="movieRow" onClick={() => props.onClick && props.onClick()}>
+        
+            { props.source === "lookmovie" && (
+                <div className="subtitleIcon">
+                    <svg id="subtitleIcon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                        <path d="M20 4H4C2.897 4 2 4.897 2 6V18C2 19.103 2.897 20 4 20H20C21.103 20 22 19.103 22 18V6C22 4.897 21.103 4 20 4ZM11 10H8V14H11V16H8C6.897 16 6 15.103 6 14V10C6 8.897 6.897 8 8 8H11V10ZM18 10H15V14H18V16H15C13.897 16 13 15.103 13 14V10C13 8.897 13.897 8 15 8H18V10Z" fill="#EEEEEE"/>
+                    </svg>
+                </div>
+            ) }
+        
             <div className="left">
                 {/* <Cross /> */}
-                {props.title}<span className="seasonEpisodeSubtitle">{props.place ? ` - S${props.place.season}:E${props.place.episode}` : ''}</span>&nbsp;
+                <div className="titleWrapper">
-                <span className="year">({props.year})</span>
+                    <div className="titleText">
+                        {props.title}
+                        &nbsp;
+                        <span className="year">({props.year})</span>
+                        <span className="seasonEpisodeSubtitle">{props.place ? ` - S${props.place.season}:E${props.place.episode}` : ''}</span>
+                    </div>
+                </div>
             </div>
 
             <div className="watch">

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) => <track key={index} kind="captions" label={sub.language} src={`${process.env.REACT_APP_CORS_PROXY_URL}https://lookmovie.io${sub.file}` } />) }
+            </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) => <track key={index} kind="captions" label={sub.language} src={`${process.env.REACT_APP_CORS_PROXY_URL}https://lookmovie.io${sub.file}` } />) }
                 <source src={streamUrl} type="video/mp4" />
             </video>
         )

src/lib/scraper/lookmovie.js

@@ -50,9 +50,17 @@ async function findContent(searchTerm, type) {
     }
 }
 async function getVideoUrl(config) {
-    const accessToken = await getAccessToken(config);
+    const { subtitles, token: accessToken } = await getAccessInfo(config);
     const now = Math.floor(Date.now() / 1e3);
 
+    let subs;
+
+    if (config.type === "show") {
+        subs = await getEpisodeSubs(config);
+    } else if (config.type === "movie") {
+        subs = subtitles;
+    }
+
     let url = '';
 
     if (config.type === 'movie') {
@@ -73,10 +81,17 @@ async function getVideoUrl(config) {
         }
     }
 
-    return videoUrl.startsWith("/") ? `${BASE_URL}${videoUrl}` : videoUrl;
+    return {
+        videoUrl: videoUrl.startsWith("/") ? `${BASE_URL}${videoUrl}` : videoUrl, 
+        subs, 
+    };
 }
 
-async function getAccessToken(config) {
+async function getEpisodeSubs (config) {
+    return await fetch(`${BASE_URL}/api/v1/shows/episode-subtitles/?id_episode=${config.id}`).then(res => res.json());
+}
+
+async function getAccessInfo(config) {
     let url = '';
 
     if (config.type === 'movie') {
@@ -88,7 +103,9 @@ async function getAccessToken(config) {
     const data = await fetch(url).then((d) => d.json());
 
     const token = data?.data?.accessToken;
-    if (token) return token;
+    const subtitles = data?.data?.subtitles;
+
+    if (token) return { token, subtitles };
 
     return "Invalid type provided in config";
 }
@@ -153,11 +170,11 @@ async function getStreamUrl(slug, type, season, episode) {
         slug: slug,
         id: id,
         type: type,
-    });
+    }); 
 
-    return { url: videoUrl }
+    return { url: videoUrl.videoUrl, subtitles: videoUrl.subs };
 }
 
 
 const lookMovie = { findContent, getStreamUrl, getEpisodes };
-export default lookMovie;
+export default lookMovie;

src/views/Movie.js

@@ -56,10 +56,10 @@ export function MovieView(props) {
         }
 
         setLoading(true);
-
         getStreamUrl(streamData.slug, streamData.type, streamData.source, season, episode)
-            .then(({url}) => {
+        .then(({url, subtitles}) => {
-                if (cancel) return;
+            if (cancel) return;
+                if (streamData.source === "lookmovie") streamData.subtitles = subtitles;
                 setStreamUrl(url)
                 setLoading(false);
             })
@@ -131,7 +131,7 @@ export function MovieView(props) {
                     Season {season}: Episode {episode}
                 </Title> : undefined}
 
-                <VideoElement streamUrl={streamUrl} loading={loading} setProgress={setProgress} videoRef={videoRef} startTime={startTime} />
+                <VideoElement streamUrl={streamUrl} loading={loading} setProgress={setProgress} videoRef={videoRef} startTime={startTime} streamData={streamData} />
 
                 {streamData.type === "show" ? 
                     <EpisodeSelector

src/views/Search.js

@@ -54,13 +54,17 @@ export function SearchView() {
             }
 
             let realUrl = '';
+            let subtitles = []
+
             if (type === "movie") {
-                const { url } = await getStreamUrl(slug, type, source);
+                const { url, subtitles: subs } = await getStreamUrl(slug, type, source);
 
                 if (url === '') {
                     return fail(`Not found: ${title}`)
                 }
+
                 realUrl = url;
+                subtitles = subs
             }
 
             setProgress(maxSteps);
@@ -72,7 +76,8 @@ export function SearchView() {
                 episodes,
                 slug,
                 source,
-                year
+                year,
+                subtitles
             })
             setText(`Streaming...`)
             navigate("movie")