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

added plyr options

Browse Source
This commit is contained in:
srgooglo 2022-05-13 14:55:48 +02:00
parent 12f2b9be67
commit 0a3eb7eba0
1 changed files with 30 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
packages/app/src/pages/streams/viewer/index.jsx
View File

@ -25,7 +25,7 @@ export default class StreamViewer extends React.Component {
streamSource: null,
loadedProtocol: "flv",
protocolInstance: null,
defaultOptions: undefined,
plyrOptions: {},
}
videoPlayerRef = React.createRef()
@ -43,6 +43,7 @@ export default class StreamViewer extends React.Component {
const player = new Plyr("#player", {
autoplay: true,
controls: ["play", "mute", "volume", "fullscreen", "options", "settings"],
...this.state.plyrOptions,
})
await this.setState({
@ -158,12 +159,39 @@ export default class StreamViewer extends React.Component {
loadWithProtocol = {
hls: () => {
const source = `${streamsSource}/stream/hls/${this.state.streamKey}`
const source = `${streamsSource}/media/${this.state.streamKey}/index.m3u8`
const hls = new Hls()
hls.loadSource(source)
hls.attachMedia(this.videoPlayerRef.current)
hls.on(Hls.Events.MANIFEST_PARSED, () => {
const levels = hls.levels
const quality = {
default: levels[levels.length - 1].height,
options: levels.map((level) => level.height),
forced: true,
onChange: (newQuality) => {
console.log('changes', newQuality)
levels.forEach((level, levelIndex) => {
if (level.height === newQuality) {
hls.currentLevel = levelIndex
}
})
},
}
this.setState({
plyrOptions: {
quality,
...this.state.plyrOptions
}
})
})
this.setState({ protocolInstance: hls, loadedProtocol: "hls" })
},
flv: () => {