From 95cb59fcf627b0319aa8ade933bb3dd91cb6aba5 Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Thu, 15 Jul 2021 21:24:11 +0200
Subject: [PATCH] feat(progress): add progress in search on MovieRow

---
 src/components/MovieRow.css          |  2 ++
 src/components/MovieRow.js           | 16 ++++++++++++++++
 src/components/NumberSelector.css    | 12 ------------
 src/components/NumberSelector.js     | 12 ++----------
 src/components/PercentageOverlay.css | 12 ++++++++++++
 src/components/PercentageOverlay.js  | 13 +++++++++++++
 src/views/Search.js                  |  2 +-
 7 files changed, 46 insertions(+), 23 deletions(-)
 create mode 100644 src/components/PercentageOverlay.css
 create mode 100644 src/components/PercentageOverlay.js

diff --git a/src/components/MovieRow.css b/src/components/MovieRow.css
index 99a6cad0..a32463b5 100644
--- a/src/components/MovieRow.css
+++ b/src/components/MovieRow.css
@@ -1,4 +1,5 @@
 .movieRow {
+    position: relative;
     display: flex;
     border-radius: 5px;
     background-color: var(--content);
@@ -8,6 +9,7 @@
     cursor: pointer;
     transition: transform 50ms ease-in-out;
     user-select: none;
+    overflow: hidden;
 }
 
 .movieRow p {
diff --git a/src/components/MovieRow.js b/src/components/MovieRow.js
index a3ae80bd..00a7d883 100644
--- a/src/components/MovieRow.js
+++ b/src/components/MovieRow.js
@@ -1,10 +1,25 @@
 import React from 'react'
 import { Arrow } from './Arrow'
 import './MovieRow.css'
+import { PercentageOverlay } from './PercentageOverlay'
 
 // title: string
 // onClick: () => void
 export function MovieRow(props) {
+    console.log(props)
+
+    const progressData = JSON.parse(localStorage.getItem("video-progress") || "{}")
+    let progress;
+    let percentage = null;
+    if(props.type === "movie") {
+        progress = progressData?.lookmovie?.movie?.[props.slug]?.full
+        if(progress) {
+            console.log(progress)
+            percentage = Math.floor((progress.currentlyAt / progress.totalDuration) * 100)
+        }
+    }
+    console.log(percentage)
+
     return (
         <div className="movieRow" onClick={() => props.onClick && props.onClick()}>
             <div className="left">
@@ -15,6 +30,7 @@ export function MovieRow(props) {
                 <p>Watch {props.type}</p>
                 <Arrow/>
             </div>
+            <PercentageOverlay percentage={percentage} />
         </div>
     )
 }
diff --git a/src/components/NumberSelector.css b/src/components/NumberSelector.css
index 87faf308..3c8d5f06 100644
--- a/src/components/NumberSelector.css
+++ b/src/components/NumberSelector.css
@@ -48,15 +48,3 @@
     background-color: var(--choice-active);
 }
 
-.numberSelector .progressBar {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    opacity: 0.2;
-}
-.numberSelector .progressBarInner {
-    background: var(--theme-color);
-    height: 100%;
-}
\ No newline at end of file
diff --git a/src/components/NumberSelector.js b/src/components/NumberSelector.js
index 99742c9f..1bcf3d20 100644
--- a/src/components/NumberSelector.js
+++ b/src/components/NumberSelector.js
@@ -1,27 +1,19 @@
 import React from 'react';
 // import { Arrow } from './Arrow';
 import './NumberSelector.css'
+import { PercentageOverlay } from './PercentageOverlay';
 
 // setType: (txt: string) => void
 // choices: { label: string, value: string }[]
 // selected: string
 export function NumberSelector({ setType, choices, selected }) {
-
-    choices.forEach(choice => {
-        if(choice.percentage > 3) choice.percentage = Math.max(20, choice.percentage < 90 ? choice.percentage : 100)
-    })
-
     return (
         <div className="numberSelector">
             {choices.map(v=>(
                 <div key={v.value} className="choiceWrapper">
                     <div className={`choice ${selected&&selected===v.value?'selected':''}`} onClick={() => setType(v.value)}>
                         {v.label}
-                        {v.percentage > 0 ? (
-                            <div class="progressBar">
-                                <div class="progressBarInner" style={{width: `${v.percentage}%`}}></div>
-                            </div>
-                        ) : ''}
+                        <PercentageOverlay percentage={v.percentage} />
                     </div>
                 </div>
             ))}
diff --git a/src/components/PercentageOverlay.css b/src/components/PercentageOverlay.css
new file mode 100644
index 00000000..259f25dd
--- /dev/null
+++ b/src/components/PercentageOverlay.css
@@ -0,0 +1,12 @@
+.progressBar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.2;
+}
+.progressBarInner {
+    background: var(--theme-color);
+    height: 100%;
+}
\ No newline at end of file
diff --git a/src/components/PercentageOverlay.js b/src/components/PercentageOverlay.js
new file mode 100644
index 00000000..50a23a0a
--- /dev/null
+++ b/src/components/PercentageOverlay.js
@@ -0,0 +1,13 @@
+import React from 'react'
+import './PercentageOverlay.css'
+
+export function PercentageOverlay({ percentage }) {
+
+	if(percentage && percentage > 3) percentage = Math.max(20, percentage < 90 ? percentage : 100)
+
+	return percentage > 0 ? (
+		<div class="progressBar">
+            <div class="progressBarInner" style={{width: `${percentage}%`}}></div>
+        </div>
+	) : <React.Fragment></React.Fragment>
+}
\ No newline at end of file
diff --git a/src/views/Search.js b/src/views/Search.js
index 14d60b50..c4ef950e 100644
--- a/src/views/Search.js
+++ b/src/views/Search.js
@@ -127,7 +127,7 @@ export function SearchView() {
                     Whoops, there are a few {type}s like that
                 </Title>
                 {options?.map((v, i) => (
-                    <MovieRow key={i} title={v.title} type={v.type} year={v.year} season={v.season} episode={v.episode} onClick={() => {
+                    <MovieRow key={i} title={v.title} slug={v.slug} type={v.type} year={v.year} season={v.season} episode={v.episode} onClick={() => {
                         setShowingOptions(false)
                         getStream(v.title, v.slug, v.type, v.season, v.episode)
                     }}/>