Merge branch 'master' into updated-opds

InfiniteLibrary · Mar 22, 2017 · 0b4498a · 0b4498a
2 parents 6fbd71b + 28886b4
commit 0b4498a
Show file tree

Hide file tree

Showing 38 changed files with 209 additions and 115 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -14,6 +14,7 @@
     "import/no-unresolved": ["error", { "ignore": ["electron"] }],
     "import/no-extraneous-dependencies": "off",
     "import/no-dynamic-require": "off",
+    "jsx-a11y/no-static-element-interactions": "off",
     "no-console": "off",
     "no-plusplus": "off",
     "no-underscore-dangle": "off",

diff --git a/.gitattributes b/.gitattributes
@@ -2,3 +2,4 @@
 *.png binary
 *.ico binary
 *.icns binary
+*.ttf binary
diff --git a/README.md b/README.md
@@ -1,7 +1,9 @@
 # infinite-electron
-An [Electron](http://electron.atom.io/)-based cross-platform desktop reader for free ebooks (EPUB) from Project Gutenberg and [Unglue.it](https://unglue.it). 
+An [Electron](http://electron.atom.io/)-based cross-platform desktop reader for free ebooks (EPUB) from Project Gutenberg and [Unglue.it](https://unglue.it).
 The InfiniteLibrary team has grown out of two [Codex Hackathons](http://codexhackathon.com/).
 
+![Infinite Reader](http://i.imgur.com/iLMH42N.jpg)
+
 ## Stretch goals
 
 - Add your own DRM-free ebooks.
@@ -59,22 +61,6 @@ $ UPGRADE_EXTENSIONS=1 yarn run dev
 $ set UPGRADE_EXTENSIONS=1 && yarn run dev
 ```
 
-## CSS Modules
-
-This boilerplate out of the box is configured to use [css-modules](https://github.com/css-modules/css-modules).
-
-All `.css` file extensions will use css-modules unless it has `.global.css`.
-
-If you need global styles, stylesheets with `.global.css` will not go through the
-css-modules loader. e.g. `app.global.css`
-
-If you want to import global css libraries (like `bootstrap`), you can just write the following code in `.global.css`:
-
-```css
-@import "~bootstrap/dist/css/bootstrap.css";
-```
-
-
 ## Packaging
 
 To package apps for the local platform:
@@ -107,12 +93,6 @@ $ yarn run build
 $ yarn start
 ```
 
-To run End-to-End Test
-
-```bash
-$ yarn run build
-$ yarn run test-e2e
-```
 
 #### Options
 

diff --git a/app/app.html b/app/app.html
@@ -9,17 +9,6 @@
       integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
       crossorigin="anonymous"
     >
-    <script>
-      (function() {
-        if (!process.env.HOT) {
-          const link = document.createElement('link');
-          link.rel = 'stylesheet';
-          link.href = './dist/style.css';
-          // HACK: Writing the script path should be done with webpack
-          document.getElementsByTagName('head')[0].appendChild(link);
-        }
-      }());
-    </script>
   </head>
   <body>
     <div id="root"></div>

diff --git a/app/app.icns b/app/app.icns
diff --git a/app/app.scss b/app/app.scss
@@ -1,5 +1,8 @@
 $family-primary: 'Helvetica Neue', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
 $super-color: #ffca29;
+$link-color: #00d1b2;
+$link-hover: darken($link-color, 0.5);
+
 @import '~bulma/bulma.sass';
 
 .input {

diff --git a/resources/books.json → app/books.json b/resources/books.json → app/books.json
diff --git a/app/components/BookDetails/index.js b/app/components/BookDetails/index.js
@@ -5,10 +5,9 @@ import './BookDetails.scss';
 export default class BookDetails extends Component {
   render() {
     const book = this.props.book;
-    console.log(this.props.book);
-
     const bookSummary = {
-      __html: book.summary || 'No Description Available.' };
+      __html: book.summary || 'No Description Available.'
+    };
 
     return (
       <div className="book-details">

diff --git a/app/components/Epub/index.js b/app/components/Epub/index.js
@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, findDOMNode } from 'react';
 import ePub from 'epubjs';
 import getStreamHost from '../../utils/get-stream-host';
 import './Epub.scss';
@@ -8,6 +8,7 @@ class Epub extends Component {
   constructor(props) {
     super(props);
     this.book = ePub();
+    this._visibleLocation = 0;
   }
 
   componentWillMount() {
@@ -22,6 +23,36 @@ class Epub extends Component {
   }
 
   componentDidMount() {
+    this._visibleLocation = this.props.location || 0;
+
+    this._start();
+  }
+
+
+  componentWillUnmount() {
+    this._stop();
+  }
+
+  componentWillUpdate(nextProps) {
+    if (nextProps.location !== this.props.location) {
+      this._visibleLocation = nextProps.location;
+      this.rendition.display(this._visibleLocation);
+    }
+
+    if (nextProps.theme !== this.props.theme) {
+      this.rendition.themes.apply(nextProps.theme);
+    }
+
+    if (nextProps.fontSize !== this.props.fontSize) {
+      this.rendition.themes.fontSize(nextProps.fontSize);
+    }
+  }
+
+  display(what) {
+    this.rendition && this.rendition.display(what);
+  }
+
+  _start() {
     this.rendition = this.book.renderTo('stage', {
       flow: this.props.flow || 'paginated',
       minSpreadWidth: 550,
@@ -34,16 +65,20 @@ class Epub extends Component {
     this.rendition.themes.register(`${getStreamHost()}/static/epub.css`);
     this.rendition.themes.apply('book-theme');
 
-    this.rendition.display(this.props.location || 0);
+    this.rendition.display(this._visibleLocation);
 
     this.rendition.on('locationChanged', (visibleLocation) => {
-      this._visibleLocation = visibleLocation;
+      this._visibleLocation = visibleLocation.start;
 
       if (this.props.onLocationChange) {
         this.props.onLocationChange(visibleLocation);
       }
     });
 
+    this.book.loaded.navigation.then((nav) => {
+      if (this.props.onNavigationReady) this.props.onNavigationReady(nav.toc);
+    });
+
     this.keyListener = (e) => {
       // Left Key
       if ((e.keyCode || e.which) === 37) {
@@ -60,16 +95,25 @@ class Epub extends Component {
       if (this.props.onReady) this.props.onReady(this.book);
       this.rendition.on('keyup', this.keyListener);
       document.addEventListener('keyup', this.keyListener, false);
+      window.addEventListener('resize', this._onResize.bind(this), false);
     });
 
     this.book.loaded.navigation.then((nav) => {
       if (this.props.onNavigationReady) this.props.onNavigationReady(nav.toc);
     });
   }
 
-  componentWillUnmount() {
+  _stop() {
+    this.rendition.destroy();
     this.rendition.off('keyup', this.keyListener);
     document.removeEventListener('keyup', this.keyListener, false);
+    window.removeEventListener('resize', this._onResize, false);
+  }
+
+  _onResize() {
+    this._stop();
+    clearTimeout(this.resizeTimeout);
+    this.resizeTimeout = setTimeout(this._start.bind(this), 250);
   }
 
   render() {

diff --git a/app/components/Reader/Reader.scss b/app/components/Reader/Reader.scss
@@ -1,5 +1,10 @@
+@import '../../variables.scss';
+
+$toc-menu-width: 300px;
+
 .reader__container {
   background-color: #fcfcfc;
+  padding: 25px;
 }
 
 .reader__controls {
@@ -10,3 +15,28 @@
   width: 100vw;
   z-index: 500;
 }
+
+.reader__toc {
+  background-color: $dark-gray;
+  color: #fff;
+  height: 100vh;
+  -webkit-overflow-scrolling: touch;
+  overflow-y: auto;
+  padding: $base-spacing $small-spacing;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: auto;
+  transform: translateX(-100%);
+  transition: all 0.1s ease-in-out;
+  width: $toc-menu-width;
+  z-index: 600;
+
+  &.is-visible { transform: translateX(0%); }
+
+  &__item {
+    a {}
+    a:hover { color: #fff; }
+  }
+}
diff --git a/app/components/Reader/index.js b/app/components/Reader/index.js
@@ -9,21 +9,73 @@ class Reader extends Component {
   constructor(props) {
     super(props);
     this.handleReady = this.handleReady.bind(this);
+    this.handleNavReady = this.handleNavReady.bind(this);
+  }
+
+  componentDidMount() {
+    if (this.props.book) {
+      const location = localStorage.getItem(`${this.props.book.id}-location`);
+
+      if (location) {
+        console.log('location is', location);
+        this.setState({ ...this.state, location });
+      }
+    }
   }
 
   state = {
-    isLoading: true
+    isLoading: true,
+    nav: [],
+    location: 0
   };
 
+  handleNavReady(nav) {
+    this.setState({ ...this.state, nav });
+  }
+
+  handleNavClick(item) {
+    this.setState({ ...this.state, location: item.href });
+  }
+
   handleReady() {
-    this.setState({ isLoading: false });
+    this.setState({ ...this.state, isLoading: false });
+  }
+
+  tocToggle() {
+    const navMenu = document.getElementById('toc-nav');
+
+    if (navMenu.classList.contains('is-visible')) {
+      navMenu.classList.remove('is-visible');
+    } else {
+      navMenu.classList.add('is-visible');
+    }
   }
 
   render() {
     const { book } = this.props;
     const download = encodeURIComponent(book.download);
     return (
       <div className="reader__container">
+        <div id="toc-nav" className="reader__toc">
+          <ul>
+            <h2>Table of Contents</h2>
+            {
+              this.state.nav.map(item =>
+                <li key={item.id}>
+                  <a
+                    className="reader__toc__item"
+                    onClick={() => {
+                      this.handleNavClick(item);
+                      this.tocToggle();
+                    }}
+                  >
+                    {item.label}
+                  </a>
+                </li>
+              )
+            }
+          </ul>
+        </div>
         <nav className="nav is-fixed">
           <div className="nav-left">
             <Link to="/" className="nav-item">
@@ -38,17 +90,24 @@ class Reader extends Component {
             </div>
           </div>
           <div className="nav-right">
-            <div className="nav-item">
+            <a className="nav-item" onClick={() => { this.tocToggle(); }}>
               <span className="icon">
                 <i className="fa fa-navicon" />
               </span>
-            </div>
+            </a>
           </div>
         </nav>
         {this.state.isLoading && <Loader />}
         <Epub
-          onReady={this.handleReady}
           src={`${getStreamHost()}/${book.id}/${download}/`}
+          onLocationChange={(location) => {
+                // console.log(location.start)
+            localStorage.setItem(`${book.id}-location`, location.start);
+          }}
+
+          onNavigationReady={this.handleNavReady}
+          onReady={this.handleReady}
+          location={this.state.location}
         />
       </div>
     );

diff --git a/app/containers/App.js b/app/containers/App.js
@@ -5,9 +5,9 @@ import React, { Component } from 'react';
 
 let booksPath;
 if (process.env.NODE_ENV === 'development') {
-  booksPath = path.resolve('resources', 'books.json');
+  booksPath = path.resolve('app', 'books.json');
 } else {
-  booksPath = path.resolve(process.resourcesPath, 'books.json');
+  booksPath = path.resolve(process.resourcesPath, 'app.asar', 'books.json');
 }
 
 export default class App extends Component {

diff --git a/app/package.json b/app/package.json
@@ -1,8 +1,8 @@
 {
-  "name": "electron-react-boilerplate",
-  "productName": "electron-react-boilerplate",
-  "version": "1.0.0",
-  "description": "Electron application boilerplate based on React, React Router, Webpack, React Hot Loader for rapid application development",
+  "name": "infinite-electron",
+  "productName": "Infinite Library Reader",
+  "version": "0.1.0",
+  "description": "An Electron based reader for Project Gutenberg books",
   "main": "./main.js",
   "author": {
     "name": "Infinite Library",

diff --git a/app/static/epub.css b/app/static/epub.css
@@ -23,7 +23,6 @@
 }
 
 .book-theme p {
-  font-weight: 300;
   font-size: 18px;
   line-height: 1.5;
 }

diff --git a/app/static/fonts/Merriweather-Black.ttf b/app/static/fonts/Merriweather-Black.ttf
diff --git a/app/static/fonts/Merriweather-Bold.ttf b/app/static/fonts/Merriweather-Bold.ttf
diff --git a/app/static/fonts/Merriweather-Italic.ttf b/app/static/fonts/Merriweather-Italic.ttf
diff --git a/app/static/fonts/Merriweather-Light.ttf b/app/static/fonts/Merriweather-Light.ttf
diff --git a/app/static/fonts/Merriweather-Regular.ttf b/app/static/fonts/Merriweather-Regular.ttf