update comicbook viewer

- convert to functional component
- use hooks to load stream

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<Props> {
+const ComicBookViewer = ( props: Props) => {
-  render() {
+    const { source, theme } = props
-    const { source } = this.props || {};
+    const { stream, file } =  source
-    // Archive source
+
-    const file = `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 (
       <div className="file-render__viewer  file-render__viewer--comic">
-        <Villain source={file} className={'comic-viewer'} options={opts} workerUrl={workerUrl} />
+        { loading && <LoadingScreen status={__('Loading')} />}
+        { ready && <Villain source={finalSource.content} className={'comic-viewer'} options={opts} workerUrl={workerUrl} /> }
+        { error && <LoadingScreen status={errorMessage} spinner={false} /> }
       </div>
     );
   }
-}
 
 export default ComicBookViewer;