feat(video): video placeholder

This commit is contained in:
Jip Fr 2021-07-15 18:07:40 +02:00
parent bf850bd7e8
commit 1df4db723b
3 changed files with 39 additions and 3 deletions

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 className="videoElementText">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>
)
}