diff --git a/modern/src/Actions.ts b/modern/src/Actions.ts index c8cd337f..a5178dff 100644 --- a/modern/src/Actions.ts +++ b/modern/src/Actions.ts @@ -1,4 +1,4 @@ -import { MakiTree, ModernAction } from "./types"; +import { MakiTree, ModernAction, ModernStore } from "./types"; import JSZip from "jszip"; import * as Utils from "./utils"; import initialize from "./initialize"; @@ -22,7 +22,7 @@ export function setMakiTree(makiTree: MakiTree): ModernAction { return { type: "SET_MAKI_TREE", makiTree }; } -export function gotSkinUrl(skinUrl: string) { +export function gotSkinUrl(skinUrl: string, store: ModernStore) { return async dispatch => { const makiTree = await getMakiTreeFromUrl(skinUrl); // Execute scripts @@ -42,7 +42,7 @@ export function gotSkinUrl(skinUrl: string) { "WinampAbstractionLayer", "WasabiXML", ]); - const system = new System(scriptGroup); + const system = new System(scriptGroup, store); run({ runtime, data: node.js_annotations.script, @@ -60,3 +60,7 @@ export function gotSkinUrl(skinUrl: string) { dispatch(setMakiTree(makiTree)); }; } + +export function setVolume(volume: number) { + return { type: "SET_VOLUME", volume }; +} diff --git a/modern/src/App.js b/modern/src/App.js index 0eb0af70..4892cdd5 100644 --- a/modern/src/App.js +++ b/modern/src/App.js @@ -5,7 +5,7 @@ import * as Actions from "./Actions"; import * as Selectors from "./Selectors"; // import simpleSkin from "../skins/simple.wal"; import cornerSkin from "../skins/CornerAmp_Redux.wal"; -import { useDispatch, useSelector } from "react-redux"; +import { useDispatch, useSelector, useStore } from "react-redux"; function useJsUpdates(node) { const [ignored, forceUpdate] = useReducer(x => x + 1, 0); @@ -323,9 +323,10 @@ function XmlNode({ node }) { function App() { const dispatch = useDispatch(); + const store = useStore(); const root = useSelector(Selectors.getMakiTree); React.useEffect(() => { - dispatch(Actions.gotSkinUrl(cornerSkin)); + dispatch(Actions.gotSkinUrl(cornerSkin, store)); }, []); if (root == null) { return

Loading...

; diff --git a/modern/src/Selectors.ts b/modern/src/Selectors.ts index 48355c5c..22df1476 100644 --- a/modern/src/Selectors.ts +++ b/modern/src/Selectors.ts @@ -3,3 +3,7 @@ import { ModernAppState, MakiTree } from "./types"; export function getMakiTree(state: ModernAppState): MakiTree | null { return state.makiTree; } + +export function getVolume(state: ModernAppState): number { + return state.volume; +} diff --git a/modern/src/runtime/MakiObject.js b/modern/src/runtime/MakiObject.js index fd19ec5c..4975e181 100644 --- a/modern/src/runtime/MakiObject.js +++ b/modern/src/runtime/MakiObject.js @@ -2,7 +2,8 @@ import Emitter from "../Emitter"; import { findElementById, findGroupDefById } from "../utils"; class MakiObject { - constructor(node, parent, annotations = {}) { + constructor(node, parent, annotations = {}, store) { + this._store = store; if (node) { this.attributes = node.attributes || {}; this.name = node.name; diff --git a/modern/src/runtime/System.js b/modern/src/runtime/System.js index d400b3e3..adf81554 100644 --- a/modern/src/runtime/System.js +++ b/modern/src/runtime/System.js @@ -1,19 +1,18 @@ import Group from "./Group"; import MakiObject from "./MakiObject"; import { findDescendantByTypeAndId, unimplementedWarning } from "../utils"; +import * as Actions from "../Actions"; +import * as Selectors from "../Selectors"; class System extends MakiObject { - constructor(scriptGroup = new Group()) { - super(null, null); + constructor(scriptGroup = new Group(), store) { + super(null, null, {}, store); this.scriptGroup = scriptGroup; this.root = scriptGroup; while (this.root.parent) { this.root = this.root.parent; } - - // These properties will probably live somewhere else eventually - this.volume = 127; } /** @@ -81,11 +80,11 @@ class System extends MakiObject { // Seems like volume is 0-255 getvolume() { - return this.volume; + return Selectors.getVolume(this._store.getState()); } - setvolume(vol) { - this.volume = vol; + setvolume(volume) { + return this._store.dispatch(Actions.setVolume(volume)); } getplayitemlength() { diff --git a/modern/src/store.ts b/modern/src/store.ts index 959d4329..34772e38 100644 --- a/modern/src/store.ts +++ b/modern/src/store.ts @@ -2,7 +2,7 @@ import { ModernAppState, ModernAction } from "./types"; import { createStore, applyMiddleware } from "redux"; import thunk from "redux-thunk"; -const defaultState = { makiTree: null }; +const defaultState = { makiTree: null, volume: 127 }; function reducer( state: ModernAppState = defaultState, @@ -11,6 +11,9 @@ function reducer( switch (action.type) { case "SET_MAKI_TREE": return { ...state, makiTree: action.makiTree }; + case "SET_VOLUME": + return { ...state, volume: action.volume }; + default: return state; } diff --git a/modern/src/types.ts b/modern/src/types.ts index cd3159b4..3331bef5 100644 --- a/modern/src/types.ts +++ b/modern/src/types.ts @@ -3,5 +3,16 @@ export type MakiTree = any; export type ModernAppState = { makiTree: MakiTree | null; + volume: number; +}; +export type ModernAction = + | { type: "SET_MAKI_TREE"; makiTree: MakiTree } + | { type: "SET_VOLUME"; volume: number }; + +export type ModernDispatch = (action: ModernAction) => void; + +export type ModernStore = { + getState(): ModernAppState; + subscribe(cb: () => void): () => void; + dispatch: ModernDispatch; }; -export type ModernAction = { type: "SET_MAKI_TREE"; makiTree: MakiTree };