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..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 (
-
+
({ value: v.toString(), label: `Season ${v}`}))} selected={currentSeason}/>
setEpisode({episode: e, season: currentSeason})} choices={episodes.map(v=>({ value: v.toString(), label: v}))} selected={currentEpisode.season === currentSeason?currentEpisode.episode:null}/>
diff --git a/src/components/VideoElement.js b/src/components/VideoElement.js
index c568302e..381fb27c 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 (
Your browser is not supported
)
+ return (
Your browser is not supported)
if (loading)
- return
Loading episode
+ return
Loading episode...
if (!streamUrl || streamUrl.length === 0)
- return
No video selected
+ return
No video selected
return (
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 (
+
+ )
+}
\ No newline at end of file
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
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}
/>
-
searchMovie(str, type)} />
+ searchMovie(str, type)} />