Source API changes, Vimeo fixes, still WIP

10 files changed, 196 insertions, 180 deletions

diff --git a/docs/src/js/docs.js b/docs/src/js/docs.js
index 3835fef1..dfeaa899 100644
--- a/docs/src/js/docs.js
+++ b/docs/src/js/docs.js
@@ -2,182 +2,124 @@
 // Docs example
 // ==========================================================================
 
-/*global plyr, templates */
+/*global plyr, shr, templates */
 
 // Setup the player
 plyr.setup({
 	debug: 	true,
 	volume: 9,
-	title: 	"Video demo",
+	title: 	'Video demo',
 	html: 	templates.controls.render({}),
 	tooltips: true,
 	captions: {
 		defaultActive: true
 	},
 	onSetup: function() {
-		if(!("media" in this)) {
+		if(!('media' in this)) {
 			return;
 		}
 
 		var player 	= this,
 			type 	= player.media.tagName.toLowerCase(),
-			toggle 	= document.querySelector("[data-toggle='fullscreen']");
+			toggle 	= document.querySelector('[data-toggle="fullscreen"]');
 
-		console.log("✓ Setup done for <" + type + ">");
+		console.log('✓ Setup done for <' + type + '>');
 
-		if(type === "video" && toggle) {
-			toggle.addEventListener("click", player.toggleFullscreen, false);
+		if(type === 'video' && toggle) {
+			toggle.addEventListener('click', player.toggleFullscreen, false);
 		}
 	}
 });
 
-// General functions
-(function() { 
-	// Popup
-	function popup(event) {
-		// Prevent the link opening
-		if(event.target.nodeName.toLowerCase() == "a") {
-			if(event.preventDefault) { 
-				event.preventDefault();
-			}
-			else {
-				event.returnValue = false;
-			}
-		}
-
-		var link 	= event.target,
-			url		= link.href,
-			width 	= link.getAttribute("data-window-width") || 600,
-			height 	= link.getAttribute("data-window-height") || 600,
-			name 	= link.getAttribute("data-window-name") || "popup";
-
-		// If window exists, just focus it
-		if(window["window-"+name] && !window["window-"+name].closed) {
-			window["window-"+name].focus();
-		}
-		else {
-			// Get position
-			var left = window.screenLeft !== undefined ? window.screenLeft : screen.left;
-			var top = window.screenTop !== undefined ? window.screenTop : screen.top;
-
-			// Open in the centre of the screen
-			var x = (screen.width / 2) - (width / 2) + left,
-				y = (screen.height / 2) - (height / 2) + top;
-
-			// Open that window
-			window["window-"+name] = window.open(url, name, "top=" + y +",left="+ x +",width=" + width + ",height=" + height);
-
-			// Focus new window
-			window["window-"+name].focus();
-		}
-	}
-
-	// Trigger popups
-	document.querySelector(".js-popup").addEventListener("click", popup);
-
-	// Get JSONP
-	function getJSONP(url, callback) {
-	    var name = "jsonp_callback_" + Math.round(100000 * Math.random());
-
-	    // Cleanup to prevent memory leaks and hit original callback
-	    window[name] = function(data) {
-	        delete window[name];
-	        document.body.removeChild(script);
-	        callback(data);
-	    };
-
-	    // Create a faux script
-	    var script = document.createElement("script");
-	    script.setAttribute("src", url + (url.indexOf("?") >= 0 ? "&" : "?") + "callback=" + name);
-
-	    // Inject to the body
-	    document.body.appendChild(script);
-	}
-
-	// Get star count
-	var storageSupported = ("sessionStorage" in window),
-		selectors = {
-			github: 	".js-stargazers-count",
-			twitter: 	".js-tweet-count"
-		};
-
-	// Display the count next to the button
-	function displayCount(selector, count) {
-		document.querySelector(selector).innerHTML = count;
+// Setup shr
+shr.setup({
+	count: {
+		classname: 'btn-count'
 	}
+});
 
-	// Add star
-	function formatGitHubCount(count) {
-		return "&#9733; " + count;
-	}
-
-	// Check if it's in session storage first
-	if(storageSupported && "github_stargazers" in window.sessionStorage) {
-		displayCount(selectors.github, formatGitHubCount(window.sessionStorage.github_stargazers));
-	}
-	else {
-		getJSONP("https://api.github.com/repos/selz/plyr?access_token=a46ac653210ba6a6be44260c29c333470c3fbbf5", function (json) {
-			if (json && typeof json.data.stargazers_count !== "undefined") {
-				// Update UI 
-				displayCount(selectors.github, formatGitHubCount(json.data.stargazers_count));
-
-				// Store in session storage
-				window.sessionStorage.github_stargazers = json.data.stargazers_count;
-			}
-		});
-	}
-
-	// Get tweet count
-	if(storageSupported && "tweets" in window.sessionStorage) {
-		displayCount(selectors.twitter, window.sessionStorage.tweets);
-	}
-	else {
-		getJSONP("https://cdn.api.twitter.com/1/urls/count.json?url=plyr.io", function (json) {
-			if (json && typeof json.count !== "undefined") {
-				// Update UI 
-				displayCount(selectors.twitter, json.count);
-
-				// Store in session storage
-				window.sessionStorage.tweets = json.count;
-			}
-		});
-	}
-
-	// Tabs
-	var tabs = document.querySelectorAll(".nav-panel a"),
-		panels = document.querySelectorAll(".panels > .panel"),
-		activeClass = "active";
-
-	for (var i = tabs.length - 1; i >= 0; i--) {
-		tabs[i].addEventListener("click", togglePanel);
-	}
-
-	function togglePanel(event) {
-		event.preventDefault();
-
-		var tab = event.target,
-			panel = document.querySelector(tab.getAttribute("href"));
-
-		for (var i = panels.length - 1; i >= 0; i--) {
-			panels[i].classList.remove(activeClass);
-		}
-
-		for (var x = tabs.length - 1; x >= 0; x--) {
-			tabs[x].classList.remove(activeClass);
+// General functions
+(function() { 
+	var buttons = document.querySelectorAll('[data-source]');
+
+    // Bind to each button
+    for (var i = buttons.length - 1; i >= 0; i--) {
+        buttons[i].addEventListener('click', newSource);
+    }
+
+    // Set a new source
+    function newSource() {
+        var trigger = this,
+        type        = trigger.getAttribute('data-source'),
+        player      = document.querySelector('.player').plyr;
+
+        switch(type) {
+            case 'video':
+                player.source({
+                    type:       'video',
+                    sources: [{ 
+                        src:    'https://cdn.selz.com/plyr/1.0/movie.mp4',
+                        type:   'video/mp4'
+                    },
+                    {
+                        src:    'https://cdn.selz.com/plyr/1.0/movie.webm',
+                        type:   'video/webm'
+                    }],
+                    poster:     'https://cdn.selz.com/plyr/1.0/poster.jpg',
+                    tracks:     [{
+                        kind:   'captions',
+                        label:  'English',
+                        srclang:'en',
+                        src:    'https://cdn.selz.com/plyr/1.0/example_captions_en.vtt',
+                        default: true
+                    }]
+                });
+                break;
+
+            case 'audio':
+                player.source({
+                    type:       'audio',
+                    sources: [{ 
+                        src:    'https://cdn.selz.com/plyr/1.0/logistics-96-sample.mp3',
+                        type:   'audio/mp3'
+                    },
+                    {
+                        src:    'https://cdn.selz.com/plyr/1.0/logistics-96-sample.ogg',
+                        type:   'audio/ogg'
+                    }]
+                });
+                break;
+
+            case 'youtube':
+                player.source({
+                    type:       'youtube',
+                    sources:    'iicnVez5U7M'
+                });
+                break;
+
+            case 'vimeo':
+                player.source({
+                    type:       'vimeo',
+                    sources:    '125220818'
+                });
+                break;
+        }
+
+        for (var x = buttons.length - 1; x >= 0; x--) {
+			buttons[x].classList.remove('active');
 		}
 
-		panel.classList.add(activeClass);
-		event.target.classList.add(activeClass);
-	}
+		event.target.classList.add('active');
+    }
 })();
 
 // Google analytics 
 // For demo site (http://[www.]plyr.io) only
-if(document.domain.indexOf("plyr.io") > -1) {
+if(document.domain.indexOf('plyr.io') > -1) {
 	(function(i,s,o,g,r,a,m){i.GoogleAnalyticsObject=r;i[r]=i[r]||function(){
 	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
-	})(window,document,"script","//www.google-analytics.com/analytics.js","ga");
-	ga("create", "UA-40881672-11", "auto");
-	ga("send", "pageview");
+	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
+	ga('create', 'UA-40881672-11', 'auto');
+	ga('send', 'pageview');
 }
\ No newline at end of file
diff --git a/docs/src/less/components/buttons.less b/docs/src/less/components/buttons.less
index 68c1f5d3..4d4198bc 100644
--- a/docs/src/less/components/buttons.less
+++ b/docs/src/less/components/buttons.less
@@ -67,6 +67,10 @@ nav {
 		box-shadow: inset 0 1px 1px rgba(0,0,0, .2);
 		position: relative;
 		z-index: 1;
+
+		.icon {
+			color: inherit;
+		}
 	}
 
 	@media (min-width: 560px) {
@@ -92,6 +96,7 @@ nav {
 	box-shadow: inset 0 1px 0 #fff, 0 1px 1px rgba(0,0,0, .05);
 	text-shadow: 0 1px 1px #fff;
 	color: @gray;
+	transition: all .3s ease;
 
 	&:hover,
 	&:focus {
@@ -100,6 +105,15 @@ nav {
 		color: @link-color;
 		outline: 0;
 	}
+	&-youtube .icon {
+		color: @color-youtube;
+	}
+	&-vimeo .icon {
+		color: @color-vimeo;
+	}
+	&-twitter .icon {
+		color: @color-twitter;
+	}
 }
 .btn-primary {
 	background-image: linear-gradient(@link-color, darken(@link-color, 3%));
@@ -123,8 +137,8 @@ nav {
 // Count bubble
 .btn-count {
 	position: relative;
-	margin-left: 6px;
-	padding: ((@padding-base / 2) - 1px);
+	margin-left: (@padding-base / 2);
+	padding: (@padding-base / 2) (@padding-base * .75);
 	background: #fff;
 	border: 1px solid @gray-light;
 
diff --git a/docs/src/less/components/examples.less b/docs/src/less/components/examples.less
index f468e1a8..8c0b689e 100644
--- a/docs/src/less/components/examples.less
+++ b/docs/src/less/components/examples.less
@@ -3,46 +3,46 @@
 // ==========================================================================
 
 // Example players
-.example-audio .player,
-.example-video .player {
+.player {
     margin: 0 auto @padding-base;
 
     &-controls {
         border-radius: 0 0 @border-radius-base @border-radius-base;
     }
 }
-.example-audio .player {
+.player-audio {
     max-width: @example-width-audio;
 
-    &-controls {
+    .player-controls {
         border-radius: @border-radius-base;
     }
-    &-progress {
+    .player-progress {
         border-radius: @border-radius-base @border-radius-base 0 0;
         overflow: hidden;
     }
 }
-// Base styles
-.example-video .player {
+.player-video,
+.player-youtube,
+.player-vimeo {
     max-width: @example-width-video;
-
-    video,
-    iframe {
-        border-radius: @border-radius-base;
-    }
-    iframe {
-        -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
-    }
+}
+video,
+.player-video-embed {
+    border-radius: @border-radius-base;
+}
+.player-video-embed {
+    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
 }
 
 // Style full supported player
-.example-video .player-video,
-.example-video .player-youtube {
+.player-video,
+.player-youtube,
+.player-vimeo {
     video,
-    iframe {
+    .player-video-embed {
         border-radius: @border-radius-base @border-radius-base 0 0;
     }
-    &-fullscreen,
+    &.player-fullscreen,
     &.fullscreen-active {
         max-width: none;
 
@@ -55,8 +55,4 @@
             -webkit-mask-image: none;
         }
     }
-}
-.example-video .player-vimeo .player-video-embed {
-    border-radius: @border-radius-base @border-radius-base 0 0;
-    -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
 }
\ No newline at end of file
diff --git a/docs/src/less/components/icons.less b/docs/src/less/components/icons.less
new file mode 100644
index 00000000..882ce25d
--- /dev/null
+++ b/docs/src/less/components/icons.less
@@ -0,0 +1,22 @@
+// ==========================================================================
+// Icons
+// ==========================================================================
+
+// Base size icon styles
+.icon {
+	fill: currentColor;
+	width: @icon-size;
+	height: @icon-size;
+	vertical-align: -3px;
+}
+
+// Within elements
+a svg,
+button svg,
+label svg {
+	pointer-events: none;
+}
+a .icon,
+.btn .icon {
+	margin-right: (@padding-base / 2);
+}
\ No newline at end of file
diff --git a/docs/src/less/docs.less b/docs/src/less/docs.less
index cea3a2af..ea799382 100644
--- a/docs/src/less/docs.less
+++ b/docs/src/less/docs.less
@@ -14,21 +14,14 @@
 // Animation
 @import "lib/animation.less";
 
-// Base layout
-@import "components/base.less";
-
 // Type
 @import "lib/fontface.less";
 @import "components/type.less";
 
-// Buttons
+// Components
+@import "components/base.less";
+@import "components/icons.less";
 @import "components/buttons.less";
-
-// Panels
 @import "components/panels.less";
-
-// Error
 @import "components/error.less";
-
-// Examples
 @import "components/examples.less";
\ No newline at end of file
diff --git a/docs/src/less/variables.less b/docs/src/less/variables.less
index 4ea34d84..8cb4bc1b 100644
--- a/docs/src/less/variables.less
+++ b/docs/src/less/variables.less
@@ -10,6 +10,11 @@
 @gray-lighter:              #dbe3e8;
 @off-white:                 #f2f5f7;
 
+// Brands
+@color-twitter:             #4BAAF4;
+@color-youtube:             #cc181e;
+@color-vimeo:               #19b7ed;
+
 // Base
 @body-background: 			@off-white;
 
@@ -18,6 +23,9 @@
 @padding-base:              20px;
 @arrow-size:                8px;
 
+// Icons
+@icon-size: 				18px;
+
 // Breakpoints
 @screen-sm:                 480px;
 @screen-md:                 768px;
diff --git a/docs/src/sprite/icon-github.svg b/docs/src/sprite/icon-github.svg
new file mode 100755
index 00000000..685dd746
--- /dev/null
+++ b/docs/src/sprite/icon-github.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">

+<path fill-rule="evenodd" clip-rule="evenodd" d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6

+	C5.9,15.9,6,15.6,6,15.4c0-0.2,0-0.7,0-1.4C3.8,14.5,3.3,13,3.3,13c-0.4-0.9-0.9-1.2-0.9-1.2c-0.7-0.5,0.1-0.5,0.1-0.5

+	c0.8,0.1,1.2,0.8,1.2,0.8C4.4,13.4,5.6,13,6,12.8c0.1-0.5,0.3-0.9,0.5-1.1c-1.8-0.2-3.6-0.9-3.6-4c0-0.9,0.3-1.6,0.8-2.1

+	c-0.1-0.2-0.4-1,0.1-2.1c0,0,0.7-0.2,2.2,0.8c0.6-0.2,1.3-0.3,2-0.3c0.7,0,1.4,0.1,2,0.3c1.5-1,2.2-0.8,2.2-0.8

+	c0.4,1.1,0.2,1.9,0.1,2.1c0.5,0.6,0.8,1.3,0.8,2.1c0,3.1-1.9,3.7-3.7,3.9C9.7,12,10,12.5,10,13.2c0,1.1,0,1.9,0,2.2

+	c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z"/>

+</svg>

diff --git a/docs/src/sprite/icon-twitter.svg b/docs/src/sprite/icon-twitter.svg
new file mode 100755
index 00000000..b3f644b1
--- /dev/null
+++ b/docs/src/sprite/icon-twitter.svg
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">

+	 <title>Twitter</title>

+<path d="M16,3c-0.6,0.3-1.2,0.4-1.9,0.5c0.7-0.4,1.2-1,1.4-1.8c-0.6,0.4-1.3,0.6-2.1,0.8c-0.6-0.6-1.5-1-2.4-1

+	C9.3,1.5,7.8,3,7.8,4.8c0,0.3,0,0.5,0.1,0.7C5.2,5.4,2.7,4.1,1.1,2.1c-0.3,0.5-0.4,1-0.4,1.7c0,1.1,0.6,2.1,1.5,2.7

+	c-0.5,0-1-0.2-1.5-0.4c0,0,0,0,0,0c0,1.6,1.1,2.9,2.6,3.2C3,9.4,2.7,9.4,2.4,9.4c-0.2,0-0.4,0-0.6-0.1c0.4,1.3,1.6,2.3,3.1,2.3

+	c-1.1,0.9-2.5,1.4-4.1,1.4c-0.3,0-0.5,0-0.8,0c1.5,0.9,3.2,1.5,5,1.5c6,0,9.3-5,9.3-9.3c0-0.1,0-0.3,0-0.4C15,4.3,15.6,3.7,16,3z"/>

+</svg>

diff --git a/docs/src/sprite/icon-vimeo.svg b/docs/src/sprite/icon-vimeo.svg
new file mode 100755
index 00000000..83dd3dc0
--- /dev/null
+++ b/docs/src/sprite/icon-vimeo.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">

+<path d="M16,4.3c-0.1,1.6-1.2,3.7-3.3,6.4c-2.2,2.8-4,4.2-5.5,4.2c-0.9,0-1.7-0.9-2.4-2.6C4,9.9,3.4,5,2,5

+	C1.9,5,1.5,5.3,0.8,5.8L0,4.8c0.8-0.7,3.5-3.4,4.7-3.5C5.9,1.2,6.7,2,7,3.8c0.3,2,0.8,6.1,1.8,6.1c0.9,0,2.5-3.4,2.6-4

+	c0.1-0.9-0.3-1.9-2.3-1.1c0.8-2.6,2.3-3.8,4.5-3.8C15.3,1.1,16.1,2.2,16,4.3z"/>

+</svg>

diff --git a/docs/src/sprite/icon-youtube.svg b/docs/src/sprite/icon-youtube.svg
new file mode 100755
index 00000000..8b5d6897
--- /dev/null
+++ b/docs/src/sprite/icon-youtube.svg
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>

+<!-- Generator: Adobe Illustrator 19.1.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->

+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

+<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"

+	 width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve">

+<path d="M15.8,4.8c-0.2-1.3-0.8-2.2-2.2-2.4C11.4,2,8,2,8,2S4.6,2,2.4,2.4C1,2.6,0.3,3.5,0.2,4.8C0,6.1,0,8,0,8

+	s0,1.9,0.2,3.2c0.2,1.3,0.8,2.2,2.2,2.4C4.6,14,8,14,8,14s3.4,0,5.6-0.4c1.4-0.3,2-1.1,2.2-2.4C16,9.9,16,8,16,8S16,6.1,15.8,4.8z

+	 M6,11V5l5,3L6,11z"/>

+</svg>