mirror of
https://github.com/ragestudio/comty.git
synced 2025-06-10 02:54:15 +00:00
use WithPlayerContext
This commit is contained in:
parent
27147f8d64
commit
01b6fbd71b
@ -1,9 +1,12 @@
|
||||
import React from "react"
|
||||
import * as antd from "antd"
|
||||
import classnames from "classnames"
|
||||
import { Icons } from "components/Icons"
|
||||
import Marquee from "react-fast-marquee"
|
||||
|
||||
import { Icons } from "components/Icons"
|
||||
|
||||
import { WithPlayerContext, Context } from "contexts/WithPlayerContext"
|
||||
|
||||
import "./index.less"
|
||||
|
||||
function RGBStringToValues(rgbString) {
|
||||
@ -16,30 +19,22 @@ function RGBStringToValues(rgbString) {
|
||||
return [rgb[0], rgb[1], rgb[2]]
|
||||
}
|
||||
|
||||
export default class BackgroundMediaPlayer extends React.Component {
|
||||
export default (props) => {
|
||||
return <WithPlayerContext>
|
||||
<BackgroundMediaPlayer
|
||||
{...props}
|
||||
/>
|
||||
</WithPlayerContext>
|
||||
}
|
||||
|
||||
export class BackgroundMediaPlayer extends React.Component {
|
||||
static contextType = Context
|
||||
|
||||
state = {
|
||||
thumbnailAnalysis: app.cores.player.getState("coverColorAnalysis"),
|
||||
currentPlaying: app.cores.player.getState("currentAudioManifest"),
|
||||
plabackState: app.cores.player.getState("playbackStatus") ?? "stopped",
|
||||
expanded: false,
|
||||
}
|
||||
|
||||
events = {
|
||||
"player.coverColorAnalysis.update": (data) => {
|
||||
this.setState({
|
||||
thumbnailAnalysis: data
|
||||
})
|
||||
},
|
||||
"player.current.update": (data) => {
|
||||
this.setState({
|
||||
currentPlaying: data
|
||||
})
|
||||
},
|
||||
"player.status.update": (data) => {
|
||||
this.setState({
|
||||
plabackState: data
|
||||
})
|
||||
},
|
||||
"sidebar.expanded": (to) => {
|
||||
if (!to) {
|
||||
this.toogleExpand(false)
|
||||
@ -78,19 +73,19 @@ export default class BackgroundMediaPlayer extends React.Component {
|
||||
className={classnames(
|
||||
"background_media_player",
|
||||
{
|
||||
["lightBackground"]: this.state.thumbnailAnalysis?.isLight,
|
||||
["lightBackground"]: this.context.coverColorAnalysis?.isLight,
|
||||
["expanded"]: this.state.expanded,
|
||||
}
|
||||
)}
|
||||
style={{
|
||||
backgroundColor: this.state.thumbnailAnalysis?.rgba,
|
||||
"--averageColorValues": this.state.thumbnailAnalysis?.rgba,
|
||||
backgroundColor: this.context.coverColorAnalysis?.rgba,
|
||||
"--averageColorValues": this.context.coverColorAnalysis?.rgba,
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className="background_media_player__background"
|
||||
style={{
|
||||
backgroundImage: `url(${this.state.currentPlaying?.thumbnail})`
|
||||
backgroundImage: `url(${this.context.currentManifest?.thumbnail})`
|
||||
}}
|
||||
/>
|
||||
|
||||
@ -103,12 +98,12 @@ export default class BackgroundMediaPlayer extends React.Component {
|
||||
className={classnames(
|
||||
"background_media_player__icon",
|
||||
{
|
||||
["bounce"]: this.state.plabackState === "playing",
|
||||
["bounce"]: this.context.playbackStatus === "playing",
|
||||
}
|
||||
)}
|
||||
>
|
||||
{
|
||||
this.state.plabackState === "playing" ? <Icons.MdMusicNote /> : <Icons.MdPause />
|
||||
this.context.playbackStatus === "playing" ? <Icons.MdMusicNote /> : <Icons.MdPause />
|
||||
}
|
||||
</div>
|
||||
|
||||
@ -120,12 +115,12 @@ export default class BackgroundMediaPlayer extends React.Component {
|
||||
!this.state.expanded && <Marquee
|
||||
gradientColor={RGBStringToValues(this.state.thumbnailAnalysis?.rgb)}
|
||||
gradientWidth={20}
|
||||
play={this.state.plabackState !== "stopped"}
|
||||
play={this.context.playbackStatus !== "stopped"}
|
||||
>
|
||||
<h4>
|
||||
{
|
||||
this.state.plabackState === "stopped" ? "Nothing is playing" : <>
|
||||
{`${this.state.currentPlaying?.title} - ${this.state.currentPlaying?.artist}` ?? "Untitled"}
|
||||
this.context.playbackStatus === "stopped" ? "Nothing is playing" : <>
|
||||
{`${this.context.currentManifest?.title} - ${this.context.currentManifest?.artist}` ?? "Untitled"}
|
||||
</>
|
||||
}
|
||||
</h4>
|
||||
@ -136,8 +131,8 @@ export default class BackgroundMediaPlayer extends React.Component {
|
||||
<Icons.MdAlbum />
|
||||
|
||||
{
|
||||
this.state.plabackState === "stopped" ? "Nothing is playing" : <>
|
||||
{this.state.currentPlaying?.title ?? "Untitled"}
|
||||
this.context.playbackStatus === "stopped" ? "Nothing is playing" : <>
|
||||
{this.context.currentManifest?.title ?? "Untitled"}
|
||||
</>
|
||||
}
|
||||
</h4>
|
||||
@ -170,7 +165,7 @@ export default class BackgroundMediaPlayer extends React.Component {
|
||||
size="small"
|
||||
type="ghost"
|
||||
shape="circle"
|
||||
icon={this.state.plabackState === "playing" ? <Icons.MdPause /> : <Icons.MdPlayArrow />}
|
||||
icon={this.context.playbackStatus === "playing" ? <Icons.MdPause /> : <Icons.MdPlayArrow />}
|
||||
onClick={app.cores.player.playback.toogle}
|
||||
/>
|
||||
|
||||
|
||||
@ -7,69 +7,24 @@ import { Icons } from "components/Icons"
|
||||
|
||||
import SeekBar from "components/Player/SeekBar"
|
||||
import Controls from "components/Player/Controls"
|
||||
import { WithPlayerContext, Context } from "contexts/WithPlayerContext"
|
||||
|
||||
import "./index.less"
|
||||
|
||||
export default (props) => {
|
||||
return <WithPlayerContext>
|
||||
<AudioPlayer
|
||||
{...props}
|
||||
/>
|
||||
</WithPlayerContext>
|
||||
}
|
||||
|
||||
// TODO: Queue view
|
||||
export default class AudioPlayer extends React.Component {
|
||||
export class AudioPlayer extends React.Component {
|
||||
static contextType = Context
|
||||
|
||||
state = {
|
||||
loading: app.cores.player.getState("loading") ?? false,
|
||||
currentPlaying: app.cores.player.getState("currentAudioManifest"),
|
||||
playbackStatus: app.cores.player.getState("playbackStatus") ?? "stopped",
|
||||
audioMuted: app.cores.player.getState("audioMuted") ?? false,
|
||||
audioVolume: app.cores.player.getState("audioVolume") ?? 0.3,
|
||||
bpm: app.cores.player.getState("trackBPM") ?? 0,
|
||||
showControls: false,
|
||||
minimized: false,
|
||||
streamMode: false,
|
||||
|
||||
syncModeLocked: app.cores.player.getState("syncModeLocked"),
|
||||
syncMode: app.cores.player.getState("syncMode"),
|
||||
}
|
||||
|
||||
events = {
|
||||
"player.syncModeLocked.update": (to) => {
|
||||
this.setState({ syncModeLocked: to })
|
||||
},
|
||||
"player.syncMode.update": (to) => {
|
||||
this.setState({ syncMode: to })
|
||||
},
|
||||
"player.livestream.update": (data) => {
|
||||
this.setState({ streamMode: data })
|
||||
},
|
||||
"player.bpm.update": (data) => {
|
||||
this.setState({ bpm: data })
|
||||
},
|
||||
"player.loading.update": (data) => {
|
||||
this.setState({ loading: data })
|
||||
},
|
||||
"player.status.update": (data) => {
|
||||
this.setState({ playbackStatus: data })
|
||||
},
|
||||
"player.current.update": (data) => {
|
||||
this.setState({ currentPlaying: data })
|
||||
},
|
||||
"player.mute.update": (data) => {
|
||||
this.setState({ audioMuted: data })
|
||||
},
|
||||
"player.volume.update": (data) => {
|
||||
this.setState({ audioVolume: data })
|
||||
},
|
||||
"player.minimized.update": (minimized) => {
|
||||
this.setState({ minimized })
|
||||
}
|
||||
}
|
||||
|
||||
componentDidMount = async () => {
|
||||
Object.entries(this.events).forEach(([event, callback]) => {
|
||||
app.eventBus.on(event, callback)
|
||||
})
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
Object.entries(this.events).forEach(([event, callback]) => {
|
||||
app.eventBus.off(event, callback)
|
||||
})
|
||||
liked: false,
|
||||
}
|
||||
|
||||
onMouse = (event) => {
|
||||
@ -131,20 +86,12 @@ export default class AudioPlayer extends React.Component {
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
loading,
|
||||
currentPlaying,
|
||||
playbackStatus,
|
||||
audioMuted,
|
||||
audioVolume,
|
||||
} = this.state
|
||||
|
||||
return <div
|
||||
className={classnames(
|
||||
"embbededMediaPlayerWrapper",
|
||||
{
|
||||
["hovering"]: this.state.showControls,
|
||||
["minimized"]: this.state.minimized,
|
||||
["minimized"]: this.context.minimized,
|
||||
}
|
||||
)}
|
||||
onMouseEnter={this.onMouse}
|
||||
@ -158,7 +105,7 @@ export default class AudioPlayer extends React.Component {
|
||||
/>
|
||||
|
||||
{
|
||||
!this.state.syncModeLocked && !this.state.syncMode && <antd.Button
|
||||
!this.context.syncModeLocked && !this.context.syncMode && <antd.Button
|
||||
icon={<Icons.MdShare />}
|
||||
onClick={this.inviteSync}
|
||||
shape="circle"
|
||||
@ -182,7 +129,7 @@ export default class AudioPlayer extends React.Component {
|
||||
<div
|
||||
className="cover"
|
||||
style={{
|
||||
backgroundImage: `url(${(currentPlaying?.thumbnail) ?? "/assets/no_song.png"})`,
|
||||
backgroundImage: `url(${(this.context.currentManifest?.thumbnail) ?? "/assets/no_song.png"})`,
|
||||
}}
|
||||
/>
|
||||
<div className="header">
|
||||
@ -190,17 +137,17 @@ export default class AudioPlayer extends React.Component {
|
||||
<div className="title">
|
||||
<h2>
|
||||
{
|
||||
currentPlaying?.title
|
||||
? currentPlaying?.title
|
||||
: (loading ? "Loading..." : (currentPlaying?.title ?? "Untitled"))
|
||||
this.context.currentManifest?.title
|
||||
? this.context.currentManifest?.title
|
||||
: (this.context.loading ? "Loading..." : (this.context.currentPlaying?.title ?? "Untitled"))
|
||||
}
|
||||
</h2>
|
||||
</div>
|
||||
<div className="subTitle">
|
||||
{
|
||||
currentPlaying?.artist && <div className="artist">
|
||||
this.context.currentManifest?.artist && <div className="artist">
|
||||
<h3>
|
||||
{currentPlaying?.artist ?? "Unknown"}
|
||||
{this.context.currentManifest?.artist ?? "Unknown"}
|
||||
</h3>
|
||||
</div>
|
||||
}
|
||||
@ -214,11 +161,11 @@ export default class AudioPlayer extends React.Component {
|
||||
</div>
|
||||
|
||||
<Controls
|
||||
syncModeLocked={this.state.syncModeLocked}
|
||||
syncMode={this.state.syncMode}
|
||||
playbackStatus={playbackStatus}
|
||||
audioMuted={audioMuted}
|
||||
audioVolume={audioVolume}
|
||||
syncModeLocked={this.context.syncModeLocked}
|
||||
syncMode={this.context.syncMode}
|
||||
playbackStatus={this.context.playbackStatus}
|
||||
audioMuted={this.context.audioMuted}
|
||||
audioVolume={this.context.audioVolume}
|
||||
onVolumeUpdate={this.updateVolume}
|
||||
onMuteUpdate={this.toogleMute}
|
||||
controls={{
|
||||
@ -229,10 +176,10 @@ export default class AudioPlayer extends React.Component {
|
||||
/>
|
||||
|
||||
<SeekBar
|
||||
stopped={playbackStatus === "stopped"}
|
||||
playing={playbackStatus === "playing"}
|
||||
streamMode={this.state.streamMode}
|
||||
disabled={this.state.syncModeLocked}
|
||||
stopped={this.context.playbackStatus === "stopped"}
|
||||
playing={this.context.playbackStatus === "playing"}
|
||||
streamMode={this.context.streamMode}
|
||||
disabled={this.context.syncModeLocked}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user