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 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 { autoplay, source, sourceType, poster, isAudio, onPlayerReady } = props;
const videoRef = useRef(); const videoRef = useRef();
const embedded = useContext(EmbedContext); const embedded = useContext(EmbedContext);
@ -74,7 +74,6 @@ export default function VideoJs(props: Props) {
videoJsOptions.autoplay = autoplay; videoJsOptions.autoplay = autoplay;
videoJsOptions.muted = autoplay && embedded; videoJsOptions.muted = autoplay && embedded;
function handleKeyDown(e: KeyboardEvent) { function handleKeyDown(e: KeyboardEvent) {
const { current: videoNode } = videoRef; const { current: videoNode } = videoRef;
@ -116,7 +115,7 @@ export default function VideoJs(props: Props) {
let player; let player;
useEffect(() => { useEffect(() => {
if (videoRef.current) { if (videoRef.current) {
console.log('videojs effect to instatiate player') console.log('videojs effect to instatiate player');
const { current: videoNode } = videoRef; const { current: videoNode } = videoRef;
player = videojs(videoNode, videoJsOptions); player = videojs(videoNode, videoJsOptions);
@ -132,7 +131,9 @@ export default function VideoJs(props: Props) {
} }
}); });
return <div data-vjs-player> return (
{isAudio ? <audio ref={videoRef} className="video-js" /> : <video ref={videoRef} className="video-js" />} <div data-vjs-player>
</div> {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 FileViewerEmbeddedEnded from 'lbrytv/component/fileViewerEmbeddedEnded';
import FileViewerEmbeddedTitle from 'lbrytv/component/fileViewerEmbeddedTitle'; import FileViewerEmbeddedTitle from 'lbrytv/component/fileViewerEmbeddedTitle';
type Props = { type Props = {
position: number, position: number,
hasFileInfo: boolean, hasFileInfo: boolean,
@ -105,27 +102,26 @@ function VideoViewer(props: Props) {
setIsPlaying(false); setIsPlaying(false);
} }
const onPlayerReady = useCallback( const onPlayerReady = useCallback(player => {
(player) => { console.log('videoViewer.onPlayerReady attach effects');
console.log('videoViewer.onPlayerReady attach effects'); player.on('tracking:buffered', doTrackingBuffered);
player.on('tracking:buffered', doTrackingBuffered);
player.on('tracking:firstplay', doTrackingFirstPlay); player.on('tracking:firstplay', doTrackingFirstPlay);
player.on('ended', onEnded); player.on('ended', onEnded);
player.on('volumechange', onVolumeChange); player.on('volumechange', onVolumeChange);
player.on('play', onPlay); player.on('play', onPlay);
player.on('pause', onPause); player.on('pause', onPause);
// fixes #3498 (https://github.com/lbryio/lbry-desktop/issues/3498) // 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 // summary: on firefox the focus would stick to the fullscreen button which caused buggy behavior with spacebar
// $FlowFixMe // $FlowFixMe
player.on('fullscreenchange', () => document.activeElement && document.activeElement.blur()); player.on('fullscreenchange', () => document.activeElement && document.activeElement.blur());
if (position) { if (position) {
player.currentTime(position); player.currentTime(position);
} }
}); }, []);
console.log('VideoViewer render'); console.log('VideoViewer render');
@ -145,7 +141,7 @@ function VideoViewer(props: Props) {
poster={isAudio || (embedded && !autoplayIfEmbedded) ? thumbnail : null} poster={isAudio || (embedded && !autoplayIfEmbedded) ? thumbnail : null}
sourceType={forcePlayer ? 'video/mp4' : contentType} sourceType={forcePlayer ? 'video/mp4' : contentType}
autoplay={embedded ? autoplayIfEmbedded : true} autoplay={embedded ? autoplayIfEmbedded : true}
onPlayerReady={() => {}} onPlayerReady={onPlayerReady}
/> />
</div> </div>
); );