MP3 audio seek fix

This commit is contained in:
Akinwale Ariwodola 2017-07-06 18:33:44 +01:00
parent c111af6579
commit 49b1399926
2 changed files with 37 additions and 31 deletions
ui/js/component/video

View file

@ -5,6 +5,8 @@ import fs from "fs";
import LoadingScreen from "./loading-screen"; import LoadingScreen from "./loading-screen";
class VideoPlayer extends React.PureComponent { class VideoPlayer extends React.PureComponent {
static MP3_CONTENT_TYPES = ["audio/mpeg3", "audio/mpeg"];
constructor(props) { constructor(props) {
super(props); super(props);
@ -18,40 +20,26 @@ class VideoPlayer extends React.PureComponent {
componentDidMount() { componentDidMount() {
const component = this; const component = this;
const container = this.refs.media; const container = this.refs.media;
const { downloadPath, mediaType } = this.props; const { contentType, downloadPath, mediaType } = this.props;
const loadedMetadata = e => { const loadedMetadata = e => {
const media = this.refs.media.children[0]; this.setState({ hasMetadata: true, startedPlaying: true });
if ("audio" === media.tagName.toLowerCase()) { this.refs.media.children[0].play();
// 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 => { const renderMediaCallback = err => {
if (err) this.setState({ unplayable: true }); if (err) this.setState({ unplayable: true });
}; };
player.append( // use renderAudio override for mp3
this.file(), if (VideoPlayer.MP3_CONTENT_TYPES.indexOf(contentType) > -1) {
container, this.renderAudio(container, false);
{ autoplay: false, controls: true }, } else {
renderMediaCallback.bind(this) player.append(
); this.file(),
container,
{ autoplay: false, controls: true },
renderMediaCallback.bind(this)
);
}
const mediaElement = this.refs.media.children[0]; const mediaElement = this.refs.media.children[0];
if (mediaElement) { 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() { componentDidUpdate() {
const { mediaType, downloadCompleted } = this.props; const { contentType, downloadCompleted } = this.props;
const { startedPlaying } = this.state; const { startedPlaying } = this.state;
if (this.playableType() && !startedPlaying && downloadCompleted) { if (this.playableType() && !startedPlaying && downloadCompleted) {
const container = this.refs.media.children[0]; 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() { file() {
const { downloadPath, filename } = this.props; const { downloadPath, filename } = this.props;
const stat = fs.statSync(downloadPath);
return { return {
name: filename, name: filename,
createReadStream: opts => { createReadStream: opts => {
return fs.createReadStream(downloadPath, opts); return fs.createReadStream(downloadPath, opts);
}, },
length: stat.size,
}; };
} }
*playableType() { *playableType() {

View file

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