From c111af6579d611104e72b792a5e5e7e7f01f5531 Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Sun, 2 Jul 2017 11:09:26 +0100 Subject: [PATCH 1/5] Issue #253 mp3 audio seek fix --- ui/js/component/video/internal/player.jsx | 29 +++++++++++++++++++---- 1 file changed, 24 insertions(+), 5 deletions(-) diff --git a/ui/js/component/video/internal/player.jsx b/ui/js/component/video/internal/player.jsx index 1a86c3b20..f1c20d0fb 100644 --- a/ui/js/component/video/internal/player.jsx +++ b/ui/js/component/video/internal/player.jsx @@ -16,11 +16,31 @@ class VideoPlayer extends React.PureComponent { } componentDidMount() { + const component = this; const container = this.refs.media; - const { mediaType } = this.props; + const { downloadPath, mediaType } = this.props; const loadedMetadata = e => { - this.setState({ hasMetadata: true, startedPlaying: true }); - this.refs.media.children[0].play(); + const media = this.refs.media.children[0]; + if ("audio" === media.tagName.toLowerCase()) { + // Load the entire audio file so that the length is available before playing + let xhr = new XMLHttpRequest(); + const xhrLoaded = () => { + if (xhr.status === 200) { + media.src = URL.createObjectURL(xhr.response); + + this.setState({ hasMetadata: true, startedPlaying: true }); + media.play(); + } + }; + + xhr.open("GET", downloadPath, true); + xhr.onload = xhrLoaded.bind(this); + xhr.responseType = "blob"; + xhr.send(); + } else { + this.setState({ hasMetadata: true, startedPlaying: true }); + media.play(); + } }; const renderMediaCallback = err => { if (err) this.setState({ unplayable: true }); @@ -66,8 +86,7 @@ class VideoPlayer extends React.PureComponent { }, }; } - - playableType() { + *playableType() { const { mediaType } = this.props; return ["audio", "video"].indexOf(mediaType) !== -1; From 49b1399926b327e9ffba001f3a524bf36114b2b3 Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Thu, 6 Jul 2017 18:33:44 +0100 Subject: [PATCH 2/5] MP3 audio seek fix #2 --- ui/js/component/video/internal/player.jsx | 67 ++++++++++++----------- ui/js/component/video/view.jsx | 1 + 2 files changed, 37 insertions(+), 31 deletions(-) diff --git a/ui/js/component/video/internal/player.jsx b/ui/js/component/video/internal/player.jsx index f1c20d0fb..91de346d5 100644 --- a/ui/js/component/video/internal/player.jsx +++ b/ui/js/component/video/internal/player.jsx @@ -5,6 +5,8 @@ import fs from "fs"; import LoadingScreen from "./loading-screen"; class VideoPlayer extends React.PureComponent { + static MP3_CONTENT_TYPES = ["audio/mpeg3", "audio/mpeg"]; + constructor(props) { super(props); @@ -18,40 +20,26 @@ class VideoPlayer extends React.PureComponent { componentDidMount() { const component = this; const container = this.refs.media; - const { downloadPath, mediaType } = this.props; + const { contentType, downloadPath, mediaType } = this.props; const loadedMetadata = e => { - const media = this.refs.media.children[0]; - if ("audio" === media.tagName.toLowerCase()) { - // Load the entire audio file so that the length is available before playing - let xhr = new XMLHttpRequest(); - const xhrLoaded = () => { - if (xhr.status === 200) { - media.src = URL.createObjectURL(xhr.response); - - this.setState({ hasMetadata: true, startedPlaying: true }); - media.play(); - } - }; - - xhr.open("GET", downloadPath, true); - xhr.onload = xhrLoaded.bind(this); - xhr.responseType = "blob"; - xhr.send(); - } else { - this.setState({ hasMetadata: true, startedPlaying: true }); - media.play(); - } + this.setState({ hasMetadata: true, startedPlaying: true }); + this.refs.media.children[0].play(); }; const renderMediaCallback = err => { if (err) this.setState({ unplayable: true }); }; - player.append( - this.file(), - container, - { autoplay: false, controls: true }, - renderMediaCallback.bind(this) - ); + // use renderAudio override for mp3 + if (VideoPlayer.MP3_CONTENT_TYPES.indexOf(contentType) > -1) { + this.renderAudio(container, false); + } else { + player.append( + this.file(), + container, + { autoplay: false, controls: true }, + renderMediaCallback.bind(this) + ); + } const mediaElement = this.refs.media.children[0]; if (mediaElement) { @@ -65,25 +53,42 @@ class VideoPlayer extends React.PureComponent { } } + renderAudio(container, autoplay) { + const { downloadPath } = this.props; + const audio = document.createElement("audio"); + audio.autoplay = autoplay; + audio.controls = true; + audio.src = downloadPath; + container.appendChild(audio); + } + 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(container, true); + } else { + player.render(this.file(), container, { + autoplay: true, + controls: true, + }); + } } } file() { const { downloadPath, filename } = this.props; - + const stat = fs.statSync(downloadPath); return { name: filename, createReadStream: opts => { return fs.createReadStream(downloadPath, opts); }, + length: stat.size, }; } *playableType() { 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 && From f61a8a4372a12396f4795d42199192fd8d47e8d8 Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Thu, 6 Jul 2017 18:42:39 +0100 Subject: [PATCH 3/5] removed unused code --- ui/js/component/video/internal/player.jsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/ui/js/component/video/internal/player.jsx b/ui/js/component/video/internal/player.jsx index eee756ccb..ab05daac0 100644 --- a/ui/js/component/video/internal/player.jsx +++ b/ui/js/component/video/internal/player.jsx @@ -137,13 +137,11 @@ class VideoPlayer extends React.PureComponent { file() { const { downloadPath, filename } = this.props; - const stat = fs.statSync(downloadPath); return { name: filename, createReadStream: opts => { return fs.createReadStream(downloadPath, opts); }, - length: stat.size, }; } *playableType() { From 913d642b523b513f14576c82ba78a994233e8bb3 Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Thu, 6 Jul 2017 18:44:52 +0100 Subject: [PATCH 4/5] removed additional unused code --- ui/js/component/video/internal/player.jsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/ui/js/component/video/internal/player.jsx b/ui/js/component/video/internal/player.jsx index ab05daac0..48fdaa25c 100644 --- a/ui/js/component/video/internal/player.jsx +++ b/ui/js/component/video/internal/player.jsx @@ -137,6 +137,7 @@ class VideoPlayer extends React.PureComponent { file() { const { downloadPath, filename } = this.props; + return { name: filename, createReadStream: opts => { @@ -144,7 +145,8 @@ class VideoPlayer extends React.PureComponent { }, }; } - *playableType() { + + playableType() { const { mediaType } = this.props; return ["audio", "video"].indexOf(mediaType) !== -1; From 95145b57e3da683c68d1accf8708dd5b508eba62 Mon Sep 17 00:00:00 2001 From: Akinwale Ariwodola Date: Thu, 6 Jul 2017 20:03:31 +0100 Subject: [PATCH 5/5] additional tweaks to renderAudio --- ui/js/component/video/internal/player.jsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/ui/js/component/video/internal/player.jsx b/ui/js/component/video/internal/player.jsx index 48fdaa25c..28cb554d0 100644 --- a/ui/js/component/video/internal/player.jsx +++ b/ui/js/component/video/internal/player.jsx @@ -22,7 +22,6 @@ class VideoPlayer extends React.PureComponent { } componentDidMount() { - const component = this; const container = this.refs.media; const { contentType, downloadPath, mediaType } = this.props; const loadedMetadata = e => { @@ -44,7 +43,7 @@ class VideoPlayer extends React.PureComponent { // use renderAudio override for mp3 if (VideoPlayer.MP3_CONTENT_TYPES.indexOf(contentType) > -1) { - this.renderAudio(container, false); + this.renderAudio(container, null, false); } else { player.append( this.file(), @@ -85,6 +84,11 @@ 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; @@ -125,7 +129,7 @@ class VideoPlayer extends React.PureComponent { const container = this.refs.media.children[0]; if (VideoPlayer.MP3_CONTENT_TYPES.indexOf(contentType) > -1) { - this.renderAudio(container, true); + this.renderAudio(this.refs.media, true); } else { player.render(this.file(), container, { autoplay: true,