Merge pull request #320 from akinwale/issue253

Issue #253 mp3 audio seek fix

ui/js/component/video/internal/player.jsx

@@ -7,6 +7,8 @@ import { setSession, getSession } from "utils";
 import LoadingScreen from "./loading-screen";
 
 class VideoPlayer extends React.PureComponent {
+  static MP3_CONTENT_TYPES = ["audio/mpeg3", "audio/mpeg"];
+
   constructor(props) {
     super(props);
 
@@ -21,7 +23,7 @@ class VideoPlayer extends React.PureComponent {
 
   componentDidMount() {
     const container = this.refs.media;
-    const { mediaType } = this.props;
+    const { contentType, downloadPath, mediaType } = this.props;
     const loadedMetadata = e => {
       this.setState({ hasMetadata: true, startedPlaying: true });
       this.refs.media.children[0].play();
@@ -39,12 +41,17 @@ class VideoPlayer extends React.PureComponent {
       }
     };
 
-    player.append(
-      this.file(),
-      container,
-      { autoplay: false, controls: true, enableKeyboard: true },
-      renderMediaCallback.bind(this)
-    );
+    // use renderAudio override for mp3
+    if (VideoPlayer.MP3_CONTENT_TYPES.indexOf(contentType) > -1) {
+      this.renderAudio(container, null, false);
+    } else {
+      player.append(
+        this.file(),
+        container,
+        { autoplay: false, controls: true },
+        renderMediaCallback.bind(this)
+      );
+    }
 
     document.addEventListener("keydown", this.togglePlayListener);
     const mediaElement = this.refs.media.children[0];
@@ -76,6 +83,20 @@ class VideoPlayer extends React.PureComponent {
     }
   }
 
+  renderAudio(container, autoplay) {
+    if (container.firstChild) {
+      container.firstChild.remove();
+    }
+
+    // clear the container
+    const { downloadPath } = this.props;
+    const audio = document.createElement("audio");
+    audio.autoplay = autoplay;
+    audio.controls = true;
+    audio.src = downloadPath;
+    container.appendChild(audio);
+  }
+
   togglePlay(event) {
     // ignore all events except click and spacebar keydown, or input events in a form control
     if (
@@ -101,13 +122,20 @@ class VideoPlayer extends React.PureComponent {
   }
 
   componentDidUpdate() {
-    const { mediaType, downloadCompleted } = this.props;
+    const { contentType, downloadCompleted } = this.props;
     const { startedPlaying } = this.state;
 
     if (this.playableType() && !startedPlaying && downloadCompleted) {
       const container = this.refs.media.children[0];
 
-      player.render(this.file(), container, { autoplay: true, controls: true });
+      if (VideoPlayer.MP3_CONTENT_TYPES.indexOf(contentType) > -1) {
+        this.renderAudio(this.refs.media, true);
+      } else {
+        player.render(this.file(), container, {
+          autoplay: true,
+          controls: true,
+        });
+      }
     }
   }
 

ui/js/component/video/view.jsx

@@ -98,6 +98,7 @@ class Video extends React.PureComponent {
                 poster={poster}
                 downloadPath={fileInfo.download_path}
                 mediaType={mediaType}
+                contentType={contentType}
                 downloadCompleted={fileInfo.completed}
               />)}
         {!isPlaying &&

ui/js/lbry.js

@@ -268,10 +268,9 @@ lbry.getClientSettings = function() {
   var outSettings = {};
   for (let setting of Object.keys(lbry.defaultClientSettings)) {
     var localStorageVal = localStorage.getItem("setting_" + setting);
-    outSettings[setting] =
-      localStorageVal === null
-        ? lbry.defaultClientSettings[setting]
-        : JSON.parse(localStorageVal);
+    outSettings[setting] = localStorageVal === null
+      ? lbry.defaultClientSettings[setting]
+      : JSON.parse(localStorageVal);
   }
   return outSettings;
 };