LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

fix: metadata

Browse source
This commit is contained in:
Sean Yesmunt 2019-02-21 16:26:01 -05:00
parent f914b0bca4
commit 2c433d57b6
1 changed files with 75 additions and 53 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

128
src/renderer/component/fileViewer/internal/player.jsx
View file

@ -38,6 +38,68 @@ class MediaPlayer extends React.PureComponent {
} }
componentDidMount() { 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 container = this.media;
const { const {
downloadCompleted, downloadCompleted,
@ -51,15 +113,6 @@ class MediaPlayer extends React.PureComponent {
savePosition, savePosition,
} = this.props; } = this.props;
const loadedMetadata = () => {
this.setState({ hasMetadata: true, startedPlaying: true });
if (onStartCb) {
onStartCb();
}
this.media.children[0].play();
};
const renderMediaCallback = error => { const renderMediaCallback = error => {
if (error) this.setState({ unplayable: true }); if (error) this.setState({ unplayable: true });
}; };
@ -91,16 +144,15 @@ class MediaPlayer extends React.PureComponent {
} }
document.addEventListener('keydown', this.togglePlayListener); document.addEventListener('keydown', this.togglePlayListener);
const mediaElement = this.media.children[0]; const mediaElement = container.children[0];
if (mediaElement) { if (mediaElement) {
if (position) { if (position) {
mediaElement.currentTime = position; mediaElement.currentTime = position;
} }
mediaElement.addEventListener('loadedmetadata', () => this.refreshMetadata());
mediaElement.addEventListener('timeupdate', () => savePosition(mediaElement.currentTime)); mediaElement.addEventListener('timeupdate', () => savePosition(mediaElement.currentTime));
mediaElement.addEventListener('click', this.togglePlayListener); mediaElement.addEventListener('click', this.togglePlayListener);
mediaElement.addEventListener('loadedmetadata', loadedMetadata.bind(this), {
once: true,
});
mediaElement.addEventListener('ended', () => { mediaElement.addEventListener('ended', () => {
if (onFinishCb) { if (onFinishCb) {
onFinishCb(); onFinishCb();
@ -116,48 +168,18 @@ class MediaPlayer extends React.PureComponent {
} }
} }
componentWillReceiveProps(next) { refreshMetadata() {
const el = this.media.children[0]; const { onStartCb } = this.props;
if (!this.props.paused && next.paused && !el.paused) el.pause(); this.setState({ hasMetadata: true, startedPlaying: true });
if (onStartCb) {
onStartCb();
}
this.media.children[0].play();
} }
componentDidUpdate() { setReady() {
const { contentType, downloadCompleted } = this.props; this.setState({ ready: true });
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();
}
}
} }
togglePlay(event) { togglePlay(event) {