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

ES6-ified

Browse Source
This commit is contained in:
Sam Potts
2017-11-04 14:25:28 +11:00
parent 3d50936b47
commit 1cc2930dc0
38 changed files with 10144 additions and 11266 deletions
Download Patch File Download Diff File Expand all files Collapse all files

184
demo/src/js/main.js → demo/src/js/demo.js
View File

@ -4,9 +4,7 @@
// Please see readme.md in the root or github.com/sampotts/plyr
// ==========================================================================
/*global Plyr*/
(function() {
document.addEventListener('DOMContentLoaded', () => {
if (window.shr) {
window.shr.setup({
count: {
@ -15,12 +13,33 @@
});
}
/*document.body.addEventListener('ready', function(event) {
// 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
window.setTimeout(() => {
document.activeElement.classList.add(tabClassName);
}, 0);
});
/* document.body.addEventListener('ready', function(event) {
console.log(event);
});*/
}); */
// Setup the player
var player = new Plyr('#player', {
const player = new window.Plyr('#player', {
debug: true,
title: 'View From A Blue Moon',
iconUrl: '../dist/plyr.svg',
@ -28,70 +47,36 @@
controls: true,
},
captions: {
defaultActive: true,
active: true,
},
controls: ['play-large', 'play', 'progress', 'current-time', 'mute', 'volume', 'captions', 'settings', 'fullscreen', 'pip', 'airplay'],
controls: [
'play-large',
'play',
'progress',
'current-time',
'mute',
'volume',
'captions',
'settings',
'fullscreen',
'pip',
'airplay',
],
});
// Expose for testing
window.player = player;
// Setup type toggle
var buttons = document.querySelectorAll('[data-source]');
var types = {
const buttons = document.querySelectorAll('[data-source]');
const types = {
video: 'video',
audio: 'audio',
youtube: 'youtube',
vimeo: 'vimeo',
};
var currentType = window.location.hash.replace('#', '');
var historySupport = window.history && window.history.pushState;
// Bind to each button
[].forEach.call(buttons, function(button) {
button.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);
}
}
let currentType = window.location.hash.replace('#', '');
const historySupport = window.history && window.history.pushState;
// Toggle class on an element
function toggleClass(element, className, state) {
@ -109,7 +94,7 @@
switch (type) {
case types.video:
player.source({
player.src = {
type: 'video',
title: 'View From A Blue Moon',
sources: [
@ -134,11 +119,12 @@
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-HD.fr.vtt',
},
],
});
};
break;
case types.audio:
player.source({
player.src = {
type: 'audio',
title: 'Kishi Bashi – “It All Began With A Burst”',
sources: [
@ -151,11 +137,12 @@
type: 'audio/ogg',
},
],
});
};
break;
case types.youtube:
player.source({
player.src = {
type: 'video',
title: 'View From A Blue Moon',
sources: [
@ -164,11 +151,12 @@
type: 'youtube',
},
],
});
};
break;
case types.vimeo:
player.source({
player.src = {
type: 'video',
title: 'View From A Blue Moon',
sources: [
@ -177,7 +165,11 @@
type: 'vimeo',
},
],
});
};
break;
default:
break;
}
@ -185,23 +177,68 @@
currentType = type;
// Remove active classes
for (var x = buttons.length - 1; x >= 0; x--) {
toggleClass(buttons[x].parentElement, 'active', false);
}
Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));
// Set active on parent
toggleClass(document.querySelector('[data-source="' + type + '"]'), 'active', true);
toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
// Show cite
[].forEach.call(document.querySelectorAll('.plyr__cite'), function(cite) {
Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {
cite.setAttribute('hidden', '');
});
document.querySelector('.plyr__cite--' + type).removeAttribute('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;
@ -220,3 +257,4 @@ if (window.location.host === 'plyr.io') {
window.ga('create', 'UA-40881672-11', 'auto');
window.ga('send', 'pageview');
}
/* eslint-enable */

237
demo/src/js/lib/classlist.js
View File

@ -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;
}());
}
}

26
demo/src/js/lib/tab-focus.js
View File

@ -1,26 +0,0 @@
// ==========================================================================
// tab-focus.js
// Detect keyboard tabbing
// ==========================================================================
(function() {
var className = 'tab-focus';
// Remove class on blur
document.addEventListener('focusout', function(event) {
event.target.classList.remove(className);
});
// Add classname to tabbed elements
document.addEventListener('keydown', function(event) {
if (event.keyCode !== 9) {
return;
}
// Delay the adding of classname until the focus has changed
// This event fires before the focusin event
window.setTimeout(function() {
document.activeElement.classList.add(className);
}, 0);
});
})();

3
demo/src/less/components/icons.less
View File

@ -7,6 +7,7 @@
fill: currentColor;
width: @icon-size;
height: @icon-size;
vertical-align: -0.15em;
}
// Within elements
@ -18,5 +19,5 @@ label svg {
a .icon,
.btn .icon {
margin-right: (@spacing-base / 2);
margin-right: (@spacing-base / 4);
}

15
demo/src/less/layout/core.less
View File

@ -2,12 +2,21 @@
// Core
// ==========================================================================
html {
background: @page-background;
background-attachment: fixed;
*,
*::after,
*::before {
box-sizing: border-box;
}
html,
body {
display: flex;
width: 100%;
}
html {
background: @page-background;
background-attachment: fixed;
height: 100%;
}