Full screen improvements, tweaked examples

assets/js/docs.js

@@ -6,12 +6,12 @@
 
 // Register a callback
 simpleMedia.on("setup", function() {
-	console.log(this);
+	//console.log(this);
 });
 
 //execute shout
 simpleMedia.setup({
-	debug: 	true,
-	title: 	"PayPal demo",
+	//debug: 	true,
+	title: 	"Video demo",
 	html: 	templates.controls.render({})
 });

assets/js/simple-media.js

@@ -65,8 +65,8 @@
 		}
 	};
 
+	// Credits: http://paypal.github.io/accessible-html5-video-player/
 	// Unfortunately, due to scattered support, browser sniffing is required
-	// http://paypal.github.io/accessible-html5-video-player/
 	function browserSniff() {
 		var nAgt = navigator.userAgent,
 			browserName = navigator.appName,
@@ -128,9 +128,7 @@
 		// Return data
 		return [browserName, majorVersion];
 	}
-
 	// Utilities for caption time codes
-	// http://paypal.github.io/accessible-html5-video-player/
 	function video_timecode_min(tc) {
 		var tcpair = [];
 		tcpair = tc.split(" --> ");
@@ -224,9 +222,7 @@
 			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;
@@ -642,7 +638,9 @@
 
 				// If Safari 7, removing track from DOM [see "turn off native caption rendering" above]
 				if (player.browserName === "Safari" && player.browserMajorVersion === 7) {
-					console.log("Safari 7 detected; removing track from DOM");
+					if (config.debug) {
+						console.log("Safari 7 detected; removing track from DOM");
+					}
 					tracks = player.media.getElementsByTagName("track");
 					player.media.removeChild(tracks[0]);
 				}
@@ -659,11 +657,23 @@
 
 	// Setup fullscreen
 	function setupFullscreen() {
-		console.log(fullscreen.supportsFullScreen ? "Fullscreen supported" : "No fullscreen supported");
+		if(player.type === "video" && config.fullscreen.enabled) {
+			
+			if(config.debug) {
+				console.log(fullscreen.supportsFullScreen ? "Fullscreen supported" : "No fullscreen supported");
+			}
+			if(fullscreen.supportsFullScreen) {
+				if(config.debug) {
+					console.log("Fullscreen enabled");
+				}
 
-		if(config.fullscreen.enabled && fullscreen.supportsFullScreen) {
-			player.container.className += " " + config.classes.fullscreen.enabled;
+				player.container.className += " " + config.classes.fullscreen.enabled;
+			}
+			else if(config.debug) {
+				console.warn("Fullscreen not supported");
+			}
 		}
+		
 	}
 
 	// Listen for events
@@ -904,7 +914,7 @@
 		}
 		setupPlayer(element);
 
-		//now we execute callbacks registered to shout
+		// Trigger the setup event
 		executeHandlers("setup");
 	}
 

assets/less/docs.less

@@ -8,21 +8,21 @@
 @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-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;
+	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! 
@@ -38,9 +38,7 @@ body {
 	.font-size(18);
 	color: #6D797F;
 	line-height: 1.5;
-	background: #ECF0F1;
-	max-width: 960px;
-	margin: 40px auto;
+	background: #fff;
 	text-align: center;
 }
 h1 {
@@ -56,5 +54,20 @@ p {
 	margin: 0 0 20px;
 }
 header {
-	margin-bottom: 40px;
+	margin: 40px 0;
+}
+
+.example-audio .player,
+.example-video .player {
+	margin: 0 auto;
+
+	&:fullscreen {
+		max-width: none;
+	}
+}
+.example-audio .player {
+	max-width: 480px;
+}
+.example-video .player {
+	max-width: 1200px;
 }

assets/less/simple-media.less

@@ -89,6 +89,7 @@
 .player {
 	position: relative;
 	max-width: 100%;
+	min-width: 290px;
 	overflow: hidden; // For the controls
 	background: #000;
 
@@ -141,11 +142,18 @@
 		line-height: 1;
 
 		// Layout
-		&-playback {
-			float: left;
-		}
 		&-sound {
-			float: right;
+			display: inline-block;
+			margin-top: @control-spacing;
+		}
+		@media (min-width: 560px) {
+			&-playback {
+				float: left;
+			}
+			&-sound {
+				float: right;
+				margin-top: 0;
+			}
 		}
 		
 		input + label, 
@@ -327,15 +335,25 @@
 
 	// Full screen mode
 	&:fullscreen {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
 		height: 100%;
 		width: 100%;
 
 		.player-video {
-			position: absolute;
-			top: 50%;
-			left: 0;
-			right: 0;
-			transform: translateY(-50%);
+			height: 100%;
+			width: 100%;
+
+			video {
+				height: 100%;
+			}
+			.player-captions {
+				top: auto;
+				bottom: 80px;
+			}
 		}
 		.player-controls {
 			position: absolute;

assets/templates/controls.html

@@ -2,8 +2,7 @@
 	<progress class="player-progress" max="100" value="0">
 		<span>0</span>% played
 	</progress>
-
-	<div class="player-controls-playback">
+	<span class="player-controls-playback">
 		<button data-player="restart">
 			<svg><use xlink:href="#icon-refresh"></use></svg>
 			<span class="sr-only">Restart</span>
@@ -28,9 +27,8 @@
 			<span class="sr-only">Time</span>
 			<span class="player-duration">00:00</span>
 		</span>
-	</div>
-
-	<div class="player-controls-sound">
+	</span>
+	<span class="player-controls-sound">
 		<input class="inverted sr-only" id="mute{id}" type="checkbox" data-player="mute">
 		<label id="mute{id}" for="mute{id}">
 			<svg class="icon-muted"><use xlink:href="#icon-muted"></use></svg>
@@ -52,5 +50,5 @@
 			<svg><use xlink:href="#icon-expand"></use></svg>
 			<span class="sr-only">Toggle fullscreen</span>
 		</button>
-	</div>
-</div>
+	</span>
+</div>