lbry-desktop/ui/component/fileRender/view.jsx

213 lines
6 KiB
React
Raw Normal View History

2018-06-11 08:41:25 +02:00
// @flow
2020-03-27 14:57:11 +01:00
import { URL } from 'config';
import { remote } from 'electron';
import React, { Suspense } from 'react';
2020-01-06 19:32:35 +01:00
import classnames from 'classnames';
import * as RENDER_MODES from 'constants/file_render_modes';
2019-04-03 07:56:58 +02:00
import VideoViewer from 'component/viewers/videoViewer';
2019-08-06 05:25:33 +02:00
import ImageViewer from 'component/viewers/imageViewer';
import AppViewer from 'component/viewers/appViewer';
2019-09-03 16:02:04 +02:00
import Button from 'component/button';
2019-09-06 02:26:03 +02:00
import { withRouter } from 'react-router-dom';
2020-01-27 19:52:25 +01:00
import AutoplayCountdown from 'component/autoplayCountdown';
2020-03-27 14:57:11 +01:00
import { formatLbryUrlForWeb } from 'util/url';
2019-08-02 08:28:14 +02:00
import fs from 'fs';
2019-04-03 07:56:58 +02:00
2019-11-07 20:39:22 +01:00
import DocumentViewer from 'component/viewers/documentViewer';
import PdfViewer from 'component/viewers/pdfViewer';
import HtmlViewer from 'component/viewers/htmlViewer';
// @if TARGET='app'
// should match
import DocxViewer from 'component/viewers/docxViewer';
2019-11-07 20:39:22 +01:00
import ComicBookViewer from 'component/viewers/comicBookViewer';
import ThreeViewer from 'component/viewers/threeViewer';
2019-03-08 20:20:17 +01:00
// @endif
2018-06-11 08:41:25 +02:00
type Props = {
2019-08-06 05:25:33 +02:00
uri: string,
2019-08-02 08:28:14 +02:00
streamingUrl: string,
2020-01-27 22:37:54 +01:00
embedded?: boolean,
2019-08-02 08:28:14 +02:00
contentType: string,
2019-04-24 16:02:08 +02:00
claim: StreamClaim,
2018-06-11 08:41:25 +02:00
currentTheme: string,
2019-08-06 05:25:33 +02:00
downloadPath: string,
fileExtension: string,
2020-01-27 20:32:20 +01:00
autoplay: boolean,
setPlayingUri: (string | null) => void,
currentlyFloating: boolean,
renderMode: string,
2020-01-31 16:46:50 +01:00
thumbnail: string,
onStartedCallback: () => void,
2018-06-11 08:41:25 +02:00
};
2020-01-27 19:52:25 +01:00
type State = {
showAutoplayCountdown: boolean,
showEmbededMessage: boolean,
2020-01-27 19:52:25 +01:00
};
class FileRender extends React.PureComponent<Props, State> {
2019-01-19 19:54:06 +01:00
constructor(props: Props) {
super(props);
2020-01-27 19:52:25 +01:00
this.state = {
showAutoplayCountdown: false,
showEmbededMessage: false,
2020-01-27 19:52:25 +01:00
};
2019-01-19 19:54:06 +01:00
(this: any).escapeListener = this.escapeListener.bind(this);
2020-01-27 20:32:20 +01:00
(this: any).onEndedAutoplay = this.onEndedAutoplay.bind(this);
(this: any).onEndedEmbedded = this.onEndedEmbedded.bind(this);
2020-01-27 20:32:20 +01:00
(this: any).getOnEndedCb = this.getOnEndedCb.bind(this);
(this: any).onStartedCb = this.onStartedCb.bind(this);
}
componentDidMount() {
window.addEventListener('keydown', this.escapeListener, true);
}
componentWillUnmount() {
window.removeEventListener('keydown', this.escapeListener, true);
}
2019-01-19 19:54:06 +01:00
escapeListener(e: SyntheticKeyboardEvent<*>) {
if (e.keyCode === 27) {
e.preventDefault();
this.exitFullscreen();
return false;
}
}
exitFullscreen() {
remote.getCurrentWindow().setFullScreen(false);
}
onStartedCb() {
const { onStartedCallback } = this.props;
if (onStartedCallback) {
onStartedCallback();
}
}
2020-01-27 20:32:20 +01:00
getOnEndedCb() {
const { setPlayingUri, currentlyFloating, embedded } = this.props;
if (embedded) {
return this.onEndedEmbedded;
}
2020-01-27 20:32:20 +01:00
if (!currentlyFloating) {
return this.onEndedAutoplay;
}
return () => setPlayingUri(null);
}
onEndedAutoplay() {
const { autoplay } = this.props;
if (autoplay) {
this.setState({ showAutoplayCountdown: true });
}
2019-09-06 02:26:03 +02:00
}
onEndedEmbedded() {
this.setState({ showEmbededMessage: true });
}
renderViewer() {
const { currentTheme, contentType, downloadPath, fileExtension, streamingUrl, uri, renderMode } = this.props;
const source = streamingUrl;
switch (renderMode) {
case RENDER_MODES.AUDIO:
case RENDER_MODES.VIDEO:
return (
<VideoViewer
uri={uri}
source={source}
contentType={contentType}
onEndedCb={this.getOnEndedCb()}
onStartedCb={this.onStartedCb}
/>
);
case RENDER_MODES.IMAGE:
return <ImageViewer uri={uri} source={source} />;
case RENDER_MODES.HTML:
return <HtmlViewer source={downloadPath || source} />;
case RENDER_MODES.DOCUMENT:
case RENDER_MODES.MARKDOWN:
return (
<DocumentViewer
source={{
// @if TARGET='app'
file: options => fs.createReadStream(downloadPath, options),
// @endif
stream: source,
fileExtension,
contentType,
}}
renderMode={renderMode}
theme={currentTheme}
/>
);
case RENDER_MODES.DOCX:
return <DocxViewer source={downloadPath} />;
case RENDER_MODES.PDF:
return <PdfViewer source={downloadPath || source} />;
case RENDER_MODES.CAD:
return (
<ThreeViewer
source={{
fileExtension,
downloadPath,
// ThreeViewer stopped working here https://github.com/lbryio/lbry-desktop/pull/3918/files#diff-440a978a7dea2b088abd77a26fdae9b8L129
// It requires `fileType`
}}
theme={currentTheme}
/>
);
case RENDER_MODES.COMIC:
return <ComicBookViewer source={{ fileExtension, downloadPath }} theme={currentTheme} />;
case RENDER_MODES.APPLICATION:
return <AppViewer uri={uri} />;
}
return null;
2018-06-11 08:41:25 +02:00
}
2018-06-11 08:41:25 +02:00
render() {
const { uri, currentlyFloating, embedded, renderMode } = this.props;
const { showAutoplayCountdown, showEmbededMessage } = this.state;
2020-03-27 14:57:11 +01:00
const lbrytvLink = `${URL}${formatLbryUrlForWeb(uri)}?src=embed`;
2020-01-06 19:32:35 +01:00
2019-03-27 05:40:02 +01:00
return (
2020-01-27 22:37:54 +01:00
<div
className={classnames({
'file-render': !embedded,
'file-render--document': RENDER_MODES.TEXT_MODES.includes(renderMode) && !embedded,
2020-01-27 22:37:54 +01:00
'file-render__embed': embedded,
})}
>
{embedded && showEmbededMessage && (
<div className="video-overlay__wrapper">
2020-03-27 14:57:11 +01:00
<div className="video-overlay__title">{__('See more on lbry.tv')}</div>
<div className="video-overlay__actions">
<div className="section__actions--centered">
2020-03-27 14:57:11 +01:00
<Button label={__('Explore')} button="primary" href={lbrytvLink} />
</div>
</div>
</div>
)}
2020-01-27 20:32:20 +01:00
{!currentlyFloating && showAutoplayCountdown && <AutoplayCountdown uri={uri} />}
<Suspense fallback={<div />}>{this.renderViewer()}</Suspense>
2019-03-27 05:40:02 +01:00
</div>
);
2018-06-11 08:41:25 +02:00
}
}
2019-09-06 02:26:03 +02:00
export default withRouter(FileRender);