Converted to 2 space indentation
This commit is contained in:
Sam Potts
@ -16,137 +16,134 @@ import sources from './sources';
|
||||
import toggleClass from './toggle-class';
|
||||
|
||||
(() => {
|
||||
const production = 'plyr.io';
|
||||
const production = 'plyr.io';
|
||||
|
||||
// Sentry for demo site (https://plyr.io) only
|
||||
if (window.location.host === production) {
|
||||
Sentry.init({
|
||||
dsn: 'https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555',
|
||||
whitelistUrls: [production].map(d => new RegExp(`https://(([a-z0-9])+(.))*${d}`)),
|
||||
});
|
||||
// Sentry for demo site (https://plyr.io) only
|
||||
if (window.location.host === production) {
|
||||
Sentry.init({
|
||||
dsn: 'https://d4ad9866ad834437a4754e23937071e4@sentry.io/305555',
|
||||
whitelistUrls: [production].map(d => new RegExp(`https://(([a-z0-9])+(.))*${d}`)),
|
||||
});
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const selector = '#player';
|
||||
|
||||
// Setup share buttons
|
||||
Shr.setup('.js-shr', {
|
||||
count: {
|
||||
className: 'button__count',
|
||||
},
|
||||
wrapper: {
|
||||
className: 'button--with-count',
|
||||
},
|
||||
});
|
||||
|
||||
// Setup the player
|
||||
const player = new Plyr(selector, {
|
||||
debug: true,
|
||||
title: 'View From A Blue Moon',
|
||||
iconUrl: 'dist/demo.svg',
|
||||
keyboard: {
|
||||
global: true,
|
||||
},
|
||||
tooltips: {
|
||||
controls: true,
|
||||
},
|
||||
captions: {
|
||||
active: true,
|
||||
},
|
||||
ads: {
|
||||
enabled: window.location.host.includes(production),
|
||||
publisherId: '918848828995742',
|
||||
},
|
||||
previewThumbnails: {
|
||||
enabled: true,
|
||||
src: ['https://cdn.plyr.io/static/demo/thumbs/100p.vtt', 'https://cdn.plyr.io/static/demo/thumbs/240p.vtt'],
|
||||
},
|
||||
vimeo: {
|
||||
// Prevent Vimeo blocking plyr.io demo site
|
||||
referrerPolicy: 'no-referrer',
|
||||
},
|
||||
});
|
||||
|
||||
// Expose for tinkering in the console
|
||||
window.player = player;
|
||||
|
||||
// Setup type toggle
|
||||
const buttons = document.querySelectorAll('[data-source]');
|
||||
const types = Object.keys(sources);
|
||||
const historySupport = Boolean(window.history && window.history.pushState);
|
||||
let currentType = window.location.hash.substring(1);
|
||||
const hasInitialType = currentType.length;
|
||||
|
||||
function render(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 => {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
cite.hidden = true;
|
||||
});
|
||||
|
||||
document.querySelector(`.plyr__cite--${type}`).hidden = false;
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', () => {
|
||||
const selector = '#player';
|
||||
// Set a new source
|
||||
function setSource(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 (!types.includes(type) || (!init && type === currentType) || (!currentType.length && type === 'video')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Setup share buttons
|
||||
Shr.setup('.js-shr', {
|
||||
count: {
|
||||
className: 'button__count',
|
||||
},
|
||||
wrapper: {
|
||||
className: 'button--with-count',
|
||||
},
|
||||
});
|
||||
// Set the new source
|
||||
player.source = sources[type];
|
||||
|
||||
// Setup the player
|
||||
const player = new Plyr(selector, {
|
||||
debug: true,
|
||||
title: 'View From A Blue Moon',
|
||||
iconUrl: 'dist/demo.svg',
|
||||
keyboard: {
|
||||
global: true,
|
||||
},
|
||||
tooltips: {
|
||||
controls: true,
|
||||
},
|
||||
captions: {
|
||||
active: true,
|
||||
},
|
||||
ads: {
|
||||
enabled: window.location.host.includes(production),
|
||||
publisherId: '918848828995742',
|
||||
},
|
||||
previewThumbnails: {
|
||||
enabled: true,
|
||||
src: [
|
||||
'https://cdn.plyr.io/static/demo/thumbs/100p.vtt',
|
||||
'https://cdn.plyr.io/static/demo/thumbs/240p.vtt',
|
||||
],
|
||||
},
|
||||
vimeo: {
|
||||
// Prevent Vimeo blocking plyr.io demo site
|
||||
referrerPolicy: 'no-referrer',
|
||||
},
|
||||
});
|
||||
// Set the current type for next time
|
||||
currentType = type;
|
||||
|
||||
// Expose for tinkering in the console
|
||||
window.player = player;
|
||||
render(type);
|
||||
}
|
||||
|
||||
// Setup type toggle
|
||||
const buttons = document.querySelectorAll('[data-source]');
|
||||
const types = Object.keys(sources);
|
||||
const historySupport = Boolean(window.history && window.history.pushState);
|
||||
let currentType = window.location.hash.substring(1);
|
||||
const hasInitialType = currentType.length;
|
||||
// Bind to each button
|
||||
Array.from(buttons).forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const type = button.getAttribute('data-source');
|
||||
|
||||
function render(type) {
|
||||
// Remove active classes
|
||||
Array.from(buttons).forEach(button => toggleClass(button.parentElement, 'active', false));
|
||||
setSource(type);
|
||||
|
||||
// Set active on parent
|
||||
toggleClass(document.querySelector(`[data-source="${type}"]`), 'active', true);
|
||||
|
||||
// Show cite
|
||||
Array.from(document.querySelectorAll('.plyr__cite')).forEach(cite => {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
cite.hidden = true;
|
||||
});
|
||||
|
||||
document.querySelector(`.plyr__cite--${type}`).hidden = false;
|
||||
if (historySupport) {
|
||||
window.history.pushState({ type }, '', `#${type}`);
|
||||
}
|
||||
|
||||
// Set a new source
|
||||
function setSource(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 (!types.includes(type) || (!init && type === currentType) || (!currentType.length && type === 'video')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Set the new source
|
||||
player.source = sources[type];
|
||||
|
||||
// Set the current type for next time
|
||||
currentType = type;
|
||||
|
||||
render(type);
|
||||
}
|
||||
|
||||
// Bind to each button
|
||||
Array.from(buttons).forEach(button => {
|
||||
button.addEventListener('click', () => {
|
||||
const type = button.getAttribute('data-source');
|
||||
|
||||
setSource(type);
|
||||
|
||||
if (historySupport) {
|
||||
window.history.pushState({ type }, '', `#${type}`);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
// List for backwards/forwards
|
||||
window.addEventListener('popstate', event => {
|
||||
if (event.state && Object.keys(event.state).includes('type')) {
|
||||
setSource(event.state.type);
|
||||
}
|
||||
});
|
||||
|
||||
// If there's no current type set, assume video
|
||||
if (!hasInitialType) {
|
||||
currentType = 'video';
|
||||
}
|
||||
|
||||
// Replace current history state
|
||||
if (historySupport && types.includes(currentType)) {
|
||||
window.history.replaceState({ type: currentType }, '', hasInitialType ? `#${currentType}` : '');
|
||||
}
|
||||
|
||||
// If it's not video, load the source
|
||||
if (currentType !== 'video') {
|
||||
setSource(currentType, true);
|
||||
}
|
||||
|
||||
render(currentType);
|
||||
});
|
||||
});
|
||||
|
||||
// List for backwards/forwards
|
||||
window.addEventListener('popstate', event => {
|
||||
if (event.state && Object.keys(event.state).includes('type')) {
|
||||
setSource(event.state.type);
|
||||
}
|
||||
});
|
||||
|
||||
// If there's no current type set, assume video
|
||||
if (!hasInitialType) {
|
||||
currentType = 'video';
|
||||
}
|
||||
|
||||
// Replace current history state
|
||||
if (historySupport && types.includes(currentType)) {
|
||||
window.history.replaceState({ type: currentType }, '', hasInitialType ? `#${currentType}` : '');
|
||||
}
|
||||
|
||||
// If it's not video, load the source
|
||||
if (currentType !== 'video') {
|
||||
setSource(currentType, true);
|
||||
}
|
||||
|
||||
render(currentType);
|
||||
});
|
||||
})();
|
||||
|
||||
@ -1,78 +1,78 @@
|
||||
const sources = {
|
||||
video: {
|
||||
type: 'video',
|
||||
title: 'View From A Blue Moon',
|
||||
sources: [
|
||||
{
|
||||
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4',
|
||||
type: 'video/mp4',
|
||||
size: 576,
|
||||
},
|
||||
{
|
||||
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
|
||||
type: 'video/mp4',
|
||||
size: 720,
|
||||
},
|
||||
{
|
||||
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
|
||||
type: 'video/mp4',
|
||||
size: 1080,
|
||||
},
|
||||
{
|
||||
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4',
|
||||
type: 'video/mp4',
|
||||
size: 1440,
|
||||
},
|
||||
],
|
||||
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',
|
||||
},
|
||||
],
|
||||
},
|
||||
audio: {
|
||||
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',
|
||||
},
|
||||
],
|
||||
},
|
||||
youtube: {
|
||||
type: 'video',
|
||||
sources: [
|
||||
{
|
||||
src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
|
||||
provider: 'youtube',
|
||||
},
|
||||
],
|
||||
},
|
||||
vimeo: {
|
||||
type: 'video',
|
||||
sources: [
|
||||
{
|
||||
src: 'https://vimeo.com/40648169',
|
||||
provider: 'vimeo',
|
||||
},
|
||||
],
|
||||
},
|
||||
video: {
|
||||
type: 'video',
|
||||
title: 'View From A Blue Moon',
|
||||
sources: [
|
||||
{
|
||||
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4',
|
||||
type: 'video/mp4',
|
||||
size: 576,
|
||||
},
|
||||
{
|
||||
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-720p.mp4',
|
||||
type: 'video/mp4',
|
||||
size: 720,
|
||||
},
|
||||
{
|
||||
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1080p.mp4',
|
||||
type: 'video/mp4',
|
||||
size: 1080,
|
||||
},
|
||||
{
|
||||
src: 'https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-1440p.mp4',
|
||||
type: 'video/mp4',
|
||||
size: 1440,
|
||||
},
|
||||
],
|
||||
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',
|
||||
},
|
||||
],
|
||||
},
|
||||
audio: {
|
||||
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',
|
||||
},
|
||||
],
|
||||
},
|
||||
youtube: {
|
||||
type: 'video',
|
||||
sources: [
|
||||
{
|
||||
src: 'https://youtube.com/watch?v=bTqVqk7FSmY',
|
||||
provider: 'youtube',
|
||||
},
|
||||
],
|
||||
},
|
||||
vimeo: {
|
||||
type: 'video',
|
||||
sources: [
|
||||
{
|
||||
src: 'https://vimeo.com/40648169',
|
||||
provider: 'vimeo',
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
|
||||
export default sources;
|
||||
|
||||
@ -4,28 +4,28 @@ const tabClassName = 'tab-focus';
|
||||
|
||||
// Remove class on blur
|
||||
document.addEventListener('focusout', event => {
|
||||
if (!event.target.classList || container.contains(event.target)) {
|
||||
return;
|
||||
}
|
||||
if (!event.target.classList || container.contains(event.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
event.target.classList.remove(tabClassName);
|
||||
event.target.classList.remove(tabClassName);
|
||||
});
|
||||
|
||||
// Add classname to tabbed elements
|
||||
document.addEventListener('keydown', event => {
|
||||
if (event.keyCode !== 9) {
|
||||
return;
|
||||
if (event.keyCode !== 9) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Delay the adding of classname until the focus has changed
|
||||
// This event fires before the focusin event
|
||||
setTimeout(() => {
|
||||
const focused = document.activeElement;
|
||||
|
||||
if (!focused || !focused.classList || container.contains(focused)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Delay the adding of classname until the focus has changed
|
||||
// This event fires before the focusin event
|
||||
setTimeout(() => {
|
||||
const focused = document.activeElement;
|
||||
|
||||
if (!focused || !focused.classList || container.contains(focused)) {
|
||||
return;
|
||||
}
|
||||
|
||||
focused.classList.add(tabClassName);
|
||||
}, 10);
|
||||
focused.classList.add(tabClassName);
|
||||
}, 10);
|
||||
});
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
// Toggle class on an element
|
||||
const toggleClass = (element, className = '', toggle = false) =>
|
||||
element && element.classList[toggle ? 'add' : 'remove'](className);
|
||||
element && element.classList[toggle ? 'add' : 'remove'](className);
|
||||
|
||||
export default toggleClass;
|
||||
|
||||
Reference in New Issue
Block a user