mirror of
https://github.com/movie-web/movie-web.git
synced 2024-11-11 00:05:09 +01:00
feat(video): video placeholder
This commit is contained in:
parent
bf850bd7e8
commit
1df4db723b
@ -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 />
|
||||
|
23
src/components/VideoPlaceholder.css
Normal file
23
src/components/VideoPlaceholder.css
Normal 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);
|
||||
}
|
12
src/components/VideoPlaceholder.js
Normal file
12
src/components/VideoPlaceholder.js
Normal 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>
|
||||
)
|
||||
}
|
Loading…
Reference in New Issue
Block a user