Fullscreen, update filenames, other tweaks

assets/icons/expand.svg

@@ -4,8 +4,8 @@
     <title>expand</title>
     <desc>Created with Sketch.</desc>
     <defs></defs>
-    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
-        <g id="expand" sketch:type="MSLayerGroup" transform="translate(-1.000000, -1.000000)" fill="#444444">
+    <g id="Page-1" stroke="none" stroke-width="1" sketch:type="MSPage">
+        <g id="expand" sketch:type="MSLayerGroup" transform="translate(-1.000000, -1.000000)">
             <path d="M7.00325,17.01 L7.00325,13.377 L8.29625,14.694 C8.68825,15.082 9.32125,15.082 9.71325,14.694 C10.10525,14.306 10.10425,13.678 9.71325,13.291 L6.74625,10.291 C6.55825,10.105 6.30425,10 6.03725,10 C6.02625,10 6.01425,10 6.00325,10.001 C5.99225,10.002 5.98025,10 5.96925,10 C5.70325,10 5.44825,10.105 5.26025,10.291 L2.29325,13.291 C1.90225,13.679 1.90225,14.307 2.29325,14.694 C2.68425,15.081 3.31825,15.082 3.71025,14.694 L5.00425,13.377 L5.00425,17.01 C5.00425,17.557 5.44725,18 5.99425,18 L6.01225,18 C6.55925,18 7.00225,17.557 7.00225,17.01 L7.00325,17.01 Z" id="Shape" sketch:type="MSShapeGroup" transform="translate(6.003438, 14.000000) rotate(-135.000000) translate(-6.003438, -14.000000) "></path>
             <path d="M15.0066876,5.377 L16.2996876,6.694 C16.6916876,7.082 17.3246876,7.082 17.7166876,6.694 C18.1086876,6.306 18.1076876,5.678 17.7166876,5.291 L14.7496876,2.291 C14.5616876,2.105 14.3076876,2 14.0406876,2 C14.0296876,2 14.0176876,2 14.0066876,2.001 C13.9956876,2.002 13.9836876,2 13.9726876,2 C13.7066876,2 13.4516876,2.105 13.2636876,2.291 L10.2966876,5.291 C9.90568756,5.679 9.90568756,6.307 10.2966876,6.694 C10.6876876,7.081 11.3216876,7.082 11.7136876,6.694 L13.0076876,5.377 L13.0076876,9.01 C13.0076876,9.557 13.4506876,10 13.9976876,10 C14.5626876,10 15.0056876,9.557 15.0056876,9.01 L15.0066876,5.377 Z" id="Shape-2" sketch:type="MSShapeGroup" transform="translate(14.006875, 6.000000) rotate(45.000000) translate(-14.006875, -6.000000) "></path>
         </g>

assets/js/simple-media.js

@@ -1,3 +1,77 @@
+// ==========================================================================
+// Simple Media Player
+// simple-media.js v1.0.0
+// https://github.com/sampotts/simple-media
+// ==========================================================================
+// Credits: http://paypal.github.io/accessible-html5-video-player/
+// ==========================================================================
+
+// Fullscreen API
+(function() {
+    var
+        fullscreen = {
+            supportsFullScreen: false,
+            isFullScreen: function() { return false; },
+            requestFullScreen: function() {},
+            cancelFullScreen: function() {},
+            fullScreenEventName: "",
+            element: null,
+            prefix: ""
+        },
+        browserPrefixes = "webkit moz o ms khtml".split(" ");
+
+    // check for native support
+    if (typeof document.cancelFullScreen != "undefined") {
+        fullscreen.supportsFullScreen = true;
+    }
+    else {
+        // check for fullscreen support by vendor prefix
+        for (var i = 0, il = browserPrefixes.length; i < il; i++ ) {
+            fullscreen.prefix = browserPrefixes[i];
+
+            if (typeof document[fullscreen.prefix + "CancelFullScreen" ] != "undefined" ) {
+                fullscreen.supportsFullScreen = true;
+
+                break;
+            }
+        }
+    }
+
+    // Safari doesn't support the ALLOW_KEYBOARD_INPUT flag so set it to not supported
+    // https://bugs.webkit.org/show_bug.cgi?id=121496
+    if(fullscreen.prefix === "webkit" && !!navigator.userAgent.match(/Version\/[\d\.]+.*Safari/)) {
+    	 fullscreen.supportsFullScreen = false;
+    }
+
+    // Update methods to do something useful
+    if (fullscreen.supportsFullScreen) {
+        fullscreen.fullScreenEventName = fullscreen.prefix + "fullscreenchange";
+
+        fullscreen.isFullScreen = function() {
+            switch (this.prefix) {
+                case "":
+                    return document.fullScreen;
+                case "webkit":
+                    return document.webkitIsFullScreen;
+                default:
+                    return document[this.prefix + "FullScreen"];
+            }
+        };
+        fullscreen.requestFullScreen = function(element) {
+            return (this.prefix === "") ? element.requestFullScreen() : element[this.prefix + "RequestFullScreen"](this.prefix === "webkit" ? element.ALLOW_KEYBOARD_INPUT : null);
+        };
+        fullscreen.cancelFullScreen = function() {
+            return (this.prefix === "") ? document.cancelFullScreen() : document[this.prefix + "CancelFullScreen"]();
+        };
+    	fullscreen.element = function() { 
+    		return (this.prefix === "") ? document.fullscreenElement : document[this.prefix + "FullscreenElement"];
+    	};
+    }
+
+    // Export api
+    window.fullscreen = fullscreen;
+})();
+
 function InitPxVideo(options) {
 
 	"use strict";
@@ -12,6 +86,37 @@ function InitPxVideo(options) {
 		});
 	}
 
+	// Get click position relative to parent
+	// http://www.kirupa.com/html5/getting_mouse_click_position.htm
+	// ---------------------------------
+	function getClickPosition(e) {
+		var parentPosition = window.fullscreen.isFullScreen() ? { x: 0, y: 0 } : getPosition(e.currentTarget);
+
+		return {
+			x: e.clientX - parentPosition.x,
+			y: e.clientY - parentPosition.y
+		};
+	}
+
+	// Get element position
+	// http://www.kirupa.com/html5/getting_mouse_click_position.htm
+	// ---------------------------------
+	function getPosition(element) {
+		var xPosition = 0;
+		var yPosition = 0;
+
+		while (element) {
+			xPosition += (element.offsetLeft - element.scrollLeft + element.clientLeft);
+			yPosition += (element.offsetTop - element.scrollTop + element.clientTop);
+			element = element.offsetParent;
+		}
+		
+		return { 
+			x: xPosition, 
+			y: yPosition 
+		};
+	}
+
 	// Utilities for caption time codes
 	function video_timecode_min(tc) {
 		var tcpair = [];
@@ -255,6 +360,9 @@ function InitPxVideo(options) {
 	obj.duration = obj.container.getElementsByClassName("px-video-duration")[0];
 	obj.txtSeconds = obj.container.getElementsByClassName("px-seconds");
 
+	obj.toggleFullscreen = obj.container.querySelector("[data-player='toggle-fullscreen']");
+	obj.videoContainer = obj.container.querySelector(".player-video");
+
 	// Update number of seconds in rewind and fast forward buttons
 	obj.txtSeconds[0].innerHTML = obj.seekInterval;
 	obj.txtSeconds[1].innerHTML = obj.seekInterval;
@@ -265,30 +373,41 @@ function InitPxVideo(options) {
 		obj.isTextTracks = true;
 	}
 
-	// Play
-	obj.btnPlay.addEventListener("click", function() {
+	// Fullscreen
+	obj.toggleFullscreen.addEventListener("click", function() {
+		if(!window.fullscreen.isFullScreen()) {
+			window.fullscreen.requestFullScreen(obj.container);
+		}
+		else {
+			window.fullscreen.cancelFullScreen();
+		}
+	}, false);
+
+	// Click video
+	obj.videoContainer.addEventListener("click", function() {
+		if(obj.movie.paused) {
+			play();
+		}
+		else if(obj.movie.ended) {
+			restart();
+		}
+		else {
+			pause();
+		}
+	}, false);
+
+	function play() {
 		obj.movie.play();
-
 		obj.container.className = obj.container.className.replace("stopped", "playing");
+		
+	}
 
-		obj.btnPlay.className = "px-video-play hide";
-		obj.btnPause.className = "px-video-pause px-video-show-inline";
-		obj.btnPause.focus();
-	}, false);
-
-	// Pause
-	obj.btnPause.addEventListener("click", function() {
+	function pause() {
 		obj.movie.pause(); 
-
 		obj.container.className = obj.container.className.replace("playing", "stopped");
+	}
 
-		obj.btnPlay.className = "px-video-play px-video-show-inline";
-		obj.btnPause.className = "px-video-pause hide";
-		obj.btnPlay.focus();
-	}, false);
-
-	// Restart
-	obj.btnRestart.addEventListener("click", function() {
+	function restart() {
 		// Move to beginning
 		obj.movie.currentTime = 0;
 
@@ -298,11 +417,17 @@ function InitPxVideo(options) {
 		}
 
 		// Play and ensure the play button is in correct state
-		obj.movie.play();
-		obj.btnPlay.className = "px-video-play hide";
-		obj.btnPause.className = "px-video-pause px-video-show-inline";
+		play();
+	}
 
-	}, false);
+	// Play
+	obj.btnPlay.addEventListener("click", function() { play(); obj.btnPause.focus(); }, false);
+
+	// Pause
+	obj.btnPause.addEventListener("click", function() { pause(); obj.btnPlay.focus(); }, false);
+
+	// Restart
+	obj.btnRestart.addEventListener("click", restart, false);
 
 	// Rewind
 	obj.btnRewind.addEventListener("click", function() {
@@ -373,7 +498,7 @@ function InitPxVideo(options) {
 
 	// Skip when clicking progress bar
 	obj.progressBar.addEventListener("click", function(e) {
-		obj.pos = (e.pageX - this.offsetLeft) / this.offsetWidth;
+		obj.pos = getClickPosition(e).x / this.offsetWidth;
 		obj.movie.currentTime = obj.pos * obj.movie.duration;
 		
 		// Special handling for "manual" captions
@@ -527,101 +652,5 @@ function InitPxVideo(options) {
 			var tracks = obj.movie.getElementsByTagName("track");
 			obj.movie.removeChild(tracks[0]);
 		}
-
 	}
-};
-
-
-
-/*$(function() { 
-	$("video").simplePlayer();
-});*/
-
-// Simple player plugin
-// ---------------------------------
-/*;(function($) {
-	$.fn.simplePlayer = function (settings) {
-		// Config defaults
-		var config = {
-			wrapperClass: 	"media", // Class name added to replaced selects
-			shownClass: 	"in",
-			autoplay: 		false,
-			templates: 		{
-								controls: "<div class="media-controls js-media-controls"> \
-									<button type="button" class="play button-toggle-play js-button-toggle-play"> \
-										<span class="icon-play"></span> \
-									</button> \
-									<div class="progress progress-play js-progress-play" role="progress-bar"> \
-										<div class="progress-buffered js-progress-buffered"></div> \
-										<div class="progress-played js-progress-played"></div> \
-									</div> \
-									<div class="time js-time"> \
-										<span class="time-elapsed js-time-elapsed">88:88</span> \
-										<span class="time-seperator js-time-seperator">/</span> \
-										<span class="time-total js-time-total">88:88</span> \
-									</div> \
-									<div class="volume has-popover js-volume"> \
-										<button type="button" class="button-toggle-mute js-button-toggle-mute"> \
-											<span class="icon-volume-up"></span> \
-										</button> \
-										<div class="popover popover-volume js-popover-volume"> \
-											<div class="progress vertical-progress progress-audio-volume js-progress-audio-volume"> \
-												<div class="progress-volume js-progress-volume" style="height: 80%"></div> \
-											</div> \
-											<div class="volume-label js-volume-label">100%</div> \
-										</div> \
-									</div> \
-									<button type="button" class="fullscreen button-fullscreen js-button-fullscreen"> \
-										<span class="icon-resize-full"></span> \
-									</button> \
-								</div>",
-								overlay: "<div class="overlay overlay-play"><span><i class="icon-play"></i></span></div>"
-							}
-		};
-
-		// Extend settings if they"re passed
-		if (settings) {
-			$.extend(config, settings);
-		}
-		
-		this.each(function() {
-			var player = this,
-				status = {},
-				$player = $(this).wrap("<div class="" + config.wrapperClass + (config.autoplay ? " playing" : " stopped") + "" />"),
-				$wrapper = $player.parents("." + config.wrapperClass),
-				supportMP4 = (function (v) { return (v.canPlayType && v.canPlayType("video/mp4")); }(document.createElement("video")));
-
-				console.log($wrapper);
-
-			// Inject the controls
-			$(config.templates.controls).insertAfter($player);
-			$(config.templates.overlay).insertAfter($player);
-
-			// Select controls
-			var $playbackToggle = $(".js-button-toggle-play"),
-				$muteToggle = $(".js-button-toggle-mute");
-
-			function togglePlayback() { 
-				if(status.playing && status.playing == true) {
-					player.pause();
-					status.playing = false;
-					$wrapper.removeClass("playing").addClass("paused");
-				} else {
-					player.play();
-					status.playing = true;
-					$wrapper.removeClass("paused stopped").addClass("playing");
-				}
-				$("span", this).attr("class", "icon-" + (status.playing ? "pause" : "play"));
-			};
-
-			function toggleMute() { 
-				player.muted = !status.muted;
-				status.muted = player.muted;
-				$("span", this).attr("class", "icon-" + (status.muted ? "mute" : "volume-up"));
-			};
-
-			$playbackToggle.on("click", togglePlayback);
-			$muteToggle.on("click", toggleMute);
-		});
-	};
-})(jQuery);*/
+}

assets/less/docs.less

@@ -7,6 +7,24 @@
 // Mixins
 @import "lib/mixins.less";
 
+@font-face {
+  font-family: "Avenir";
+  src: 	url("../../assets/fonts/AvenirLTStd-Medium.woff2") format("woff2"), 
+  		url("../../assets/fonts/AvenirLTStd-Medium.woff") format("woff"), 
+       	url("../../assets/fonts/AvenirLTStd-Medium.ttf")  format("truetype");
+  font-style:   normal;
+  font-weight:  400;
+}
+
+@font-face {
+  font-family: "Avenir";
+  src: 	url("../../assets/fonts/AvenirLTStd-Heavy.woff2") format("woff2"), 
+  		url("../../assets/fonts/AvenirLTStd-Heavy.woff") format("woff"), 
+       	url("../../assets/fonts/AvenirLTStd-Heavy.ttf")  format("truetype");
+  font-style:   normal;
+  font-weight:  600;
+}
+
 // BORDER-BOX ALL THE THINGS! 
 // http://paulirish.com/2012/box-sizing-border-box-ftw/
 *, *::after, *::before {  
@@ -16,22 +34,27 @@ html {
 	font-size: 62.5%;
 }
 body {
-	font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
+	font-family: "Avenir", "Helvetica Neue", Helvetica, Arial, sans-serif;
 	.font-size(18);
 	color: #6D797F;
 	line-height: 1.5;
 	background: #ECF0F1;
 	max-width: 960px;
-	margin: 50px auto;
+	margin: 40px auto;
 	text-align: center;
 }
 h1 {
 	.font-size(48);
 	letter-spacing: -.025em;
 	color: #2E3C44;
-	margin: 0 0 20px;
+	margin: 0 0 10px;
 	line-height: 1.2;
+	-webkit-font-smoothing: antialiased;
+	-moz-osx-font-smoothing: grayscale;
 }
 p {
 	margin: 0 0 20px;
+}
+header {
+	margin-bottom: 40px;
 }

assets/less/simple-media.less

@@ -4,12 +4,25 @@
 
 // Variables
 // -------------------------------
-@base-color: 	#2E3C44;
-@green: 		#1ABC9C;
-@red:           #D44334;
-//@green:       #4CB953;
-@blue:          #3498DB;
-@control-color: @blue;
+// Colors
+@base-color: 		#2E3C44;
+@green: 			#1ABC9C;
+@red:           	#D44334;
+@blue:          	#3498DB;
+
+// Grays
+@gray-dark: 		#343f4a;
+@gray: 				#565d64;
+@gray-light: 		#6f7e86;
+@gray-lighter: 		#859093;
+@gray-lightest: 	#cbd0d3;
+@gray-light-mega: 	#dadfe2;
+@off-white:         #f9fafb;
+
+// Controls
+@control-color: 		@gray-lightest;
+@control-color-active: 	@blue;
+@control-spacing: 		10px;
 
 
 // BORDER-BOX ALL THE THINGS! (http://paulirish.com/2012/box-sizing-border-box-ftw/)
@@ -51,7 +64,39 @@
 	position: relative;
 	max-width: 100%;
 	overflow: hidden; // For the controls
+	background: #000;
 
+	// For video
+	&-video {
+		position: relative;
+	}
+
+	&:fullscreen {
+		height: 100%;
+		width: 100%;
+
+		.player-video {
+			position: absolute;
+			top: 50%;
+			left: 0;
+			right: 0;
+			transform: translateY(-50%);
+		}
+		.controls {
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			right: 0;
+
+			.icon-exit-fullscreen {
+				display: block;
+
+				& + svg {
+					display: none;
+				}
+			}
+		}
+	}
 	video {
 		width: 100%;
 		height: auto;
@@ -61,15 +106,34 @@
 		width: 18px;
 		height: 18px;
 	}
-	.controls {
-		.clearfix();
+	.px-video-captions {
 		position: absolute;
 		bottom: 0;
 		left: 0;
-		right: 0;
-		padding: 10px 5px;
-		background: rgba(0,0,0, .75);
-		transition: transform .3s ease;
+		width: 100%;
+		padding: 20px;
+		min-height: 2.5em;
+		//background-color: #000;
+		color: #fff;
+		font-size: 24px;
+		text-shadow: 0 1px 1px rgba(0,0,0, .75);
+		text-align: center;
+		//opacity: 0.75;
+
+		-webkit-font-smoothing: antialiased;
+		font-weight: 500;
+	}
+	.controls {
+		.clearfix();
+		position: relative;
+		//position: absolute;
+		//bottom: 0;
+		//left: 0;
+		//right: 0;
+		padding: (@control-spacing * 2) @control-spacing @control-spacing;
+		//background: rgba(red(@gray-dark), green(@gray-dark), blue(@gray-dark), .9);
+		background: @gray-dark;
+		//transition: transform .3s ease;
 		line-height: 1;
 
 		button {
@@ -82,8 +146,8 @@
 			display: inline-block;
 			vertical-align: middle;
 			margin: 0 2px;
-			padding: 5px 10px;
-			color: #ddd;
+			padding: (@control-spacing / 2) @control-spacing;
+			color: @control-color;
 			transition: background .3s ease;
 			border-radius: 3px;
 
@@ -93,22 +157,23 @@
 				transition: fill .3s ease;
 			}
 			&:focus {
-				background: #000;
 				outline: 0;
 			}
 			&:hover {
-				background: @control-color;
+				background: @control-color-active;
 			}
 			&:hover svg,
 			&:focus svg {
 				fill: #fff;
 			}
 		}
+		.icon-exit-fullscreen {
+			display: none;
+		}
 		.px-video-time {
 			display: inline-block;
 			vertical-align: middle;
-			padding-top: 3px;
-			margin-left: 10px;
+			margin-left: @control-spacing;
 			color: #fff;
 			font-weight: 600;
 			font-size: 14px;
@@ -117,24 +182,31 @@
 	}
 	progress {
 		position: absolute;
-		top: -10px;
+		top: 0;
 		left: 0;
 		right: 0;
 		width: 100%;
-		height: 10px;
+		height: @control-spacing;
 		margin: 0;
 		vertical-align: top;
-
+		
 		&[value] {
 			/* Reset the default appearance */
 			-webkit-appearance: none;
 			border: none;
-			
+			background: @gray;
+			cursor: pointer;
+
 			&::-webkit-progress-bar {
-				background-color: #eee;
+				background: @gray;
 			}
+
+			// The value
 			&::-webkit-progress-value {
-				background-color: @control-color;
+				background: @control-color-active;
+			}
+			&::-moz-progress-bar {
+				background: @control-color-active;
 			}
 		}
 	}
@@ -147,17 +219,55 @@
 	/*&.playing .controls {
 		transform: translateY(100%);
 	}*/
+
+	.controls .px-video-pause,
+	&.playing .controls .px-video-play {
+		display: none;
+	}
+	&.playing .controls .px-video-pause {
+		display: inline-block;
+	}
+
+	/* volume range input */
+	input[type='range'] {
+		-webkit-appearance: none;
+		height: 6px;
+		width: 100px;
+		margin-right: @control-spacing;
+		background: @gray;
+		outline: 0;
+		border-radius: 10px;
+
+		&:focus::-webkit-slider-thumb {
+			//outline: 1px #999 dotted;
+			background: @control-color-active;
+		}
+		&::-moz-range-track {
+			-moz-appearance: none;
+			height: 6px;
+			background: @gray;
+			border: none;
+			border-radius: 10px;
+		}
+		&::-webkit-slider-thumb {
+			-webkit-appearance: none !important;
+			height: 12px;
+			width: 12px;
+			background: @control-color;
+			border-radius: 100%;
+			transition: background .3s ease;
+		}
+		&::-moz-range-thumb {
+			height: 12px;
+			width: 12px;
+			background: @control-color;
+			border-radius: 100%;
+		}
+	}
 }
 
 
 /* containers */
-.px-video-img-captions-container * {
-	box-sizing: border-box;
-}
-
-.px-video-img-captions-container {
-	position: relative;
-}
 
 /* progress indicator */
 .px-video-progress {
@@ -173,22 +283,7 @@
 }*/
 
 /* caption area */
-.px-video-captions {
-	position: absolute;
-	top: 0;
-	left: 0;
-	width: 100%;
-	padding: .5em;
-	min-height: 2.5em;
-	background-color: #000;
-	color: #fff;
-	font-size: 1.1em;
-	text-align: center;
-	opacity: 0.75;
 
-	-webkit-font-smoothing: antialiased;
-	font-weight: 500;
-}
 
 /* buttons */
 .px-video-controls button {
@@ -259,34 +354,6 @@
 	background-position: -6px -656px;
 }
 
-/* volume range input */
-.px-video-controls input[type='range'] {
-	-webkit-appearance: none;
-	height: 6px;
-	width: 100px;
-	margin-top: 8px;
-	background-color: #E6E6E6;
-	outline:none;
-}
-.px-video-controls input[type='range']:focus::-webkit-slider-thumb {
-	outline: 1px #999 dotted;
-}
-.px-video-controls input[type='range']::-moz-range-track {
-	-moz-appearance: none;
-	height: 6px;
-	background-color: #E6E6E6;
-	border: none;
-}
-.px-video-controls input[type='range']::-webkit-slider-thumb {
-	-webkit-appearance: none !important;
-	height: 10px;
-	width: 6px;
-	background-color: #666;
-}
-.px-video-controls input[type='range']::-moz-range-thumb {
-	height: 12px;
-	width: 8px;
-}
 /* fixing display for IE10+ */
 @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
 	.px-video-controls input[type='range'] {

assets/templates/controls.html

@@ -14,7 +14,7 @@
 			<svg><use xlink:href="#icon-play"></use></svg>
 			<span class="sr-only">Play</span>
 		</button>
-		<button class="px-video-pause hide" data-player="pause">
+		<button class="px-video-pause" data-player="pause">
 			<svg><use xlink:href="#icon-pause"></use></svg>
 			<span class="sr-only">Pause</span>
 		</button>
@@ -47,5 +47,11 @@
 				<span class="sr-only">Captions</span>
 			</label>
 		<!--</div>-->
+
+		<button class="player-toggle-fullscreen" data-player="toggle-fullscreen">
+			<svg class="icon-exit-fullscreen"><use xlink:href="#icon-collapse"></use></svg>
+			<svg><use xlink:href="#icon-expand"></use></svg>
+			<span class="sr-only">Toggle fullscreen</span>
+		</button>
 	</div>
 </div>