Add Presentation Mode

app/editor/Pipe.js

@@ -2,7 +2,7 @@ import { ipcRenderer as ipc } from 'electron';
 import { saveToFile } from '../main/utils/file';
 
 // Actions
-import { exportPdf, exportPdfComplete } from './actions';
+import { exportPdf, exportPdfComplete, setTotalPages } from './actions';
 
 export default class Pipe {
   constructor({ dispatch, uuid }) {
@@ -14,6 +14,7 @@ export default class Pipe {
     return {
       publishPdf: this.publishPdf,
       responsePdfOptions: this.responsePdfOptions,
+      pageData: this.pageData,
     };
   }
 
@@ -41,6 +42,10 @@ export default class Pipe {
     setTimeout(startPublish, 1000);
   }
 
+  pageData = (event, rulers) => {
+    const pages = rulers.length + 1;
+    this.dispatch(setTotalPages(this.uuid, pages, rulers));
+  }
 
   // Connect and disconnect helpers
 
@@ -58,6 +63,6 @@ export default class Pipe {
   }
 
   disconnect() {
-    // TODO
+    this.webview.removeEventListener('ipc-message');
   }
 }

app/editor/actions.js

@@ -5,6 +5,10 @@ import {
   EDITOR_LOADING,
   EXPORT_PDF,
   EXPORT_PDF_COMPLETE,
+  PRESENTATION_MODE,
+  SET_CURRENT_PAGE,
+  SET_TOTAL_PAGES,
+  VIEW_MODE,
 } from '../store/actionTypes';
 
 import { loadFromFile, saveToFile } from '../main/utils/file';
@@ -51,6 +55,39 @@ export function exportPdf(uuid) {
   ]);
 }
 
+export function presentationMode(uuid, presenting) {
+  return {
+    type: PRESENTATION_MODE,
+    uuid,
+    presenting,
+  };
+}
+
+export function setCurrentPage(uuid, page) {
+  return {
+    type: SET_CURRENT_PAGE,
+    uuid,
+    page,
+  };
+}
+
+export function setTotalPages(uuid, pages, rulers = []) {
+  return {
+    type: SET_TOTAL_PAGES,
+    uuid,
+    pages,
+    rulers,
+  };
+}
+
+export function setViewMode(uuid, mode) {
+  return {
+    type: VIEW_MODE,
+    uuid,
+    mode,
+  };
+}
+
 export function exportPdfComplete(uuid, file) {
   return (dispatch) => Promise.all([
     dispatch(isLoading(uuid, false)),

app/editor/containers/Editor.js

@@ -10,7 +10,7 @@ import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
 
 // Actions
-import { updateCode } from '../actions';
+import { updateCode, setCurrentPage } from '../actions';
 
 // Selectors
 import { getEditor } from '../selectors';
@@ -22,7 +22,10 @@ class Editor extends Component {
     code: PropTypes.string,
     file: PropTypes.string,
     saved: PropTypes.bool,
+    presenting: PropTypes.bool,
+    rulers: PropTypes.array,
     updateCode: PropTypes.func,
+    setCurrentPage: PropTypes.func,
   }
 
   constructor(props) {
@@ -35,6 +38,13 @@ class Editor extends Component {
     };
   }
 
+  componentDidMount() {
+    this.codeMirror.on(
+      'cursorActivity',
+      () => setTimeout(this.refreshPage, 5)
+    );
+  }
+
   componentWillReceiveProps(nextProps) {
     if (this.props.file !== nextProps.file) {
       this.setState({
@@ -58,9 +68,24 @@ class Editor extends Component {
     this.props.updateCode(UUID, code);
   }
 
+  refreshPage = () => {
+    if (this.props.presenting || !this.codeMirror) {
+      return;
+    }
+
+    const lineNumber = this.codeMirror.getCursor().line || 0;
+    const line = this.props.rulers.filter((ln) => ln <= lineNumber);
+    const page = line.length + 1;
+
+    this.props.setCurrentPage(UUID, page);
+
+    // TODO: Update page indicator `Page ${currentPage} / ${totalPages}`
+  }
+
   render() {
     return (
       <Codemirror
+        ref={(code) => code && (this.codeMirror = code.getCodeMirror())}
         value={this.state.code}
         onChange={this.onCodeChange}
         options={{
@@ -85,9 +110,12 @@ export default connect(
       file: editor.file,
       code: editor.code,
       saved: editor.saved,
+      rulers: editor.pageRulers,
+      presenting: editor.presenting,
     };
   },
   dispatch => bindActionCreators({
     updateCode,
+    setCurrentPage,
   }, dispatch)
 )(Editor);

app/editor/containers/MainPanel.js

@@ -1,11 +1,16 @@
 import { remote } from 'electron';
 import React, { Component, PropTypes } from 'react';
 import { connect } from 'react-redux';
+import { bindActionCreators } from 'redux';
 import SplitPane from 'react-split-pane';
 
 import Editor from '../../editor/containers/Editor';
 import Pipe from '../Pipe';
 
+// Actions
+import { setCurrentPage, presentationMode, setViewMode } from '../actions';
+
+// Selectors
 import { getEditor } from '../selectors';
 
 import loaderSvg from '../../../assets/loading.svg';
@@ -14,13 +19,17 @@ class MainPanel extends Component {
   static propTypes = {
     pipe: PropTypes.object,
     exporting: PropTypes.bool,
+    presenting: PropTypes.bool,
+    currentPage: PropTypes.number,
+    totalPages: PropTypes.number,
+    viewMode: PropTypes.string,
+    presentationMode: PropTypes.func,
+    setCurrentPage: PropTypes.func,
+    setViewMode: PropTypes.func,
   }
 
   componentDidMount() {
-    this.webview = this.div.childNodes[0];
-    global.webview = this.webview;
-
-    this.props.pipe.connect(this.webview);
+    document.addEventListener('keydown', this.keyPress);
   }
 
   componentWillReceiveProps(newProps) {
@@ -31,6 +40,49 @@ class MainPanel extends Component {
 
   componentWillUnmount() {
     this.props.pipe.disconnect();
+    document.removeEventListener('keydown', this.keyPress);
+  }
+
+  keyPress = (event) => {
+    if (!this.props.presenting) {
+      return;
+    }
+    const code = event.keyCode;
+    if (code === 27) {
+      this.props.presentationMode(false);
+    } else if (code === 37 || code === 39) {
+      const diff = code === 37 ? -1 : 1;
+      const page = Math.max(1, Math.min(this.props.totalPages, this.props.currentPage + diff));
+      this.props.setCurrentPage(page);
+    }
+  }
+
+  handleWebview = (div) => {
+    if (div) {
+      this.webview = div.childNodes[0];
+      global.webview = this.webview;
+
+      this.props.pipe.connect(this.webview);
+    }
+  }
+
+  toolbarMenu() {
+    const { Menu, MenuItem } = remote;
+
+    const menu = new Menu();
+    menu.append(new MenuItem({
+      label: 'Continue Presentation',
+      click: () => {
+        this.props.presentationMode(true);
+      }
+    }));
+
+    menu.popup(remote.getCurrentWindow());
+  }
+
+  beginPresentation() {
+    this.props.setCurrentPage(1);
+    this.props.presentationMode(true);
   }
 
   renderWebview() {
@@ -45,7 +97,7 @@ class MainPanel extends Component {
 
     return (
       <div
-        ref={d => (this.div = d)}
+        ref={this.handleWebview}
         style={{ height: '100%' }}
         dangerouslySetInnerHTML={{ __html: webview }}
       />
@@ -60,13 +112,75 @@ class MainPanel extends Component {
     );
   }
 
+  renderPanels() {
+    const presenting = this.props.presenting ? {
+      pane1Style: { display: 'none' },
+      resizerStyle: { display: 'none' },
+      allowResize: false,
+    } : {};
+
+    const style = {
+      position: 'static',
+    };
+
+    return (
+      <SplitPane defaultSize="50%" {...presenting} style={style}>
+        <Editor />
+        { this.renderWebview() }
+      </SplitPane>
+    );
+  }
+
+  renderToolbar() {
+    if (this.props.presenting) {
+      return null;
+    }
+
+    const modes = [
+      {
+        icon: 'icon-monitor',
+        key: 'screen',
+      },
+      {
+        icon: 'icon-doc-text',
+        key: 'list',
+      }
+    ].map(({ icon, key }) => {
+      const active = key === this.props.viewMode ? ' active' : '';
+      return (
+        <button className={`btn btn-default${active}`} onClick={() => this.props.setViewMode(key)}>
+          <span className={`icon ${icon}`} />
+        </button>
+      );
+    });
+
+    return (
+      <footer className="toolbar toolbar-footer">
+        <div className="toolbar-actions">
+          <div className="btn-group">
+            <button className="btn btn-default" onClick={() => this.beginPresentation()}>
+              <span className="icon icon-play icon-text" /> Present
+            </button>
+            <button
+              className="btn btn-default btn-drop-segment"
+              onClick={() => this.toolbarMenu()}
+            >
+              <span className="icon icon-down-open" />
+            </button>
+          </div>
+          <div className="btn-group pull-right">
+            { modes }
+          </div>
+        </div>
+      </footer>
+    );
+  }
+
   render() {
     return (
-      <div>
-        <SplitPane defaultSize="50%">
-          <Editor />
-          { this.renderWebview() }
-        </SplitPane>
+      <div className="window-app-box">
+        { this.renderPanels() }
+        { this.renderToolbar() }
         { this.props.exporting ? this.renderLoading() : null }
       </div>
     );
@@ -79,11 +193,18 @@ export default connect(
     const editor = getEditor(uuid)(state);
     return {
       exporting: (editor.export || {}).loading || false,
+      presenting: editor.presenting || false,
+      viewMode: editor.viewMode || 'screen',
+      currentPage: editor.currentPage || 1,
+      totalPages: editor.totalPages || 1,
     };
   },
-  dispatch => {
-    return {
-      pipe: new Pipe({ dispatch, uuid }),
-    };
-  }
+  (dispatch) => ({
+    pipe: new Pipe({ dispatch, uuid }),
+    ...bindActionCreators({
+      setCurrentPage: setCurrentPage.bind(null, uuid),
+      presentationMode: presentationMode.bind(null, uuid),
+      setViewMode: setViewMode.bind(null, uuid),
+    }, dispatch)
+  })
 )(MainPanel);

app/editor/reducer.js

@@ -6,6 +6,10 @@ import {
   EDITOR_LOADING,
   EXPORT_PDF,
   EXPORT_PDF_COMPLETE,
+  PRESENTATION_MODE,
+  SET_CURRENT_PAGE,
+  SET_TOTAL_PAGES,
+  VIEW_MODE,
 } from '../store/actionTypes';
 
 const saveUuidState = (state, uuid) => (data) => ({
@@ -49,6 +53,23 @@ export default function editor(state = {}, action) {
           file: action.file,
         }
       });
+    case PRESENTATION_MODE:
+      return save({
+        presenting: action.presenting,
+      });
+    case SET_CURRENT_PAGE:
+      return save({
+        currentPage: action.page,
+      });
+    case SET_TOTAL_PAGES:
+      return save({
+        totalPages: action.pages,
+        pageRulers: action.rulers,
+      });
+    case VIEW_MODE:
+      return save({
+        viewMode: action.mode,
+      });
     case WINDOW_CLOSED: {
       const copy = { ...state };
       delete copy[uuid];