lbry-desktop/ui/component/viewers/comicBookViewer.jsx

68 lines
1.7 KiB
React
Raw Normal View History

2019-05-09 00:47:39 +02:00
// @flow
import * as React from 'react';
import Villain from 'villain-react';
import LoadingScreen from 'component/common/loading-screen';
2020-05-08 21:09:36 +02:00
// @if TARGET='web'
import useStream from 'effects/use-stream';
2020-05-08 21:09:36 +02:00
// @endif
// @if TARGET='app'
import useFileStream from 'effects/use-stream-file';
2020-05-08 21:09:36 +02:00
// @endif
// Import default styles for Villain
import 'villain-react/dist/style.css';
2019-05-09 00:47:39 +02:00
type Props = {
source: {
file: (?string) => any,
stream: string,
},
theme: string,
2019-05-09 00:47:39 +02:00
};
let workerUrl = 'webworkers/worker-bundle.js';
2019-06-04 20:32:42 +02:00
if (process.env.NODE_ENV !== 'production') {
// Don't add a leading slash in production because electron treats it as an absolute path
workerUrl = `/${workerUrl}`;
2019-06-04 20:32:42 +02:00
}
const ComicBookViewer = (props: Props) => {
const { source, theme } = props;
let finalSource;
// @if TARGET='web'
finalSource = useStream(source.stream);
// @endif
2020-05-08 21:09:36 +02:00
// @if TARGET='app'
finalSource = useFileStream(source.file);
// @endif
// Villain options
const opts = {
theme: theme === 'dark' ? 'Dark' : 'Light',
allowFullScreen: true,
autoHideControls: false,
allowGlobalShortcuts: true,
};
2020-05-08 21:09:36 +02:00
const { error, loading, content } = finalSource;
const ready = content !== null && !loading && !error;
const errorMessage = __("Sorry, looks like we can't load the archive.");
2019-05-16 08:32:53 +02:00
return (
<div className="file-render__viewer file-render__viewer--comic">
{loading && <LoadingScreen status={__('Loading')} isDocument />}
{ready && (
<Villain source={finalSource.content} className={'comic-viewer'} options={opts} workerUrl={workerUrl} />
)}
{error && <LoadingScreen status={errorMessage} spinner={false} />}
</div>
);
};
2019-05-09 00:47:39 +02:00
export default ComicBookViewer;