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.
2021-07-06 17:02:05 +08:00 · 2021-07-06 17:02:05 +08:00 · 5d8e3d8b0a
parent d1ee904dab
commit 5d8e3d8b0a
12 changed files with 92 additions and 121 deletions
--- 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 = {
--- 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 (
--- 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>
  );
 }
--- 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 />;
 }
--- 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';

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

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