RageStudio/comty
1
0
Fork 0
mirror of https://github.com/ragestudio/comty.git synced 2025-06-11 03:24:16 +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, isEnded: false,
loading: true, loading: true,
cinemaMode: false,
streamSources: null, streamSources: null,
streamInfo: null, streamInfo: null,
@ -50,7 +51,7 @@ export default class StreamViewer extends React.Component {
return false return false
} }
this.toogleLoading(true) this.toggleLoading(true)
const decoderInstance = mpegts.createPlayer({ const decoderInstance = mpegts.createPlayer({
type: "flv", type: "flv",
@ -66,7 +67,7 @@ export default class StreamViewer extends React.Component {
await decoderInstance.play() await decoderInstance.play()
this.toogleLoading(false) this.toggleLoading(false)
return decoderInstance return decoderInstance
}, },
@ -165,11 +166,7 @@ export default class StreamViewer extends React.Component {
}) })
} }
componentDidMount = async () => { attachPlayer = () => {
this.enterPlayerAnimation()
const requestedUsername = this.props.match.params.key
const player = new Plyr("#player", { const player = new Plyr("#player", {
clickToPlay: false, clickToPlay: false,
autoplay: true, autoplay: true,
@ -178,10 +175,32 @@ export default class StreamViewer extends React.Component {
...this.state.plyrOptions, ...this.state.plyrOptions,
}) })
await this.setState({ // insert a button to enter to cinema mode
requestedUsername, 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, player,
}) })
}
componentDidMount = async () => {
this.enterPlayerAnimation()
const requestedUsername = this.props.match.params.key
await this.setState({
requestedUsername,
})
this.attachPlayer()
// get stream info // get stream info
this.loadStreamInfo(requestedUsername) this.loadStreamInfo(requestedUsername)
@ -197,6 +216,8 @@ export default class StreamViewer extends React.Component {
await this.loadDecoder("flv", this.state.streamSources.sources.flv) 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 // set a interval to update the stream info
this.streamInfoInterval = setInterval(() => { this.streamInfoInterval = setInterval(() => {
this.loadStreamSources(requestedUsername) this.loadStreamSources(requestedUsername)
@ -264,10 +285,20 @@ export default class StreamViewer extends React.Component {
return decoderInstance return decoderInstance
} }
toogleLoading = (to) => { toggleLoading = (to) => {
this.setState({ loading: to ?? !this.state.loading }) 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() { render() {
return <div className="livestream"> return <div className="livestream">
<div className="livestream_player"> <div className="livestream_player">