use WithPlayerContext

packages/app/src/components/Player/BackgroundMediaPlayer/index.jsx

@@ -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,
+                backgroundColor: this.context.coverColorAnalysis?.rgba,
-                "--averageColorValues": this.state.thumbnailAnalysis?.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.context.playbackStatus === "stopped" ? "Nothing is playing" : <>
-                                        {`${this.state.currentPlaying?.title} - ${this.state.currentPlaying?.artist}` ?? "Untitled"}
+                                        {`${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.context.playbackStatus === "stopped" ? "Nothing is playing" : <>
-                                    {this.state.currentPlaying?.title ?? "Untitled"}
+                                    {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}
                 />
 

packages/app/src/components/Player/MediaPlayer/index.jsx

@@ -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,
+        liked: 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)
-        })
     }
 
     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
+                                    this.context.currentManifest?.title
-                                        ? currentPlaying?.title
+                                        ? this.context.currentManifest?.title
-                                        : (loading ? "Loading..." : (currentPlaying?.title ?? "Untitled"))
+                                        : (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}
+                    syncModeLocked={this.context.syncModeLocked}
-                    syncMode={this.state.syncMode}
+                    syncMode={this.context.syncMode}
-                    playbackStatus={playbackStatus}
+                    playbackStatus={this.context.playbackStatus}
-                    audioMuted={audioMuted}
+                    audioMuted={this.context.audioMuted}
-                    audioVolume={audioVolume}
+                    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"}
+                    stopped={this.context.playbackStatus === "stopped"}
-                    playing={playbackStatus === "playing"}
+                    playing={this.context.playbackStatus === "playing"}
-                    streamMode={this.state.streamMode}
+                    streamMode={this.context.streamMode}
-                    disabled={this.state.syncModeLocked}
+                    disabled={this.context.syncModeLocked}
                 />
             </div>
         </div>