From 30f3ddddcd407729ee24cbbb0e23b28b1d87a545 Mon Sep 17 00:00:00 2001 From: Gerhard Sletten Date: Mon, 16 Dec 2019 14:49:26 +0100 Subject: [PATCH] Added showcase to upload own epub to demo + fixes for changes the the url-prop --- package-lock.json | 6 ++++ package.json | 1 + src/App.js | 54 +++++++++++++++++++++++--------- src/Components.js | 30 ++++++++++++++---- src/modules/EpubView/EpubView.js | 18 +++++++++-- 5 files changed, 86 insertions(+), 23 deletions(-) diff --git a/package-lock.json b/package-lock.json index 6e3bbf9..0928c27 100644 --- a/package-lock.json +++ b/package-lock.json @@ -12527,6 +12527,12 @@ "integrity": "sha512-ueZzLmHltszTshDMwyfELDq8zOA803wQ1ZuzCccXa1m57k1PxSHfflPD5W9YIiTXLs0JTLzoj6o1LuM5N6zzNA==", "dev": true }, + "react-file-reader-input": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/react-file-reader-input/-/react-file-reader-input-2.0.0.tgz", + "integrity": "sha512-1XgkCpwMnNQsuOIy938UCntz8Xzwt9ECwHaH3cCfIQK1SPpH+y7gCYtqEcb6Rm0hAUq7Lp9+Ljoti9zGMswYrQ==", + "dev": true + }, "react-is": { "version": "16.9.0", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.9.0.tgz", diff --git a/package.json b/package.json index 4ce4e7f..80a08d8 100644 --- 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 index 48554d9..64b635a 100644 --- 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 ( - + - - - Use full browser window - - + + + + Upload local epub + + + Use full browser window + + + diff --git a/src/Components.js b/src/Components.js index efc5f0f..bd88b58 100644 --- 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 index 8c00a59..b98bd9c 100644 --- 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() {