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

Linting changes

Browse Source
This commit is contained in:
Sam Potts
2019-06-01 18:45:07 +10:00
parent 5ddd9e02de
commit c9055f391b
42 changed files with 5246 additions and 4376 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
src/js/captions.js
View File

@ -85,7 +85,6 @@ const captions = {
const browserLanguages = navigator.languages || [navigator.language || navigator.userLanguage || 'en'];
const languages = dedupe(browserLanguages.map(language => language.split('-')[0]));
let language = (this.storage.get('language') || this.config.captions.language || 'auto').toLowerCase();
// Use first browser language when language is 'auto'
@ -134,7 +133,7 @@ const captions = {
});
// Turn off native caption rendering to avoid double captions
track.mode = 'hidden';
Object.assign(track, { mode: 'hidden' });
// Add event listener for cue changes
on.call(this, track, 'cuechange', () => captions.updateCues.call(this));
@ -166,7 +165,6 @@ const captions = {
const { toggled } = this.captions; // Current state
const activeClass = this.config.classNames.captions.active;
// Get the next state
// If the method is called without parameter, toggle based on current value
const active = is.nullOrUndefined(input) ? !toggled : input;
@ -304,7 +302,7 @@ const captions = {
let track;
languages.every(language => {
track = sorted.find(track => track.language === language);
track = sorted.find(t => t.language === language);
return !track; // Break iteration if there is a match
});

52
src/js/controls.js vendored
View File

@ -4,13 +4,27 @@
// ==========================================================================
import RangeTouch from 'rangetouch';
import captions from './captions';
import html5 from './html5';
import support from './support';
import { repaint, transitionEndEvent } from './utils/animation';
import { dedupe } from './utils/arrays';
import browser from './utils/browser';
import { createElement, emptyElement, getAttributesFromSelector, getElement, getElements, hasClass, matches, removeElement, setAttributes, setFocus, toggleClass, toggleHidden } from './utils/elements';
import {
createElement,
emptyElement,
getAttributesFromSelector,
getElement,
getElements,
hasClass,
matches,
removeElement,
setAttributes,
setFocus,
toggleClass,
toggleHidden,
} from './utils/elements';
import { off, on } from './utils/events';
import i18n from './utils/i18n';
import is from './utils/is';
@ -92,7 +106,6 @@ const controls = {
const namespace = 'http://www.w3.org/2000/svg';
const iconUrl = controls.getIconUrl.call(this);
const iconPath = `${!iconUrl.cors ? iconUrl.url : ''}#${this.config.iconPrefix}`;
// Create <svg>
const icon = document.createElementNS(namespace, 'svg');
setAttributes(
@ -480,15 +493,15 @@ const controls = {
get() {
return menuItem.getAttribute('aria-checked') === 'true';
},
set(checked) {
set(check) {
// Ensure exclusivity
if (checked) {
if (check) {
Array.from(menuItem.parentNode.children)
.filter(node => matches(node, '[role="menuitemradio"]'))
.forEach(node => node.setAttribute('aria-checked', 'false'));
}
menuItem.setAttribute('aria-checked', checked ? 'true' : 'false');
menuItem.setAttribute('aria-checked', check ? 'true' : 'false');
},
});
@ -596,17 +609,17 @@ const controls = {
let value = 0;
const setProgress = (target, input) => {
const value = is.number(input) ? input : 0;
const val = is.number(input) ? input : 0;
const progress = is.element(target) ? target : this.elements.display.buffer;
// Update value and label
if (is.element(progress)) {
progress.value = value;
progress.value = val;
// Update text label inside
const label = progress.getElementsByTagName('span')[0];
if (is.element(label)) {
label.childNodes[0].nodeValue = value;
label.childNodes[0].nodeValue = val;
}
}
};
@ -688,14 +701,8 @@ const controls = {
return;
}
// Calculate percentage
let percent = 0;
const clientRect = this.elements.progress.getBoundingClientRect();
const visible = `${this.config.classNames.tooltip}--visible`;
const toggle = toggle => {
toggleClass(this.elements.display.seekTooltip, visible, toggle);
};
const toggle = show => toggleClass(this.elements.display.seekTooltip, visible, show);
// Hide on touch
if (this.touch) {
@ -704,6 +711,9 @@ const controls = {
}
// Determine percentage, if already visible
let percent = 0;
const clientRect = this.elements.progress.getBoundingClientRect();
if (is.event(event)) {
percent = (100 / clientRect.width) * (event.pageX - clientRect.left);
} else if (hasClass(this.elements.display.seekTooltip, visible)) {
@ -1100,7 +1110,7 @@ const controls = {
let target = pane;
if (!is.element(target)) {
target = Object.values(this.elements.settings.panels).find(pane => !pane.hidden);
target = Object.values(this.elements.settings.panels).find(p => !p.hidden);
}
const firstItem = target.querySelector('[role^="menuitem"]');
@ -1398,7 +1408,7 @@ const controls = {
// Settings button / menu
if (control === 'settings' && !is.empty(this.config.settings)) {
const control = createElement(
const wrapper = createElement(
'div',
extend({}, defaultAttributes, {
class: `${defaultAttributes.class} plyr__menu`.trim(),
@ -1406,7 +1416,7 @@ const controls = {
}),
);
control.appendChild(
wrapper.appendChild(
createButton.call(this, 'settings', {
'aria-haspopup': true,
'aria-controls': `plyr-settings-${data.id}`,
@ -1546,11 +1556,11 @@ const controls = {
});
popup.appendChild(inner);
control.appendChild(popup);
container.appendChild(control);
wrapper.appendChild(popup);
container.appendChild(wrapper);
this.elements.settings.popup = popup;
this.elements.settings.menu = control;
this.elements.settings.menu = wrapper;
}
// Picture in picture button

5
src/js/html5.js
View File

@ -52,7 +52,7 @@ const html5 = {
get() {
// Get sources
const sources = html5.getSources.call(player);
const source = sources.find(source => source.getAttribute('src') === player.source);
const source = sources.find(s => s.getAttribute('src') === player.source);
// Return size, if match is found
return source && Number(source.getAttribute('size'));
@ -60,9 +60,8 @@ const html5 = {
set(input) {
// Get sources
const sources = html5.getSources.call(player);
// Get first match for requested size
const source = sources.find(source => Number(source.getAttribute('size')) === input);
const source = sources.find(s => Number(s.getAttribute('size')) === input);
// No matching source found
if (!source) {

19
src/js/listeners.js
View File

@ -147,7 +147,7 @@ class Listeners {
player.loop = !player.loop;
break;
/* case 73:
/* case 73:
this.setLoop('start');
break;
@ -275,17 +275,16 @@ class Listeners {
elements.container,
'mousemove mouseleave touchstart touchmove enterfullscreen exitfullscreen',
event => {
const { controls } = elements;
const { controls: controlsElement } = elements;
// Remove button states for fullscreen
if (controls && event.type === 'enterfullscreen') {
controls.pressed = false;
controls.hover = false;
if (controlsElement && event.type === 'enterfullscreen') {
controlsElement.pressed = false;
controlsElement.hover = false;
}
// Show, then hide after a timeout unless another control event occurs
const show = ['touchstart', 'touchmove', 'mousemove'].includes(event.type);
let delay = 0;
if (show) {
@ -351,7 +350,6 @@ class Listeners {
}
const isEnter = event.type === 'enterfullscreen';
// Set the player size when entering fullscreen to viewport size
const { padding, ratio } = setPlayerSize(isEnter);
@ -542,7 +540,6 @@ class Listeners {
controls() {
const { player } = this;
const { elements } = player;
// IE doesn't support input event, so we fallback to change
const inputEvent = browser.isIE ? 'change' : 'input';
@ -678,7 +675,6 @@ class Listeners {
// Was playing before?
const play = seek.hasAttribute(attribute);
// Done seeking
const done = ['mouseup', 'touchend', 'keyup'].includes(event.type);
@ -706,7 +702,6 @@ class Listeners {
inputEvent,
event => {
const seek = event.currentTarget;
// If it exists, use seek-value instead of "value" for consistency with tooltip time (#954)
let seekTo = seek.getAttribute('seek-value');
@ -806,7 +801,7 @@ class Listeners {
// Show controls when they receive focus (e.g., when using keyboard tab key)
this.bind(elements.controls, 'focusin', () => {
const { config, elements, timers } = player;
const { config, timers } = player;
// Skip transition to prevent focus from scrolling the parent element
toggleClass(elements.controls, config.classNames.noTransition, true);
@ -837,10 +832,8 @@ class Listeners {
// Detect "natural" scroll - suppored on OS X Safari only
// Other browsers on OS X will be inverted until support improves
const inverted = event.webkitDirectionInvertedFromDevice;
// Get delta from event. Invert if `inverted` is true
const [x, y] = [event.deltaX, -event.deltaY].map(value => (inverted ? -value : value));
// Using the biggest delta, normalize to 1 or -1 (or 0 if no delta)
const direction = Math.sign(Math.abs(x) > Math.abs(y) ? x : y);

6
src/js/plugins/ads.js
View File

@ -267,7 +267,7 @@ class Ads {
// Advertisement regular events
Object.keys(google.ima.AdEvent.Type).forEach(type => {
this.manager.addEventListener(google.ima.AdEvent.Type[type], event => this.onAdEvent(event));
this.manager.addEventListener(google.ima.AdEvent.Type[type], e => this.onAdEvent(e));
});
// Resolve our adsManager
@ -303,7 +303,6 @@ class Ads {
*/
onAdEvent(event) {
const { container } = this.player.elements;
// Retrieve the ad from the event. Some events (e.g. ALL_ADS_COMPLETED)
// don't have ad object associated
const ad = event.getAd();
@ -311,8 +310,7 @@ class Ads {
// Proxy event
const dispatchEvent = type => {
const event = `ads${type.replace(/_/g, '').toLowerCase()}`;
triggerEvent.call(this.player, this.player.media, event);
triggerEvent.call(this.player, this.player.media, `ads${type.replace(/_/g, '').toLowerCase()}`);
};
// Bubble the event

11
src/js/plugins/previewThumbnails.js
View File

@ -2,6 +2,7 @@ import { createElement } from '../utils/elements';
import { once } from '../utils/events';
import fetch from '../utils/fetch';
import is from '../utils/is';
import { extend } from '../utils/objects';
import { formatTime } from '../utils/time';
// Arg: vttDataString example: "WEBVTT\n\n1\n00:00:05.000 --> 00:00:10.000\n1080p-00001.jpg"
@ -121,7 +122,6 @@ class PreviewThumbnails {
// If string, convert into single-element list
const urls = is.string(src) ? [src] : src;
// Loop through each src URL. Download and process the VTT file, storing the resulting data in this.thumbnails
const promises = urls.map(u => this.getThumbnail(u));
@ -426,7 +426,7 @@ class PreviewThumbnails {
if (image.dataset.index !== currentImage.dataset.index && !image.dataset.deleting) {
// Wait 200ms, as the new image can take some time to show on certain browsers (even though it was downloaded before showing). This will prevent flicker, and show some generosity towards slower clients
// First set attribute 'deleting' to prevent multi-handling of this on repeat firing of this function
image.dataset.deleting = true;
extend(image, { dataset: { deleting: true } });
// This has to be set before the timeout - to prevent issues switching between hover and scrub
const { currentImageContainer } = this;
@ -467,7 +467,6 @@ class PreviewThumbnails {
const { urlPrefix } = this.thumbnails[0];
const thumbURL = urlPrefix + newThumbFilename;
const previewImage = new Image();
previewImage.src = thumbURL;
previewImage.onload = () => {
@ -601,11 +600,9 @@ class PreviewThumbnails {
const seekbarRect = this.player.elements.progress.getBoundingClientRect();
const plyrRect = this.player.elements.container.getBoundingClientRect();
const { container } = this.elements.thumb;
// Find the lowest and highest desired left-position, so we don't slide out the side of the video container
const minVal = plyrRect.left - seekbarRect.left + 10;
const maxVal = plyrRect.right - seekbarRect.left - container.clientWidth - 10;
// Set preview container position to: mousepos, minus seekbar.left, minus half of previewContainer.clientWidth
let previewPos = this.mousePosX - seekbarRect.left - container.clientWidth / 2;
@ -636,9 +633,13 @@ class PreviewThumbnails {
// Find difference between height and preview container height
const multiplier = this.thumbContainerHeight / frame.h;
// eslint-disable-next-line no-param-reassign
previewImage.style.height = `${Math.floor(previewImage.naturalHeight * multiplier)}px`;
// eslint-disable-next-line no-param-reassign
previewImage.style.width = `${Math.floor(previewImage.naturalWidth * multiplier)}px`;
// eslint-disable-next-line no-param-reassign
previewImage.style.left = `-${frame.x * multiplier}px`;
// eslint-disable-next-line no-param-reassign
previewImage.style.top = `-${frame.y * multiplier}px`;
}
}

2
src/js/plugins/vimeo.js
View File

@ -91,7 +91,6 @@ const vimeo = {
}
const id = parseId(source);
// Build an iframe
const iframe = createElement('iframe');
const src = format(player.config.urls.vimeo.iframe, id, params);
@ -102,7 +101,6 @@ const vimeo = {
// Get poster, if already set
const { poster } = player;
// Inject the package
const wrapper = createElement('div', { poster, class: player.config.classNames.embedContainer });
wrapper.appendChild(iframe);

9
src/js/plugins/youtube.js
View File

@ -107,7 +107,6 @@ const youtube = {
// API ready
ready() {
const player = this;
// Ignore already setup (race condition)
const currentId = player.media.getAttribute('id');
if (!is.empty(currentId) && currentId.startsWith('youtube-')) {
@ -125,25 +124,23 @@ const youtube = {
// Replace the <iframe> with a <div> due to YouTube API issues
const videoId = parseId(source);
const id = generateId(player.provider);
// Get poster, if already set
const { poster } = player;
// Replace media element
const container = createElement('div', { id, poster });
player.media = replaceElement(container, player.media);
// Id to poster wrapper
const posterSrc = format => `https://i.ytimg.com/vi/${videoId}/${format}default.jpg`;
const posterSrc = s => `https://i.ytimg.com/vi/${videoId}/${s}default.jpg`;
// Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide)
loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded
.catch(() => loadImage(posterSrc('sd'), 121)) // 480p padded 4:3
.catch(() => loadImage(posterSrc('hq'))) // 360p padded 4:3. Always exists
.then(image => ui.setPoster.call(player, image.src))
.then(posterSrc => {
.then(src => {
// If the image is padded, use background-size "cover" instead (like youtube does too with their posters)
if (!posterSrc.includes('maxres')) {
if (!src.includes('maxres')) {
player.elements.poster.style.backgroundSize = 'cover';
}
})

16
src/js/plyr.js
View File

@ -151,7 +151,6 @@ class Plyr {
// Set media type based on tag or data attribute
// Supported: video, audio, vimeo, youtube
const type = this.media.tagName.toLowerCase();
// Embed properties
let iframe = null;
let url = null;
@ -324,27 +323,27 @@ class Plyr {
* Types and provider helpers
*/
get isHTML5() {
return Boolean(this.provider === providers.html5);
return this.provider === providers.html5;
}
get isEmbed() {
return Boolean(this.isYouTube || this.isVimeo);
return this.isYouTube || this.isVimeo;
}
get isYouTube() {
return Boolean(this.provider === providers.youtube);
return this.provider === providers.youtube;
}
get isVimeo() {
return Boolean(this.provider === providers.vimeo);
return this.provider === providers.vimeo;
}
get isVideo() {
return Boolean(this.type === types.video);
return this.type === types.video;
}
get isAudio() {
return Boolean(this.type === types.audio);
return this.type === types.audio;
}
/**
@ -514,7 +513,6 @@ class Plyr {
get duration() {
// Faux duration set via config
const fauxDuration = parseFloat(this.config.duration);
// Media duration can be NaN or Infinity before the media has loaded
const realDuration = (this.media || {}).duration;
const duration = !is.number(realDuration) || realDuration === Infinity ? 0 : realDuration;
@ -1045,10 +1043,8 @@ class Plyr {
if (this.supported.ui && !this.isAudio) {
// Get state before change
const isHidden = hasClass(this.elements.container, this.config.classNames.hideControls);
// Negate the argument if not undefined since adding the class to hides the controls
const force = typeof toggle === 'undefined' ? undefined : !toggle;
// Apply and get updated state
const hiding = toggleClass(this.elements.container, this.config.classNames.hideControls, force);

1
src/js/plyr.polyfilled.js
View File

@ -7,6 +7,7 @@
import 'custom-event-polyfill';
import 'url-polyfill';
import Plyr from './plyr';
export default Plyr;

15
src/js/ui.js
View File

@ -213,7 +213,7 @@ const ui = {
// Set state
Array.from(this.elements.buttons.play || []).forEach(target => {
target.pressed = this.playing;
Object.assign(target, { pressed: this.playing });
});
// Only update controls on non timeupdate events
@ -247,15 +247,22 @@ const ui = {
// Toggle controls based on state and `force` argument
toggleControls(force) {
const { controls } = this.elements;
const { controls: controlsElement } = this.elements;
if (controls && this.config.hideControls) {
if (controlsElement && this.config.hideControls) {
// Don't hide controls if a touch-device user recently seeked. (Must be limited to touch devices, or it occasionally prevents desktop controls from hiding.)
const recentTouchSeek = this.touch && this.lastSeekTime + 2000 > Date.now();
// Show controls if force, loading, paused, button interaction, or recent seek, otherwise hide
this.toggleControls(
Boolean(force || this.loading || this.paused || controls.pressed || controls.hover || recentTouchSeek),
Boolean(
force ||
this.loading ||
this.paused ||
controlsElement.pressed ||
controlsElement.hover ||
recentTouchSeek,
),
);
}
},

7
src/js/utils/elements.js
View File

@ -17,7 +17,6 @@ export function wrap(elements, wrapper) {
.reverse()
.forEach((element, index) => {
const child = index > 0 ? wrapper.cloneNode(true) : wrapper;
// Cache the current parent and sibling.
const parent = element.parentNode;
const sibling = element.nextSibling;
@ -145,12 +144,10 @@ export function getAttributesFromSelector(sel, existingAttributes) {
const selector = s.trim();
const className = selector.replace('.', '');
const stripped = selector.replace(/[[\]]/g, '');
// Get the parts and value
const parts = stripped.split('=');
const [key] = parts;
const value = parts.length > 1 ? parts[1].replace(/["']/g, '') : '';
// Get the first character
const start = selector.charAt(0);
@ -234,14 +231,14 @@ export function matches(element, selector) {
return Array.from(document.querySelectorAll(selector)).includes(this);
}
const matches =
const method =
prototype.matches ||
prototype.webkitMatchesSelector ||
prototype.mozMatchesSelector ||
prototype.msMatchesSelector ||
match;
return matches.call(element, selector);
return method.call(element, selector);
}
// Find all elements

1
src/js/utils/events.js
View File

@ -35,7 +35,6 @@ export function toggleListener(element, event, callback, toggle = false, passive
// Allow multiple events
const events = event.split(' ');
// Build options
// Default to just the capture boolean for browsers with no passive listener support
let options = capture;

4
src/js/utils/i18n.js
View File

@ -36,8 +36,8 @@ const i18n = {
'{title}': config.title,
};
Object.entries(replace).forEach(([key, value]) => {
string = replaceAll(string, key, value);
Object.entries(replace).forEach(([k, v]) => {
string = replaceAll(string, k, v);
});
return string;

3
src/js/utils/loadSprite.js
View File

@ -15,10 +15,10 @@ export default function loadSprite(url, id) {
const prefix = 'cache';
const hasId = is.string(id);
let isCached = false;
const exists = () => document.getElementById(id) !== null;
const update = (container, data) => {
// eslint-disable-next-line no-param-reassign
container.innerHTML = data;
// Check again incase of race condition
@ -33,7 +33,6 @@ export default function loadSprite(url, id) {
// Only load once if ID set
if (!hasId || !exists()) {
const useStorage = Storage.supported;
// Create container
const container = document.createElement('div');
container.setAttribute('hidden', '');

1
src/js/utils/style.js
View File

@ -64,7 +64,6 @@ export function setAspectRatio(input) {
}
const ratio = getAspectRatio.call(this, input);
const [w, h] = is.array(ratio) ? ratio : [0, 0];
const padding = (100 / w) * h;

1
src/js/utils/time.js
View File

@ -18,7 +18,6 @@ export function formatTime(time = 0, displayHours = false, inverted = false) {
// Format time component to add leading zero
const format = value => `0${value}`.slice(-2);
// Breakdown to hours, mins, secs
let hours = getHours(time);
const mins = getMinutes(time);