From 1df4db723b758952183f8960492d61e0c4d5ac1d Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Thu, 15 Jul 2021 18:07:40 +0200
Subject: [PATCH 1/6] feat(video): video placeholder

---
 src/components/VideoElement.js      |  7 ++++---
 src/components/VideoPlaceholder.css | 23 +++++++++++++++++++++++
 src/components/VideoPlaceholder.js  | 12 ++++++++++++
 3 files changed, 39 insertions(+), 3 deletions(-)
 create mode 100644 src/components/VideoPlaceholder.css
 create mode 100644 src/components/VideoPlaceholder.js

diff --git a/src/components/VideoElement.js b/src/components/VideoElement.js
index c568302e..c91db295 100644
--- a/src/components/VideoElement.js
+++ b/src/components/VideoElement.js
@@ -1,6 +1,7 @@
 import React from 'react'
 import Hls from 'hls.js'
 import './VideoElement.css'
+import { VideoPlaceholder } from './VideoPlaceholder'
 
 // streamUrl: string
 // loading: boolean
@@ -29,13 +30,13 @@ export function VideoElement({ streamUrl, loading }) {
     // TODO make better loading/error/empty state
 
     if (error)
-        return (<p className="videoElementText">Your browser is not supported</p>)
+        return (<VideoPlaceholder className="videoElementText">Your browser is not supported</VideoPlaceholder>)
 
     if (loading)
-        return <p className="videoElementText">Loading episode</p>
+        return <VideoPlaceholder>Loading episode</VideoPlaceholder>
     
     if (!streamUrl || streamUrl.length === 0)
-        return <p className="videoElementText">No video selected</p>
+        return <videoPlaceholder>No video selected</videoPlaceholder>
 
     return (
         <video className="videoElement" ref={videoRef} controls autoPlay />
diff --git a/src/components/VideoPlaceholder.css b/src/components/VideoPlaceholder.css
new file mode 100644
index 00000000..20dc70f7
--- /dev/null
+++ b/src/components/VideoPlaceholder.css
@@ -0,0 +1,23 @@
+.videoPlaceholder {
+	width: 100%;
+	position: relative;
+}
+.videoPlaceholder::before {
+	content: '';
+	display: block;
+	width: 100%;
+	padding-bottom: 56.25%;
+}
+.videoPlaceholderBox {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	width: 100%;
+	height: 100%;
+	top: 0;
+	left: 0;
+	position: absolute;
+	background: var(--choice);
+	border-radius: 6px;
+	color: var(--text);
+}
\ No newline at end of file
diff --git a/src/components/VideoPlaceholder.js b/src/components/VideoPlaceholder.js
new file mode 100644
index 00000000..193ba3e8
--- /dev/null
+++ b/src/components/VideoPlaceholder.js
@@ -0,0 +1,12 @@
+import React from 'react'
+import './VideoPlaceholder.css'
+
+export function VideoPlaceholder(props) {
+	return (
+		<div className="videoPlaceholder">
+			<div className="videoPlaceholderBox">
+				<p>{props.children}</p>
+			</div>
+		</div>
+	)
+}
\ No newline at end of file

From 85dda8c13fd3c861ff6f9d2c86064810339feb95 Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Thu, 15 Jul 2021 18:12:49 +0200
Subject: [PATCH 2/6] style(movie): improve margins

---
 src/components/EpisodeSelector.css | 3 +++
 src/components/EpisodeSelector.js  | 2 +-
 src/lib/lookMovie.js               | 4 ++--
 src/views/Movie.css                | 3 +++
 4 files changed, 9 insertions(+), 3 deletions(-)

diff --git a/src/components/EpisodeSelector.css b/src/components/EpisodeSelector.css
index e69de29b..eb060543 100644
--- a/src/components/EpisodeSelector.css
+++ b/src/components/EpisodeSelector.css
@@ -0,0 +1,3 @@
+.episodeSelector {
+	margin-top: 20px;
+}
\ No newline at end of file
diff --git a/src/components/EpisodeSelector.js b/src/components/EpisodeSelector.js
index 3881c64c..0af01522 100644
--- a/src/components/EpisodeSelector.js
+++ b/src/components/EpisodeSelector.js
@@ -5,7 +5,7 @@ import './EpisodeSelector.css'
 
 export function EpisodeSelector({ setSeason, setEpisode, seasons, episodes, currentSeason, currentEpisode }) {
     return (
-        <div>
+        <div class="episodeSelector">
             <TypeSelector setType={setSeason} choices={seasons.map(v=>({ value: v.toString(), label: `Season ${v}`}))} selected={currentSeason}/><br></br>
             <NumberSelector setType={(e) => setEpisode({episode: e, season: currentSeason})} choices={episodes.map(v=>({ value: v.toString(), label: v}))} selected={currentEpisode.season === currentSeason?currentEpisode.episode:null}/>
         </div>
diff --git a/src/lib/lookMovie.js b/src/lib/lookMovie.js
index dcf1d357..6166c7dc 100644
--- a/src/lib/lookMovie.js
+++ b/src/lib/lookMovie.js
@@ -119,8 +119,8 @@ async function findContent(searchTerm, type) {
     const results = nodes.map(node => {
         return {
             type,
-            title: node.querySelector('h6 a').innerText,
-            year: node.querySelector('.year').innerText,
+            title: node.querySelector('h6 a').innerText.trim(),
+            year: node.querySelector('.year').innerText.trim(),
             slug: node.querySelector('a').href.split('/').pop(),
         }
     });
diff --git a/src/views/Movie.css b/src/views/Movie.css
index 29c5b961..f70a8fa8 100644
--- a/src/views/Movie.css
+++ b/src/views/Movie.css
@@ -1,3 +1,6 @@
 .showType-show .title-size-big {
 	margin-bottom: 10px;
+}
+.showType-show .title-size-small, .showType-movie .title-size-big {
+	margin-bottom: 30px;
 }
\ No newline at end of file

From 270daeccecb7675afb31383925f7cd71223a5569 Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Thu, 15 Jul 2021 18:18:47 +0200
Subject: [PATCH 3/6] feat(search): different placeholder based on type

---
 src/views/Search.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Search.js b/src/views/Search.js
index f03e785e..67b0179c 100644
--- a/src/views/Search.js
+++ b/src/views/Search.js
@@ -117,7 +117,7 @@ export function SearchView() {
                     ]}
                     selected={type}
                 />
-                <InputBox placeholder="Hamilton" onSubmit={(str) => searchMovie(str, type)} />
+                <InputBox placeholder={ type === "movie" ? "Hamilton" : "Atypical" } onSubmit={(str) => searchMovie(str, type)} />
                 <Progress show={progress > 0} failed={failed} progress={progress} steps={maxSteps} text={text} />
             </Card>
 

From 0880258dadcca7af141e329ab2930ab3de7ca112 Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Thu, 15 Jul 2021 18:21:42 +0200
Subject: [PATCH 4/6] chore(video): add dots to loading text

---
 src/components/VideoElement.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VideoElement.js b/src/components/VideoElement.js
index c91db295..5de5acd2 100644
--- a/src/components/VideoElement.js
+++ b/src/components/VideoElement.js
@@ -33,7 +33,7 @@ export function VideoElement({ streamUrl, loading }) {
         return (<VideoPlaceholder className="videoElementText">Your browser is not supported</VideoPlaceholder>)
 
     if (loading)
-        return <VideoPlaceholder>Loading episode</VideoPlaceholder>
+        return <VideoPlaceholder>Loading episode...</VideoPlaceholder>
     
     if (!streamUrl || streamUrl.length === 0)
         return <videoPlaceholder>No video selected</videoPlaceholder>

From bad4c880b5ab8efa71fed8b1d5c2eee1e20103c3 Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Thu, 15 Jul 2021 18:28:00 +0200
Subject: [PATCH 5/6] fix(episode-selector): fix className

---
 src/components/EpisodeSelector.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/EpisodeSelector.js b/src/components/EpisodeSelector.js
index 0af01522..e2281106 100644
--- a/src/components/EpisodeSelector.js
+++ b/src/components/EpisodeSelector.js
@@ -5,7 +5,7 @@ import './EpisodeSelector.css'
 
 export function EpisodeSelector({ setSeason, setEpisode, seasons, episodes, currentSeason, currentEpisode }) {
     return (
-        <div class="episodeSelector">
+        <div className="episodeSelector">
             <TypeSelector setType={setSeason} choices={seasons.map(v=>({ value: v.toString(), label: `Season ${v}`}))} selected={currentSeason}/><br></br>
             <NumberSelector setType={(e) => setEpisode({episode: e, season: currentSeason})} choices={episodes.map(v=>({ value: v.toString(), label: v}))} selected={currentEpisode.season === currentSeason?currentEpisode.episode:null}/>
         </div>

From 8db4b79ac937ff597a2b1794b2e7fcd7b22783e4 Mon Sep 17 00:00:00 2001
From: Jip Fr <jipfrijlink@gmail.com>
Date: Thu, 15 Jul 2021 18:28:41 +0200
Subject: [PATCH 6/6] fix(video): remove unnecesary and unused class

---
 src/components/VideoElement.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/VideoElement.js b/src/components/VideoElement.js
index 5de5acd2..381fb27c 100644
--- a/src/components/VideoElement.js
+++ b/src/components/VideoElement.js
@@ -30,7 +30,7 @@ export function VideoElement({ streamUrl, loading }) {
     // TODO make better loading/error/empty state
 
     if (error)
-        return (<VideoPlaceholder className="videoElementText">Your browser is not supported</VideoPlaceholder>)
+        return (<VideoPlaceholder>Your browser is not supported</VideoPlaceholder>)
 
     if (loading)
         return <VideoPlaceholder>Loading episode...</VideoPlaceholder>