ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Sam Potts
2015-06-07 23:00:26 +10:00
parent df84ce6e90
commit 4c17f98520
14 changed files with 255 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

110
docs/src/js/docs.js
View File

@ -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

95
docs/src/less/docs.less
View File

@ -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);
vertical-align: middle;
border-radius: 3px;
.font-smoothing(on);
font-weight: 600;
user-select: none;
}
.btn {
padding: (@padding-base / 2) @padding-base;
background: @link-color;
border: 0;
color: #fff;
.font-smoothing(on);
font-weight: 600;
border-radius: 3px;
user-select: none;
&: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-audio .player {
max-width: 520px;
}
.example-video .player {
max-width: 1200px;
}
// 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;
video {
border-radius: 4px 4px 0 0;
}
&-fullscreen,
&.fullscreen-active {
max-width: none;
}
}
// Footer
footer {
margin-bottom: @padding-base;