mirror of https://github.com/sussy-code/smov.git
43 lines
1.3 KiB
JavaScript
43 lines
1.3 KiB
JavaScript
import React from 'react'
|
|
import Hls from 'hls.js'
|
|
import './VideoElement.css'
|
|
import { VideoPlaceholder } from './VideoPlaceholder'
|
|
|
|
// streamUrl: string
|
|
// loading: boolean
|
|
export function VideoElement({ streamUrl, loading }) {
|
|
const videoRef = React.useRef(null);
|
|
const [error, setError] = React.useState(false);
|
|
|
|
React.useEffect(() => {
|
|
setError(false)
|
|
if (!videoRef || !videoRef.current || !streamUrl || streamUrl.length === 0 || loading) return;
|
|
|
|
const hls = new Hls();
|
|
|
|
if (!Hls.isSupported() && videoRef.current.canPlayType('application/vnd.apple.mpegurl')) {
|
|
videoRef.current.src = streamUrl;
|
|
return;
|
|
} else if (!Hls.isSupported()) {
|
|
setError(true)
|
|
return;
|
|
}
|
|
|
|
hls.attachMedia(videoRef.current);
|
|
hls.loadSource(streamUrl);
|
|
}, [videoRef, streamUrl, loading])
|
|
|
|
if (error)
|
|
return (<VideoPlaceholder>Your browser is not supported</VideoPlaceholder>)
|
|
|
|
if (loading)
|
|
return <VideoPlaceholder>Loading episode...</VideoPlaceholder>
|
|
|
|
if (!streamUrl || streamUrl.length === 0)
|
|
return <VideoPlaceholder>No video selected</VideoPlaceholder>
|
|
|
|
return (
|
|
<video className="videoElement" ref={videoRef} controls autoPlay />
|
|
)
|
|
}
|