Added showcase to upload own epub to demo + fixes for changes the the…

… url-prop
salewan · Dec 16, 2019 · 30f3ddd · 30f3ddd
1 parent 32850fb
commit 30f3ddd
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "pretty-quick": "^2.0.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
+    "react-file-reader-input": "^2.0.0",
     "react-scripts": "^3.3.0",
     "rimraf": "^3.0.0",
     "styled-components": "^4.4.1",

diff --git a/src/App.js b/src/App.js
@@ -1,18 +1,25 @@
 import React, { Component } from "react";
 import { createGlobalStyle } from "styled-components";
+import FileReaderInput from "react-file-reader-input";
 import { ReactReader } from "./modules";
 import {
   Container,
   ReaderContainer,
   Bar,
+  LogoWrapper,
   Logo,
-  CloseButton,
+  GenericButton,
   CloseIcon,
-  FontSizeButton
+  FontSizeButton,
+  ButtonWrapper
 } from "./Components";
 
 const storage = global.localStorage || null;
 
+const DEMO_URL =
+  "https://gerhardsletten.github.io/react-reader/files/alice.epub";
+const DEMO_NAME = "Alice in wonderland";
+
 const GlobalStyle = createGlobalStyle`
   * {
     font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
@@ -49,6 +56,8 @@ class App extends Component {
         storage && storage.getItem("epub-location")
           ? storage.getItem("epub-location")
           : 2,
+      localFile: null,
+      localName: null,
       largeText: false
     };
     this.rendition = null;
@@ -97,32 +106,47 @@ class App extends Component {
     this.rendition = rendition;
     rendition.themes.fontSize(largeText ? "140%" : "100%");
   };
-
+  handleChangeFile = (event, results) => {
+    if (results.length > 0) {
+      const [e, file] = results[0];
+      if (file.type !== "application/epub+zip") {
+        return alert("Unsupported type");
+      }
+      this.setState({
+        localFile: e.target.result,
+        localName: file.name,
+        location: 0
+      });
+    }
+  };
   render() {
-    const { fullscreen, location } = this.state;
+    const { fullscreen, location, localFile, localName } = this.state;
     return (
       <Container>
         <GlobalStyle />
         <Bar>
-          <a href="https://github.com/gerhardsletten/react-reader">
+          <LogoWrapper href="https://github.com/gerhardsletten/react-reader">
             <Logo
               src="https://gerhardsletten.github.io/react-reader/files/react-reader.svg"
               alt="React-reader - powered by epubjs"
             />
-          </a>
-          <CloseButton onClick={this.toggleFullscreen}>
-            Use full browser window
-            <CloseIcon />
-          </CloseButton>
+          </LogoWrapper>
+          <ButtonWrapper>
+            <FileReaderInput as="buffer" onChange={this.handleChangeFile}>
+              <GenericButton>Upload local epub</GenericButton>
+            </FileReaderInput>
+            <GenericButton onClick={this.toggleFullscreen}>
+              Use full browser window
+              <CloseIcon />
+            </GenericButton>
+          </ButtonWrapper>
         </Bar>
         <ReaderContainer fullscreen={fullscreen}>
           <ReactReader
-            url={
-              "https://gerhardsletten.github.io/react-reader/files/alice.epub"
-            }
-            locationChanged={this.onLocationChanged}
-            title={"Alice in wonderland"}
+            url={localFile || DEMO_URL}
+            title={localName || DEMO_NAME}
             location={location}
+            locationChanged={this.onLocationChanged}
             getRendition={this.getRendition}
           />
           <FontSizeButton onClick={this.onToggleFontSize}>

diff --git a/src/Components.js b/src/Components.js
@@ -23,6 +23,24 @@ export const Bar = styled.header`
   top: 10px;
   left: 20px;
   right: 20px;
+
+  ${breakpoint("tablet")`
+    display: flex;
+    align-items: flex-end;
+  `};
+`;
+export const ButtonWrapper = styled.div`
+  ${breakpoint("mobile")`
+    display: flex;
+    justify-content: center;
+    align-items: baseline;
+    padding-top: 0.5rem;
+  `};
+`;
+export const LogoWrapper = styled.a`
+  ${breakpoint("tablet")`
+    margin-right: auto;
+  `};
 `;
 export const Logo = styled.img`
   width: 250px;
@@ -46,21 +64,21 @@ const Button = styled.button`
   appearance: none;
   background: none;
 `;
-export const CloseButton = styled(Button)`
+export const GenericButton = styled(Button)`
   color: #808080;
-  float: right;
-  margin: 0;
   font-size: 12px;
+  display: inline-block;
+  margin-left: 1rem;
   ${breakpoint("tablet")`
-    margin-top: 75px;
     font-size: 16px;
+    
   `};
 `;
 export const CloseIcon = styled.i`
   vertical-align: middle;
   display: inline-block;
-  width: 30px;
-  height: 30px;
+  width: 2rem;
+  height: 2rem;
   background: #666;
   margin-left: 5px;
   border-radius: 50%;

diff --git a/src/modules/EpubView/EpubView.js b/src/modules/EpubView/EpubView.js
@@ -18,7 +18,15 @@ class EpubView extends Component {
   }
 
   componentDidMount() {
+    this.initBook(true);
+    document.addEventListener("keydown", this.handleKeyPress, false);
+  }
+
+  initBook(first) {
     const { url, tocChanged, epubInitOptions } = this.props;
+    if (this.book) {
+      this.book.destroy();
+    }
     this.book = new Epub(url, { epubInitOptions });
     this.book.loaded.navigation.then(({ toc }) => {
       this.setState(
@@ -32,7 +40,6 @@ class EpubView extends Component {
         }
       );
     });
-    document.addEventListener("keydown", this.handleKeyPress, false);
   }
 
   componentWillUnmount() {
@@ -41,7 +48,11 @@ class EpubView extends Component {
   }
 
   shouldComponentUpdate(nextProps) {
-    return !this.state.isLoaded || nextProps.location !== this.props.location;
+    return (
+      !this.state.isLoaded ||
+      nextProps.location !== this.props.location ||
+      nextProps.location !== this.props.location
+    );
   }
 
   componentDidUpdate(prevProps) {
@@ -51,6 +62,9 @@ class EpubView extends Component {
     ) {
       this.rendition.display(this.props.location);
     }
+    if (prevProps.url !== this.props.url) {
+      this.initBook();
+    }
   }
 
   initReader() {