added WithPlayerContext context

packages/app/.config.js

@@ -13,6 +13,7 @@ const aliases = {
     pages: path.join(__dirname, "src/pages"),
     theme: path.join(__dirname, "src/theme"),
     components: path.join(__dirname, "src/components"),
+    contexts: path.join(__dirname, "src/contexts"),
     utils: path.join(__dirname, "src/utils"),
     layouts: path.join(__dirname, "src/layouts"),
     hooks: path.join(__dirname, "src/hooks"),

packages/app/src/contexts/WithPlayerContext/index.jsx

@@ -0,0 +1,89 @@
+import React from "react"
+
+export const DefaultContextValues = {
+    currentManifest: null,
+    playbackStatus: null,
+    coverColorAnalysis: null,
+    loading: false,
+    audioMuted: false,
+    audioVolume: 1,
+    minimized: false,
+    streamMode: false,
+    bpm: 0,
+    syncMode: false,
+    syncModeLocked: false,
+}
+
+export const Context = React.createContext(DefaultContextValues)
+
+export class WithPlayerContext extends React.Component {
+    state = {
+        currentManifest: app.cores.player.getState("currentAudioManifest"),
+        playbackStatus: app.cores.player.getState("playbackStatus") ?? "stopped",
+        coverColorAnalysis: app.cores.player.getState("coverColorAnalysis"),
+        loading: app.cores.player.getState("loading") ?? false,
+        audioMuted: app.cores.player.getState("audioMuted") ?? false,
+        audioVolume: app.cores.player.getState("audioVolume") ?? 0.3,
+        minimized: app.cores.player.getState("minimized") ?? false,
+        streamMode: app.cores.player.getState("livestream") ?? false,
+        bpm: app.cores.player.getState("trackBPM") ?? 0,
+        syncMode: app.cores.player.getState("syncModeLocked"),
+        syncModeLocked: 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({ currentManifest: data })
+        },
+        "player.mute.update": (data) => {
+            this.setState({ audioMuted: data })
+        },
+        "player.volume.update": (data) => {
+            this.setState({ audioVolume: data })
+        },
+        "player.minimized.update": (minimized) => {
+            this.setState({ minimized })
+        },
+        "player.coverColorAnalysis.update": (data) => {
+            this.setState({ coverColorAnalysis: data })
+        }
+    }
+
+    componentDidMount() {
+        for (const [event, handler] of Object.entries(this.events)) {
+            app.eventBus.on(event, handler)
+        }
+    }
+
+    componentWillUnmount() {
+        for (const [event, handler] of Object.entries(this.events)) {
+            app.eventBus.off(event, handler)
+        }
+    }
+
+    render() {
+        return <Context.Provider value={this.state}>
+            {this.props.children}
+        </Context.Provider>
+    }
+}
+
+export default WithPlayerContext