TogglePlay API method (Fixes #86), Volume border (Fixes #87), Chrome Subs (Fixes #90)

2 files changed, 190 insertions, 11 deletions

diff --git a/docs/src/js/docs.js b/docs/src/js/docs.js
index 46f20f26..072a9236 100644
--- a/docs/src/js/docs.js
+++ b/docs/src/js/docs.js
@@ -26,6 +26,116 @@ plyr.setup({
 	}
 });
 
+// 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;
+}
+
+// Add star
+function formatGitHubCount(count) {
+	return "★ " + 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;
+		}
+	});
+}
+
 
 // Google analytics 
 // For demo site (http://[www.]plyr.io) only
diff --git a/docs/src/less/docs.less b/docs/src/less/docs.less
index f68e0148..32d25b02 100644
--- a/docs/src/less/docs.less
+++ b/docs/src/less/docs.less
@@ -20,6 +20,7 @@
 // Elements
 @link-color:                @blue;
 @padding-base:              20px;
+@arrow-size:                8px;
 
 // Breakpoints
 @screen-md:                 768px;
@@ -102,6 +103,22 @@ section {
 }
 
 // Links & Buttons
+.actions {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    font-size: 0;
+
+    li {
+        display: inline-block;
+        margin-top: (@padding-base / 2);
+        .font-size();
+        white-space: nowrap;
+    }
+    li + li {
+        margin-left: @padding-base;
+    }
+}
 a {
     text-decoration: none;
     color: @link-color;
@@ -119,41 +136,93 @@ a {
         border: 0;
     }
 }
-.btn {
+.btn,
+.btn-count {
     display: inline-block;
-    padding: (@padding-base / 2) (@padding-base * 1.5);
-    background: @link-color;
-    border: 0;
-    color: #fff;
+    vertical-align: middle;
+    border-radius: 3px;
     .font-smoothing(on);
     font-weight: 600;
-    border-radius: 3px;
     user-select: none;
+}
+.btn {
+    padding: (@padding-base / 2) @padding-base;
+    background: @link-color;
+    border: 0;
+    color: #fff;
     
     &:hover,
     &:focus {
         color: #fff;
         background: darken(@link-color, 5%);
     }
+
+    &-twitter {
+        background: #8799A2;
+
+        &:hover,
+        &:focus {
+            background: darken(#8799A2, 5%);
+        }
+    }
+}
+.btn-count {
+    position: relative;
+    margin-left: 6px;
+    padding: ((@padding-base / 2) - 1px);
+    background: #fff;
+    border: 1px solid @gray-light;
+
+    &::before {
+        content: "";
+        position: absolute;
+        display: block;
+        width: @arrow-size;
+        height: @arrow-size;
+        left: 1px;
+        top: 50%;
+        margin-top: -(@arrow-size / 2);
+
+        background: inherit;
+        border: inherit;
+        border-width: 1px 0 0 1px;
+        transform: rotate(-45deg) translate(-50%, -50%);
+    }
 }
 
-// Players
+// Example players
+.example-audio .player,
+.example-video .player {
+    margin: 0 auto @padding-base;
+
+    &-controls {
+        border-radius: 0 0 4px 4px;
+    }
+}
 .example-audio .player {
     max-width: 520px;
+
+    &-controls {
+        border-radius: 4px;
+    }
+    &-progress {
+        border-radius: 4px 4px 0 0;
+        overflow: hidden;
+    }
 }
 .example-video .player {
     max-width: 1200px;
-}
-.example-audio .player,
-.example-video .player {
-    margin: 0 auto @padding-base;
 
+    video {
+        border-radius: 4px 4px 0 0;
+    }
     &-fullscreen,
     &.fullscreen-active {
         max-width: none;
     }
 }
 
+
 // Footer
 footer {
     margin-bottom: @padding-base;