Added hover over video bar and js to possibly go true full screen

static/css/application.css

@@ -2863,6 +2863,30 @@ section.course-index div#accordion ul.ui-accordion-content li a p {
 section.course-index div#accordion ul.ui-accordion-content li a p.subtitle {
   color: #666; }
 
+section.course-content .dullify, section.course-content div.video-subtitles div.video-wrapper section.video-controls ul.vcr, section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls {
+  opacity: .4;
+  -webkit-transition-property: all;
+  -moz-transition-property: all;
+  -ms-transition-property: all;
+  -o-transition-property: all;
+  transition-property: all;
+  -webkit-transition-duration: 0.15s;
+  -moz-transition-duration: 0.15s;
+  -ms-transition-duration: 0.15s;
+  -o-transition-duration: 0.15s;
+  transition-duration: 0.15s;
+  -webkit-transition-timing-function: ease-out;
+  -moz-transition-timing-function: ease-out;
+  -ms-transition-timing-function: ease-out;
+  -o-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+  -webkit-transition-delay: 0;
+  -moz-transition-delay: 0;
+  -ms-transition-delay: 0;
+  -o-transition-delay: 0;
+  transition-delay: 0; }
+section.course-content .dullify:hover, section.course-content div.video-subtitles div.video-wrapper section.video-controls ul.vcr:hover, section.course-content div.video-subtitles div.video-wrapper section.video-controls div.secondary-controls:hover {
+  opacity: 1; }
 section.course-content div.video {
   padding: 6px 22.652px;
   margin: 0 -22.652px;
@@ -2911,6 +2935,8 @@ section.course-content div.video-subtitles div.video-wrapper section.video-contr
   border: 1px solid #000;
   border-top: 0;
   color: #ccc; }
+section.course-content div.video-subtitles div.video-wrapper section.video-controls:hover ul, section.course-content div.video-subtitles div.video-wrapper section.video-controls:hover div {
+  opacity: 1; }
 section.course-content div.video-subtitles div.video-wrapper section.video-controls div#slider {
   -webkit-border-radius: 0;
   -moz-border-radius: 0;

static/js/jquery.fullscreen.js

@@ -0,0 +1,145 @@
+/**
+ * @name		jQuery FullScreen Plugin
+ * @author		Martin Angelov
+ * @version 	1.0
+ * @url			http://tutorialzine.com/2012/02/enhance-your-website-fullscreen-api/
+ * @license		MIT License
+ */
+
+(function($){
+	
+	// Adding a new test to the jQuery support object
+	$.support.fullscreen = supportFullScreen();
+	
+	// Creating the plugin
+	$.fn.fullScreen = function(props){
+		
+		if(!$.support.fullscreen || this.length != 1){
+			
+			// The plugin can be called only
+			// on one element at a time
+			
+			return this;
+		}
+		
+		if(fullScreenStatus()){
+			// if we are already in fullscreen, exit
+			cancelFullScreen();
+			return this;
+		}
+		
+		// You can potentially pas two arguments a color
+		// for the background and a callback function
+		
+		var options = $.extend({
+			'background' : '#111',
+			'callback'	 : function(){}
+		}, props);
+		
+		// This temporary div is the element that is
+		// actually going to be enlarged in full screen
+		
+		var fs = $('<div>',{
+			'css' : {
+				'overflow-y' : 'auto',
+				'background' : options.background,
+				'width'		 : '100%',
+				'height'	 : '100%'
+			}
+		});
+
+		var elem = this;
+
+		// You can use the .fullScreen class to
+		// apply styling to your element
+		elem.toggleClass('fullscreen');
+		
+		// Inserting our element in the temporary
+		// div, after which we zoom it in fullscreen
+		fs.insertBefore(elem);
+		fs.append(elem);
+		requestFullScreen(fs.get(0));
+		
+		fs.click(function(e){
+			if(e.target == this){
+				// If the black bar was clicked
+				cancelFullScreen();
+			}
+		});
+		
+		elem.cancel = function(){
+			cancelFullScreen();
+			return elem;
+		};
+		
+		onFullScreenEvent(function(fullScreen){
+			
+			if(!fullScreen){
+				
+				// We have exited full screen.
+				// Remove the class and destroy
+				// the temporary div
+				
+				elem.removeClass('fullScreen').insertBefore(fs);
+				fs.remove();
+			}
+			
+			// Calling the user supplied callback
+			options.callback(fullScreen);
+		});
+		
+		return elem;
+	};
+	
+	
+	// These helper functions available only to our plugin scope.
+
+
+	function supportFullScreen(){
+		var doc = document.documentElement;
+		
+		return	('requestFullscreen' in doc) ||
+				('mozRequestFullScreen' in doc && document.mozFullScreenEnabled) ||
+				('webkitRequestFullScreen' in doc);
+	}
+
+	function requestFullScreen(elem){
+
+		if (elem.requestFullscreen) {
+		    elem.requestFullscreen();
+		}
+		else if (elem.mozRequestFullScreen) {
+		    elem.mozRequestFullScreen();
+		}
+		else if (elem.webkitRequestFullScreen) {
+		    elem.webkitRequestFullScreen();
+		}
+	}
+
+	function fullScreenStatus(){
+		return	document.fullscreen ||
+				document.mozFullScreen ||
+				document.webkitIsFullScreen;
+	}
+	
+	function cancelFullScreen(){
+		if (document.exitFullscreen) {
+		    document.exitFullscreen();
+		}
+		else if (document.mozCancelFullScreen) {
+		    document.mozCancelFullScreen();
+		}
+		else if (document.webkitCancelFullScreen) {
+		    document.webkitCancelFullScreen();
+		}
+	}
+
+	function onFullScreenEvent(callback){
+		$(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function(){
+			// The full screen status is automatically
+			// passed to our callback as an argument.
+			callback(fullScreenStatus());
+		});
+	}
+
+})(jQuery);

templates/sass/courseware/_video.scss

@@ -1,4 +1,13 @@
 section.course-content {
+  .dullify {
+    opacity: .4;
+    @include transition();
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
   div.video {
     padding: 6px lh();
     margin: 0 (-(lh()));
@@ -7,6 +16,7 @@ section.course-content {
     background: #f3f3f3;
     display: block;
   }
+
   div.video-subtitles {
     display: table;
     @include clearfix();
@@ -47,24 +57,6 @@ section.course-content {
         }
       }
 
-      // ul {
-      //   float: left;
-
-      //   li {
-      //     margin-top: 5px;
-      //     display: inline-block;
-      //     cursor: pointer;
-      //     border: 0;
-      //     padding: 0;
-
-      //     div {
-      //       &:empty {
-      //         display: none;
-      //       }
-      //     }
-      //   }
-      // }
-
       section.video-controls {
         @extend .clearfix;
         background: #333;
@@ -73,6 +65,12 @@ section.course-content {
         border-top: 0;
         color: #ccc;
 
+        &:hover {
+          ul, div {
+            opacity: 1;
+          }
+        }
+
         div#slider {
           @extend .clearfix;
           @include border-radius(0);
@@ -155,6 +153,7 @@ section.course-content {
         ul.vcr {
           float: left;
           margin-right: lh();
+          @extend .dullify;
 
           li {
             float: left;
@@ -201,6 +200,7 @@ section.course-content {
 
         div.secondary-controls {
           float: right;
+          @extend .dullify;
 
           div.speeds {
             border-left: 1px solid #000;

templates/video.html

@@ -3,7 +3,7 @@
 % endif
 
 <div class="video">
-<div class="video-subtitles fullscreen">
+<div class="video-subtitles">
 <div class="tc-wrapper">
 
   <div class="video-wrapper">