Source API changes, Vimeo fixes, still WIP

This commit is contained in:
Sam Potts
2015-10-04 19:27:30 +11:00
parent 0674e13bab
commit daec1baebc
22 changed files with 539 additions and 368 deletions

View File

@ -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);
}
}
});
// Setup shr
shr.setup({
count: {
classname: 'btn-count'
}
});
// 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 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');
}
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 "&#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);
}
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');
}