From 5d8e3d8b0adb57430d7fd336f5f5eb3f9ddea21f Mon Sep 17 00:00:00 2001
From: infinite-persistence <inf.persistence@gmail.com>
Date: Tue, 6 Jul 2021 17:02:05 +0800
Subject: [PATCH] Revert lazy-loading videojs

## Issue
The loading circle wasn't showing up, causing confusion.

Splitting CSS doesn't seem trivial as there seems to be a huge dependency on the load order. Pretty much similar to what this person is facing https://lihautan.com/css-code-splitting/#the-problem

## Change
This reverts videojs-specific changes from 4d638bcf.
---
 ui/component/claimLink/view.jsx               |   2 +-
 ui/component/fileRender/view.jsx              |  16 +--
 ui/component/fileRenderFloating/view.jsx      | 131 +++++++++---------
 ui/component/fileRenderInline/view.jsx        |  11 +-
 .../viewers/videoViewer/internal/overlays.js  |   2 +-
 .../viewers/videoViewer/internal/videojs.jsx  |   2 +-
 ui/component/viewers/videoViewer/view.jsx     |  31 ++---
 ui/constants/classnames.js                    |   2 -
 ui/page/embedWrapper/view.jsx                 |   7 +-
 ui/scss/component/_file-render.scss           |   2 +-
 ui/scss/component/_videojs.scss               |   5 -
 ui/scss/third-party.scss                      |   2 -
 12 files changed, 92 insertions(+), 121 deletions(-)

diff --git a/ui/component/claimLink/view.jsx b/ui/component/claimLink/view.jsx
index c67a1fd82..f5e7ee69c 100644
--- a/ui/component/claimLink/view.jsx
+++ b/ui/component/claimLink/view.jsx
@@ -4,7 +4,7 @@ import classnames from 'classnames';
 import EmbedPlayButton from 'component/embedPlayButton';
 import Button from 'component/button';
 import UriIndicator from 'component/uriIndicator';
-import { INLINE_PLAYER_WRAPPER_CLASS } from 'constants/classnames';
+import { INLINE_PLAYER_WRAPPER_CLASS } from 'component/fileRenderFloating/view';
 import { SIMPLE_SITE } from 'config';
 
 type Props = {
diff --git a/ui/component/fileRender/view.jsx b/ui/component/fileRender/view.jsx
index c10f0d189..97fa79ad8 100644
--- a/ui/component/fileRender/view.jsx
+++ b/ui/component/fileRender/view.jsx
@@ -3,6 +3,7 @@ import { remote } from 'electron';
 import React from 'react';
 import classnames from 'classnames';
 import * as RENDER_MODES from 'constants/file_render_modes';
+import VideoViewer from 'component/viewers/videoViewer';
 import { withRouter } from 'react-router-dom';
 import fs from 'fs';
 import analytics from 'analytics';
@@ -20,7 +21,6 @@ const AppViewer = React.lazy(() => import('component/viewers/appViewer' /* webpa
 const HtmlViewer = React.lazy(() => import('component/viewers/htmlViewer' /* webpackChunkName: "htmlViewer" */));
 const ImageViewer = React.lazy(() => import('component/viewers/imageViewer' /* webpackChunkName: "imageViewer" */));
 const PdfViewer = React.lazy(() => import('component/viewers/pdfViewer' /* webpackChunkName: "pdfViewer" */));
-const VideoViewer = React.lazy(() => import('component/viewers/videoViewer' /* webpackChunkName: "videoViewer" */));
 
 type Props = {
   uri: string,
@@ -86,14 +86,12 @@ class FileRender extends React.PureComponent<Props> {
       case RENDER_MODES.AUDIO:
       case RENDER_MODES.VIDEO:
         return (
-          <React.Suspense fallback={null}>
-            <VideoViewer
-              uri={uri}
-              source={source}
-              contentType={contentType}
-              desktopPlayStartTime={desktopPlayStartTime}
-            />
-          </React.Suspense>
+          <VideoViewer
+            uri={uri}
+            source={source}
+            contentType={contentType}
+            desktopPlayStartTime={desktopPlayStartTime}
+          />
         );
       case RENDER_MODES.IMAGE:
         return (
diff --git a/ui/component/fileRenderFloating/view.jsx b/ui/component/fileRenderFloating/view.jsx
index 81dc6d9ec..24c1002bc 100644
--- a/ui/component/fileRenderFloating/view.jsx
+++ b/ui/component/fileRenderFloating/view.jsx
@@ -1,24 +1,23 @@
 // @flow
 import * as ICONS from 'constants/icons';
 import * as RENDER_MODES from 'constants/file_render_modes';
-import { INLINE_PLAYER_WRAPPER_CLASS } from 'constants/classnames';
 import React, { useEffect, useState } from 'react';
 import Button from 'component/button';
 import classnames from 'classnames';
 import LoadingScreen from 'component/common/loading-screen';
+import FileRender from 'component/fileRender';
 import UriIndicator from 'component/uriIndicator';
 import usePersistedState from 'effects/use-persisted-state';
 import { PRIMARY_PLAYER_WRAPPER_CLASS } from 'page/file/view';
+import Draggable from 'react-draggable';
 import { onFullscreenChange } from 'util/full-screen';
 import { useIsMobile } from 'effects/use-screensize';
 import debounce from 'util/debounce';
 import { useHistory } from 'react-router';
 
-const Draggable = React.lazy(() => import('react-draggable' /* webpackChunkName: "draggable" */));
-const FileRender = React.lazy(() => import('component/fileRender' /* webpackChunkName: "fileRender" */));
-
 const IS_DESKTOP_MAC = typeof process === 'object' ? process.platform === 'darwin' : false;
 const DEBOUNCE_WINDOW_RESIZE_HANDLER_MS = 60;
+export const INLINE_PLAYER_WRAPPER_CLASS = 'inline-player__wrapper';
 
 type Props = {
   isFloating: boolean,
@@ -244,76 +243,72 @@ export default function FileRenderFloating(props: Props) {
   }
 
   return (
-    <React.Suspense fallback={null}>
-      <Draggable
-        onDrag={handleDragMove}
-        onStart={handleDragStart}
-        onStop={handleDragStop}
-        defaultPosition={position}
-        position={isFloating ? position : { x: 0, y: 0 }}
-        bounds="parent"
-        disabled={!isFloating}
-        handle=".draggable"
-        cancel=".button"
+    <Draggable
+      onDrag={handleDragMove}
+      onStart={handleDragStart}
+      onStop={handleDragStop}
+      defaultPosition={position}
+      position={isFloating ? position : { x: 0, y: 0 }}
+      bounds="parent"
+      disabled={!isFloating}
+      handle=".draggable"
+      cancel=".button"
+    >
+      <div
+        className={classnames('content__viewer', {
+          'content__viewer--floating': isFloating,
+          'content__viewer--inline': !isFloating,
+          'content__viewer--secondary': playingUriSource === 'comment',
+          'content__viewer--theater-mode': !isFloating && videoTheaterMode,
+        })}
+        style={
+          !isFloating && fileViewerRect
+            ? {
+                width: fileViewerRect.width,
+                height: fileViewerRect.height,
+                left: fileViewerRect.x,
+                // 80px is header height in scss/init/vars.scss
+                top: fileViewerRect.windowOffset + fileViewerRect.top - 80 - (IS_DESKTOP_MAC ? 24 : 0),
+              }
+            : {}
+        }
       >
         <div
-          className={classnames('content__viewer', {
-            'content__viewer--floating': isFloating,
-            'content__viewer--inline': !isFloating,
-            'content__viewer--secondary': playingUriSource === 'comment',
-            'content__viewer--theater-mode': !isFloating && videoTheaterMode,
+          className={classnames('content__wrapper', {
+            'content__wrapper--floating': isFloating,
           })}
-          style={
-            !isFloating && fileViewerRect
-              ? {
-                  width: fileViewerRect.width,
-                  height: fileViewerRect.height,
-                  left: fileViewerRect.x,
-                  // 80px is header height in scss/init/vars.scss
-                  top: fileViewerRect.windowOffset + fileViewerRect.top - 80 - (IS_DESKTOP_MAC ? 24 : 0),
-                }
-              : {}
-          }
         >
-          <div
-            className={classnames('content__wrapper', {
-              'content__wrapper--floating': isFloating,
-            })}
-          >
-            {isFloating && (
-              <Button
-                title={__('Close')}
-                onClick={closeFloatingPlayer}
-                icon={ICONS.REMOVE}
-                button="primary"
-                className="content__floating-close"
-              />
-            )}
+          {isFloating && (
+            <Button
+              title={__('Close')}
+              onClick={closeFloatingPlayer}
+              icon={ICONS.REMOVE}
+              button="primary"
+              className="content__floating-close"
+            />
+          )}
 
-            {isReadyToPlay ? (
-              <React.Suspense fallback={null}>
-                <FileRender
-                  className="draggable"
-                  uri={uri}
-                  // @if TARGET='app'
-                  desktopPlayStartTime={desktopPlayStartTime}
-                  // @endif
-                />
-              </React.Suspense>
-            ) : (
-              <LoadingScreen status={loadingMessage} />
-            )}
-            {isFloating && (
-              <div className="draggable content__info">
-                <div className="claim-preview__title" title={title || uri}>
-                  <Button label={title || uri} navigate={uri} button="link" className="content__floating-link" />
-                </div>
-                <UriIndicator link uri={uri} />
+          {isReadyToPlay ? (
+            <FileRender
+              className="draggable"
+              uri={uri}
+              // @if TARGET='app'
+              desktopPlayStartTime={desktopPlayStartTime}
+              // @endif
+            />
+          ) : (
+            <LoadingScreen status={loadingMessage} />
+          )}
+          {isFloating && (
+            <div className="draggable content__info">
+              <div className="claim-preview__title" title={title || uri}>
+                <Button label={title || uri} navigate={uri} button="link" className="content__floating-link" />
               </div>
-            )}
-          </div>
+              <UriIndicator link uri={uri} />
+            </div>
+          )}
         </div>
-      </Draggable>
-    </React.Suspense>
+      </div>
+    </Draggable>
   );
 }
diff --git a/ui/component/fileRenderInline/view.jsx b/ui/component/fileRenderInline/view.jsx
index 0e91d8e07..534ff4814 100644
--- a/ui/component/fileRenderInline/view.jsx
+++ b/ui/component/fileRenderInline/view.jsx
@@ -1,10 +1,9 @@
 // @flow
 import React, { useState, useEffect } from 'react';
+import FileRender from 'component/fileRender';
 import LoadingScreen from 'component/common/loading-screen';
 import { NON_STREAM_MODES } from 'constants/file_render_modes';
 
-const FileRender = React.lazy(() => import('component/fileRender' /* webpackChunkName: "fileRender" */));
-
 type Props = {
   isPlaying: boolean,
   fileInfo: FileListItem,
@@ -70,11 +69,5 @@ export default function FileRenderInline(props: Props) {
     return null;
   }
 
-  return renderContent ? (
-    <React.Suspense fallback={null}>
-      <FileRender uri={uri} />
-    </React.Suspense>
-  ) : (
-    <LoadingScreen isDocument />
-  );
+  return renderContent ? <FileRender uri={uri} /> : <LoadingScreen isDocument />;
 }
diff --git a/ui/component/viewers/videoViewer/internal/overlays.js b/ui/component/viewers/videoViewer/internal/overlays.js
index bd58374e6..6a3e70cba 100644
--- a/ui/component/viewers/videoViewer/internal/overlays.js
+++ b/ui/component/viewers/videoViewer/internal/overlays.js
@@ -4,7 +4,7 @@ import * as ICONS from 'constants/icons';
 import ReactDOMServer from 'react-dom/server';
 
 import './plugins/videojs-overlay/plugin';
-// import './plugins/videojs-overlay/plugin.scss'; --> 'scss/third-party.scss'
+import './plugins/videojs-overlay/plugin.scss';
 
 // ****************************************************************************
 // ****************************************************************************
diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx
index 2f2a57d67..5c15fdd8f 100644
--- a/ui/component/viewers/videoViewer/internal/videojs.jsx
+++ b/ui/component/viewers/videoViewer/internal/videojs.jsx
@@ -5,7 +5,7 @@ import Button from 'component/button';
 import * as ICONS from 'constants/icons';
 import classnames from 'classnames';
 import videojs from 'video.js';
-// import 'video.js/dist/alt/video-js-cdn.min.css'; --> 'scss/third-party.scss'
+import 'video.js/dist/alt/video-js-cdn.min.css';
 import eventTracking from 'videojs-event-tracking';
 import * as OVERLAY from './overlays';
 import './plugins/videojs-mobile-ui/plugin';
diff --git a/ui/component/viewers/videoViewer/view.jsx b/ui/component/viewers/videoViewer/view.jsx
index ec8c30c7f..b2aaf8a10 100644
--- a/ui/component/viewers/videoViewer/view.jsx
+++ b/ui/component/viewers/videoViewer/view.jsx
@@ -5,6 +5,7 @@ import * as ICONS from 'constants/icons';
 import React, { useEffect, useState, useContext, useCallback } from 'react';
 import { stopContextMenu } from 'util/context-menu';
 import type { Player } from './internal/videojs';
+import VideoJs from './internal/videojs';
 import analytics from 'analytics';
 import { EmbedContext } from 'page/embedWrapper/view';
 import classnames from 'classnames';
@@ -20,8 +21,6 @@ import Button from 'component/button';
 import I18nMessage from 'component/i18nMessage';
 import { useHistory } from 'react-router';
 
-const VideoJs = React.lazy(() => import('./internal/videojs' /* webpackChunkName: "videojs" */));
-
 const PLAY_TIMEOUT_ERROR = 'play_timeout_error';
 const PLAY_TIMEOUT_LIMIT = 2000;
 
@@ -337,21 +336,19 @@ function VideoViewer(props: Props) {
       )}
 
       {!isFetchingAd && (
-        <React.Suspense fallback={null}>
-          <VideoJs
-            adUrl={adUrl}
-            source={adUrl || source}
-            sourceType={forcePlayer || adUrl ? 'video/mp4' : contentType}
-            isAudio={isAudio}
-            poster={isAudio || (embedded && !autoplayIfEmbedded) ? thumbnail : ''}
-            onPlayerReady={onPlayerReady}
-            startMuted={autoplayIfEmbedded}
-            toggleVideoTheaterMode={toggleVideoTheaterMode}
-            autoplay={!embedded || autoplayIfEmbedded}
-            claimId={claimId}
-            userId={userId}
-          />
-        </React.Suspense>
+        <VideoJs
+          adUrl={adUrl}
+          source={adUrl || source}
+          sourceType={forcePlayer || adUrl ? 'video/mp4' : contentType}
+          isAudio={isAudio}
+          poster={isAudio || (embedded && !autoplayIfEmbedded) ? thumbnail : ''}
+          onPlayerReady={onPlayerReady}
+          startMuted={autoplayIfEmbedded}
+          toggleVideoTheaterMode={toggleVideoTheaterMode}
+          autoplay={!embedded || autoplayIfEmbedded}
+          claimId={claimId}
+          userId={userId}
+        />
       )}
     </div>
   );
diff --git a/ui/constants/classnames.js b/ui/constants/classnames.js
index 99eff61c1..e69de29bb 100644
--- a/ui/constants/classnames.js
+++ b/ui/constants/classnames.js
@@ -1,2 +0,0 @@
-// component/fileRenderFloating
-export const INLINE_PLAYER_WRAPPER_CLASS = 'inline-player__wrapper';
diff --git a/ui/page/embedWrapper/view.jsx b/ui/page/embedWrapper/view.jsx
index 628b41725..0ec506da7 100644
--- a/ui/page/embedWrapper/view.jsx
+++ b/ui/page/embedWrapper/view.jsx
@@ -1,6 +1,7 @@
 // @flow
 import React, { useEffect } from 'react';
 import classnames from 'classnames';
+import FileRender from 'component/fileRender';
 import FileViewerEmbeddedTitle from 'component/fileViewerEmbeddedTitle';
 import Spinner from 'component/spinner';
 import Button from 'component/button';
@@ -8,8 +9,6 @@ import Card from 'component/common/card';
 import { formatLbryUrlForWeb } from 'util/url';
 import { useHistory } from 'react-router';
 
-const FileRender = React.lazy(() => import('component/fileRender' /* webpackChunkName: "fileRender" */));
-
 type Props = {
   uri: string,
   resolveUri: (string) => void,
@@ -99,9 +98,7 @@ const EmbedWrapperPage = (props: Props) => {
     >
       <EmbedContext.Provider value>
         {readyToDisplay ? (
-          <React.Suspense fallback={null}>
-            <FileRender uri={uri} embedded />
-          </React.Suspense>
+          <FileRender uri={uri} embedded />
         ) : (
           <div className="embed__loading">
             <FileViewerEmbeddedTitle uri={uri} />
diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss
index 277e296e7..39702f933 100644
--- a/ui/scss/component/_file-render.scss
+++ b/ui/scss/component/_file-render.scss
@@ -528,7 +528,7 @@ video::-internal-media-controls-overlay-cast-button {
   .vjs-playback-rate .vjs-menu {
     // Extend the width to prevent a potential scrollbar from blocking the text.
     width: 8em;
-    left: -3em;
+    left: -2em;
   }
 }
 
diff --git a/ui/scss/component/_videojs.scss b/ui/scss/component/_videojs.scss
index 4e2f07d38..38b9b9d39 100644
--- a/ui/scss/component/_videojs.scss
+++ b/ui/scss/component/_videojs.scss
@@ -84,11 +84,6 @@
     font-size: 10px;
   }
 
-  .vjs-menu .vjs-menu-content .vjs-menu-item {
-    margin: 0 0;
-    padding: 5px 10px;
-  }
-
   // Volume slider
   .vjs-volume-panel {
     &.vjs-control {
diff --git a/ui/scss/third-party.scss b/ui/scss/third-party.scss
index 0a996d8a1..a05d80c0a 100644
--- a/ui/scss/third-party.scss
+++ b/ui/scss/third-party.scss
@@ -2,5 +2,3 @@
 
 @import '~@reach/combobox/styles.css';
 @import '~@reach/tooltip/styles.css';
-@import '~video.js/dist/alt/video-js-cdn.min.css';
-@import 'component/viewers/videoViewer/internal/plugins/videojs-overlay/plugin.scss';