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

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

@ -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 (

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

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

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

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

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

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

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

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 {
// Extend the width to prevent a potential scrollbar from blocking the text.
width: 8em;
left: -3em;
left: -2em;
}
}

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

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

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

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