diff options
Diffstat (limited to 'src/js')
36 files changed, 3238 insertions, 2847 deletions
diff --git a/src/js/captions.js b/src/js/captions.js index df717351..ae4642aa 100644 --- a/src/js/captions.js +++ b/src/js/captions.js @@ -4,9 +4,23 @@ // ========================================================================== import controls from './controls'; -import i18n from './i18n'; import support from './support'; -import utils from './utils'; +import { dedupe } from './utils/arrays'; +import browser from './utils/browser'; +import { + createElement, + emptyElement, + getAttributesFromSelector, + insertAfter, + removeElement, + toggleClass, +} from './utils/elements'; +import { on, triggerEvent } from './utils/events'; +import fetch from './utils/fetch'; +import i18n from './utils/i18n'; +import is from './utils/is'; +import { getHTML } from './utils/strings'; +import { parseUrl } from './utils/urls'; const captions = { // Setup captions @@ -16,32 +30,14 @@ const captions = { return; } - // Set default language if not set - const stored = this.storage.get('language'); - - if (!utils.is.empty(stored)) { - this.captions.language = stored; - } - - if (utils.is.empty(this.captions.language)) { - this.captions.language = this.config.captions.language.toLowerCase(); - } - - // Set captions enabled state if not set - if (!utils.is.boolean(this.captions.active)) { - const active = this.storage.get('captions'); - - if (utils.is.boolean(active)) { - this.captions.active = active; - } else { - this.captions.active = this.config.captions.active; - } - } - // Only Vimeo and HTML5 video supported at this point if (!this.isVideo || this.isYouTube || (this.isHTML5 && !support.textTracks)) { // Clear menu and hide - if (utils.is.array(this.config.controls) && this.config.controls.includes('settings') && this.config.settings.includes('captions')) { + if ( + is.array(this.config.controls) && + this.config.controls.includes('settings') && + this.config.settings.includes('captions') + ) { controls.setCaptionsMenu.call(this); } @@ -49,26 +45,12 @@ const captions = { } // Inject the container - if (!utils.is.element(this.elements.captions)) { - this.elements.captions = utils.createElement('div', utils.getAttributesFromSelector(this.config.selectors.captions)); + if (!is.element(this.elements.captions)) { + this.elements.captions = createElement('div', getAttributesFromSelector(this.config.selectors.captions)); - utils.insertAfter(this.elements.captions, this.elements.wrapper); + insertAfter(this.elements.captions, this.elements.wrapper); } - // Set the class hook - utils.toggleClass(this.elements.container, this.config.classNames.captions.enabled, !utils.is.empty(captions.getTracks.call(this))); - - // Get tracks - const tracks = captions.getTracks.call(this); - - // If no caption file exists, hide container for caption text - if (utils.is.empty(tracks)) { - return; - } - - // Get browser info - const browser = utils.getBrowser(); - // Fix IE captions if CORS is used // Fetch captions and inject as blobs instead (data URIs not supported!) if (browser.isIE && window.URL) { @@ -76,116 +58,275 @@ const captions = { Array.from(elements).forEach(track => { const src = track.getAttribute('src'); - const href = utils.parseUrl(src); - - if (href.hostname !== window.location.href.hostname && [ - 'http:', - 'https:', - ].includes(href.protocol)) { - utils - .fetch(src, 'blob') + const url = parseUrl(src); + + if ( + url !== null && + url.hostname !== window.location.href.hostname && + ['http:', 'https:'].includes(url.protocol) + ) { + fetch(src, 'blob') .then(blob => { track.setAttribute('src', window.URL.createObjectURL(blob)); }) .catch(() => { - utils.removeElement(track); + removeElement(track); }); } }); } - // Set language - captions.setLanguage.call(this); + // Get and set initial data + // The "preferred" options are not realized unless / until the wanted language has a match + // * languages: Array of user's browser languages. + // * language: The language preferred by user settings or config + // * active: The state preferred by user settings or config + // * toggled: The real captions state - // Enable UI - captions.show.call(this); + const browserLanguages = navigator.languages || [navigator.language || navigator.userLanguage || 'en']; + const languages = dedupe(browserLanguages.map(language => language.split('-')[0])); - // Set available languages in list - if (utils.is.array(this.config.controls) && this.config.controls.includes('settings') && this.config.settings.includes('captions')) { - controls.setCaptionsMenu.call(this); + let language = (this.storage.get('language') || this.config.captions.language || 'auto').toLowerCase(); + + // Use first browser language when language is 'auto' + if (language === 'auto') { + [language] = languages; + } + + let active = this.storage.get('captions'); + if (!is.boolean(active)) { + ({ active } = this.config.captions); + } + + Object.assign(this.captions, { + toggled: false, + active, + language, + languages, + }); + + // Watch changes to textTracks and update captions menu + if (this.isHTML5) { + const trackEvents = this.config.captions.update ? 'addtrack removetrack' : 'removetrack'; + on.call(this, this.media.textTracks, trackEvents, captions.update.bind(this)); } + + // Update available languages in list next tick (the event must not be triggered before the listeners) + setTimeout(captions.update.bind(this), 0); }, - // Set the captions language - setLanguage() { - // Setup HTML5 track rendering + // Update available language options in settings based on tracks + update() { + const tracks = captions.getTracks.call(this, true); + // Get the wanted language + const { active, language, meta, currentTrackNode } = this.captions; + const languageExists = Boolean(tracks.find(track => track.language === language)); + + // Handle tracks (add event listener and "pseudo"-default) if (this.isHTML5 && this.isVideo) { - captions.getTracks.call(this).forEach(track => { - // Show track - utils.on(track, 'cuechange', event => captions.setCue.call(this, event)); + tracks.filter(track => !meta.get(track)).forEach(track => { + this.debug.log('Track added', track); + // Attempt to store if the original dom element was "default" + meta.set(track, { + default: track.mode === 'showing', + }); // Turn off native caption rendering to avoid double captions - // eslint-disable-next-line track.mode = 'hidden'; + + // Add event listener for cue changes + on.call(this, track, 'cuechange', () => captions.updateCues.call(this)); }); + } - // Get current track - const currentTrack = captions.getCurrentTrack.call(this); + // Update language first time it matches, or if the previous matching track was removed + if ((languageExists && this.language !== language) || !tracks.includes(currentTrackNode)) { + captions.setLanguage.call(this, language); + captions.toggle.call(this, active && languageExists); + } - // Check if suported kind - if (utils.is.track(currentTrack)) { - // If we change the active track while a cue is already displayed we need to update it - if (Array.from(currentTrack.activeCues || []).length) { - captions.setCue.call(this, currentTrack); - } - } - } else if (this.isVimeo && this.captions.active) { - this.embed.enableTextTrack(this.language); + // Enable or disable captions based on track length + toggleClass(this.elements.container, this.config.classNames.captions.enabled, !is.empty(tracks)); + + // Update available languages in list + if ((this.config.controls || []).includes('settings') && this.config.settings.includes('captions')) { + controls.setCaptionsMenu.call(this); } }, - // Get the tracks - getTracks() { - // Return empty array at least - if (utils.is.nullOrUndefined(this.media)) { - return []; + // Toggle captions display + // Used internally for the toggleCaptions method, with the passive option forced to false + toggle(input, passive = true) { + // If there's no full support + if (!this.supported.ui) { + return; } - // Only get accepted kinds - return Array.from(this.media.textTracks || []).filter(track => [ - 'captions', - 'subtitles', - ].includes(track.kind)); + 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; + + // Update state and trigger event + if (active !== toggled) { + // When passive, don't override user preferences + if (!passive) { + this.captions.active = active; + this.storage.set({ captions: active }); + } + + // Force language if the call isn't passive and there is no matching language to toggle to + if (!this.language && active && !passive) { + const tracks = captions.getTracks.call(this); + const track = captions.findTrack.call(this, [this.captions.language, ...this.captions.languages], true); + + // Override user preferences to avoid switching languages if a matching track is added + this.captions.language = track.language; + + // Set caption, but don't store in localStorage as user preference + captions.set.call(this, tracks.indexOf(track)); + return; + } + + // Toggle button if it's enabled + if (this.elements.buttons.captions) { + this.elements.buttons.captions.pressed = active; + } + + // Add class hook + toggleClass(this.elements.container, activeClass, active); + + this.captions.toggled = active; + + // Update settings menu + controls.updateSetting.call(this, 'captions'); + + // Trigger event (not used internally) + triggerEvent.call(this, this.media, active ? 'captionsenabled' : 'captionsdisabled'); + } }, - // Get the current track for the current language - getCurrentTrack() { + // Set captions by track index + // Used internally for the currentTrack setter with the passive option forced to false + set(index, passive = true) { const tracks = captions.getTracks.call(this); - if (!tracks.length) { - return null; + // Disable captions if setting to -1 + if (index === -1) { + captions.toggle.call(this, false, passive); + return; } - // Get track based on current language - let track = tracks.find(track => track.language.toLowerCase() === this.language); + if (!is.number(index)) { + this.debug.warn('Invalid caption argument', index); + return; + } - // Get the <track> with default attribute - if (!track) { - track = utils.getElement.call(this, 'track[default]'); + if (!(index in tracks)) { + this.debug.warn('Track not found', index); + return; } - // Get the first track - if (!track) { - [track] = tracks; + if (this.captions.currentTrack !== index) { + this.captions.currentTrack = index; + const track = tracks[index]; + const { language } = track || {}; + + // Store reference to node for invalidation on remove + this.captions.currentTrackNode = track; + + // Update settings menu + controls.updateSetting.call(this, 'captions'); + + // When passive, don't override user preferences + if (!passive) { + this.captions.language = language; + this.storage.set({ language }); + } + + // Handle Vimeo captions + if (this.isVimeo) { + this.embed.enableTextTrack(language); + } + + // Trigger event + triggerEvent.call(this, this.media, 'languagechange'); + } + + // Show captions + captions.toggle.call(this, true, passive); + + if (this.isHTML5 && this.isVideo) { + // If we change the active track while a cue is already displayed we need to update it + captions.updateCues.call(this); + } + }, + + // Set captions by language + // Used internally for the language setter with the passive option forced to false + setLanguage(input, passive = true) { + if (!is.string(input)) { + this.debug.warn('Invalid language argument', input); + return; } + // Normalize + const language = input.toLowerCase(); + this.captions.language = language; + + // Set currentTrack + const tracks = captions.getTracks.call(this); + const track = captions.findTrack.call(this, [language]); + captions.set.call(this, tracks.indexOf(track), passive); + }, - return track; + // Get current valid caption tracks + // If update is false it will also ignore tracks without metadata + // This is used to "freeze" the language options when captions.update is false + getTracks(update = false) { + // Handle media or textTracks missing or null + const tracks = Array.from((this.media || {}).textTracks || []); + // For HTML5, use cache instead of current tracks when it exists (if captions.update is false) + // Filter out removed tracks and tracks that aren't captions/subtitles (for example metadata) + return tracks + .filter(track => !this.isHTML5 || update || this.captions.meta.has(track)) + .filter(track => ['captions', 'subtitles'].includes(track.kind)); + }, + + // Match tracks based on languages and get the first + findTrack(languages, force = false) { + const tracks = captions.getTracks.call(this); + const sortIsDefault = track => Number((this.captions.meta.get(track) || {}).default); + const sorted = Array.from(tracks).sort((a, b) => sortIsDefault(b) - sortIsDefault(a)); + let track; + languages.every(language => { + track = sorted.find(track => track.language === language); + return !track; // Break iteration if there is a match + }); + // If no match is found but is required, get first + return track || (force ? sorted[0] : undefined); + }, + + // Get the current track + getCurrentTrack() { + return captions.getTracks.call(this)[this.currentTrack]; }, // Get UI label for track getLabel(track) { let currentTrack = track; - if (!utils.is.track(currentTrack) && support.textTracks && this.captions.active) { + if (!is.track(currentTrack) && support.textTracks && this.captions.toggled) { currentTrack = captions.getCurrentTrack.call(this); } - if (utils.is.track(currentTrack)) { - if (!utils.is.empty(currentTrack.label)) { + if (is.track(currentTrack)) { + if (!is.empty(currentTrack.label)) { return currentTrack.label; } - if (!utils.is.empty(currentTrack.language)) { + if (!is.empty(currentTrack.language)) { return track.language.toUpperCase(); } @@ -195,74 +336,48 @@ const captions = { return i18n.get('disabled', this.config); }, - // Display active caption if it contains text - setCue(input) { - // Get the track from the event if needed - const track = utils.is.event(input) ? input.target : input; - const { activeCues } = track; - const active = activeCues.length && activeCues[0]; - const currentTrack = captions.getCurrentTrack.call(this); - - // Only display current track - if (track !== currentTrack) { + // Update captions using current track's active cues + // Also optional array argument in case there isn't any track (ex: vimeo) + updateCues(input) { + // Requires UI + if (!this.supported.ui) { return; } - // Display a cue, if there is one - if (utils.is.cue(active)) { - captions.setText.call(this, active.getCueAsHTML()); - } else { - captions.setText.call(this, null); + if (!is.element(this.elements.captions)) { + this.debug.warn('No captions element to render to'); + return; } - utils.dispatchEvent.call(this, this.media, 'cuechange'); - }, - - // Set the current caption - setText(input) { - // Requires UI - if (!this.supported.ui) { + // Only accept array or empty input + if (!is.nullOrUndefined(input) && !Array.isArray(input)) { + this.debug.warn('updateCues: Invalid input', input); return; } - if (utils.is.element(this.elements.captions)) { - const content = utils.createElement('span'); - - // Empty the container - utils.emptyElement(this.elements.captions); - - // Default to empty - const caption = !utils.is.nullOrUndefined(input) ? input : ''; - - // Set the span content - if (utils.is.string(caption)) { - content.innerText = caption.trim(); - } else { - content.appendChild(caption); - } + let cues = input; - // Set new caption text - this.elements.captions.appendChild(content); - } else { - this.debug.warn('No captions element to render to'); + // Get cues from track + if (!cues) { + const track = captions.getCurrentTrack.call(this); + cues = Array.from((track || {}).activeCues || []) + .map(cue => cue.getCueAsHTML()) + .map(getHTML); } - }, - // Display captions container and button (for initialization) - show() { - // Try to load the value from storage - let active = this.storage.get('captions'); + // Set new caption text + const content = cues.map(cueText => cueText.trim()).join('\n'); + const changed = content !== this.elements.captions.innerHTML; - // Otherwise fall back to the default config - if (!utils.is.boolean(active)) { - ({ active } = this.config.captions); - } else { - this.captions.active = active; - } + if (changed) { + // Empty the container and create a new child element + emptyElement(this.elements.captions); + const caption = createElement('span', getAttributesFromSelector(this.config.selectors.caption)); + caption.innerHTML = content; + this.elements.captions.appendChild(caption); - if (active) { - utils.toggleClass(this.elements.container, this.config.classNames.captions.active, true); - utils.toggleState(this.elements.buttons.captions, true); + // Trigger event + triggerEvent.call(this, this.media, 'cuechange'); } }, }; diff --git a/src/js/defaults.js b/src/js/config/defaults.js index f66a7c2f..c3f97eee 100644 --- a/src/js/defaults.js +++ b/src/js/config/defaults.js @@ -18,6 +18,10 @@ const defaults = { // Only allow one media playing at once (vimeo only) autopause: true, + // Allow inline playback on iOS (this effects YouTube/Vimeo - HTML5 requires the attribute present) + // TODO: Remove iosNative fullscreen option in favour of this (logic needs work) + playsinline: true, + // Default time to skip when rewind/fast forward seekTime: 10, @@ -56,7 +60,7 @@ const defaults = { // Sprite (for icons) loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/3.3.7/plyr.svg', + iconUrl: 'https://cdn.plyr.io/3.4.7/plyr.svg', // Blank video (used to prevent errors on source change) blankVideo: 'https://cdn.plyr.io/static/blank.mp4', @@ -64,19 +68,7 @@ const defaults = { // Quality default quality: { default: 576, - options: [ - 4320, - 2880, - 2160, - 1440, - 1080, - 720, - 576, - 480, - 360, - 240, - 'default', // YouTube's "auto" - ], + options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240], }, // Set loops @@ -89,15 +81,7 @@ const defaults = { // Speed default and options to display speed: { selected: 1, - options: [ - 0.5, - 0.75, - 1, - 1.25, - 1.5, - 1.75, - 2, - ], + options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2], }, // Keyboard shortcut settings @@ -115,7 +99,10 @@ const defaults = { // Captions settings captions: { active: false, - language: (navigator.language || navigator.userLanguage).split('-')[0], + language: 'auto', + // Listen to new tracks added after Plyr is initialized. + // This is needed for streaming captions, but may result in unselectable options + update: false, }, // Fullscreen settings @@ -146,13 +133,10 @@ const defaults = { 'settings', 'pip', 'airplay', + // 'download', 'fullscreen', ], - settings: [ - 'captions', - 'quality', - 'speed', - ], + settings: ['captions', 'quality', 'speed'], // Localisation i18n: { @@ -162,6 +146,7 @@ const defaults = { pause: 'Pause', fastForward: 'Forward {seektime}s', seek: 'Seek', + seekLabel: '{currentTime} of {duration}', played: 'Played', buffered: 'Buffered', currentTime: 'Current time', @@ -171,11 +156,13 @@ const defaults = { unmute: 'Unmute', enableCaptions: 'Enable captions', disableCaptions: 'Disable captions', + download: 'Download', enterFullscreen: 'Enter fullscreen', exitFullscreen: 'Exit fullscreen', frameTitle: 'Player for {title}', captions: 'Captions', settings: 'Settings', + menuBack: 'Go back to previous menu', speed: 'Speed', normal: 'Normal', quality: 'Quality', @@ -187,10 +174,19 @@ const defaults = { disabled: 'Disabled', enabled: 'Enabled', advertisement: 'Ad', + qualityBadge: { + 2160: '4K', + 1440: 'HD', + 1080: 'HD', + 720: 'HD', + 576: 'SD', + 480: 'SD', + }, }, // URLs urls: { + download: null, vimeo: { sdk: 'https://player.vimeo.com/api/player.js', iframe: 'https://player.vimeo.com/video/{0}?{1}', @@ -198,7 +194,8 @@ const defaults = { }, youtube: { sdk: 'https://www.youtube.com/iframe_api', - api: 'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title))&part=snippet', + api: + 'https://www.googleapis.com/youtube/v3/videos?id={0}&key={1}&fields=items(snippet(title))&part=snippet', }, googleIMA: { sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js', @@ -216,6 +213,7 @@ const defaults = { mute: null, volume: null, captions: null, + download: null, fullscreen: null, pip: null, airplay: null, @@ -251,6 +249,7 @@ const defaults = { 'cuechange', // Custom events + 'download', 'enterfullscreen', 'exitfullscreen', 'captionsenabled', @@ -262,8 +261,9 @@ const defaults = { // YouTube 'statechange', + + // Quality 'qualitychange', - 'qualityrequested', // Ads 'adsloaded', @@ -295,6 +295,7 @@ const defaults = { fastForward: '[data-plyr="fast-forward"]', mute: '[data-plyr="mute"]', captions: '[data-plyr="captions"]', + download: '[data-plyr="download"]', fullscreen: '[data-plyr="fullscreen"]', pip: '[data-plyr="pip"]', airplay: '[data-plyr="airplay"]', @@ -311,13 +312,13 @@ const defaults = { display: { currentTime: '.plyr__time--current', duration: '.plyr__time--duration', - buffer: '.plyr__progress--buffer', - played: '.plyr__progress--played', - loop: '.plyr__progress--loop', + buffer: '.plyr__progress__buffer', + loop: '.plyr__progress__loop', // Used later volume: '.plyr__volume--display', }, progress: '.plyr__progress', captions: '.plyr__captions', + caption: '.plyr__caption', menu: { quality: '.js-plyr__menu__list--quality', }, @@ -334,6 +335,7 @@ const defaults = { posterEnabled: 'plyr__poster-enabled', ads: 'plyr__ads', control: 'plyr__control', + controlPressed: 'plyr__control--pressed', playing: 'plyr--playing', paused: 'plyr--paused', stopped: 'plyr--stopped', @@ -347,6 +349,9 @@ const defaults = { isTouch: 'plyr--is-touch', uiSupported: 'plyr--full-ui', noTransition: 'plyr--no-transition', + display: { + time: 'plyr__time', + }, menu: { value: 'plyr__menu__value', badge: 'plyr__badge', diff --git a/src/js/config/states.js b/src/js/config/states.js new file mode 100644 index 00000000..7dd1476b --- /dev/null +++ b/src/js/config/states.js @@ -0,0 +1,10 @@ +// ========================================================================== +// Plyr states +// ========================================================================== + +export const pip = { + active: 'picture-in-picture', + inactive: 'inline', +}; + +export default { pip }; diff --git a/src/js/types.js b/src/js/config/types.js index 35716c3c..c9d50937 100644 --- a/src/js/types.js +++ b/src/js/config/types.js @@ -13,4 +13,22 @@ export const types = { video: 'video', }; +/** + * Get provider by URL + * @param {String} url + */ +export function getProviderByUrl(url) { + // YouTube + if (/^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.?be)\/.+$/.test(url)) { + return providers.youtube; + } + + // Vimeo + if (/^https?:\/\/player.vimeo.com\/video\/\d{0,9}(?=\b|\/)/.test(url)) { + return providers.vimeo; + } + + return null; +} + export default { providers, types }; diff --git a/src/js/console.js b/src/js/console.js index 7c5ec1b4..e8099569 100644 --- a/src/js/console.js +++ b/src/js/console.js @@ -17,10 +17,12 @@ export default class Console { // eslint-disable-next-line no-console return this.enabled ? Function.prototype.bind.call(console.log, console) : noop; } + get warn() { // eslint-disable-next-line no-console return this.enabled ? Function.prototype.bind.call(console.warn, console) : noop; } + get error() { // eslint-disable-next-line no-console return this.enabled ? Function.prototype.bind.call(console.error, console) : noop; diff --git a/src/js/controls.js b/src/js/controls.js index d266ed6b..4f453e6a 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -1,19 +1,25 @@ // ========================================================================== // Plyr controls +// TODO: This needs to be split into smaller files and cleaned up // ========================================================================== import captions from './captions'; import html5 from './html5'; -import i18n from './i18n'; import support from './support'; -import utils from './utils'; - -// Sniff out the browser -const browser = utils.getBrowser(); - +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 { off, on } from './utils/events'; +import i18n from './utils/i18n'; +import is from './utils/is'; +import loadSprite from './utils/loadSprite'; +import { extend } from './utils/objects'; +import { getPercentage, replaceAll, toCamelCase, toTitleCase } from './utils/strings'; +import { formatTime, getHours } from './utils/time'; + +// TODO: Don't export a massive object - break down and create class const controls = { - - // Get icon URL getIconUrl() { const url = new URL(this.config.iconUrl, window.location); @@ -25,46 +31,47 @@ const controls = { }; }, - // Find the UI controls and store references in custom controls - // TODO: Allow settings menus with custom controls + // Find the UI controls findElements() { try { - this.elements.controls = utils.getElement.call(this, this.config.selectors.controls.wrapper); + this.elements.controls = getElement.call(this, this.config.selectors.controls.wrapper); // Buttons this.elements.buttons = { - play: utils.getElements.call(this, this.config.selectors.buttons.play), - pause: utils.getElement.call(this, this.config.selectors.buttons.pause), - restart: utils.getElement.call(this, this.config.selectors.buttons.restart), - rewind: utils.getElement.call(this, this.config.selectors.buttons.rewind), - fastForward: utils.getElement.call(this, this.config.selectors.buttons.fastForward), - mute: utils.getElement.call(this, this.config.selectors.buttons.mute), - pip: utils.getElement.call(this, this.config.selectors.buttons.pip), - airplay: utils.getElement.call(this, this.config.selectors.buttons.airplay), - settings: utils.getElement.call(this, this.config.selectors.buttons.settings), - captions: utils.getElement.call(this, this.config.selectors.buttons.captions), - fullscreen: utils.getElement.call(this, this.config.selectors.buttons.fullscreen), + play: getElements.call(this, this.config.selectors.buttons.play), + pause: getElement.call(this, this.config.selectors.buttons.pause), + restart: getElement.call(this, this.config.selectors.buttons.restart), + rewind: getElement.call(this, this.config.selectors.buttons.rewind), + fastForward: getElement.call(this, this.config.selectors.buttons.fastForward), + mute: getElement.call(this, this.config.selectors.buttons.mute), + pip: getElement.call(this, this.config.selectors.buttons.pip), + airplay: getElement.call(this, this.config.selectors.buttons.airplay), + settings: getElement.call(this, this.config.selectors.buttons.settings), + captions: getElement.call(this, this.config.selectors.buttons.captions), + fullscreen: getElement.call(this, this.config.selectors.buttons.fullscreen), }; // Progress - this.elements.progress = utils.getElement.call(this, this.config.selectors.progress); + this.elements.progress = getElement.call(this, this.config.selectors.progress); // Inputs this.elements.inputs = { - seek: utils.getElement.call(this, this.config.selectors.inputs.seek), - volume: utils.getElement.call(this, this.config.selectors.inputs.volume), + seek: getElement.call(this, this.config.selectors.inputs.seek), + volume: getElement.call(this, this.config.selectors.inputs.volume), }; // Display this.elements.display = { - buffer: utils.getElement.call(this, this.config.selectors.display.buffer), - currentTime: utils.getElement.call(this, this.config.selectors.display.currentTime), - duration: utils.getElement.call(this, this.config.selectors.display.duration), + buffer: getElement.call(this, this.config.selectors.display.buffer), + currentTime: getElement.call(this, this.config.selectors.display.currentTime), + duration: getElement.call(this, this.config.selectors.display.duration), }; // Seek tooltip - if (utils.is.element(this.elements.progress)) { - this.elements.display.seekTooltip = this.elements.progress.querySelector(`.${this.config.classNames.tooltip}`); + if (is.element(this.elements.progress)) { + this.elements.display.seekTooltip = this.elements.progress.querySelector( + `.${this.config.classNames.tooltip}`, + ); } return true; @@ -87,9 +94,9 @@ const controls = { // Create <svg> const icon = document.createElementNS(namespace, 'svg'); - utils.setAttributes( + setAttributes( icon, - utils.extend(attributes, { + extend(attributes, { role: 'presentation', focusable: 'false', }), @@ -104,10 +111,11 @@ const controls = { // https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href if ('href' in use) { use.setAttributeNS('http://www.w3.org/1999/xlink', 'href', path); - } else { - use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', path); } + // Always set the older attribute even though it's "deprecated" (it'll be around for ages) + use.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', path); + // Add <use> to <svg> icon.appendChild(use); @@ -115,44 +123,28 @@ const controls = { }, // Create hidden text label - createLabel(type, attr) { - let text = i18n.get(type, this.config); - const attributes = Object.assign({}, attr); - - switch (type) { - case 'pip': - text = 'PIP'; - break; - - case 'airplay': - text = 'AirPlay'; - break; + createLabel(key, attr = {}) { + const text = i18n.get(key, this.config); - default: - break; - } - - if ('class' in attributes) { - attributes.class += ` ${this.config.classNames.hidden}`; - } else { - attributes.class = this.config.classNames.hidden; - } + const attributes = Object.assign({}, attr, { + class: [attr.class, this.config.classNames.hidden].filter(Boolean).join(' '), + }); - return utils.createElement('span', attributes, text); + return createElement('span', attributes, text); }, // Create a badge createBadge(text) { - if (utils.is.empty(text)) { + if (is.empty(text)) { return null; } - const badge = utils.createElement('span', { + const badge = createElement('span', { class: this.config.classNames.menu.value, }); badge.appendChild( - utils.createElement( + createElement( 'span', { class: this.config.classNames.menu.badge, @@ -166,22 +158,33 @@ const controls = { // Create a <button> createButton(buttonType, attr) { - const button = utils.createElement('button'); const attributes = Object.assign({}, attr); - let type = utils.toCamelCase(buttonType); + let type = toCamelCase(buttonType); - let toggle = false; - let label; - let icon; - let labelPressed; - let iconPressed; + const props = { + element: 'button', + toggle: false, + label: null, + icon: null, + labelPressed: null, + iconPressed: null, + }; - if (!('type' in attributes)) { + ['element', 'icon', 'label'].forEach(key => { + if (Object.keys(attributes).includes(key)) { + props[key] = attributes[key]; + delete attributes[key]; + } + }); + + // Default to 'button' type to prevent form submission + if (props.element === 'button' && !Object.keys(attributes).includes('type')) { attributes.type = 'button'; } - if ('class' in attributes) { - if (attributes.class.includes(this.config.classNames.control)) { + // Set class name + if (Object.keys(attributes).includes('class')) { + if (!attributes.class.includes(this.config.classNames.control)) { attributes.class += ` ${this.config.classNames.control}`; } } else { @@ -191,74 +194,92 @@ const controls = { // Large play button switch (buttonType) { case 'play': - toggle = true; - label = 'play'; - labelPressed = 'pause'; - icon = 'play'; - iconPressed = 'pause'; + props.toggle = true; + props.label = 'play'; + props.labelPressed = 'pause'; + props.icon = 'play'; + props.iconPressed = 'pause'; break; case 'mute': - toggle = true; - label = 'mute'; - labelPressed = 'unmute'; - icon = 'volume'; - iconPressed = 'muted'; + props.toggle = true; + props.label = 'mute'; + props.labelPressed = 'unmute'; + props.icon = 'volume'; + props.iconPressed = 'muted'; break; case 'captions': - toggle = true; - label = 'enableCaptions'; - labelPressed = 'disableCaptions'; - icon = 'captions-off'; - iconPressed = 'captions-on'; + props.toggle = true; + props.label = 'enableCaptions'; + props.labelPressed = 'disableCaptions'; + props.icon = 'captions-off'; + props.iconPressed = 'captions-on'; break; case 'fullscreen': - toggle = true; - label = 'enterFullscreen'; - labelPressed = 'exitFullscreen'; - icon = 'enter-fullscreen'; - iconPressed = 'exit-fullscreen'; + props.toggle = true; + props.label = 'enterFullscreen'; + props.labelPressed = 'exitFullscreen'; + props.icon = 'enter-fullscreen'; + props.iconPressed = 'exit-fullscreen'; break; case 'play-large': attributes.class += ` ${this.config.classNames.control}--overlaid`; type = 'play'; - label = 'play'; - icon = 'play'; + props.label = 'play'; + props.icon = 'play'; break; default: - label = type; - icon = buttonType; + if (is.empty(props.label)) { + props.label = type; + } + if (is.empty(props.icon)) { + props.icon = buttonType; + } } + const button = createElement(props.element); + // Setup toggle icon and labels - if (toggle) { + if (props.toggle) { // Icon - button.appendChild(controls.createIcon.call(this, iconPressed, { class: 'icon--pressed' })); - button.appendChild(controls.createIcon.call(this, icon, { class: 'icon--not-pressed' })); + button.appendChild( + controls.createIcon.call(this, props.iconPressed, { + class: 'icon--pressed', + }), + ); + button.appendChild( + controls.createIcon.call(this, props.icon, { + class: 'icon--not-pressed', + }), + ); // Label/Tooltip - button.appendChild(controls.createLabel.call(this, labelPressed, { class: 'label--pressed' })); - button.appendChild(controls.createLabel.call(this, label, { class: 'label--not-pressed' })); - - // Add aria attributes - attributes['aria-pressed'] = false; + button.appendChild( + controls.createLabel.call(this, props.labelPressed, { + class: 'label--pressed', + }), + ); + button.appendChild( + controls.createLabel.call(this, props.label, { + class: 'label--not-pressed', + }), + ); } else { - button.appendChild(controls.createIcon.call(this, icon)); - button.appendChild(controls.createLabel.call(this, label)); + button.appendChild(controls.createIcon.call(this, props.icon)); + button.appendChild(controls.createLabel.call(this, props.label)); } - // Merge attributes - utils.extend(attributes, utils.getAttributesFromSelector(this.config.selectors.buttons[type], attributes)); - - utils.setAttributes(button, attributes); + // Merge and set attributes + extend(attributes, getAttributesFromSelector(this.config.selectors.buttons[type], attributes)); + setAttributes(button, attributes); // We have multiple play buttons if (type === 'play') { - if (!utils.is.array(this.elements.buttons[type])) { + if (!is.array(this.elements.buttons[type])) { this.elements.buttons[type] = []; } @@ -272,22 +293,11 @@ const controls = { // Create an <input type='range'> createRange(type, attributes) { - // Seek label - const label = utils.createElement( - 'label', - { - for: attributes.id, - id: `${attributes.id}-label`, - class: this.config.classNames.hidden, - }, - i18n.get(type, this.config), - ); - // Seek input - const input = utils.createElement( + const input = createElement( 'input', - utils.extend( - utils.getAttributesFromSelector(this.config.selectors.inputs[type]), + extend( + getAttributesFromSelector(this.config.selectors.inputs[type]), { type: 'range', min: 0, @@ -297,7 +307,7 @@ const controls = { autocomplete: 'off', // A11y fixes for https://github.com/sampotts/plyr/issues/905 role: 'slider', - 'aria-labelledby': `${attributes.id}-label`, + 'aria-label': i18n.get(type, this.config), 'aria-valuemin': 0, 'aria-valuemax': 100, 'aria-valuenow': 0, @@ -311,18 +321,15 @@ const controls = { // Set the fill for webkit now controls.updateRangeFill.call(this, input); - return { - label, - input, - }; + return input; }, // Create a <progress> createProgress(type, attributes) { - const progress = utils.createElement( + const progress = createElement( 'progress', - utils.extend( - utils.getAttributesFromSelector(this.config.selectors.display[type]), + extend( + getAttributesFromSelector(this.config.selectors.display[type]), { min: 0, max: 100, @@ -336,21 +343,13 @@ const controls = { // Create the label inside if (type !== 'volume') { - progress.appendChild(utils.createElement('span', null, '0')); - - let suffix = ''; - switch (type) { - case 'played': - suffix = i18n.get('played', this.config); - break; - - case 'buffer': - suffix = i18n.get('buffered', this.config); - break; + progress.appendChild(createElement('span', null, '0')); - default: - break; - } + const suffixKey = { + played: 'played', + buffer: 'buffered', + }[type]; + const suffix = suffixKey ? i18n.get(suffixKey, this.config) : ''; progress.innerText = `% ${suffix.toLowerCase()}`; } @@ -362,12 +361,16 @@ const controls = { // Create time display createTime(type) { - const attributes = utils.getAttributesFromSelector(this.config.selectors.display[type]); + const attributes = getAttributesFromSelector(this.config.selectors.display[type]); - const container = utils.createElement('div', utils.extend(attributes, { - class: `plyr__time ${attributes.class}`, - 'aria-label': i18n.get(type, this.config), - }), '00:00'); + const container = createElement( + 'div', + extend(attributes, { + class: `${this.config.classNames.display.time} ${attributes.class ? attributes.class : ''}`.trim(), + 'aria-label': i18n.get(type, this.config), + }), + '00:00', + ); // Reference for updates this.elements.display[type] = container; @@ -375,51 +378,177 @@ const controls = { return container; }, - // Create a settings menu item - createMenuItem(value, list, type, title, badge = null, checked = false) { - const item = utils.createElement('li'); + // Bind keyboard shortcuts for a menu item + // We have to bind to keyup otherwise Firefox triggers a click when a keydown event handler shifts focus + // https://bugzilla.mozilla.org/show_bug.cgi?id=1220143 + bindMenuItemShortcuts(menuItem, type) { + // Navigate through menus via arrow keys and space + on( + menuItem, + 'keydown keyup', + event => { + // We only care about space and ⬆️ ⬇️️ ➡️ + if (![32, 38, 39, 40].includes(event.which)) { + return; + } - const label = utils.createElement('label', { - class: this.config.classNames.control, + // Prevent play / seek + event.preventDefault(); + event.stopPropagation(); + + // We're just here to prevent the keydown bubbling + if (event.type === 'keydown') { + return; + } + + const isRadioButton = matches(menuItem, '[role="menuitemradio"]'); + + // Show the respective menu + if (!isRadioButton && [32, 39].includes(event.which)) { + controls.showMenuPanel.call(this, type, true); + } else { + let target; + + if (event.which !== 32) { + if (event.which === 40 || (isRadioButton && event.which === 39)) { + target = menuItem.nextElementSibling; + + if (!is.element(target)) { + target = menuItem.parentNode.firstElementChild; + } + } else { + target = menuItem.previousElementSibling; + + if (!is.element(target)) { + target = menuItem.parentNode.lastElementChild; + } + } + + setFocus.call(this, target, true); + } + } + }, + false, + ); + + // Enter will fire a `click` event but we still need to manage focus + // So we bind to keyup which fires after and set focus here + on(menuItem, 'keyup', event => { + if (event.which !== 13) { + return; + } + + controls.focusFirstMenuItem.call(this, null, true); }); + }, - const radio = utils.createElement( - 'input', - utils.extend(utils.getAttributesFromSelector(this.config.selectors.inputs[type]), { - type: 'radio', - name: `plyr-${type}`, + // Create a settings menu item + createMenuItem({ value, list, type, title, badge = null, checked = false }) { + const attributes = getAttributesFromSelector(this.config.selectors.inputs[type]); + + const menuItem = createElement( + 'button', + extend(attributes, { + type: 'button', + role: 'menuitemradio', + class: `${this.config.classNames.control} ${attributes.class ? attributes.class : ''}`.trim(), + 'aria-checked': checked, value, - checked, - class: 'plyr__sr-only', }), ); - const faux = utils.createElement('span', { hidden: '' }); + const flex = createElement('span'); + + // We have to set as HTML incase of special characters + flex.innerHTML = title; + + if (is.element(badge)) { + flex.appendChild(badge); + } + + menuItem.appendChild(flex); + + // Replicate radio button behaviour + Object.defineProperty(menuItem, 'checked', { + enumerable: true, + get() { + return menuItem.getAttribute('aria-checked') === 'true'; + }, + set(checked) { + // Ensure exclusivity + if (checked) { + 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'); + }, + }); + + this.listeners.bind( + menuItem, + 'click keyup', + event => { + if (is.keyboardEvent(event) && event.which !== 32) { + return; + } + + event.preventDefault(); + event.stopPropagation(); + + menuItem.checked = true; + + switch (type) { + case 'language': + this.currentTrack = Number(value); + break; + + case 'quality': + this.quality = value; + break; + + case 'speed': + this.speed = parseFloat(value); + break; + + default: + break; + } + + controls.showMenuPanel.call(this, 'home', is.keyboardEvent(event)); + }, + type, + false, + ); + + controls.bindMenuItemShortcuts.call(this, menuItem, type); - label.appendChild(radio); - label.appendChild(faux); - label.insertAdjacentHTML('beforeend', title); + list.appendChild(menuItem); + }, - if (utils.is.element(badge)) { - label.appendChild(badge); + // Format a time for display + formatTime(time = 0, inverted = false) { + // Bail if the value isn't a number + if (!is.number(time)) { + return time; } - item.appendChild(label); - list.appendChild(item); + // Always display hours if duration is over an hour + const forceHours = getHours(this.duration) > 0; + + return formatTime(time, forceHours, inverted); }, // Update the displayed time updateTimeDisplay(target = null, time = 0, inverted = false) { // Bail if there's no element to display or the value isn't a number - if (!utils.is.element(target) || !utils.is.number(time)) { + if (!is.element(target) || !is.number(time)) { return; } - // Always display hours if duration is over an hour - const forceHours = utils.getHours(this.duration) > 0; - // eslint-disable-next-line no-param-reassign - target.innerText = utils.formatTime(time, forceHours, inverted); + target.innerText = controls.formatTime(time, inverted); }, // Update volume UI and storage @@ -429,19 +558,19 @@ const controls = { } // Update range - if (utils.is.element(this.elements.inputs.volume)) { + if (is.element(this.elements.inputs.volume)) { controls.setRange.call(this, this.elements.inputs.volume, this.muted ? 0 : this.volume); } // Update mute state - if (utils.is.element(this.elements.buttons.mute)) { - utils.toggleState(this.elements.buttons.mute, this.muted || this.volume === 0); + if (is.element(this.elements.buttons.mute)) { + this.elements.buttons.mute.pressed = this.muted || this.volume === 0; } }, // Update seek value and lower fill setRange(target, value = 0) { - if (!utils.is.element(target)) { + if (!is.element(target)) { return; } @@ -454,23 +583,23 @@ const controls = { // Update <progress> elements updateProgress(event) { - if (!this.supported.ui || !utils.is.event(event)) { + if (!this.supported.ui || !is.event(event)) { return; } let value = 0; const setProgress = (target, input) => { - const value = utils.is.number(input) ? input : 0; - const progress = utils.is.element(target) ? target : this.elements.display.buffer; + const value = is.number(input) ? input : 0; + const progress = is.element(target) ? target : this.elements.display.buffer; // Update value and label - if (utils.is.element(progress)) { + if (is.element(progress)) { progress.value = value; // Update text label inside const label = progress.getElementsByTagName('span')[0]; - if (utils.is.element(label)) { + if (is.element(label)) { label.childNodes[0].nodeValue = value; } } @@ -482,7 +611,7 @@ const controls = { case 'timeupdate': case 'seeking': case 'seeked': - value = utils.getPercentage(this.currentTime, this.duration); + value = getPercentage(this.currentTime, this.duration); // Set seek range value only if it's a 'natural' time event if (event.type === 'timeupdate') { @@ -507,15 +636,30 @@ const controls = { // Webkit polyfill for lower fill range updateRangeFill(target) { // Get range from event if event passed - const range = utils.is.event(target) ? target.target : target; + const range = is.event(target) ? target.target : target; // Needs to be a valid <input type='range'> - if (!utils.is.element(range) || range.getAttribute('type') !== 'range') { + if (!is.element(range) || range.getAttribute('type') !== 'range') { return; } - // Set aria value for https://github.com/sampotts/plyr/issues/905 - range.setAttribute('aria-valuenow', range.value); + // Set aria values for https://github.com/sampotts/plyr/issues/905 + if (matches(range, this.config.selectors.inputs.seek)) { + range.setAttribute('aria-valuenow', this.currentTime); + const currentTime = controls.formatTime(this.currentTime); + const duration = controls.formatTime(this.duration); + const format = i18n.get('seekLabel', this.config); + range.setAttribute( + 'aria-valuetext', + format.replace('{currentTime}', currentTime).replace('{duration}', duration), + ); + } else if (matches(range, this.config.selectors.inputs.volume)) { + const percent = range.value * 100; + range.setAttribute('aria-valuenow', percent); + range.setAttribute('aria-valuetext', `${percent.toFixed(1)}%`); + } else { + range.setAttribute('aria-valuenow', range.value); + } // WebKit only if (!browser.isWebkit) { @@ -531,8 +675,8 @@ const controls = { // Bail if setting not true if ( !this.config.tooltips.seek || - !utils.is.element(this.elements.inputs.seek) || - !utils.is.element(this.elements.display.seekTooltip) || + !is.element(this.elements.inputs.seek) || + !is.element(this.elements.display.seekTooltip) || this.duration === 0 ) { return; @@ -544,7 +688,7 @@ const controls = { const visible = `${this.config.classNames.tooltip}--visible`; const toggle = toggle => { - utils.toggleClass(this.elements.display.seekTooltip, visible, toggle); + toggleClass(this.elements.display.seekTooltip, visible, toggle); }; // Hide on touch @@ -554,9 +698,9 @@ const controls = { } // Determine percentage, if already visible - if (utils.is.event(event)) { + if (is.event(event)) { percent = 100 / clientRect.width * (event.pageX - clientRect.left); - } else if (utils.hasClass(this.elements.display.seekTooltip, visible)) { + } else if (hasClass(this.elements.display.seekTooltip, visible)) { percent = parseFloat(this.elements.display.seekTooltip.style.left, 10); } else { return; @@ -577,10 +721,7 @@ const controls = { // Show/hide the tooltip // If the event is a moues in/out and percentage is inside bounds - if (utils.is.event(event) && [ - 'mouseenter', - 'mouseleave', - ].includes(event.type)) { + if (is.event(event) && ['mouseenter', 'mouseleave'].includes(event.type)) { toggle(event.type === 'mouseenter'); } }, @@ -588,10 +729,15 @@ const controls = { // Handle time change event timeUpdate(event) { // Only invert if only one time element is displayed and used for both duration and currentTime - const invert = !utils.is.element(this.elements.display.duration) && this.config.invertTime; + const invert = !is.element(this.elements.display.duration) && this.config.invertTime; // Duration - controls.updateTimeDisplay.call(this, this.elements.display.currentTime, invert ? this.duration - this.currentTime : this.currentTime, invert); + controls.updateTimeDisplay.call( + this, + this.elements.display.currentTime, + invert ? this.duration - this.currentTime : this.currentTime, + invert, + ); // Ignore updates while seeking if (event && event.type === 'timeupdate' && this.media.seeking) { @@ -604,13 +750,28 @@ const controls = { // Show the duration on metadataloaded or durationchange events durationUpdate() { - // Bail if no ui or durationchange event triggered after playing/seek when invertTime is false + // Bail if no UI or durationchange event triggered after playing/seek when invertTime is false if (!this.supported.ui || (!this.config.invertTime && this.currentTime)) { return; } + // If duration is the 2**32 (shaka), Infinity (HLS), DASH-IF (Number.MAX_SAFE_INTEGER || Number.MAX_VALUE) indicating live we hide the currentTime and progressbar. + // https://github.com/video-dev/hls.js/blob/5820d29d3c4c8a46e8b75f1e3afa3e68c1a9a2db/src/controller/buffer-controller.js#L415 + // https://github.com/google/shaka-player/blob/4d889054631f4e1cf0fbd80ddd2b71887c02e232/lib/media/streaming_engine.js#L1062 + // https://github.com/Dash-Industry-Forum/dash.js/blob/69859f51b969645b234666800d4cb596d89c602d/src/dash/models/DashManifestModel.js#L338 + if (this.duration >= 2 ** 32) { + toggleHidden(this.elements.display.currentTime, true); + toggleHidden(this.elements.progress, true); + return; + } + + // Update ARIA values + if (is.element(this.elements.inputs.seek)) { + this.elements.inputs.seek.setAttribute('aria-valuemax', this.duration); + } + // If there's a spot to display duration - const hasDuration = utils.is.element(this.elements.display.duration); + const hasDuration = is.element(this.elements.display.duration); // If there's only one time display, display duration there if (!hasDuration && this.config.displayDuration && this.paused) { @@ -627,99 +788,79 @@ const controls = { }, // Hide/show a tab - toggleTab(setting, toggle) { - utils.toggleHidden(this.elements.settings.tabs[setting], !toggle); + toggleMenuButton(setting, toggle) { + toggleHidden(this.elements.settings.buttons[setting], !toggle); }, - // Set the quality menu - // TODO: Vimeo support - setQualityMenu(options) { - // Menu required - if (!utils.is.element(this.elements.settings.panes.quality)) { - return; - } - - const type = 'quality'; - const list = this.elements.settings.panes.quality.querySelector('ul'); + // Update the selected setting + updateSetting(setting, container, input) { + const pane = this.elements.settings.panels[setting]; + let value = null; + let list = container; - // Set options if passed and filter based on config - if (utils.is.array(options)) { - this.options.quality = options.filter(quality => this.config.quality.options.includes(quality)); - } + if (setting === 'captions') { + value = this.currentTrack; + } else { + value = !is.empty(input) ? input : this[setting]; - // Toggle the pane and tab - const toggle = !utils.is.empty(this.options.quality) && this.options.quality.length > 1; - controls.toggleTab.call(this, type, toggle); + // Get default + if (is.empty(value)) { + value = this.config[setting].default; + } - // Check if we need to toggle the parent - controls.checkMenu.call(this); + // Unsupported value + if (!is.empty(this.options[setting]) && !this.options[setting].includes(value)) { + this.debug.warn(`Unsupported value of '${value}' for ${setting}`); + return; + } - // If we're hiding, nothing more to do - if (!toggle) { - return; + // Disabled value + if (!this.config[setting].options.includes(value)) { + this.debug.warn(`Disabled value of '${value}' for ${setting}`); + return; + } } - // Empty the menu - utils.emptyElement(list); - - // Get the badge HTML for HD, 4K etc - const getBadge = quality => { - let label = ''; - - switch (quality) { - case 2160: - label = '4K'; - break; - - case 1440: - case 1080: - case 720: - label = 'HD'; - break; - - case 576: - case 480: - label = 'SD'; - break; - - default: - break; - } + // Get the list if we need to + if (!is.element(list)) { + list = pane && pane.querySelector('[role="menu"]'); + } - if (!label.length) { - return null; - } + // If there's no list it means it's not been rendered... + if (!is.element(list)) { + return; + } - return controls.createBadge.call(this, label); - }; + // Update the label + const label = this.elements.settings.buttons[setting].querySelector(`.${this.config.classNames.menu.value}`); + label.innerHTML = controls.getLabel.call(this, setting, value); - // Sort options by the config and then render options - this.options.quality - .sort((a, b) => { - const sorting = this.config.quality.options; - return sorting.indexOf(a) > sorting.indexOf(b) ? 1 : -1; - }) - .forEach(quality => { - const label = controls.getLabel.call(this, 'quality', quality); - controls.createMenuItem.call(this, quality, list, type, label, getBadge(quality)); - }); + // Find the radio option and check it + const target = list && list.querySelector(`[value="${value}"]`); - controls.updateSetting.call(this, type, list); + if (is.element(target)) { + target.checked = true; + } }, // Translate a value into a nice label - // TODO: Localisation getLabel(setting, value) { switch (setting) { case 'speed': return value === 1 ? i18n.get('normal', this.config) : `${value}×`; case 'quality': - if (utils.is.number(value)) { - return `${value}p`; + if (is.number(value)) { + const label = i18n.get(`qualityLabel.${value}`, this.config); + + if (!label.length) { + return `${value}p`; + } + + return label; } - return utils.toTitleCase(value); + return toTitleCase(value); case 'captions': return captions.getLabel.call(this); @@ -729,98 +870,93 @@ const controls = { } }, - // Update the selected setting - updateSetting(setting, container, input) { - const pane = this.elements.settings.panes[setting]; - let value = null; - let list = container; - - switch (setting) { - case 'captions': - if (this.captions.active) { - if (this.options.captions.length > 2 || !this.options.captions.some(lang => lang === 'enabled')) { - value = this.captions.language; - } else { - value = 'enabled'; - } - } else { - value = ''; - } + // Set the quality menu + setQualityMenu(options) { + // Menu required + if (!is.element(this.elements.settings.panels.quality)) { + return; + } - break; + const type = 'quality'; + const list = this.elements.settings.panels.quality.querySelector('[role="menu"]'); - default: - value = !utils.is.empty(input) ? input : this[setting]; + // Set options if passed and filter based on uniqueness and config + if (is.array(options)) { + this.options.quality = dedupe(options).filter(quality => this.config.quality.options.includes(quality)); + } - // Get default - if (utils.is.empty(value)) { - value = this.config[setting].default; - } + // Toggle the pane and tab + const toggle = !is.empty(this.options.quality) && this.options.quality.length > 1; + controls.toggleMenuButton.call(this, type, toggle); - // Unsupported value - if (!utils.is.empty(this.options[setting]) && !this.options[setting].includes(value)) { - this.debug.warn(`Unsupported value of '${value}' for ${setting}`); - return; - } + // Empty the menu + emptyElement(list); - // Disabled value - if (!this.config[setting].options.includes(value)) { - this.debug.warn(`Disabled value of '${value}' for ${setting}`); - return; - } + // Check if we need to toggle the parent + controls.checkMenu.call(this); - break; + // If we're hiding, nothing more to do + if (!toggle) { + return; } - // Get the list if we need to - if (!utils.is.element(list)) { - list = pane && pane.querySelector('ul'); - } + // Get the badge HTML for HD, 4K etc + const getBadge = quality => { + const label = i18n.get(`qualityBadge.${quality}`, this.config); - // If there's no list it means it's not been rendered... - if (!utils.is.element(list)) { - return; - } + if (!label.length) { + return null; + } - // Update the label - const label = this.elements.settings.tabs[setting].querySelector(`.${this.config.classNames.menu.value}`); - label.innerHTML = controls.getLabel.call(this, setting, value); + return controls.createBadge.call(this, label); + }; - // Find the radio option and check it - const target = list && list.querySelector(`input[value="${value}"]`); + // Sort options by the config and then render options + this.options.quality + .sort((a, b) => { + const sorting = this.config.quality.options; + return sorting.indexOf(a) > sorting.indexOf(b) ? 1 : -1; + }) + .forEach(quality => { + controls.createMenuItem.call(this, { + value: quality, + list, + type, + title: controls.getLabel.call(this, 'quality', quality), + badge: getBadge(quality), + }); + }); - if (utils.is.element(target)) { - target.checked = true; - } + controls.updateSetting.call(this, type, list); }, // Set the looping options /* setLoopMenu() { // Menu required - if (!utils.is.element(this.elements.settings.panes.loop)) { + if (!is.element(this.elements.settings.panels.loop)) { return; } const options = ['start', 'end', 'all', 'reset']; - const list = this.elements.settings.panes.loop.querySelector('ul'); + const list = this.elements.settings.panels.loop.querySelector('[role="menu"]'); // Show the pane and tab - utils.toggleHidden(this.elements.settings.tabs.loop, false); - utils.toggleHidden(this.elements.settings.panes.loop, false); + toggleHidden(this.elements.settings.buttons.loop, false); + toggleHidden(this.elements.settings.panels.loop, false); // Toggle the pane and tab - const toggle = !utils.is.empty(this.loop.options); - controls.toggleTab.call(this, 'loop', toggle); + const toggle = !is.empty(this.loop.options); + controls.toggleMenuButton.call(this, 'loop', toggle); // Empty the menu - utils.emptyElement(list); + emptyElement(list); options.forEach(option => { - const item = utils.createElement('li'); + const item = createElement('li'); - const button = utils.createElement( + const button = createElement( 'button', - utils.extend(utils.getAttributesFromSelector(this.config.selectors.buttons.loop), { + extend(getAttributesFromSelector(this.config.selectors.buttons.loop), { type: 'button', class: this.config.classNames.control, 'data-plyr-loop-action': option, @@ -843,16 +979,22 @@ const controls = { // Set a list of available captions languages setCaptionsMenu() { + // Menu required + if (!is.element(this.elements.settings.panels.captions)) { + return; + } + // TODO: Captions or language? Currently it's mixed const type = 'captions'; - const list = this.elements.settings.panes.captions.querySelector('ul'); + const list = this.elements.settings.panels.captions.querySelector('[role="menu"]'); + const tracks = captions.getTracks.call(this); + const toggle = Boolean(tracks.length); // Toggle the pane and tab - const toggle = captions.getTracks.call(this).length; - controls.toggleTab.call(this, type, toggle); + controls.toggleMenuButton.call(this, type, toggle); // Empty the menu - utils.emptyElement(list); + emptyElement(list); // Check if we need to toggle the parent controls.checkMenu.call(this); @@ -862,72 +1004,57 @@ const controls = { return; } - // Re-map the tracks into just the data we need - const tracks = captions.getTracks.call(this).map(track => ({ - language: !utils.is.empty(track.language) ? track.language : 'enabled', - label: captions.getLabel.call(this, track), + // Generate options data + const options = tracks.map((track, value) => ({ + value, + checked: this.captions.toggled && this.currentTrack === value, + title: captions.getLabel.call(this, track), + badge: track.language && controls.createBadge.call(this, track.language.toUpperCase()), + list, + type: 'language', })); // Add the "Disabled" option to turn off captions - tracks.unshift({ - language: '', - label: i18n.get('disabled', this.config), + options.unshift({ + value: -1, + checked: !this.captions.toggled, + title: i18n.get('disabled', this.config), + list, + type: 'language', }); // Generate options - tracks.forEach(track => { - controls.createMenuItem.call( - this, - track.language, - list, - 'language', - track.label, - track.language !== 'enabled' ? controls.createBadge.call(this, track.language.toUpperCase()) : null, - track.language.toLowerCase() === this.captions.language.toLowerCase(), - ); - }); - - // Store reference - this.options.captions = tracks.map(track => track.language); + options.forEach(controls.createMenuItem.bind(this)); controls.updateSetting.call(this, type, list); }, // Set a list of available captions languages setSpeedMenu(options) { - // Do nothing if not selected - if (!this.config.controls.includes('settings') || !this.config.settings.includes('speed')) { - return; - } - // Menu required - if (!utils.is.element(this.elements.settings.panes.speed)) { + if (!is.element(this.elements.settings.panels.speed)) { return; } const type = 'speed'; + const list = this.elements.settings.panels.speed.querySelector('[role="menu"]'); // Set the speed options - if (utils.is.array(options)) { + if (is.array(options)) { this.options.speed = options; } else if (this.isHTML5 || this.isVimeo) { - this.options.speed = [ - 0.5, - 0.75, - 1, - 1.25, - 1.5, - 1.75, - 2, - ]; + this.options.speed = [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2]; } // Set options if passed and filter based on config this.options.speed = this.options.speed.filter(speed => this.config.speed.options.includes(speed)); // Toggle the pane and tab - const toggle = !utils.is.empty(this.options.speed) && this.options.speed.length > 1; - controls.toggleTab.call(this, type, toggle); + const toggle = !is.empty(this.options.speed) && this.options.speed.length > 1; + controls.toggleMenuButton.call(this, type, toggle); + + // Empty the menu + emptyElement(list); // Check if we need to toggle the parent controls.checkMenu.call(this); @@ -937,16 +1064,14 @@ const controls = { return; } - // Get the list to populate - const list = this.elements.settings.panes.speed.querySelector('ul'); - - // Empty the menu - utils.emptyElement(list); - // Create items this.options.speed.forEach(speed => { - const label = controls.getLabel.call(this, 'speed', speed); - controls.createMenuItem.call(this, speed, list, type, label); + controls.createMenuItem.call(this, { + value: speed, + list, + type, + title: controls.getLabel.call(this, 'speed', speed), + }); }); controls.updateSetting.call(this, type, list); @@ -954,71 +1079,83 @@ const controls = { // Check if we need to hide/show the settings menu checkMenu() { - const { tabs } = this.elements.settings; - const visible = !utils.is.empty(tabs) && Object.values(tabs).some(tab => !tab.hidden); + const { buttons } = this.elements.settings; + const visible = !is.empty(buttons) && Object.values(buttons).some(button => !button.hidden); - utils.toggleHidden(this.elements.settings.menu, !visible); + toggleHidden(this.elements.settings.menu, !visible); + }, + + // Focus the first menu item in a given (or visible) menu + focusFirstMenuItem(pane, tabFocus = false) { + if (this.elements.settings.popup.hidden) { + return; + } + + let target = pane; + + if (!is.element(target)) { + target = Object.values(this.elements.settings.panels).find(pane => !pane.hidden); + } + + const firstItem = target.querySelector('[role^="menuitem"]'); + + setFocus.call(this, firstItem, tabFocus); }, // Show/hide menu - toggleMenu(event) { - const { form } = this.elements.settings; + toggleMenu(input) { + const { popup } = this.elements.settings; const button = this.elements.buttons.settings; // Menu and button are required - if (!utils.is.element(form) || !utils.is.element(button)) { + if (!is.element(popup) || !is.element(button)) { return; } - const show = utils.is.boolean(event) ? event : utils.is.element(form) && form.hasAttribute('hidden'); + // True toggle by default + const { hidden } = popup; + let show = hidden; - if (utils.is.event(event)) { - const isMenuItem = utils.is.element(form) && form.contains(event.target); - const isButton = event.target === this.elements.buttons.settings; + if (is.boolean(input)) { + show = input; + } else if (is.keyboardEvent(input) && input.which === 27) { + show = false; + } else if (is.event(input)) { + const isMenuItem = popup.contains(input.target); - // If the click was inside the form or if the click + // If the click was inside the menu or if the click // wasn't the button or menu item and we're trying to // show the menu (a doc click shouldn't show the menu) - if (isMenuItem || (!isMenuItem && !isButton && show)) { + if (isMenuItem || (!isMenuItem && input.target !== button && show)) { return; } - - // Prevent the toggle being caught by the doc listener - if (isButton) { - event.stopPropagation(); - } } - // Set form and button attributes - if (utils.is.element(button)) { - button.setAttribute('aria-expanded', show); - } + // Set button attributes + button.setAttribute('aria-expanded', show); - if (utils.is.element(form)) { - utils.toggleHidden(form, !show); - utils.toggleClass(this.elements.container, this.config.classNames.menu.open, show); + // Show the actual popup + toggleHidden(popup, !show); - if (show) { - form.removeAttribute('tabindex'); - } else { - form.setAttribute('tabindex', -1); - } + // Add class hook + toggleClass(this.elements.container, this.config.classNames.menu.open, show); + + // Focus the first item if key interaction + if (show && is.keyboardEvent(input)) { + controls.focusFirstMenuItem.call(this, null, true); + } else if (!show && !hidden) { + // If closing, re-focus the button + setFocus.call(this, button, is.keyboardEvent(input)); } }, - // Get the natural size of a tab - getTabSize(tab) { + // Get the natural size of a menu panel + getMenuSize(tab) { const clone = tab.cloneNode(true); clone.style.position = 'absolute'; clone.style.opacity = 0; clone.removeAttribute('hidden'); - // Prevent input's being unchecked due to the name being identical - Array.from(clone.querySelectorAll('input[name]')).forEach(input => { - const name = input.getAttribute('name'); - input.setAttribute('name', `${name}-clone`); - }); - // Append to parent so we get the "real" size tab.parentNode.appendChild(clone); @@ -1027,7 +1164,7 @@ const controls = { const height = clone.scrollHeight; // Remove from the DOM - utils.removeElement(clone); + removeElement(clone); return { width, @@ -1035,31 +1172,18 @@ const controls = { }; }, - // Toggle Menu - showTab(target = '') { - const { menu } = this.elements.settings; - const pane = document.getElementById(target); + // Show a panel in the menu + showMenuPanel(type = '', tabFocus = false) { + const target = document.getElementById(`plyr-settings-${this.id}-${type}`); // Nothing to show, bail - if (!utils.is.element(pane)) { + if (!is.element(target)) { return; } - // Are we targetting a tab? If not, bail - const isTab = pane.getAttribute('role') === 'tabpanel'; - if (!isTab) { - return; - } - - // Hide all other tabs - // Get other tabs - const current = menu.querySelector('[role="tabpanel"]:not([hidden])'); - const container = current.parentNode; - - // Set other toggles to be expanded false - Array.from(menu.querySelectorAll(`[aria-controls="${current.getAttribute('id')}"]`)).forEach(toggle => { - toggle.setAttribute('aria-expanded', false); - }); + // Hide all other panels + const container = target.parentNode; + const current = Array.from(container.children).find(node => !node.hidden); // If we can do fancy animations, we'll animate the height/width if (support.transitions && !support.reducedMotion) { @@ -1068,15 +1192,12 @@ const controls = { container.style.height = `${current.scrollHeight}px`; // Get potential sizes - const size = controls.getTabSize.call(this, pane); + const size = controls.getMenuSize.call(this, target); // Restore auto height/width - const restore = e => { + const restore = event => { // We're only bothered about height and width on the container - if (e.target !== container || ![ - 'width', - 'height', - ].includes(e.propertyName)) { + if (event.target !== container || !['width', 'height'].includes(event.propertyName)) { return; } @@ -1085,11 +1206,11 @@ const controls = { container.style.height = ''; // Only listen once - utils.off(container, utils.transitionEndEvent, restore); + off.call(this, container, transitionEndEvent, restore); }; // Listen for the transition finishing and restore auto height/width - utils.on(container, utils.transitionEndEvent, restore); + on.call(this, container, transitionEndEvent, restore); // Set dimensions to target container.style.width = `${size.width}px`; @@ -1097,32 +1218,33 @@ const controls = { } // Set attributes on current tab - utils.toggleHidden(current, true); - current.setAttribute('tabindex', -1); + toggleHidden(current, true); // Set attributes on target - utils.toggleHidden(pane, false); - - const tabs = utils.getElements.call(this, `[aria-controls="${target}"]`); - Array.from(tabs).forEach(tab => { - tab.setAttribute('aria-expanded', true); - }); - pane.removeAttribute('tabindex'); + toggleHidden(target, false); // Focus the first item - pane.querySelectorAll('button:not(:disabled), input:not(:disabled), [tabindex]')[0].focus(); + controls.focusFirstMenuItem.call(this, target, tabFocus); + }, + + // Set the download link + setDownloadLink() { + const button = this.elements.buttons.download; + + // Bail if no button + if (!is.element(button)) { + return; + } + + // Set download link + button.setAttribute('href', this.download); }, // Build the default HTML // TODO: Set order based on order in the config.controls array? create(data) { - // Do nothing if we want no controls - if (utils.is.empty(this.config.controls)) { - return null; - } - // Create the container - const container = utils.createElement('div', utils.getAttributesFromSelector(this.config.selectors.controls.wrapper)); + const container = createElement('div', getAttributesFromSelector(this.config.selectors.controls.wrapper)); // Restart button if (this.config.controls.includes('restart')) { @@ -1146,14 +1268,14 @@ const controls = { // Progress if (this.config.controls.includes('progress')) { - const progress = utils.createElement('div', utils.getAttributesFromSelector(this.config.selectors.progress)); + const progress = createElement('div', getAttributesFromSelector(this.config.selectors.progress)); // Seek range slider - const seek = controls.createRange.call(this, 'seek', { - id: `plyr-seek-${data.id}`, - }); - progress.appendChild(seek.label); - progress.appendChild(seek.input); + progress.appendChild( + controls.createRange.call(this, 'seek', { + id: `plyr-seek-${data.id}`, + }), + ); // Buffer progress progress.appendChild(controls.createProgress.call(this, 'buffer')); @@ -1162,10 +1284,9 @@ const controls = { // Seek tooltip if (this.config.tooltips.seek) { - const tooltip = utils.createElement( + const tooltip = createElement( 'span', { - role: 'tooltip', class: this.config.classNames.tooltip, }, '00:00', @@ -1189,36 +1310,39 @@ const controls = { container.appendChild(controls.createTime.call(this, 'duration')); } - // Toggle mute button - if (this.config.controls.includes('mute')) { - container.appendChild(controls.createButton.call(this, 'mute')); - } - - // Volume range control - if (this.config.controls.includes('volume')) { - const volume = utils.createElement('div', { + // Volume controls + if (this.config.controls.includes('mute') || this.config.controls.includes('volume')) { + const volume = createElement('div', { class: 'plyr__volume', }); - // Set the attributes - const attributes = { - max: 1, - step: 0.05, - value: this.config.volume, - }; + // Toggle mute button + if (this.config.controls.includes('mute')) { + volume.appendChild(controls.createButton.call(this, 'mute')); + } - // Create the volume range slider - const range = controls.createRange.call( - this, - 'volume', - utils.extend(attributes, { - id: `plyr-volume-${data.id}`, - }), - ); - volume.appendChild(range.label); - volume.appendChild(range.input); + // Volume range control + if (this.config.controls.includes('volume')) { + // Set the attributes + const attributes = { + max: 1, + step: 0.05, + value: this.config.volume, + }; + + // Create the volume range slider + volume.appendChild( + controls.createRange.call( + this, + 'volume', + extend(attributes, { + id: `plyr-volume-${data.id}`, + }), + ), + ); - this.elements.volume = volume; + this.elements.volume = volume; + } container.appendChild(volume); } @@ -1229,118 +1353,157 @@ const controls = { } // Settings button / menu - if (this.config.controls.includes('settings') && !utils.is.empty(this.config.settings)) { - const menu = utils.createElement('div', { + if (this.config.controls.includes('settings') && !is.empty(this.config.settings)) { + const control = createElement('div', { class: 'plyr__menu', hidden: '', }); - menu.appendChild( + control.appendChild( controls.createButton.call(this, 'settings', { - id: `plyr-settings-toggle-${data.id}`, 'aria-haspopup': true, 'aria-controls': `plyr-settings-${data.id}`, 'aria-expanded': false, }), ); - const form = utils.createElement('form', { + const popup = createElement('div', { class: 'plyr__menu__container', id: `plyr-settings-${data.id}`, hidden: '', - 'aria-labelled-by': `plyr-settings-toggle-${data.id}`, - role: 'tablist', - tabindex: -1, }); - const inner = utils.createElement('div'); + const inner = createElement('div'); - const home = utils.createElement('div', { + const home = createElement('div', { id: `plyr-settings-${data.id}-home`, - 'aria-labelled-by': `plyr-settings-toggle-${data.id}`, - role: 'tabpanel', }); - // Create the tab list - const tabs = utils.createElement('ul', { - role: 'tablist', + // Create the menu + const menu = createElement('div', { + role: 'menu', }); - // Build the tabs - this.config.settings.forEach(type => { - const tab = utils.createElement('li', { - role: 'tab', - hidden: '', - }); + home.appendChild(menu); + inner.appendChild(home); + this.elements.settings.panels.home = home; - const button = utils.createElement( + // Build the menu items + this.config.settings.forEach(type => { + // TODO: bundle this with the createMenuItem helper and bindings + const menuItem = createElement( 'button', - utils.extend(utils.getAttributesFromSelector(this.config.selectors.buttons.settings), { + extend(getAttributesFromSelector(this.config.selectors.buttons.settings), { type: 'button', class: `${this.config.classNames.control} ${this.config.classNames.control}--forward`, - id: `plyr-settings-${data.id}-${type}-tab`, + role: 'menuitem', 'aria-haspopup': true, - 'aria-controls': `plyr-settings-${data.id}-${type}`, - 'aria-expanded': false, + hidden: '', }), - i18n.get(type, this.config), ); - const value = utils.createElement('span', { + // Bind menu shortcuts for keyboard users + controls.bindMenuItemShortcuts.call(this, menuItem, type); + + // Show menu on click + on(menuItem, 'click', () => { + controls.showMenuPanel.call(this, type, false); + }); + + const flex = createElement('span', null, i18n.get(type, this.config)); + + const value = createElement('span', { class: this.config.classNames.menu.value, }); // Speed contains HTML entities value.innerHTML = data[type]; - button.appendChild(value); - tab.appendChild(button); - tabs.appendChild(tab); - - this.elements.settings.tabs[type] = tab; - }); + flex.appendChild(value); + menuItem.appendChild(flex); + menu.appendChild(menuItem); - home.appendChild(tabs); - inner.appendChild(home); - - // Build the panes - this.config.settings.forEach(type => { - const pane = utils.createElement('div', { + // Build the panes + const pane = createElement('div', { id: `plyr-settings-${data.id}-${type}`, hidden: '', - 'aria-labelled-by': `plyr-settings-${data.id}-${type}-tab`, - role: 'tabpanel', - tabindex: -1, }); - const back = utils.createElement( - 'button', - { - type: 'button', - class: `${this.config.classNames.control} ${this.config.classNames.control}--back`, - 'aria-haspopup': true, - 'aria-controls': `plyr-settings-${data.id}-home`, - 'aria-expanded': false, + // Back button + const backButton = createElement('button', { + type: 'button', + class: `${this.config.classNames.control} ${this.config.classNames.control}--back`, + }); + + // Visible label + backButton.appendChild( + createElement( + 'span', + { + 'aria-hidden': true, + }, + i18n.get(type, this.config), + ), + ); + + // Screen reader label + backButton.appendChild( + createElement( + 'span', + { + class: this.config.classNames.hidden, + }, + i18n.get('menuBack', this.config), + ), + ); + + // Go back via keyboard + on( + pane, + 'keydown', + event => { + // We only care about <- + if (event.which !== 37) { + return; + } + + // Prevent seek + event.preventDefault(); + event.stopPropagation(); + + // Show the respective menu + controls.showMenuPanel.call(this, 'home', true); }, - i18n.get(type, this.config), + false, ); - pane.appendChild(back); + // Go back via button click + on(backButton, 'click', () => { + controls.showMenuPanel.call(this, 'home', false); + }); - const options = utils.createElement('ul'); + // Add to pane + pane.appendChild(backButton); + + // Menu + pane.appendChild( + createElement('div', { + role: 'menu', + }), + ); - pane.appendChild(options); inner.appendChild(pane); - this.elements.settings.panes[type] = pane; + this.elements.settings.buttons[type] = menuItem; + this.elements.settings.panels[type] = pane; }); - form.appendChild(inner); - menu.appendChild(form); - container.appendChild(menu); + popup.appendChild(inner); + control.appendChild(popup); + container.appendChild(control); - this.elements.settings.form = form; - this.elements.settings.menu = menu; + this.elements.settings.popup = popup; + this.elements.settings.menu = control; } // Picture in picture button @@ -1353,6 +1516,26 @@ const controls = { container.appendChild(controls.createButton.call(this, 'airplay')); } + // Download button + if (this.config.controls.includes('download')) { + const attributes = { + element: 'a', + href: this.download, + target: '_blank', + }; + + const { download } = this.config.urls; + + if (!is.url(download) && this.isEmbed) { + extend(attributes, { + icon: `logo-${this.provider}`, + label: this.provider, + }); + } + + container.appendChild(controls.createButton.call(this, 'download', attributes)); + } + // Toggle fullscreen button if (this.config.controls.includes('fullscreen')) { container.appendChild(controls.createButton.call(this, 'fullscreen')); @@ -1365,6 +1548,7 @@ const controls = { this.elements.controls = container; + // Set available quality levels if (this.isHTML5) { controls.setQualityMenu.call(this, html5.getQualityOptions.call(this)); } @@ -1382,7 +1566,7 @@ const controls = { // Only load external sprite using AJAX if (icon.cors) { - utils.loadSprite(icon.url, 'sprite-plyr'); + loadSprite(icon.url, 'sprite-plyr'); } } @@ -1401,13 +1585,19 @@ const controls = { }; let update = true; - if (utils.is.string(this.config.controls) || utils.is.element(this.config.controls)) { - // String or HTMLElement passed as the option + // If function, run it and use output + if (is.function(this.config.controls)) { + this.config.controls = this.config.controls.call(this.props); + } + + // Convert falsy controls to empty array (primarily for empty strings) + if (!this.config.controls) { + this.config.controls = []; + } + + if (is.element(this.config.controls) || is.string(this.config.controls)) { + // HTMLElement or Non-empty string passed as the option container = this.config.controls; - } else if (utils.is.function(this.config.controls)) { - // A custom function to build controls - // The function can return a HTMLElement or String - container = this.config.controls.call(this, props); } else { // Create controls container = controls.create.call(this, { @@ -1426,11 +1616,8 @@ const controls = { const replace = input => { let result = input; - Object.entries(props).forEach(([ - key, - value, - ]) => { - result = utils.replaceAll(result, `{${key}}`, value); + Object.entries(props).forEach(([key, value]) => { + result = replaceAll(result, `{${key}}`, value); }); return result; @@ -1438,9 +1625,9 @@ const controls = { // Update markup if (update) { - if (utils.is.string(this.config.controls)) { + if (is.string(this.config.controls)) { container = replace(container); - } else if (utils.is.element(container)) { + } else if (is.element(container)) { container.innerHTML = replace(container.innerHTML); } } @@ -1449,49 +1636,65 @@ const controls = { let target; // Inject to custom location - if (utils.is.string(this.config.selectors.controls.container)) { + if (is.string(this.config.selectors.controls.container)) { target = document.querySelector(this.config.selectors.controls.container); } // Inject into the container by default - if (!utils.is.element(target)) { + if (!is.element(target)) { target = this.elements.container; } - // Inject controls HTML - if (utils.is.element(container)) { - target.appendChild(container); - } else if (container) { - target.insertAdjacentHTML('beforeend', container); - } + // Inject controls HTML (needs to be before captions, hence "afterbegin") + const insertMethod = is.element(container) ? 'insertAdjacentElement' : 'insertAdjacentHTML'; + target[insertMethod]('afterbegin', container); // Find the elements if need be - if (!utils.is.element(this.elements.controls)) { + if (!is.element(this.elements.controls)) { controls.findElements.call(this); } + // Add pressed property to buttons + if (!is.empty(this.elements.buttons)) { + const addProperty = button => { + const className = this.config.classNames.controlPressed; + Object.defineProperty(button, 'pressed', { + enumerable: true, + get() { + return hasClass(button, className); + }, + set(pressed = false) { + toggleClass(button, className, pressed); + }, + }); + }; + + // Toggle classname when pressed property is set + Object.values(this.elements.buttons) + .filter(Boolean) + .forEach(button => { + if (is.array(button) || is.nodeList(button)) { + Array.from(button).filter(Boolean).forEach(addProperty); + } else { + addProperty(button); + } + }); + } + // Edge sometimes doesn't finish the paint so force a redraw if (window.navigator.userAgent.includes('Edge')) { - utils.repaint(target); + repaint(target); } // Setup tooltips if (this.config.tooltips.controls) { - const labels = utils.getElements.call( - this, - [ - this.config.selectors.controls.wrapper, - ' ', - this.config.selectors.labels, - ' .', - this.config.classNames.hidden, - ].join(''), - ); + const { classNames, selectors } = this.config; + const selector = `${selectors.controls.wrapper} ${selectors.labels} .${classNames.hidden}`; + const labels = getElements.call(this, selector); Array.from(labels).forEach(label => { - utils.toggleClass(label, this.config.classNames.hidden, false); - utils.toggleClass(label, this.config.classNames.tooltip, true); - label.setAttribute('role', 'tooltip'); + toggleClass(label, this.config.classNames.hidden, false); + toggleClass(label, this.config.classNames.tooltip, true); }); } }, diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js index 000ba706..9c21b82a 100644 --- a/src/js/fullscreen.js +++ b/src/js/fullscreen.js @@ -1,11 +1,14 @@ // ========================================================================== // Fullscreen wrapper // https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API#prefixing +// https://webkit.org/blog/7929/designing-websites-for-iphone-x/ // ========================================================================== -import utils from './utils'; - -const browser = utils.getBrowser(); +import { repaint } from './utils/animation'; +import browser from './utils/browser'; +import { hasClass, toggleClass, trapFocus } from './utils/elements'; +import { on, triggerEvent } from './utils/events'; +import is from './utils/is'; function onChange() { if (!this.enabled) { @@ -14,16 +17,16 @@ function onChange() { // Update toggle button const button = this.player.elements.buttons.fullscreen; - if (utils.is.element(button)) { - utils.toggleState(button, this.active); + if (is.element(button)) { + button.pressed = this.active; } // Trigger an event - utils.dispatchEvent.call(this.player, this.target, this.active ? 'enterfullscreen' : 'exitfullscreen', true); + triggerEvent.call(this.player, this.target, this.active ? 'enterfullscreen' : 'exitfullscreen', true); // Trap focus in container if (!browser.isIos) { - utils.trapFocus.call(this.player, this.target, this.active); + trapFocus.call(this.player, this.target, this.active); } } @@ -42,7 +45,38 @@ function toggleFallback(toggle = false) { document.body.style.overflow = toggle ? 'hidden' : ''; // Toggle class hook - utils.toggleClass(this.target, this.player.config.classNames.fullscreen.fallback, toggle); + toggleClass(this.target, this.player.config.classNames.fullscreen.fallback, toggle); + + // Force full viewport on iPhone X+ + if (browser.isIos) { + let viewport = document.head.querySelector('meta[name="viewport"]'); + const property = 'viewport-fit=cover'; + + // Inject the viewport meta if required + if (!viewport) { + viewport = document.createElement('meta'); + viewport.setAttribute('name', 'viewport'); + } + + // Check if the property already exists + const hasProperty = is.string(viewport.content) && viewport.content.includes(property); + + if (toggle) { + this.cleanupViewport = !hasProperty; + + if (!hasProperty) { + viewport.content += `,${property}`; + } + } else if (this.cleanupViewport) { + viewport.content = viewport.content + .split(',') + .filter(part => part.trim() !== property) + .join(','); + } + + // Force a repaint as sometimes Safari doesn't want to fill the screen + setTimeout(() => repaint(this.target), 100); + } // Toggle button and fire events onChange.call(this); @@ -62,15 +96,20 @@ class Fullscreen { // Register event listeners // Handle event (incase user presses escape etc) - utils.on(document, this.prefix === 'ms' ? 'MSFullscreenChange' : `${this.prefix}fullscreenchange`, () => { - // TODO: Filter for target?? - onChange.call(this); - }); + on.call( + this.player, + document, + this.prefix === 'ms' ? 'MSFullscreenChange' : `${this.prefix}fullscreenchange`, + () => { + // TODO: Filter for target?? + onChange.call(this); + }, + ); // Fullscreen toggle on double click - utils.on(this.player.elements.container, 'dblclick', event => { + on.call(this.player, this.player.elements.container, 'dblclick', event => { // Ignore double click in controls - if (utils.is.element(this.player.elements.controls) && this.player.elements.controls.contains(event.target)) { + if (is.element(this.player.elements.controls) && this.player.elements.controls.contains(event.target)) { return; } @@ -83,26 +122,27 @@ class Fullscreen { // Determine if native supported static get native() { - return !!(document.fullscreenEnabled || document.webkitFullscreenEnabled || document.mozFullScreenEnabled || document.msFullscreenEnabled); + return !!( + document.fullscreenEnabled || + document.webkitFullscreenEnabled || + document.mozFullScreenEnabled || + document.msFullscreenEnabled + ); } // Get the prefix for handlers static get prefix() { // No prefix - if (utils.is.function(document.exitFullscreen)) { + if (is.function(document.exitFullscreen)) { return ''; } // Check for fullscreen support by vendor prefix let value = ''; - const prefixes = [ - 'webkit', - 'moz', - 'ms', - ]; + const prefixes = ['webkit', 'moz', 'ms']; prefixes.some(pre => { - if (utils.is.function(document[`${pre}ExitFullscreen`]) || utils.is.function(document[`${pre}CancelFullScreen`])) { + if (is.function(document[`${pre}ExitFullscreen`]) || is.function(document[`${pre}CancelFullScreen`])) { value = pre; return true; } @@ -135,7 +175,7 @@ class Fullscreen { // Fallback using classname if (!Fullscreen.native) { - return utils.hasClass(this.target, this.player.config.classNames.fullscreen.fallback); + return hasClass(this.target, this.player.config.classNames.fullscreen.fallback); } const element = !this.prefix ? document.fullscreenElement : document[`${this.prefix}${this.property}Element`]; @@ -145,7 +185,9 @@ class Fullscreen { // Get target element get target() { - return browser.isIos && this.player.config.fullscreen.iosNative ? this.player.media : this.player.elements.container; + return browser.isIos && this.player.config.fullscreen.iosNative + ? this.player.media + : this.player.elements.container; } // Update UI @@ -157,7 +199,7 @@ class Fullscreen { } // Add styling hook to show button - utils.toggleClass(this.player.elements.container, this.player.config.classNames.fullscreen.enabled, this.enabled); + toggleClass(this.player.elements.container, this.player.config.classNames.fullscreen.enabled, this.enabled); } // Make an element fullscreen @@ -168,14 +210,12 @@ class Fullscreen { // iOS native fullscreen doesn't need the request step if (browser.isIos && this.player.config.fullscreen.iosNative) { - if (this.player.playing) { - this.target.webkitEnterFullscreen(); - } + this.target.webkitEnterFullscreen(); } else if (!Fullscreen.native) { toggleFallback.call(this, true); } else if (!this.prefix) { this.target.requestFullscreen(); - } else if (!utils.is.empty(this.prefix)) { + } else if (!is.empty(this.prefix)) { this.target[`${this.prefix}Request${this.property}`](); } } @@ -194,7 +234,7 @@ class Fullscreen { toggleFallback.call(this, false); } else if (!this.prefix) { (document.cancelFullScreen || document.exitFullscreen).call(document); - } else if (!utils.is.empty(this.prefix)) { + } else if (!is.empty(this.prefix)) { const action = this.prefix === 'moz' ? 'Cancel' : 'Exit'; document[`${this.prefix}${action}${this.property}`](); } diff --git a/src/js/html5.js b/src/js/html5.js index 3818a441..0876211a 100644 --- a/src/js/html5.js +++ b/src/js/html5.js @@ -3,40 +3,28 @@ // ========================================================================== import support from './support'; -import utils from './utils'; +import { removeElement } from './utils/elements'; +import { triggerEvent } from './utils/events'; const html5 = { getSources() { if (!this.isHTML5) { - return null; + return []; } - return this.media.querySelectorAll('source'); + const sources = Array.from(this.media.querySelectorAll('source')); + + // Filter out unsupported sources + return sources.filter(source => support.mime.call(this, source.getAttribute('type'))); }, // Get quality levels getQualityOptions() { - if (!this.isHTML5) { - return null; - } - - // Get sources - const sources = html5.getSources.call(this); - - if (utils.is.empty(sources)) { - return null; - } - - // Get <source> with size attribute - const sizes = Array.from(sources).filter(source => !utils.is.empty(source.getAttribute('size'))); - - // If none, bail - if (utils.is.empty(sizes)) { - return null; - } - - // Reduce to unique list - return utils.dedupe(sizes.map(source => Number(source.getAttribute('size')))); + // Get sizes from <source> elements + return html5.getSources + .call(this) + .map(source => Number(source.getAttribute('size'))) + .filter(Boolean); }, extend() { @@ -51,67 +39,47 @@ const html5 = { get() { // Get sources const sources = html5.getSources.call(player); + const source = sources.find(source => source.getAttribute('src') === player.source); - if (utils.is.empty(sources)) { - return null; - } - - const matches = Array.from(sources).filter(source => source.getAttribute('src') === player.source); - - if (utils.is.empty(matches)) { - return null; - } - - return Number(matches[0].getAttribute('size')); + // Return size, if match is found + return source && Number(source.getAttribute('size')); }, set(input) { // Get sources const sources = html5.getSources.call(player); - if (utils.is.empty(sources)) { - return; - } - - // Get matches for requested size - const matches = Array.from(sources).filter(source => Number(source.getAttribute('size')) === input); - - // No matches for requested size - if (utils.is.empty(matches)) { - return; - } - - // Get supported sources - const supported = matches.filter(source => support.mime.call(player, source.getAttribute('type'))); + // Get first match for requested size + const source = sources.find(source => Number(source.getAttribute('size')) === input); - // No supported sources - if (utils.is.empty(supported)) { + // No matching source found + if (!source) { return; } - // Trigger change event - utils.dispatchEvent.call(player, player.media, 'qualityrequested', false, { - quality: input, - }); - // Get current state - const { currentTime, playing } = player; + const { currentTime, paused, preload, readyState } = player.media; // Set new source - player.media.src = supported[0].getAttribute('src'); - - // Load new source - player.media.load(); - - // Resume playing - if (playing) { - player.play(); + player.media.src = source.getAttribute('src'); + + // Prevent loading if preload="none" and the current source isn't loaded (#1044) + if (preload !== 'none' || readyState) { + // Restore time + player.once('loadedmetadata', () => { + player.currentTime = currentTime; + + // Resume playing + if (!paused) { + player.play(); + } + }); + + // Load new source + player.media.load(); } - // Restore time - player.currentTime = currentTime; - // Trigger change event - utils.dispatchEvent.call(player, player.media, 'qualitychange', false, { + triggerEvent.call(player, player.media, 'qualitychange', false, { quality: input, }); }, @@ -126,7 +94,7 @@ const html5 = { } // Remove child sources - utils.removeElement(html5.getSources()); + removeElement(html5.getSources.call(this)); // Set blank video src attribute // This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error diff --git a/src/js/i18n.js b/src/js/i18n.js deleted file mode 100644 index 58c3e7cf..00000000 --- a/src/js/i18n.js +++ /dev/null @@ -1,31 +0,0 @@ -// ========================================================================== -// Plyr internationalization -// ========================================================================== - -import utils from './utils'; - -const i18n = { - get(key = '', config = {}) { - if (utils.is.empty(key) || utils.is.empty(config) || !Object.keys(config.i18n).includes(key)) { - return ''; - } - - let string = config.i18n[key]; - - const replace = { - '{seektime}': config.seekTime, - '{title}': config.title, - }; - - Object.entries(replace).forEach(([ - key, - value, - ]) => { - string = utils.replaceAll(string, key, value); - }); - - return string; - }, -}; - -export default i18n; diff --git a/src/js/listeners.js b/src/js/listeners.js index 86236fe3..dd6e2adb 100644 --- a/src/js/listeners.js +++ b/src/js/listeners.js @@ -4,23 +4,29 @@ import controls from './controls'; import ui from './ui'; -import utils from './utils'; - -// Sniff out the browser -const browser = utils.getBrowser(); +import { repaint } from './utils/animation'; +import browser from './utils/browser'; +import { getElement, getElements, matches, toggleClass, toggleHidden } from './utils/elements'; +import { on, once, toggleListener, triggerEvent } from './utils/events'; +import is from './utils/is'; class Listeners { constructor(player) { this.player = player; this.lastKey = null; + this.focusTimer = null; + this.lastKeyDown = null; this.handleKey = this.handleKey.bind(this); this.toggleMenu = this.toggleMenu.bind(this); + this.setTabFocus = this.setTabFocus.bind(this); this.firstTouch = this.firstTouch.bind(this); } // Handle key presses handleKey(event) { + const { player } = this; + const { elements } = player; const code = event.keyCode ? event.keyCode : event.which; const pressed = event.type === 'keydown'; const repeat = pressed && code === this.lastKey; @@ -32,52 +38,39 @@ class Listeners { // If the event is bubbled from the media element // Firefox doesn't get the keycode for whatever reason - if (!utils.is.number(code)) { + if (!is.number(code)) { return; } // Seek by the number keys const seekByKey = () => { // Divide the max duration into 10th's and times by the number value - this.player.currentTime = this.player.duration / 10 * (code - 48); + player.currentTime = (player.duration / 10) * (code - 48); }; // Handle the key on keydown // Reset on keyup if (pressed) { - // Which keycodes should we prevent default - const preventDefault = [ - 48, - 49, - 50, - 51, - 52, - 53, - 54, - 56, - 57, - 32, - 75, - 38, - 40, - 77, - 39, - 37, - 70, - 67, - 73, - 76, - 79, - ]; - // Check focused element // and if the focused element is not editable (e.g. text input) // and any that accept key input http://webaim.org/techniques/keyboard/ - const focused = utils.getFocusElement(); - if (utils.is.element(focused) && utils.matches(focused, this.player.config.selectors.editable)) { - return; + const focused = document.activeElement; + if (is.element(focused)) { + const { editable } = player.config.selectors; + const { seek } = elements.inputs; + + if (focused !== seek && matches(focused, editable)) { + return; + } + + if (event.which === 32 && matches(focused, 'button, [role^="menuitem"]')) { + return; + } } + // Which keycodes should we prevent default + const preventDefault = [32, 37, 38, 39, 40, 48, 49, 50, 51, 52, 53, 54, 56, 57, 67, 70, 73, 75, 76, 77, 79]; + // If the code is found prevent default (e.g. prevent scrolling for arrows) if (preventDefault.includes(code)) { event.preventDefault(); @@ -105,55 +98,55 @@ class Listeners { case 75: // Space and K key if (!repeat) { - this.player.togglePlay(); + player.togglePlay(); } break; case 38: // Arrow up - this.player.increaseVolume(0.1); + player.increaseVolume(0.1); break; case 40: // Arrow down - this.player.decreaseVolume(0.1); + player.decreaseVolume(0.1); break; case 77: // M key if (!repeat) { - this.player.muted = !this.player.muted; + player.muted = !player.muted; } break; case 39: // Arrow forward - this.player.forward(); + player.forward(); break; case 37: // Arrow back - this.player.rewind(); + player.rewind(); break; case 70: // F key - this.player.fullscreen.toggle(); + player.fullscreen.toggle(); break; case 67: // C key if (!repeat) { - this.player.toggleCaptions(); + player.toggleCaptions(); } break; case 76: // L key - this.player.loop = !this.player.loop; + player.loop = !player.loop; break; - /* case 73: + /* case 73: this.setLoop('start'); break; @@ -171,8 +164,8 @@ class Listeners { // Escape is handle natively when in full screen // So we only need to worry about non native - if (!this.player.fullscreen.enabled && this.player.fullscreen.active && code === 27) { - this.player.fullscreen.toggle(); + if (!player.fullscreen.enabled && player.fullscreen.active && code === 27) { + player.fullscreen.toggle(); } // Store last code for next cycle @@ -189,169 +182,223 @@ class Listeners { // Device is touch enabled firstTouch() { - this.player.touch = true; + const { player } = this; + const { elements } = player; + + player.touch = true; // Add touch class - utils.toggleClass(this.player.elements.container, this.player.config.classNames.isTouch, true); + toggleClass(elements.container, player.config.classNames.isTouch, true); + } + + setTabFocus(event) { + const { player } = this; + const { elements } = player; - // Clean up - utils.off(document.body, 'touchstart', this.firstTouch); + clearTimeout(this.focusTimer); + + // Ignore any key other than tab + if (event.type === 'keydown' && event.which !== 9) { + return; + } + + // Store reference to event timeStamp + if (event.type === 'keydown') { + this.lastKeyDown = event.timeStamp; + } + + // Remove current classes + const removeCurrent = () => { + const className = player.config.classNames.tabFocus; + const current = getElements.call(player, `.${className}`); + toggleClass(current, className, false); + }; + + // Determine if a key was pressed to trigger this event + const wasKeyDown = event.timeStamp - this.lastKeyDown <= 20; + + // Ignore focus events if a key was pressed prior + if (event.type === 'focus' && !wasKeyDown) { + return; + } + + // Remove all current + removeCurrent(); + + // Delay the adding of classname until the focus has changed + // This event fires before the focusin event + this.focusTimer = setTimeout(() => { + const focused = document.activeElement; + + // Ignore if current focus element isn't inside the player + if (!elements.container.contains(focused)) { + return; + } + + toggleClass(document.activeElement, player.config.classNames.tabFocus, true); + }, 10); } // Global window & document listeners global(toggle = true) { + const { player } = this; + // Keyboard shortcuts - if (this.player.config.keyboard.global) { - utils.toggleListener(window, 'keydown keyup', this.handleKey, toggle, false); + if (player.config.keyboard.global) { + toggleListener.call(player, window, 'keydown keyup', this.handleKey, toggle, false); } // Click anywhere closes menu - utils.toggleListener(document.body, 'click', this.toggleMenu, toggle); + toggleListener.call(player, document.body, 'click', this.toggleMenu, toggle); // Detect touch by events - utils.on(document.body, 'touchstart', this.firstTouch); + once.call(player, document.body, 'touchstart', this.firstTouch); + + // Tab focus detection + toggleListener.call(player, document.body, 'keydown focus blur', this.setTabFocus, toggle, false, true); } // Container listeners container() { + const { player } = this; + const { elements } = player; + // Keyboard shortcuts - if (!this.player.config.keyboard.global && this.player.config.keyboard.focused) { - utils.on(this.player.elements.container, 'keydown keyup', this.handleKey, false); + if (!player.config.keyboard.global && player.config.keyboard.focused) { + on.call(player, elements.container, 'keydown keyup', this.handleKey, false); } - // Detect tab focus - // Remove class on blur/focusout - utils.on(this.player.elements.container, 'focusout', event => { - utils.toggleClass(event.target, this.player.config.classNames.tabFocus, false); - }); - - // Add classname to tabbed elements - utils.on(this.player.elements.container, '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(() => { - utils.toggleClass(utils.getFocusElement(), this.player.config.classNames.tabFocus, true); - }, 0); - }); - // Toggle controls on mouse events and entering fullscreen - utils.on(this.player.elements.container, 'mousemove mouseleave touchstart touchmove enterfullscreen exitfullscreen', event => { - const { controls } = this.player.elements; + on.call( + player, + elements.container, + 'mousemove mouseleave touchstart touchmove enterfullscreen exitfullscreen', + event => { + const { controls } = elements; - // Remove button states for fullscreen - if (event.type === 'enterfullscreen') { - controls.pressed = false; - controls.hover = false; - } + // Remove button states for fullscreen + if (controls && event.type === 'enterfullscreen') { + controls.pressed = false; + controls.hover = false; + } - // Show, then hide after a timeout unless another control event occurs - const show = [ - 'touchstart', - 'touchmove', - 'mousemove', - ].includes(event.type); + // Show, then hide after a timeout unless another control event occurs + const show = ['touchstart', 'touchmove', 'mousemove'].includes(event.type); - let delay = 0; + let delay = 0; - if (show) { - ui.toggleControls.call(this.player, true); - // Use longer timeout for touch devices - delay = this.player.touch ? 3000 : 2000; - } + if (show) { + ui.toggleControls.call(player, true); + // Use longer timeout for touch devices + delay = player.touch ? 3000 : 2000; + } - // Clear timer - clearTimeout(this.player.timers.controls); - // Timer to prevent flicker when seeking - this.player.timers.controls = setTimeout(() => ui.toggleControls.call(this.player, false), delay); - }); + // Clear timer + clearTimeout(player.timers.controls); + + // Set new timer to prevent flicker when seeking + player.timers.controls = setTimeout(() => ui.toggleControls.call(player, false), delay); + }, + ); } // Listen for media events media() { + const { player } = this; + const { elements } = player; + // Time change on media - utils.on(this.player.media, 'timeupdate seeking seeked', event => controls.timeUpdate.call(this.player, event)); + on.call(player, player.media, 'timeupdate seeking seeked', event => controls.timeUpdate.call(player, event)); // Display duration - utils.on(this.player.media, 'durationchange loadeddata loadedmetadata', event => controls.durationUpdate.call(this.player, event)); + on.call(player, player.media, 'durationchange loadeddata loadedmetadata', event => + controls.durationUpdate.call(player, event), + ); // Check for audio tracks on load // We can't use `loadedmetadata` as it doesn't seem to have audio tracks at that point - utils.on(this.player.media, 'loadeddata', () => { - utils.toggleHidden(this.player.elements.volume, !this.player.hasAudio); - utils.toggleHidden(this.player.elements.buttons.mute, !this.player.hasAudio); + on.call(player, player.media, 'canplay loadeddata', () => { + toggleHidden(elements.volume, !player.hasAudio); + toggleHidden(elements.buttons.mute, !player.hasAudio); }); // Handle the media finishing - utils.on(this.player.media, 'ended', () => { + on.call(player, player.media, 'ended', () => { // Show poster on end - if (this.player.isHTML5 && this.player.isVideo && this.player.config.resetOnEnd) { + if (player.isHTML5 && player.isVideo && player.config.resetOnEnd) { // Restart - this.player.restart(); + player.restart(); } }); // Check for buffer progress - utils.on(this.player.media, 'progress playing seeking seeked', event => controls.updateProgress.call(this.player, event)); + on.call(player, player.media, 'progress playing seeking seeked', event => + controls.updateProgress.call(player, event), + ); // Handle volume changes - utils.on(this.player.media, 'volumechange', event => controls.updateVolume.call(this.player, event)); + on.call(player, player.media, 'volumechange', event => controls.updateVolume.call(player, event)); // Handle play/pause - utils.on(this.player.media, 'playing play pause ended emptied timeupdate', event => ui.checkPlaying.call(this.player, event)); + on.call(player, player.media, 'playing play pause ended emptied timeupdate', event => + ui.checkPlaying.call(player, event), + ); // Loading state - utils.on(this.player.media, 'waiting canplay seeked playing', event => ui.checkLoading.call(this.player, event)); + on.call(player, player.media, 'waiting canplay seeked playing', event => ui.checkLoading.call(player, event)); // If autoplay, then load advertisement if required // TODO: Show some sort of loading state while the ad manager loads else there's a delay before ad shows - utils.on(this.player.media, 'playing', () => { - if (!this.player.ads) { + on.call(player, player.media, 'playing', () => { + if (!player.ads) { return; } // If ads are enabled, wait for them first - if (this.player.ads.enabled && !this.player.ads.initialized) { + if (player.ads.enabled && !player.ads.initialized) { // Wait for manager response - this.player.ads.managerPromise.then(() => this.player.ads.play()).catch(() => this.player.play()); + player.ads.managerPromise.then(() => player.ads.play()).catch(() => player.play()); } }); // Click video - if (this.player.supported.ui && this.player.config.clickToPlay && !this.player.isAudio) { + if (player.supported.ui && player.config.clickToPlay && !player.isAudio) { // Re-fetch the wrapper - const wrapper = utils.getElement.call(this.player, `.${this.player.config.classNames.video}`); + const wrapper = getElement.call(player, `.${player.config.classNames.video}`); // Bail if there's no wrapper (this should never happen) - if (!utils.is.element(wrapper)) { + if (!is.element(wrapper)) { return; } - // On click play, pause ore restart - utils.on(wrapper, 'click', () => { - // Touch devices will just show controls (if we're hiding controls) - if (this.player.config.hideControls && this.player.touch && !this.player.paused) { + // On click play, pause or restart + on.call(player, elements.container, 'click', event => { + const targets = [elements.container, wrapper]; + + // Ignore if click if not container or in video wrapper + if (!targets.includes(event.target) && !wrapper.contains(event.target)) { return; } - if (this.player.paused) { - this.player.play(); - } else if (this.player.ended) { - this.player.restart(); - this.player.play(); + // Touch devices will just show controls (if hidden) + if (player.touch && player.config.hideControls) { + return; + } + + if (player.ended) { + player.restart(); + player.play(); } else { - this.player.pause(); + player.togglePlay(); } }); } // Disable right click - if (this.player.supported.ui && this.player.config.disableContextMenu) { - utils.on( - this.player.elements.wrapper, + if (player.supported.ui && player.config.disableContextMenu) { + on.call( + player, + elements.wrapper, 'contextmenu', event => { event.preventDefault(); @@ -361,228 +408,248 @@ class Listeners { } // Volume change - utils.on(this.player.media, 'volumechange', () => { + on.call(player, player.media, 'volumechange', () => { // Save to storage - this.player.storage.set({ volume: this.player.volume, muted: this.player.muted }); + player.storage.set({ + volume: player.volume, + muted: player.muted, + }); }); // Speed change - utils.on(this.player.media, 'ratechange', () => { + on.call(player, player.media, 'ratechange', () => { // Update UI - controls.updateSetting.call(this.player, 'speed'); + controls.updateSetting.call(player, 'speed'); // Save to storage - this.player.storage.set({ speed: this.player.speed }); - }); - - // Quality request - utils.on(this.player.media, 'qualityrequested', event => { - // Save to storage - this.player.storage.set({ quality: event.detail.quality }); + player.storage.set({ speed: player.speed }); }); // Quality change - utils.on(this.player.media, 'qualitychange', event => { + on.call(player, player.media, 'qualitychange', event => { // Update UI - controls.updateSetting.call(this.player, 'quality', null, event.detail.quality); + controls.updateSetting.call(player, 'quality', null, event.detail.quality); }); - // Caption language change - utils.on(this.player.media, 'languagechange', () => { - // Update UI - controls.updateSetting.call(this.player, 'captions'); - - // Save to storage - this.player.storage.set({ language: this.player.language }); - }); - - // Captions toggle - utils.on(this.player.media, 'captionsenabled captionsdisabled', () => { - // Update UI - controls.updateSetting.call(this.player, 'captions'); - - // Save to storage - this.player.storage.set({ captions: this.player.captions.active }); + // Update download link when ready and if quality changes + on.call(player, player.media, 'ready qualitychange', () => { + controls.setDownloadLink.call(player); }); // Proxy events to container // Bubble up key events for Edge - utils.on(this.player.media, this.player.config.events.concat([ - 'keyup', - 'keydown', - ]).join(' '), event => { - let detail = {}; + const proxyEvents = player.config.events.concat(['keyup', 'keydown']).join(' '); + + on.call(player, player.media, proxyEvents, event => { + let { detail = {} } = event; // Get error details from media if (event.type === 'error') { - detail = this.player.media.error; + detail = player.media.error; } - utils.dispatchEvent.call(this.player, this.player.elements.container, event.type, true, detail); + triggerEvent.call(player, elements.container, event.type, true, detail); }); } - // Listen for control events - controls() { - // IE doesn't support input event, so we fallback to change - const inputEvent = browser.isIE ? 'change' : 'input'; + // Run default and custom handlers + proxy(event, defaultHandler, customHandlerKey) { + const { player } = this; + const customHandler = player.config.listeners[customHandlerKey]; + const hasCustomHandler = is.function(customHandler); + let returned = true; - // Run default and custom handlers - const proxy = (event, defaultHandler, customHandlerKey) => { - const customHandler = this.player.config.listeners[customHandlerKey]; - const hasCustomHandler = utils.is.function(customHandler); - let returned = true; + // Execute custom handler + if (hasCustomHandler) { + returned = customHandler.call(player, event); + } - // Execute custom handler - if (hasCustomHandler) { - returned = customHandler.call(this.player, event); - } + // Only call default handler if not prevented in custom handler + if (returned && is.function(defaultHandler)) { + defaultHandler.call(player, event); + } + } - // Only call default handler if not prevented in custom handler - if (returned && utils.is.function(defaultHandler)) { - defaultHandler.call(this.player, event); - } - }; + // Trigger custom and default handlers + bind(element, type, defaultHandler, customHandlerKey, passive = true) { + const { player } = this; + const customHandler = player.config.listeners[customHandlerKey]; + const hasCustomHandler = is.function(customHandler); + + on.call( + player, + element, + type, + event => this.proxy(event, defaultHandler, customHandlerKey), + passive && !hasCustomHandler, + ); + } - // Trigger custom and default handlers - const on = (element, type, defaultHandler, customHandlerKey, passive = true) => { - const customHandler = this.player.config.listeners[customHandlerKey]; - const hasCustomHandler = utils.is.function(customHandler); + // Listen for control events + controls() { + const { player } = this; + const { elements } = player; - utils.on(element, type, event => proxy(event, defaultHandler, customHandlerKey), passive && !hasCustomHandler); - }; + // IE doesn't support input event, so we fallback to change + const inputEvent = browser.isIE ? 'change' : 'input'; // Play/pause toggle - on(this.player.elements.buttons.play, 'click', this.player.togglePlay, 'play'); + if (elements.buttons.play) { + Array.from(elements.buttons.play).forEach(button => { + this.bind(button, 'click', player.togglePlay, 'play'); + }); + } // Pause - on(this.player.elements.buttons.restart, 'click', this.player.restart, 'restart'); + this.bind(elements.buttons.restart, 'click', player.restart, 'restart'); // Rewind - on(this.player.elements.buttons.rewind, 'click', this.player.rewind, 'rewind'); + this.bind(elements.buttons.rewind, 'click', player.rewind, 'rewind'); // Rewind - on(this.player.elements.buttons.fastForward, 'click', this.player.forward, 'fastForward'); + this.bind(elements.buttons.fastForward, 'click', player.forward, 'fastForward'); // Mute toggle - on( - this.player.elements.buttons.mute, + this.bind( + elements.buttons.mute, 'click', () => { - this.player.muted = !this.player.muted; + player.muted = !player.muted; }, 'mute', ); // Captions toggle - on(this.player.elements.buttons.captions, 'click', this.player.toggleCaptions); + this.bind(elements.buttons.captions, 'click', () => player.toggleCaptions()); + + // Download + this.bind( + elements.buttons.download, + 'click', + () => { + triggerEvent.call(player, player.media, 'download'); + }, + 'download', + ); // Fullscreen toggle - on( - this.player.elements.buttons.fullscreen, + this.bind( + elements.buttons.fullscreen, 'click', () => { - this.player.fullscreen.toggle(); + player.fullscreen.toggle(); }, 'fullscreen', ); // Picture-in-Picture - on( - this.player.elements.buttons.pip, + this.bind( + elements.buttons.pip, 'click', () => { - this.player.pip = 'toggle'; + player.pip = 'toggle'; }, 'pip', ); // Airplay - on(this.player.elements.buttons.airplay, 'click', this.player.airplay, 'airplay'); + this.bind(elements.buttons.airplay, 'click', player.airplay, 'airplay'); + + // Settings menu - click toggle + this.bind(elements.buttons.settings, 'click', event => { + // Prevent the document click listener closing the menu + event.stopPropagation(); - // Settings menu - on(this.player.elements.buttons.settings, 'click', event => { - controls.toggleMenu.call(this.player, event); + controls.toggleMenu.call(player, event); }); - // Settings menu - on(this.player.elements.settings.form, 'click', event => { - event.stopPropagation(); + // Settings menu - keyboard toggle + // We have to bind to keyup otherwise Firefox triggers a click when a keydown event handler shifts focus + // https://bugzilla.mozilla.org/show_bug.cgi?id=1220143 + this.bind( + elements.buttons.settings, + 'keyup', + event => { + const code = event.which; + + // We only care about space and return + if (![13, 32].includes(code)) { + return; + } + + // Because return triggers a click anyway, all we need to do is set focus + if (code === 13) { + controls.focusFirstMenuItem.call(player, null, true); + return; + } + + // Prevent scroll + event.preventDefault(); + + // Prevent playing video (Firefox) + event.stopPropagation(); - // Go back to home tab on click - const showHomeTab = () => { - const id = `plyr-settings-${this.player.id}-home`; - controls.showTab.call(this.player, id); - }; - - // Settings menu items - use event delegation as items are added/removed - if (utils.matches(event.target, this.player.config.selectors.inputs.language)) { - proxy( - event, - () => { - this.player.language = event.target.value; - showHomeTab(); - }, - 'language', - ); - } else if (utils.matches(event.target, this.player.config.selectors.inputs.quality)) { - proxy( - event, - () => { - this.player.quality = event.target.value; - showHomeTab(); - }, - 'quality', - ); - } else if (utils.matches(event.target, this.player.config.selectors.inputs.speed)) { - proxy( - event, - () => { - this.player.speed = parseFloat(event.target.value); - showHomeTab(); - }, - 'speed', - ); - } else { - const tab = event.target; - controls.showTab.call(this.player, tab.getAttribute('aria-controls')); + // Toggle menu + controls.toggleMenu.call(player, event); + }, + null, + false, // Can't be passive as we're preventing default + ); + + // Escape closes menu + this.bind(elements.settings.menu, 'keydown', event => { + if (event.which === 27) { + controls.toggleMenu.call(player, event); } }); // Set range input alternative "value", which matches the tooltip time (#954) - on(this.player.elements.inputs.seek, 'mousedown mousemove', event => { - const clientRect = this.player.elements.progress.getBoundingClientRect(); - const percent = 100 / clientRect.width * (event.pageX - clientRect.left); + this.bind(elements.inputs.seek, 'mousedown mousemove', event => { + const rect = elements.progress.getBoundingClientRect(); + const percent = (100 / rect.width) * (event.pageX - rect.left); event.currentTarget.setAttribute('seek-value', percent); }); // Pause while seeking - on(this.player.elements.inputs.seek, 'mousedown mouseup keydown keyup touchstart touchend', event => { + this.bind(elements.inputs.seek, 'mousedown mouseup keydown keyup touchstart touchend', event => { const seek = event.currentTarget; + const code = event.keyCode ? event.keyCode : event.which; + const attribute = 'play-on-seeked'; + + if (is.keyboardEvent(event) && (code !== 39 && code !== 37)) { + return; + } + + // Record seek time so we can prevent hiding controls for a few seconds after seek + player.lastSeekTime = Date.now(); // Was playing before? - const play = seek.hasAttribute('play-on-seeked'); + const play = seek.hasAttribute(attribute); // Done seeking - const done = [ - 'mouseup', - 'touchend', - 'keyup', - ].includes(event.type); + const done = ['mouseup', 'touchend', 'keyup'].includes(event.type); // If we're done seeking and it was playing, resume playback if (play && done) { - seek.removeAttribute('play-on-seeked'); - this.player.play(); - } else if (!done && this.player.playing) { - seek.setAttribute('play-on-seeked', ''); - this.player.pause(); + seek.removeAttribute(attribute); + player.play(); + } else if (!done && player.playing) { + seek.setAttribute(attribute, ''); + player.pause(); } }); + // Fix range inputs on iOS + // Super weird iOS bug where after you interact with an <input type="range">, + // it takes over further interactions on the page. This is a hack + if (browser.isIos) { + const inputs = getElements.call(player, 'input[type="range"]'); + Array.from(inputs).forEach(input => this.bind(input, inputEvent, event => repaint(event.target))); + } + // Seek - on( - this.player.elements.inputs.seek, + this.bind( + elements.inputs.seek, inputEvent, event => { const seek = event.currentTarget; @@ -590,127 +657,110 @@ class Listeners { // If it exists, use seek-value instead of "value" for consistency with tooltip time (#954) let seekTo = seek.getAttribute('seek-value'); - if (utils.is.empty(seekTo)) { + if (is.empty(seekTo)) { seekTo = seek.value; } seek.removeAttribute('seek-value'); - this.player.currentTime = seekTo / seek.max * this.player.duration; + player.currentTime = (seekTo / seek.max) * player.duration; }, 'seek', ); + // Seek tooltip + this.bind(elements.progress, 'mouseenter mouseleave mousemove', event => + controls.updateSeekTooltip.call(player, event), + ); + + // Polyfill for lower fill in <input type="range"> for webkit + if (browser.isWebkit) { + Array.from(getElements.call(player, 'input[type="range"]')).forEach(element => { + this.bind(element, 'input', event => controls.updateRangeFill.call(player, event.target)); + }); + } + // Current time invert // Only if one time element is used for both currentTime and duration - if (this.player.config.toggleInvert && !utils.is.element(this.player.elements.display.duration)) { - on(this.player.elements.display.currentTime, 'click', () => { + if (player.config.toggleInvert && !is.element(elements.display.duration)) { + this.bind(elements.display.currentTime, 'click', () => { // Do nothing if we're at the start - if (this.player.currentTime === 0) { + if (player.currentTime === 0) { return; } - this.player.config.invertTime = !this.player.config.invertTime; + player.config.invertTime = !player.config.invertTime; - controls.timeUpdate.call(this.player); + controls.timeUpdate.call(player); }); } // Volume - on( - this.player.elements.inputs.volume, + this.bind( + elements.inputs.volume, inputEvent, event => { - this.player.volume = event.target.value; + player.volume = event.target.value; }, 'volume', ); - // Polyfill for lower fill in <input type="range"> for webkit - if (browser.isWebkit) { - on(utils.getElements.call(this.player, 'input[type="range"]'), 'input', event => { - controls.updateRangeFill.call(this.player, event.target); - }); - } - - // Seek tooltip - on(this.player.elements.progress, 'mouseenter mouseleave mousemove', event => controls.updateSeekTooltip.call(this.player, event)); - // Update controls.hover state (used for ui.toggleControls to avoid hiding when interacting) - on(this.player.elements.controls, 'mouseenter mouseleave', event => { - this.player.elements.controls.hover = !this.player.touch && event.type === 'mouseenter'; + this.bind(elements.controls, 'mouseenter mouseleave', event => { + elements.controls.hover = !player.touch && event.type === 'mouseenter'; }); // Update controls.pressed state (used for ui.toggleControls to avoid hiding when interacting) - on(this.player.elements.controls, 'mousedown mouseup touchstart touchend touchcancel', event => { - this.player.elements.controls.pressed = [ - 'mousedown', - 'touchstart', - ].includes(event.type); + this.bind(elements.controls, 'mousedown mouseup touchstart touchend touchcancel', event => { + elements.controls.pressed = ['mousedown', 'touchstart'].includes(event.type); }); - // Focus in/out on controls - on(this.player.elements.controls, 'focusin focusout', event => { - const { config, elements, timers } = this.player; + // Show controls when they receive focus (e.g., when using keyboard tab key) + this.bind(elements.controls, 'focusin', () => { + const { config, elements, timers } = player; // Skip transition to prevent focus from scrolling the parent element - utils.toggleClass(elements.controls, config.classNames.noTransition, event.type === 'focusin'); + toggleClass(elements.controls, config.classNames.noTransition, true); // Toggle - ui.toggleControls.call(this.player, event.type === 'focusin'); + ui.toggleControls.call(player, true); - // If focusin, hide again after delay - if (event.type === 'focusin') { - // Restore transition - setTimeout(() => { - utils.toggleClass(elements.controls, config.classNames.noTransition, false); - }, 0); + // Restore transition + setTimeout(() => { + toggleClass(elements.controls, config.classNames.noTransition, false); + }, 0); - // Delay a little more for keyboard users - const delay = this.touch ? 3000 : 4000; + // Delay a little more for mouse users + const delay = this.touch ? 3000 : 4000; - // Clear timer - clearTimeout(timers.controls); - // Hide - timers.controls = setTimeout(() => ui.toggleControls.call(this.player, false), delay); - } + // Clear timer + clearTimeout(timers.controls); + + // Hide again after delay + timers.controls = setTimeout(() => ui.toggleControls.call(player, false), delay); }); // Mouse wheel for volume - on( - this.player.elements.inputs.volume, + this.bind( + elements.inputs.volume, 'wheel', event => { // Detect "natural" scroll - suppored on OS X Safari only // Other browsers on OS X will be inverted until support improves const inverted = event.webkitDirectionInvertedFromDevice; - const step = 1 / 50; - let direction = 0; - - // Scroll down (or up on natural) to decrease - if (event.deltaY < 0 || event.deltaX > 0) { - if (inverted) { - this.player.decreaseVolume(step); - direction = -1; - } else { - this.player.increaseVolume(step); - direction = 1; - } - } - // Scroll up (or down on natural) to increase - if (event.deltaY > 0 || event.deltaX < 0) { - if (inverted) { - this.player.increaseVolume(step); - direction = 1; - } else { - this.player.decreaseVolume(step); - direction = -1; - } - } + // 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); + + // Change the volume by 2% + player.increaseVolume(direction / 50); // Don't break page scrolling at max and min - if ((direction === 1 && this.player.media.volume < 1) || (direction === -1 && this.player.media.volume > 0)) { + const { volume } = player.media; + if ((direction === 1 && volume < 1) || (direction === -1 && volume > 0)) { event.preventDefault(); } }, @@ -718,11 +768,6 @@ class Listeners { false, ); } - - // Reset on destroy - clear() { - this.global(false); - } } export default Listeners; diff --git a/src/js/media.js b/src/js/media.js index f10bea1f..eb37d441 100644 --- a/src/js/media.js +++ b/src/js/media.js @@ -5,7 +5,7 @@ import html5 from './html5'; import vimeo from './plugins/vimeo'; import youtube from './plugins/youtube'; -import utils from './utils'; +import { createElement, toggleClass, wrap } from './utils/elements'; const media = { // Setup media @@ -17,50 +17,41 @@ const media = { } // Add type class - utils.toggleClass(this.elements.container, this.config.classNames.type.replace('{0}', this.type), true); + toggleClass(this.elements.container, this.config.classNames.type.replace('{0}', this.type), true); // Add provider class - utils.toggleClass(this.elements.container, this.config.classNames.provider.replace('{0}', this.provider), true); + toggleClass(this.elements.container, this.config.classNames.provider.replace('{0}', this.provider), true); // Add video class for embeds // This will require changes if audio embeds are added if (this.isEmbed) { - utils.toggleClass(this.elements.container, this.config.classNames.type.replace('{0}', 'video'), true); + toggleClass(this.elements.container, this.config.classNames.type.replace('{0}', 'video'), true); } // Inject the player wrapper if (this.isVideo) { // Create the wrapper div - this.elements.wrapper = utils.createElement('div', { + this.elements.wrapper = createElement('div', { class: this.config.classNames.video, }); // Wrap the video in a container - utils.wrap(this.media, this.elements.wrapper); + wrap(this.media, this.elements.wrapper); // Faux poster container - this.elements.poster = utils.createElement('div', { + this.elements.poster = createElement('div', { class: this.config.classNames.poster, }); this.elements.wrapper.appendChild(this.elements.poster); } - if (this.isEmbed) { - switch (this.provider) { - case 'youtube': - youtube.setup.call(this); - break; - - case 'vimeo': - vimeo.setup.call(this); - break; - - default: - break; - } - } else if (this.isHTML5) { + if (this.isHTML5) { html5.extend.call(this); + } else if (this.isYouTube) { + youtube.setup.call(this); + } else if (this.isVimeo) { + vimeo.setup.call(this); } }, }; diff --git a/src/js/plugins/ads.js b/src/js/plugins/ads.js index 0246e221..375fdc13 100644 --- a/src/js/plugins/ads.js +++ b/src/js/plugins/ads.js @@ -6,8 +6,13 @@ /* global google */ -import i18n from '../i18n'; -import utils from '../utils'; +import { createElement } from '../utils/elements'; +import { triggerEvent } from '../utils/events'; +import i18n from '../utils/i18n'; +import is from '../utils/is'; +import loadScript from '../utils/loadScript'; +import { formatTime } from '../utils/time'; +import { buildUrlParams } from '../utils/urls'; class Ads { /** @@ -44,7 +49,9 @@ class Ads { } get enabled() { - return this.player.isVideo && this.player.config.ads.enabled && !utils.is.empty(this.publisherId); + return ( + this.player.isHTML5 && this.player.isVideo && this.player.config.ads.enabled && !is.empty(this.publisherId) + ); } /** @@ -53,9 +60,8 @@ class Ads { load() { if (this.enabled) { // Check if the Google IMA3 SDK is loaded or load it ourselves - if (!utils.is.object(window.google) || !utils.is.object(window.google.ima)) { - utils - .loadScript(this.player.config.urls.googleIMA.sdk) + if (!is.object(window.google) || !is.object(window.google.ima)) { + loadScript(this.player.config.urls.googleIMA.sdk) .then(() => { this.ready(); }) @@ -94,7 +100,7 @@ class Ads { const params = { AV_PUBLISHERID: '58c25bb0073ef448b1087ad6', AV_CHANNELID: '5a0458dc28a06145e4519d21', - AV_URL: location.hostname, + AV_URL: window.location.hostname, cb: Date.now(), AV_WIDTH: 640, AV_HEIGHT: 480, @@ -103,7 +109,7 @@ class Ads { const base = 'https://go.aniview.com/api/adserver6/vast/'; - return `${base}?${utils.buildUrlParams(params)}`; + return `${base}?${buildUrlParams(params)}`; } /** @@ -116,7 +122,7 @@ class Ads { */ setupIMA() { // Create the container for our advertisements - this.elements.container = utils.createElement('div', { + this.elements.container = createElement('div', { class: this.player.config.classNames.ads, }); this.player.elements.container.appendChild(this.elements.container); @@ -146,7 +152,11 @@ class Ads { this.loader = new google.ima.AdsLoader(this.elements.displayContainer); // Listen and respond to ads loaded and error events - this.loader.addEventListener(google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, event => this.onAdsManagerLoaded(event), false); + this.loader.addEventListener( + google.ima.AdsManagerLoadedEvent.Type.ADS_MANAGER_LOADED, + event => this.onAdsManagerLoaded(event), + false, + ); this.loader.addEventListener(google.ima.AdErrorEvent.Type.AD_ERROR, error => this.onAdError(error), false); // Request video ads @@ -184,7 +194,7 @@ class Ads { } const update = () => { - const time = utils.formatTime(Math.max(this.manager.getRemainingTime(), 0)); + const time = formatTime(Math.max(this.manager.getRemainingTime(), 0)); const label = `${i18n.get('advertisement', this.player.config)} - ${time}`; this.elements.container.setAttribute('data-badge-text', label); }; @@ -197,6 +207,11 @@ class Ads { * @param {Event} adsManagerLoadedEvent */ onAdsManagerLoaded(event) { + // Load could occur after a source change (race condition) + if (!this.enabled) { + return; + } + // Get the ads manager const settings = new google.ima.AdsRenderingSettings(); @@ -212,14 +227,14 @@ class Ads { this.cuePoints = this.manager.getCuePoints(); // Add advertisement cue's within the time line if available - if (!utils.is.empty(this.cuePoints)) { + if (!is.empty(this.cuePoints)) { this.cuePoints.forEach(cuePoint => { if (cuePoint !== 0 && cuePoint !== -1 && cuePoint < this.player.duration) { const seekElement = this.player.elements.progress; - if (utils.is.element(seekElement)) { + if (is.element(seekElement)) { const cuePercentage = 100 / this.player.duration * cuePoint; - const cue = utils.createElement('span', { + const cue = createElement('span', { class: this.player.config.classNames.cues, }); @@ -230,10 +245,6 @@ class Ads { }); } - // Get skippable state - // TODO: Skip button - // this.player.debug.warn(this.manager.getAdSkippableState()); - // Set volume to match player this.manager.setVolume(this.player.volume); @@ -266,7 +277,7 @@ class Ads { // Proxy event const dispatchEvent = type => { const event = `ads${type.replace(/_/g, '').toLowerCase()}`; - utils.dispatchEvent.call(this.player, this.player.media, event); + triggerEvent.call(this.player, this.player.media, event); }; switch (event.type) { @@ -393,7 +404,7 @@ class Ads { this.player.on('seeked', () => { const seekedTime = this.player.currentTime; - if (utils.is.empty(this.cuePoints)) { + if (is.empty(this.cuePoints)) { return; } @@ -530,9 +541,9 @@ class Ads { trigger(event, ...args) { const handlers = this.events[event]; - if (utils.is.array(handlers)) { + if (is.array(handlers)) { handlers.forEach(handler => { - if (utils.is.function(handler)) { + if (is.function(handler)) { handler.apply(this, args); } }); @@ -546,7 +557,7 @@ class Ads { * @return {Ads} */ on(event, callback) { - if (!utils.is.array(this.events[event])) { + if (!is.array(this.events[event])) { this.events[event] = []; } @@ -577,7 +588,7 @@ class Ads { * @param {string} from */ clearSafetyTimer(from) { - if (!utils.is.nullOrUndefined(this.safetyTimer)) { + if (!is.nullOrUndefined(this.safetyTimer)) { this.player.debug.log(`Safety timer cleared from: ${from}`); clearTimeout(this.safetyTimer); diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 46d4f3f9..2d9ba6e2 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -2,31 +2,60 @@ // Vimeo plugin // ========================================================================== -import captions from './../captions'; -import controls from './../controls'; -import ui from './../ui'; -import utils from './../utils'; +import captions from '../captions'; +import controls from '../controls'; +import ui from '../ui'; +import { createElement, replaceElement, toggleClass } from '../utils/elements'; +import { triggerEvent } from '../utils/events'; +import fetch from '../utils/fetch'; +import is from '../utils/is'; +import loadScript from '../utils/loadScript'; +import { format, stripHTML } from '../utils/strings'; +import { buildUrlParams } from '../utils/urls'; + +// Parse Vimeo ID from URL +function parseId(url) { + if (is.empty(url)) { + return null; + } + + if (is.number(Number(url))) { + return url; + } + + const regex = /^.*(vimeo.com\/|video\/)(\d+).*/; + return url.match(regex) ? RegExp.$2 : url; +} + +// Get aspect ratio for dimensions +function getAspectRatio(width, height) { + const getRatio = (w, h) => (h === 0 ? w : getRatio(h, w % h)); + const ratio = getRatio(width, height); + return `${width / ratio}:${height / ratio}`; +} // Set playback state and trigger change (only on actual change) function assurePlaybackState(play) { + if (play && !this.embed.hasPlayed) { + this.embed.hasPlayed = true; + } if (this.media.paused === play) { this.media.paused = !play; - utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause'); + triggerEvent.call(this, this.media, play ? 'play' : 'pause'); } } const vimeo = { setup() { // Add embed class for responsive - utils.toggleClass(this.elements.wrapper, this.config.classNames.embed, true); + toggleClass(this.elements.wrapper, this.config.classNames.embed, true); // Set intial ratio vimeo.setAspectRatio.call(this); // Load the API if not already - if (!utils.is.object(window.Vimeo)) { - utils - .loadScript(this.config.urls.vimeo.sdk) + if (!is.object(window.Vimeo)) { + loadScript(this.config.urls.vimeo.sdk) .then(() => { vimeo.ready.call(this); }) @@ -41,8 +70,9 @@ const vimeo = { // Set aspect ratio // For Vimeo we have an extra 300% height <div> to hide the standard controls and UI setAspectRatio(input) { - const ratio = utils.is.string(input) ? input.split(':') : this.config.ratio.split(':'); - const padding = 100 / ratio[0] * ratio[1]; + const [x, y] = (is.string(input) ? input : this.config.ratio).split(':').map(Number); + const padding = (100 / x) * y; + vimeo.padding = padding; this.elements.wrapper.style.paddingBottom = `${padding}%`; if (this.supported.ui) { @@ -70,34 +100,37 @@ const vimeo = { gesture: 'media', playsinline: !this.config.fullscreen.iosNative, }; - const params = utils.buildUrlParams(options); + const params = buildUrlParams(options); // Get the source URL or ID let source = player.media.getAttribute('src'); // Get from <div> if needed - if (utils.is.empty(source)) { + if (is.empty(source)) { source = player.media.getAttribute(player.config.attributes.embed.id); } - const id = utils.parseVimeoId(source); + const id = parseId(source); // Build an iframe - const iframe = utils.createElement('iframe'); - const src = utils.format(player.config.urls.vimeo.iframe, id, params); + const iframe = createElement('iframe'); + const src = format(player.config.urls.vimeo.iframe, id, params); iframe.setAttribute('src', src); iframe.setAttribute('allowfullscreen', ''); iframe.setAttribute('allowtransparency', ''); iframe.setAttribute('allow', 'autoplay'); + // Get poster, if already set + const { poster } = player; + // Inject the package - const wrapper = utils.createElement('div', { class: player.config.classNames.embedContainer }); + const wrapper = createElement('div', { poster, class: player.config.classNames.embedContainer }); wrapper.appendChild(iframe); - player.media = utils.replaceElement(wrapper, player.media); + player.media = replaceElement(wrapper, player.media); // Get poster image - utils.fetch(utils.format(player.config.urls.vimeo.api, id), 'json').then(response => { - if (utils.is.empty(response)) { + fetch(format(player.config.urls.vimeo.api, id), 'json').then(response => { + if (is.empty(response)) { return; } @@ -108,7 +141,7 @@ const vimeo = { url.pathname = `${url.pathname.split('_')[0]}.jpg`; // Set and show poster - ui.setPoster.call(player, url.href); + ui.setPoster.call(player, url.href).catch(() => {}); }); // Setup instance @@ -153,19 +186,20 @@ const vimeo = { // Get current paused state and volume etc const { embed, media, paused, volume } = player; + const restorePause = paused && !embed.hasPlayed; // Set seeking state and trigger event media.seeking = true; - utils.dispatchEvent.call(player, media, 'seeking'); + triggerEvent.call(player, media, 'seeking'); // If paused, mute until seek is complete - Promise.resolve(paused && embed.setVolume(0)) + Promise.resolve(restorePause && embed.setVolume(0)) // Seek .then(() => embed.setCurrentTime(time)) // Restore paused - .then(() => paused && embed.pause()) + .then(() => restorePause && embed.pause()) // Restore volume - .then(() => paused && embed.setVolume(volume)) + .then(() => restorePause && embed.setVolume(volume)) .catch(() => { // Do nothing }); @@ -183,7 +217,7 @@ const vimeo = { .setPlaybackRate(input) .then(() => { speed = input; - utils.dispatchEvent.call(player, player.media, 'ratechange'); + triggerEvent.call(player, player.media, 'ratechange'); }) .catch(error => { // Hide menu item (and menu if empty) @@ -203,7 +237,7 @@ const vimeo = { set(input) { player.embed.setVolume(input).then(() => { volume = input; - utils.dispatchEvent.call(player, player.media, 'volumechange'); + triggerEvent.call(player, player.media, 'volumechange'); }); }, }); @@ -215,11 +249,11 @@ const vimeo = { return muted; }, set(input) { - const toggle = utils.is.boolean(input) ? input : false; + const toggle = is.boolean(input) ? input : false; player.embed.setVolume(toggle ? 0 : player.config.volume).then(() => { muted = toggle; - utils.dispatchEvent.call(player, player.media, 'volumechange'); + triggerEvent.call(player, player.media, 'volumechange'); }); }, }); @@ -231,7 +265,7 @@ const vimeo = { return loop; }, set(input) { - const toggle = utils.is.boolean(input) ? input : player.config.loop.active; + const toggle = is.boolean(input) ? input : player.config.loop.active; player.embed.setLoop(toggle).then(() => { loop = toggle; @@ -245,6 +279,7 @@ const vimeo = { .getVideoUrl() .then(value => { currentSrc = value; + controls.setDownloadLink.call(player); }) .catch(error => { this.debug.warn(error); @@ -264,12 +299,9 @@ const vimeo = { }); // Set aspect ratio based on video size - Promise.all([ - player.embed.getVideoWidth(), - player.embed.getVideoHeight(), - ]).then(dimensions => { - const ratio = utils.getAspectRatio(dimensions[0], dimensions[1]); - vimeo.setAspectRatio.call(this, ratio); + Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => { + vimeo.ratio = getAspectRatio(dimensions[0], dimensions[1]); + vimeo.setAspectRatio.call(this, vimeo.ratio); }); // Set autopause @@ -286,13 +318,13 @@ const vimeo = { // Get current time player.embed.getCurrentTime().then(value => { currentTime = value; - utils.dispatchEvent.call(player, player.media, 'timeupdate'); + triggerEvent.call(player, player.media, 'timeupdate'); }); // Get duration player.embed.getDuration().then(value => { player.media.duration = value; - utils.dispatchEvent.call(player, player.media, 'durationchange'); + triggerEvent.call(player, player.media, 'durationchange'); }); // Get captions @@ -301,18 +333,21 @@ const vimeo = { captions.setup.call(player); }); - player.embed.on('cuechange', data => { - let cue = null; - - if (data.cues.length) { - cue = utils.stripHTML(data.cues[0].text); - } - - captions.setText.call(player, cue); + player.embed.on('cuechange', ({ cues = [] }) => { + const strippedCues = cues.map(cue => stripHTML(cue.text)); + captions.updateCues.call(player, strippedCues); }); player.embed.on('loaded', () => { - if (utils.is.element(player.embed.element) && player.supported.ui) { + // Assure state and events are updated on autoplay + player.embed.getPaused().then(paused => { + assurePlaybackState.call(player, !paused); + if (!paused) { + triggerEvent.call(player, player.media, 'playing'); + } + }); + + if (is.element(player.embed.element) && player.supported.ui) { const frame = player.embed.element; // Fix keyboard focus issues @@ -323,7 +358,7 @@ const vimeo = { player.embed.on('play', () => { assurePlaybackState.call(player, true); - utils.dispatchEvent.call(player, player.media, 'playing'); + triggerEvent.call(player, player.media, 'playing'); }); player.embed.on('pause', () => { @@ -333,16 +368,16 @@ const vimeo = { player.embed.on('timeupdate', data => { player.media.seeking = false; currentTime = data.seconds; - utils.dispatchEvent.call(player, player.media, 'timeupdate'); + triggerEvent.call(player, player.media, 'timeupdate'); }); player.embed.on('progress', data => { player.media.buffered = data.percent; - utils.dispatchEvent.call(player, player.media, 'progress'); + triggerEvent.call(player, player.media, 'progress'); // Check all loaded if (parseInt(data.percent, 10) === 1) { - utils.dispatchEvent.call(player, player.media, 'canplaythrough'); + triggerEvent.call(player, player.media, 'canplaythrough'); } // Get duration as if we do it before load, it gives an incorrect value @@ -350,24 +385,40 @@ const vimeo = { player.embed.getDuration().then(value => { if (value !== player.media.duration) { player.media.duration = value; - utils.dispatchEvent.call(player, player.media, 'durationchange'); + triggerEvent.call(player, player.media, 'durationchange'); } }); }); player.embed.on('seeked', () => { player.media.seeking = false; - utils.dispatchEvent.call(player, player.media, 'seeked'); + triggerEvent.call(player, player.media, 'seeked'); }); player.embed.on('ended', () => { player.media.paused = true; - utils.dispatchEvent.call(player, player.media, 'ended'); + triggerEvent.call(player, player.media, 'ended'); }); player.embed.on('error', detail => { player.media.error = detail; - utils.dispatchEvent.call(player, player.media, 'error'); + triggerEvent.call(player, player.media, 'error'); + }); + + // Set height/width on fullscreen + player.on('enterfullscreen exitfullscreen', event => { + const { target } = player.fullscreen; + + // Ignore for iOS native + if (target !== player.elements.container) { + return; + } + + const toggle = event.type === 'enterfullscreen'; + const [x, y] = vimeo.ratio.split(':').map(Number); + const dimension = x > y ? 'width' : 'height'; + + target.style[dimension] = toggle ? `${vimeo.padding}%` : null; }); // Rebuild UI diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index 67b8093e..73175c14 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -2,90 +2,50 @@ // YouTube plugin // ========================================================================== -import controls from './../controls'; -import ui from './../ui'; -import utils from './../utils'; - -// Standardise YouTube quality unit -function mapQualityUnit(input) { - switch (input) { - case 'hd2160': - return 2160; - - case 2160: - return 'hd2160'; - - case 'hd1440': - return 1440; - - case 1440: - return 'hd1440'; - - case 'hd1080': - return 1080; - - case 1080: - return 'hd1080'; - - case 'hd720': - return 720; - - case 720: - return 'hd720'; - - case 'large': - return 480; - - case 480: - return 'large'; - - case 'medium': - return 360; - - case 360: - return 'medium'; - - case 'small': - return 240; - - case 240: - return 'small'; - - default: - return 'default'; - } -} - -function mapQualityUnits(levels) { - if (utils.is.empty(levels)) { - return levels; +import ui from '../ui'; +import { createElement, replaceElement, toggleClass } from '../utils/elements'; +import { triggerEvent } from '../utils/events'; +import fetch from '../utils/fetch'; +import is from '../utils/is'; +import loadImage from '../utils/loadImage'; +import loadScript from '../utils/loadScript'; +import { format, generateId } from '../utils/strings'; + +// Parse YouTube ID from URL +function parseId(url) { + if (is.empty(url)) { + return null; } - return utils.dedupe(levels.map(level => mapQualityUnit(level))); + const regex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/; + return url.match(regex) ? RegExp.$2 : url; } // Set playback state and trigger change (only on actual change) function assurePlaybackState(play) { + if (play && !this.embed.hasPlayed) { + this.embed.hasPlayed = true; + } if (this.media.paused === play) { this.media.paused = !play; - utils.dispatchEvent.call(this, this.media, play ? 'play' : 'pause'); + triggerEvent.call(this, this.media, play ? 'play' : 'pause'); } } const youtube = { setup() { // Add embed class for responsive - utils.toggleClass(this.elements.wrapper, this.config.classNames.embed, true); + toggleClass(this.elements.wrapper, this.config.classNames.embed, true); // Set aspect ratio youtube.setAspectRatio.call(this); // Setup API - if (utils.is.object(window.YT) && utils.is.function(window.YT.Player)) { + if (is.object(window.YT) && is.function(window.YT.Player)) { youtube.ready.call(this); } else { // Load the API - utils.loadScript(this.config.urls.youtube.sdk).catch(error => { + loadScript(this.config.urls.youtube.sdk).catch(error => { this.debug.warn('YouTube API failed to load', error); }); @@ -112,10 +72,10 @@ const youtube = { // Try via undocumented API method first // This method disappears now and then though... // https://github.com/sampotts/plyr/issues/709 - if (utils.is.function(this.embed.getVideoData)) { + if (is.function(this.embed.getVideoData)) { const { title } = this.embed.getVideoData(); - if (utils.is.empty(title)) { + if (is.empty(title)) { this.config.title = title; ui.setTitle.call(this); return; @@ -124,13 +84,12 @@ const youtube = { // Or via Google API const key = this.config.keys.google; - if (utils.is.string(key) && !utils.is.empty(key)) { - const url = utils.format(this.config.urls.youtube.api, videoId, key); + if (is.string(key) && !is.empty(key)) { + const url = format(this.config.urls.youtube.api, videoId, key); - utils - .fetch(url) + fetch(url) .then(result => { - if (utils.is.object(result)) { + if (is.object(result)) { this.config.title = result.items[0].snippet.title; ui.setTitle.call(this); } @@ -151,7 +110,7 @@ const youtube = { // Ignore already setup (race condition) const currentId = player.media.getAttribute('id'); - if (!utils.is.empty(currentId) && currentId.startsWith('youtube-')) { + if (!is.empty(currentId) && currentId.startsWith('youtube-')) { return; } @@ -159,30 +118,36 @@ const youtube = { let source = player.media.getAttribute('src'); // Get from <div> if needed - if (utils.is.empty(source)) { + if (is.empty(source)) { source = player.media.getAttribute(this.config.attributes.embed.id); } // Replace the <iframe> with a <div> due to YouTube API issues - const videoId = utils.parseYouTubeId(source); - const id = utils.generateId(player.provider); - const container = utils.createElement('div', { id }); - player.media = utils.replaceElement(container, player.media); + 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); - // Set poster image + // Id to poster wrapper const posterSrc = format => `https://img.youtube.com/vi/${videoId}/${format}default.jpg`; // Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide) - utils.loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded - .catch(() => utils.loadImage(posterSrc('sd'), 121)) // 480p padded 4:3 - .catch(() => utils.loadImage(posterSrc('hq'))) // 360p padded 4:3. Always exists + 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 => { // If the image is padded, use background-size "cover" instead (like youtube does too with their posters) if (!posterSrc.includes('maxres')) { player.elements.poster.style.backgroundSize = 'cover'; } - }); + }) + .catch(() => {}); // Setup instance // https://developers.google.com/youtube/iframe_api_reference @@ -190,6 +155,7 @@ const youtube = { videoId, playerVars: { autoplay: player.config.autoplay ? 1 : 0, // Autoplay + hl: player.config.hl, // iframe interface language controls: player.supported.ui ? 0 : 1, // Only show controls if not fully supported rel: 0, // No related vids showinfo: 0, // Hide info @@ -208,51 +174,23 @@ const youtube = { }, events: { onError(event) { - // If we've already fired an error, don't do it again - // YouTube fires onError twice - if (utils.is.object(player.media.error)) { - return; + // YouTube may fire onError twice, so only handle it once + if (!player.media.error) { + const code = event.data; + // Messages copied from https://developers.google.com/youtube/iframe_api_reference#onError + const message = + { + 2: 'The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks.', + 5: 'The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred.', + 100: 'The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.', + 101: 'The owner of the requested video does not allow it to be played in embedded players.', + 150: 'The owner of the requested video does not allow it to be played in embedded players.', + }[code] || 'An unknown error occured'; + + player.media.error = { code, message }; + + triggerEvent.call(player, player.media, 'error'); } - - const detail = { - code: event.data, - }; - - // Messages copied from https://developers.google.com/youtube/iframe_api_reference#onError - switch (event.data) { - case 2: - detail.message = - 'The request contains an invalid parameter value. For example, this error occurs if you specify a video ID that does not have 11 characters, or if the video ID contains invalid characters, such as exclamation points or asterisks.'; - break; - - case 5: - detail.message = - 'The requested content cannot be played in an HTML5 player or another error related to the HTML5 player has occurred.'; - break; - - case 100: - detail.message = - 'The video requested was not found. This error occurs when a video has been removed (for any reason) or has been marked as private.'; - break; - - case 101: - case 150: - detail.message = 'The owner of the requested video does not allow it to be played in embedded players.'; - break; - - default: - detail.message = 'An unknown error occured'; - break; - } - - player.media.error = detail; - - utils.dispatchEvent.call(player, player.media, 'error'); - }, - onPlaybackQualityChange() { - utils.dispatchEvent.call(player, player.media, 'qualitychange', false, { - quality: player.media.quality, - }); }, onPlaybackRateChange(event) { // Get the instance @@ -261,9 +199,13 @@ const youtube = { // Get current speed player.media.playbackRate = instance.getPlaybackRate(); - utils.dispatchEvent.call(player, player.media, 'ratechange'); + triggerEvent.call(player, player.media, 'ratechange'); }, onReady(event) { + // Bail if onReady has already been called. See issue #1108 + if (is.function(player.media.play)) { + return; + } // Get the instance const instance = event.target; @@ -295,14 +237,14 @@ const youtube = { return Number(instance.getCurrentTime()); }, set(time) { - // If paused, mute audio preventively (YouTube starts playing on seek if the video hasn't been played yet). - if (player.paused) { + // If paused and never played, mute audio preventively (YouTube starts playing on seek if the video hasn't been played yet). + if (player.paused && !player.embed.hasPlayed) { player.embed.mute(); } // Set seeking state and trigger event player.media.seeking = true; - utils.dispatchEvent.call(player, player.media, 'seeking'); + triggerEvent.call(player, player.media, 'seeking'); // Seek after events sent instance.seekTo(time); @@ -319,24 +261,6 @@ const youtube = { }, }); - // Quality - Object.defineProperty(player.media, 'quality', { - get() { - return mapQualityUnit(instance.getPlaybackQuality()); - }, - set(input) { - const quality = input; - - // Set via API - instance.setPlaybackQuality(mapQualityUnit(quality)); - - // Trigger request event - utils.dispatchEvent.call(player, player.media, 'qualityrequested', false, { - quality, - }); - }, - }); - // Volume let { volume } = player.config; Object.defineProperty(player.media, 'volume', { @@ -346,7 +270,7 @@ const youtube = { set(input) { volume = input; instance.setVolume(volume * 100); - utils.dispatchEvent.call(player, player.media, 'volumechange'); + triggerEvent.call(player, player.media, 'volumechange'); }, }); @@ -357,10 +281,10 @@ const youtube = { return muted; }, set(input) { - const toggle = utils.is.boolean(input) ? input : muted; + const toggle = is.boolean(input) ? input : muted; muted = toggle; instance[toggle ? 'mute' : 'unMute'](); - utils.dispatchEvent.call(player, player.media, 'volumechange'); + triggerEvent.call(player, player.media, 'volumechange'); }, }); @@ -386,8 +310,8 @@ const youtube = { player.media.setAttribute('tabindex', -1); } - utils.dispatchEvent.call(player, player.media, 'timeupdate'); - utils.dispatchEvent.call(player, player.media, 'durationchange'); + triggerEvent.call(player, player.media, 'timeupdate'); + triggerEvent.call(player, player.media, 'durationchange'); // Reset timer clearInterval(player.timers.buffering); @@ -399,7 +323,7 @@ const youtube = { // Trigger progress only when we actually buffer something if (player.media.lastBuffered === null || player.media.lastBuffered < player.media.buffered) { - utils.dispatchEvent.call(player, player.media, 'progress'); + triggerEvent.call(player, player.media, 'progress'); } // Set last buffer point @@ -410,7 +334,7 @@ const youtube = { clearInterval(player.timers.buffering); // Trigger event - utils.dispatchEvent.call(player, player.media, 'canplaythrough'); + triggerEvent.call(player, player.media, 'canplaythrough'); } }, 200); @@ -424,15 +348,12 @@ const youtube = { // Reset timer clearInterval(player.timers.playing); - const seeked = player.media.seeking && [ - 1, - 2, - ].includes(event.data); + const seeked = player.media.seeking && [1, 2].includes(event.data); if (seeked) { // Unset seeking and fire seeked event player.media.seeking = false; - utils.dispatchEvent.call(player, player.media, 'seeked'); + triggerEvent.call(player, player.media, 'seeked'); } // Handle events @@ -445,11 +366,11 @@ const youtube = { switch (event.data) { case -1: // Update scrubber - utils.dispatchEvent.call(player, player.media, 'timeupdate'); + triggerEvent.call(player, player.media, 'timeupdate'); // Get loaded % from YouTube player.media.buffered = instance.getVideoLoadedFraction(); - utils.dispatchEvent.call(player, player.media, 'progress'); + triggerEvent.call(player, player.media, 'progress'); break; @@ -462,23 +383,23 @@ const youtube = { instance.stopVideo(); instance.playVideo(); } else { - utils.dispatchEvent.call(player, player.media, 'ended'); + triggerEvent.call(player, player.media, 'ended'); } break; case 1: // Restore paused state (YouTube starts playing on seek if the video hasn't been played yet) - if (player.media.paused) { + if (player.media.paused && !player.embed.hasPlayed) { player.media.pause(); } else { assurePlaybackState.call(player, true); - utils.dispatchEvent.call(player, player.media, 'playing'); + triggerEvent.call(player, player.media, 'playing'); // Poll to get playback progress player.timers.playing = setInterval(() => { - utils.dispatchEvent.call(player, player.media, 'timeupdate'); + triggerEvent.call(player, player.media, 'timeupdate'); }, 50); // Check duration again due to YouTube bug @@ -486,11 +407,8 @@ const youtube = { // https://code.google.com/p/gdata-issues/issues/detail?id=8690 if (player.media.duration !== instance.getDuration()) { player.media.duration = instance.getDuration(); - utils.dispatchEvent.call(player, player.media, 'durationchange'); + triggerEvent.call(player, player.media, 'durationchange'); } - - // Get quality - controls.setQualityMenu.call(player, mapQualityUnits(instance.getAvailableQualityLevels())); } break; @@ -508,7 +426,7 @@ const youtube = { break; } - utils.dispatchEvent.call(player, player.elements.container, 'statechange', false, { + triggerEvent.call(player, player.elements.container, 'statechange', false, { code: event.data, }); }, diff --git a/src/js/plyr.js b/src/js/plyr.js index 4c569fec..c8154429 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,14 +1,16 @@ // ========================================================================== // Plyr -// plyr.js v3.3.7 +// plyr.js v3.4.7 // https://github.com/sampotts/plyr // License: The MIT License (MIT) // ========================================================================== import captions from './captions'; +import defaults from './config/defaults'; +import { pip } from './config/states'; +import { getProviderByUrl, providers, types } from './config/types'; import Console from './console'; import controls from './controls'; -import defaults from './defaults'; import Fullscreen from './fullscreen'; import Listeners from './listeners'; import media from './media'; @@ -16,9 +18,14 @@ import Ads from './plugins/ads'; import source from './source'; import Storage from './storage'; import support from './support'; -import { providers, types } from './types'; import ui from './ui'; -import utils from './utils'; +import { closest } from './utils/arrays'; +import { createElement, hasClass, removeElement, replaceElement, toggleClass, wrap } from './utils/elements'; +import { off, on, once, triggerEvent, unbindListeners } from './utils/events'; +import is from './utils/is'; +import loadSprite from './utils/loadSprite'; +import { cloneDeep, extend } from './utils/objects'; +import { parseUrl } from './utils/urls'; // Private properties // TODO: Use a WeakMap for private globals @@ -41,18 +48,18 @@ class Plyr { this.media = target; // String selector passed - if (utils.is.string(this.media)) { + if (is.string(this.media)) { this.media = document.querySelectorAll(this.media); } // jQuery, NodeList or Array passed, use first element - if ((window.jQuery && this.media instanceof jQuery) || utils.is.nodeList(this.media) || utils.is.array(this.media)) { + if ((window.jQuery && this.media instanceof jQuery) || is.nodeList(this.media) || is.array(this.media)) { // eslint-disable-next-line this.media = this.media[0]; } // Set config - this.config = utils.extend( + this.config = extend( {}, defaults, Plyr.defaults, @@ -69,22 +76,24 @@ class Plyr { // Elements cache this.elements = { container: null, + captions: null, buttons: {}, display: {}, progress: {}, inputs: {}, settings: { + popup: null, menu: null, - panes: {}, - tabs: {}, + panels: {}, + buttons: {}, }, - captions: null, }; // Captions this.captions = { active: null, - currentTrack: null, + currentTrack: -1, + meta: new WeakMap(), }; // Fullscreen @@ -96,7 +105,6 @@ class Plyr { this.options = { speed: [], quality: [], - captions: [], }; // Debugging @@ -108,7 +116,7 @@ class Plyr { this.debug.log('Support', support); // We need an element to setup - if (utils.is.nullOrUndefined(this.media) || !utils.is.element(this.media)) { + if (is.nullOrUndefined(this.media) || !is.element(this.media)) { this.debug.error('Setup failed: no suitable element passed'); return; } @@ -144,7 +152,6 @@ class Plyr { // Embed properties let iframe = null; let url = null; - let params = null; // Different setup based on type switch (type) { @@ -153,10 +160,10 @@ class Plyr { iframe = this.media.querySelector('iframe'); // <iframe> type - if (utils.is.element(iframe)) { + if (is.element(iframe)) { // Detect provider - url = iframe.getAttribute('src'); - this.provider = utils.getProviderByUrl(url); + url = parseUrl(iframe.getAttribute('src')); + this.provider = getProviderByUrl(url.toString()); // Rework elements this.elements.container = this.media; @@ -166,24 +173,21 @@ class Plyr { this.elements.container.className = ''; // Get attributes from URL and set config - params = utils.getUrlParams(url); - if (!utils.is.empty(params)) { - const truthy = [ - '1', - 'true', - ]; - - if (truthy.includes(params.autoplay)) { + if (url.search.length) { + const truthy = ['1', 'true']; + + if (truthy.includes(url.searchParams.get('autoplay'))) { this.config.autoplay = true; } - if (truthy.includes(params.loop)) { + if (truthy.includes(url.searchParams.get('loop'))) { this.config.loop.active = true; } // TODO: replace fullscreen.iosNative with this playsinline config option // YouTube requires the playsinline in the URL if (this.isYouTube) { - this.config.playsinline = truthy.includes(params.playsinline); + this.config.playsinline = truthy.includes(url.searchParams.get('playsinline')); + this.config.hl = url.searchParams.get('hl'); // TODO: Should this be setting language? } else { this.config.playsinline = true; } @@ -197,7 +201,7 @@ class Plyr { } // Unsupported or missing provider - if (utils.is.empty(this.provider) || !Object.keys(providers).includes(this.provider)) { + if (is.empty(this.provider) || !Object.keys(providers).includes(this.provider)) { this.debug.error('Setup failed: Invalid provider'); return; } @@ -219,7 +223,7 @@ class Plyr { if (this.media.hasAttribute('autoplay')) { this.config.autoplay = true; } - if (this.media.hasAttribute('playsinline')) { + if (this.media.hasAttribute('playsinline') || this.media.hasAttribute('webkit-playsinline')) { this.config.playsinline = true; } if (this.media.hasAttribute('muted')) { @@ -245,6 +249,8 @@ class Plyr { return; } + this.eventListeners = []; + // Create listeners this.listeners = new Listeners(this); @@ -255,14 +261,11 @@ class Plyr { this.media.plyr = this; // Wrap media - if (!utils.is.element(this.elements.container)) { - this.elements.container = utils.createElement('div'); - utils.wrap(this.media, this.elements.container); + if (!is.element(this.elements.container)) { + this.elements.container = createElement('div'); + wrap(this.media, this.elements.container); } - // Allow focus to be captured - this.elements.container.setAttribute('tabindex', 0); - // Add style hook ui.addStyleHook.call(this); @@ -271,7 +274,7 @@ class Plyr { // Listen for events if debugging if (this.config.debug) { - utils.on(this.elements.container, this.config.events.join(' '), event => { + on.call(this, this.elements.container, this.config.events.join(' '), event => { this.debug.log(`event: ${event.type}`); }); } @@ -292,12 +295,17 @@ class Plyr { this.fullscreen = new Fullscreen(this); // Setup ads if provided - this.ads = new Ads(this); + if (this.config.ads.enabled) { + this.ads = new Ads(this); + } // Autoplay if required if (this.config.autoplay) { this.play(); } + + // Seek time will be recorded (in listeners.js) so we can prevent hiding controls for a few seconds after seek + this.lastSeekTime = 0; } // --------------------------------------- @@ -310,18 +318,23 @@ class Plyr { get isHTML5() { return Boolean(this.provider === providers.html5); } + get isEmbed() { return Boolean(this.isYouTube || this.isVimeo); } + get isYouTube() { return Boolean(this.provider === providers.youtube); } + get isVimeo() { return Boolean(this.provider === providers.vimeo); } + get isVideo() { return Boolean(this.type === types.video); } + get isAudio() { return Boolean(this.type === types.audio); } @@ -330,7 +343,7 @@ class Plyr { * Play the media, or play the advertisement (if they are not blocked) */ play() { - if (!utils.is.function(this.media.play)) { + if (!is.function(this.media.play)) { return null; } @@ -342,7 +355,7 @@ class Plyr { * Pause the media */ pause() { - if (!this.playing || !utils.is.function(this.media.pause)) { + if (!this.playing || !is.function(this.media.pause)) { return; } @@ -383,7 +396,7 @@ class Plyr { */ togglePlay(input) { // Toggle based on current state if nothing passed - const toggle = utils.is.boolean(input) ? input : !this.playing; + const toggle = is.boolean(input) ? input : !this.playing; if (toggle) { this.play(); @@ -399,7 +412,7 @@ class Plyr { if (this.isHTML5) { this.pause(); this.restart(); - } else if (utils.is.function(this.media.stop)) { + } else if (is.function(this.media.stop)) { this.media.stop(); } } @@ -416,7 +429,7 @@ class Plyr { * @param {number} seekTime - how far to rewind in seconds. Defaults to the config.seekTime */ rewind(seekTime) { - this.currentTime = this.currentTime - (utils.is.number(seekTime) ? seekTime : this.config.seekTime); + this.currentTime = this.currentTime - (is.number(seekTime) ? seekTime : this.config.seekTime); } /** @@ -424,7 +437,7 @@ class Plyr { * @param {number} seekTime - how far to fast forward in seconds. Defaults to the config.seekTime */ forward(seekTime) { - this.currentTime = this.currentTime + (utils.is.number(seekTime) ? seekTime : this.config.seekTime); + this.currentTime = this.currentTime + (is.number(seekTime) ? seekTime : this.config.seekTime); } /** @@ -432,21 +445,16 @@ class Plyr { * @param {number} input - where to seek to in seconds. Defaults to 0 (the start) */ set currentTime(input) { - let targetTime = 0; - - if (utils.is.number(input)) { - targetTime = input; + // Bail if media duration isn't available yet + if (!this.duration) { + return; } - // Normalise targetTime - if (targetTime < 0) { - targetTime = 0; - } else if (targetTime > this.duration) { - targetTime = this.duration; - } + // Validate input + const inputIsValid = is.number(input) && input > 0; // Set - this.media.currentTime = targetTime; + this.media.currentTime = inputIsValid ? Math.min(input, this.duration) : 0; // Logging this.debug.log(`Seeking to ${this.currentTime} seconds`); @@ -466,7 +474,7 @@ class Plyr { const { buffered } = this.media; // YouTube / Vimeo return a float between 0-1 - if (utils.is.number(buffered)) { + if (is.number(buffered)) { return buffered; } @@ -494,11 +502,12 @@ class Plyr { // Faux duration set via config const fauxDuration = parseFloat(this.config.duration); - // True duration - const realDuration = this.media ? Number(this.media.duration) : 0; + // 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; - // If custom duration is funky, use regular duration - return !Number.isNaN(fauxDuration) ? fauxDuration : realDuration; + // If config duration is funky, use regular duration + return fauxDuration || duration; } /** @@ -510,17 +519,17 @@ class Plyr { const max = 1; const min = 0; - if (utils.is.string(volume)) { + if (is.string(volume)) { volume = Number(volume); } // Load volume from storage if no value specified - if (!utils.is.number(volume)) { + if (!is.number(volume)) { volume = this.storage.get('volume'); } // Use config if all else fails - if (!utils.is.number(volume)) { + if (!is.number(volume)) { ({ volume } = this.config); } @@ -540,7 +549,7 @@ class Plyr { this.media.volume = volume; // If muted, and we're increasing volume manually, reset muted state - if (!utils.is.empty(value) && this.muted && volume > 0) { + if (!is.empty(value) && this.muted && volume > 0) { this.muted = false; } } @@ -558,7 +567,7 @@ class Plyr { */ increaseVolume(step) { const volume = this.media.muted ? 0 : this.volume; - this.volume = volume + (utils.is.number(step) ? step : 1); + this.volume = volume + (is.number(step) ? step : 0); } /** @@ -566,8 +575,7 @@ class Plyr { * @param {boolean} step - How much to decrease by (between 0 and 1) */ decreaseVolume(step) { - const volume = this.media.muted ? 0 : this.volume; - this.volume = volume - (utils.is.number(step) ? step : 1); + this.increaseVolume(-step); } /** @@ -578,12 +586,12 @@ class Plyr { let toggle = mute; // Load muted state from storage - if (!utils.is.boolean(toggle)) { + if (!is.boolean(toggle)) { toggle = this.storage.get('muted'); } // Use config if all else fails - if (!utils.is.boolean(toggle)) { + if (!is.boolean(toggle)) { toggle = this.config.muted; } @@ -629,15 +637,15 @@ class Plyr { set speed(input) { let speed = null; - if (utils.is.number(input)) { + if (is.number(input)) { speed = input; } - if (!utils.is.number(speed)) { + if (!is.number(speed)) { speed = this.storage.get('speed'); } - if (!utils.is.number(speed)) { + if (!is.number(speed)) { speed = this.config.speed.selected; } @@ -674,39 +682,41 @@ class Plyr { * @param {number} input - Quality level */ set quality(input) { - let quality = null; + const config = this.config.quality; + const options = this.options.quality; - if (!utils.is.empty(input)) { - quality = Number(input); + if (!options.length) { + return; } - if (!utils.is.number(quality) || quality === 0) { - quality = this.storage.get('quality'); - } + let quality = [ + !is.empty(input) && Number(input), + this.storage.get('quality'), + config.selected, + config.default, + ].find(is.number); - if (!utils.is.number(quality)) { - quality = this.config.quality.selected; - } + let updateStorage = true; - if (!utils.is.number(quality)) { - quality = this.config.quality.default; - } + if (!options.includes(quality)) { + const value = closest(options, quality); + this.debug.warn(`Unsupported quality option: ${quality}, using ${value} instead`); + quality = value; - if (!this.options.quality.length) { - return; - } - - if (!this.options.quality.includes(quality)) { - const closest = utils.closest(this.options.quality, quality); - this.debug.warn(`Unsupported quality option: ${quality}, using ${closest} instead`); - quality = closest; + // Don't update storage if quality is not supported + updateStorage = false; } // Update config - this.config.quality.selected = quality; + config.selected = quality; // Set quality this.media.quality = quality; + + // Save to storage + if (updateStorage) { + this.storage.set({ quality }); + } } /** @@ -722,7 +732,7 @@ class Plyr { * @param {boolean} input - Whether to loop or not */ set loop(input) { - const toggle = utils.is.boolean(input) ? input : this.config.loop.active; + const toggle = is.boolean(input) ? input : this.config.loop.active; this.config.loop.active = toggle; this.media.loop = toggle; @@ -793,6 +803,15 @@ class Plyr { } /** + * Get a download URL (either source or custom) + */ + get download() { + const { download } = this.config.urls; + + return is.url(download) ? download : this.source; + } + + /** * Set the poster image for a video * @param {input} - the URL for the new poster image */ @@ -802,7 +821,7 @@ class Plyr { return; } - ui.setPoster.call(this, input); + ui.setPoster.call(this, input, false).catch(() => {}); } /** @@ -821,7 +840,7 @@ class Plyr { * @param {boolean} input - Whether to autoplay or not */ set autoplay(input) { - const toggle = utils.is.boolean(input) ? input : this.config.autoplay; + const toggle = is.boolean(input) ? input : this.config.autoplay; this.config.autoplay = toggle; } @@ -837,88 +856,39 @@ class Plyr { * @param {boolean} input - Whether to enable captions */ toggleCaptions(input) { - // If there's no full support - if (!this.supported.ui) { - return; - } - - // If the method is called without parameter, toggle based on current value - const show = utils.is.boolean(input) ? input : !this.elements.container.classList.contains(this.config.classNames.captions.active); - - // Nothing to change... - if (this.captions.active === show) { - return; - } - - // Set global - this.captions.active = show; - - // Toggle state - utils.toggleState(this.elements.buttons.captions, this.captions.active); + captions.toggle.call(this, input, false); + } - // Add class hook - utils.toggleClass(this.elements.container, this.config.classNames.captions.active, this.captions.active); + /** + * Set the caption track by index + * @param {number} - Caption index + */ + set currentTrack(input) { + captions.set.call(this, input, false); + } - // Trigger an event - utils.dispatchEvent.call(this, this.media, this.captions.active ? 'captionsenabled' : 'captionsdisabled'); + /** + * Get the current caption track index (-1 if disabled) + */ + get currentTrack() { + const { toggled, currentTrack } = this.captions; + return toggled ? currentTrack : -1; } /** - * Set the captions language + * Set the wanted language for captions + * Since tracks can be added later it won't update the actual caption track until there is a matching track * @param {string} - Two character ISO language code (e.g. EN, FR, PT, etc) */ set language(input) { - // Nothing specified - if (!utils.is.string(input)) { - return; - } - - // If empty string is passed, assume disable captions - if (utils.is.empty(input)) { - this.toggleCaptions(false); - return; - } - - // Normalize - const language = input.toLowerCase(); - - // Check for support - if (!this.options.captions.includes(language)) { - this.debug.warn(`Unsupported language option: ${language}`); - return; - } - - // Ensure captions are enabled - this.toggleCaptions(true); - - // Enabled only - if (language === 'enabled') { - return; - } - - // If nothing to change, bail - if (this.language === language) { - return; - } - - // Update config - this.captions.language = language; - - // Clear caption - captions.setText.call(this, null); - - // Update captions - captions.setLanguage.call(this); - - // Trigger an event - utils.dispatchEvent.call(this, this.media, 'languagechange'); + captions.setLanguage.call(this, input, false); } /** - * Get the current captions language + * Get the current track's language */ get language() { - return this.captions.language; + return (captions.getCurrentTrack.call(this) || {}).language; } /** @@ -927,21 +897,28 @@ class Plyr { * TODO: detect outside changes */ set pip(input) { - const states = { - pip: 'picture-in-picture', - inline: 'inline', - }; - // Bail if no support if (!support.pip) { return; } // Toggle based on current state if not passed - const toggle = utils.is.boolean(input) ? input : this.pip === states.inline; + const toggle = is.boolean(input) ? input : !this.pip; // Toggle based on current state - this.media.webkitSetPresentationMode(toggle ? states.pip : states.inline); + // Safari + if (is.function(this.media.webkitSetPresentationMode)) { + this.media.webkitSetPresentationMode(toggle ? pip.active : pip.inactive); + } + + // Chrome + if (is.function(this.media.requestPictureInPicture)) { + if (!this.pip && toggle) { + this.media.requestPictureInPicture(); + } else if (this.pip && !toggle) { + document.exitPictureInPicture(); + } + } } /** @@ -952,7 +929,13 @@ class Plyr { return null; } - return this.media.webkitPresentationMode; + // Safari + if (!is.empty(this.media.webkitPresentationMode)) { + return this.media.webkitPresentationMode === pip.active; + } + + // Chrome + return this.media === document.pictureInPictureElement; } /** @@ -974,25 +957,28 @@ class Plyr { // Don't toggle if missing UI support or if it's audio if (this.supported.ui && !this.isAudio) { // Get state before change - const isHidden = utils.hasClass(this.elements.container, this.config.classNames.hideControls); + 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 = utils.toggleClass(this.elements.container, this.config.classNames.hideControls, force); + const hiding = toggleClass(this.elements.container, this.config.classNames.hideControls, force); // Close menu - if (hiding && this.config.controls.includes('settings') && !utils.is.empty(this.config.settings)) { + if (hiding && this.config.controls.includes('settings') && !is.empty(this.config.settings)) { controls.toggleMenu.call(this, false); } + // Trigger event on change if (hiding !== isHidden) { const eventName = hiding ? 'controlshidden' : 'controlsshown'; - utils.dispatchEvent.call(this, this.media, eventName); + triggerEvent.call(this, this.media, eventName); } + return !hiding; } + return false; } @@ -1002,7 +988,16 @@ class Plyr { * @param {function} callback - Callback for when event occurs */ on(event, callback) { - utils.on(this.elements.container, event, callback); + on.call(this, this.elements.container, event, callback); + } + + /** + * Add event listeners once + * @param {string} event - Event type + * @param {function} callback - Callback for when event occurs + */ + once(event, callback) { + once.call(this, this.elements.container, event, callback); } /** @@ -1011,7 +1006,7 @@ class Plyr { * @param {function} callback - Callback for when event occurs */ off(event, callback) { - utils.off(this.elements.container, event, callback); + off(this.elements.container, event, callback); } /** @@ -1037,10 +1032,10 @@ class Plyr { if (soft) { if (Object.keys(this.elements).length) { // Remove elements - utils.removeElement(this.elements.buttons.play); - utils.removeElement(this.elements.captions); - utils.removeElement(this.elements.controls); - utils.removeElement(this.elements.wrapper); + removeElement(this.elements.buttons.play); + removeElement(this.elements.captions); + removeElement(this.elements.controls); + removeElement(this.elements.wrapper); // Clear for GC this.elements.buttons.play = null; @@ -1050,21 +1045,21 @@ class Plyr { } // Callback - if (utils.is.function(callback)) { + if (is.function(callback)) { callback(); } } else { // Unbind listeners - this.listeners.clear(); + unbindListeners.call(this); // Replace the container with the original element provided - utils.replaceElement(this.elements.original, this.elements.container); + replaceElement(this.elements.original, this.elements.container); // Event - utils.dispatchEvent.call(this, this.elements.original, 'destroyed', true); + triggerEvent.call(this, this.elements.original, 'destroyed', true); // Callback - if (utils.is.function(callback)) { + if (is.function(callback)) { callback.call(this.elements.original); } @@ -1082,50 +1077,37 @@ class Plyr { // Stop playback this.stop(); - // Type specific stuff - switch (`${this.provider}:${this.type}`) { - case 'html5:video': - case 'html5:audio': - // Clear timeout - clearTimeout(this.timers.loading); - - // Restore native video controls - ui.toggleNativeControls.call(this, true); - - // Clean up - done(); - - break; - - case 'youtube:video': - // Clear timers - clearInterval(this.timers.buffering); - clearInterval(this.timers.playing); - - // Destroy YouTube API - if (this.embed !== null && utils.is.function(this.embed.destroy)) { - this.embed.destroy(); - } - - // Clean up - done(); - - break; - - case 'vimeo:video': - // Destroy Vimeo API - // then clean up (wait, to prevent postmessage errors) - if (this.embed !== null) { - this.embed.unload().then(done); - } - - // Vimeo does not always return - setTimeout(done, 200); + // Provider specific stuff + if (this.isHTML5) { + // Clear timeout + clearTimeout(this.timers.loading); + + // Restore native video controls + ui.toggleNativeControls.call(this, true); + + // Clean up + done(); + } else if (this.isYouTube) { + // Clear timers + clearInterval(this.timers.buffering); + clearInterval(this.timers.playing); + + // Destroy YouTube API + if (this.embed !== null && is.function(this.embed.destroy)) { + this.embed.destroy(); + } - break; + // Clean up + done(); + } else if (this.isVimeo) { + // Destroy Vimeo API + // then clean up (wait, to prevent postmessage errors) + if (this.embed !== null) { + this.embed.unload().then(done); + } - default: - break; + // Vimeo does not always return + setTimeout(done, 200); } } @@ -1153,7 +1135,7 @@ class Plyr { * @param {string} [id] - Unique ID */ static loadSprite(url, id) { - return utils.loadSprite(url, id); + return loadSprite(url, id); } /** @@ -1164,15 +1146,15 @@ class Plyr { static setup(selector, options = {}) { let targets = null; - if (utils.is.string(selector)) { + if (is.string(selector)) { targets = Array.from(document.querySelectorAll(selector)); - } else if (utils.is.nodeList(selector)) { + } else if (is.nodeList(selector)) { targets = Array.from(selector); - } else if (utils.is.array(selector)) { - targets = selector.filter(i => utils.is.element(i)); + } else if (is.array(selector)) { + targets = selector.filter(is.element); } - if (utils.is.empty(targets)) { + if (is.empty(targets)) { return null; } @@ -1180,6 +1162,6 @@ class Plyr { } } -Plyr.defaults = utils.cloneDeep(defaults); +Plyr.defaults = cloneDeep(defaults); export default Plyr; diff --git a/src/js/plyr.polyfilled.js b/src/js/plyr.polyfilled.js index 27b13dfd..ac6d1c28 100644 --- a/src/js/plyr.polyfilled.js +++ b/src/js/plyr.polyfilled.js @@ -1,11 +1,10 @@ // ========================================================================== // Plyr Polyfilled Build -// plyr.js v3.3.7 +// plyr.js v3.4.7 // https://github.com/sampotts/plyr // License: The MIT License (MIT) // ========================================================================== -import 'babel-polyfill'; import 'custom-event-polyfill'; import 'url-polyfill'; import Plyr from './plyr'; diff --git a/src/js/source.js b/src/js/source.js index e9a2938e..337c949c 100644 --- a/src/js/source.js +++ b/src/js/source.js @@ -2,23 +2,25 @@ // Plyr source update // ========================================================================== +import { providers } from './config/types'; import html5 from './html5'; import media from './media'; import support from './support'; -import { providers } from './types'; import ui from './ui'; -import utils from './utils'; +import { createElement, insertElement, removeElement } from './utils/elements'; +import is from './utils/is'; +import { getDeep } from './utils/objects'; const source = { // Add elements to HTML5 media (source, tracks, etc) insertElements(type, attributes) { - if (utils.is.string(attributes)) { - utils.insertElement(type, this.media, { + if (is.string(attributes)) { + insertElement(type, this.media, { src: attributes, }); - } else if (utils.is.array(attributes)) { + } else if (is.array(attributes)) { attributes.forEach(attribute => { - utils.insertElement(type, this.media, attribute); + insertElement(type, this.media, attribute); }); } }, @@ -26,7 +28,7 @@ const source = { // Update source // Sources are not checked for support so be careful change(input) { - if (!utils.is.object(input) || !('sources' in input) || !input.sources.length) { + if (!getDeep(input, 'sources.length')) { this.debug.warn('Invalid source format'); return; } @@ -42,47 +44,34 @@ const source = { this.options.quality = []; // Remove elements - utils.removeElement(this.media); + removeElement(this.media); this.media = null; // Reset class name - if (utils.is.element(this.elements.container)) { + if (is.element(this.elements.container)) { this.elements.container.removeAttribute('class'); } // Set the type and provider - this.type = input.type; - this.provider = !utils.is.empty(input.sources[0].provider) ? input.sources[0].provider : providers.html5; - - // Check for support - this.supported = support.check(this.type, this.provider, this.config.playsinline); - - // Create new markup - switch (`${this.provider}:${this.type}`) { - case 'html5:video': - this.media = utils.createElement('video'); - break; - - case 'html5:audio': - this.media = utils.createElement('audio'); - break; - - case 'youtube:video': - case 'vimeo:video': - this.media = utils.createElement('div', { - src: input.sources[0].src, - }); - break; - - default: - break; - } + const { sources, type } = input; + const [{ provider = providers.html5, src }] = sources; + const tagName = provider === 'html5' ? type : 'div'; + const attributes = provider === 'html5' ? {} : { src }; + + Object.assign(this, { + provider, + type, + // Check for support + supported: support.check(type, provider, this.config.playsinline), + // Create new element + media: createElement(tagName, attributes), + }); // Inject the new element this.elements.container.appendChild(this.media); // Autoplay the new source? - if (utils.is.boolean(input.autoplay)) { + if (is.boolean(input.autoplay)) { this.config.autoplay = input.autoplay; } @@ -94,7 +83,7 @@ const source = { if (this.config.autoplay) { this.media.setAttribute('autoplay', ''); } - if (!utils.is.empty(input.poster)) { + if (!is.empty(input.poster)) { this.poster = input.poster; } if (this.config.loop.active) { @@ -113,7 +102,7 @@ const source = { // Set new sources for html5 if (this.isHTML5) { - source.insertElements.call(this, 'source', input.sources); + source.insertElements.call(this, 'source', sources); } // Set video title @@ -125,12 +114,9 @@ const source = { // HTML5 stuff if (this.isHTML5) { // Setup captions - if ('tracks' in input) { + if (Object.keys(input).includes('tracks')) { source.insertElements.call(this, 'track', input.tracks); } - - // Load HTML5 sources - this.media.load(); } // If HTML5 or embed but not fully supported, setupInterface and call ready now @@ -139,6 +125,11 @@ const source = { ui.build.call(this); } + if (this.isHTML5) { + // Load HTML5 sources + this.media.load(); + } + // Update the fullscreen support this.fullscreen.update(); }, diff --git a/src/js/storage.js b/src/js/storage.js index 5b914331..27fdad9f 100644 --- a/src/js/storage.js +++ b/src/js/storage.js @@ -2,7 +2,8 @@ // Plyr storage // ========================================================================== -import utils from './utils'; +import is from './utils/is'; +import { extend } from './utils/objects'; class Storage { constructor(player) { @@ -31,19 +32,19 @@ class Storage { } get(key) { - if (!Storage.supported) { + if (!Storage.supported || !this.enabled) { return null; } const store = window.localStorage.getItem(this.key); - if (utils.is.empty(store)) { + if (is.empty(store)) { return null; } const json = JSON.parse(store); - return utils.is.string(key) && key.length ? json[key] : json; + return is.string(key) && key.length ? json[key] : json; } set(object) { @@ -53,7 +54,7 @@ class Storage { } // Can only store objectst - if (!utils.is.object(object)) { + if (!is.object(object)) { return; } @@ -61,12 +62,12 @@ class Storage { let storage = this.get(); // Default to empty object - if (utils.is.empty(storage)) { + if (is.empty(storage)) { storage = {}; } // Update the working copy of the values - utils.extend(storage, object); + extend(storage, object); // Update storage window.localStorage.setItem(this.key, JSON.stringify(storage)); diff --git a/src/js/support.js b/src/js/support.js index 38212d9f..9257df13 100644 --- a/src/js/support.js +++ b/src/js/support.js @@ -2,7 +2,19 @@ // Plyr support checks // ========================================================================== -import utils from './utils'; +import { transitionEndEvent } from './utils/animation'; +import browser from './utils/browser'; +import { createElement } from './utils/elements'; +import is from './utils/is'; + +// Default codecs for checking mimetype support +const defaultCodecs = { + 'audio/ogg': 'vorbis', + 'audio/wav': '1', + 'video/webm': 'vp8, vorbis', + 'video/mp4': 'avc1.42E01E, mp4a.40.2', + 'video/ogg': 'theora', +}; // Check for feature support const support = { @@ -13,32 +25,9 @@ const support = { // Check for support // Basic functionality vs full UI check(type, provider, playsinline) { - let api = false; - let ui = false; - const browser = utils.getBrowser(); const canPlayInline = browser.isIPhone && playsinline && support.playsinline; - - switch (`${provider}:${type}`) { - case 'html5:video': - api = support.video; - ui = api && support.rangeInput && (!browser.isIPhone || canPlayInline); - break; - - case 'html5:audio': - api = support.audio; - ui = api && support.rangeInput; - break; - - case 'youtube:video': - case 'vimeo:video': - api = true; - ui = support.rangeInput && (!browser.isIPhone || canPlayInline); - break; - - default: - api = support.audio && support.video; - ui = api && support.rangeInput; - } + const api = support[type] || provider !== 'html5'; + const ui = api && support.rangeInput && (type !== 'video' || !browser.isIPhone || canPlayInline); return { api, @@ -47,15 +36,30 @@ const support = { }, // Picture-in-picture support - // Safari only currently + // Safari & Chrome only currently pip: (() => { - const browser = utils.getBrowser(); - return !browser.isIPhone && utils.is.function(utils.createElement('video').webkitSetPresentationMode); + if (browser.isIPhone) { + return false; + } + + // Safari + // https://developer.apple.com/documentation/webkitjs/adding_picture_in_picture_to_your_safari_media_controls + if (is.function(createElement('video').webkitSetPresentationMode)) { + return true; + } + + // Chrome + // https://developers.google.com/web/updates/2018/10/watch-video-using-picture-in-picture + if (document.pictureInPictureEnabled && !createElement('video').disablePictureInPicture) { + return true; + } + + return false; })(), // Airplay support // Safari only currently - airplay: utils.is.function(window.WebKitPlaybackTargetAvailabilityEvent), + airplay: is.function(window.WebKitPlaybackTargetAvailabilityEvent), // Inline playback support // https://webkit.org/blog/6784/new-video-policies-for-ios/ @@ -64,82 +68,29 @@ const support = { // Check for mime type support against a player instance // Credits: http://diveintohtml5.info/everything.html // Related: http://www.leanbackplayer.com/test/h5mt.html - mime(type) { - const { media } = this; + mime(inputType) { + const [mediaType] = inputType.split('/'); + let type = inputType; - try { - // Bail if no checking function - if (!this.isHTML5 || !utils.is.function(media.canPlayType)) { - return false; - } - - // Check directly if codecs specified - if (type.includes('codecs=')) { - return media.canPlayType(type).replace(/no/, ''); - } - - // Type specific checks - if (this.isVideo) { - switch (type) { - case 'video/webm': - return media.canPlayType('video/webm; codecs="vp8, vorbis"').replace(/no/, ''); - - case 'video/mp4': - return media.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"').replace(/no/, ''); - - case 'video/ogg': - return media.canPlayType('video/ogg; codecs="theora"').replace(/no/, ''); - - default: - return false; - } - } else if (this.isAudio) { - switch (type) { - case 'audio/mpeg': - return media.canPlayType('audio/mpeg;').replace(/no/, ''); - - case 'audio/ogg': - return media.canPlayType('audio/ogg; codecs="vorbis"').replace(/no/, ''); - - case 'audio/wav': - return media.canPlayType('audio/wav; codecs="1"').replace(/no/, ''); - - default: - return false; - } - } - } catch (e) { + // Verify we're using HTML5 and there's no media type mismatch + if (!this.isHTML5 || mediaType !== this.type) { return false; } - // If we got this far, we're stuffed - return false; - }, - - // Check for textTracks support - textTracks: 'textTracks' in document.createElement('video'), + // Add codec if required + if (Object.keys(defaultCodecs).includes(type)) { + type += `; codecs="${defaultCodecs[inputType]}"`; + } - // Check for passive event listener support - // https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md - // https://www.youtube.com/watch?v=NPM6172J22g - passiveListeners: (() => { - // Test via a getter in the options object to see if the passive property is accessed - let supported = false; try { - const options = Object.defineProperty({}, 'passive', { - get() { - supported = true; - return null; - }, - }); - window.addEventListener('test', null, options); - window.removeEventListener('test', null, options); + return Boolean(type && this.media.canPlayType(type).replace(/no/, '')); } catch (e) { - // Do nothing + return false; } + }, - return supported; - })(), + // Check for textTracks support + textTracks: 'textTracks' in document.createElement('video'), // <input type="range"> Sliders rangeInput: (() => { @@ -153,7 +104,7 @@ const support = { touch: 'ontouchstart' in document.documentElement, // Detect transitions support - transitions: utils.transitionEndEvent !== false, + transitions: transitionEndEvent !== false, // Reduced motion iOS & MacOS setting // https://webkit.org/blog/7551/responsive-design-for-motion/ diff --git a/src/js/ui.js b/src/js/ui.js index 3a8f2d05..8e50bb83 100644 --- a/src/js/ui.js +++ b/src/js/ui.js @@ -4,17 +4,18 @@ import captions from './captions'; import controls from './controls'; -import i18n from './i18n'; import support from './support'; -import utils from './utils'; - -// Sniff out the browser -const browser = utils.getBrowser(); +import browser from './utils/browser'; +import { getElement, toggleClass } from './utils/elements'; +import { ready, triggerEvent } from './utils/events'; +import i18n from './utils/i18n'; +import is from './utils/is'; +import loadImage from './utils/loadImage'; const ui = { addStyleHook() { - utils.toggleClass(this.elements.container, this.config.selectors.container.replace('.', ''), true); - utils.toggleClass(this.elements.container, this.config.classNames.uiSupported, this.supported.ui); + toggleClass(this.elements.container, this.config.selectors.container.replace('.', ''), true); + toggleClass(this.elements.container, this.config.classNames.uiSupported, this.supported.ui); }, // Toggle native HTML5 media controls @@ -44,7 +45,7 @@ const ui = { } // Inject custom controls if not present - if (!utils.is.element(this.elements.controls)) { + if (!is.element(this.elements.controls)) { // Inject custom controls controls.inject.call(this); @@ -55,8 +56,10 @@ const ui = { // Remove native controls ui.toggleNativeControls.call(this); - // Captions - captions.setup.call(this); + // Setup captions for HTML5 + if (this.isHTML5) { + captions.setup.call(this); + } // Reset volume this.volume = null; @@ -83,31 +86,41 @@ const ui = { ui.checkPlaying.call(this); // Check for picture-in-picture support - utils.toggleClass(this.elements.container, this.config.classNames.pip.supported, support.pip && this.isHTML5 && this.isVideo); + toggleClass( + this.elements.container, + this.config.classNames.pip.supported, + support.pip && this.isHTML5 && this.isVideo, + ); // Check for airplay support - utils.toggleClass(this.elements.container, this.config.classNames.airplay.supported, support.airplay && this.isHTML5); + toggleClass(this.elements.container, this.config.classNames.airplay.supported, support.airplay && this.isHTML5); // Add iOS class - utils.toggleClass(this.elements.container, this.config.classNames.isIos, browser.isIos); + toggleClass(this.elements.container, this.config.classNames.isIos, browser.isIos); // Add touch class - utils.toggleClass(this.elements.container, this.config.classNames.isTouch, this.touch); + toggleClass(this.elements.container, this.config.classNames.isTouch, this.touch); // Ready for API calls this.ready = true; // Ready event at end of execution stack setTimeout(() => { - utils.dispatchEvent.call(this, this.media, 'ready'); + triggerEvent.call(this, this.media, 'ready'); }, 0); // Set the title ui.setTitle.call(this); // Assure the poster image is set, if the property was added before the element was created - if (this.poster && this.elements.poster && !this.elements.poster.style.backgroundImage) { - ui.setPoster.call(this, this.poster); + if (this.poster) { + ui.setPoster.call(this, this.poster, false).catch(() => {}); + } + + // Manually set the duration if user has overridden it. + // The event listeners for it doesn't get called if preload is disabled (#701) + if (this.config.duration) { + controls.durationUpdate.call(this); } }, @@ -117,31 +130,26 @@ const ui = { let label = i18n.get('play', this.config); // If there's a media title set, use that for the label - if (utils.is.string(this.config.title) && !utils.is.empty(this.config.title)) { + if (is.string(this.config.title) && !is.empty(this.config.title)) { label += `, ${this.config.title}`; - - // Set container label - this.elements.container.setAttribute('aria-label', this.config.title); } // If there's a play button, set label - if (utils.is.nodeList(this.elements.buttons.play)) { - Array.from(this.elements.buttons.play).forEach(button => { - button.setAttribute('aria-label', label); - }); - } + Array.from(this.elements.buttons.play || []).forEach(button => { + button.setAttribute('aria-label', label); + }); // Set iframe title // https://github.com/sampotts/plyr/issues/124 if (this.isEmbed) { - const iframe = utils.getElement.call(this, 'iframe'); + const iframe = getElement.call(this, 'iframe'); - if (!utils.is.element(iframe)) { + if (!is.element(iframe)) { return; } // Default to media type - const title = !utils.is.empty(this.config.title) ? this.config.title : 'video'; + const title = !is.empty(this.config.title) ? this.config.title : 'video'; const format = i18n.get('frameTitle', this.config); iframe.setAttribute('title', format.replace('{title}', title)); @@ -150,51 +158,66 @@ const ui = { // Toggle poster togglePoster(enable) { - utils.toggleClass(this.elements.container, this.config.classNames.posterEnabled, enable); + toggleClass(this.elements.container, this.config.classNames.posterEnabled, enable); }, // Set the poster image (async) - setPoster(poster) { - // Set property regardless of validity - this.media.setAttribute('poster', poster); - - // Bail if element is missing - if (!utils.is.element(this.elements.poster)) { - return Promise.reject(); + // Used internally for the poster setter, with the passive option forced to false + setPoster(poster, passive = true) { + // Don't override if call is passive + if (passive && this.poster) { + return Promise.reject(new Error('Poster already set')); } - // Load the image, and set poster if successful - const loadPromise = utils.loadImage(poster) - .then(() => { - this.elements.poster.style.backgroundImage = `url('${poster}')`; - Object.assign(this.elements.poster.style, { - backgroundImage: `url('${poster}')`, - // Reset backgroundSize as well (since it can be set to "cover" for padded thumbnails for youtube) - backgroundSize: '', - }); - ui.togglePoster.call(this, true); - return poster; - }); - - // Hide the element if the poster can't be loaded (otherwise it will just be a black element covering the video) - loadPromise.catch(() => ui.togglePoster.call(this, false)); - - // Return the promise so the caller can use it as well - return loadPromise; + // Set property synchronously to respect the call order + this.media.setAttribute('poster', poster); + + // Wait until ui is ready + return ( + ready + .call(this) + // Load image + .then(() => loadImage(poster)) + .catch(err => { + // Hide poster on error unless it's been set by another call + if (poster === this.poster) { + ui.togglePoster.call(this, false); + } + // Rethrow + throw err; + }) + .then(() => { + // Prevent race conditions + if (poster !== this.poster) { + throw new Error('setPoster cancelled by later call to setPoster'); + } + }) + .then(() => { + Object.assign(this.elements.poster.style, { + backgroundImage: `url('${poster}')`, + // Reset backgroundSize as well (since it can be set to "cover" for padded thumbnails for youtube) + backgroundSize: '', + }); + ui.togglePoster.call(this, true); + return poster; + }) + ); }, // Check playing state checkPlaying(event) { // Class hooks - utils.toggleClass(this.elements.container, this.config.classNames.playing, this.playing); - utils.toggleClass(this.elements.container, this.config.classNames.paused, this.paused); - utils.toggleClass(this.elements.container, this.config.classNames.stopped, this.stopped); + toggleClass(this.elements.container, this.config.classNames.playing, this.playing); + toggleClass(this.elements.container, this.config.classNames.paused, this.paused); + toggleClass(this.elements.container, this.config.classNames.stopped, this.stopped); - // Set ARIA state - utils.toggleState(this.elements.buttons.play, this.playing); + // Set state + Array.from(this.elements.buttons.play || []).forEach(target => { + target.pressed = this.playing; + }); // Only update controls on non timeupdate events - if (utils.is.event(event) && event.type === 'timeupdate') { + if (is.event(event) && event.type === 'timeupdate') { return; } @@ -204,10 +227,7 @@ const ui = { // Check if media is loading checkLoading(event) { - this.loading = [ - 'stalled', - 'waiting', - ].includes(event.type); + this.loading = ['stalled', 'waiting'].includes(event.type); // Clear timer clearTimeout(this.timers.loading); @@ -215,7 +235,7 @@ const ui = { // Timer to prevent flicker when seeking this.timers.loading = setTimeout(() => { // Update progress bar loading class state - utils.toggleClass(this.elements.container, this.config.classNames.loading, this.loading); + toggleClass(this.elements.container, this.config.classNames.loading, this.loading); // Update controls visibility ui.toggleControls.call(this); @@ -227,8 +247,11 @@ const ui = { const { controls } = this.elements; if (controls && this.config.hideControls) { - // Show controls if force, loading, paused, or button interaction, otherwise hide - this.toggleControls(Boolean(force || this.loading || this.paused || controls.pressed || controls.hover)); + // 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)); } }, }; diff --git a/src/js/utils.js b/src/js/utils.js deleted file mode 100644 index 0c5a28d7..00000000 --- a/src/js/utils.js +++ /dev/null @@ -1,864 +0,0 @@ -// ========================================================================== -// Plyr utils -// ========================================================================== - -import loadjs from 'loadjs'; -import Storage from './storage'; -import support from './support'; -import { providers } from './types'; - -const utils = { - // Check variable types - is: { - object(input) { - return this.getConstructor(input) === Object; - }, - number(input) { - return this.getConstructor(input) === Number && !Number.isNaN(input); - }, - string(input) { - return this.getConstructor(input) === String; - }, - boolean(input) { - return this.getConstructor(input) === Boolean; - }, - function(input) { - return this.getConstructor(input) === Function; - }, - array(input) { - return !this.nullOrUndefined(input) && Array.isArray(input); - }, - weakMap(input) { - return this.instanceof(input, WeakMap); - }, - nodeList(input) { - return this.instanceof(input, NodeList); - }, - element(input) { - return this.instanceof(input, Element); - }, - textNode(input) { - return this.getConstructor(input) === Text; - }, - event(input) { - return this.instanceof(input, Event); - }, - cue(input) { - return this.instanceof(input, TextTrackCue) || this.instanceof(input, VTTCue); - }, - track(input) { - return this.instanceof(input, TextTrack) || (!this.nullOrUndefined(input) && this.string(input.kind)); - }, - url(input) { - return !this.nullOrUndefined(input) && /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-/]))?/.test(input); - }, - nullOrUndefined(input) { - return input === null || typeof input === 'undefined'; - }, - empty(input) { - return ( - this.nullOrUndefined(input) || - ((this.string(input) || this.array(input) || this.nodeList(input)) && !input.length) || - (this.object(input) && !Object.keys(input).length) - ); - }, - instanceof(input, constructor) { - return Boolean(input && constructor && input instanceof constructor); - }, - getConstructor(input) { - return !this.nullOrUndefined(input) ? input.constructor : null; - }, - }, - - // Unfortunately, due to mixed support, UA sniffing is required - getBrowser() { - return { - isIE: /* @cc_on!@ */ false || !!document.documentMode, - isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent), - isIPhone: /(iPhone|iPod)/gi.test(navigator.platform), - isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform), - }; - }, - - // Fetch wrapper - // Using XHR to avoid issues with older browsers - fetch(url, responseType = 'text') { - return new Promise((resolve, reject) => { - try { - const request = new XMLHttpRequest(); - - // Check for CORS support - if (!('withCredentials' in request)) { - return; - } - - request.addEventListener('load', () => { - if (responseType === 'text') { - try { - resolve(JSON.parse(request.responseText)); - } catch (e) { - resolve(request.responseText); - } - } else { - resolve(request.response); - } - }); - - request.addEventListener('error', () => { - throw new Error(request.statusText); - }); - - request.open('GET', url, true); - - // Set the required response type - request.responseType = responseType; - - request.send(); - } catch (e) { - reject(e); - } - }); - }, - - // Load image avoiding xhr/fetch CORS issues - // Server status can't be obtained this way unfortunately, so this uses "naturalWidth" to determine if the image has loaded. - // By default it checks if it is at least 1px, but you can add a second argument to change this. - loadImage(src, minWidth = 1) { - return new Promise((resolve, reject) => { - const image = new Image(); - const handler = () => { - delete image.onload; - delete image.onerror; - (image.naturalWidth >= minWidth ? resolve : reject)(image); - }; - Object.assign(image, {onload: handler, onerror: handler, src}); - }); - }, - - // Load an external script - loadScript(url) { - return new Promise((resolve, reject) => { - loadjs(url, { - success: resolve, - error: reject, - }); - }); - }, - - // Load an external SVG sprite - loadSprite(url, id) { - if (!utils.is.string(url)) { - return; - } - - const prefix = 'cache-'; - const hasId = utils.is.string(id); - let isCached = false; - - const exists = () => document.querySelectorAll(`#${id}`).length; - - function injectSprite(data) { - // Check again incase of race condition - if (hasId && exists()) { - return; - } - - // Inject content - this.innerHTML = data; - - // Inject the SVG to the body - document.body.insertBefore(this, document.body.childNodes[0]); - } - - // Only load once if ID set - if (!hasId || !exists()) { - const useStorage = Storage.supported; - - // Create container - const container = document.createElement('div'); - utils.toggleHidden(container, true); - - if (hasId) { - container.setAttribute('id', id); - } - - // Check in cache - if (useStorage) { - const cached = window.localStorage.getItem(prefix + id); - isCached = cached !== null; - - if (isCached) { - const data = JSON.parse(cached); - injectSprite.call(container, data.content); - return; - } - } - - // Get the sprite - utils - .fetch(url) - .then(result => { - if (utils.is.empty(result)) { - return; - } - - if (useStorage) { - window.localStorage.setItem( - prefix + id, - JSON.stringify({ - content: result, - }), - ); - } - - injectSprite.call(container, result); - }) - .catch(() => {}); - } - }, - - // Generate a random ID - generateId(prefix) { - return `${prefix}-${Math.floor(Math.random() * 10000)}`; - }, - - // Wrap an element - wrap(elements, wrapper) { - // Convert `elements` to an array, if necessary. - const targets = elements.length ? elements : [elements]; - - // Loops backwards to prevent having to clone the wrapper on the - // first element (see `child` below). - Array.from(targets) - .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; - - // Wrap the element (is automatically removed from its current - // parent). - child.appendChild(element); - - // If the element had a sibling, insert the wrapper before - // the sibling to maintain the HTML structure; otherwise, just - // append it to the parent. - if (sibling) { - parent.insertBefore(child, sibling); - } else { - parent.appendChild(child); - } - }); - }, - - // Create a DocumentFragment - createElement(type, attributes, text) { - // Create a new <element> - const element = document.createElement(type); - - // Set all passed attributes - if (utils.is.object(attributes)) { - utils.setAttributes(element, attributes); - } - - // Add text node - if (utils.is.string(text)) { - element.innerText = text; - } - - // Return built element - return element; - }, - - // Inaert an element after another - insertAfter(element, target) { - target.parentNode.insertBefore(element, target.nextSibling); - }, - - // Insert a DocumentFragment - insertElement(type, parent, attributes, text) { - // Inject the new <element> - parent.appendChild(utils.createElement(type, attributes, text)); - }, - - // Remove element(s) - removeElement(element) { - if (utils.is.nodeList(element) || utils.is.array(element)) { - Array.from(element).forEach(utils.removeElement); - return; - } - - if (!utils.is.element(element) || !utils.is.element(element.parentNode)) { - return; - } - - element.parentNode.removeChild(element); - }, - - // Remove all child elements - emptyElement(element) { - let { length } = element.childNodes; - - while (length > 0) { - element.removeChild(element.lastChild); - length -= 1; - } - }, - - // Replace element - replaceElement(newChild, oldChild) { - if (!utils.is.element(oldChild) || !utils.is.element(oldChild.parentNode) || !utils.is.element(newChild)) { - return null; - } - - oldChild.parentNode.replaceChild(newChild, oldChild); - - return newChild; - }, - - // Set attributes - setAttributes(element, attributes) { - if (!utils.is.element(element) || utils.is.empty(attributes)) { - return; - } - - Object.entries(attributes).forEach(([ - key, - value, - ]) => { - element.setAttribute(key, value); - }); - }, - - // Get an attribute object from a string selector - getAttributesFromSelector(sel, existingAttributes) { - // For example: - // '.test' to { class: 'test' } - // '#test' to { id: 'test' } - // '[data-test="test"]' to { 'data-test': 'test' } - - if (!utils.is.string(sel) || utils.is.empty(sel)) { - return {}; - } - - const attributes = {}; - const existing = existingAttributes; - - sel.split(',').forEach(s => { - // Remove whitespace - 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[0]; - const value = parts.length > 1 ? parts[1].replace(/["']/g, '') : ''; - - // Get the first character - const start = selector.charAt(0); - - switch (start) { - case '.': - // Add to existing classname - if (utils.is.object(existing) && utils.is.string(existing.class)) { - existing.class += ` ${className}`; - } - - attributes.class = className; - break; - - case '#': - // ID selector - attributes.id = selector.replace('#', ''); - break; - - case '[': - // Attribute selector - attributes[key] = value; - - break; - - default: - break; - } - }); - - return attributes; - }, - - // Toggle hidden - toggleHidden(element, hidden) { - if (!utils.is.element(element)) { - return; - } - - let hide = hidden; - - if (!utils.is.boolean(hide)) { - hide = !element.hasAttribute('hidden'); - } - - if (hide) { - element.setAttribute('hidden', ''); - } else { - element.removeAttribute('hidden'); - } - }, - - // Mirror Element.classList.toggle, with IE compatibility for "force" argument - toggleClass(element, className, force) { - if (utils.is.element(element)) { - let method = 'toggle'; - if (typeof force !== 'undefined') { - method = force ? 'add' : 'remove'; - } - - element.classList[method](className); - return element.classList.contains(className); - } - - return null; - }, - - // Has class name - hasClass(element, className) { - return utils.is.element(element) && element.classList.contains(className); - }, - - // Element matches selector - matches(element, selector) { - const prototype = { Element }; - - function match() { - return Array.from(document.querySelectorAll(selector)).includes(this); - } - - const matches = prototype.matches || prototype.webkitMatchesSelector || prototype.mozMatchesSelector || prototype.msMatchesSelector || match; - - return matches.call(element, selector); - }, - - // Find all elements - getElements(selector) { - return this.elements.container.querySelectorAll(selector); - }, - - // Find a single element - getElement(selector) { - return this.elements.container.querySelector(selector); - }, - - // Get the focused element - getFocusElement() { - let focused = document.activeElement; - - if (!focused || focused === document.body) { - focused = null; - } else { - focused = document.querySelector(':focus'); - } - - return focused; - }, - - // Trap focus inside container - trapFocus(element = null, toggle = false) { - if (!utils.is.element(element)) { - return; - } - - const focusable = utils.getElements.call(this, 'button:not(:disabled), input:not(:disabled), [tabindex]'); - const first = focusable[0]; - const last = focusable[focusable.length - 1]; - - const trap = event => { - // Bail if not tab key or not fullscreen - if (event.key !== 'Tab' || event.keyCode !== 9) { - return; - } - - // Get the current focused element - const focused = utils.getFocusElement(); - - if (focused === last && !event.shiftKey) { - // Move focus to first element that can be tabbed if Shift isn't used - first.focus(); - event.preventDefault(); - } else if (focused === first && event.shiftKey) { - // Move focus to last element that can be tabbed if Shift is used - last.focus(); - event.preventDefault(); - } - }; - - if (toggle) { - utils.on(this.elements.container, 'keydown', trap, false); - } else { - utils.off(this.elements.container, 'keydown', trap, false); - } - }, - - // Toggle event listener - toggleListener(elements, event, callback, toggle = false, passive = true, capture = false) { - // Bail if no elemetns, event, or callback - if (utils.is.empty(elements) || utils.is.empty(event) || !utils.is.function(callback)) { - return; - } - - // If a nodelist is passed, call itself on each node - if (utils.is.nodeList(elements) || utils.is.array(elements)) { - // Create listener for each node - Array.from(elements).forEach(element => { - if (element instanceof Node) { - utils.toggleListener.call(null, element, event, callback, toggle, passive, capture); - } - }); - - return; - } - - // 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; - - // If passive events listeners are supported - if (support.passiveListeners) { - options = { - // Whether the listener can be passive (i.e. default never prevented) - passive, - // Whether the listener is a capturing listener or not - capture, - }; - } - - // If a single node is passed, bind the event listener - events.forEach(type => { - elements[toggle ? 'addEventListener' : 'removeEventListener'](type, callback, options); - }); - }, - - // Bind event handler - on(element, events = '', callback, passive = true, capture = false) { - utils.toggleListener(element, events, callback, true, passive, capture); - }, - - // Unbind event handler - off(element, events = '', callback, passive = true, capture = false) { - utils.toggleListener(element, events, callback, false, passive, capture); - }, - - // Trigger event - dispatchEvent(element, type = '', bubbles = false, detail = {}) { - // Bail if no element - if (!utils.is.element(element) || utils.is.empty(type)) { - return; - } - - // Create and dispatch the event - const event = new CustomEvent(type, { - bubbles, - detail: Object.assign({}, detail, { - plyr: this, - }), - }); - - // Dispatch the event - element.dispatchEvent(event); - }, - - // Toggle aria-pressed state on a toggle button - // http://www.ssbbartgroup.com/blog/how-not-to-misuse-aria-states-properties-and-roles - toggleState(element, input) { - // If multiple elements passed - if (utils.is.array(element) || utils.is.nodeList(element)) { - Array.from(element).forEach(target => utils.toggleState(target, input)); - return; - } - - // Bail if no target - if (!utils.is.element(element)) { - return; - } - - // Get state - const pressed = element.getAttribute('aria-pressed') === 'true'; - const state = utils.is.boolean(input) ? input : !pressed; - - // Set the attribute on target - element.setAttribute('aria-pressed', state); - }, - - // Format string - format(input, ...args) { - if (utils.is.empty(input)) { - return input; - } - - return input.toString().replace(/{(\d+)}/g, (match, i) => (utils.is.string(args[i]) ? args[i] : '')); - }, - - // Get percentage - getPercentage(current, max) { - if (current === 0 || max === 0 || Number.isNaN(current) || Number.isNaN(max)) { - return 0; - } - - return (current / max * 100).toFixed(2); - }, - - // Time helpers - getHours(value) { - return parseInt((value / 60 / 60) % 60, 10); - }, - getMinutes(value) { - return parseInt((value / 60) % 60, 10); - }, - getSeconds(value) { - return parseInt(value % 60, 10); - }, - - // Format time to UI friendly string - formatTime(time = 0, displayHours = false, inverted = false) { - // Bail if the value isn't a number - if (!utils.is.number(time)) { - return this.formatTime(null, displayHours, inverted); - } - - // Format time component to add leading zero - const format = value => `0${value}`.slice(-2); - - // Breakdown to hours, mins, secs - let hours = this.getHours(time); - const mins = this.getMinutes(time); - const secs = this.getSeconds(time); - - // Do we need to display hours? - if (displayHours || hours > 0) { - hours = `${hours}:`; - } else { - hours = ''; - } - - // Render - return `${inverted ? '-' : ''}${hours}${format(mins)}:${format(secs)}`; - }, - - // Replace all occurances of a string in a string - replaceAll(input = '', find = '', replace = '') { - return input.replace(new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), replace.toString()); - }, - - // Convert to title case - toTitleCase(input = '') { - return input.toString().replace(/\w\S*/g, text => text.charAt(0).toUpperCase() + text.substr(1).toLowerCase()); - }, - - // Convert string to pascalCase - toPascalCase(input = '') { - let string = input.toString(); - - // Convert kebab case - string = utils.replaceAll(string, '-', ' '); - - // Convert snake case - string = utils.replaceAll(string, '_', ' '); - - // Convert to title case - string = utils.toTitleCase(string); - - // Convert to pascal case - return utils.replaceAll(string, ' ', ''); - }, - - // Convert string to pascalCase - toCamelCase(input = '') { - let string = input.toString(); - - // Convert to pascal case - string = utils.toPascalCase(string); - - // Convert first character to lowercase - return string.charAt(0).toLowerCase() + string.slice(1); - }, - - // Deep extend destination object with N more objects - extend(target = {}, ...sources) { - if (!sources.length) { - return target; - } - - const source = sources.shift(); - - if (!utils.is.object(source)) { - return target; - } - - Object.keys(source).forEach(key => { - if (utils.is.object(source[key])) { - if (!Object.keys(target).includes(key)) { - Object.assign(target, { [key]: {} }); - } - - utils.extend(target[key], source[key]); - } else { - Object.assign(target, { [key]: source[key] }); - } - }); - - return utils.extend(target, ...sources); - }, - - // Remove duplicates in an array - dedupe(array) { - if (!utils.is.array(array)) { - return array; - } - - return array.filter((item, index) => array.indexOf(item) === index); - }, - - // Clone nested objects - cloneDeep(object) { - return JSON.parse(JSON.stringify(object)); - }, - - // Get the closest value in an array - closest(array, value) { - if (!utils.is.array(array) || !array.length) { - return null; - } - - return array.reduce((prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev)); - }, - - // Get the provider for a given URL - getProviderByUrl(url) { - // YouTube - if (/^(https?:\/\/)?(www\.)?(youtube\.com|youtu\.?be)\/.+$/.test(url)) { - return providers.youtube; - } - - // Vimeo - if (/^https?:\/\/player.vimeo.com\/video\/\d{0,9}(?=\b|\/)/.test(url)) { - return providers.vimeo; - } - - return null; - }, - - // Parse YouTube ID from URL - parseYouTubeId(url) { - if (utils.is.empty(url)) { - return null; - } - - const regex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/; - return url.match(regex) ? RegExp.$2 : url; - }, - - // Parse Vimeo ID from URL - parseVimeoId(url) { - if (utils.is.empty(url)) { - return null; - } - - if (utils.is.number(Number(url))) { - return url; - } - - const regex = /^.*(vimeo.com\/|video\/)(\d+).*/; - return url.match(regex) ? RegExp.$2 : url; - }, - - // Convert a URL to a location object - parseUrl(url) { - const parser = document.createElement('a'); - parser.href = url; - return parser; - }, - - // Get URL query parameters - getUrlParams(input) { - let search = input; - - // Parse URL if needed - if (input.startsWith('http://') || input.startsWith('https://')) { - ({ search } = this.parseUrl(input)); - } - - if (this.is.empty(search)) { - return null; - } - - const hashes = search.slice(search.indexOf('?') + 1).split('&'); - - return hashes.reduce((params, hash) => { - const [ - key, - val, - ] = hash.split('='); - - return Object.assign(params, { [key]: decodeURIComponent(val) }); - }, {}); - }, - - // Convert object to URL parameters - buildUrlParams(input) { - if (!utils.is.object(input)) { - return ''; - } - - return Object.keys(input) - .map(key => `${encodeURIComponent(key)}=${encodeURIComponent(input[key])}`) - .join('&'); - }, - - // Remove HTML from a string - stripHTML(source) { - const fragment = document.createDocumentFragment(); - const element = document.createElement('div'); - fragment.appendChild(element); - element.innerHTML = source; - return fragment.firstChild.innerText; - }, - - // Get aspect ratio for dimensions - getAspectRatio(width, height) { - const getRatio = (w, h) => (h === 0 ? w : getRatio(h, w % h)); - const ratio = getRatio(width, height); - return `${width / ratio}:${height / ratio}`; - }, - - // Get the transition end event - get transitionEndEvent() { - const element = document.createElement('span'); - - const events = { - WebkitTransition: 'webkitTransitionEnd', - MozTransition: 'transitionend', - OTransition: 'oTransitionEnd otransitionend', - transition: 'transitionend', - }; - - const type = Object.keys(events).find(event => element.style[event] !== undefined); - - return utils.is.string(type) ? events[type] : false; - }, - - // Force repaint of element - repaint(element) { - setTimeout(() => { - utils.toggleHidden(element, true); - element.offsetHeight; // eslint-disable-line - utils.toggleHidden(element, false); - }, 0); - }, -}; - -export default utils; diff --git a/src/js/utils/animation.js b/src/js/utils/animation.js new file mode 100644 index 00000000..6b950b61 --- /dev/null +++ b/src/js/utils/animation.js @@ -0,0 +1,34 @@ +// ========================================================================== +// Animation utils +// ========================================================================== + +import { toggleHidden } from './elements'; +import is from './is'; + +export const transitionEndEvent = (() => { + const element = document.createElement('span'); + + const events = { + WebkitTransition: 'webkitTransitionEnd', + MozTransition: 'transitionend', + OTransition: 'oTransitionEnd otransitionend', + transition: 'transitionend', + }; + + const type = Object.keys(events).find(event => element.style[event] !== undefined); + + return is.string(type) ? events[type] : false; +})(); + +// Force repaint of element +export function repaint(element) { + setTimeout(() => { + try { + toggleHidden(element, true); + element.offsetHeight; // eslint-disable-line + toggleHidden(element, false); + } catch (e) { + // Do nothing + } + }, 0); +} diff --git a/src/js/utils/arrays.js b/src/js/utils/arrays.js new file mode 100644 index 00000000..69ef242c --- /dev/null +++ b/src/js/utils/arrays.js @@ -0,0 +1,23 @@ +// ========================================================================== +// Array utils +// ========================================================================== + +import is from './is'; + +// Remove duplicates in an array +export function dedupe(array) { + if (!is.array(array)) { + return array; + } + + return array.filter((item, index) => array.indexOf(item) === index); +} + +// Get the closest value in an array +export function closest(array, value) { + if (!is.array(array) || !array.length) { + return null; + } + + return array.reduce((prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev)); +} diff --git a/src/js/utils/browser.js b/src/js/utils/browser.js new file mode 100644 index 00000000..d574f683 --- /dev/null +++ b/src/js/utils/browser.js @@ -0,0 +1,13 @@ +// ========================================================================== +// Browser sniffing +// Unfortunately, due to mixed support, UA sniffing is required +// ========================================================================== + +const browser = { + isIE: /* @cc_on!@ */ false || !!document.documentMode, + isWebkit: 'WebkitAppearance' in document.documentElement.style && !/Edge/.test(navigator.userAgent), + isIPhone: /(iPhone|iPod)/gi.test(navigator.platform), + isIos: /(iPad|iPhone|iPod)/gi.test(navigator.platform), +}; + +export default browser; diff --git a/src/js/utils/elements.js b/src/js/utils/elements.js new file mode 100644 index 00000000..6be634e5 --- /dev/null +++ b/src/js/utils/elements.js @@ -0,0 +1,302 @@ +// ========================================================================== +// Element utils +// ========================================================================== + +import { toggleListener } from './events'; +import is from './is'; + +// Wrap an element +export function wrap(elements, wrapper) { + // Convert `elements` to an array, if necessary. + const targets = elements.length ? elements : [elements]; + + // Loops backwards to prevent having to clone the wrapper on the + // first element (see `child` below). + Array.from(targets) + .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; + + // Wrap the element (is automatically removed from its current + // parent). + child.appendChild(element); + + // If the element had a sibling, insert the wrapper before + // the sibling to maintain the HTML structure; otherwise, just + // append it to the parent. + if (sibling) { + parent.insertBefore(child, sibling); + } else { + parent.appendChild(child); + } + }); +} + +// Set attributes +export function setAttributes(element, attributes) { + if (!is.element(element) || is.empty(attributes)) { + return; + } + + // Assume null and undefined attributes should be left out, + // Setting them would otherwise convert them to "null" and "undefined" + Object.entries(attributes) + .filter(([, value]) => !is.nullOrUndefined(value)) + .forEach(([key, value]) => element.setAttribute(key, value)); +} + +// Create a DocumentFragment +export function createElement(type, attributes, text) { + // Create a new <element> + const element = document.createElement(type); + + // Set all passed attributes + if (is.object(attributes)) { + setAttributes(element, attributes); + } + + // Add text node + if (is.string(text)) { + element.innerText = text; + } + + // Return built element + return element; +} + +// Inaert an element after another +export function insertAfter(element, target) { + if (!is.element(element) || !is.element(target)) { + return; + } + + target.parentNode.insertBefore(element, target.nextSibling); +} + +// Insert a DocumentFragment +export function insertElement(type, parent, attributes, text) { + if (!is.element(parent)) { + return; + } + + parent.appendChild(createElement(type, attributes, text)); +} + +// Remove element(s) +export function removeElement(element) { + if (is.nodeList(element) || is.array(element)) { + Array.from(element).forEach(removeElement); + return; + } + + if (!is.element(element) || !is.element(element.parentNode)) { + return; + } + + element.parentNode.removeChild(element); +} + +// Remove all child elements +export function emptyElement(element) { + if (!is.element(element)) { + return; + } + + let { length } = element.childNodes; + + while (length > 0) { + element.removeChild(element.lastChild); + length -= 1; + } +} + +// Replace element +export function replaceElement(newChild, oldChild) { + if (!is.element(oldChild) || !is.element(oldChild.parentNode) || !is.element(newChild)) { + return null; + } + + oldChild.parentNode.replaceChild(newChild, oldChild); + + return newChild; +} + +// Get an attribute object from a string selector +export function getAttributesFromSelector(sel, existingAttributes) { + // For example: + // '.test' to { class: 'test' } + // '#test' to { id: 'test' } + // '[data-test="test"]' to { 'data-test': 'test' } + + if (!is.string(sel) || is.empty(sel)) { + return {}; + } + + const attributes = {}; + const existing = existingAttributes; + + sel.split(',').forEach(s => { + // Remove whitespace + 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[0]; + const value = parts.length > 1 ? parts[1].replace(/["']/g, '') : ''; + + // Get the first character + const start = selector.charAt(0); + + switch (start) { + case '.': + // Add to existing classname + if (is.object(existing) && is.string(existing.class)) { + existing.class += ` ${className}`; + } + + attributes.class = className; + break; + + case '#': + // ID selector + attributes.id = selector.replace('#', ''); + break; + + case '[': + // Attribute selector + attributes[key] = value; + + break; + + default: + break; + } + }); + + return attributes; +} + +// Toggle hidden +export function toggleHidden(element, hidden) { + if (!is.element(element)) { + return; + } + + let hide = hidden; + + if (!is.boolean(hide)) { + hide = !element.hidden; + } + + if (hide) { + element.setAttribute('hidden', ''); + } else { + element.removeAttribute('hidden'); + } +} + +// Mirror Element.classList.toggle, with IE compatibility for "force" argument +export function toggleClass(element, className, force) { + if (is.nodeList(element)) { + return Array.from(element).map(e => toggleClass(e, className, force)); + } + + if (is.element(element)) { + let method = 'toggle'; + if (typeof force !== 'undefined') { + method = force ? 'add' : 'remove'; + } + + element.classList[method](className); + return element.classList.contains(className); + } + + return false; +} + +// Has class name +export function hasClass(element, className) { + return is.element(element) && element.classList.contains(className); +} + +// Element matches selector +export function matches(element, selector) { + const prototype = { Element }; + + function match() { + return Array.from(document.querySelectorAll(selector)).includes(this); + } + + const matches = + prototype.matches || + prototype.webkitMatchesSelector || + prototype.mozMatchesSelector || + prototype.msMatchesSelector || + match; + + return matches.call(element, selector); +} + +// Find all elements +export function getElements(selector) { + return this.elements.container.querySelectorAll(selector); +} + +// Find a single element +export function getElement(selector) { + return this.elements.container.querySelector(selector); +} + +// Trap focus inside container +export function trapFocus(element = null, toggle = false) { + if (!is.element(element)) { + return; + } + + const focusable = getElements.call(this, 'button:not(:disabled), input:not(:disabled), [tabindex]'); + const first = focusable[0]; + const last = focusable[focusable.length - 1]; + + const trap = event => { + // Bail if not tab key or not fullscreen + if (event.key !== 'Tab' || event.keyCode !== 9) { + return; + } + + // Get the current focused element + const focused = document.activeElement; + + if (focused === last && !event.shiftKey) { + // Move focus to first element that can be tabbed if Shift isn't used + first.focus(); + event.preventDefault(); + } else if (focused === first && event.shiftKey) { + // Move focus to last element that can be tabbed if Shift is used + last.focus(); + event.preventDefault(); + } + }; + + toggleListener.call(this, this.elements.container, 'keydown', trap, toggle, false); +} + +// Set focus and tab focus class +export function setFocus(element = null, tabFocus = false) { + if (!is.element(element)) { + return; + } + + // Set regular focus + element.focus({ preventScroll: true }); + + // If we want to mimic keyboard focus via tab + if (tabFocus) { + toggleClass(element, this.config.classNames.tabFocus); + } +} diff --git a/src/js/utils/events.js b/src/js/utils/events.js new file mode 100644 index 00000000..9f734f04 --- /dev/null +++ b/src/js/utils/events.js @@ -0,0 +1,120 @@ +// ========================================================================== +// Event utils +// ========================================================================== + +import is from './is'; + +// Check for passive event listener support +// https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md +// https://www.youtube.com/watch?v=NPM6172J22g +const supportsPassiveListeners = (() => { + // Test via a getter in the options object to see if the passive property is accessed + let supported = false; + try { + const options = Object.defineProperty({}, 'passive', { + get() { + supported = true; + return null; + }, + }); + window.addEventListener('test', null, options); + window.removeEventListener('test', null, options); + } catch (e) { + // Do nothing + } + + return supported; +})(); + +// Toggle event listener +export function toggleListener(element, event, callback, toggle = false, passive = true, capture = false) { + // Bail if no element, event, or callback + if (!element || !('addEventListener' in element) || is.empty(event) || !is.function(callback)) { + return; + } + + // 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; + + // If passive events listeners are supported + if (supportsPassiveListeners) { + options = { + // Whether the listener can be passive (i.e. default never prevented) + passive, + // Whether the listener is a capturing listener or not + capture, + }; + } + + // If a single node is passed, bind the event listener + events.forEach(type => { + if (this && this.eventListeners && toggle) { + // Cache event listener + this.eventListeners.push({ element, type, callback, options }); + } + + element[toggle ? 'addEventListener' : 'removeEventListener'](type, callback, options); + }); +} + +// Bind event handler +export function on(element, events = '', callback, passive = true, capture = false) { + toggleListener.call(this, element, events, callback, true, passive, capture); +} + +// Unbind event handler +export function off(element, events = '', callback, passive = true, capture = false) { + toggleListener.call(this, element, events, callback, false, passive, capture); +} + +// Bind once-only event handler +export function once(element, events = '', callback, passive = true, capture = false) { + function onceCallback(...args) { + off(element, events, onceCallback, passive, capture); + callback.apply(this, args); + } + + toggleListener.call(this, element, events, onceCallback, true, passive, capture); +} + +// Trigger event +export function triggerEvent(element, type = '', bubbles = false, detail = {}) { + // Bail if no element + if (!is.element(element) || is.empty(type)) { + return; + } + + // Create and dispatch the event + const event = new CustomEvent(type, { + bubbles, + detail: Object.assign({}, detail, { + plyr: this, + }), + }); + + // Dispatch the event + element.dispatchEvent(event); +} + +// Unbind all cached event listeners +export function unbindListeners() { + if (this && this.eventListeners) { + this.eventListeners.forEach(item => { + const { element, type, callback, options } = item; + element.removeEventListener(type, callback, options); + }); + + this.eventListeners = []; + } +} + +// Run method when / if player is ready +export function ready() { + return new Promise( + resolve => (this.ready ? setTimeout(resolve, 0) : on.call(this, this.elements.container, 'ready', resolve)), + ).then(() => {}); +} diff --git a/src/js/utils/fetch.js b/src/js/utils/fetch.js new file mode 100644 index 00000000..ee33ea7c --- /dev/null +++ b/src/js/utils/fetch.js @@ -0,0 +1,42 @@ +// ========================================================================== +// Fetch wrapper +// Using XHR to avoid issues with older browsers +// ========================================================================== + +export default function fetch(url, responseType = 'text') { + return new Promise((resolve, reject) => { + try { + const request = new XMLHttpRequest(); + + // Check for CORS support + if (!('withCredentials' in request)) { + return; + } + + request.addEventListener('load', () => { + if (responseType === 'text') { + try { + resolve(JSON.parse(request.responseText)); + } catch (e) { + resolve(request.responseText); + } + } else { + resolve(request.response); + } + }); + + request.addEventListener('error', () => { + throw new Error(request.status); + }); + + request.open('GET', url, true); + + // Set the required response type + request.responseType = responseType; + + request.send(); + } catch (e) { + reject(e); + } + }); +} diff --git a/src/js/utils/i18n.js b/src/js/utils/i18n.js new file mode 100644 index 00000000..758ed695 --- /dev/null +++ b/src/js/utils/i18n.js @@ -0,0 +1,47 @@ +// ========================================================================== +// Plyr internationalization +// ========================================================================== + +import is from './is'; +import { getDeep } from './objects'; +import { replaceAll } from './strings'; + +// Skip i18n for abbreviations and brand names +const resources = { + pip: 'PIP', + airplay: 'AirPlay', + html5: 'HTML5', + vimeo: 'Vimeo', + youtube: 'YouTube', +}; + +const i18n = { + get(key = '', config = {}) { + if (is.empty(key) || is.empty(config)) { + return ''; + } + + let string = getDeep(config.i18n, key); + + if (is.empty(string)) { + if (Object.keys(resources).includes(key)) { + return resources[key]; + } + + return ''; + } + + const replace = { + '{seektime}': config.seekTime, + '{title}': config.title, + }; + + Object.entries(replace).forEach(([key, value]) => { + string = replaceAll(string, key, value); + }); + + return string; + }, +}; + +export default i18n; diff --git a/src/js/utils/is.js b/src/js/utils/is.js new file mode 100644 index 00000000..ab28f2ab --- /dev/null +++ b/src/js/utils/is.js @@ -0,0 +1,70 @@ +// ========================================================================== +// Type checking utils +// ========================================================================== + +const getConstructor = input => (input !== null && typeof input !== 'undefined' ? input.constructor : null); +const instanceOf = (input, constructor) => Boolean(input && constructor && input instanceof constructor); +const isNullOrUndefined = input => input === null || typeof input === 'undefined'; +const isObject = input => getConstructor(input) === Object; +const isNumber = input => getConstructor(input) === Number && !Number.isNaN(input); +const isString = input => getConstructor(input) === String; +const isBoolean = input => getConstructor(input) === Boolean; +const isFunction = input => getConstructor(input) === Function; +const isArray = input => Array.isArray(input); +const isWeakMap = input => instanceOf(input, WeakMap); +const isNodeList = input => instanceOf(input, NodeList); +const isElement = input => instanceOf(input, Element); +const isTextNode = input => getConstructor(input) === Text; +const isEvent = input => instanceOf(input, Event); +const isKeyboardEvent = input => instanceOf(input, KeyboardEvent); +const isCue = input => instanceOf(input, window.TextTrackCue) || instanceOf(input, window.VTTCue); +const isTrack = input => instanceOf(input, TextTrack) || (!isNullOrUndefined(input) && isString(input.kind)); + +const isEmpty = input => + isNullOrUndefined(input) || + ((isString(input) || isArray(input) || isNodeList(input)) && !input.length) || + (isObject(input) && !Object.keys(input).length); + +const isUrl = input => { + // Accept a URL object + if (instanceOf(input, window.URL)) { + return true; + } + + // Must be string from here + if (!isString(input)) { + return false; + } + + // Add the protocol if required + let string = input; + if (!input.startsWith('http://') || !input.startsWith('https://')) { + string = `http://${input}`; + } + + try { + return !isEmpty(new URL(string).hostname); + } catch (e) { + return false; + } +}; + +export default { + nullOrUndefined: isNullOrUndefined, + object: isObject, + number: isNumber, + string: isString, + boolean: isBoolean, + function: isFunction, + array: isArray, + weakMap: isWeakMap, + nodeList: isNodeList, + element: isElement, + textNode: isTextNode, + event: isEvent, + keyboardEvent: isKeyboardEvent, + cue: isCue, + track: isTrack, + url: isUrl, + empty: isEmpty, +}; diff --git a/src/js/utils/loadImage.js b/src/js/utils/loadImage.js new file mode 100644 index 00000000..8acd2496 --- /dev/null +++ b/src/js/utils/loadImage.js @@ -0,0 +1,19 @@ +// ========================================================================== +// Load image avoiding xhr/fetch CORS issues +// Server status can't be obtained this way unfortunately, so this uses "naturalWidth" to determine if the image has loaded +// By default it checks if it is at least 1px, but you can add a second argument to change this +// ========================================================================== + +export default function loadImage(src, minWidth = 1) { + return new Promise((resolve, reject) => { + const image = new Image(); + + const handler = () => { + delete image.onload; + delete image.onerror; + (image.naturalWidth >= minWidth ? resolve : reject)(image); + }; + + Object.assign(image, { onload: handler, onerror: handler, src }); + }); +} diff --git a/src/js/utils/loadScript.js b/src/js/utils/loadScript.js new file mode 100644 index 00000000..81ae36f4 --- /dev/null +++ b/src/js/utils/loadScript.js @@ -0,0 +1,14 @@ +// ========================================================================== +// Load an external script +// ========================================================================== + +import loadjs from 'loadjs'; + +export default function loadScript(url) { + return new Promise((resolve, reject) => { + loadjs(url, { + success: resolve, + error: reject, + }); + }); +} diff --git a/src/js/utils/loadSprite.js b/src/js/utils/loadSprite.js new file mode 100644 index 00000000..917bd6ac --- /dev/null +++ b/src/js/utils/loadSprite.js @@ -0,0 +1,76 @@ +// ========================================================================== +// Sprite loader +// ========================================================================== + +import Storage from '../storage'; +import fetch from './fetch'; +import is from './is'; + +// Load an external SVG sprite +export default function loadSprite(url, id) { + if (!is.string(url)) { + return; + } + + const prefix = 'cache'; + const hasId = is.string(id); + let isCached = false; + + const exists = () => document.getElementById(id) !== null; + + const update = (container, data) => { + container.innerHTML = data; + + // Check again incase of race condition + if (hasId && exists()) { + return; + } + + // Inject the SVG to the body + document.body.insertAdjacentElement('afterbegin', container); + }; + + // Only load once if ID set + if (!hasId || !exists()) { + const useStorage = Storage.supported; + + // Create container + const container = document.createElement('div'); + container.setAttribute('hidden', ''); + + if (hasId) { + container.setAttribute('id', id); + } + + // Check in cache + if (useStorage) { + const cached = window.localStorage.getItem(`${prefix}-${id}`); + isCached = cached !== null; + + if (isCached) { + const data = JSON.parse(cached); + update(container, data.content); + } + } + + // Get the sprite + fetch(url) + .then(result => { + if (is.empty(result)) { + return; + } + + if (useStorage) { + window.localStorage.setItem( + `${prefix}-${id}`, + JSON.stringify({ + content: result, + }), + ); + } + + update(container, result); + }) + .catch(() => {}); + } +} diff --git a/src/js/utils/objects.js b/src/js/utils/objects.js new file mode 100644 index 00000000..225bb459 --- /dev/null +++ b/src/js/utils/objects.js @@ -0,0 +1,42 @@ +// ========================================================================== +// Object utils +// ========================================================================== + +import is from './is'; + +// Clone nested objects +export function cloneDeep(object) { + return JSON.parse(JSON.stringify(object)); +} + +// Get a nested value in an object +export function getDeep(object, path) { + return path.split('.').reduce((obj, key) => obj && obj[key], object); +} + +// Deep extend destination object with N more objects +export function extend(target = {}, ...sources) { + if (!sources.length) { + return target; + } + + const source = sources.shift(); + + if (!is.object(source)) { + return target; + } + + Object.keys(source).forEach(key => { + if (is.object(source[key])) { + if (!Object.keys(target).includes(key)) { + Object.assign(target, { [key]: {} }); + } + + extend(target[key], source[key]); + } else { + Object.assign(target, { [key]: source[key] }); + } + }); + + return extend(target, ...sources); +} diff --git a/src/js/utils/strings.js b/src/js/utils/strings.js new file mode 100644 index 00000000..6b9a65a2 --- /dev/null +++ b/src/js/utils/strings.js @@ -0,0 +1,85 @@ +// ========================================================================== +// String utils +// ========================================================================== + +import is from './is'; + +// Generate a random ID +export function generateId(prefix) { + return `${prefix}-${Math.floor(Math.random() * 10000)}`; +} + +// Format string +export function format(input, ...args) { + if (is.empty(input)) { + return input; + } + + return input.toString().replace(/{(\d+)}/g, (match, i) => args[i].toString()); +} + +// Get percentage +export function getPercentage(current, max) { + if (current === 0 || max === 0 || Number.isNaN(current) || Number.isNaN(max)) { + return 0; + } + + return ((current / max) * 100).toFixed(2); +} + +// Replace all occurances of a string in a string +export function replaceAll(input = '', find = '', replace = '') { + return input.replace( + new RegExp(find.toString().replace(/([.*+?^=!:${}()|[\]/\\])/g, '\\$1'), 'g'), + replace.toString(), + ); +} + +// Convert to title case +export function toTitleCase(input = '') { + return input.toString().replace(/\w\S*/g, text => text.charAt(0).toUpperCase() + text.substr(1).toLowerCase()); +} + +// Convert string to pascalCase +export function toPascalCase(input = '') { + let string = input.toString(); + + // Convert kebab case + string = replaceAll(string, '-', ' '); + + // Convert snake case + string = replaceAll(string, '_', ' '); + + // Convert to title case + string = toTitleCase(string); + + // Convert to pascal case + return replaceAll(string, ' ', ''); +} + +// Convert string to pascalCase +export function toCamelCase(input = '') { + let string = input.toString(); + + // Convert to pascal case + string = toPascalCase(string); + + // Convert first character to lowercase + return string.charAt(0).toLowerCase() + string.slice(1); +} + +// Remove HTML from a string +export function stripHTML(source) { + const fragment = document.createDocumentFragment(); + const element = document.createElement('div'); + fragment.appendChild(element); + element.innerHTML = source; + return fragment.firstChild.innerText; +} + +// Like outerHTML, but also works for DocumentFragment +export function getHTML(element) { + const wrapper = document.createElement('div'); + wrapper.appendChild(element); + return wrapper.innerHTML; +} diff --git a/src/js/utils/time.js b/src/js/utils/time.js new file mode 100644 index 00000000..7c9860fd --- /dev/null +++ b/src/js/utils/time.js @@ -0,0 +1,36 @@ +// ========================================================================== +// Time utils +// ========================================================================== + +import is from './is'; + +// Time helpers +export const getHours = value => parseInt((value / 60 / 60) % 60, 10); +export const getMinutes = value => parseInt((value / 60) % 60, 10); +export const getSeconds = value => parseInt(value % 60, 10); + +// Format time to UI friendly string +export function formatTime(time = 0, displayHours = false, inverted = false) { + // Bail if the value isn't a number + if (!is.number(time)) { + return formatTime(null, displayHours, inverted); + } + + // 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); + const secs = getSeconds(time); + + // Do we need to display hours? + if (displayHours || hours > 0) { + hours = `${hours}:`; + } else { + hours = ''; + } + + // Render + return `${inverted && time > 0 ? '-' : ''}${hours}${format(mins)}:${format(secs)}`; +} diff --git a/src/js/utils/urls.js b/src/js/utils/urls.js new file mode 100644 index 00000000..3ebe622e --- /dev/null +++ b/src/js/utils/urls.js @@ -0,0 +1,39 @@ +// ========================================================================== +// URL utils +// ========================================================================== + +import is from './is'; + +/** + * Parse a string to a URL object + * @param {string} input - the URL to be parsed + * @param {boolean} safe - failsafe parsing + */ +export function parseUrl(input, safe = true) { + let url = input; + + if (safe) { + const parser = document.createElement('a'); + parser.href = url; + url = parser.href; + } + + try { + return new URL(url); + } catch (e) { + return null; + } +} + +// Convert object to URLSearchParams +export function buildUrlParams(input) { + const params = new URLSearchParams(); + + if (is.object(input)) { + Object.entries(input).forEach(([key, value]) => { + params.set(key, value); + }); + } + + return params; +} |