From d06abda1858f82b10f22e0a4dd8f34ceb20a1840 Mon Sep 17 00:00:00 2001
From: Ken Wheeler <ken_wheeler@me.com>
Date: Fri, 3 Jul 2015 14:07:24 -0400
Subject: [PATCH 1/2] Presenter mode

---
 presentation/deck.jsx   |   7 ++-
 src/deck.jsx            | 100 ++++++++++++++++++++++++++++++++++------
 src/slide.jsx           |  17 ++++++-
 themes/default/index.js |   3 ++
 4 files changed, 106 insertions(+), 21 deletions(-)

diff --git a/presentation/deck.jsx b/presentation/deck.jsx
index 010d15991..1de1b22b9 100644
--- a/presentation/deck.jsx
+++ b/presentation/deck.jsx
@@ -39,12 +39,11 @@ export default class extends React.Component {
             Wait what?
           </Heading>
         </Slide>
-        <Slide transition={['zoom', 'fade']} bgColor="primary" align="center middle">
+        <Slide transition={['zoom', 'fade']} bgColor="primary">
           <CodePane
             lang="javascript"
             source={require("raw!./deck.example")}
-            margin="20px auto"
-            textSize="1rem"/>
+            margin="20px auto"/>
         </Slide>
         <Slide transition={['slide']} bgImage={images.city.replace('/','')} bgDarken={0.75}>
           <Appear>
@@ -92,7 +91,7 @@ export default class extends React.Component {
             Combinable Transitions
           </Heading>
         </Slide>
-        <Slide transition={['fade']} bgColor="secondary" textColor="primary" align="center middle">
+        <Slide transition={['fade']} bgColor="secondary" textColor="primary">
           <List>
             <ListItem><Appear>Inline style based theme system</Appear></ListItem>
             <ListItem><Appear>Autofit text</Appear></ListItem>
diff --git a/src/deck.jsx b/src/deck.jsx
index c39b1f2ab..5cca212aa 100644
--- a/src/deck.jsx
+++ b/src/deck.jsx
@@ -8,7 +8,7 @@ React.initializeTouchEvents(true);
 
 const Style = Radium.Style;
 
-const TransitionGroup = React.addons.TransitionGroup;
+const TransitionGroup = Radium(React.addons.TransitionGroup);
 
 @Radium
 class Deck extends React.Component {
@@ -16,24 +16,32 @@ class Deck extends React.Component {
     super(props);
     this._handleKeyPress = this._handleKeyPress.bind(this);
     this._handleClick = this._handleClick.bind(this);
+    this._goToSlide = this._goToSlide.bind(this);
     this.state = {
       lastSlide: null
     };
   }
   componentDidMount() {
+    let slide = 'slide' in this.context.router.state.params ?
+      parseInt(this.context.router.state.params.slide) : 0;
     this.setState({
-      lastSlide: 'slide' in this.context.router.state.params ?
-        parseInt(this.context.router.state.params.slide) : 0
+      lastSlide: slide,
+      presenter: this.context.router.state.location.query &&
+        'presenter' in this.context.router.state.location.query
     });
+    localStorage.setItem('spectacle-slide',
+      JSON.stringify({slide: slide, forward: false, time: Date.now()}));
     this._attachEvents();
   }
   componentWillUnmount() {
     this._detachEvents();
   }
   _attachEvents() {
+    window.addEventListener('storage', this._goToSlide);
     window.addEventListener('keydown', this._handleKeyPress);
   }
   _detachEvents() {
+    window.removeEventListener('storage', this._goToSlide);
     window.removeEventListener('keydown', this._handleKeyPress);
   }
   _handleKeyPress(e) {
@@ -41,27 +49,56 @@ class Deck extends React.Component {
     event.keyCode === 37 && this._prevSlide();
     event.keyCode === 39 && this._nextSlide();
   }
+  _goToSlide(e) {
+    if(e.key === 'spectacle-slide') {
+      let data = JSON.parse(e.newValue);
+      let slide = 'slide' in this.context.router.state.params ?
+        parseInt(this.context.router.state.params.slide) : 0;
+      this.setState({
+        lastSlide: slide || 0
+      });
+      if(this._checkFragments(slide, data.forward)) {
+        this.context.router.replaceWith('/' + (data.slide));
+      }
+    }
+  }
   _prevSlide() {
     let slide = 'slide' in this.context.router.state.params ?
       parseInt(this.context.router.state.params.slide) : 0;
+    let presenter = this.state.presenter ? '?presenter' : '';
     this.setState({
       lastSlide: slide
     });
     if (this._checkFragments(slide, false)) {
       if (slide > 0) {
-        this.context.router.replaceWith('/' + (slide - 1));
+        this.context.router.replaceWith('/' + (slide - 1) + presenter);
+        localStorage.setItem('spectacle-slide',
+          JSON.stringify({slide: slide - 1, forward: false, time: Date.now()}));
+      }
+    } else {
+      if (slide > 0) {
+        localStorage.setItem('spectacle-slide',
+          JSON.stringify({slide: slide, forward: false, time: Date.now()}));
       }
     }
   }
   _nextSlide() {
     let slide = 'slide' in this.context.router.state.params ?
       parseInt(this.context.router.state.params.slide) : 0;
+    let presenter = this.state.presenter ? '?presenter' : '';
     this.setState({
       lastSlide: slide
     });
     if(this._checkFragments(slide, true)) {
       if (slide < this.props.children.length - 1) {
-        this.context.router.replaceWith('/' + (slide + 1));
+        this.context.router.replaceWith('/' + (slide + 1) + presenter);
+        localStorage.setItem('spectacle-slide',
+          JSON.stringify({slide: slide + 1, forward: true, time: Date.now()}));
+      }
+    } else {
+      if (slide < this.props.children.length - 1) {
+        localStorage.setItem('spectacle-slide',
+          JSON.stringify({slide: slide, forward: true, time: Date.now()}));
       }
     }
   }
@@ -186,7 +223,31 @@ class Deck extends React.Component {
     let slide = 'slide' in this.context.router.state.params ?
       parseInt(this.context.router.state.params.slide) : 0;
     let child = this.props.children[slide];
-    if (this.context.router.state.location.query &&
+    if (this.state.presenter) {
+      return this.props.children.map((child, index) => {
+        if(index >= slide - 1 && index <= slide + 1) {
+          let presenterStyle = {
+            border: slide !== index ? '5px solid transparent' : '5px solid red',
+            width: '33%',
+            height: '50%',
+            position: '',
+            top: '',
+            left: '',
+            flex: 1,
+            zoom: 0.5
+          }
+          return cloneWithProps(child, {
+            key: index,
+            presenterStyle: presenterStyle,
+            contentScale: 0.5,
+            slideIndex: slide,
+            lastSlide: this.state.lastSlide,
+            transition: [],
+            transitionDuration: 0
+          });
+        }
+      });
+    } else if (this.context.router.state.location.query &&
         'export' in this.context.router.state.location.query) {
       return this.props.children.map((child, index) => {
         return cloneWithProps(child, {
@@ -232,22 +293,31 @@ class Deck extends React.Component {
     } : {};
 
     let styles = {
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      width: '100%',
-      height: '100%',
-      perspective: 1000,
-      transformStyle: 'preserve-3d'
+      deck: {
+        backgroundColor: this.state.presenter ? 'black' : '',
+        display: 'flex',
+        width: '100%',
+        height: '100%',
+        perspective: 1000,
+        transformStyle: 'preserve-3d'
+      },
+      transition: {
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        flex: 1,
+        alignItems: 'center',
+        justifyContent: 'center'
+      }
     };
 
     return (
       <div
         className="spectacle-deck"
-        style={[styles]}
+        style={[styles.deck]}
         onClick={this._handleClick}
         {...this._getTouchEvents()}>
-        <TransitionGroup component="div" style={{height: '100%'}}>
+        <TransitionGroup component="div" style={[styles.transition]}>
           {this._renderSlide()}
         </TransitionGroup>
         <Style rules={assign(this.context.styles.global, globals)} />
diff --git a/src/slide.jsx b/src/slide.jsx
index 5acc67c7c..16a286a8e 100644
--- a/src/slide.jsx
+++ b/src/slide.jsx
@@ -9,6 +9,18 @@ import Radium from 'radium';
 const Slide = React.createClass({
   displayName: 'Slide',
   mixins: [tweenState.Mixin, Base.Mixin, Transitions],
+  getDefaultProps() {
+    return {
+      align: 'center center',
+      presenterStyle: {},
+      contentScale: React.PropTypes.number
+    }
+  },
+  propTypes: {
+    align: React.PropTypes.string,
+    presenterStyle: React.PropTypes.object,
+    contentScale: 1
+  },
   contextTypes: {
     styles: React.PropTypes.object
   },
@@ -64,12 +76,13 @@ const Slide = React.createClass({
       content: {
         flex: 1,
         maxWidth: config.width,
-        fontSize: 16 * this.state.zoom
+        fontSize: 16 * this.state.zoom,
+        transform: 'scale(' + this.props.contentScale + ')'
       }
     };
     return (
       <div className="spectacle-slide"
-        style={[styles.outer, this.getStyles(), this.getTransitionStyles(), printStyles]}>
+        style={[styles.outer, this.getStyles(), this.getTransitionStyles(), printStyles, this.props.presenterStyle]}>
         <div style={[styles.inner]}>
           <div ref="content"
             style={[styles.content, this.context.styles.components.content]}>
diff --git a/themes/default/index.js b/themes/default/index.js
index ca153a2dc..4dd3283d3 100644
--- a/themes/default/index.js
+++ b/themes/default/index.js
@@ -22,6 +22,9 @@ module.exports = {
       color: colors.secondary,
       overflow: 'hidden'
     },
+    'html, body': {
+      height: '100%'
+    },
     '*': {
       boxSizing: 'border-box'
     },

From 899ce4792394408dd42dd048bf6a3e0516b73943 Mon Sep 17 00:00:00 2001
From: Ken Wheeler <ken_wheeler@me.com>
Date: Sun, 5 Jul 2015 10:09:03 -0400
Subject: [PATCH 2/2] Presenter Mode

---
 presentation/config.js  |   1 +
 src/deck.jsx            |  78 +++++++++----------
 src/image.jsx           |   2 +-
 src/presenter.jsx       | 168 ++++++++++++++++++++++++++++++++++++++++
 src/slide.jsx           |  26 ++++---
 src/transitions.jsx     |  16 ++--
 src/utils/context.jsx   |   7 +-
 themes/default/index.js |   3 +-
 themes/default/print.js |   3 +-
 webpack.config.js       |   4 +
 10 files changed, 245 insertions(+), 63 deletions(-)
 create mode 100644 src/presenter.jsx

diff --git a/presentation/config.js b/presentation/config.js
index 8b23da325..1ecf70ec1 100644
--- a/presentation/config.js
+++ b/presentation/config.js
@@ -1,5 +1,6 @@
 module.exports = {
   width: 1000,
+  height: 700,
   margin: 40,
   theme: require('../themes/default/index'),
   print: require('../themes/default/print'),
diff --git a/src/deck.jsx b/src/deck.jsx
index 5cca212aa..67d3f6047 100644
--- a/src/deck.jsx
+++ b/src/deck.jsx
@@ -4,6 +4,8 @@ import cloneWithProps from 'react/lib/cloneWithProps';
 import Radium from 'radium';
 import _ from 'lodash';
 
+import Presenter from './presenter';
+
 React.initializeTouchEvents(true);
 
 const Style = Radium.Style;
@@ -25,9 +27,7 @@ class Deck extends React.Component {
     let slide = 'slide' in this.context.router.state.params ?
       parseInt(this.context.router.state.params.slide) : 0;
     this.setState({
-      lastSlide: slide,
-      presenter: this.context.router.state.location.query &&
-        'presenter' in this.context.router.state.location.query
+      lastSlide: slide
     });
     localStorage.setItem('spectacle-slide',
       JSON.stringify({slide: slide, forward: false, time: Date.now()}));
@@ -52,20 +52,21 @@ class Deck extends React.Component {
   _goToSlide(e) {
     if(e.key === 'spectacle-slide') {
       let data = JSON.parse(e.newValue);
+      let presenter = this.context.presenter ? '?presenter' : '';
       let slide = 'slide' in this.context.router.state.params ?
         parseInt(this.context.router.state.params.slide) : 0;
       this.setState({
         lastSlide: slide || 0
       });
       if(this._checkFragments(slide, data.forward)) {
-        this.context.router.replaceWith('/' + (data.slide));
+        this.context.router.replaceWith('/' + (data.slide) + presenter);
       }
     }
   }
   _prevSlide() {
     let slide = 'slide' in this.context.router.state.params ?
       parseInt(this.context.router.state.params.slide) : 0;
-    let presenter = this.state.presenter ? '?presenter' : '';
+    let presenter = this.context.presenter ? '?presenter' : '';
     this.setState({
       lastSlide: slide
     });
@@ -85,7 +86,7 @@ class Deck extends React.Component {
   _nextSlide() {
     let slide = 'slide' in this.context.router.state.params ?
       parseInt(this.context.router.state.params.slide) : 0;
-    let presenter = this.state.presenter ? '?presenter' : '';
+    let presenter = this.context.presenter ? '?presenter' : '';
     this.setState({
       lastSlide: slide
     });
@@ -105,6 +106,18 @@ class Deck extends React.Component {
   _checkFragments(slide, forward) {
     let store = this.context.flux.stores.SlideStore;
     let fragments = store.getState().fragments;
+    // Not proud of this at all. 0.14 Parent based contexts will fix this.
+    if(this.context.presenter) {
+      let main = document.querySelector('.spectacle-presenter-main');
+      if (main) {
+        let fragments = main.querySelectorAll('.appear');
+        if (!fragments.length) {
+          return true;
+        }
+      } else {
+        return true;
+      }
+    }
     if (slide in fragments) {
       let count = _.size(fragments[slide]);
       let visible = _.filter(fragments[slide], function(s){
@@ -223,31 +236,7 @@ class Deck extends React.Component {
     let slide = 'slide' in this.context.router.state.params ?
       parseInt(this.context.router.state.params.slide) : 0;
     let child = this.props.children[slide];
-    if (this.state.presenter) {
-      return this.props.children.map((child, index) => {
-        if(index >= slide - 1 && index <= slide + 1) {
-          let presenterStyle = {
-            border: slide !== index ? '5px solid transparent' : '5px solid red',
-            width: '33%',
-            height: '50%',
-            position: '',
-            top: '',
-            left: '',
-            flex: 1,
-            zoom: 0.5
-          }
-          return cloneWithProps(child, {
-            key: index,
-            presenterStyle: presenterStyle,
-            contentScale: 0.5,
-            slideIndex: slide,
-            lastSlide: this.state.lastSlide,
-            transition: [],
-            transitionDuration: 0
-          });
-        }
-      });
-    } else if (this.context.router.state.location.query &&
+    if (this.context.router.state.location.query &&
         'export' in this.context.router.state.location.query) {
       return this.props.children.map((child, index) => {
         return cloneWithProps(child, {
@@ -284,6 +273,9 @@ class Deck extends React.Component {
       exportMode = true;
     }
 
+    let slide ='slide' in this.context.router.state.params ?
+      parseInt(this.context.router.state.params.slide) : 0;
+
     let globals = exportMode ? {
       body: {
         minWidth: 1100,
@@ -294,8 +286,10 @@ class Deck extends React.Component {
 
     let styles = {
       deck: {
-        backgroundColor: this.state.presenter ? 'black' : '',
-        display: 'flex',
+        backgroundColor: this.context.presenter ? 'black' : '',
+        position: 'absolute',
+        top: 0,
+        left: 0,
         width: '100%',
         height: '100%',
         perspective: 1000,
@@ -303,11 +297,7 @@ class Deck extends React.Component {
       },
       transition: {
         height: '100%',
-        width: '100%',
-        display: 'flex',
-        flex: 1,
-        alignItems: 'center',
-        justifyContent: 'center'
+        width: '100%'
       }
     };
 
@@ -317,9 +307,12 @@ class Deck extends React.Component {
         style={[styles.deck]}
         onClick={this._handleClick}
         {...this._getTouchEvents()}>
-        <TransitionGroup component="div" style={[styles.transition]}>
-          {this._renderSlide()}
-        </TransitionGroup>
+        {this.context.presenter ?
+          <Presenter slides={this.props.children}
+            slide={slide} lastSlide={this.state.lastSlide}/> :
+          <TransitionGroup component="div" style={[styles.transition]}>
+            {this._renderSlide()}
+          </TransitionGroup>}
         <Style rules={assign(this.context.styles.global, globals)} />
       </div>
     )
@@ -335,7 +328,8 @@ Deck.defaultProps = {
 Deck.contextTypes = {
   styles: React.PropTypes.object,
   router: React.PropTypes.object,
-  flux: React.PropTypes.object
+  flux: React.PropTypes.object,
+  presenter: React.PropTypes.bool
 };
 
 export default Deck;
\ No newline at end of file
diff --git a/src/image.jsx b/src/image.jsx
index 66d8f3daf..500bd4315 100644
--- a/src/image.jsx
+++ b/src/image.jsx
@@ -12,7 +12,7 @@ class Image extends Base {
       display: this.props.display || ""
     };
     return (
-      <img src={this.props.src} style={[styles, this.context.styles.components.image, this.getStyles()]} />
+      <img src={this.props.src} style={[this.context.styles.components.image, this.getStyles(), styles]} />
     );
   }
 }
diff --git a/src/presenter.jsx b/src/presenter.jsx
new file mode 100644
index 000000000..a5028b23e
--- /dev/null
+++ b/src/presenter.jsx
@@ -0,0 +1,168 @@
+import React from 'react/addons';
+import assign from 'object-assign';
+import cloneWithProps from 'react/lib/cloneWithProps';
+import Base from './base';
+import Radium from 'radium';
+
+function startTime(date) {
+  var hours = date.getHours();
+  var minutes = date.getMinutes();
+  var seconds = date.getSeconds();
+  var ampm = hours >= 12 ? 'PM' : 'AM';
+  hours = hours % 12;
+  hours = hours ? hours : 12;
+  minutes = minutes < 10 ? '0'+minutes : minutes;
+  seconds = seconds < 10 ? '0'+seconds : seconds;
+  var strTime = hours + ':' + minutes + ':' + seconds + ' ' + ampm;
+  return strTime;
+}
+
+@Radium
+class Presenter extends Base {
+  constructor(props) {
+    super(props);
+    this.state = {
+      time: startTime(new Date())
+    }
+  }
+  _renderMainSlide() {
+    let child = this.props.slides[this.props.slide];
+    let presenterStyle = {
+      position: 'relative'
+    }
+    return cloneWithProps(child, {
+      key: this.props.slide,
+      slideIndex: this.props.slide,
+      lastSlide: this.props.lastSlide,
+      transition: [],
+      transitionDuration: 0,
+      presenterStyle: presenterStyle
+    });
+  }
+  componentDidMount() {
+    setInterval(()=> {
+      this.setState({
+        time: startTime(new Date())
+      });
+    }, 1000);
+  }
+  _renderNextSlide() {
+    let presenterStyle = {
+      position: 'relative'
+    }
+    let endStyle = {
+      position: 'absolute',
+      top: '50%',
+      left: '50%',
+      transform: 'translate(-50%, -50%)',
+      margin: 0
+    }
+    let child = this.props.slides[parseInt(this.props.slide) + 1];
+    return child ? cloneWithProps(child, {
+      key: this.props.slide + 1,
+      slideIndex: this.props.slide + 1,
+      lastSlide: this.props.lastSlide,
+      transition: [],
+      transitionDuration: 0,
+      presenterStyle: presenterStyle,
+      appearOff: true
+    }) : <h1 style={[endStyle]}>END</h1>
+  }
+  render() {
+    let styles = {
+      presenter: {
+        height: '100%',
+        width: '100%',
+        display: 'flex',
+        flex: 1,
+        flexDirection: 'column'
+      },
+      header: {
+        position: 'absolute',
+        display: 'block',
+        color: 'white',
+        width: '100%',
+        height: '20%',
+        textAlign: 'center',
+        padding: '20px 50px',
+      },
+      slideInfo: {
+        position: 'relative',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        float: 'left',
+        margin: 0,
+        lineHeight: 1,
+        display: 'inline-block',
+        fontSize: 28
+      },
+      clock: {
+        position: 'relative',
+        top: '50%',
+        transform: 'translateY(-50%)',
+        float: 'right',
+        margin: 0,
+        lineHeight: 1,
+        display: 'inline-block',
+        fontSize: 28
+      },
+      preview: {
+        display: 'flex',
+        width: '100%',
+        height: '100%',
+        alignItems: 'center',
+        justifyContent: 'center',
+        flex: 1
+      },
+      main: {
+        display: 'inline-block',
+        width: '50%',
+        height: '60%',
+        border: '2px solid white',
+        padding: 20,
+        margin: 20,
+        position: 'relative'
+      },
+      next: {
+        display: 'inline-block',
+        width: '40%',
+        height: '50%',
+        border: '2px solid white',
+        padding: 20,
+        margin: 20,
+        position: 'relative',
+        color: 'white'
+      }
+    };
+    return (
+      <div className='spectacle-presenter' style={[styles.presenter]}>
+        <div style={styles.header}>
+          <h2 style={styles.slideInfo}>Slide {this.props.slide + 1} of {this.props.slides.length}</h2>
+          <h2 style={styles.clock}>{this.state.time}</h2>
+        </div>
+        <div style={styles.preview}>
+          <div className="spectacle-presenter-main" style={[styles.main]}>
+            {this._renderMainSlide()}
+          </div>
+          <div className="spectacle-presenter-next" style={[styles.next]}>
+            {this._renderNextSlide()}
+          </div>
+        </div>
+      </div>
+    )
+  }
+}
+
+Presenter.propTypes = {
+  lastSlide: React.PropTypes.number,
+  slides: React.PropTypes.array,
+  slide: React.PropTypes.number
+}
+
+Presenter.contextTypes = {
+  styles: React.PropTypes.object,
+  flux: React.PropTypes.object,
+  router: React.PropTypes.object
+}
+
+export default Presenter;
\ No newline at end of file
diff --git a/src/slide.jsx b/src/slide.jsx
index 16a286a8e..d3b695756 100644
--- a/src/slide.jsx
+++ b/src/slide.jsx
@@ -12,32 +12,34 @@ const Slide = React.createClass({
   getDefaultProps() {
     return {
       align: 'center center',
-      presenterStyle: {},
-      contentScale: React.PropTypes.number
+      presenterStyle: {}
     }
   },
   propTypes: {
     align: React.PropTypes.string,
-    presenterStyle: React.PropTypes.object,
-    contentScale: 1
+    presenterStyle: React.PropTypes.object
   },
   contextTypes: {
     styles: React.PropTypes.object
   },
   getInitialState() {
     return {
-      zoom: 1
+      zoom: 1,
+      contentScale: 1
     }
   },
   setZoom() {
     let content = React.findDOMNode(this.refs.content);
     let zoom = (content.offsetWidth / config.width);
+    let contentScale = (content.parentNode.offsetHeight / config.height);
     this.setState({
-      zoom: zoom > 0.6 ? zoom : 0.6
+      zoom: zoom > 0.6 ? zoom : 0.6,
+      contentScale: contentScale < 1 ? contentScale : 1
     });
   },
   componentDidMount() {
     this.setZoom();
+    window.addEventListener('load', this.setZoom);
     window.addEventListener('resize', this.setZoom);
   },
   componentWillUnmount() {
@@ -68,16 +70,21 @@ const Slide = React.createClass({
       },
       inner: {
         display: 'flex',
+        position: 'relative',
         flex: 1,
         alignItems: this.props.align ? this.props.align.split(' ')[1] : 'center',
-        justifyContent: this.props.align ? this.props.align.split(' ')[0] : 'center',
-        padding: this.state.zoom > 0.6 ? config.margin : 10
+        justifyContent: this.props.align ? this.props.align.split(' ')[0] : 'center'
       },
       content: {
         flex: 1,
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        width: '100%',
         maxWidth: config.width,
         fontSize: 16 * this.state.zoom,
-        transform: 'scale(' + this.props.contentScale + ')'
+        transform: ' translate(-50%,-50%) scale(' + this.state.contentScale + ')',
+        padding: this.state.zoom > 0.6 ? config.margin : 10
       }
     };
     return (
@@ -85,6 +92,7 @@ const Slide = React.createClass({
         style={[styles.outer, this.getStyles(), this.getTransitionStyles(), printStyles, this.props.presenterStyle]}>
         <div style={[styles.inner]}>
           <div ref="content"
+            className="spectacle-content"
             style={[styles.content, this.context.styles.components.content]}>
             {this.props.children}
           </div>
diff --git a/src/transitions.jsx b/src/transitions.jsx
index 6c2bceadf..d7ad68e71 100644
--- a/src/transitions.jsx
+++ b/src/transitions.jsx
@@ -22,13 +22,13 @@ export default {
 
     if(this.props.transition.indexOf('fade') !== -1) {
       state = assign(state, {
-        opacity: 0
+        opacity: 1
       });
     }
 
     if(this.props.transition.indexOf('zoom') !== -1) {
       state = assign(state, {
-        scale: 0.1
+        scale: 1
       });
     }
 
@@ -57,10 +57,15 @@ export default {
     let slide = parseInt(this.context.router.state.params.slide) || 0;
     let direction = this.props.slideIndex > this.props.lastSlide;
 
+    this.setState({
+      z: 200
+    });
+
     if(this.props.transition.indexOf('fade') !== -1) {
       this.tweenState('opacity', {
         easing: tweenState.easingTypes.easeInOutQuad,
         duration: this.props.transitionDuration,
+        beginValue: 0,
         endValue: 1
       });
     }
@@ -69,6 +74,7 @@ export default {
       this.tweenState('scale', {
         easing: tweenState.easingTypes.easeInOutQuad,
         duration: this.props.transitionDuration,
+        beginValue: 0,
         endValue: 1
       });
     }
@@ -91,10 +97,6 @@ export default {
       });
     }
 
-    this.setState({
-      z: 200
-    });
-
     this.routerCallback(cb);
 
   },
@@ -144,7 +146,7 @@ export default {
       this.tweenState('scale', {
         easing: tweenState.easingTypes.easeInOutQuad,
         duration: this.props.transitionDuration,
-        endValue: 0.1
+        endValue: 0
       });
     }
 
diff --git a/src/utils/context.jsx b/src/utils/context.jsx
index ed3cd432a..23b806191 100644
--- a/src/utils/context.jsx
+++ b/src/utils/context.jsx
@@ -6,7 +6,8 @@ function context(Component, params) {
 
     childContextTypes: {
       styles: React.PropTypes.object,
-      flux: React.PropTypes.object
+      flux: React.PropTypes.object,
+      presenter: React.PropTypes.bool
     },
 
     getChildContext() {
@@ -18,7 +19,9 @@ function context(Component, params) {
       }
       return {
         styles: styles,
-        flux: params.flux
+        flux: params.flux,
+        presenter: this.props.location.query &&
+          'presenter' in this.props.location.query
       };
     },
 
diff --git a/themes/default/index.js b/themes/default/index.js
index 4dd3283d3..e0e691555 100644
--- a/themes/default/index.js
+++ b/themes/default/index.js
@@ -86,7 +86,8 @@ module.exports = {
         fontFamily: fonts.primary,
         lineHeight: 1,
         fontWeight: 'bold',
-        margin: 0
+        margin: 0,
+        zoom: 1
       },
       h2: {
         color: colors.secondary,
diff --git a/themes/default/print.js b/themes/default/print.js
index 19b67a78f..e0525d686 100644
--- a/themes/default/print.js
+++ b/themes/default/print.js
@@ -53,7 +53,8 @@ module.exports = {
       marginTop: '1em'
     },
     content: {
-      margin: 'auto'
+      margin: 'auto',
+      textAlign: 'center'
     },
     codePane: {
       pre: {
diff --git a/webpack.config.js b/webpack.config.js
index 4f7cf41b0..f504675a7 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -16,4 +16,8 @@ webpackConfig.module.loaders[0] = {
   ]
 }
 
+if (process.argv[1].indexOf('webpack-dev-server') !== -1) {
+  webpackConfig.module.loaders[0].loaders.unshift('react-hot')
+}
+
 module.exports = webpackConfig;
\ No newline at end of file