MP3 audio seek fix #2
This commit is contained in:
parent
c111af6579
commit
49b1399926
2 changed files with 37 additions and 31 deletions
ui/js/component/video
|
@ -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() {
|
||||||
|
|
|
@ -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 &&
|
||||||
|
|
Loading…
Add table
Reference in a new issue