Switch to react-redux for the music player

src/music/store/index.ts

@@ -0,0 +1,17 @@
+import { createStore, combineReducers } from "redux";
+
+import { MusicState } from "./music/types";
+import { musicStateReducer } from "./music/reducers";
+
+export interface State {
+  musicState: MusicState;
+}
+
+const rootReducer = combineReducers<State>({
+  musicState: musicStateReducer,
+});
+
+export const store = createStore(
+  rootReducer,
+  window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
+);

src/music/store/music/reducers.ts

@@ -0,0 +1,45 @@
+import { createReducer } from "redux-act";
+import update from "immutability-helper";
+
+import {
+  Title,
+  MusicState,
+  setTitle,
+  toggleMute,
+  togglePlay,
+  setSource,
+} from "./types";
+
+const defaultTitle: Title = {
+  name: "Untitled",
+  artist: "Unknown Artist",
+  album: "Unknown Album",
+  length: 0,
+};
+
+const initialState: MusicState = {
+  muted: false,
+  playing: false,
+  title: defaultTitle,
+  playTime: 0,
+};
+
+export const musicStateReducer = createReducer<MusicState>(
+  {
+    [setTitle]: (state: MusicState, title: Title): MusicState => {
+      return update(state, {
+        title: { $set: title },
+      });
+    },
+    [togglePlay]: (state: MusicState): MusicState => {
+      return update(state, { $toggle: ["playing"] });
+    },
+    [toggleMute]: (state: MusicState): MusicState => {
+      return update(state, { $toggle: ["muted"] });
+    },
+    [setSource]: (state: MusicState, source: string): MusicState => {
+      return update(state, { source: { $set: source } });
+    },
+  },
+  initialState
+);

src/music/store/music/types.ts

@@ -0,0 +1,35 @@
+import { Action, createAction } from "redux-act";
+
+export interface Title {
+  name: string;
+  artist: string;
+  album: string;
+  /**
+   * The length of the title in nanoseconds.
+   */
+  length: number;
+}
+
+export interface MusicState {
+  muted: boolean;
+  playing: boolean;
+  title: Title;
+  playTime: number;
+  source?: string;
+}
+
+export const setTitle: (title: Title) => Action<null, null> = createAction(
+  "set currently playing title"
+);
+
+export const setPlayTime: (time: number) => Action<null, null> = createAction(
+  "set the play time"
+);
+
+export const toggleMute: () => Action<null, null> = createAction("toggle mute");
+
+export const togglePlay: () => Action<null, null> = createAction("toggle play");
+
+export const setSource: (source: string) => Action<null, null> = createAction(
+  "set the title"
+);