diff --git a/js/actionCreators/media.js b/js/actionCreators/media.js index f6d47c78..c74272b5 100644 --- a/js/actionCreators/media.js +++ b/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 }); }; } diff --git a/js/components/App.js b/js/components/App.js index 6e199f3c..7625cd5f 100644 --- a/js/components/App.js +++ b/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)} /> ); diff --git a/js/components/MainWindow/Time.js b/js/components/MainWindow/Time.js index 6f3121cc..3c253691 100644 --- a/js/components/MainWindow/Time.js +++ b/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 ( diff --git a/js/components/MainWindow/index.js b/js/components/MainWindow/index.js index 747e2a35..41f1194c 100644 --- a/js/components/MainWindow/index.js +++ b/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, diff --git a/js/components/MiniTime.js b/js/components/MiniTime.js index 6461b119..9eaa5721 100644 --- a/js/components/MiniTime.js +++ b/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 (
diff --git a/js/components/Visualizer.js b/js/components/Visualizer.js index 6a92fccd..67b0d807 100644 --- a/js/components/Visualizer.js +++ b/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]); diff --git a/js/constants.js b/js/constants.js index 7b76f297..8fab9e13 100644 --- a/js/constants.js +++ b/js/constants.js @@ -46,3 +46,8 @@ export const TIME_MODE = { ELAPSED: "ELAPSED", REMAINING: "REMAINING" }; + +export const MEDIA_STATUS = { + STOPPED: "STOPPED", + PAUSED: "PAUSED" +}; diff --git a/js/media/elementSource.js b/js/media/elementSource.js index adfa41eb..3796b380 100644 --- a/js/media/elementSource.js +++ b/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) { diff --git a/js/media/index.js b/js/media/index.js index 3a61d0cd..f7540ed4 100644 --- a/js/media/index.js +++ b/js/media/index.js @@ -1,5 +1,5 @@ /* Emulate the native