LBRYCommunity/lbry-desktop
1
0
Fork 0
Code Issues 596 Pull requests 6 Projects Releases 238 Packages Wiki Activity

Revert lazy-loading videojs

Browse source 
## 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.
This commit is contained in:
infinite-persistence 2021-07-06 17:02:05 +08:00
parent d1ee904dab
commit 5d8e3d8b0a
No known key found for this signature in database
GPG key ID: B9C3252EDC3D0AA0
12 changed files with 92 additions and 121 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
ui/component/claimLink/view.jsx
View file

@ -4,7 +4,7 @@ import classnames from 'classnames';
import EmbedPlayButton from 'component/embedPlayButton'; import EmbedPlayButton from 'component/embedPlayButton';
import Button from 'component/button'; import Button from 'component/button';
import UriIndicator from 'component/uriIndicator'; 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'; import { SIMPLE_SITE } from 'config';
type Props = { type Props = {

16
ui/component/fileRender/view.jsx
View file

@ -3,6 +3,7 @@ import { remote } from 'electron';
import React from 'react'; import React from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import * as RENDER_MODES from 'constants/file_render_modes'; import * as RENDER_MODES from 'constants/file_render_modes';
import VideoViewer from 'component/viewers/videoViewer';
import { withRouter } from 'react-router-dom'; import { withRouter } from 'react-router-dom';
import fs from 'fs'; import fs from 'fs';
import analytics from 'analytics'; 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 HtmlViewer = React.lazy(() => import('component/viewers/htmlViewer' /* webpackChunkName: "htmlViewer" */));
const ImageViewer = React.lazy(() => import('component/viewers/imageViewer' /* webpackChunkName: "imageViewer" */)); const ImageViewer = React.lazy(() => import('component/viewers/imageViewer' /* webpackChunkName: "imageViewer" */));
const PdfViewer = React.lazy(() => import('component/viewers/pdfViewer' /* webpackChunkName: "pdfViewer" */)); const PdfViewer = React.lazy(() => import('component/viewers/pdfViewer' /* webpackChunkName: "pdfViewer" */));
const VideoViewer = React.lazy(() => import('component/viewers/videoViewer' /* webpackChunkName: "videoViewer" */));
type Props = { type Props = {
uri: string, uri: string,
@ -86,14 +86,12 @@ class FileRender extends React.PureComponent<Props> {
case RENDER_MODES.AUDIO: case RENDER_MODES.AUDIO:
case RENDER_MODES.VIDEO: case RENDER_MODES.VIDEO:
return ( return (
<React.Suspense fallback={null}> <VideoViewer
<VideoViewer uri={uri}
uri={uri} source={source}
source={source} contentType={contentType}
contentType={contentType} desktopPlayStartTime={desktopPlayStartTime}
desktopPlayStartTime={desktopPlayStartTime} />
/>
</React.Suspense>
); );
case RENDER_MODES.IMAGE: case RENDER_MODES.IMAGE:
return ( return (

131
ui/component/fileRenderFloating/view.jsx
View file

@ -1,24 +1,23 @@
// @flow // @flow
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
import * as RENDER_MODES from 'constants/file_render_modes'; import * as RENDER_MODES from 'constants/file_render_modes';
import { INLINE_PLAYER_WRAPPER_CLASS } from 'constants/classnames';
import React, { useEffect, useState } from 'react'; import React, { useEffect, useState } from 'react';
import Button from 'component/button'; import Button from 'component/button';
import classnames from 'classnames'; import classnames from 'classnames';
import LoadingScreen from 'component/common/loading-screen'; import LoadingScreen from 'component/common/loading-screen';
import FileRender from 'component/fileRender';
import UriIndicator from 'component/uriIndicator'; import UriIndicator from 'component/uriIndicator';
import usePersistedState from 'effects/use-persisted-state'; import usePersistedState from 'effects/use-persisted-state';
import { PRIMARY_PLAYER_WRAPPER_CLASS } from 'page/file/view'; import { PRIMARY_PLAYER_WRAPPER_CLASS } from 'page/file/view';
import Draggable from 'react-draggable';
import { onFullscreenChange } from 'util/full-screen'; import { onFullscreenChange } from 'util/full-screen';
import { useIsMobile } from 'effects/use-screensize'; import { useIsMobile } from 'effects/use-screensize';
import debounce from 'util/debounce'; import debounce from 'util/debounce';
import { useHistory } from 'react-router'; 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 IS_DESKTOP_MAC = typeof process === 'object' ? process.platform === 'darwin' : false;
const DEBOUNCE_WINDOW_RESIZE_HANDLER_MS = 60; const DEBOUNCE_WINDOW_RESIZE_HANDLER_MS = 60;
export const INLINE_PLAYER_WRAPPER_CLASS = 'inline-player__wrapper';
type Props = { type Props = {
isFloating: boolean, isFloating: boolean,
@ -244,76 +243,72 @@ export default function FileRenderFloating(props: Props) {
} }
return ( return (
<React.Suspense fallback={null}> <Draggable
<Draggable onDrag={handleDragMove}
onDrag={handleDragMove} onStart={handleDragStart}
onStart={handleDragStart} onStop={handleDragStop}
onStop={handleDragStop} defaultPosition={position}
defaultPosition={position} position={isFloating ? position : { x: 0, y: 0 }}
position={isFloating ? position : { x: 0, y: 0 }} bounds="parent"
bounds="parent" disabled={!isFloating}
disabled={!isFloating} handle=".draggable"
handle=".draggable" cancel=".button"
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 <div
className={classnames('content__viewer', { className={classnames('content__wrapper', {
'content__viewer--floating': isFloating, 'content__wrapper--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 {isFloating && (
className={classnames('content__wrapper', { <Button
'content__wrapper--floating': isFloating, title={__('Close')}
})} onClick={closeFloatingPlayer}
> icon={ICONS.REMOVE}
{isFloating && ( button="primary"
<Button className="content__floating-close"
title={__('Close')} />
onClick={closeFloatingPlayer} )}
icon={ICONS.REMOVE}
button="primary"
className="content__floating-close"
/>
)}
{isReadyToPlay ? ( {isReadyToPlay ? (
<React.Suspense fallback={null}> <FileRender
<FileRender className="draggable"
className="draggable" uri={uri}
uri={uri} // @if TARGET='app'
// @if TARGET='app' desktopPlayStartTime={desktopPlayStartTime}
desktopPlayStartTime={desktopPlayStartTime} // @endif
// @endif />
/> ) : (
</React.Suspense> <LoadingScreen status={loadingMessage} />
) : ( )}
<LoadingScreen status={loadingMessage} /> {isFloating && (
)} <div className="draggable content__info">
{isFloating && ( <div className="claim-preview__title" title={title || uri}>
<div className="draggable content__info"> <Button label={title || uri} navigate={uri} button="link" className="content__floating-link" />
<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} />
</div> </div>
)} <UriIndicator link uri={uri} />
</div> </div>
)}
</div> </div>
</Draggable> </div>
</React.Suspense> </Draggable>
); );
} }

11
ui/component/fileRenderInline/view.jsx
View file

@ -1,10 +1,9 @@
// @flow // @flow
import React, { useState, useEffect } from 'react'; import React, { useState, useEffect } from 'react';
import FileRender from 'component/fileRender';
import LoadingScreen from 'component/common/loading-screen'; import LoadingScreen from 'component/common/loading-screen';
import { NON_STREAM_MODES } from 'constants/file_render_modes'; import { NON_STREAM_MODES } from 'constants/file_render_modes';
const FileRender = React.lazy(() => import('component/fileRender' /* webpackChunkName: "fileRender" */));
type Props = { type Props = {
isPlaying: boolean, isPlaying: boolean,
fileInfo: FileListItem, fileInfo: FileListItem,
@ -70,11 +69,5 @@ export default function FileRenderInline(props: Props) {
return null; return null;
} }
return renderContent ? ( return renderContent ? <FileRender uri={uri} /> : <LoadingScreen isDocument />;
<React.Suspense fallback={null}>
<FileRender uri={uri} />
</React.Suspense>
) : (
<LoadingScreen isDocument />
);
} }

2
ui/component/viewers/videoViewer/internal/overlays.js
View file

@ -4,7 +4,7 @@ import * as ICONS from 'constants/icons';
import ReactDOMServer from 'react-dom/server'; import ReactDOMServer from 'react-dom/server';
import './plugins/videojs-overlay/plugin'; import './plugins/videojs-overlay/plugin';
// import './plugins/videojs-overlay/plugin.scss'; --> 'scss/third-party.scss' import './plugins/videojs-overlay/plugin.scss';
// **************************************************************************** // ****************************************************************************
// **************************************************************************** // ****************************************************************************

2
ui/component/viewers/videoViewer/internal/videojs.jsx
View file

@ -5,7 +5,7 @@ import Button from 'component/button';
import * as ICONS from 'constants/icons'; import * as ICONS from 'constants/icons';
import classnames from 'classnames'; import classnames from 'classnames';
import videojs from 'video.js'; 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 eventTracking from 'videojs-event-tracking';
import * as OVERLAY from './overlays'; import * as OVERLAY from './overlays';
import './plugins/videojs-mobile-ui/plugin'; import './plugins/videojs-mobile-ui/plugin';

31
ui/component/viewers/videoViewer/view.jsx
View file

@ -5,6 +5,7 @@ import * as ICONS from 'constants/icons';
import React, { useEffect, useState, useContext, useCallback } from 'react'; import React, { useEffect, useState, useContext, useCallback } from 'react';
import { stopContextMenu } from 'util/context-menu'; import { stopContextMenu } from 'util/context-menu';
import type { Player } from './internal/videojs'; import type { Player } from './internal/videojs';
import VideoJs from './internal/videojs';
import analytics from 'analytics'; import analytics from 'analytics';
import { EmbedContext } from 'page/embedWrapper/view'; import { EmbedContext } from 'page/embedWrapper/view';
import classnames from 'classnames'; import classnames from 'classnames';
@ -20,8 +21,6 @@ import Button from 'component/button';
import I18nMessage from 'component/i18nMessage'; import I18nMessage from 'component/i18nMessage';
import { useHistory } from 'react-router'; import { useHistory } from 'react-router';
const VideoJs = React.lazy(() => import('./internal/videojs' /* webpackChunkName: "videojs" */));
const PLAY_TIMEOUT_ERROR = 'play_timeout_error'; const PLAY_TIMEOUT_ERROR = 'play_timeout_error';
const PLAY_TIMEOUT_LIMIT = 2000; const PLAY_TIMEOUT_LIMIT = 2000;
@ -337,21 +336,19 @@ function VideoViewer(props: Props) {
)} )}
{!isFetchingAd && ( {!isFetchingAd && (
<React.Suspense fallback={null}> <VideoJs
<VideoJs adUrl={adUrl}
adUrl={adUrl} source={adUrl || source}
source={adUrl || source} sourceType={forcePlayer || adUrl ? 'video/mp4' : contentType}
sourceType={forcePlayer || adUrl ? 'video/mp4' : contentType} isAudio={isAudio}
isAudio={isAudio} poster={isAudio || (embedded && !autoplayIfEmbedded) ? thumbnail : ''}
poster={isAudio || (embedded && !autoplayIfEmbedded) ? thumbnail : ''} onPlayerReady={onPlayerReady}
onPlayerReady={onPlayerReady} startMuted={autoplayIfEmbedded}
startMuted={autoplayIfEmbedded} toggleVideoTheaterMode={toggleVideoTheaterMode}
toggleVideoTheaterMode={toggleVideoTheaterMode} autoplay={!embedded || autoplayIfEmbedded}
autoplay={!embedded || autoplayIfEmbedded} claimId={claimId}
claimId={claimId} userId={userId}
userId={userId} />
/>
</React.Suspense>
)} )}
</div> </div>
); );

2
ui/constants/classnames.js
View file

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

7
ui/page/embedWrapper/view.jsx
View file

@ -1,6 +1,7 @@
// @flow // @flow
import React, { useEffect } from 'react'; import React, { useEffect } from 'react';
import classnames from 'classnames'; import classnames from 'classnames';
import FileRender from 'component/fileRender';
import FileViewerEmbeddedTitle from 'component/fileViewerEmbeddedTitle'; import FileViewerEmbeddedTitle from 'component/fileViewerEmbeddedTitle';
import Spinner from 'component/spinner'; import Spinner from 'component/spinner';
import Button from 'component/button'; import Button from 'component/button';
@ -8,8 +9,6 @@ import Card from 'component/common/card';
import { formatLbryUrlForWeb } from 'util/url'; import { formatLbryUrlForWeb } from 'util/url';
import { useHistory } from 'react-router'; import { useHistory } from 'react-router';
const FileRender = React.lazy(() => import('component/fileRender' /* webpackChunkName: "fileRender" */));
type Props = { type Props = {
uri: string, uri: string,
resolveUri: (string) => void, resolveUri: (string) => void,
@ -99,9 +98,7 @@ const EmbedWrapperPage = (props: Props) => {
> >
<EmbedContext.Provider value> <EmbedContext.Provider value>
{readyToDisplay ? ( {readyToDisplay ? (
<React.Suspense fallback={null}> <FileRender uri={uri} embedded />
<FileRender uri={uri} embedded />
</React.Suspense>
) : ( ) : (
<div className="embed__loading"> <div className="embed__loading">
<FileViewerEmbeddedTitle uri={uri} /> <FileViewerEmbeddedTitle uri={uri} />

2
ui/scss/component/_file-render.scss
View file

@ -528,7 +528,7 @@ video::-internal-media-controls-overlay-cast-button {
.vjs-playback-rate .vjs-menu { .vjs-playback-rate .vjs-menu {
// Extend the width to prevent a potential scrollbar from blocking the text. // Extend the width to prevent a potential scrollbar from blocking the text.
width: 8em; width: 8em;
left: -3em; left: -2em;
} }
} }

5
ui/scss/component/_videojs.scss
View file

@ -84,11 +84,6 @@
font-size: 10px; font-size: 10px;
} }
.vjs-menu .vjs-menu-content .vjs-menu-item {
margin: 0 0;
padding: 5px 10px;
}
// Volume slider // Volume slider
.vjs-volume-panel { .vjs-volume-panel {
&.vjs-control { &.vjs-control {

2
ui/scss/third-party.scss
View file

@ -2,5 +2,3 @@
@import '~@reach/combobox/styles.css'; @import '~@reach/combobox/styles.css';
@import '~@reach/tooltip/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';