diff --git a/ui/component/viewers/comicBookViewer.jsx b/ui/component/viewers/comicBookViewer.jsx index 6377b0700..2a8876b24 100644 --- a/ui/component/viewers/comicBookViewer.jsx +++ b/ui/component/viewers/comicBookViewer.jsx @@ -1,13 +1,19 @@ // @flow import * as React from 'react'; import Villain from 'villain-react'; +import useFileStream from 'effects/use-stream-file' +import LoadingScreen from 'component/common/loading-screen'; import 'villain-react/dist/style.css'; type Props = { + source: { + file: (?string) => any, + stream: string, + }, theme: string, - source: string, }; + let workerUrl = 'webworkers/worker-bundle.js'; if (process.env.NODE_ENV !== 'production') { @@ -15,25 +21,31 @@ if (process.env.NODE_ENV !== 'production') { workerUrl = `/${workerUrl}`; } -class ComicBookViewer extends React.PureComponent { - render() { - const { source } = this.props || {}; - // Archive source - const file = `file://${source}`; +const ComicBookViewer = ( props: Props) => { + const { source, theme } = props + const { stream, file } = source + + // @if TARGET='app' + const finalSource = useFileStream(file) + // @endif + // Villain options const opts = { - theme: this.props.theme === 'dark' ? 'Dark' : 'Light', + theme: theme === 'dark' ? 'Dark' : 'Light', allowFullScreen: true, autoHideControls: false, allowGlobalShortcuts: true, }; + const errorMessage = __("Sorry, looks like we can't load the archive."); + return (
- + { loading && } + { ready && } + { error && }
); } -} export default ComicBookViewer;