Removing ReactHowler, falling back to safe HTML5 audio, starting to fix #541

src/js/App.js

@@ -2,7 +2,6 @@ import React from 'react';
 import { bindActionCreators } from 'redux';
 import { Route, Switch } from 'react-router-dom';
 import { connect } from 'react-redux';
-import ReactHowler from 'react-howler'
 import ReactGA from 'react-ga';
 
 import Sidebar from './components/Sidebar';
@@ -14,6 +13,7 @@ import ResizeListener from './components/ResizeListener';
 import Hotkeys from './components/Hotkeys';
 import DebugInfo from './components/DebugInfo';
 import ErrorMessage from './components/ErrorMessage';
+import Stream from './components/Stream';
 
 import Album from './views/Album';
 import Artist from './views/Artist';
@@ -353,6 +353,7 @@ export class App extends React.Component {
         <ContextMenu />
         <Dragger />
         <Notifications />
+        <Stream />
 
         {this.props.debug_info ? <DebugInfo /> : null}
       </div>

src/js/components/PlaybackControls.js

@@ -12,7 +12,6 @@ import Dater from './Dater';
 import LinksSentence from './LinksSentence';
 import Thumbnail from './Thumbnail';
 import Icon from './Icon';
-import Stream from './Stream';
 import { scrollTo } from '../util/helpers';
 import * as uiActions from '../services/ui/actions';
 import * as coreActions from '../services/core/actions';
@@ -188,8 +187,6 @@ class PlaybackControls extends React.Component {
 
         <div className="playback-controls__background" />
 
-        <Stream />
-
         {next_track && next_track.images ? <Thumbnail className="hide" size="large" images={next_track.images} /> : null}
 
         <div

src/js/components/Stream.js

@@ -1,6 +1,5 @@
 
 import React from 'react';
-import ReactHowler from 'react-howler';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 import * as coreActions from '../services/core/actions';
@@ -40,15 +39,15 @@ class Stream extends React.Component {
 
     console.debug(`Attempting to play stream ${url}?cb=${cachebuster}`);
 
+    if (play_state !== 'playing') return null;
+
     return (
-      <ReactHowler
-        src={`${url}?cb=${cachebuster}`}
-        playing={play_state === 'playing'}
-        volume={volume / 100}
-        onPlay={() => console.debug(`Playing stream ${url}?cb=${cachebuster}`)}
-        onLoad={() => console.debug(`Loaded stream ${url}?cb=${cachebuster}`)}
-        onError={() => console.error(`Failed to play stream ${url}?cb=${cachebuster}`)}
-      />
+      <audio
+        autoPlay
+        volume={volume / 100} // TODO: Needs to be set by script, not DOM
+      >
+        <source src={`${url}?cb=${cachebuster}`} />
+      </audio>
     );
   }
 }