Move volume into Redux

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 };
+}

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 <h1>Loading...</h1>;

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;
+}

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;

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() {

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;
   }

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 };