RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 18:44:16 +00:00
Code Issues Packages Projects Releases Wiki Activity

replace plyr

Browse Source
This commit is contained in:
SrGooglo 2025-02-11 16:15:09 +00:00
parent afa989b627
commit 7ae3c19e7d
1 changed files with 32 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

91
packages/app/src/components/VideoPlayer/index.jsx
View File

@ -1,79 +1,50 @@
import React from "react" import React from "react"
import HLS from "hls.js" import HLS from "hls.js"
import Plyr from "plyr"
import "plyr-react/dist/plyr.css"
import "./index.less" import "./index.less"
const VideoPlayer = (props) => { const VideoPlayer = (props) => {
const videoRef = React.createRef() const videoRef = React.createRef()
const [initializing, setInitializing] = React.useState(true) const [initializing, setInitializing] = React.useState(true)
const [player, setPlayer] = React.useState(null) const [hls, setHls] = React.useState(null)
const [hls, setHls] = React.useState(null)
React.useEffect(() => { React.useEffect(() => {
setInitializing(true) setInitializing(true)
const hlsInstance = new HLS() const hlsInstance = new HLS()
const plyrInstance = new Plyr(videoRef.current, {
controls: props.controls ?? [
"current-time",
"mute",
"volume",
"captions",
"settings",
"pip",
"airplay",
"fullscreen"
],
settings: ["quality", "speed"],
quality: {
default: 1080,
options: [
{ label: "Auto", value: "auto" },
{ label: "1080p", value: 1080 },
{ label: "720p", value: 720 },
{ label: "480p", value: 480 },
{ label: "360p", value: 360 },
{ label: "240p", value: 240 },
]
}
})
setHls(hlsInstance) setHls(hlsInstance)
setPlayer(plyrInstance)
hlsInstance.attachMedia(videoRef.current) hlsInstance.loadSource(props.src)
hlsInstance.loadSource(props.src) hlsInstance.attachMedia(videoRef.current)
hlsInstance.on(HLS.Events.MANIFEST_PARSED, (event, data) => { hlsInstance.on(HLS.Events.MANIFEST_PARSED, (event, data) => {
console.log(event, data) console.log(event, data)
})
plyrInstance.set setInitializing(false)
})
setInitializing(false) return () => {
hlsInstance.destroy()
}
}, [])
return () => { React.useEffect(() => {
hlsInstance.destroy() if (hls) {
} hls.loadSource(props.src)
}, []) }
}, [props.src])
React.useEffect(() => { return (
if (hls) { <div className="video-player">
hls.loadSource(props.src) <video
} ref={videoRef}
}, [props.src]) className="video-player-component"
controls={props.controls}
return <div className="video-player"> />
<video </div>
ref={videoRef} )
className="video-player-component"
controls={props.controls}
/>
</div>
} }
export default VideoPlayer export default VideoPlayer