fix unwanted re-renders

ui/component/viewers/videoViewer/internal/videojs.jsx

@@ -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>
+  return (
+    <div data-vjs-player>
       {isAudio ? <audio ref={videoRef} className="video-js" /> : <video ref={videoRef} className="video-js" />}
     </div>
-}
+  );
+});

ui/component/viewers/videoViewer/view.jsx

@@ -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,8 +102,7 @@ function VideoViewer(props: Props) {
     setIsPlaying(false);
   }
 
-  const onPlayerReady = useCallback(
-    (player) => {
+  const onPlayerReady = useCallback(player => {
     console.log('videoViewer.onPlayerReady attach effects');
     player.on('tracking:buffered', doTrackingBuffered);
 
@@ -125,7 +121,7 @@ function VideoViewer(props: Props) {
     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>
   );