fix: metadata

This commit is contained in:
Sean Yesmunt 2019-02-21 16:26:01 -05:00
parent f914b0bca4
commit 2c433d57b6

View file

@ -38,6 +38,68 @@ class MediaPlayer extends React.PureComponent {
}
componentDidMount() {
this.playMedia();
// Temp hack to force the video to play if the metadataloaded event was never fired
// Will be removed with the new video player
setTimeout(() => {
const { hasMetadata } = this.state;
if (!hasMetadata) {
this.refreshMetadata();
this.playMedia();
}
}, 5000);
}
componentWillReceiveProps(next) {
const el = this.media.children[0];
if (!this.props.paused && next.paused && !el.paused) el.pause();
}
componentDidUpdate() {
const { contentType, downloadCompleted } = this.props;
const { startedPlaying, fileSource } = this.state;
if (this.playableType() && !startedPlaying && downloadCompleted) {
const container = this.media.children[0];
if (MediaPlayer.MP3_CONTENT_TYPES.indexOf(contentType) > -1) {
this.renderAudio(this.media, true);
} else {
player.append(
this.file(),
container,
{ autoplay: true, controls: true },
renderMediaCallback.bind(this)
);
}
} else if (this.fileType() && !fileSource && downloadCompleted) {
this.renderFile();
}
}
componentWillUnmount() {
document.removeEventListener('keydown', this.togglePlayListener);
const mediaElement = this.media.children[0];
if (mediaElement) {
mediaElement.removeEventListener('click', this.togglePlayListener);
}
}
toggleFullScreen(event) {
const mediaElement = this.media.children[0];
if (mediaElement) {
if (document.webkitIsFullScreen) {
document.webkitExitFullscreen();
} else {
mediaElement.webkitRequestFullScreen();
}
}
}
playMedia() {
const { hasMetadata } = this.state;
const container = this.media;
const {
downloadCompleted,
@ -51,15 +113,6 @@ class MediaPlayer extends React.PureComponent {
savePosition,
} = this.props;
const loadedMetadata = () => {
this.setState({ hasMetadata: true, startedPlaying: true });
if (onStartCb) {
onStartCb();
}
this.media.children[0].play();
};
const renderMediaCallback = error => {
if (error) this.setState({ unplayable: true });
};
@ -91,16 +144,15 @@ class MediaPlayer extends React.PureComponent {
}
document.addEventListener('keydown', this.togglePlayListener);
const mediaElement = this.media.children[0];
const mediaElement = container.children[0];
if (mediaElement) {
if (position) {
mediaElement.currentTime = position;
}
mediaElement.addEventListener('loadedmetadata', () => this.refreshMetadata());
mediaElement.addEventListener('timeupdate', () => savePosition(mediaElement.currentTime));
mediaElement.addEventListener('click', this.togglePlayListener);
mediaElement.addEventListener('loadedmetadata', loadedMetadata.bind(this), {
once: true,
});
mediaElement.addEventListener('ended', () => {
if (onFinishCb) {
onFinishCb();
@ -116,48 +168,18 @@ class MediaPlayer extends React.PureComponent {
}
}
componentWillReceiveProps(next) {
const el = this.media.children[0];
if (!this.props.paused && next.paused && !el.paused) el.pause();
refreshMetadata() {
const { onStartCb } = this.props;
this.setState({ hasMetadata: true, startedPlaying: true });
if (onStartCb) {
onStartCb();
}
this.media.children[0].play();
}
componentDidUpdate() {
const { contentType, downloadCompleted } = this.props;
const { startedPlaying, fileSource } = this.state;
if (this.playableType() && !startedPlaying && downloadCompleted) {
const container = this.media.children[0];
if (MediaPlayer.MP3_CONTENT_TYPES.indexOf(contentType) > -1) {
this.renderAudio(this.media, true);
} else {
player.render(this.file(), container, {
autoplay: true,
controls: true,
});
}
} else if (this.fileType() && !fileSource && downloadCompleted) {
this.renderFile();
}
}
componentWillUnmount() {
document.removeEventListener('keydown', this.togglePlayListener);
const mediaElement = this.media.children[0];
if (mediaElement) {
mediaElement.removeEventListener('click', this.togglePlayListener);
}
}
toggleFullScreen(event) {
const mediaElement = this.media.children[0];
if (mediaElement) {
if (document.webkitIsFullScreen) {
document.webkitExitFullscreen();
} else {
mediaElement.webkitRequestFullScreen();
}
}
setReady() {
this.setState({ ready: true });
}
togglePlay(event) {