diff --git a/ui/js/component/video/internal/player.jsx b/ui/js/component/video/internal/player.jsx index 1ab3550b1..28cb554d0 100644 --- a/ui/js/component/video/internal/player.jsx +++ b/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, + }); + } } } diff --git a/ui/js/component/video/view.jsx b/ui/js/component/video/view.jsx index c3cb499b9..10df6ea9a 100644 --- a/ui/js/component/video/view.jsx +++ b/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 && diff --git a/ui/js/lbry.js b/ui/js/lbry.js index accc5152c..f13665e09 100644 --- a/ui/js/lbry.js +++ b/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; };