diff options
Diffstat (limited to 'docs/src/js/docs.js')
| -rw-r--r-- | docs/src/js/docs.js | 232 |
1 files changed, 87 insertions, 145 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 "★ " + 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 |