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

fix unwanted re-renders

Browse source
This commit is contained in:
Sean Yesmunt 2020-04-16 12:10:47 -04:00
parent e4829c8ce1
commit 9db9363b9f
2 changed files with 25 additions and 28 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
ui/component/viewers/videoViewer/internal/videojs.jsx
View file

@ -55,7 +55,7 @@ if (!Object.keys(videojs.getPlugins()).includes('eventTracking')) {
/*
properties for this component should be kept to ONLY those that if changed should REQUIRE an entirely new videojs element
*/
export default function VideoJs(props: Props) {
export default React.memo(function VideoJs(props: Props) {
const { autoplay, source, sourceType, poster, isAudio, onPlayerReady } = props;
const videoRef = useRef();
const embedded = useContext(EmbedContext);
@ -74,7 +74,6 @@ export default function VideoJs(props: Props) {
videoJsOptions.autoplay = autoplay;
videoJsOptions.muted = autoplay && embedded;
function handleKeyDown(e: KeyboardEvent) {
const { current: videoNode } = videoRef;
@ -116,7 +115,7 @@ export default function VideoJs(props: Props) {
let player;
useEffect(() => {
if (videoRef.current) {
console.log('videojs effect to instatiate player')
console.log('videojs effect to instatiate player');
const { current: videoNode } = videoRef;
player = videojs(videoNode, videoJsOptions);
@ -132,7 +131,9 @@ export default function VideoJs(props: Props) {
}
});
return <div data-vjs-player>
{isAudio ? <audio ref={videoRef} className="video-js" /> : <video ref={videoRef} className="video-js" />}
</div>
}
return (
<div data-vjs-player>
{isAudio ? <audio ref={videoRef} className="video-js" /> : <video ref={videoRef} className="video-js" />}
</div>
);
});

38
ui/component/viewers/videoViewer/view.jsx
View file

@ -13,9 +13,6 @@ import usePrevious from 'effects/use-previous';
import FileViewerEmbeddedEnded from 'lbrytv/component/fileViewerEmbeddedEnded';
import FileViewerEmbeddedTitle from 'lbrytv/component/fileViewerEmbeddedTitle';
type Props = {
position: number,
hasFileInfo: boolean,
@ -105,27 +102,26 @@ function VideoViewer(props: Props) {
setIsPlaying(false);
}
const onPlayerReady = useCallback(
(player) => {
console.log('videoViewer.onPlayerReady attach effects');
player.on('tracking:buffered', doTrackingBuffered);
const onPlayerReady = useCallback(player => {
console.log('videoViewer.onPlayerReady attach effects');
player.on('tracking:buffered', doTrackingBuffered);
player.on('tracking:firstplay', doTrackingFirstPlay);
player.on('tracking:firstplay', doTrackingFirstPlay);
player.on('ended', onEnded);
player.on('volumechange', onVolumeChange);
player.on('play', onPlay);
player.on('pause', onPause);
player.on('ended', onEnded);
player.on('volumechange', onVolumeChange);
player.on('play', onPlay);
player.on('pause', onPause);
// fixes #3498 (https://github.com/lbryio/lbry-desktop/issues/3498)
// summary: on firefox the focus would stick to the fullscreen button which caused buggy behavior with spacebar
// $FlowFixMe
player.on('fullscreenchange', () => document.activeElement && document.activeElement.blur());
// fixes #3498 (https://github.com/lbryio/lbry-desktop/issues/3498)
// summary: on firefox the focus would stick to the fullscreen button which caused buggy behavior with spacebar
// $FlowFixMe
player.on('fullscreenchange', () => document.activeElement && document.activeElement.blur());
if (position) {
player.currentTime(position);
}
});
if (position) {
player.currentTime(position);
}
}, []);
console.log('VideoViewer render');
@ -145,7 +141,7 @@ function VideoViewer(props: Props) {
poster={isAudio || (embedded && !autoplayIfEmbedded) ? thumbnail : null}
sourceType={forcePlayer ? 'video/mp4' : contentType}
autoplay={embedded ? autoplayIfEmbedded : true}
onPlayerReady={() => {}}
onPlayerReady={onPlayerReady}
/>
</div>
);