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

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

@ -1,8 +1,5 @@
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"
@ -10,48 +7,20 @@ 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)
@ -67,13 +36,15 @@ const VideoPlayer = (props) => {
} }
}, [props.src]) }, [props.src])
return <div className="video-player"> return (
<div className="video-player">
<video <video
ref={videoRef} ref={videoRef}
className="video-player-component" className="video-player-component"
controls={props.controls} controls={props.controls}
/> />
</div> </div>
)
} }
export default VideoPlayer export default VideoPlayer