RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-09 10:34:17 +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

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

@ -1,79 +1,50 @@
import React from "react"
import HLS from "hls.js"
import Plyr from "plyr"
import "plyr-react/dist/plyr.css"
import "./index.less"
const VideoPlayer = (props) => {
const videoRef = React.createRef()
const videoRef = React.createRef()
const [initializing, setInitializing] = React.useState(true)
const [player, setPlayer] = React.useState(null)
const [hls, setHls] = React.useState(null)
const [initializing, setInitializing] = React.useState(true)
const [hls, setHls] = React.useState(null)
React.useEffect(() => {
setInitializing(true)
React.useEffect(() => {
setInitializing(true)
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 },
]
}
})
const hlsInstance = new HLS()
setHls(hlsInstance)
setPlayer(plyrInstance)
setHls(hlsInstance)
hlsInstance.attachMedia(videoRef.current)
hlsInstance.loadSource(props.src)
hlsInstance.loadSource(props.src)
hlsInstance.attachMedia(videoRef.current)
hlsInstance.on(HLS.Events.MANIFEST_PARSED, (event, data) => {
console.log(event, data)
hlsInstance.on(HLS.Events.MANIFEST_PARSED, (event, data) => {
console.log(event, data)
})
plyrInstance.set
})
setInitializing(false)
setInitializing(false)
return () => {
hlsInstance.destroy()
}
}, [])
return () => {
hlsInstance.destroy()
}
}, [])
React.useEffect(() => {
if (hls) {
hls.loadSource(props.src)
}
}, [props.src])
React.useEffect(() => {
if (hls) {
hls.loadSource(props.src)
}
}, [props.src])
return <div className="video-player">
<video
ref={videoRef}
className="video-player-component"
controls={props.controls}
/>
</div>
return (
<div className="video-player">
<video
ref={videoRef}
className="video-player-component"
controls={props.controls}
/>
</div>
)
}
export default VideoPlayer
export default VideoPlayer