Merge pull request #6 from JipFr/master

Several things
This commit is contained in:
James Hawkins 2021-07-15 17:29:55 +01:00 committed by GitHub
commit 9ade94e185
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 49 additions and 7 deletions

View File

@ -0,0 +1,3 @@
.episodeSelector {
margin-top: 20px;
}

View File

@ -5,7 +5,7 @@ import './EpisodeSelector.css'
export function EpisodeSelector({ setSeason, setEpisode, seasons, episodes, currentSeason, currentEpisode }) { export function EpisodeSelector({ setSeason, setEpisode, seasons, episodes, currentSeason, currentEpisode }) {
return ( return (
<div> <div className="episodeSelector">
<TypeSelector setType={setSeason} choices={seasons.map(v=>({ value: v.toString(), label: `Season ${v}`}))} selected={currentSeason}/><br></br> <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}/> <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> </div>

View File

@ -1,6 +1,7 @@
import React from 'react' import React from 'react'
import Hls from 'hls.js' import Hls from 'hls.js'
import './VideoElement.css' import './VideoElement.css'
import { VideoPlaceholder } from './VideoPlaceholder'
// streamUrl: string // streamUrl: string
// loading: boolean // loading: boolean
@ -29,13 +30,13 @@ export function VideoElement({ streamUrl, loading }) {
// TODO make better loading/error/empty state // TODO make better loading/error/empty state
if (error) if (error)
return (<p className="videoElementText">Your browser is not supported</p>) return (<VideoPlaceholder>Your browser is not supported</VideoPlaceholder>)
if (loading) if (loading)
return <p className="videoElementText">Loading episode</p> return <VideoPlaceholder>Loading episode...</VideoPlaceholder>
if (!streamUrl || streamUrl.length === 0) if (!streamUrl || streamUrl.length === 0)
return <p className="videoElementText">No video selected</p> return <videoPlaceholder>No video selected</videoPlaceholder>
return ( return (
<video className="videoElement" ref={videoRef} controls autoPlay /> <video className="videoElement" ref={videoRef} controls autoPlay />

View File

@ -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);
}

View File

@ -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>
)
}

View File

@ -119,8 +119,8 @@ async function findContent(searchTerm, type) {
const results = nodes.map(node => { const results = nodes.map(node => {
return { return {
type, type,
title: node.querySelector('h6 a').innerText, title: node.querySelector('h6 a').innerText.trim(),
year: node.querySelector('.year').innerText, year: node.querySelector('.year').innerText.trim(),
slug: node.querySelector('a').href.split('/').pop(), slug: node.querySelector('a').href.split('/').pop(),
} }
}); });

View File

@ -1,3 +1,6 @@
.showType-show .title-size-big { .showType-show .title-size-big {
margin-bottom: 10px; margin-bottom: 10px;
}
.showType-show .title-size-small, .showType-movie .title-size-big {
margin-bottom: 30px;
} }

View File

@ -117,7 +117,7 @@ export function SearchView() {
]} ]}
selected={type} 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} /> <Progress show={progress > 0} failed={failed} progress={progress} steps={maxSteps} text={text} />
</Card> </Card>