aboutsummaryrefslogtreecommitdiffstats
path: root/demo/src/js
diff options
context:
space:
mode:
Diffstat (limited to 'demo/src/js')
-rw-r--r--demo/src/js/lib/classlist.js237
-rw-r--r--demo/src/js/main.js185
2 files changed, 422 insertions, 0 deletions
diff --git a/demo/src/js/lib/classlist.js b/demo/src/js/lib/classlist.js
new file mode 100644
index 00000000..eac1e99e
--- /dev/null
+++ b/demo/src/js/lib/classlist.js
@@ -0,0 +1,237 @@
+/*
+ * 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
new file mode 100644
index 00000000..bdd7febe
--- /dev/null
+++ b/demo/src/js/main.js
@@ -0,0 +1,185 @@
+// ==========================================================================
+// 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].plyr;
+
+ // 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.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.mp4',
+ type: 'video/mp4'
+ },
+ {
+ src: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.webm',
+ type: 'video/webm'
+ }],
+ poster: 'https://cdn.selz.com/plyr/1.5/View_From_A_Blue_Moon_Trailer-HD.jpg',
+ tracks: [{
+ kind: 'captions',
+ label: 'English',
+ srclang:'en',
+ src: 'https://cdn.selz.com/plyr/1.5/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.selz.com/plyr/1.5/Kishi_Bashi_-_It_All_Began_With_a_Burst.mp3',
+ type: 'audio/mp3'
+ },
+ {
+ src: 'https://cdn.selz.com/plyr/1.5/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: '143418951',
+ 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-08 19:32:09 +0000