RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-10 02:54:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

added cinemamode

Browse Source
This commit is contained in:
SrGooglo 2022-12-14 19:53:07 +00:00
parent 38fc1db1a8
commit 2d6b61812a
1 changed files with 41 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

51
packages/app/src/pages/live/[key].jsx
View File

@ -24,6 +24,7 @@ export default class StreamViewer extends React.Component {
isEnded: false,
loading: true,
cinemaMode: false,
streamSources: null,
streamInfo: null,
@ -50,7 +51,7 @@ export default class StreamViewer extends React.Component {
return false
}
this.toogleLoading(true)
this.toggleLoading(true)
const decoderInstance = mpegts.createPlayer({
type: "flv",
@ -66,7 +67,7 @@ export default class StreamViewer extends React.Component {
await decoderInstance.play()
this.toogleLoading(false)
this.toggleLoading(false)
return decoderInstance
},
@ -165,11 +166,7 @@ export default class StreamViewer extends React.Component {
})
}
componentDidMount = async () => {
this.enterPlayerAnimation()
const requestedUsername = this.props.match.params.key
attachPlayer = () => {
const player = new Plyr("#player", {
clickToPlay: false,
autoplay: true,
@ -178,10 +175,32 @@ export default class StreamViewer extends React.Component {
...this.state.plyrOptions,
})
await this.setState({
requestedUsername,
// insert a button to enter to cinema mode
player.elements.buttons.fullscreen.insertAdjacentHTML("beforeBegin", `
<button class="plyr__controls__item plyr__control" type="button" data-plyr="cinema">
<span class="label">Cinema mode</span>
</button>
`)
player.elements.buttons.cinema = player.elements.container.querySelector("[data-plyr='cinema']")
player.elements.buttons.cinema.addEventListener("click", () => this.toggleCinemaMode())
this.setState({
player,
})
}
componentDidMount = async () => {
this.enterPlayerAnimation()
const requestedUsername = this.props.match.params.key
await this.setState({
requestedUsername,
})
this.attachPlayer()
// get stream info
this.loadStreamInfo(requestedUsername)
@ -197,6 +216,8 @@ export default class StreamViewer extends React.Component {
await this.loadDecoder("flv", this.state.streamSources.sources.flv)
}
// TODO: Watch ws to get livestream:started event and load the decoder if it's not loaded
// set a interval to update the stream info
this.streamInfoInterval = setInterval(() => {
this.loadStreamSources(requestedUsername)
@ -264,10 +285,20 @@ export default class StreamViewer extends React.Component {
return decoderInstance
}
toogleLoading = (to) => {
toggleLoading = (to) => {
this.setState({ loading: to ?? !this.state.loading })
}
toggleCinemaMode = (to) => {
if (typeof to === "undefined") {
to = !this.state.cinemaMode
}
app.SidebarController.toggleVisibility(!to)
this.setState({ cinemaMode: to })
}
render() {
return <div className="livestream">
<div className="livestream_player">