mirror of
https://github.com/movie-web/movie-web.git
synced 2024-12-25 07:31:50 +01:00
feat(video): video placeholder
This commit is contained in:
parent
bf850bd7e8
commit
1df4db723b
@ -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 />
|
||||||
|
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