-
- ),
- }}
- >
- There was an error. Try %refreshing_the_app_link% to fix it. If that doesn't work, try pressing
- Ctrl+R/Cmd+R.
-
- }
- />
+
+
+ ),
+ }}
+ >
+ There was an error. Try %refreshing_the_app_link% to fix it. If that doesn't work, try pressing
+ Ctrl+R/Cmd+R.
+
+ }
+ />
+
{!errorWasReported && (
diff --git a/ui/component/fileRender/view.jsx b/ui/component/fileRender/view.jsx
index 55cc914c8..cca685813 100644
--- a/ui/component/fileRender/view.jsx
+++ b/ui/component/fileRender/view.jsx
@@ -3,16 +3,11 @@ 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 ImageViewer from 'component/viewers/imageViewer';
-import AppViewer from 'component/viewers/appViewer';
import { withRouter } from 'react-router-dom';
import fs from 'fs';
import analytics from 'analytics';
import DocumentViewer from 'component/viewers/documentViewer';
-import PdfViewer from 'component/viewers/pdfViewer';
-import HtmlViewer from 'component/viewers/htmlViewer';
// @if TARGET='app'
// should match
@@ -21,6 +16,18 @@ import ComicBookViewer from 'component/viewers/comicBookViewer';
import ThreeViewer from 'component/viewers/threeViewer';
// @endif
+const AppViewer = React.lazy(() => import('component/viewers/appViewer' /* webpackChunkName: "viewers/appViewer" */));
+const HtmlViewer = React.lazy(() =>
+ import('component/viewers/htmlViewer' /* webpackChunkName: "viewers/htmlViewer" */)
+);
+const ImageViewer = React.lazy(() =>
+ import('component/viewers/imageViewer' /* webpackChunkName: "viewers/imageViewer" */)
+);
+const PdfViewer = React.lazy(() => import('component/viewers/pdfViewer' /* webpackChunkName: "viewers/pdfViewer" */));
+const VideoViewer = React.lazy(() =>
+ import('component/viewers/videoViewer' /* webpackChunkName: "viewers/videoViewer" */)
+);
+
type Props = {
uri: string,
streamingUrl: string,
@@ -85,17 +92,27 @@ class FileRender extends React.PureComponent {
case RENDER_MODES.AUDIO:
case RENDER_MODES.VIDEO:
return (
-
+
+
+
);
case RENDER_MODES.IMAGE:
- return ;
+ return (
+
+ ;
+
+ );
case RENDER_MODES.HTML:
- return ;
+ return (
+
+ ;
+
+ );
case RENDER_MODES.DOCUMENT:
case RENDER_MODES.MARKDOWN:
return (
@@ -115,7 +132,11 @@ class FileRender extends React.PureComponent {
case RENDER_MODES.DOCX:
return ;
case RENDER_MODES.PDF:
- return ;
+ return (
+
+ ;
+
+ );
case RENDER_MODES.CAD:
return (
{
/>
);
case RENDER_MODES.APPLICATION:
- return ;
+ return (
+
+ ;
+
+ );
}
return null;
diff --git a/ui/component/fileRenderFloating/view.jsx b/ui/component/fileRenderFloating/view.jsx
index 24c1002bc..81dc6d9ec 100644
--- a/ui/component/fileRenderFloating/view.jsx
+++ b/ui/component/fileRenderFloating/view.jsx
@@ -1,23 +1,24 @@
// @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,
@@ -243,72 +244,76 @@ export default function FileRenderFloating(props: Props) {
}
return (
-
-