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

@@ -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 = {

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>
         );
       case RENDER_MODES.IMAGE:
         return (

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,7 +243,6 @@ export default function FileRenderFloating(props: Props) {
   }
 
   return (
-    <React.Suspense fallback={null}>
     <Draggable
       onDrag={handleDragMove}
       onStart={handleDragStart}
@@ -291,7 +289,6 @@ export default function FileRenderFloating(props: Props) {
           )}
 
           {isReadyToPlay ? (
-              <React.Suspense fallback={null}>
             <FileRender
               className="draggable"
               uri={uri}
@@ -299,7 +296,6 @@ export default function FileRenderFloating(props: Props) {
               desktopPlayStartTime={desktopPlayStartTime}
               // @endif
             />
-              </React.Suspense>
           ) : (
             <LoadingScreen status={loadingMessage} />
           )}
@@ -314,6 +310,5 @@ export default function FileRenderFloating(props: Props) {
         </div>
       </div>
     </Draggable>
-    </React.Suspense>
   );
 }

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 />;
 }

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';
 
 // ****************************************************************************
 // ****************************************************************************

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';

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,7 +336,6 @@ function VideoViewer(props: Props) {
       )}
 
       {!isFetchingAd && (
-        <React.Suspense fallback={null}>
         <VideoJs
           adUrl={adUrl}
           source={adUrl || source}
@@ -351,7 +349,6 @@ function VideoViewer(props: Props) {
           claimId={claimId}
           userId={userId}
         />
-        </React.Suspense>
       )}
     </div>
   );

ui/constants/classnames.js

@@ -1,2 +0,0 @@
-// component/fileRenderFloating
-export const INLINE_PLAYER_WRAPPER_CLASS = 'inline-player__wrapper';

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>
         ) : (
           <div className="embed__loading">
             <FileViewerEmbeddedTitle uri={uri} />

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;
   }
 }
 

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 {

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';