From 794de015acd0328cf71ca925c9c7be8a86079fb5 Mon Sep 17 00:00:00 2001
From: Jesse Morgan <jesse@jesterpm.net>
Date: Fri, 18 Oct 2013 15:18:06 -0700
Subject: Improving closing videos

---
 src/templates/templates/training.ftl |  2 +-
 web/scripts/growth.js                | 18 +++++++++++++++++-
 web/style.css                        |  3 ++-
 3 files changed, 20 insertions(+), 3 deletions(-)

diff --git a/src/templates/templates/training.ftl b/src/templates/templates/training.ftl
index 62379a7..c560622 100644
--- a/src/templates/templates/training.ftl
+++ b/src/templates/templates/training.ftl
@@ -50,7 +50,7 @@
     </div>
 
     <div id="videoplayer">
-        <div class="close"><a href="#" onclick="closeVideo(); return false"><img src="${staticRoot}/images/close.png" alt="Close Video" /></a></div>
+        <div class="close"><a href="#" onclick="closeVideo(); return false"><img src="${staticRoot}/images/close.png" alt="Close Video" title="Close" /></a></div>
         <div class="video">
         <video width="720" height="405" controls="controls">
             This video is not playable in your browser.
diff --git a/web/scripts/growth.js b/web/scripts/growth.js
index de10d45..d4cee5b 100644
--- a/web/scripts/growth.js
+++ b/web/scripts/growth.js
@@ -144,6 +144,10 @@ function playVideo(videoId)
         }
 
         var player = $('#videoplayer video')[0];
+        if (typeof player.canPlayType !== 'function') {
+            notice("Your browser does not support html5 videos. Please try another browser or contact us.");
+        }
+
         for (var i in data.urls) {
             var video = data.urls[i];
             if (player.canPlayType(video.type) != '') {
@@ -169,6 +173,12 @@ function displayPlayer()
     $("body").animate({backgroundColor: '#181818'}, 500, 'linear', function(){
         $("#videoplayer").fadeIn(200);
     });
+
+    $(document).keyup('displayPlayer.exit', function(e) {
+      if (e.keyCode == 27) {
+          closeVideo();
+      }
+    });
 }
 
 function reportVideoComplete(data)
@@ -203,11 +213,17 @@ function reportVideoComplete(data)
 
 function closeVideo()
 {
-    $("#videoplayer video")[0].pause();
+    var player = $('#videoplayer video')[0];
+    if (typeof player.pause === 'function') {
+        player.pause();
+    }
+
     $("#videoplayer").fadeOut(100);
     $("body").animate({backgroundColor: '#FFFFFF'}, 500, 'linear', function(){
         $("#content").fadeIn(200);
     });
+
+    $(document).unbind('displayPlayer.exit');
 }
 
 function chapterComplete()
diff --git a/web/style.css b/web/style.css
index 637dae3..548fea9 100644
--- a/web/style.css
+++ b/web/style.css
@@ -378,7 +378,8 @@ footer a:hover {
     text-align: right;
     position: relative;
     top: 50px;
-    right: 50px;
+    width: 900px;
+    margin: 0 auto 0 auto;
 }
 
 #previous, #next {
-- 
cgit v1.2.3