This commit is contained in:
Nicky Dev 2023-10-04 01:27:08 +07:00
parent 1c4c88582b
commit b56ca77ce8

View File

@ -1,5 +1,5 @@
import { useMemo, useState } from "react"; import { useMemo, useState } from "react";
import ReactPlayer from 'react-player/lazy' import ReactPlayer from 'react-player'
export enum VideoStatus { export enum VideoStatus {
Online = "online", Online = "online",
@ -14,44 +14,7 @@ export interface VideoPlayerProps {
export function LiveVideoPlayer(props: VideoPlayerProps) { export function LiveVideoPlayer(props: VideoPlayerProps) {
const streamCached = useMemo(() => props.stream, [props.stream]); const streamCached = useMemo(() => props.stream, [props.stream]);
const [status, setStatus] = useState<VideoStatus>(); const [status, setStatus] = useState<VideoStatus>(VideoStatus.Online);
// const [src, setSrc] = useState<string>();
// useEffect(() => {
// if (streamCached && video.current) {
// if (Hls.isSupported()) {
// try {
// const hls = new Hls();
// hls.loadSource(streamCached);
// hls.attachMedia(video.current);
// hls.on(Hls.Events.ERROR, (event, data) => {
// console.debug(event, data);
// const errorType = data.type;
// if (errorType === Hls.ErrorTypes.NETWORK_ERROR && data.fatal) {
// hls.stopLoad();
// hls.detachMedia();
// setStatus(VideoStatus.Offline);
// }
// });
// hls.on(Hls.Events.MANIFEST_PARSED, () => {
// setStatus(VideoStatus.Online);
// });
// hls.on(Hls.Events.LEVEL_SWITCHING, (e, l) => {
// console.debug("HLS Level Switch", l);
// });
// return () => hls.destroy();
// } catch (e) {
// console.error(e);
// setStatus(VideoStatus.Offline);
// }
// } else {
// setSrc(streamCached);
// setStatus(VideoStatus.Online);
// video.current.muted = true;
// video.current.load();
// }
// }
// }, [video, streamCached, props.status]);
return ( return (
<div className="video-overlay"> <div className="video-overlay">
@ -67,13 +30,17 @@ export function LiveVideoPlayer(props: VideoPlayerProps) {
height='100%' height='100%'
controls={true} controls={true}
playsinline={true} playsinline={true}
light={<img src={props.poster} alt='Thumbnail' style={{maxHeight:"100%", maxWidth:'100%'}} />} light={<img src={props.poster}
onProgress={(...args)=>{ alt='Thumbnail'
console.log('onProgress:args',args) style={{
maxHeight:"100%",
maxWidth:'100%'
}}
/>}
onProgress={()=>{
setStatus(VideoStatus.Online); setStatus(VideoStatus.Online);
}} }}
onError={(...args)=>{ onError={()=>{
console.log('onError:args',args)
setStatus(VideoStatus.Offline); setStatus(VideoStatus.Offline);
}} }}
/> />