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

fix video stutters on desktop

Browse source
This commit is contained in:
Sean Yesmunt 2019-03-19 16:51:00 -04:00
parent 078c001731
commit ebfd38269c
1 changed files with 25 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
src/ui/component/fileViewer/internal/player.jsx
View file

@ -88,7 +88,6 @@ class MediaPlayer extends React.PureComponent<Props, State> {
} }
componentWillUnmount() { componentWillUnmount() {
document.removeEventListener('keydown', this.togglePlayListener);
const mediaElement = this.mediaContainer.current.children[0]; const mediaElement = this.mediaContainer.current.children[0];
if (mediaElement) { if (mediaElement) {
mediaElement.removeEventListener('click', this.togglePlay); mediaElement.removeEventListener('click', this.togglePlay);
@ -139,28 +138,24 @@ class MediaPlayer extends React.PureComponent<Props, State> {
// Render custom viewer: FileRender // Render custom viewer: FileRender
if (this.isSupportedFile() && downloadCompleted) { if (this.isSupportedFile() && downloadCompleted) {
this.renderFile(); this.renderFile();
} } else {
// Render default viewer: render-media (video, audio, img, iframe) // Render default viewer: render-media (video, audio, img, iframe)
else { const currentMediaContainer = this.mediaContainer.current;
// Temp hack to help in some metadata loading cases
setTimeout(() => {
const currentMediaContainer = this.mediaContainer.current;
// Clean any potential rogue instances // Clean any potential rogue instances
while (currentMediaContainer.firstChild) { while (currentMediaContainer.firstChild) {
currentMediaContainer.removeChild(currentMediaContainer.firstChild); currentMediaContainer.removeChild(currentMediaContainer.firstChild);
} }
player.append( player.append(
{ {
name: fileName, name: fileName,
createReadStream: opts => fs.createReadStream(downloadPath, opts), createReadStream: opts => fs.createReadStream(downloadPath, opts),
}, },
container, container,
{ autoplay: true, controls: true }, { autoplay: true, controls: true },
renderMediaCallback.bind(this) renderMediaCallback.bind(this)
); );
}, 300);
} }
document.addEventListener('keydown', this.togglePlay); document.addEventListener('keydown', this.togglePlay);
@ -225,7 +220,14 @@ class MediaPlayer extends React.PureComponent<Props, State> {
return; return;
} }
event.preventDefault(); event.preventDefault();
const mediaElement = this.mediaContainer.current.children[0];
const mediaRef = this.mediaContainer.current;
if (!mediaRef) {
return;
}
const mediaElement = mediaRef.children && mediaRef.children[0];
if (mediaElement) { if (mediaElement) {
if (!mediaElement.paused) { if (!mediaElement.paused) {
mediaElement.pause(); mediaElement.pause();
@ -352,7 +354,7 @@ class MediaPlayer extends React.PureComponent<Props, State> {
{loadingStatus && <LoadingScreen status={loadingStatus} spinner={isLoading} />} {loadingStatus && <LoadingScreen status={loadingStatus} spinner={isLoading} />}
{isFileReady && <FileRender claim={claim} source={fileSource} mediaType={mediaType} />} {isFileReady && <FileRender claim={claim} source={fileSource} mediaType={mediaType} />}
<div <div
className="content__view--container" className='content__view--container'
style={{ opacity: isLoading ? 0 : 1 }} style={{ opacity: isLoading ? 0 : 1 }}
ref={this.mediaContainer} ref={this.mediaContainer}
/> />