Use constants for media status

js/actionCreators/media.js

@@ -13,6 +13,7 @@ import {
   PLAY_TRACK
 } from "../actionTypes";
 
+import { MEDIA_STATUS } from "../constants";
 import { openMediaFileDialog } from "./";
 
 function playRandomTrack() {
@@ -37,7 +38,7 @@ export function play() {
   return (dispatch, getState) => {
     const state = getState();
     if (
-      state.media.status === "STOPPED" &&
+      state.media.status === MEDIA_STATUS.STOPPED &&
       state.playlist.curentTrack == null &&
       state.playlist.trackOrder.length === 0
     ) {
@@ -51,7 +52,7 @@ export function play() {
 export function pause() {
   return (dispatch, getState) => {
     const { status } = getState().media;
-    dispatch({ type: status === "PLAYING" ? PAUSE : PLAY });
+    dispatch({ type: status === MEDIA_STATUS.PLAYING ? PAUSE : PLAY });
   };
 }
 

js/components/App.js

@@ -4,7 +4,7 @@ import PropTypes from "prop-types";
 import { connect } from "react-redux";
 import { objectMap } from "../utils";
 import Emitter from "../emitter";
-import { WINDOWS } from "../constants";
+import { WINDOWS, MEDIA_STATUS } from "../constants";
 import { getVisualizerStyle } from "../selectors";
 import { closeWindow } from "../actionCreators";
 import ContextMenuWrapper from "./ContextMenuWrapper";
@@ -129,7 +129,7 @@ class App extends React.Component {
               onFocusedKeyDown={listener => this._emitter.on(id, listener)}
               analyser={media.getAnalyser()}
               isEnabledVisualizer={this.props.visualizerStyle === id}
-              playing={this.props.status === "PLAYING"}
+              playing={this.props.status === MEDIA_STATUS.PLAYING}
               close={() => this.props.closeWindow(id)}
             />
           );

js/components/MainWindow/Time.js

@@ -6,7 +6,8 @@ import { TOGGLE_TIME_MODE } from "../../actionTypes";
 import { TIME_MODE } from "../../constants";
 
 const Time = ({ timeElapsed, length, timeMode, toggleTimeMode }) => {
-  const seconds = timeMode === "ELAPSED" ? timeElapsed : length - timeElapsed;
+  const seconds =
+    timeMode === TIME_MODE.ELAPSED ? timeElapsed : length - timeElapsed;
 
   const timeObj = getTimeObj(seconds);
   return (

js/components/MainWindow/index.js

@@ -1,8 +1,7 @@
 import React from "react";
 import { connect } from "react-redux";
 import classnames from "classnames";
-
-import { WINDOWS } from "../../constants";
+import { WINDOWS, MEDIA_STATUS } from "../../constants";
 import {
   loadFilesFromReferences,
   removeAllTracks,
@@ -69,9 +68,9 @@ export class MainWindow extends React.Component {
 
     const className = classnames({
       window: true,
-      play: status === "PLAYING",
-      stop: status === "STOPPED",
-      pause: status === "PAUSED",
+      play: status === MEDIA_STATUS.PLAYING,
+      stop: status === MEDIA_STATUS.STOPPED,
+      pause: status === MEDIA_STATUS.PAUSED,
       selected: focused === WINDOWS.MAIN,
       shade: mainShade,
       draggable: true,

js/components/MiniTime.js

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 import classnames from "classnames";
 import { getTimeObj } from "../utils";
 import { TOGGLE_TIME_MODE } from "../actionTypes";
-import { TIME_MODE } from "../constants";
+import { TIME_MODE, MEDIA_STATUS } from "../constants";
 import Character from "./Character";
 
 import "../../css/mini-time.css";
@@ -26,7 +26,7 @@ const MiniTime = props => {
   let seconds = null;
   // TODO: Clean this up: If stopped, just render the background, rather than
   // rendering spaces twice.
-  if (props.status !== "STOPPED") {
+  if (props.status !== MEDIA_STATUS.STOPPED) {
     seconds =
       props.timeMode === TIME_MODE.ELAPSED
         ? props.timeElapsed
@@ -35,12 +35,13 @@ const MiniTime = props => {
 
   const timeObj = getTimeObj(seconds);
   const showMinus =
-    props.timeMode === TIME_MODE.REMAINING && props.status !== "STOPPED";
+    props.timeMode === TIME_MODE.REMAINING &&
+    props.status !== MEDIA_STATUS.STOPPED;
   return (
     <div
       onClick={props.toggle}
       className={classnames("mini-time", "countdown", {
-        blinking: props.status === "PAUSED"
+        blinking: props.status === MEDIA_STATUS.PAUSED
       })}
     >
       <Background />

js/components/Visualizer.js

@@ -3,7 +3,7 @@ import { connect } from "react-redux";
 
 import { toggleVisualizerStyle } from "../actionCreators";
 import { getWindowShade, getVisualizerStyle } from "../selectors";
-import { VISUALIZERS } from "../constants";
+import { VISUALIZERS, MEDIA_STATUS } from "../constants";
 
 const PIXEL_DENSITY = 2;
 const NUM_BARS = 20;
@@ -33,7 +33,7 @@ class Visualizer extends React.Component {
 
     // Kick off the animation loop
     const loop = () => {
-      if (this.props.status === "PLAYING") {
+      if (this.props.status === MEDIA_STATUS.PLAYING) {
         if (this.props.dummyVizData) {
           Object.keys(this.props.dummyVizData).forEach(i => {
             this._printBar(i, this.props.dummyVizData[i]);

js/constants.js

@@ -46,3 +46,8 @@ export const TIME_MODE = {
   ELAPSED: "ELAPSED",
   REMAINING: "REMAINING"
 };
+
+export const MEDIA_STATUS = {
+  STOPPED: "STOPPED",
+  PAUSED: "PAUSED"
+};

js/media/elementSource.js

@@ -1,10 +1,6 @@
 import Emitter from "../emitter";
 import { clamp } from "../utils";
-const STATUS = {
-  PLAYING: "PLAYING",
-  STOPPED: "STOPPED",
-  PAUSED: "PAUSED"
-};
+import { MEDIA_STATUS } from "../constants";
 
 export default class ElementSource {
   on(eventType, cb) {
@@ -18,7 +14,7 @@ export default class ElementSource {
     this._audio = document.createElement("audio");
     this._audio.crossOrigin = "anonymous";
     this._stalled = false;
-    this._status = STATUS.STOPPED;
+    this._status = MEDIA_STATUS.STOPPED;
 
     this._audio.addEventListener("suspend", () => {
       this._setStalled(true);
@@ -31,7 +27,7 @@ export default class ElementSource {
 
     this._audio.addEventListener("ended", () => {
       this._emitter.trigger("ended");
-      this._setStatus(STATUS.STOPPED);
+      this._setStatus(MEDIA_STATUS.STOPPED);
     });
 
     // TODO: Throttle to 50 (if needed)
@@ -66,7 +62,7 @@ export default class ElementSource {
       // the end of the track.
 
       this._emitter.trigger("ended");
-      this._setStatus(STATUS.STOPPED);
+      this._setStatus(MEDIA_STATUS.STOPPED);
     });
 
     this._source = this._context.createMediaElementSource(this._audio);
@@ -89,7 +85,7 @@ export default class ElementSource {
   }
 
   async play() {
-    if (this._status !== STATUS.PAUSED) {
+    if (this._status !== MEDIA_STATUS.PAUSED) {
       this.seekToTime(0);
     }
     try {
@@ -97,18 +93,18 @@ export default class ElementSource {
     } catch (err) {
       //
     }
-    this._setStatus(STATUS.PLAYING);
+    this._setStatus(MEDIA_STATUS.PLAYING);
   }
 
   pause() {
     this._audio.pause();
-    this._setStatus(STATUS.PAUSED);
+    this._setStatus(MEDIA_STATUS.PAUSED);
   }
 
   stop() {
     this._audio.pause();
     this._audio.currentTime = 0;
-    this._setStatus(STATUS.STOPPED);
+    this._setStatus(MEDIA_STATUS.STOPPED);
   }
 
   seekToTime(time) {

js/media/index.js

@@ -1,5 +1,5 @@
 /* Emulate the native <audio> element with Web Audio API */
-import { BANDS } from "../constants";
+import { BANDS, MEDIA_STATUS } from "../constants";
 import Emitter from "../emitter";
 import ElementSource from "./elementSource";
 // import detectChannels from "./detectChannels";
@@ -101,7 +101,7 @@ export default class Media {
     });
     this._source.on("statusChange", () => {
       switch (this._source.getStatus()) {
-        case "PLAYING":
+        case MEDIA_STATUS.PLAYING:
           this._emitter.trigger("playing");
           break;
       }

js/reducers/media.js

@@ -14,7 +14,7 @@ import {
   ADD_TRACK_FROM_URL,
   CHANNEL_COUNT_CHANGED
 } from "../actionTypes";
-import { TIME_MODE } from "../constants";
+import { TIME_MODE, MEDIA_STATUS } from "../constants";
 
 const media = (state, action) => {
   if (!state) {
@@ -33,19 +33,19 @@ const media = (state, action) => {
       shuffle: false,
       repeat: false,
       // TODO: Enforce possible values
-      status: "STOPPED"
+      status: MEDIA_STATUS.STOPPED
     };
   }
   switch (action.type) {
     // TODO: Make these constants
     case PLAY:
     case IS_PLAYING:
-      return { ...state, status: "PLAYING" };
+      return { ...state, status: MEDIA_STATUS.PLAYING };
     case PAUSE:
-      return { ...state, status: "PAUSED" };
+      return { ...state, status: MEDIA_STATUS.PAUSED };
     case STOP:
     case IS_STOPPED:
-      return { ...state, status: "STOPPED" };
+      return { ...state, status: MEDIA_STATUS.STOPPED };
     case CHANNEL_COUNT_CHANGED:
       return { ...state, channels: action.channels };
     case TOGGLE_TIME_MODE: