1
0
Fork 0
mirror of https://github.com/sussy-code/smov.git synced 2024-12-22 14:57:40 +01:00
smov/src/components/VideoElement.js
2021-09-13 23:57:14 +05:30

63 lines
2.5 KiB
JavaScript

import React from 'react'
import Hls from 'hls.js'
import { VideoPlaceholder } from './VideoPlaceholder'
import './VideoElement.css'
// streamUrl: string
// loading: boolean
// setProgress: (event: NativeEvent) => void
// videoRef: useRef
// startTime: number
export function VideoElement({ streamUrl, loading, setProgress, videoRef, startTime, streamData }) {
const [error, setError] = React.useState(false);
function onLoad() {
if (startTime)
videoRef.current.currentTime = startTime;
}
React.useEffect(() => {
if (!streamUrl.endsWith('.mp4')) {
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>
if (!streamUrl.endsWith('.mp4')) {
return (
<video crossorigin="anonymous" className="videoElement" ref={videoRef} controls autoPlay onProgress={setProgress} onLoadedData={onLoad}>
{streamData.subtitles && streamData.subtitles.map((sub, index) => {return <track key={index} kind="captions" label={sub.language} src={`${process.env.REACT_APP_CORS_PROXY_URL}https://lookmovie.io${sub.file}` }></track>})}
</video>
)
} else {
return (
<video crossorigin="anonymous" className="videoElement" ref={videoRef} controls autoPlay onProgress={setProgress} onLoadedData={onLoad}>
{streamData.subtitles && streamData.subtitles.map((sub, index) => {return <track key={index} kind="captions" label={sub.language} src={`${process.env.REACT_APP_CORS_PROXY_URL}https://lookmovie.io${sub.file}` }></track>})}
<source src={streamUrl} type="video/mp4" />
</video>
)
}
}