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

185 lines
5.6 KiB
React
Raw Normal View History

2018-06-11 08:41:25 +02:00
// @flow
import { remote } from 'electron';
2019-09-03 16:02:04 +02:00
import React, { Suspense, Fragment } from 'react';
2018-06-11 08:41:25 +02:00
import LoadingScreen from 'component/common/loading-screen';
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';
import { formatLbryUriForWeb } from 'util/uri';
// @if TARGET='web'
import { generateStreamUrl } from 'util/lbrytv';
// @endif
2019-09-03 16:02:04 +02:00
2019-08-02 08:28:14 +02:00
import path from 'path';
import fs from 'fs';
2019-09-02 15:24:00 +02:00
import Yrbl from 'component/yrbl';
2019-04-03 07:56:58 +02:00
2019-03-08 20:20:17 +01:00
// @if TARGET='app'
2019-11-07 20:39:22 +01:00
import DocumentViewer from 'component/viewers/documentViewer';
import DocxViewer from 'component/viewers/docxViewer';
import HtmlViewer from 'component/viewers/htmlViewer';
import PdfViewer from 'component/viewers/pdfViewer';
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,
2018-06-11 08:41:25 +02:00
mediaType: string,
2019-08-02 08:28:14 +02:00
streamingUrl: string,
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,
fileName: string,
2019-09-06 02:26:03 +02:00
autoplay: boolean,
nextFileToPlay: string,
2019-09-09 19:31:00 +02:00
nextUnplayed: string,
2019-09-06 02:26:03 +02:00
history: { push: string => void },
2018-06-11 08:41:25 +02:00
};
class FileRender extends React.PureComponent<Props> {
2019-01-19 19:54:06 +01:00
constructor(props: Props) {
super(props);
2019-01-19 19:54:06 +01:00
(this: any).escapeListener = this.escapeListener.bind(this);
2019-09-06 02:26:03 +02:00
(this: any).onEndedCb = this.onEndedCb.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);
}
2019-09-06 02:26:03 +02:00
onEndedCb() {
2019-09-09 19:31:00 +02:00
const { autoplay, nextUnplayed, history } = this.props;
if (autoplay && nextUnplayed) {
history.push(formatLbryUriForWeb(nextUnplayed));
2019-09-06 02:26:03 +02:00
}
}
renderViewer() {
2019-08-06 05:25:33 +02:00
const { mediaType, currentTheme, claim, contentType, downloadPath, fileName, streamingUrl, uri } = this.props;
2019-08-02 08:28:14 +02:00
const fileType = fileName && path.extname(fileName).substring(1);
2018-06-11 08:41:25 +02:00
2019-08-13 07:35:13 +02:00
// Ideally the lbrytv api server would just replace the streaming_url returned by the sdk so we don't need this check
// https://github.com/lbryio/lbrytv/issues/51
const source = IS_WEB ? generateStreamUrl(claim.name, claim.claim_id) : streamingUrl;
2019-08-13 07:35:13 +02:00
// Human-readable files (scripts and plain-text files)
const readableFiles = ['text', 'document', 'script'];
2018-06-11 08:41:25 +02:00
// Supported mediaTypes
const mediaTypes = {
2019-03-08 20:20:17 +01:00
// @if TARGET='app'
'3D-file': <ThreeViewer source={{ fileType, downloadPath }} theme={currentTheme} />,
2019-05-16 08:32:53 +02:00
'comic-book': <ComicBookViewer source={{ fileType, downloadPath }} theme={currentTheme} />,
2019-08-06 05:25:33 +02:00
application: <AppViewer uri={uri} />,
2019-03-08 20:20:17 +01:00
// @endif
2019-09-06 02:26:03 +02:00
video: <VideoViewer uri={uri} source={source} contentType={contentType} onEndedCB={this.onEndedCb} />,
audio: <VideoViewer uri={uri} source={source} contentType={contentType} onEndedCB={this.onEndedCb} />,
2019-08-13 07:35:13 +02:00
image: <ImageViewer uri={uri} source={source} />,
2018-06-11 08:41:25 +02:00
// Add routes to viewer...
};
// Supported fileType
const fileTypes = {
2019-08-13 07:35:13 +02:00
// @if TARGET='app'
pdf: <PdfViewer source={downloadPath} />,
docx: <DocxViewer source={downloadPath} />,
html: <HtmlViewer source={downloadPath} />,
2019-10-27 19:08:34 +01:00
htm: <HtmlViewer source={downloadPath} />,
2019-08-13 07:35:13 +02:00
// @endif
// Add routes to viewer...
};
// Check for a valid fileType or mediaType
2019-08-06 05:48:41 +02:00
let viewer = (fileType && fileTypes[fileType]) || mediaTypes[mediaType];
// Check for Human-readable files
if (!viewer && readableFiles.includes(mediaType)) {
2019-08-02 08:28:14 +02:00
viewer = (
<DocumentViewer
source={{
stream: options => fs.createReadStream(downloadPath, options),
fileType,
contentType,
}}
theme={currentTheme}
/>
);
}
// @if TARGET='web'
// temp workaround to disabled paid content on web
2019-06-25 05:27:18 +02:00
if (claim && claim.value.fee && Number(claim.value.fee.amount) > 0) {
2019-03-19 07:32:53 +01:00
const paidMessage = __(
'Currently, only free content is available on lbry.tv. Try viewing it in the desktop app.'
);
const paid = <LoadingScreen status={paidMessage} spinner={false} />;
return paid;
}
// @endif
2019-09-02 15:24:00 +02:00
const unsupported = IS_WEB ? (
<div className={'content__cover--disabled'}>
<Yrbl
className={'content__cover--disabled'}
2019-09-03 16:02:04 +02:00
title={'Not available on lbry.tv'}
subtitle={
<Fragment>
<p>
{__('Good news, though! You can')}{' '}
<Button button="link" label={__('Download the desktop app')} href="https://lbry.com/get" />{' '}
{'and have access to all file types.'}
</p>
</Fragment>
}
2019-09-02 15:24:00 +02:00
uri={uri}
/>
</div>
) : (
<div className={'content__cover--disabled'}>
<Yrbl
title={'Content Downloaded'}
subtitle={'This file is unsupported here, but you can view the content in an application of your choice'}
uri={uri}
/>
</div>
);
2018-06-11 08:41:25 +02:00
// Return viewer
return viewer || unsupported;
2018-06-11 08:41:25 +02:00
}
render() {
2019-03-27 05:40:02 +01:00
return (
<div className="file-render">
<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);