Toggle the full screen mode of the videos and images instead of that …

…of the browser. Skip video playback with arrow keys and stop/start with the space key in the full screen mode. #119

template.html

@@ -203,6 +203,13 @@ <h2>End!</h2>
     height: 2px;
     background: #AAA;
   }
+
+  pre {
+      white-space: pre-wrap;
+      font-size: 20px;
+      text-indent: -1em;
+  }
+
 </style>
 
 <!-- {{{{ dzslides core
@@ -315,12 +322,25 @@ <h2>End!</h2>
       var keyVal = e.split('=');
       Dz.params[keyVal[0]] = decodeURIComponent(keyVal[1]);
     });
-  // Specific params handling
-    if (!+this.params.autoplay)
-      $$.forEach($$("video"), function(v){ v.controls = true });
+    // Specific params handling
+    if (!!+this.params.autoplay)
+      $$.forEach($$("video"), function(v){ v.setAttribute('controls', '') });
   }
 
   Dz.onkeydown = function(aEvent) {
+    if (this.isFullScreen()) {
+        if ( aEvent.keyCode == 37) { // left arrow
+            aEvent.preventDefault();
+            this.skipVideo(-10);
+        } else if (aEvent.keyCode == 39) {
+            aEvent.preventDefault();
+            this.skipVideo(10);
+        } else if (aEvent.keyCode == 32) {
+            aEvent.preventDefault();
+            this.toggleContent();
+        }
+        return;
+    }
     // Don't intercept keyboard shortcuts
     if (aEvent.altKey
       || aEvent.ctrlKey
@@ -471,6 +491,19 @@ <h2>End!</h2>
     }
   }
 
+  Dz.skipVideo = function(inc) {
+    var s = $("section[aria-selected]");
+    if (s) {
+      var video = s.$("video");
+      if (video) {
+        if (video.ended || video.paused) {
+        } else {
+            video.currentTime += inc;
+        }
+      }
+    }
+  }
+
   Dz.setCursor = function(aIdx, aStep) {
     // If the user change the slide number in the URL bar, jump
     // to this slide.
@@ -605,12 +638,30 @@ <h2>End!</h2>
   }
 
   Dz.goFullscreen = function() {
-    var html = $('html'),
-        requestFullscreen = html.requestFullscreen || html.requestFullScreen || html.mozRequestFullScreen || html.webkitRequestFullScreen;
+    var s = $("section[aria-selected]");
+    var canvas;
+    if (s) {
+      canvas = s.$("video");
+      if (!canvas) {
+        canvas = s.$("img");
+        if (!canvas) {
+            canvas = $("html");
+        }
+      }
+    } else {
+      canvas = $("html");
+    }
+    var requestFullscreen = canvas.requestFullscreen || canvas.requestFullScreen 
+            || canvas.mozRequestFullScreen || canvas.webkitRequestFullScreen;
     if (requestFullscreen) {
-      requestFullscreen.apply(html);
+      requestFullscreen.apply(canvas);
     }
   }
+
+  Dz.isFullScreen = function() {
+    return !!(document.fullScreen || document.webkitIsFullScreen || document.mozFullScreen 
+            || document.msFullscreenElement || document.fullscreenElement);
+  }
 
   Dz.setProgress = function(aIdx, aStep) {
     var slide = $("section:nth-of-type("+ aIdx +")");