aboutsummaryrefslogtreecommitdiffstats
path: root/demo/src/js
diff options
context:
space:
mode:
Diffstat (limited to 'demo/src/js')
-rw-r--r--demo/src/js/demo.js246
-rw-r--r--demo/src/js/lib/classlist.js237
-rw-r--r--demo/src/js/main.js203
3 files changed, 246 insertions, 440 deletions
diff --git a/demo/src/js/demo.js b/demo/src/js/demo.js
new file mode 100644
index 00000000..5808cc7e
--- /dev/null
+++ b/demo/src/js/demo.js
@@ -0,0 +1,246 @@
+// ==========================================================================
+// Plyr.io demo
+// This code is purely for the https://plyr.io website
+// Please see readme.md in the root or github.com/sampotts/plyr
+// ==========================================================================
+
+document.addEventListener('DOMContentLoaded', () => {
+ if (window.shr) {
+ window.shr.setup({
+ count: {
+ classname: 'button__count',
+ },
+ });
+ }
+
+ // Setup tab focus
+ const tabClassName = 'tab-focus';
+
+ // Remove class on blur
+ document.addEventListener('focusout', event => {
+ event.target.classList.remove(tabClassName);
+ });
+
+ // Add classname to tabbed elements
+ document.addEventListener('keydown', event => {
+ if (event.keyCode !== 9) {
+ return;
+ }
+
+ // Delay the adding of classname until the focus has changed
+ // This event fires before the focusin event
+ setTimeout(() => {
+ document.activeElement.classList.add(tabClassName);
+ }, 0);
+ });
+
+ // Setup the player
+ const player = new Plyr('#player', {
+ debug: true,
+ title: 'View From A Blue Moon',
+ iconUrl: '../dist/plyr.svg',
+ keyboard: {
+ global: true,
+ },
+ tooltips: {
+ controls: true,
+ },
+ captions: {
+ active: true,
+ },
+ keys: {
+ google: 'AIzaSyDrNwtN3nLH_8rjCmu5Wq3ZCm4MNAVdc0c',
+ },
+ ads: {
+ enabled: true,
+ publisherId: '918848828995742',
+ },
+ });
+
+ // Expose for tinkering in the console
+ window.player = player;
+
+ // Setup type toggle
+ const buttons = document.querySelectorAll('[data-source]');
+ const types = {
+ video: 'video',
+ audio: 'audio',
+ youtube: 'youtube',
+ vimeo: 'vimeo',
+ };
+ let currentType = window.location.hash.replace('#', '');
+ const historySupport = window.history && window.history.pushState;
+
+ // Toggle class on an element
+ function toggleClass(element, className, state) {
+ if (element) {
+ element.classList[state ? 'add' : 'remove'](className);
+ }
+ }
+
+ // Set a new source
+ function newSource(type, init) {
+ // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
+ if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {
+ return;
+ }
+
+ switch (type) {
+ case types.video:
+ player.source = {
+ type: 'video',
+ title: 'View From A Blue Moon',
+ sources: [{
+ src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4',
+ type: 'video/mp4',
+ }],
+ poster: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg',
+ tracks: [
+ {
+ kind: 'captions',
+ label: 'English',
+ srclang: 'en',
+ src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt',
+ default: true,
+ },
+ {
+ kind: 'captions',
+ label: 'French',
+ srclang: 'fr',
+ src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
+ },
+ ],
+ };
+
+ break;
+
+ case types.audio:
+ player.source = {
+ type: 'audio',
+ title: 'Kishi Bashi – “It All Began With A Burst”',
+ sources: [
+ {
+ src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
+ type: 'audio/mp3',
+ },
+ {
+ src: 'https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg',
+ type: 'audio/ogg',
+ },
+ ],
+ };
+
+ break;
+
+ case types.youtube:
+ player.source = {
+ type: 'video',
+ title: 'View From A Blue Moon',
+ sources: [{
+ src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
+ provider: 'youtube',
+ }],
+ };
+
+ break;
+
+ case types.vimeo:
+ player.source = {
+ type: 'video',
+ sources: [{
+ src: 'https://vimeo.com/76979871',
+ provider: 'vimeo',
+ }],
+ };
+
+ break;
+
+ default:
+ break;
+ }
+
+ // Set the current type for next time
+ currentType = type;
+
+ // Remove active classes
+ Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));
+
+ // Set active on parent
+ toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
+
+ // Show cite
+ Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {
+ cite.setAttribute('hidden', '');
+ });
+ document.querySelector(`.plyr__cite--${type}`).removeAttribute('hidden');
+ }
+
+ // Bind to each button
+ Array.from(buttons).forEach(button => {
+ button.addEventListener('click', () => {
+ const type = button.getAttribute('data-source');
+
+ newSource(type);
+
+ if (historySupport) {
+ window.history.pushState({ type }, '', `#${type}`);
+ }
+ });
+ });
+
+ // List for backwards/forwards
+ window.addEventListener('popstate', event => {
+ if (event.state && 'type' in event.state) {
+ newSource(event.state.type);
+ }
+ });
+
+ // On load
+ if (historySupport) {
+ const video = !currentType.length;
+
+ // If there's no current type set, assume video
+ if (video) {
+ currentType = types.video;
+ }
+
+ // Replace current history state
+ if (currentType in types) {
+ window.history.replaceState(
+ {
+ type: currentType,
+ },
+ '',
+ video ? '' : `#${currentType}`,
+ );
+ }
+
+ // If it's not video, load the source
+ if (currentType !== types.video) {
+ newSource(currentType, true);
+ }
+ }
+});
+
+// Google analytics
+// For demo site (https://plyr.io) only
+/* eslint-disable */
+if (window.location.host === 'plyr.io') {
+ (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', 'https://www.google-analytics.com/analytics.js', 'ga');
+ window.ga('create', 'UA-40881672-11', 'auto');
+ window.ga('send', 'pageview');
+}
+/* eslint-enable */
diff --git a/demo/src/js/lib/classlist.js b/demo/src/js/lib/classlist.js
deleted file mode 100644
index eac1e99e..00000000
--- a/demo/src/js/lib/classlist.js
+++ /dev/null
@@ -1,237 +0,0 @@
-/*
- * classList.js: Cross-browser full element.classList implementation.
- * 1.1.20150312
- *
- * By Eli Grey, http://eligrey.com
- * License: Dedicated to the public domain.
- * See https://github.com/eligrey/classList.js/blob/master/LICENSE.md
- */
-
-/*global self, document, DOMException */
-
-/*! @source http://purl.eligrey.com/github/classList.js/blob/master/classList.js */
-
-if ("document" in self) {
-
-// Full polyfill for browsers with no classList support
-if (!("classList" in document.createElement("_"))) {
-
-(function (view) {
-
-"use strict";
-
-if (!('Element' in view)) return;
-
-var
- classListProp = "classList"
- , protoProp = "prototype"
- , elemCtrProto = view.Element[protoProp]
- , objCtr = Object
- , strTrim = String[protoProp].trim || function () {
- return this.replace(/^\s+|\s+$/g, "");
- }
- , arrIndexOf = Array[protoProp].indexOf || function (item) {
- var
- i = 0
- , len = this.length
- ;
- for (; i < len; i++) {
- if (i in this && this[i] === item) {
- return i;
- }
- }
- return -1;
- }
- // Vendors: please allow content code to instantiate DOMExceptions
- , DOMEx = function (type, message) {
- this.name = type;
- this.code = DOMException[type];
- this.message = message;
- }
- , checkTokenAndGetIndex = function (classList, token) {
- if (token === "") {
- throw new DOMEx(
- "SYNTAX_ERR"
- , "An invalid or illegal string was specified"
- );
- }
- if (/\s/.test(token)) {
- throw new DOMEx(
- "INVALID_CHARACTER_ERR"
- , "String contains an invalid character"
- );
- }
- return arrIndexOf.call(classList, token);
- }
- , ClassList = function (elem) {
- var
- trimmedClasses = strTrim.call(elem.getAttribute("class") || "")
- , classes = trimmedClasses ? trimmedClasses.split(/\s+/) : []
- , i = 0
- , len = classes.length
- ;
- for (; i < len; i++) {
- this.push(classes[i]);
- }
- this._updateClassName = function () {
- elem.setAttribute("class", this.toString());
- };
- }
- , classListProto = ClassList[protoProp] = []
- , classListGetter = function () {
- return new ClassList(this);
- }
-;
-// Most DOMException implementations don't allow calling DOMException's toString()
-// on non-DOMExceptions. Error's toString() is sufficient here.
-DOMEx[protoProp] = Error[protoProp];
-classListProto.item = function (i) {
- return this[i] || null;
-};
-classListProto.contains = function (token) {
- token += "";
- return checkTokenAndGetIndex(this, token) !== -1;
-};
-classListProto.add = function () {
- var
- tokens = arguments
- , i = 0
- , l = tokens.length
- , token
- , updated = false
- ;
- do {
- token = tokens[i] + "";
- if (checkTokenAndGetIndex(this, token) === -1) {
- this.push(token);
- updated = true;
- }
- }
- while (++i < l);
-
- if (updated) {
- this._updateClassName();
- }
-};
-classListProto.remove = function () {
- var
- tokens = arguments
- , i = 0
- , l = tokens.length
- , token
- , updated = false
- , index
- ;
- do {
- token = tokens[i] + "";
- index = checkTokenAndGetIndex(this, token);
- while (index !== -1) {
- this.splice(index, 1);
- updated = true;
- index = checkTokenAndGetIndex(this, token);
- }
- }
- while (++i < l);
-
- if (updated) {
- this._updateClassName();
- }
-};
-classListProto.toggle = function (token, force) {
- token += "";
-
- var
- result = this.contains(token)
- , method = result ?
- force !== true && "remove"
- :
- force !== false && "add"
- ;
-
- if (method) {
- this[method](token);
- }
-
- if (force === true || force === false) {
- return force;
- } else {
- return !result;
- }
-};
-classListProto.toString = function () {
- return this.join(" ");
-};
-
-if (objCtr.defineProperty) {
- var classListPropDesc = {
- get: classListGetter
- , enumerable: true
- , configurable: true
- };
- try {
- objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
- } catch (ex) { // IE 8 doesn't support enumerable:true
- if (ex.number === -0x7FF5EC54) {
- classListPropDesc.enumerable = false;
- objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
- }
- }
-} else if (objCtr[protoProp].__defineGetter__) {
- elemCtrProto.__defineGetter__(classListProp, classListGetter);
-}
-
-}(self));
-
-} else {
-// There is full or partial native classList support, so just check if we need
-// to normalize the add/remove and toggle APIs.
-
-(function () {
- "use strict";
-
- var testElement = document.createElement("_");
-
- testElement.classList.add("c1", "c2");
-
- // Polyfill for IE 10/11 and Firefox <26, where classList.add and
- // classList.remove exist but support only one argument at a time.
- if (!testElement.classList.contains("c2")) {
- var createMethod = function(method) {
- var original = DOMTokenList.prototype[method];
-
- DOMTokenList.prototype[method] = function(token) {
- var i, len = arguments.length;
-
- for (i = 0; i < len; i++) {
- token = arguments[i];
- original.call(this, token);
- }
- };
- };
- createMethod('add');
- createMethod('remove');
- }
-
- testElement.classList.toggle("c3", false);
-
- // Polyfill for IE 10 and Firefox <24, where classList.toggle does not
- // support the second argument.
- if (testElement.classList.contains("c3")) {
- var _toggle = DOMTokenList.prototype.toggle;
-
- DOMTokenList.prototype.toggle = function(token, force) {
- if (1 in arguments && !this.contains(token) === !force) {
- return force;
- } else {
- return _toggle.call(this, token);
- }
- };
-
- }
-
- testElement = null;
-}());
-
-}
-
-} \ No newline at end of file
diff --git a/demo/src/js/main.js b/demo/src/js/main.js
deleted file mode 100644
index 7d732dcd..00000000
--- a/demo/src/js/main.js
+++ /dev/null
@@ -1,203 +0,0 @@
-// ==========================================================================
-// Plyr.io demo
-// This code is purely for the plyr.io website
-// Please see readme.md in the root or github.com/selz/plyr
-// ==========================================================================
-
-/*global plyr*/
-
-// General functions
-(function() {
- //document.body.addEventListener('ready', function(event) { console.log(event); });
-
- // Setup the player
- var instances = plyr.setup({
- debug: true,
- title: "Video demo",
- iconUrl: "../dist/plyr.svg",
- tooltips: {
- controls: true
- },
- captions: {
- defaultActive: true
- }
- });
- plyr.loadSprite("dist/demo.svg");
-
- // Plyr returns an array regardless
- var player = instances[0];
-
- // Setup type toggle
- var buttons = document.querySelectorAll("[data-source]"),
- types = {
- video: "video",
- audio: "audio",
- youtube: "youtube",
- vimeo: "vimeo"
- },
- currentType = window.location.hash.replace("#", ""),
- historySupport = window.history && window.history.pushState;
-
- // Bind to each button
- for (var i = buttons.length - 1; i >= 0; i--) {
- buttons[i].addEventListener("click", function() {
- var type = this.getAttribute("data-source");
-
- newSource(type);
-
- if (historySupport) {
- history.pushState({ type: type }, "", "#" + type);
- }
- });
- }
-
- // List for backwards/forwards
- window.addEventListener("popstate", function(event) {
- if (event.state && "type" in event.state) {
- newSource(event.state.type);
- }
- });
-
- // On load
- if (historySupport) {
- var video = !currentType.length;
-
- // If there's no current type set, assume video
- if (video) {
- currentType = types.video;
- }
-
- // Replace current history state
- if (currentType in types) {
- history.replaceState({ type: currentType }, "", video ? "" : "#" + currentType);
- }
-
- // If it's not video, load the source
- if (currentType !== types.video) {
- newSource(currentType, true);
- }
- }
-
- // Toggle class on an element
- function toggleClass(element, className, state) {
- if (element) {
- if (element.classList) {
- element.classList[state ? "add" : "remove"](className);
- } else {
- var name = (" " + element.className + " ").replace(/\s+/g, " ").replace(" " + className + " ", "");
- element.className = name + (state ? " " + className : "");
- }
- }
- }
-
- // Set a new source
- function newSource(type, init) {
- // Bail if new type isn't known, it's the current type, or current type is empty (video is default) and new type is video
- if (!(type in types) || (!init && type === currentType) || (!currentType.length && type === types.video)) {
- return;
- }
-
- switch (type) {
- case types.video:
- player.source({
- type: "video",
- title: "View From A Blue Moon",
- sources: [
- {
- src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.mp4",
- type: "video/mp4"
- },
- {
- src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.webm",
- type: "video/webm"
- }
- ],
- poster: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.jpg",
- tracks: [
- {
- kind: "captions",
- label: "English",
- srclang: "en",
- src: "https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.en.vtt",
- default: true
- }
- ]
- });
- break;
-
- case types.audio:
- player.source({
- type: "audio",
- title: "Kishi Bashi &ndash; &ldquo;It All Began With A Burst&rdquo;",
- sources: [
- {
- src: "https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3",
- type: "audio/mp3"
- },
- {
- src: "https://cdn.plyr.io/static/demo/Kishi_Bashi_-_It_All_Began_With_a_Burst.ogg",
- type: "audio/ogg"
- }
- ]
- });
- break;
-
- case types.youtube:
- player.source({
- type: "video",
- title: "View From A Blue Moon",
- sources: [
- {
- src: "bTqVqk7FSmY",
- type: "youtube"
- }
- ]
- });
- break;
-
- case types.vimeo:
- player.source({
- type: "video",
- title: "View From A Blue Moon",
- sources: [
- {
- src: "147865858",
- type: "vimeo"
- }
- ]
- });
- break;
- }
-
- // Set the current type for next time
- currentType = type;
-
- // Remove active classes
- for (var x = buttons.length - 1; x >= 0; x--) {
- toggleClass(buttons[x].parentElement, "active", false);
- }
-
- // Set active on parent
- toggleClass(document.querySelector('[data-source="' + type + '"]').parentElement, "active", true);
- }
-})();
-
-// Google analytics
-// For demo site (http://[www.]plyr.io) only
-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");
-}
generated by cgit v1.2.3 (git 2.25.1) at 2025-06-10 18:38:07 +0000