Fix merge conflicts
This commit is contained in:
Danielh112
@ -8,12 +8,12 @@ import support from './support';
|
||||
import { dedupe } from './utils/arrays';
|
||||
import browser from './utils/browser';
|
||||
import {
|
||||
createElement,
|
||||
emptyElement,
|
||||
getAttributesFromSelector,
|
||||
insertAfter,
|
||||
removeElement,
|
||||
toggleClass,
|
||||
createElement,
|
||||
emptyElement,
|
||||
getAttributesFromSelector,
|
||||
insertAfter,
|
||||
removeElement,
|
||||
toggleClass,
|
||||
} from './utils/elements';
|
||||
import { on, triggerEvent } from './utils/events';
|
||||
import fetch from './utils/fetch';
|
||||
@ -23,368 +23,385 @@ import { getHTML } from './utils/strings';
|
||||
import { parseUrl } from './utils/urls';
|
||||
|
||||
const captions = {
|
||||
// Setup captions
|
||||
setup() {
|
||||
// Requires UI support
|
||||
if (!this.supported.ui) {
|
||||
return;
|
||||
}
|
||||
// Setup captions
|
||||
setup() {
|
||||
// Requires UI support
|
||||
if (!this.supported.ui) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Only Vimeo and HTML5 video supported at this point
|
||||
if (!this.isVideo || this.isYouTube || (this.isHTML5 && !support.textTracks)) {
|
||||
// Clear menu and hide
|
||||
if (
|
||||
is.array(this.config.controls) &&
|
||||
this.config.controls.includes('settings') &&
|
||||
this.config.settings.includes('captions')
|
||||
) {
|
||||
controls.setCaptionsMenu.call(this);
|
||||
}
|
||||
// Only Vimeo and HTML5 video supported at this point
|
||||
if (!this.isVideo || this.isYouTube || (this.isHTML5 && !support.textTracks)) {
|
||||
// Clear menu and hide
|
||||
if (
|
||||
is.array(this.config.controls) &&
|
||||
this.config.controls.includes('settings') &&
|
||||
this.config.settings.includes('captions')
|
||||
) {
|
||||
controls.setCaptionsMenu.call(this);
|
||||
}
|
||||
|
||||
return;
|
||||
}
|
||||
return;
|
||||
}
|
||||
|
||||
// Inject the container
|
||||
if (!is.element(this.elements.captions)) {
|
||||
this.elements.captions = createElement('div', getAttributesFromSelector(this.config.selectors.captions));
|
||||
// Inject the container
|
||||
if (!is.element(this.elements.captions)) {
|
||||
this.elements.captions = createElement('div', getAttributesFromSelector(this.config.selectors.captions));
|
||||
|
||||
insertAfter(this.elements.captions, this.elements.wrapper);
|
||||
}
|
||||
insertAfter(this.elements.captions, this.elements.wrapper);
|
||||
}
|
||||
|
||||
// Fix IE captions if CORS is used
|
||||
// Fetch captions and inject as blobs instead (data URIs not supported!)
|
||||
if (browser.isIE && window.URL) {
|
||||
const elements = this.media.querySelectorAll('track');
|
||||
// Fix IE captions if CORS is used
|
||||
// Fetch captions and inject as blobs instead (data URIs not supported!)
|
||||
if (browser.isIE && window.URL) {
|
||||
const elements = this.media.querySelectorAll('track');
|
||||
|
||||
Array.from(elements).forEach(track => {
|
||||
const src = track.getAttribute('src');
|
||||
const url = parseUrl(src);
|
||||
Array.from(elements).forEach(track => {
|
||||
const src = track.getAttribute('src');
|
||||
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(() => {
|
||||
removeElement(track);
|
||||
});
|
||||
}
|
||||
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(() => {
|
||||
removeElement(track);
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 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
|
||||
// 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
|
||||
|
||||
const browserLanguages = navigator.languages || [navigator.language || navigator.userLanguage || 'en'];
|
||||
const languages = dedupe(browserLanguages.map(language => language.split('-')[0]));
|
||||
let language = (this.storage.get('language') || this.config.captions.language || 'auto').toLowerCase();
|
||||
const browserLanguages = navigator.languages || [navigator.language || navigator.userLanguage || 'en'];
|
||||
const languages = dedupe(browserLanguages.map(language => language.split('-')[0]));
|
||||
let language = (this.storage.get('language') || this.config.captions.language || 'auto').toLowerCase();
|
||||
|
||||
// Use first browser language when language is 'auto'
|
||||
if (language === 'auto') {
|
||||
[language] = languages;
|
||||
}
|
||||
// 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);
|
||||
}
|
||||
let active = this.storage.get('captions');
|
||||
if (!is.boolean(active)) {
|
||||
({ active } = this.config.captions);
|
||||
}
|
||||
|
||||
Object.assign(this.captions, {
|
||||
toggled: false,
|
||||
active,
|
||||
language,
|
||||
languages,
|
||||
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);
|
||||
},
|
||||
|
||||
// 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) {
|
||||
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
|
||||
// Note: mode='hidden' forces a track to download. To ensure every track
|
||||
// isn't downloaded at once, only 'showing' tracks should be reassigned
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
if (track.mode === 'showing') {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
track.mode = 'hidden';
|
||||
}
|
||||
|
||||
// Add event listener for cue changes
|
||||
on.call(this, track, 'cuechange', () => captions.updateCues.call(this));
|
||||
});
|
||||
}
|
||||
|
||||
// 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 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);
|
||||
}
|
||||
|
||||
// Update available languages in list next tick (the event must not be triggered before the listeners)
|
||||
setTimeout(captions.update.bind(this), 0);
|
||||
},
|
||||
// Enable or disable captions based on track length
|
||||
toggleClass(this.elements.container, this.config.classNames.captions.enabled, !is.empty(tracks));
|
||||
|
||||
// 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));
|
||||
// Update available languages in list
|
||||
if (
|
||||
is.array(this.config.controls) &&
|
||||
this.config.controls.includes('settings') &&
|
||||
this.config.settings.includes('captions')
|
||||
) {
|
||||
controls.setCaptionsMenu.call(this);
|
||||
}
|
||||
},
|
||||
|
||||
// Handle tracks (add event listener and "pseudo"-default)
|
||||
if (this.isHTML5 && this.isVideo) {
|
||||
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',
|
||||
});
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Turn off native caption rendering to avoid double captions
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
track.mode = 'hidden';
|
||||
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;
|
||||
|
||||
// Add event listener for cue changes
|
||||
on.call(this, track, 'cuechange', () => captions.updateCues.call(this));
|
||||
});
|
||||
}
|
||||
// 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 });
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
|
||||
// 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 ((is.array(this.config.controls) && this.config.controls.includes('settings'))
|
||||
&& this.config.settings.includes('captions')) {
|
||||
controls.setCaptionsMenu.call(this);
|
||||
}
|
||||
},
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
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');
|
||||
}
|
||||
},
|
||||
|
||||
// Set captions by track index
|
||||
// Used internally for the currentTrack setter with the passive option forced to false
|
||||
set(index, passive = true) {
|
||||
// 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);
|
||||
|
||||
// Disable captions if setting to -1
|
||||
if (index === -1) {
|
||||
captions.toggle.call(this, false, passive);
|
||||
return;
|
||||
}
|
||||
// Override user preferences to avoid switching languages if a matching track is added
|
||||
this.captions.language = track.language;
|
||||
|
||||
if (!is.number(index)) {
|
||||
this.debug.warn('Invalid caption argument', index);
|
||||
return;
|
||||
}
|
||||
// Set caption, but don't store in localStorage as user preference
|
||||
captions.set.call(this, tracks.indexOf(track));
|
||||
return;
|
||||
}
|
||||
|
||||
if (!(index in tracks)) {
|
||||
this.debug.warn('Track not found', index);
|
||||
return;
|
||||
}
|
||||
// Toggle button if it's enabled
|
||||
if (this.elements.buttons.captions) {
|
||||
this.elements.buttons.captions.pressed = active;
|
||||
}
|
||||
|
||||
if (this.captions.currentTrack !== index) {
|
||||
this.captions.currentTrack = index;
|
||||
const track = tracks[index];
|
||||
const { language } = track || {};
|
||||
// Add class hook
|
||||
toggleClass(this.elements.container, activeClass, active);
|
||||
|
||||
// Store reference to node for invalidation on remove
|
||||
this.captions.currentTrackNode = track;
|
||||
this.captions.toggled = active;
|
||||
|
||||
// Update settings menu
|
||||
controls.updateSetting.call(this, 'captions');
|
||||
// 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 });
|
||||
}
|
||||
// Trigger event (not used internally)
|
||||
triggerEvent.call(this, this.media, active ? 'captionsenabled' : 'captionsdisabled');
|
||||
}
|
||||
|
||||
// Handle Vimeo captions
|
||||
if (this.isVimeo) {
|
||||
this.embed.enableTextTrack(language);
|
||||
}
|
||||
// Wait for the call stack to clear before setting mode='hidden'
|
||||
// on the active track - forcing the browser to download it
|
||||
setTimeout(() => {
|
||||
if (active && this.captions.toggled) {
|
||||
this.captions.currentTrackNode.mode = 'hidden';
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// Trigger event
|
||||
triggerEvent.call(this, this.media, 'languagechange');
|
||||
}
|
||||
// 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);
|
||||
|
||||
// Show captions
|
||||
captions.toggle.call(this, true, passive);
|
||||
// Disable captions if setting to -1
|
||||
if (index === -1) {
|
||||
captions.toggle.call(this, false, passive);
|
||||
return;
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
},
|
||||
if (!is.number(index)) {
|
||||
this.debug.warn('Invalid caption argument', index);
|
||||
return;
|
||||
}
|
||||
|
||||
// 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();
|
||||
if (!(index in tracks)) {
|
||||
this.debug.warn('Track not found', index);
|
||||
return;
|
||||
}
|
||||
|
||||
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 });
|
||||
}
|
||||
|
||||
// Set currentTrack
|
||||
const tracks = captions.getTracks.call(this);
|
||||
const track = captions.findTrack.call(this, [language]);
|
||||
captions.set.call(this, tracks.indexOf(track), passive);
|
||||
},
|
||||
// Handle Vimeo captions
|
||||
if (this.isVimeo) {
|
||||
this.embed.enableTextTrack(language);
|
||||
}
|
||||
|
||||
// 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));
|
||||
},
|
||||
// Trigger event
|
||||
triggerEvent.call(this, this.media, 'languagechange');
|
||||
}
|
||||
|
||||
// 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;
|
||||
// Show captions
|
||||
captions.toggle.call(this, true, passive);
|
||||
|
||||
languages.every(language => {
|
||||
track = sorted.find(t => t.language === language);
|
||||
return !track; // Break iteration if there is a match
|
||||
});
|
||||
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);
|
||||
}
|
||||
},
|
||||
|
||||
// If no match is found but is required, get first
|
||||
return track || (force ? sorted[0] : undefined);
|
||||
},
|
||||
// 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;
|
||||
|
||||
// Get the current track
|
||||
getCurrentTrack() {
|
||||
return captions.getTracks.call(this)[this.currentTrack];
|
||||
},
|
||||
// Set currentTrack
|
||||
const tracks = captions.getTracks.call(this);
|
||||
const track = captions.findTrack.call(this, [language]);
|
||||
captions.set.call(this, tracks.indexOf(track), passive);
|
||||
},
|
||||
|
||||
// Get UI label for track
|
||||
getLabel(track) {
|
||||
let currentTrack = 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));
|
||||
},
|
||||
|
||||
if (!is.track(currentTrack) && support.textTracks && this.captions.toggled) {
|
||||
currentTrack = captions.getCurrentTrack.call(this);
|
||||
}
|
||||
// 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;
|
||||
|
||||
if (is.track(currentTrack)) {
|
||||
if (!is.empty(currentTrack.label)) {
|
||||
return currentTrack.label;
|
||||
}
|
||||
languages.every(language => {
|
||||
track = sorted.find(t => t.language === language);
|
||||
return !track; // Break iteration if there is a match
|
||||
});
|
||||
|
||||
if (!is.empty(currentTrack.language)) {
|
||||
return track.language.toUpperCase();
|
||||
}
|
||||
// If no match is found but is required, get first
|
||||
return track || (force ? sorted[0] : undefined);
|
||||
},
|
||||
|
||||
return i18n.get('enabled', this.config);
|
||||
}
|
||||
// Get the current track
|
||||
getCurrentTrack() {
|
||||
return captions.getTracks.call(this)[this.currentTrack];
|
||||
},
|
||||
|
||||
return i18n.get('disabled', this.config);
|
||||
},
|
||||
// Get UI label for track
|
||||
getLabel(track) {
|
||||
let currentTrack = track;
|
||||
|
||||
// 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;
|
||||
}
|
||||
if (!is.track(currentTrack) && support.textTracks && this.captions.toggled) {
|
||||
currentTrack = captions.getCurrentTrack.call(this);
|
||||
}
|
||||
|
||||
if (!is.element(this.elements.captions)) {
|
||||
this.debug.warn('No captions element to render to');
|
||||
return;
|
||||
}
|
||||
if (is.track(currentTrack)) {
|
||||
if (!is.empty(currentTrack.label)) {
|
||||
return currentTrack.label;
|
||||
}
|
||||
|
||||
// Only accept array or empty input
|
||||
if (!is.nullOrUndefined(input) && !Array.isArray(input)) {
|
||||
this.debug.warn('updateCues: Invalid input', input);
|
||||
return;
|
||||
}
|
||||
if (!is.empty(currentTrack.language)) {
|
||||
return track.language.toUpperCase();
|
||||
}
|
||||
|
||||
let cues = input;
|
||||
return i18n.get('enabled', this.config);
|
||||
}
|
||||
|
||||
// Get cues from track
|
||||
if (!cues) {
|
||||
const track = captions.getCurrentTrack.call(this);
|
||||
return i18n.get('disabled', this.config);
|
||||
},
|
||||
|
||||
cues = Array.from((track || {}).activeCues || [])
|
||||
.map(cue => cue.getCueAsHTML())
|
||||
.map(getHTML);
|
||||
}
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Set new caption text
|
||||
const content = cues.map(cueText => cueText.trim()).join('\n');
|
||||
const changed = content !== this.elements.captions.innerHTML;
|
||||
if (!is.element(this.elements.captions)) {
|
||||
this.debug.warn('No captions element to render to');
|
||||
return;
|
||||
}
|
||||
|
||||
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);
|
||||
// Only accept array or empty input
|
||||
if (!is.nullOrUndefined(input) && !Array.isArray(input)) {
|
||||
this.debug.warn('updateCues: Invalid input', input);
|
||||
return;
|
||||
}
|
||||
|
||||
// Trigger event
|
||||
triggerEvent.call(this, this.media, 'cuechange');
|
||||
}
|
||||
},
|
||||
let cues = input;
|
||||
|
||||
// Get cues from track
|
||||
if (!cues) {
|
||||
const track = captions.getCurrentTrack.call(this);
|
||||
|
||||
cues = Array.from((track || {}).activeCues || [])
|
||||
.map(cue => cue.getCueAsHTML())
|
||||
.map(getHTML);
|
||||
}
|
||||
|
||||
// Set new caption text
|
||||
const content = cues.map(cueText => cueText.trim()).join('\n');
|
||||
const changed = content !== this.elements.captions.innerHTML;
|
||||
|
||||
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);
|
||||
|
||||
// Trigger event
|
||||
triggerEvent.call(this, this.media, 'cuechange');
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default captions;
|
||||
|
||||
@ -3,437 +3,440 @@
|
||||
// ==========================================================================
|
||||
|
||||
const defaults = {
|
||||
// Disable
|
||||
// Disable
|
||||
enabled: true,
|
||||
|
||||
// Custom media title
|
||||
title: '',
|
||||
|
||||
// Logging to console
|
||||
debug: false,
|
||||
|
||||
// Auto play (if supported)
|
||||
autoplay: false,
|
||||
|
||||
// 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,
|
||||
|
||||
// Default volume
|
||||
volume: 1,
|
||||
muted: false,
|
||||
|
||||
// Pass a custom duration
|
||||
duration: null,
|
||||
|
||||
// Display the media duration on load in the current time position
|
||||
// If you have opted to display both duration and currentTime, this is ignored
|
||||
displayDuration: true,
|
||||
|
||||
// Invert the current time to be a countdown
|
||||
invertTime: true,
|
||||
|
||||
// Clicking the currentTime inverts it's value to show time left rather than elapsed
|
||||
toggleInvert: true,
|
||||
|
||||
// Force an aspect ratio
|
||||
// The format must be `'w:h'` (e.g. `'16:9'`)
|
||||
ratio: null,
|
||||
|
||||
// Click video container to play/pause
|
||||
clickToPlay: true,
|
||||
|
||||
// Auto hide the controls
|
||||
hideControls: true,
|
||||
|
||||
// Reset to start when playback ended
|
||||
resetOnEnd: false,
|
||||
|
||||
// Disable the standard context menu
|
||||
disableContextMenu: true,
|
||||
|
||||
// Sprite (for icons)
|
||||
loadSprite: true,
|
||||
iconPrefix: 'plyr',
|
||||
iconUrl: 'https://cdn.plyr.io/3.6.1/plyr.svg',
|
||||
|
||||
// Blank video (used to prevent errors on source change)
|
||||
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
|
||||
|
||||
// Quality default
|
||||
quality: {
|
||||
default: 576,
|
||||
// The options to display in the UI, if available for the source media
|
||||
options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240],
|
||||
forced: false,
|
||||
onChange: null,
|
||||
},
|
||||
|
||||
// Set loops
|
||||
loop: {
|
||||
active: false,
|
||||
// start: null,
|
||||
// end: null,
|
||||
},
|
||||
|
||||
// Speed default and options to display
|
||||
speed: {
|
||||
selected: 1,
|
||||
// The options to display in the UI, if available for the source media (e.g. Vimeo and YouTube only support 0.5x-4x)
|
||||
options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 4],
|
||||
},
|
||||
|
||||
// Keyboard shortcut settings
|
||||
keyboard: {
|
||||
focused: true,
|
||||
global: false,
|
||||
},
|
||||
|
||||
// Display tooltips
|
||||
tooltips: {
|
||||
controls: false,
|
||||
seek: true,
|
||||
},
|
||||
|
||||
// Captions settings
|
||||
captions: {
|
||||
active: false,
|
||||
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
|
||||
fullscreen: {
|
||||
enabled: true, // Allow fullscreen?
|
||||
fallback: true, // Fallback using full viewport/window
|
||||
iosNative: false, // Use the native fullscreen in iOS (disables custom controls)
|
||||
// Selector for the fullscreen container so contextual / non-player content can remain visible in fullscreen mode
|
||||
// Non-ancestors of the player element will be ignored
|
||||
// container: null, // defaults to the player element
|
||||
},
|
||||
|
||||
// Local storage
|
||||
storage: {
|
||||
enabled: true,
|
||||
key: 'plyr',
|
||||
},
|
||||
|
||||
// Custom media title
|
||||
title: '',
|
||||
// Default controls
|
||||
controls: [
|
||||
'play-large',
|
||||
// 'restart',
|
||||
// 'rewind',
|
||||
'play',
|
||||
// 'fast-forward',
|
||||
'progress',
|
||||
'current-time',
|
||||
// 'duration',
|
||||
'mute',
|
||||
'volume',
|
||||
'captions',
|
||||
'settings',
|
||||
'pip',
|
||||
'airplay',
|
||||
// 'download',
|
||||
'fullscreen',
|
||||
],
|
||||
settings: ['captions', 'quality', 'speed'],
|
||||
|
||||
// Logging to console
|
||||
debug: false,
|
||||
|
||||
// Auto play (if supported)
|
||||
autoplay: false,
|
||||
|
||||
// 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,
|
||||
|
||||
// Default volume
|
||||
volume: 1,
|
||||
muted: false,
|
||||
|
||||
// Pass a custom duration
|
||||
duration: null,
|
||||
|
||||
// Display the media duration on load in the current time position
|
||||
// If you have opted to display both duration and currentTime, this is ignored
|
||||
displayDuration: true,
|
||||
|
||||
// Invert the current time to be a countdown
|
||||
invertTime: true,
|
||||
|
||||
// Clicking the currentTime inverts it's value to show time left rather than elapsed
|
||||
toggleInvert: true,
|
||||
|
||||
// Force an aspect ratio
|
||||
// The format must be `'w:h'` (e.g. `'16:9'`)
|
||||
ratio: null,
|
||||
|
||||
// Click video container to play/pause
|
||||
clickToPlay: true,
|
||||
|
||||
// Auto hide the controls
|
||||
hideControls: true,
|
||||
|
||||
// Reset to start when playback ended
|
||||
resetOnEnd: false,
|
||||
|
||||
// Disable the standard context menu
|
||||
disableContextMenu: true,
|
||||
|
||||
// Sprite (for icons)
|
||||
loadSprite: true,
|
||||
iconPrefix: 'plyr',
|
||||
iconUrl: 'https://cdn.plyr.io/3.5.10/plyr.svg',
|
||||
|
||||
// Blank video (used to prevent errors on source change)
|
||||
blankVideo: 'https://cdn.plyr.io/static/blank.mp4',
|
||||
|
||||
// Quality default
|
||||
quality: {
|
||||
default: 576,
|
||||
// The options to display in the UI, if available for the source media
|
||||
options: [4320, 2880, 2160, 1440, 1080, 720, 576, 480, 360, 240],
|
||||
forced: false,
|
||||
onChange: null,
|
||||
// Localisation
|
||||
i18n: {
|
||||
restart: 'Restart',
|
||||
rewind: 'Rewind {seektime}s',
|
||||
play: 'Play',
|
||||
pause: 'Pause',
|
||||
fastForward: 'Forward {seektime}s',
|
||||
seek: 'Seek',
|
||||
seekLabel: '{currentTime} of {duration}',
|
||||
played: 'Played',
|
||||
buffered: 'Buffered',
|
||||
currentTime: 'Current time',
|
||||
duration: 'Duration',
|
||||
volume: 'Volume',
|
||||
mute: 'Mute',
|
||||
unmute: 'Unmute',
|
||||
enableCaptions: 'Enable captions',
|
||||
disableCaptions: 'Disable captions',
|
||||
download: 'Download',
|
||||
enterFullscreen: 'Enter fullscreen',
|
||||
exitFullscreen: 'Exit fullscreen',
|
||||
frameTitle: 'Player for {title}',
|
||||
captions: 'Captions',
|
||||
settings: 'Settings',
|
||||
pip: 'PIP',
|
||||
menuBack: 'Go back to previous menu',
|
||||
speed: 'Speed',
|
||||
normal: 'Normal',
|
||||
quality: 'Quality',
|
||||
loop: 'Loop',
|
||||
start: 'Start',
|
||||
end: 'End',
|
||||
all: 'All',
|
||||
reset: 'Reset',
|
||||
disabled: 'Disabled',
|
||||
enabled: 'Enabled',
|
||||
advertisement: 'Ad',
|
||||
qualityBadge: {
|
||||
2160: '4K',
|
||||
1440: 'HD',
|
||||
1080: 'HD',
|
||||
720: 'HD',
|
||||
576: 'SD',
|
||||
480: 'SD',
|
||||
},
|
||||
},
|
||||
|
||||
// Set loops
|
||||
loop: {
|
||||
active: false,
|
||||
// start: null,
|
||||
// end: null,
|
||||
},
|
||||
|
||||
// Speed default and options to display
|
||||
speed: {
|
||||
selected: 1,
|
||||
// The options to display in the UI, if available for the source media (e.g. Vimeo and YouTube only support 0.5x-4x)
|
||||
options: [0.5, 0.75, 1, 1.25, 1.5, 1.75, 2, 4],
|
||||
},
|
||||
|
||||
// Keyboard shortcut settings
|
||||
keyboard: {
|
||||
focused: true,
|
||||
global: false,
|
||||
},
|
||||
|
||||
// Display tooltips
|
||||
tooltips: {
|
||||
controls: false,
|
||||
seek: true,
|
||||
},
|
||||
|
||||
// Captions settings
|
||||
captions: {
|
||||
active: false,
|
||||
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
|
||||
fullscreen: {
|
||||
enabled: true, // Allow fullscreen?
|
||||
fallback: true, // Fallback using full viewport/window
|
||||
iosNative: false, // Use the native fullscreen in iOS (disables custom controls)
|
||||
},
|
||||
|
||||
// Local storage
|
||||
storage: {
|
||||
enabled: true,
|
||||
key: 'plyr',
|
||||
},
|
||||
|
||||
// Default controls
|
||||
controls: [
|
||||
'play-large',
|
||||
// 'restart',
|
||||
// 'rewind',
|
||||
'play',
|
||||
// 'fast-forward',
|
||||
'progress',
|
||||
'current-time',
|
||||
// 'duration',
|
||||
'mute',
|
||||
'volume',
|
||||
'captions',
|
||||
'settings',
|
||||
'pip',
|
||||
'airplay',
|
||||
// 'download',
|
||||
'fullscreen',
|
||||
],
|
||||
settings: ['captions', 'quality', 'speed'],
|
||||
|
||||
// Localisation
|
||||
i18n: {
|
||||
restart: 'Restart',
|
||||
rewind: 'Rewind {seektime}s',
|
||||
play: 'Play',
|
||||
pause: 'Pause',
|
||||
fastForward: 'Forward {seektime}s',
|
||||
seek: 'Seek',
|
||||
seekLabel: '{currentTime} of {duration}',
|
||||
played: 'Played',
|
||||
buffered: 'Buffered',
|
||||
currentTime: 'Current time',
|
||||
duration: 'Duration',
|
||||
volume: 'Volume',
|
||||
mute: 'Mute',
|
||||
unmute: 'Unmute',
|
||||
enableCaptions: 'Enable captions',
|
||||
disableCaptions: 'Disable captions',
|
||||
download: 'Download',
|
||||
enterFullscreen: 'Enter fullscreen',
|
||||
exitFullscreen: 'Exit fullscreen',
|
||||
frameTitle: 'Player for {title}',
|
||||
captions: 'Captions',
|
||||
settings: 'Settings',
|
||||
pip: 'PIP',
|
||||
menuBack: 'Go back to previous menu',
|
||||
speed: 'Speed',
|
||||
normal: 'Normal',
|
||||
quality: 'Quality',
|
||||
loop: 'Loop',
|
||||
start: 'Start',
|
||||
end: 'End',
|
||||
all: 'All',
|
||||
reset: 'Reset',
|
||||
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}',
|
||||
api: 'https://vimeo.com/api/v2/video/{0}.json',
|
||||
},
|
||||
youtube: {
|
||||
sdk: 'https://www.youtube.com/iframe_api',
|
||||
api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}',
|
||||
},
|
||||
googleIMA: {
|
||||
sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
|
||||
},
|
||||
},
|
||||
|
||||
// Custom control listeners
|
||||
listeners: {
|
||||
seek: null,
|
||||
play: null,
|
||||
pause: null,
|
||||
restart: null,
|
||||
rewind: null,
|
||||
fastForward: null,
|
||||
mute: null,
|
||||
volume: null,
|
||||
captions: null,
|
||||
download: null,
|
||||
fullscreen: null,
|
||||
pip: null,
|
||||
airplay: null,
|
||||
speed: null,
|
||||
quality: null,
|
||||
loop: null,
|
||||
language: null,
|
||||
},
|
||||
|
||||
// Events to watch and bubble
|
||||
events: [
|
||||
// Events to watch on HTML5 media elements and bubble
|
||||
// https://developer.mozilla.org/en/docs/Web/Guide/Events/Media_events
|
||||
'ended',
|
||||
'progress',
|
||||
'stalled',
|
||||
'playing',
|
||||
'waiting',
|
||||
'canplay',
|
||||
'canplaythrough',
|
||||
'loadstart',
|
||||
'loadeddata',
|
||||
'loadedmetadata',
|
||||
'timeupdate',
|
||||
'volumechange',
|
||||
'play',
|
||||
'pause',
|
||||
'error',
|
||||
'seeking',
|
||||
'seeked',
|
||||
'emptied',
|
||||
'ratechange',
|
||||
'cuechange',
|
||||
|
||||
// Custom events
|
||||
'download',
|
||||
'enterfullscreen',
|
||||
'exitfullscreen',
|
||||
'captionsenabled',
|
||||
'captionsdisabled',
|
||||
'languagechange',
|
||||
'controlshidden',
|
||||
'controlsshown',
|
||||
'ready',
|
||||
|
||||
// YouTube
|
||||
'statechange',
|
||||
|
||||
// Quality
|
||||
'qualitychange',
|
||||
|
||||
// Ads
|
||||
'adsloaded',
|
||||
'adscontentpause',
|
||||
'adscontentresume',
|
||||
'adstarted',
|
||||
'adsmidpoint',
|
||||
'adscomplete',
|
||||
'adsallcomplete',
|
||||
'adsimpression',
|
||||
'adsclick',
|
||||
],
|
||||
|
||||
// Selectors
|
||||
// Change these to match your template if using custom HTML
|
||||
selectors: {
|
||||
editable: 'input, textarea, select, [contenteditable]',
|
||||
container: '.plyr',
|
||||
controls: {
|
||||
container: null,
|
||||
wrapper: '.plyr__controls',
|
||||
},
|
||||
labels: '[data-plyr]',
|
||||
buttons: {
|
||||
play: '[data-plyr="play"]',
|
||||
pause: '[data-plyr="pause"]',
|
||||
restart: '[data-plyr="restart"]',
|
||||
rewind: '[data-plyr="rewind"]',
|
||||
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"]',
|
||||
settings: '[data-plyr="settings"]',
|
||||
loop: '[data-plyr="loop"]',
|
||||
},
|
||||
inputs: {
|
||||
seek: '[data-plyr="seek"]',
|
||||
volume: '[data-plyr="volume"]',
|
||||
speed: '[data-plyr="speed"]',
|
||||
language: '[data-plyr="language"]',
|
||||
quality: '[data-plyr="quality"]',
|
||||
},
|
||||
display: {
|
||||
currentTime: '.plyr__time--current',
|
||||
duration: '.plyr__time--duration',
|
||||
buffer: '.plyr__progress__buffer',
|
||||
loop: '.plyr__progress__loop', // Used later
|
||||
volume: '.plyr__volume--display',
|
||||
},
|
||||
progress: '.plyr__progress',
|
||||
captions: '.plyr__captions',
|
||||
caption: '.plyr__caption',
|
||||
},
|
||||
|
||||
// Class hooks added to the player in different states
|
||||
classNames: {
|
||||
type: 'plyr--{0}',
|
||||
provider: 'plyr--{0}',
|
||||
video: 'plyr__video-wrapper',
|
||||
embed: 'plyr__video-embed',
|
||||
videoFixedRatio: 'plyr__video-wrapper--fixed-ratio',
|
||||
embedContainer: 'plyr__video-embed__container',
|
||||
poster: 'plyr__poster',
|
||||
posterEnabled: 'plyr__poster-enabled',
|
||||
ads: 'plyr__ads',
|
||||
control: 'plyr__control',
|
||||
controlPressed: 'plyr__control--pressed',
|
||||
playing: 'plyr--playing',
|
||||
paused: 'plyr--paused',
|
||||
stopped: 'plyr--stopped',
|
||||
loading: 'plyr--loading',
|
||||
hover: 'plyr--hover',
|
||||
tooltip: 'plyr__tooltip',
|
||||
cues: 'plyr__cues',
|
||||
hidden: 'plyr__sr-only',
|
||||
hideControls: 'plyr--hide-controls',
|
||||
isIos: 'plyr--is-ios',
|
||||
isTouch: 'plyr--is-touch',
|
||||
uiSupported: 'plyr--full-ui',
|
||||
noTransition: 'plyr--no-transition',
|
||||
display: {
|
||||
time: 'plyr__time',
|
||||
},
|
||||
menu: {
|
||||
value: 'plyr__menu__value',
|
||||
badge: 'plyr__badge',
|
||||
open: 'plyr--menu-open',
|
||||
},
|
||||
captions: {
|
||||
enabled: 'plyr--captions-enabled',
|
||||
active: 'plyr--captions-active',
|
||||
},
|
||||
fullscreen: {
|
||||
enabled: 'plyr--fullscreen-enabled',
|
||||
fallback: 'plyr--fullscreen-fallback',
|
||||
},
|
||||
pip: {
|
||||
supported: 'plyr--pip-supported',
|
||||
active: 'plyr--pip-active',
|
||||
},
|
||||
airplay: {
|
||||
supported: 'plyr--airplay-supported',
|
||||
active: 'plyr--airplay-active',
|
||||
},
|
||||
tabFocus: 'plyr__tab-focus',
|
||||
previewThumbnails: {
|
||||
// Tooltip thumbs
|
||||
thumbContainer: 'plyr__preview-thumb',
|
||||
thumbContainerShown: 'plyr__preview-thumb--is-shown',
|
||||
imageContainer: 'plyr__preview-thumb__image-container',
|
||||
timeContainer: 'plyr__preview-thumb__time-container',
|
||||
// Scrubbing
|
||||
scrubbingContainer: 'plyr__preview-scrubbing',
|
||||
scrubbingContainerShown: 'plyr__preview-scrubbing--is-shown',
|
||||
},
|
||||
},
|
||||
|
||||
// Embed attributes
|
||||
attributes: {
|
||||
embed: {
|
||||
provider: 'data-plyr-provider',
|
||||
id: 'data-plyr-embed-id',
|
||||
},
|
||||
},
|
||||
|
||||
// Advertisements plugin
|
||||
// Register for an account here: http://vi.ai/publisher-video-monetization/?aid=plyrio
|
||||
ads: {
|
||||
enabled: false,
|
||||
publisherId: '',
|
||||
tagUrl: '',
|
||||
},
|
||||
|
||||
// Preview Thumbnails plugin
|
||||
previewThumbnails: {
|
||||
enabled: false,
|
||||
src: '',
|
||||
},
|
||||
|
||||
// Vimeo plugin
|
||||
// URLs
|
||||
urls: {
|
||||
download: null,
|
||||
vimeo: {
|
||||
byline: false,
|
||||
portrait: false,
|
||||
title: false,
|
||||
speed: true,
|
||||
transparent: false,
|
||||
// These settings require a pro or premium account to work
|
||||
sidedock: false,
|
||||
controls: false,
|
||||
// Custom settings from Plyr
|
||||
referrerPolicy: null, // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy
|
||||
sdk: 'https://player.vimeo.com/api/player.js',
|
||||
iframe: 'https://player.vimeo.com/video/{0}?{1}',
|
||||
api: 'https://vimeo.com/api/v2/video/{0}.json',
|
||||
},
|
||||
|
||||
// YouTube plugin
|
||||
youtube: {
|
||||
noCookie: false, // Whether to use an alternative version of YouTube without cookies
|
||||
rel: 0, // No related vids
|
||||
showinfo: 0, // Hide info
|
||||
iv_load_policy: 3, // Hide annotations
|
||||
modestbranding: 1, // Hide logos as much as possible (they still show one in the corner when paused)
|
||||
sdk: 'https://www.youtube.com/iframe_api',
|
||||
api: 'https://noembed.com/embed?url=https://www.youtube.com/watch?v={0}',
|
||||
},
|
||||
googleIMA: {
|
||||
sdk: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
|
||||
},
|
||||
},
|
||||
|
||||
// Custom control listeners
|
||||
listeners: {
|
||||
seek: null,
|
||||
play: null,
|
||||
pause: null,
|
||||
restart: null,
|
||||
rewind: null,
|
||||
fastForward: null,
|
||||
mute: null,
|
||||
volume: null,
|
||||
captions: null,
|
||||
download: null,
|
||||
fullscreen: null,
|
||||
pip: null,
|
||||
airplay: null,
|
||||
speed: null,
|
||||
quality: null,
|
||||
loop: null,
|
||||
language: null,
|
||||
},
|
||||
|
||||
// Events to watch and bubble
|
||||
events: [
|
||||
// Events to watch on HTML5 media elements and bubble
|
||||
// https://developer.mozilla.org/en/docs/Web/Guide/Events/Media_events
|
||||
'ended',
|
||||
'progress',
|
||||
'stalled',
|
||||
'playing',
|
||||
'waiting',
|
||||
'canplay',
|
||||
'canplaythrough',
|
||||
'loadstart',
|
||||
'loadeddata',
|
||||
'loadedmetadata',
|
||||
'timeupdate',
|
||||
'volumechange',
|
||||
'play',
|
||||
'pause',
|
||||
'error',
|
||||
'seeking',
|
||||
'seeked',
|
||||
'emptied',
|
||||
'ratechange',
|
||||
'cuechange',
|
||||
|
||||
// Custom events
|
||||
'download',
|
||||
'enterfullscreen',
|
||||
'exitfullscreen',
|
||||
'captionsenabled',
|
||||
'captionsdisabled',
|
||||
'languagechange',
|
||||
'controlshidden',
|
||||
'controlsshown',
|
||||
'ready',
|
||||
|
||||
// YouTube
|
||||
'statechange',
|
||||
|
||||
// Quality
|
||||
'qualitychange',
|
||||
|
||||
// Ads
|
||||
'adsloaded',
|
||||
'adscontentpause',
|
||||
'adscontentresume',
|
||||
'adstarted',
|
||||
'adsmidpoint',
|
||||
'adscomplete',
|
||||
'adsallcomplete',
|
||||
'adsimpression',
|
||||
'adsclick',
|
||||
],
|
||||
|
||||
// Selectors
|
||||
// Change these to match your template if using custom HTML
|
||||
selectors: {
|
||||
editable: 'input, textarea, select, [contenteditable]',
|
||||
container: '.plyr',
|
||||
controls: {
|
||||
container: null,
|
||||
wrapper: '.plyr__controls',
|
||||
},
|
||||
labels: '[data-plyr]',
|
||||
buttons: {
|
||||
play: '[data-plyr="play"]',
|
||||
pause: '[data-plyr="pause"]',
|
||||
restart: '[data-plyr="restart"]',
|
||||
rewind: '[data-plyr="rewind"]',
|
||||
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"]',
|
||||
settings: '[data-plyr="settings"]',
|
||||
loop: '[data-plyr="loop"]',
|
||||
},
|
||||
inputs: {
|
||||
seek: '[data-plyr="seek"]',
|
||||
volume: '[data-plyr="volume"]',
|
||||
speed: '[data-plyr="speed"]',
|
||||
language: '[data-plyr="language"]',
|
||||
quality: '[data-plyr="quality"]',
|
||||
},
|
||||
display: {
|
||||
currentTime: '.plyr__time--current',
|
||||
duration: '.plyr__time--duration',
|
||||
buffer: '.plyr__progress__buffer',
|
||||
loop: '.plyr__progress__loop', // Used later
|
||||
volume: '.plyr__volume--display',
|
||||
},
|
||||
progress: '.plyr__progress',
|
||||
captions: '.plyr__captions',
|
||||
caption: '.plyr__caption',
|
||||
},
|
||||
|
||||
// Class hooks added to the player in different states
|
||||
classNames: {
|
||||
type: 'plyr--{0}',
|
||||
provider: 'plyr--{0}',
|
||||
video: 'plyr__video-wrapper',
|
||||
embed: 'plyr__video-embed',
|
||||
videoFixedRatio: 'plyr__video-wrapper--fixed-ratio',
|
||||
embedContainer: 'plyr__video-embed__container',
|
||||
poster: 'plyr__poster',
|
||||
posterEnabled: 'plyr__poster-enabled',
|
||||
ads: 'plyr__ads',
|
||||
control: 'plyr__control',
|
||||
controlPressed: 'plyr__control--pressed',
|
||||
playing: 'plyr--playing',
|
||||
paused: 'plyr--paused',
|
||||
stopped: 'plyr--stopped',
|
||||
loading: 'plyr--loading',
|
||||
hover: 'plyr--hover',
|
||||
tooltip: 'plyr__tooltip',
|
||||
cues: 'plyr__cues',
|
||||
hidden: 'plyr__sr-only',
|
||||
hideControls: 'plyr--hide-controls',
|
||||
isIos: 'plyr--is-ios',
|
||||
isTouch: 'plyr--is-touch',
|
||||
uiSupported: 'plyr--full-ui',
|
||||
noTransition: 'plyr--no-transition',
|
||||
display: {
|
||||
time: 'plyr__time',
|
||||
},
|
||||
menu: {
|
||||
value: 'plyr__menu__value',
|
||||
badge: 'plyr__badge',
|
||||
open: 'plyr--menu-open',
|
||||
},
|
||||
captions: {
|
||||
enabled: 'plyr--captions-enabled',
|
||||
active: 'plyr--captions-active',
|
||||
},
|
||||
fullscreen: {
|
||||
enabled: 'plyr--fullscreen-enabled',
|
||||
fallback: 'plyr--fullscreen-fallback',
|
||||
},
|
||||
pip: {
|
||||
supported: 'plyr--pip-supported',
|
||||
active: 'plyr--pip-active',
|
||||
},
|
||||
airplay: {
|
||||
supported: 'plyr--airplay-supported',
|
||||
active: 'plyr--airplay-active',
|
||||
},
|
||||
tabFocus: 'plyr__tab-focus',
|
||||
previewThumbnails: {
|
||||
// Tooltip thumbs
|
||||
thumbContainer: 'plyr__preview-thumb',
|
||||
thumbContainerShown: 'plyr__preview-thumb--is-shown',
|
||||
imageContainer: 'plyr__preview-thumb__image-container',
|
||||
timeContainer: 'plyr__preview-thumb__time-container',
|
||||
// Scrubbing
|
||||
scrubbingContainer: 'plyr__preview-scrubbing',
|
||||
scrubbingContainerShown: 'plyr__preview-scrubbing--is-shown',
|
||||
},
|
||||
},
|
||||
|
||||
// Embed attributes
|
||||
attributes: {
|
||||
embed: {
|
||||
provider: 'data-plyr-provider',
|
||||
id: 'data-plyr-embed-id',
|
||||
},
|
||||
},
|
||||
|
||||
// Advertisements plugin
|
||||
// Register for an account here: http://vi.ai/publisher-video-monetization/?aid=plyrio
|
||||
ads: {
|
||||
enabled: false,
|
||||
publisherId: '',
|
||||
tagUrl: '',
|
||||
},
|
||||
|
||||
// Preview Thumbnails plugin
|
||||
previewThumbnails: {
|
||||
enabled: false,
|
||||
src: '',
|
||||
},
|
||||
|
||||
// Vimeo plugin
|
||||
vimeo: {
|
||||
byline: false,
|
||||
portrait: false,
|
||||
title: false,
|
||||
speed: true,
|
||||
transparent: false,
|
||||
// Whether the owner of the video has a Pro or Business account
|
||||
// (which allows us to properly hide controls without CSS hacks, etc)
|
||||
premium: false,
|
||||
// Custom settings from Plyr
|
||||
referrerPolicy: null, // https://developer.mozilla.org/en-US/docs/Web/API/HTMLIFrameElement/referrerPolicy
|
||||
},
|
||||
|
||||
// YouTube plugin
|
||||
youtube: {
|
||||
noCookie: true, // Whether to use an alternative version of YouTube without cookies
|
||||
rel: 0, // No related vids
|
||||
showinfo: 0, // Hide info
|
||||
iv_load_policy: 3, // Hide annotations
|
||||
modestbranding: 1, // Hide logos as much as possible (they still show one in the corner when paused)
|
||||
},
|
||||
};
|
||||
|
||||
export default defaults;
|
||||
|
||||
@ -3,8 +3,8 @@
|
||||
// ==========================================================================
|
||||
|
||||
export const pip = {
|
||||
active: 'picture-in-picture',
|
||||
inactive: 'inline',
|
||||
active: 'picture-in-picture',
|
||||
inactive: 'inline',
|
||||
};
|
||||
|
||||
export default { pip };
|
||||
|
||||
@ -3,14 +3,14 @@
|
||||
// ==========================================================================
|
||||
|
||||
export const providers = {
|
||||
html5: 'html5',
|
||||
youtube: 'youtube',
|
||||
vimeo: 'vimeo',
|
||||
html5: 'html5',
|
||||
youtube: 'youtube',
|
||||
vimeo: 'vimeo',
|
||||
};
|
||||
|
||||
export const types = {
|
||||
audio: 'audio',
|
||||
video: 'video',
|
||||
audio: 'audio',
|
||||
video: 'video',
|
||||
};
|
||||
|
||||
/**
|
||||
@ -18,17 +18,17 @@ export const types = {
|
||||
* @param {String} url
|
||||
*/
|
||||
export function getProviderByUrl(url) {
|
||||
// YouTube
|
||||
if (/^(https?:\/\/)?(www\.)?(youtube\.com|youtube-nocookie\.com|youtu\.?be)\/.+$/.test(url)) {
|
||||
return providers.youtube;
|
||||
}
|
||||
// YouTube
|
||||
if (/^(https?:\/\/)?(www\.)?(youtube\.com|youtube-nocookie\.com|youtu\.?be)\/.+$/.test(url)) {
|
||||
return providers.youtube;
|
||||
}
|
||||
|
||||
// Vimeo
|
||||
if (/^https?:\/\/player.vimeo.com\/video\/\d{0,9}(?=\b|\/)/.test(url)) {
|
||||
return providers.vimeo;
|
||||
}
|
||||
// Vimeo
|
||||
if (/^https?:\/\/player.vimeo.com\/video\/\d{0,9}(?=\b|\/)/.test(url)) {
|
||||
return providers.vimeo;
|
||||
}
|
||||
|
||||
return null;
|
||||
return null;
|
||||
}
|
||||
|
||||
export default { providers, types };
|
||||
|
||||
@ -5,26 +5,26 @@
|
||||
const noop = () => {};
|
||||
|
||||
export default class Console {
|
||||
constructor(enabled = false) {
|
||||
this.enabled = window.console && enabled;
|
||||
constructor(enabled = false) {
|
||||
this.enabled = window.console && enabled;
|
||||
|
||||
if (this.enabled) {
|
||||
this.log('Debugging enabled');
|
||||
}
|
||||
if (this.enabled) {
|
||||
this.log('Debugging enabled');
|
||||
}
|
||||
}
|
||||
|
||||
get log() {
|
||||
// eslint-disable-next-line no-console
|
||||
return this.enabled ? Function.prototype.bind.call(console.log, console) : noop;
|
||||
}
|
||||
get log() {
|
||||
// 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 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;
|
||||
}
|
||||
get error() {
|
||||
// eslint-disable-next-line no-console
|
||||
return this.enabled ? Function.prototype.bind.call(console.error, console) : noop;
|
||||
}
|
||||
}
|
||||
|
||||
3164
src/js/controls.js
vendored
3164
src/js/controls.js
vendored
File diff suppressed because it is too large
Load Diff
@ -5,288 +5,293 @@
|
||||
// ==========================================================================
|
||||
|
||||
import browser from './utils/browser';
|
||||
import { getElements, hasClass, toggleClass } from './utils/elements';
|
||||
import { closest,getElements, hasClass, toggleClass } from './utils/elements';
|
||||
import { on, triggerEvent } from './utils/events';
|
||||
import is from './utils/is';
|
||||
import { silencePromise } from './utils/promise';
|
||||
|
||||
class Fullscreen {
|
||||
constructor(player) {
|
||||
// Keep reference to parent
|
||||
this.player = player;
|
||||
constructor(player) {
|
||||
// Keep reference to parent
|
||||
this.player = player;
|
||||
|
||||
// Get prefix
|
||||
this.prefix = Fullscreen.prefix;
|
||||
this.property = Fullscreen.property;
|
||||
// Get prefix
|
||||
this.prefix = Fullscreen.prefix;
|
||||
this.property = Fullscreen.property;
|
||||
|
||||
// Scroll position
|
||||
this.scrollPosition = { x: 0, y: 0 };
|
||||
// Scroll position
|
||||
this.scrollPosition = { x: 0, y: 0 };
|
||||
|
||||
// Force the use of 'full window/browser' rather than fullscreen
|
||||
this.forceFallback = player.config.fullscreen.fallback === 'force';
|
||||
// Force the use of 'full window/browser' rather than fullscreen
|
||||
this.forceFallback = player.config.fullscreen.fallback === 'force';
|
||||
|
||||
// Register event listeners
|
||||
// Handle event (incase user presses escape etc)
|
||||
on.call(
|
||||
this.player,
|
||||
document,
|
||||
this.prefix === 'ms' ? 'MSFullscreenChange' : `${this.prefix}fullscreenchange`,
|
||||
() => {
|
||||
// TODO: Filter for target??
|
||||
this.onChange();
|
||||
},
|
||||
);
|
||||
// Get the fullscreen element
|
||||
// Checks container is an ancestor, defaults to null
|
||||
this.player.elements.fullscreen =
|
||||
player.config.fullscreen.container && closest(this.player.elements.container, player.config.fullscreen.container);
|
||||
|
||||
// Fullscreen toggle on double click
|
||||
on.call(this.player, this.player.elements.container, 'dblclick', event => {
|
||||
// Ignore double click in controls
|
||||
if (is.element(this.player.elements.controls) && this.player.elements.controls.contains(event.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.toggle();
|
||||
});
|
||||
|
||||
// Tap focus when in fullscreen
|
||||
on.call(this, this.player.elements.container, 'keydown', event => this.trapFocus(event));
|
||||
|
||||
// Update the UI
|
||||
this.update();
|
||||
}
|
||||
|
||||
// Determine if native supported
|
||||
static get native() {
|
||||
return !!(
|
||||
document.fullscreenEnabled ||
|
||||
document.webkitFullscreenEnabled ||
|
||||
document.mozFullScreenEnabled ||
|
||||
document.msFullscreenEnabled
|
||||
);
|
||||
}
|
||||
|
||||
// If we're actually using native
|
||||
get usingNative() {
|
||||
return Fullscreen.native && !this.forceFallback;
|
||||
}
|
||||
|
||||
// Get the prefix for handlers
|
||||
static get prefix() {
|
||||
// No prefix
|
||||
if (is.function(document.exitFullscreen)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
// Check for fullscreen support by vendor prefix
|
||||
let value = '';
|
||||
const prefixes = ['webkit', 'moz', 'ms'];
|
||||
|
||||
prefixes.some(pre => {
|
||||
if (is.function(document[`${pre}ExitFullscreen`]) || is.function(document[`${pre}CancelFullScreen`])) {
|
||||
value = pre;
|
||||
return true;
|
||||
}
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
static get property() {
|
||||
return this.prefix === 'moz' ? 'FullScreen' : 'Fullscreen';
|
||||
}
|
||||
|
||||
// Determine if fullscreen is enabled
|
||||
get enabled() {
|
||||
return (
|
||||
(Fullscreen.native || this.player.config.fullscreen.fallback) &&
|
||||
this.player.config.fullscreen.enabled &&
|
||||
this.player.supported.ui &&
|
||||
this.player.isVideo
|
||||
);
|
||||
}
|
||||
|
||||
// Get active state
|
||||
get active() {
|
||||
if (!this.enabled) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Fallback using classname
|
||||
if (!Fullscreen.native || this.forceFallback) {
|
||||
return hasClass(this.target, this.player.config.classNames.fullscreen.fallback);
|
||||
}
|
||||
|
||||
const element = !this.prefix ? document.fullscreenElement : document[`${this.prefix}${this.property}Element`];
|
||||
|
||||
return element === this.target;
|
||||
}
|
||||
|
||||
// Get target element
|
||||
get target() {
|
||||
return browser.isIos && this.player.config.fullscreen.iosNative
|
||||
? this.player.media
|
||||
: this.player.elements.container;
|
||||
}
|
||||
|
||||
onChange() {
|
||||
if (!this.enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Update toggle button
|
||||
const button = this.player.elements.buttons.fullscreen;
|
||||
if (is.element(button)) {
|
||||
button.pressed = this.active;
|
||||
}
|
||||
|
||||
// Trigger an event
|
||||
triggerEvent.call(this.player, this.target, this.active ? 'enterfullscreen' : 'exitfullscreen', true);
|
||||
}
|
||||
|
||||
toggleFallback(toggle = false) {
|
||||
// Store or restore scroll position
|
||||
if (toggle) {
|
||||
this.scrollPosition = {
|
||||
x: window.scrollX || 0,
|
||||
y: window.scrollY || 0,
|
||||
};
|
||||
} else {
|
||||
window.scrollTo(this.scrollPosition.x, this.scrollPosition.y);
|
||||
}
|
||||
|
||||
// Toggle scroll
|
||||
document.body.style.overflow = toggle ? 'hidden' : '';
|
||||
|
||||
// Toggle class hook
|
||||
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(',');
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle button and fire events
|
||||
// Register event listeners
|
||||
// Handle event (incase user presses escape etc)
|
||||
on.call(
|
||||
this.player,
|
||||
document,
|
||||
this.prefix === 'ms' ? 'MSFullscreenChange' : `${this.prefix}fullscreenchange`,
|
||||
() => {
|
||||
// TODO: Filter for target??
|
||||
this.onChange();
|
||||
},
|
||||
);
|
||||
|
||||
// Fullscreen toggle on double click
|
||||
on.call(this.player, this.player.elements.container, 'dblclick', event => {
|
||||
// Ignore double click in controls
|
||||
if (is.element(this.player.elements.controls) && this.player.elements.controls.contains(event.target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.toggle();
|
||||
});
|
||||
|
||||
// Tap focus when in fullscreen
|
||||
on.call(this, this.player.elements.container, 'keydown', event => this.trapFocus(event));
|
||||
|
||||
// Update the UI
|
||||
this.update();
|
||||
}
|
||||
|
||||
// Determine if native supported
|
||||
static get native() {
|
||||
return !!(
|
||||
document.fullscreenEnabled ||
|
||||
document.webkitFullscreenEnabled ||
|
||||
document.mozFullScreenEnabled ||
|
||||
document.msFullscreenEnabled
|
||||
);
|
||||
}
|
||||
|
||||
// If we're actually using native
|
||||
get usingNative() {
|
||||
return Fullscreen.native && !this.forceFallback;
|
||||
}
|
||||
|
||||
// Get the prefix for handlers
|
||||
static get prefix() {
|
||||
// No prefix
|
||||
if (is.function(document.exitFullscreen)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
// Trap focus inside container
|
||||
trapFocus(event) {
|
||||
// Bail if iOS, not active, not the tab key
|
||||
if (browser.isIos || !this.active || event.key !== 'Tab' || event.keyCode !== 9) {
|
||||
return;
|
||||
}
|
||||
// Check for fullscreen support by vendor prefix
|
||||
let value = '';
|
||||
const prefixes = ['webkit', 'moz', 'ms'];
|
||||
|
||||
// Get the current focused element
|
||||
const focused = document.activeElement;
|
||||
const focusable = getElements.call(
|
||||
this.player,
|
||||
'a[href], button:not(:disabled), input:not(:disabled), [tabindex]',
|
||||
);
|
||||
const [first] = focusable;
|
||||
const last = focusable[focusable.length - 1];
|
||||
prefixes.some(pre => {
|
||||
if (is.function(document[`${pre}ExitFullscreen`]) || is.function(document[`${pre}CancelFullScreen`])) {
|
||||
value = pre;
|
||||
return true;
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
return false;
|
||||
});
|
||||
|
||||
return value;
|
||||
}
|
||||
|
||||
static get property() {
|
||||
return this.prefix === 'moz' ? 'FullScreen' : 'Fullscreen';
|
||||
}
|
||||
|
||||
// Determine if fullscreen is enabled
|
||||
get enabled() {
|
||||
return (
|
||||
(Fullscreen.native || this.player.config.fullscreen.fallback) &&
|
||||
this.player.config.fullscreen.enabled &&
|
||||
this.player.supported.ui &&
|
||||
this.player.isVideo
|
||||
);
|
||||
}
|
||||
|
||||
// Get active state
|
||||
get active() {
|
||||
if (!this.enabled) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Update UI
|
||||
update() {
|
||||
if (this.enabled) {
|
||||
let mode;
|
||||
|
||||
if (this.forceFallback) {
|
||||
mode = 'Fallback (forced)';
|
||||
} else if (Fullscreen.native) {
|
||||
mode = 'Native';
|
||||
} else {
|
||||
mode = 'Fallback';
|
||||
}
|
||||
|
||||
this.player.debug.log(`${mode} fullscreen enabled`);
|
||||
} else {
|
||||
this.player.debug.log('Fullscreen not supported and fallback disabled');
|
||||
}
|
||||
|
||||
// Add styling hook to show button
|
||||
toggleClass(this.player.elements.container, this.player.config.classNames.fullscreen.enabled, this.enabled);
|
||||
// Fallback using classname
|
||||
if (!Fullscreen.native || this.forceFallback) {
|
||||
return hasClass(this.target, this.player.config.classNames.fullscreen.fallback);
|
||||
}
|
||||
|
||||
// Make an element fullscreen
|
||||
enter() {
|
||||
if (!this.enabled) {
|
||||
return;
|
||||
}
|
||||
const element = !this.prefix ? document.fullscreenElement : document[`${this.prefix}${this.property}Element`];
|
||||
|
||||
// iOS native fullscreen doesn't need the request step
|
||||
if (browser.isIos && this.player.config.fullscreen.iosNative) {
|
||||
this.target.webkitEnterFullscreen();
|
||||
} else if (!Fullscreen.native || this.forceFallback) {
|
||||
this.toggleFallback(true);
|
||||
} else if (!this.prefix) {
|
||||
this.target.requestFullscreen({ navigationUI: 'hide' });
|
||||
} else if (!is.empty(this.prefix)) {
|
||||
this.target[`${this.prefix}Request${this.property}`]();
|
||||
}
|
||||
return element && element.shadowRoot ? element === this.target.getRootNode().host : element === this.target;
|
||||
}
|
||||
|
||||
// Get target element
|
||||
get target() {
|
||||
return browser.isIos && this.player.config.fullscreen.iosNative
|
||||
? this.player.media
|
||||
: this.player.elements.fullscreen || this.player.elements.container;
|
||||
}
|
||||
|
||||
onChange() {
|
||||
if (!this.enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Bail from fullscreen
|
||||
exit() {
|
||||
if (!this.enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
// iOS native fullscreen
|
||||
if (browser.isIos && this.player.config.fullscreen.iosNative) {
|
||||
this.target.webkitExitFullscreen();
|
||||
this.player.play();
|
||||
} else if (!Fullscreen.native || this.forceFallback) {
|
||||
this.toggleFallback(false);
|
||||
} else if (!this.prefix) {
|
||||
(document.cancelFullScreen || document.exitFullscreen).call(document);
|
||||
} else if (!is.empty(this.prefix)) {
|
||||
const action = this.prefix === 'moz' ? 'Cancel' : 'Exit';
|
||||
document[`${this.prefix}${action}${this.property}`]();
|
||||
}
|
||||
// Update toggle button
|
||||
const button = this.player.elements.buttons.fullscreen;
|
||||
if (is.element(button)) {
|
||||
button.pressed = this.active;
|
||||
}
|
||||
|
||||
// Toggle state
|
||||
toggle() {
|
||||
if (!this.active) {
|
||||
this.enter();
|
||||
} else {
|
||||
this.exit();
|
||||
}
|
||||
// Always trigger events on the plyr / media element (not a fullscreen container) and let them bubble up
|
||||
const target = this.target === this.player.media ? this.target : this.player.elements.container;
|
||||
// Trigger an event
|
||||
triggerEvent.call(this.player, target, this.active ? 'enterfullscreen' : 'exitfullscreen', true);
|
||||
}
|
||||
|
||||
toggleFallback(toggle = false) {
|
||||
// Store or restore scroll position
|
||||
if (toggle) {
|
||||
this.scrollPosition = {
|
||||
x: window.scrollX || 0,
|
||||
y: window.scrollY || 0,
|
||||
};
|
||||
} else {
|
||||
window.scrollTo(this.scrollPosition.x, this.scrollPosition.y);
|
||||
}
|
||||
|
||||
// Toggle scroll
|
||||
document.body.style.overflow = toggle ? 'hidden' : '';
|
||||
|
||||
// Toggle class hook
|
||||
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(',');
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle button and fire events
|
||||
this.onChange();
|
||||
}
|
||||
|
||||
// Trap focus inside container
|
||||
trapFocus(event) {
|
||||
// Bail if iOS, not active, not the tab key
|
||||
if (browser.isIos || !this.active || event.key !== 'Tab' || event.keyCode !== 9) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get the current focused element
|
||||
const focused = document.activeElement;
|
||||
const focusable = getElements.call(this.player, 'a[href], button:not(:disabled), input:not(:disabled), [tabindex]');
|
||||
const [first] = focusable;
|
||||
const last = focusable[focusable.length - 1];
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
// Update UI
|
||||
update() {
|
||||
if (this.enabled) {
|
||||
let mode;
|
||||
|
||||
if (this.forceFallback) {
|
||||
mode = 'Fallback (forced)';
|
||||
} else if (Fullscreen.native) {
|
||||
mode = 'Native';
|
||||
} else {
|
||||
mode = 'Fallback';
|
||||
}
|
||||
|
||||
this.player.debug.log(`${mode} fullscreen enabled`);
|
||||
} else {
|
||||
this.player.debug.log('Fullscreen not supported and fallback disabled');
|
||||
}
|
||||
|
||||
// Add styling hook to show button
|
||||
toggleClass(this.player.elements.container, this.player.config.classNames.fullscreen.enabled, this.enabled);
|
||||
}
|
||||
|
||||
// Make an element fullscreen
|
||||
enter() {
|
||||
if (!this.enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
// iOS native fullscreen doesn't need the request step
|
||||
if (browser.isIos && this.player.config.fullscreen.iosNative) {
|
||||
this.target.webkitEnterFullscreen();
|
||||
} else if (!Fullscreen.native || this.forceFallback) {
|
||||
this.toggleFallback(true);
|
||||
} else if (!this.prefix) {
|
||||
this.target.requestFullscreen({ navigationUI: 'hide' });
|
||||
} else if (!is.empty(this.prefix)) {
|
||||
this.target[`${this.prefix}Request${this.property}`]();
|
||||
}
|
||||
}
|
||||
|
||||
// Bail from fullscreen
|
||||
exit() {
|
||||
if (!this.enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
// iOS native fullscreen
|
||||
if (browser.isIos && this.player.config.fullscreen.iosNative) {
|
||||
this.target.webkitExitFullscreen();
|
||||
silencePromise(this.player.play());
|
||||
} else if (!Fullscreen.native || this.forceFallback) {
|
||||
this.toggleFallback(false);
|
||||
} else if (!this.prefix) {
|
||||
(document.cancelFullScreen || document.exitFullscreen).call(document);
|
||||
} else if (!is.empty(this.prefix)) {
|
||||
const action = this.prefix === 'moz' ? 'Cancel' : 'Exit';
|
||||
document[`${this.prefix}${action}${this.property}`]();
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle state
|
||||
toggle() {
|
||||
if (!this.active) {
|
||||
this.enter();
|
||||
} else {
|
||||
this.exit();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default Fullscreen;
|
||||
|
||||
245
src/js/html5.js
245
src/js/html5.js
@ -6,141 +6,142 @@ import support from './support';
|
||||
import { removeElement } from './utils/elements';
|
||||
import { triggerEvent } from './utils/events';
|
||||
import is from './utils/is';
|
||||
import { silencePromise } from './utils/promise';
|
||||
import { setAspectRatio } from './utils/style';
|
||||
|
||||
const html5 = {
|
||||
getSources() {
|
||||
if (!this.isHTML5) {
|
||||
return [];
|
||||
getSources() {
|
||||
if (!this.isHTML5) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const sources = Array.from(this.media.querySelectorAll('source'));
|
||||
|
||||
// Filter out unsupported sources (if type is specified)
|
||||
return sources.filter(source => {
|
||||
const type = source.getAttribute('type');
|
||||
|
||||
if (is.empty(type)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return support.mime.call(this, type);
|
||||
});
|
||||
},
|
||||
|
||||
// Get quality levels
|
||||
getQualityOptions() {
|
||||
// Whether we're forcing all options (e.g. for streaming)
|
||||
if (this.config.quality.forced) {
|
||||
return this.config.quality.options;
|
||||
}
|
||||
|
||||
// Get sizes from <source> elements
|
||||
return html5.getSources
|
||||
.call(this)
|
||||
.map(source => Number(source.getAttribute('size')))
|
||||
.filter(Boolean);
|
||||
},
|
||||
|
||||
setup() {
|
||||
if (!this.isHTML5) {
|
||||
return;
|
||||
}
|
||||
|
||||
const player = this;
|
||||
|
||||
// Set speed options from config
|
||||
player.options.speed = player.config.speed.options;
|
||||
|
||||
// Set aspect ratio if fixed
|
||||
if (!is.empty(this.config.ratio)) {
|
||||
setAspectRatio.call(player);
|
||||
}
|
||||
|
||||
// Quality
|
||||
Object.defineProperty(player.media, 'quality', {
|
||||
get() {
|
||||
// Get sources
|
||||
const sources = html5.getSources.call(player);
|
||||
const source = sources.find(s => s.getAttribute('src') === player.source);
|
||||
|
||||
// Return size, if match is found
|
||||
return source && Number(source.getAttribute('size'));
|
||||
},
|
||||
set(input) {
|
||||
if (player.quality === input) {
|
||||
return;
|
||||
}
|
||||
|
||||
const sources = Array.from(this.media.querySelectorAll('source'));
|
||||
// If we're using an an external handler...
|
||||
if (player.config.quality.forced && is.function(player.config.quality.onChange)) {
|
||||
player.config.quality.onChange(input);
|
||||
} else {
|
||||
// Get sources
|
||||
const sources = html5.getSources.call(player);
|
||||
// Get first match for requested size
|
||||
const source = sources.find(s => Number(s.getAttribute('size')) === input);
|
||||
|
||||
// Filter out unsupported sources (if type is specified)
|
||||
return sources.filter(source => {
|
||||
const type = source.getAttribute('type');
|
||||
|
||||
if (is.empty(type)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
return support.mime.call(this, type);
|
||||
});
|
||||
},
|
||||
|
||||
// Get quality levels
|
||||
getQualityOptions() {
|
||||
// Whether we're forcing all options (e.g. for streaming)
|
||||
if (this.config.quality.forced) {
|
||||
return this.config.quality.options;
|
||||
}
|
||||
|
||||
// Get sizes from <source> elements
|
||||
return html5.getSources
|
||||
.call(this)
|
||||
.map(source => Number(source.getAttribute('size')))
|
||||
.filter(Boolean);
|
||||
},
|
||||
|
||||
setup() {
|
||||
if (!this.isHTML5) {
|
||||
// No matching source found
|
||||
if (!source) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get current state
|
||||
const { currentTime, paused, preload, readyState, playbackRate } = player.media;
|
||||
|
||||
// Set new source
|
||||
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.speed = playbackRate;
|
||||
player.currentTime = currentTime;
|
||||
|
||||
// Resume playing
|
||||
if (!paused) {
|
||||
silencePromise(player.play());
|
||||
}
|
||||
});
|
||||
|
||||
// Load new source
|
||||
player.media.load();
|
||||
}
|
||||
}
|
||||
|
||||
const player = this;
|
||||
|
||||
// Set speed options from config
|
||||
player.options.speed = player.config.speed.options;
|
||||
|
||||
// Set aspect ratio if fixed
|
||||
if (!is.empty(this.config.ratio)) {
|
||||
setAspectRatio.call(player);
|
||||
}
|
||||
|
||||
// Quality
|
||||
Object.defineProperty(player.media, 'quality', {
|
||||
get() {
|
||||
// Get sources
|
||||
const sources = html5.getSources.call(player);
|
||||
const source = sources.find(s => s.getAttribute('src') === player.source);
|
||||
|
||||
// Return size, if match is found
|
||||
return source && Number(source.getAttribute('size'));
|
||||
},
|
||||
set(input) {
|
||||
if (player.quality === input) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If we're using an an external handler...
|
||||
if (player.config.quality.forced && is.function(player.config.quality.onChange)) {
|
||||
player.config.quality.onChange(input);
|
||||
} else {
|
||||
// Get sources
|
||||
const sources = html5.getSources.call(player);
|
||||
// Get first match for requested size
|
||||
const source = sources.find(s => Number(s.getAttribute('size')) === input);
|
||||
|
||||
// No matching source found
|
||||
if (!source) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get current state
|
||||
const { currentTime, paused, preload, readyState, playbackRate } = player.media;
|
||||
|
||||
// Set new source
|
||||
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.speed = playbackRate;
|
||||
player.currentTime = currentTime;
|
||||
|
||||
// Resume playing
|
||||
if (!paused) {
|
||||
player.play();
|
||||
}
|
||||
});
|
||||
|
||||
// Load new source
|
||||
player.media.load();
|
||||
}
|
||||
}
|
||||
|
||||
// Trigger change event
|
||||
triggerEvent.call(player, player.media, 'qualitychange', false, {
|
||||
quality: input,
|
||||
});
|
||||
},
|
||||
// Trigger change event
|
||||
triggerEvent.call(player, player.media, 'qualitychange', false, {
|
||||
quality: input,
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// Cancel current network requests
|
||||
// Cancel current network requests
|
||||
// See https://github.com/sampotts/plyr/issues/174
|
||||
cancelRequests() {
|
||||
if (!this.isHTML5) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Remove child sources
|
||||
removeElement(html5.getSources.call(this));
|
||||
|
||||
// Set blank video src attribute
|
||||
// This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error
|
||||
// Info: http://stackoverflow.com/questions/32231579/how-to-properly-dispose-of-an-html5-video-and-close-socket-or-connection
|
||||
this.media.setAttribute('src', this.config.blankVideo);
|
||||
|
||||
// Load the new empty source
|
||||
// This will cancel existing requests
|
||||
// See https://github.com/sampotts/plyr/issues/174
|
||||
cancelRequests() {
|
||||
if (!this.isHTML5) {
|
||||
return;
|
||||
}
|
||||
this.media.load();
|
||||
|
||||
// Remove child sources
|
||||
removeElement(html5.getSources.call(this));
|
||||
|
||||
// Set blank video src attribute
|
||||
// This is to prevent a MEDIA_ERR_SRC_NOT_SUPPORTED error
|
||||
// Info: http://stackoverflow.com/questions/32231579/how-to-properly-dispose-of-an-html5-video-and-close-socket-or-connection
|
||||
this.media.setAttribute('src', this.config.blankVideo);
|
||||
|
||||
// Load the new empty source
|
||||
// This will cancel existing requests
|
||||
// See https://github.com/sampotts/plyr/issues/174
|
||||
this.media.load();
|
||||
|
||||
// Debugging
|
||||
this.debug.log('Cancelled network requests');
|
||||
},
|
||||
// Debugging
|
||||
this.debug.log('Cancelled network requests');
|
||||
},
|
||||
};
|
||||
|
||||
export default html5;
|
||||
|
||||
1553
src/js/listeners.js
1553
src/js/listeners.js
File diff suppressed because it is too large
Load Diff
@ -8,54 +8,52 @@ import youtube from './plugins/youtube';
|
||||
import { createElement, toggleClass, wrap } from './utils/elements';
|
||||
|
||||
const media = {
|
||||
// Setup media
|
||||
setup() {
|
||||
// If there's no media, bail
|
||||
if (!this.media) {
|
||||
this.debug.warn('No media element found!');
|
||||
return;
|
||||
}
|
||||
// Setup media
|
||||
setup() {
|
||||
// If there's no media, bail
|
||||
if (!this.media) {
|
||||
this.debug.warn('No media element found!');
|
||||
return;
|
||||
}
|
||||
|
||||
// Add type class
|
||||
toggleClass(this.elements.container, this.config.classNames.type.replace('{0}', this.type), true);
|
||||
// Add type class
|
||||
toggleClass(this.elements.container, this.config.classNames.type.replace('{0}', this.type), true);
|
||||
|
||||
// Add provider class
|
||||
toggleClass(this.elements.container, this.config.classNames.provider.replace('{0}', this.provider), true);
|
||||
// Add provider class
|
||||
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) {
|
||||
toggleClass(this.elements.container, this.config.classNames.type.replace('{0}', 'video'), true);
|
||||
}
|
||||
// Add video class for embeds
|
||||
// This will require changes if audio embeds are added
|
||||
if (this.isEmbed) {
|
||||
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 = createElement('div', {
|
||||
class: this.config.classNames.video,
|
||||
});
|
||||
// Inject the player wrapper
|
||||
if (this.isVideo) {
|
||||
// Create the wrapper div
|
||||
this.elements.wrapper = createElement('div', {
|
||||
class: this.config.classNames.video,
|
||||
});
|
||||
|
||||
// Wrap the video in a container
|
||||
wrap(this.media, this.elements.wrapper);
|
||||
// Wrap the video in a container
|
||||
wrap(this.media, this.elements.wrapper);
|
||||
|
||||
// Faux poster container
|
||||
if (this.isEmbed) {
|
||||
this.elements.poster = createElement('div', {
|
||||
class: this.config.classNames.poster,
|
||||
});
|
||||
// Poster image container
|
||||
this.elements.poster = createElement('div', {
|
||||
class: this.config.classNames.poster,
|
||||
});
|
||||
|
||||
this.elements.wrapper.appendChild(this.elements.poster);
|
||||
}
|
||||
}
|
||||
this.elements.wrapper.appendChild(this.elements.poster);
|
||||
}
|
||||
|
||||
if (this.isHTML5) {
|
||||
html5.setup.call(this);
|
||||
} else if (this.isYouTube) {
|
||||
youtube.setup.call(this);
|
||||
} else if (this.isVimeo) {
|
||||
vimeo.setup.call(this);
|
||||
}
|
||||
},
|
||||
if (this.isHTML5) {
|
||||
html5.setup.call(this);
|
||||
} else if (this.isYouTube) {
|
||||
youtube.setup.call(this);
|
||||
} else if (this.isVimeo) {
|
||||
vimeo.setup.call(this);
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default media;
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -10,393 +10,405 @@ import { triggerEvent } from '../utils/events';
|
||||
import fetch from '../utils/fetch';
|
||||
import is from '../utils/is';
|
||||
import loadScript from '../utils/load-script';
|
||||
import { extend } from '../utils/objects';
|
||||
import { format, stripHTML } from '../utils/strings';
|
||||
import { setAspectRatio } from '../utils/style';
|
||||
import { buildUrlParams } from '../utils/urls';
|
||||
|
||||
// Parse Vimeo ID from URL
|
||||
function parseId(url) {
|
||||
if (is.empty(url)) {
|
||||
return null;
|
||||
}
|
||||
if (is.empty(url)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (is.number(Number(url))) {
|
||||
return url;
|
||||
}
|
||||
if (is.number(Number(url))) {
|
||||
return url;
|
||||
}
|
||||
|
||||
const regex = /^.*(vimeo.com\/|video\/)(\d+).*/;
|
||||
return url.match(regex) ? RegExp.$2 : url;
|
||||
const regex = /^.*(vimeo.com\/|video\/)(\d+).*/;
|
||||
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;
|
||||
triggerEvent.call(this, this.media, play ? 'play' : 'pause');
|
||||
}
|
||||
if (play && !this.embed.hasPlayed) {
|
||||
this.embed.hasPlayed = true;
|
||||
}
|
||||
if (this.media.paused === play) {
|
||||
this.media.paused = !play;
|
||||
triggerEvent.call(this, this.media, play ? 'play' : 'pause');
|
||||
}
|
||||
}
|
||||
|
||||
const vimeo = {
|
||||
setup() {
|
||||
const player = this;
|
||||
setup() {
|
||||
const player = this;
|
||||
|
||||
// Add embed class for responsive
|
||||
toggleClass(player.elements.wrapper, player.config.classNames.embed, true);
|
||||
// Add embed class for responsive
|
||||
toggleClass(player.elements.wrapper, player.config.classNames.embed, true);
|
||||
|
||||
// Set speed options from config
|
||||
player.options.speed = player.config.speed.options;
|
||||
// Set speed options from config
|
||||
player.options.speed = player.config.speed.options;
|
||||
|
||||
// Set intial ratio
|
||||
setAspectRatio.call(player);
|
||||
// Set intial ratio
|
||||
setAspectRatio.call(player);
|
||||
|
||||
// Load the SDK if not already
|
||||
if (!is.object(window.Vimeo)) {
|
||||
loadScript(player.config.urls.vimeo.sdk)
|
||||
.then(() => {
|
||||
vimeo.ready.call(player);
|
||||
})
|
||||
.catch(error => {
|
||||
player.debug.warn('Vimeo SDK (player.js) failed to load', error);
|
||||
});
|
||||
} else {
|
||||
vimeo.ready.call(player);
|
||||
}
|
||||
},
|
||||
|
||||
// API Ready
|
||||
ready() {
|
||||
const player = this;
|
||||
const config = player.config.vimeo;
|
||||
|
||||
// Get Vimeo params for the iframe
|
||||
const params = buildUrlParams(
|
||||
extend(
|
||||
{},
|
||||
{
|
||||
loop: player.config.loop.active,
|
||||
autoplay: player.autoplay,
|
||||
muted: player.muted,
|
||||
gesture: 'media',
|
||||
playsinline: !this.config.fullscreen.iosNative,
|
||||
},
|
||||
config,
|
||||
),
|
||||
);
|
||||
|
||||
// Get the source URL or ID
|
||||
let source = player.media.getAttribute('src');
|
||||
|
||||
// Get from <div> if needed
|
||||
if (is.empty(source)) {
|
||||
source = player.media.getAttribute(player.config.attributes.embed.id);
|
||||
}
|
||||
|
||||
const id = parseId(source);
|
||||
// Build an iframe
|
||||
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');
|
||||
|
||||
// Set the referrer policy if required
|
||||
if (!is.empty(config.referrerPolicy)) {
|
||||
iframe.setAttribute('referrerPolicy', config.referrerPolicy);
|
||||
}
|
||||
|
||||
// Get poster, if already set
|
||||
const { poster } = player;
|
||||
// Inject the package
|
||||
const wrapper = createElement('div', { poster, class: player.config.classNames.embedContainer });
|
||||
wrapper.appendChild(iframe);
|
||||
player.media = replaceElement(wrapper, player.media);
|
||||
|
||||
// Get poster image
|
||||
fetch(format(player.config.urls.vimeo.api, id), 'json').then(response => {
|
||||
if (is.empty(response)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get the URL for thumbnail
|
||||
const url = new URL(response[0].thumbnail_large);
|
||||
|
||||
// Get original image
|
||||
url.pathname = `${url.pathname.split('_')[0]}.jpg`;
|
||||
|
||||
// Set and show poster
|
||||
ui.setPoster.call(player, url.href).catch(() => {});
|
||||
// Load the SDK if not already
|
||||
if (!is.object(window.Vimeo)) {
|
||||
loadScript(player.config.urls.vimeo.sdk)
|
||||
.then(() => {
|
||||
vimeo.ready.call(player);
|
||||
})
|
||||
.catch(error => {
|
||||
player.debug.warn('Vimeo SDK (player.js) failed to load', error);
|
||||
});
|
||||
} else {
|
||||
vimeo.ready.call(player);
|
||||
}
|
||||
},
|
||||
|
||||
// Setup instance
|
||||
// https://github.com/vimeo/player.js
|
||||
player.embed = new window.Vimeo.Player(iframe, {
|
||||
autopause: player.config.autopause,
|
||||
muted: player.muted,
|
||||
});
|
||||
// API Ready
|
||||
ready() {
|
||||
const player = this;
|
||||
const config = player.config.vimeo;
|
||||
const { premium, referrerPolicy, ...frameParams } = config;
|
||||
|
||||
player.media.paused = true;
|
||||
player.media.currentTime = 0;
|
||||
// If the owner has a pro or premium account then we can hide controls etc
|
||||
if (premium) {
|
||||
Object.assign(frameParams, {
|
||||
controls: false,
|
||||
sidedock: false,
|
||||
});
|
||||
}
|
||||
|
||||
// Disable native text track rendering
|
||||
if (player.supported.ui) {
|
||||
player.embed.disableTextTrack();
|
||||
}
|
||||
// Get Vimeo params for the iframe
|
||||
const params = buildUrlParams({
|
||||
loop: player.config.loop.active,
|
||||
autoplay: player.autoplay,
|
||||
muted: player.muted,
|
||||
gesture: 'media',
|
||||
playsinline: !this.config.fullscreen.iosNative,
|
||||
...frameParams,
|
||||
});
|
||||
|
||||
// Create a faux HTML5 API using the Vimeo API
|
||||
player.media.play = () => {
|
||||
assurePlaybackState.call(player, true);
|
||||
return player.embed.play();
|
||||
};
|
||||
// Get the source URL or ID
|
||||
let source = player.media.getAttribute('src');
|
||||
|
||||
player.media.pause = () => {
|
||||
assurePlaybackState.call(player, false);
|
||||
return player.embed.pause();
|
||||
};
|
||||
// Get from <div> if needed
|
||||
if (is.empty(source)) {
|
||||
source = player.media.getAttribute(player.config.attributes.embed.id);
|
||||
}
|
||||
|
||||
player.media.stop = () => {
|
||||
player.pause();
|
||||
player.currentTime = 0;
|
||||
};
|
||||
const id = parseId(source);
|
||||
// Build an iframe
|
||||
const iframe = createElement('iframe');
|
||||
const src = format(player.config.urls.vimeo.iframe, id, params);
|
||||
iframe.setAttribute('src', src);
|
||||
iframe.setAttribute('allowfullscreen', '');
|
||||
iframe.setAttribute('allow', 'autoplay,fullscreen,picture-in-picture');
|
||||
|
||||
// Seeking
|
||||
let { currentTime } = player.media;
|
||||
Object.defineProperty(player.media, 'currentTime', {
|
||||
get() {
|
||||
return currentTime;
|
||||
},
|
||||
set(time) {
|
||||
// Vimeo will automatically play on seek if the video hasn't been played before
|
||||
// Set the referrer policy if required
|
||||
if (!is.empty(referrerPolicy)) {
|
||||
iframe.setAttribute('referrerPolicy', referrerPolicy);
|
||||
}
|
||||
|
||||
// Get current paused state and volume etc
|
||||
const { embed, media, paused, volume } = player;
|
||||
const restorePause = paused && !embed.hasPlayed;
|
||||
// Inject the package
|
||||
const { poster } = player;
|
||||
if (premium) {
|
||||
iframe.setAttribute('data-poster', poster);
|
||||
player.media = replaceElement(iframe, player.media);
|
||||
} else {
|
||||
const wrapper = createElement('div', { class: player.config.classNames.embedContainer, 'data-poster': poster });
|
||||
wrapper.appendChild(iframe);
|
||||
player.media = replaceElement(wrapper, player.media);
|
||||
}
|
||||
|
||||
// Set seeking state and trigger event
|
||||
media.seeking = true;
|
||||
triggerEvent.call(player, media, 'seeking');
|
||||
// Get poster image
|
||||
fetch(format(player.config.urls.vimeo.api, id), 'json').then(response => {
|
||||
if (is.empty(response)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// If paused, mute until seek is complete
|
||||
Promise.resolve(restorePause && embed.setVolume(0))
|
||||
// Seek
|
||||
.then(() => embed.setCurrentTime(time))
|
||||
// Restore paused
|
||||
.then(() => restorePause && embed.pause())
|
||||
// Restore volume
|
||||
.then(() => restorePause && embed.setVolume(volume))
|
||||
.catch(() => {
|
||||
// Do nothing
|
||||
});
|
||||
},
|
||||
});
|
||||
// Get the URL for thumbnail
|
||||
const url = new URL(response[0].thumbnail_large);
|
||||
|
||||
// Playback speed
|
||||
let speed = player.config.speed.selected;
|
||||
Object.defineProperty(player.media, 'playbackRate', {
|
||||
get() {
|
||||
return speed;
|
||||
},
|
||||
set(input) {
|
||||
player.embed.setPlaybackRate(input).then(() => {
|
||||
speed = input;
|
||||
triggerEvent.call(player, player.media, 'ratechange');
|
||||
});
|
||||
},
|
||||
});
|
||||
// Get original image
|
||||
url.pathname = `${url.pathname.split('_')[0]}.jpg`;
|
||||
|
||||
// Volume
|
||||
let { volume } = player.config;
|
||||
Object.defineProperty(player.media, 'volume', {
|
||||
get() {
|
||||
return volume;
|
||||
},
|
||||
set(input) {
|
||||
player.embed.setVolume(input).then(() => {
|
||||
volume = input;
|
||||
triggerEvent.call(player, player.media, 'volumechange');
|
||||
});
|
||||
},
|
||||
});
|
||||
// Set and show poster
|
||||
ui.setPoster.call(player, url.href).catch(() => {});
|
||||
});
|
||||
|
||||
// Muted
|
||||
let { muted } = player.config;
|
||||
Object.defineProperty(player.media, 'muted', {
|
||||
get() {
|
||||
return muted;
|
||||
},
|
||||
set(input) {
|
||||
const toggle = is.boolean(input) ? input : false;
|
||||
// Setup instance
|
||||
// https://github.com/vimeo/player.js
|
||||
player.embed = new window.Vimeo.Player(iframe, {
|
||||
autopause: player.config.autopause,
|
||||
muted: player.muted,
|
||||
});
|
||||
|
||||
player.embed.setVolume(toggle ? 0 : player.config.volume).then(() => {
|
||||
muted = toggle;
|
||||
triggerEvent.call(player, player.media, 'volumechange');
|
||||
});
|
||||
},
|
||||
});
|
||||
player.media.paused = true;
|
||||
player.media.currentTime = 0;
|
||||
|
||||
// Loop
|
||||
let { loop } = player.config;
|
||||
Object.defineProperty(player.media, 'loop', {
|
||||
get() {
|
||||
return loop;
|
||||
},
|
||||
set(input) {
|
||||
const toggle = is.boolean(input) ? input : player.config.loop.active;
|
||||
// Disable native text track rendering
|
||||
if (player.supported.ui) {
|
||||
player.embed.disableTextTrack();
|
||||
}
|
||||
|
||||
player.embed.setLoop(toggle).then(() => {
|
||||
loop = toggle;
|
||||
});
|
||||
},
|
||||
});
|
||||
// Create a faux HTML5 API using the Vimeo API
|
||||
player.media.play = () => {
|
||||
assurePlaybackState.call(player, true);
|
||||
return player.embed.play();
|
||||
};
|
||||
|
||||
// Source
|
||||
let currentSrc;
|
||||
player.media.pause = () => {
|
||||
assurePlaybackState.call(player, false);
|
||||
return player.embed.pause();
|
||||
};
|
||||
|
||||
player.media.stop = () => {
|
||||
player.pause();
|
||||
player.currentTime = 0;
|
||||
};
|
||||
|
||||
// Seeking
|
||||
let { currentTime } = player.media;
|
||||
Object.defineProperty(player.media, 'currentTime', {
|
||||
get() {
|
||||
return currentTime;
|
||||
},
|
||||
set(time) {
|
||||
// Vimeo will automatically play on seek if the video hasn't been played before
|
||||
|
||||
// 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;
|
||||
triggerEvent.call(player, media, 'seeking');
|
||||
|
||||
// If paused, mute until seek is complete
|
||||
Promise.resolve(restorePause && embed.setVolume(0))
|
||||
// Seek
|
||||
.then(() => embed.setCurrentTime(time))
|
||||
// Restore paused
|
||||
.then(() => restorePause && embed.pause())
|
||||
// Restore volume
|
||||
.then(() => restorePause && embed.setVolume(volume))
|
||||
.catch(() => {
|
||||
// Do nothing
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// Playback speed
|
||||
let speed = player.config.speed.selected;
|
||||
Object.defineProperty(player.media, 'playbackRate', {
|
||||
get() {
|
||||
return speed;
|
||||
},
|
||||
set(input) {
|
||||
player.embed
|
||||
.getVideoUrl()
|
||||
.then(value => {
|
||||
currentSrc = value;
|
||||
controls.setDownloadUrl.call(player);
|
||||
})
|
||||
.catch(error => {
|
||||
this.debug.warn(error);
|
||||
});
|
||||
.setPlaybackRate(input)
|
||||
.then(() => {
|
||||
speed = input;
|
||||
triggerEvent.call(player, player.media, 'ratechange');
|
||||
})
|
||||
.catch(() => {
|
||||
// Cannot set Playback Rate, Video is probably not on Pro account
|
||||
player.options.speed = [1];
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
Object.defineProperty(player.media, 'currentSrc', {
|
||||
get() {
|
||||
return currentSrc;
|
||||
},
|
||||
// Volume
|
||||
let { volume } = player.config;
|
||||
Object.defineProperty(player.media, 'volume', {
|
||||
get() {
|
||||
return volume;
|
||||
},
|
||||
set(input) {
|
||||
player.embed.setVolume(input).then(() => {
|
||||
volume = input;
|
||||
triggerEvent.call(player, player.media, 'volumechange');
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// Ended
|
||||
Object.defineProperty(player.media, 'ended', {
|
||||
get() {
|
||||
return player.currentTime === player.duration;
|
||||
},
|
||||
// Muted
|
||||
let { muted } = player.config;
|
||||
Object.defineProperty(player.media, 'muted', {
|
||||
get() {
|
||||
return muted;
|
||||
},
|
||||
set(input) {
|
||||
const toggle = is.boolean(input) ? input : false;
|
||||
|
||||
player.embed.setVolume(toggle ? 0 : player.config.volume).then(() => {
|
||||
muted = toggle;
|
||||
triggerEvent.call(player, player.media, 'volumechange');
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// Set aspect ratio based on video size
|
||||
Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => {
|
||||
const [width, height] = dimensions;
|
||||
player.embed.ratio = [width, height];
|
||||
setAspectRatio.call(this);
|
||||
// Loop
|
||||
let { loop } = player.config;
|
||||
Object.defineProperty(player.media, 'loop', {
|
||||
get() {
|
||||
return loop;
|
||||
},
|
||||
set(input) {
|
||||
const toggle = is.boolean(input) ? input : player.config.loop.active;
|
||||
|
||||
player.embed.setLoop(toggle).then(() => {
|
||||
loop = toggle;
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// Set autopause
|
||||
player.embed.setAutopause(player.config.autopause).then(state => {
|
||||
player.config.autopause = state;
|
||||
});
|
||||
// Source
|
||||
let currentSrc;
|
||||
player.embed
|
||||
.getVideoUrl()
|
||||
.then(value => {
|
||||
currentSrc = value;
|
||||
controls.setDownloadUrl.call(player);
|
||||
})
|
||||
.catch(error => {
|
||||
this.debug.warn(error);
|
||||
});
|
||||
|
||||
// Get title
|
||||
player.embed.getVideoTitle().then(title => {
|
||||
player.config.title = title;
|
||||
ui.setTitle.call(this);
|
||||
});
|
||||
Object.defineProperty(player.media, 'currentSrc', {
|
||||
get() {
|
||||
return currentSrc;
|
||||
},
|
||||
});
|
||||
|
||||
// Get current time
|
||||
player.embed.getCurrentTime().then(value => {
|
||||
currentTime = value;
|
||||
triggerEvent.call(player, player.media, 'timeupdate');
|
||||
});
|
||||
// Ended
|
||||
Object.defineProperty(player.media, 'ended', {
|
||||
get() {
|
||||
return player.currentTime === player.duration;
|
||||
},
|
||||
});
|
||||
|
||||
// Get duration
|
||||
player.embed.getDuration().then(value => {
|
||||
player.media.duration = value;
|
||||
triggerEvent.call(player, player.media, 'durationchange');
|
||||
});
|
||||
// Set aspect ratio based on video size
|
||||
Promise.all([player.embed.getVideoWidth(), player.embed.getVideoHeight()]).then(dimensions => {
|
||||
const [width, height] = dimensions;
|
||||
player.embed.ratio = [width, height];
|
||||
setAspectRatio.call(this);
|
||||
});
|
||||
|
||||
// Get captions
|
||||
player.embed.getTextTracks().then(tracks => {
|
||||
player.media.textTracks = tracks;
|
||||
captions.setup.call(player);
|
||||
});
|
||||
// Set autopause
|
||||
player.embed.setAutopause(player.config.autopause).then(state => {
|
||||
player.config.autopause = state;
|
||||
});
|
||||
|
||||
player.embed.on('cuechange', ({ cues = [] }) => {
|
||||
const strippedCues = cues.map(cue => stripHTML(cue.text));
|
||||
captions.updateCues.call(player, strippedCues);
|
||||
});
|
||||
// Get title
|
||||
player.embed.getVideoTitle().then(title => {
|
||||
player.config.title = title;
|
||||
ui.setTitle.call(this);
|
||||
});
|
||||
|
||||
player.embed.on('loaded', () => {
|
||||
// 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');
|
||||
}
|
||||
});
|
||||
// Get current time
|
||||
player.embed.getCurrentTime().then(value => {
|
||||
currentTime = value;
|
||||
triggerEvent.call(player, player.media, 'timeupdate');
|
||||
});
|
||||
|
||||
if (is.element(player.embed.element) && player.supported.ui) {
|
||||
const frame = player.embed.element;
|
||||
// Get duration
|
||||
player.embed.getDuration().then(value => {
|
||||
player.media.duration = value;
|
||||
triggerEvent.call(player, player.media, 'durationchange');
|
||||
});
|
||||
|
||||
// Fix keyboard focus issues
|
||||
// https://github.com/sampotts/plyr/issues/317
|
||||
frame.setAttribute('tabindex', -1);
|
||||
}
|
||||
});
|
||||
// Get captions
|
||||
player.embed.getTextTracks().then(tracks => {
|
||||
player.media.textTracks = tracks;
|
||||
captions.setup.call(player);
|
||||
});
|
||||
|
||||
player.embed.on('bufferstart', () => {
|
||||
triggerEvent.call(player, player.media, 'waiting');
|
||||
});
|
||||
player.embed.on('cuechange', ({ cues = [] }) => {
|
||||
const strippedCues = cues.map(cue => stripHTML(cue.text));
|
||||
captions.updateCues.call(player, strippedCues);
|
||||
});
|
||||
|
||||
player.embed.on('bufferend', () => {
|
||||
triggerEvent.call(player, player.media, 'playing');
|
||||
});
|
||||
player.embed.on('loaded', () => {
|
||||
// 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');
|
||||
}
|
||||
});
|
||||
|
||||
player.embed.on('play', () => {
|
||||
assurePlaybackState.call(player, true);
|
||||
triggerEvent.call(player, player.media, 'playing');
|
||||
});
|
||||
if (is.element(player.embed.element) && player.supported.ui) {
|
||||
const frame = player.embed.element;
|
||||
|
||||
player.embed.on('pause', () => {
|
||||
assurePlaybackState.call(player, false);
|
||||
});
|
||||
// Fix keyboard focus issues
|
||||
// https://github.com/sampotts/plyr/issues/317
|
||||
frame.setAttribute('tabindex', -1);
|
||||
}
|
||||
});
|
||||
|
||||
player.embed.on('timeupdate', data => {
|
||||
player.media.seeking = false;
|
||||
currentTime = data.seconds;
|
||||
triggerEvent.call(player, player.media, 'timeupdate');
|
||||
});
|
||||
player.embed.on('bufferstart', () => {
|
||||
triggerEvent.call(player, player.media, 'waiting');
|
||||
});
|
||||
|
||||
player.embed.on('progress', data => {
|
||||
player.media.buffered = data.percent;
|
||||
triggerEvent.call(player, player.media, 'progress');
|
||||
player.embed.on('bufferend', () => {
|
||||
triggerEvent.call(player, player.media, 'playing');
|
||||
});
|
||||
|
||||
// Check all loaded
|
||||
if (parseInt(data.percent, 10) === 1) {
|
||||
triggerEvent.call(player, player.media, 'canplaythrough');
|
||||
}
|
||||
player.embed.on('play', () => {
|
||||
assurePlaybackState.call(player, true);
|
||||
triggerEvent.call(player, player.media, 'playing');
|
||||
});
|
||||
|
||||
// Get duration as if we do it before load, it gives an incorrect value
|
||||
// https://github.com/sampotts/plyr/issues/891
|
||||
player.embed.getDuration().then(value => {
|
||||
if (value !== player.media.duration) {
|
||||
player.media.duration = value;
|
||||
triggerEvent.call(player, player.media, 'durationchange');
|
||||
}
|
||||
});
|
||||
});
|
||||
player.embed.on('pause', () => {
|
||||
assurePlaybackState.call(player, false);
|
||||
});
|
||||
|
||||
player.embed.on('seeked', () => {
|
||||
player.media.seeking = false;
|
||||
triggerEvent.call(player, player.media, 'seeked');
|
||||
});
|
||||
player.embed.on('timeupdate', data => {
|
||||
player.media.seeking = false;
|
||||
currentTime = data.seconds;
|
||||
triggerEvent.call(player, player.media, 'timeupdate');
|
||||
});
|
||||
|
||||
player.embed.on('ended', () => {
|
||||
player.media.paused = true;
|
||||
triggerEvent.call(player, player.media, 'ended');
|
||||
});
|
||||
player.embed.on('progress', data => {
|
||||
player.media.buffered = data.percent;
|
||||
triggerEvent.call(player, player.media, 'progress');
|
||||
|
||||
player.embed.on('error', detail => {
|
||||
player.media.error = detail;
|
||||
triggerEvent.call(player, player.media, 'error');
|
||||
});
|
||||
// Check all loaded
|
||||
if (parseInt(data.percent, 10) === 1) {
|
||||
triggerEvent.call(player, player.media, 'canplaythrough');
|
||||
}
|
||||
|
||||
// Rebuild UI
|
||||
setTimeout(() => ui.build.call(player), 0);
|
||||
},
|
||||
// Get duration as if we do it before load, it gives an incorrect value
|
||||
// https://github.com/sampotts/plyr/issues/891
|
||||
player.embed.getDuration().then(value => {
|
||||
if (value !== player.media.duration) {
|
||||
player.media.duration = value;
|
||||
triggerEvent.call(player, player.media, 'durationchange');
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
player.embed.on('seeked', () => {
|
||||
player.media.seeking = false;
|
||||
triggerEvent.call(player, player.media, 'seeked');
|
||||
});
|
||||
|
||||
player.embed.on('ended', () => {
|
||||
player.media.paused = true;
|
||||
triggerEvent.call(player, player.media, 'ended');
|
||||
});
|
||||
|
||||
player.embed.on('error', detail => {
|
||||
player.media.error = detail;
|
||||
triggerEvent.call(player, player.media, 'error');
|
||||
});
|
||||
|
||||
// Rebuild UI
|
||||
setTimeout(() => ui.build.call(player), 0);
|
||||
},
|
||||
};
|
||||
|
||||
export default vimeo;
|
||||
|
||||
@ -15,426 +15,426 @@ import { setAspectRatio } from '../utils/style';
|
||||
|
||||
// Parse YouTube ID from URL
|
||||
function parseId(url) {
|
||||
if (is.empty(url)) {
|
||||
return null;
|
||||
}
|
||||
if (is.empty(url)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const regex = /^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|&v=)([^#&?]*).*/;
|
||||
return url.match(regex) ? RegExp.$2 : url;
|
||||
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;
|
||||
triggerEvent.call(this, this.media, play ? 'play' : 'pause');
|
||||
}
|
||||
if (play && !this.embed.hasPlayed) {
|
||||
this.embed.hasPlayed = true;
|
||||
}
|
||||
if (this.media.paused === play) {
|
||||
this.media.paused = !play;
|
||||
triggerEvent.call(this, this.media, play ? 'play' : 'pause');
|
||||
}
|
||||
}
|
||||
|
||||
function getHost(config) {
|
||||
if (config.noCookie) {
|
||||
return 'https://www.youtube-nocookie.com';
|
||||
}
|
||||
if (config.noCookie) {
|
||||
return 'https://www.youtube-nocookie.com';
|
||||
}
|
||||
|
||||
if (window.location.protocol === 'http:') {
|
||||
return 'http://www.youtube.com';
|
||||
}
|
||||
if (window.location.protocol === 'http:') {
|
||||
return 'http://www.youtube.com';
|
||||
}
|
||||
|
||||
// Use YouTube's default
|
||||
return undefined;
|
||||
// Use YouTube's default
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const youtube = {
|
||||
setup() {
|
||||
// Add embed class for responsive
|
||||
toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
|
||||
setup() {
|
||||
// Add embed class for responsive
|
||||
toggleClass(this.elements.wrapper, this.config.classNames.embed, true);
|
||||
|
||||
// Setup API
|
||||
if (is.object(window.YT) && is.function(window.YT.Player)) {
|
||||
youtube.ready.call(this);
|
||||
} else {
|
||||
// Reference current global callback
|
||||
const callback = window.onYouTubeIframeAPIReady;
|
||||
// Setup API
|
||||
if (is.object(window.YT) && is.function(window.YT.Player)) {
|
||||
youtube.ready.call(this);
|
||||
} else {
|
||||
// Reference current global callback
|
||||
const callback = window.onYouTubeIframeAPIReady;
|
||||
|
||||
// Set callback to process queue
|
||||
window.onYouTubeIframeAPIReady = () => {
|
||||
// Call global callback if set
|
||||
if (is.function(callback)) {
|
||||
callback();
|
||||
}
|
||||
|
||||
youtube.ready.call(this);
|
||||
};
|
||||
|
||||
// Load the SDK
|
||||
loadScript(this.config.urls.youtube.sdk).catch(error => {
|
||||
this.debug.warn('YouTube API failed to load', error);
|
||||
});
|
||||
// Set callback to process queue
|
||||
window.onYouTubeIframeAPIReady = () => {
|
||||
// Call global callback if set
|
||||
if (is.function(callback)) {
|
||||
callback();
|
||||
}
|
||||
},
|
||||
|
||||
// Get the media title
|
||||
getTitle(videoId) {
|
||||
const url = format(this.config.urls.youtube.api, videoId);
|
||||
youtube.ready.call(this);
|
||||
};
|
||||
|
||||
fetch(url)
|
||||
.then(data => {
|
||||
if (is.object(data)) {
|
||||
const { title, height, width } = data;
|
||||
// Load the SDK
|
||||
loadScript(this.config.urls.youtube.sdk).catch(error => {
|
||||
this.debug.warn('YouTube API failed to load', error);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// Set title
|
||||
this.config.title = title;
|
||||
ui.setTitle.call(this);
|
||||
// Get the media title
|
||||
getTitle(videoId) {
|
||||
const url = format(this.config.urls.youtube.api, videoId);
|
||||
|
||||
// Set aspect ratio
|
||||
this.embed.ratio = [width, height];
|
||||
}
|
||||
fetch(url)
|
||||
.then(data => {
|
||||
if (is.object(data)) {
|
||||
const { title, height, width } = data;
|
||||
|
||||
setAspectRatio.call(this);
|
||||
})
|
||||
.catch(() => {
|
||||
// Set aspect ratio
|
||||
setAspectRatio.call(this);
|
||||
});
|
||||
},
|
||||
// Set title
|
||||
this.config.title = title;
|
||||
ui.setTitle.call(this);
|
||||
|
||||
// API ready
|
||||
ready() {
|
||||
const player = this;
|
||||
// Ignore already setup (race condition)
|
||||
const currentId = player.media && player.media.getAttribute('id');
|
||||
if (!is.empty(currentId) && currentId.startsWith('youtube-')) {
|
||||
// Set aspect ratio
|
||||
this.embed.ratio = [width, height];
|
||||
}
|
||||
|
||||
setAspectRatio.call(this);
|
||||
})
|
||||
.catch(() => {
|
||||
// Set aspect ratio
|
||||
setAspectRatio.call(this);
|
||||
});
|
||||
},
|
||||
|
||||
// API ready
|
||||
ready() {
|
||||
const player = this;
|
||||
// Ignore already setup (race condition)
|
||||
const currentId = player.media && player.media.getAttribute('id');
|
||||
if (!is.empty(currentId) && currentId.startsWith('youtube-')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get the source URL or ID
|
||||
let source = player.media.getAttribute('src');
|
||||
|
||||
// Get from <div> if needed
|
||||
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 = parseId(source);
|
||||
const id = generateId(player.provider);
|
||||
// Get poster, if already set
|
||||
const { poster } = player;
|
||||
// Replace media element
|
||||
const container = createElement('div', { id, 'data-poster': poster });
|
||||
player.media = replaceElement(container, player.media);
|
||||
|
||||
// Id to poster wrapper
|
||||
const posterSrc = s => `https://i.ytimg.com/vi/${videoId}/${s}default.jpg`;
|
||||
|
||||
// Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide)
|
||||
loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded
|
||||
.catch(() => loadImage(posterSrc('sd'), 121)) // 480p padded 4:3
|
||||
.catch(() => loadImage(posterSrc('hq'))) // 360p padded 4:3. Always exists
|
||||
.then(image => ui.setPoster.call(player, image.src))
|
||||
.then(src => {
|
||||
// If the image is padded, use background-size "cover" instead (like youtube does too with their posters)
|
||||
if (!src.includes('maxres')) {
|
||||
player.elements.poster.style.backgroundSize = 'cover';
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
|
||||
const config = player.config.youtube;
|
||||
|
||||
// Setup instance
|
||||
// https://developers.google.com/youtube/iframe_api_reference
|
||||
player.embed = new window.YT.Player(id, {
|
||||
videoId,
|
||||
host: getHost(config),
|
||||
playerVars: extend(
|
||||
{},
|
||||
{
|
||||
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
|
||||
disablekb: 1, // Disable keyboard as we handle it
|
||||
playsinline: !player.config.fullscreen.iosNative ? 1 : 0, // Allow iOS inline playback
|
||||
// Captions are flaky on YouTube
|
||||
cc_load_policy: player.captions.active ? 1 : 0,
|
||||
cc_lang_pref: player.config.captions.language,
|
||||
// Tracking for stats
|
||||
widget_referrer: window ? window.location.href : null,
|
||||
},
|
||||
config,
|
||||
),
|
||||
events: {
|
||||
onError(event) {
|
||||
// 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');
|
||||
}
|
||||
},
|
||||
onPlaybackRateChange(event) {
|
||||
// Get the instance
|
||||
const instance = event.target;
|
||||
|
||||
// Get current speed
|
||||
player.media.playbackRate = instance.getPlaybackRate();
|
||||
|
||||
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;
|
||||
|
||||
// Get the source URL or ID
|
||||
let source = player.media.getAttribute('src');
|
||||
// Get the title
|
||||
youtube.getTitle.call(player, videoId);
|
||||
|
||||
// Get from <div> if needed
|
||||
if (is.empty(source)) {
|
||||
source = player.media.getAttribute(this.config.attributes.embed.id);
|
||||
}
|
||||
// Create a faux HTML5 API using the YouTube API
|
||||
player.media.play = () => {
|
||||
assurePlaybackState.call(player, true);
|
||||
instance.playVideo();
|
||||
};
|
||||
|
||||
// Replace the <iframe> with a <div> due to YouTube API issues
|
||||
const videoId = parseId(source);
|
||||
const id = generateId(player.provider);
|
||||
// Get poster, if already set
|
||||
const { poster } = player;
|
||||
// Replace media element
|
||||
const container = createElement('div', { id, poster });
|
||||
player.media = replaceElement(container, player.media);
|
||||
player.media.pause = () => {
|
||||
assurePlaybackState.call(player, false);
|
||||
instance.pauseVideo();
|
||||
};
|
||||
|
||||
// Id to poster wrapper
|
||||
const posterSrc = s => `https://i.ytimg.com/vi/${videoId}/${s}default.jpg`;
|
||||
player.media.stop = () => {
|
||||
instance.stopVideo();
|
||||
};
|
||||
|
||||
// Check thumbnail images in order of quality, but reject fallback thumbnails (120px wide)
|
||||
loadImage(posterSrc('maxres'), 121) // Higest quality and unpadded
|
||||
.catch(() => loadImage(posterSrc('sd'), 121)) // 480p padded 4:3
|
||||
.catch(() => loadImage(posterSrc('hq'))) // 360p padded 4:3. Always exists
|
||||
.then(image => ui.setPoster.call(player, image.src))
|
||||
.then(src => {
|
||||
// If the image is padded, use background-size "cover" instead (like youtube does too with their posters)
|
||||
if (!src.includes('maxres')) {
|
||||
player.elements.poster.style.backgroundSize = 'cover';
|
||||
}
|
||||
})
|
||||
.catch(() => {});
|
||||
player.media.duration = instance.getDuration();
|
||||
player.media.paused = true;
|
||||
|
||||
const config = player.config.youtube;
|
||||
|
||||
// Setup instance
|
||||
// https://developers.google.com/youtube/iframe_api_reference
|
||||
player.embed = new window.YT.Player(id, {
|
||||
videoId,
|
||||
host: getHost(config),
|
||||
playerVars: extend(
|
||||
{},
|
||||
{
|
||||
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
|
||||
disablekb: 1, // Disable keyboard as we handle it
|
||||
playsinline: !player.config.fullscreen.iosNative ? 1 : 0, // Allow iOS inline playback
|
||||
// Captions are flaky on YouTube
|
||||
cc_load_policy: player.captions.active ? 1 : 0,
|
||||
cc_lang_pref: player.config.captions.language,
|
||||
// Tracking for stats
|
||||
widget_referrer: window ? window.location.href : null,
|
||||
},
|
||||
config,
|
||||
),
|
||||
events: {
|
||||
onError(event) {
|
||||
// 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');
|
||||
}
|
||||
},
|
||||
onPlaybackRateChange(event) {
|
||||
// Get the instance
|
||||
const instance = event.target;
|
||||
|
||||
// Get current speed
|
||||
player.media.playbackRate = instance.getPlaybackRate();
|
||||
|
||||
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;
|
||||
|
||||
// Get the title
|
||||
youtube.getTitle.call(player, videoId);
|
||||
|
||||
// Create a faux HTML5 API using the YouTube API
|
||||
player.media.play = () => {
|
||||
assurePlaybackState.call(player, true);
|
||||
instance.playVideo();
|
||||
};
|
||||
|
||||
player.media.pause = () => {
|
||||
assurePlaybackState.call(player, false);
|
||||
instance.pauseVideo();
|
||||
};
|
||||
|
||||
player.media.stop = () => {
|
||||
instance.stopVideo();
|
||||
};
|
||||
|
||||
player.media.duration = instance.getDuration();
|
||||
player.media.paused = true;
|
||||
|
||||
// Seeking
|
||||
player.media.currentTime = 0;
|
||||
Object.defineProperty(player.media, 'currentTime', {
|
||||
get() {
|
||||
return Number(instance.getCurrentTime());
|
||||
},
|
||||
set(time) {
|
||||
// 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;
|
||||
triggerEvent.call(player, player.media, 'seeking');
|
||||
|
||||
// Seek after events sent
|
||||
instance.seekTo(time);
|
||||
},
|
||||
});
|
||||
|
||||
// Playback speed
|
||||
Object.defineProperty(player.media, 'playbackRate', {
|
||||
get() {
|
||||
return instance.getPlaybackRate();
|
||||
},
|
||||
set(input) {
|
||||
instance.setPlaybackRate(input);
|
||||
},
|
||||
});
|
||||
|
||||
// Volume
|
||||
let { volume } = player.config;
|
||||
Object.defineProperty(player.media, 'volume', {
|
||||
get() {
|
||||
return volume;
|
||||
},
|
||||
set(input) {
|
||||
volume = input;
|
||||
instance.setVolume(volume * 100);
|
||||
triggerEvent.call(player, player.media, 'volumechange');
|
||||
},
|
||||
});
|
||||
|
||||
// Muted
|
||||
let { muted } = player.config;
|
||||
Object.defineProperty(player.media, 'muted', {
|
||||
get() {
|
||||
return muted;
|
||||
},
|
||||
set(input) {
|
||||
const toggle = is.boolean(input) ? input : muted;
|
||||
muted = toggle;
|
||||
instance[toggle ? 'mute' : 'unMute']();
|
||||
triggerEvent.call(player, player.media, 'volumechange');
|
||||
},
|
||||
});
|
||||
|
||||
// Source
|
||||
Object.defineProperty(player.media, 'currentSrc', {
|
||||
get() {
|
||||
return instance.getVideoUrl();
|
||||
},
|
||||
});
|
||||
|
||||
// Ended
|
||||
Object.defineProperty(player.media, 'ended', {
|
||||
get() {
|
||||
return player.currentTime === player.duration;
|
||||
},
|
||||
});
|
||||
|
||||
// Get available speeds
|
||||
const speeds = instance.getAvailablePlaybackRates();
|
||||
// Filter based on config
|
||||
player.options.speed = speeds.filter(s => player.config.speed.options.includes(s));
|
||||
|
||||
// Set the tabindex to avoid focus entering iframe
|
||||
if (player.supported.ui) {
|
||||
player.media.setAttribute('tabindex', -1);
|
||||
}
|
||||
|
||||
triggerEvent.call(player, player.media, 'timeupdate');
|
||||
triggerEvent.call(player, player.media, 'durationchange');
|
||||
|
||||
// Reset timer
|
||||
clearInterval(player.timers.buffering);
|
||||
|
||||
// Setup buffering
|
||||
player.timers.buffering = setInterval(() => {
|
||||
// Get loaded % from YouTube
|
||||
player.media.buffered = instance.getVideoLoadedFraction();
|
||||
|
||||
// Trigger progress only when we actually buffer something
|
||||
if (player.media.lastBuffered === null || player.media.lastBuffered < player.media.buffered) {
|
||||
triggerEvent.call(player, player.media, 'progress');
|
||||
}
|
||||
|
||||
// Set last buffer point
|
||||
player.media.lastBuffered = player.media.buffered;
|
||||
|
||||
// Bail if we're at 100%
|
||||
if (player.media.buffered === 1) {
|
||||
clearInterval(player.timers.buffering);
|
||||
|
||||
// Trigger event
|
||||
triggerEvent.call(player, player.media, 'canplaythrough');
|
||||
}
|
||||
}, 200);
|
||||
|
||||
// Rebuild UI
|
||||
setTimeout(() => ui.build.call(player), 50);
|
||||
},
|
||||
onStateChange(event) {
|
||||
// Get the instance
|
||||
const instance = event.target;
|
||||
|
||||
// Reset timer
|
||||
clearInterval(player.timers.playing);
|
||||
|
||||
const seeked = player.media.seeking && [1, 2].includes(event.data);
|
||||
|
||||
if (seeked) {
|
||||
// Unset seeking and fire seeked event
|
||||
player.media.seeking = false;
|
||||
triggerEvent.call(player, player.media, 'seeked');
|
||||
}
|
||||
|
||||
// Handle events
|
||||
// -1 Unstarted
|
||||
// 0 Ended
|
||||
// 1 Playing
|
||||
// 2 Paused
|
||||
// 3 Buffering
|
||||
// 5 Video cued
|
||||
switch (event.data) {
|
||||
case -1:
|
||||
// Update scrubber
|
||||
triggerEvent.call(player, player.media, 'timeupdate');
|
||||
|
||||
// Get loaded % from YouTube
|
||||
player.media.buffered = instance.getVideoLoadedFraction();
|
||||
triggerEvent.call(player, player.media, 'progress');
|
||||
|
||||
break;
|
||||
|
||||
case 0:
|
||||
assurePlaybackState.call(player, false);
|
||||
|
||||
// YouTube doesn't support loop for a single video, so mimick it.
|
||||
if (player.media.loop) {
|
||||
// YouTube needs a call to `stopVideo` before playing again
|
||||
instance.stopVideo();
|
||||
instance.playVideo();
|
||||
} else {
|
||||
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.config.autoplay && player.media.paused && !player.embed.hasPlayed) {
|
||||
player.media.pause();
|
||||
} else {
|
||||
assurePlaybackState.call(player, true);
|
||||
|
||||
triggerEvent.call(player, player.media, 'playing');
|
||||
|
||||
// Poll to get playback progress
|
||||
player.timers.playing = setInterval(() => {
|
||||
triggerEvent.call(player, player.media, 'timeupdate');
|
||||
}, 50);
|
||||
|
||||
// Check duration again due to YouTube bug
|
||||
// https://github.com/sampotts/plyr/issues/374
|
||||
// https://code.google.com/p/gdata-issues/issues/detail?id=8690
|
||||
if (player.media.duration !== instance.getDuration()) {
|
||||
player.media.duration = instance.getDuration();
|
||||
triggerEvent.call(player, player.media, 'durationchange');
|
||||
}
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
case 2:
|
||||
// Restore audio (YouTube starts playing on seek if the video hasn't been played yet)
|
||||
if (!player.muted) {
|
||||
player.embed.unMute();
|
||||
}
|
||||
assurePlaybackState.call(player, false);
|
||||
|
||||
break;
|
||||
|
||||
case 3:
|
||||
// Trigger waiting event to add loading classes to container as the video buffers.
|
||||
triggerEvent.call(player, player.media, 'waiting');
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
triggerEvent.call(player, player.elements.container, 'statechange', false, {
|
||||
code: event.data,
|
||||
});
|
||||
},
|
||||
// Seeking
|
||||
player.media.currentTime = 0;
|
||||
Object.defineProperty(player.media, 'currentTime', {
|
||||
get() {
|
||||
return Number(instance.getCurrentTime());
|
||||
},
|
||||
});
|
||||
},
|
||||
set(time) {
|
||||
// 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;
|
||||
triggerEvent.call(player, player.media, 'seeking');
|
||||
|
||||
// Seek after events sent
|
||||
instance.seekTo(time);
|
||||
},
|
||||
});
|
||||
|
||||
// Playback speed
|
||||
Object.defineProperty(player.media, 'playbackRate', {
|
||||
get() {
|
||||
return instance.getPlaybackRate();
|
||||
},
|
||||
set(input) {
|
||||
instance.setPlaybackRate(input);
|
||||
},
|
||||
});
|
||||
|
||||
// Volume
|
||||
let { volume } = player.config;
|
||||
Object.defineProperty(player.media, 'volume', {
|
||||
get() {
|
||||
return volume;
|
||||
},
|
||||
set(input) {
|
||||
volume = input;
|
||||
instance.setVolume(volume * 100);
|
||||
triggerEvent.call(player, player.media, 'volumechange');
|
||||
},
|
||||
});
|
||||
|
||||
// Muted
|
||||
let { muted } = player.config;
|
||||
Object.defineProperty(player.media, 'muted', {
|
||||
get() {
|
||||
return muted;
|
||||
},
|
||||
set(input) {
|
||||
const toggle = is.boolean(input) ? input : muted;
|
||||
muted = toggle;
|
||||
instance[toggle ? 'mute' : 'unMute']();
|
||||
triggerEvent.call(player, player.media, 'volumechange');
|
||||
},
|
||||
});
|
||||
|
||||
// Source
|
||||
Object.defineProperty(player.media, 'currentSrc', {
|
||||
get() {
|
||||
return instance.getVideoUrl();
|
||||
},
|
||||
});
|
||||
|
||||
// Ended
|
||||
Object.defineProperty(player.media, 'ended', {
|
||||
get() {
|
||||
return player.currentTime === player.duration;
|
||||
},
|
||||
});
|
||||
|
||||
// Get available speeds
|
||||
const speeds = instance.getAvailablePlaybackRates();
|
||||
// Filter based on config
|
||||
player.options.speed = speeds.filter(s => player.config.speed.options.includes(s));
|
||||
|
||||
// Set the tabindex to avoid focus entering iframe
|
||||
if (player.supported.ui) {
|
||||
player.media.setAttribute('tabindex', -1);
|
||||
}
|
||||
|
||||
triggerEvent.call(player, player.media, 'timeupdate');
|
||||
triggerEvent.call(player, player.media, 'durationchange');
|
||||
|
||||
// Reset timer
|
||||
clearInterval(player.timers.buffering);
|
||||
|
||||
// Setup buffering
|
||||
player.timers.buffering = setInterval(() => {
|
||||
// Get loaded % from YouTube
|
||||
player.media.buffered = instance.getVideoLoadedFraction();
|
||||
|
||||
// Trigger progress only when we actually buffer something
|
||||
if (player.media.lastBuffered === null || player.media.lastBuffered < player.media.buffered) {
|
||||
triggerEvent.call(player, player.media, 'progress');
|
||||
}
|
||||
|
||||
// Set last buffer point
|
||||
player.media.lastBuffered = player.media.buffered;
|
||||
|
||||
// Bail if we're at 100%
|
||||
if (player.media.buffered === 1) {
|
||||
clearInterval(player.timers.buffering);
|
||||
|
||||
// Trigger event
|
||||
triggerEvent.call(player, player.media, 'canplaythrough');
|
||||
}
|
||||
}, 200);
|
||||
|
||||
// Rebuild UI
|
||||
setTimeout(() => ui.build.call(player), 50);
|
||||
},
|
||||
onStateChange(event) {
|
||||
// Get the instance
|
||||
const instance = event.target;
|
||||
|
||||
// Reset timer
|
||||
clearInterval(player.timers.playing);
|
||||
|
||||
const seeked = player.media.seeking && [1, 2].includes(event.data);
|
||||
|
||||
if (seeked) {
|
||||
// Unset seeking and fire seeked event
|
||||
player.media.seeking = false;
|
||||
triggerEvent.call(player, player.media, 'seeked');
|
||||
}
|
||||
|
||||
// Handle events
|
||||
// -1 Unstarted
|
||||
// 0 Ended
|
||||
// 1 Playing
|
||||
// 2 Paused
|
||||
// 3 Buffering
|
||||
// 5 Video cued
|
||||
switch (event.data) {
|
||||
case -1:
|
||||
// Update scrubber
|
||||
triggerEvent.call(player, player.media, 'timeupdate');
|
||||
|
||||
// Get loaded % from YouTube
|
||||
player.media.buffered = instance.getVideoLoadedFraction();
|
||||
triggerEvent.call(player, player.media, 'progress');
|
||||
|
||||
break;
|
||||
|
||||
case 0:
|
||||
assurePlaybackState.call(player, false);
|
||||
|
||||
// YouTube doesn't support loop for a single video, so mimick it.
|
||||
if (player.media.loop) {
|
||||
// YouTube needs a call to `stopVideo` before playing again
|
||||
instance.stopVideo();
|
||||
instance.playVideo();
|
||||
} else {
|
||||
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.config.autoplay && player.media.paused && !player.embed.hasPlayed) {
|
||||
player.media.pause();
|
||||
} else {
|
||||
assurePlaybackState.call(player, true);
|
||||
|
||||
triggerEvent.call(player, player.media, 'playing');
|
||||
|
||||
// Poll to get playback progress
|
||||
player.timers.playing = setInterval(() => {
|
||||
triggerEvent.call(player, player.media, 'timeupdate');
|
||||
}, 50);
|
||||
|
||||
// Check duration again due to YouTube bug
|
||||
// https://github.com/sampotts/plyr/issues/374
|
||||
// https://code.google.com/p/gdata-issues/issues/detail?id=8690
|
||||
if (player.media.duration !== instance.getDuration()) {
|
||||
player.media.duration = instance.getDuration();
|
||||
triggerEvent.call(player, player.media, 'durationchange');
|
||||
}
|
||||
}
|
||||
|
||||
break;
|
||||
|
||||
case 2:
|
||||
// Restore audio (YouTube starts playing on seek if the video hasn't been played yet)
|
||||
if (!player.muted) {
|
||||
player.embed.unMute();
|
||||
}
|
||||
assurePlaybackState.call(player, false);
|
||||
|
||||
break;
|
||||
|
||||
case 3:
|
||||
// Trigger waiting event to add loading classes to container as the video buffers.
|
||||
triggerEvent.call(player, player.media, 'waiting');
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
triggerEvent.call(player, player.elements.container, 'statechange', false, {
|
||||
code: event.data,
|
||||
});
|
||||
},
|
||||
},
|
||||
});
|
||||
},
|
||||
};
|
||||
|
||||
export default youtube;
|
||||
|
||||
989
src/js/plyr.d.ts
vendored
989
src/js/plyr.d.ts
vendored
File diff suppressed because it is too large
Load Diff
2126
src/js/plyr.js
2126
src/js/plyr.js
File diff suppressed because it is too large
Load Diff
@ -1,6 +1,6 @@
|
||||
// ==========================================================================
|
||||
// Plyr Polyfilled Build
|
||||
// plyr.js v3.5.10
|
||||
// plyr.js v3.6.1
|
||||
// https://github.com/sampotts/plyr
|
||||
// License: The MIT License (MIT)
|
||||
// ==========================================================================
|
||||
|
||||
244
src/js/source.js
244
src/js/source.js
@ -13,146 +13,146 @@ import is from './utils/is';
|
||||
import { getDeep } from './utils/objects';
|
||||
|
||||
const source = {
|
||||
// Add elements to HTML5 media (source, tracks, etc)
|
||||
insertElements(type, attributes) {
|
||||
if (is.string(attributes)) {
|
||||
insertElement(type, this.media, {
|
||||
src: attributes,
|
||||
});
|
||||
} else if (is.array(attributes)) {
|
||||
attributes.forEach(attribute => {
|
||||
insertElement(type, this.media, attribute);
|
||||
});
|
||||
}
|
||||
},
|
||||
// Add elements to HTML5 media (source, tracks, etc)
|
||||
insertElements(type, attributes) {
|
||||
if (is.string(attributes)) {
|
||||
insertElement(type, this.media, {
|
||||
src: attributes,
|
||||
});
|
||||
} else if (is.array(attributes)) {
|
||||
attributes.forEach(attribute => {
|
||||
insertElement(type, this.media, attribute);
|
||||
});
|
||||
}
|
||||
},
|
||||
|
||||
// Update source
|
||||
// Sources are not checked for support so be careful
|
||||
change(input) {
|
||||
if (!getDeep(input, 'sources.length')) {
|
||||
this.debug.warn('Invalid source format');
|
||||
return;
|
||||
// Update source
|
||||
// Sources are not checked for support so be careful
|
||||
change(input) {
|
||||
if (!getDeep(input, 'sources.length')) {
|
||||
this.debug.warn('Invalid source format');
|
||||
return;
|
||||
}
|
||||
|
||||
// Cancel current network requests
|
||||
html5.cancelRequests.call(this);
|
||||
|
||||
// Destroy instance and re-setup
|
||||
this.destroy.call(
|
||||
this,
|
||||
() => {
|
||||
// Reset quality options
|
||||
this.options.quality = [];
|
||||
|
||||
// Remove elements
|
||||
removeElement(this.media);
|
||||
this.media = null;
|
||||
|
||||
// Reset class name
|
||||
if (is.element(this.elements.container)) {
|
||||
this.elements.container.removeAttribute('class');
|
||||
}
|
||||
|
||||
// Cancel current network requests
|
||||
html5.cancelRequests.call(this);
|
||||
// Set the type and provider
|
||||
const { sources, type } = input;
|
||||
const [{ provider = providers.html5, src }] = sources;
|
||||
const tagName = provider === 'html5' ? type : 'div';
|
||||
const attributes = provider === 'html5' ? {} : { src };
|
||||
|
||||
// Destroy instance and re-setup
|
||||
this.destroy.call(
|
||||
this,
|
||||
() => {
|
||||
// Reset quality options
|
||||
this.options.quality = [];
|
||||
Object.assign(this, {
|
||||
provider,
|
||||
type,
|
||||
// Check for support
|
||||
supported: support.check(type, provider, this.config.playsinline),
|
||||
// Create new element
|
||||
media: createElement(tagName, attributes),
|
||||
});
|
||||
|
||||
// Remove elements
|
||||
removeElement(this.media);
|
||||
this.media = null;
|
||||
// Inject the new element
|
||||
this.elements.container.appendChild(this.media);
|
||||
|
||||
// Reset class name
|
||||
if (is.element(this.elements.container)) {
|
||||
this.elements.container.removeAttribute('class');
|
||||
}
|
||||
// Autoplay the new source?
|
||||
if (is.boolean(input.autoplay)) {
|
||||
this.config.autoplay = input.autoplay;
|
||||
}
|
||||
|
||||
// Set the type and provider
|
||||
const { sources, type } = input;
|
||||
const [{ provider = providers.html5, src }] = sources;
|
||||
const tagName = provider === 'html5' ? type : 'div';
|
||||
const attributes = provider === 'html5' ? {} : { src };
|
||||
// Set attributes for audio and video
|
||||
if (this.isHTML5) {
|
||||
if (this.config.crossorigin) {
|
||||
this.media.setAttribute('crossorigin', '');
|
||||
}
|
||||
if (this.config.autoplay) {
|
||||
this.media.setAttribute('autoplay', '');
|
||||
}
|
||||
if (!is.empty(input.poster)) {
|
||||
this.poster = input.poster;
|
||||
}
|
||||
if (this.config.loop.active) {
|
||||
this.media.setAttribute('loop', '');
|
||||
}
|
||||
if (this.config.muted) {
|
||||
this.media.setAttribute('muted', '');
|
||||
}
|
||||
if (this.config.playsinline) {
|
||||
this.media.setAttribute('playsinline', '');
|
||||
}
|
||||
}
|
||||
|
||||
Object.assign(this, {
|
||||
provider,
|
||||
type,
|
||||
// Check for support
|
||||
supported: support.check(type, provider, this.config.playsinline),
|
||||
// Create new element
|
||||
media: createElement(tagName, attributes),
|
||||
});
|
||||
// Restore class hook
|
||||
ui.addStyleHook.call(this);
|
||||
|
||||
// Inject the new element
|
||||
this.elements.container.appendChild(this.media);
|
||||
// Set new sources for html5
|
||||
if (this.isHTML5) {
|
||||
source.insertElements.call(this, 'source', sources);
|
||||
}
|
||||
|
||||
// Autoplay the new source?
|
||||
if (is.boolean(input.autoplay)) {
|
||||
this.config.autoplay = input.autoplay;
|
||||
}
|
||||
// Set video title
|
||||
this.config.title = input.title;
|
||||
|
||||
// Set attributes for audio and video
|
||||
if (this.isHTML5) {
|
||||
if (this.config.crossorigin) {
|
||||
this.media.setAttribute('crossorigin', '');
|
||||
}
|
||||
if (this.config.autoplay) {
|
||||
this.media.setAttribute('autoplay', '');
|
||||
}
|
||||
if (!is.empty(input.poster)) {
|
||||
this.poster = input.poster;
|
||||
}
|
||||
if (this.config.loop.active) {
|
||||
this.media.setAttribute('loop', '');
|
||||
}
|
||||
if (this.config.muted) {
|
||||
this.media.setAttribute('muted', '');
|
||||
}
|
||||
if (this.config.playsinline) {
|
||||
this.media.setAttribute('playsinline', '');
|
||||
}
|
||||
}
|
||||
// Set up from scratch
|
||||
media.setup.call(this);
|
||||
|
||||
// Restore class hook
|
||||
ui.addStyleHook.call(this);
|
||||
// HTML5 stuff
|
||||
if (this.isHTML5) {
|
||||
// Setup captions
|
||||
if (Object.keys(input).includes('tracks')) {
|
||||
source.insertElements.call(this, 'track', input.tracks);
|
||||
}
|
||||
}
|
||||
|
||||
// Set new sources for html5
|
||||
if (this.isHTML5) {
|
||||
source.insertElements.call(this, 'source', sources);
|
||||
}
|
||||
// If HTML5 or embed but not fully supported, setupInterface and call ready now
|
||||
if (this.isHTML5 || (this.isEmbed && !this.supported.ui)) {
|
||||
// Setup interface
|
||||
ui.build.call(this);
|
||||
}
|
||||
|
||||
// Set video title
|
||||
this.config.title = input.title;
|
||||
// Load HTML5 sources
|
||||
if (this.isHTML5) {
|
||||
this.media.load();
|
||||
}
|
||||
|
||||
// Set up from scratch
|
||||
media.setup.call(this);
|
||||
// Update previewThumbnails config & reload plugin
|
||||
if (!is.empty(input.previewThumbnails)) {
|
||||
Object.assign(this.config.previewThumbnails, input.previewThumbnails);
|
||||
|
||||
// HTML5 stuff
|
||||
if (this.isHTML5) {
|
||||
// Setup captions
|
||||
if (Object.keys(input).includes('tracks')) {
|
||||
source.insertElements.call(this, 'track', input.tracks);
|
||||
}
|
||||
}
|
||||
// Cleanup previewThumbnails plugin if it was loaded
|
||||
if (this.previewThumbnails && this.previewThumbnails.loaded) {
|
||||
this.previewThumbnails.destroy();
|
||||
this.previewThumbnails = null;
|
||||
}
|
||||
|
||||
// If HTML5 or embed but not fully supported, setupInterface and call ready now
|
||||
if (this.isHTML5 || (this.isEmbed && !this.supported.ui)) {
|
||||
// Setup interface
|
||||
ui.build.call(this);
|
||||
}
|
||||
// Create new instance if it is still enabled
|
||||
if (this.config.previewThumbnails.enabled) {
|
||||
this.previewThumbnails = new PreviewThumbnails(this);
|
||||
}
|
||||
}
|
||||
|
||||
// Load HTML5 sources
|
||||
if (this.isHTML5) {
|
||||
this.media.load();
|
||||
}
|
||||
|
||||
// Update previewThumbnails config & reload plugin
|
||||
if (!is.empty(input.previewThumbnails)) {
|
||||
Object.assign(this.config.previewThumbnails, input.previewThumbnails);
|
||||
|
||||
// Cleanup previewThumbnails plugin if it was loaded
|
||||
if (this.previewThumbnails && this.previewThumbnails.loaded) {
|
||||
this.previewThumbnails.destroy();
|
||||
this.previewThumbnails = null;
|
||||
}
|
||||
|
||||
// Create new instance if it is still enabled
|
||||
if (this.config.previewThumbnails.enabled) {
|
||||
this.previewThumbnails = new PreviewThumbnails(this);
|
||||
}
|
||||
}
|
||||
|
||||
// Update the fullscreen support
|
||||
this.fullscreen.update();
|
||||
},
|
||||
true,
|
||||
);
|
||||
},
|
||||
// Update the fullscreen support
|
||||
this.fullscreen.update();
|
||||
},
|
||||
true,
|
||||
);
|
||||
},
|
||||
};
|
||||
|
||||
export default source;
|
||||
|
||||
@ -6,72 +6,72 @@ import is from './utils/is';
|
||||
import { extend } from './utils/objects';
|
||||
|
||||
class Storage {
|
||||
constructor(player) {
|
||||
this.enabled = player.config.storage.enabled;
|
||||
this.key = player.config.storage.key;
|
||||
constructor(player) {
|
||||
this.enabled = player.config.storage.enabled;
|
||||
this.key = player.config.storage.key;
|
||||
}
|
||||
|
||||
// Check for actual support (see if we can use it)
|
||||
static get supported() {
|
||||
try {
|
||||
if (!('localStorage' in window)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const test = '___test';
|
||||
|
||||
// Try to use it (it might be disabled, e.g. user is in private mode)
|
||||
// see: https://github.com/sampotts/plyr/issues/131
|
||||
window.localStorage.setItem(test, test);
|
||||
window.localStorage.removeItem(test);
|
||||
|
||||
return true;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
}
|
||||
|
||||
get(key) {
|
||||
if (!Storage.supported || !this.enabled) {
|
||||
return null;
|
||||
}
|
||||
|
||||
// Check for actual support (see if we can use it)
|
||||
static get supported() {
|
||||
try {
|
||||
if (!('localStorage' in window)) {
|
||||
return false;
|
||||
}
|
||||
const store = window.localStorage.getItem(this.key);
|
||||
|
||||
const test = '___test';
|
||||
|
||||
// Try to use it (it might be disabled, e.g. user is in private mode)
|
||||
// see: https://github.com/sampotts/plyr/issues/131
|
||||
window.localStorage.setItem(test, test);
|
||||
window.localStorage.removeItem(test);
|
||||
|
||||
return true;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
if (is.empty(store)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
get(key) {
|
||||
if (!Storage.supported || !this.enabled) {
|
||||
return null;
|
||||
}
|
||||
const json = JSON.parse(store);
|
||||
|
||||
const store = window.localStorage.getItem(this.key);
|
||||
return is.string(key) && key.length ? json[key] : json;
|
||||
}
|
||||
|
||||
if (is.empty(store)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const json = JSON.parse(store);
|
||||
|
||||
return is.string(key) && key.length ? json[key] : json;
|
||||
set(object) {
|
||||
// Bail if we don't have localStorage support or it's disabled
|
||||
if (!Storage.supported || !this.enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
set(object) {
|
||||
// Bail if we don't have localStorage support or it's disabled
|
||||
if (!Storage.supported || !this.enabled) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Can only store objectst
|
||||
if (!is.object(object)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get current storage
|
||||
let storage = this.get();
|
||||
|
||||
// Default to empty object
|
||||
if (is.empty(storage)) {
|
||||
storage = {};
|
||||
}
|
||||
|
||||
// Update the working copy of the values
|
||||
extend(storage, object);
|
||||
|
||||
// Update storage
|
||||
window.localStorage.setItem(this.key, JSON.stringify(storage));
|
||||
// Can only store objectst
|
||||
if (!is.object(object)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Get current storage
|
||||
let storage = this.get();
|
||||
|
||||
// Default to empty object
|
||||
if (is.empty(storage)) {
|
||||
storage = {};
|
||||
}
|
||||
|
||||
// Update the working copy of the values
|
||||
extend(storage, object);
|
||||
|
||||
// Update storage
|
||||
window.localStorage.setItem(this.key, JSON.stringify(storage));
|
||||
}
|
||||
}
|
||||
|
||||
export default Storage;
|
||||
|
||||
@ -9,110 +9,110 @@ 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',
|
||||
'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 = {
|
||||
// Basic support
|
||||
audio: 'canPlayType' in document.createElement('audio'),
|
||||
video: 'canPlayType' in document.createElement('video'),
|
||||
// Basic support
|
||||
audio: 'canPlayType' in document.createElement('audio'),
|
||||
video: 'canPlayType' in document.createElement('video'),
|
||||
|
||||
// Check for support
|
||||
// Basic functionality vs full UI
|
||||
check(type, provider, playsinline) {
|
||||
const canPlayInline = browser.isIPhone && playsinline && support.playsinline;
|
||||
const api = support[type] || provider !== 'html5';
|
||||
const ui = api && support.rangeInput && (type !== 'video' || !browser.isIPhone || canPlayInline);
|
||||
// Check for support
|
||||
// Basic functionality vs full UI
|
||||
check(type, provider, playsinline) {
|
||||
const canPlayInline = browser.isIPhone && playsinline && support.playsinline;
|
||||
const api = support[type] || provider !== 'html5';
|
||||
const ui = api && support.rangeInput && (type !== 'video' || !browser.isIPhone || canPlayInline);
|
||||
|
||||
return {
|
||||
api,
|
||||
ui,
|
||||
};
|
||||
},
|
||||
return {
|
||||
api,
|
||||
ui,
|
||||
};
|
||||
},
|
||||
|
||||
// Picture-in-picture support
|
||||
// Safari & Chrome only currently
|
||||
pip: (() => {
|
||||
if (browser.isIPhone) {
|
||||
return false;
|
||||
}
|
||||
// Picture-in-picture support
|
||||
// Safari & Chrome only currently
|
||||
pip: (() => {
|
||||
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;
|
||||
}
|
||||
// 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;
|
||||
}
|
||||
// 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;
|
||||
})(),
|
||||
return false;
|
||||
})(),
|
||||
|
||||
// Airplay support
|
||||
// Safari only currently
|
||||
airplay: is.function(window.WebKitPlaybackTargetAvailabilityEvent),
|
||||
// Airplay support
|
||||
// Safari only currently
|
||||
airplay: is.function(window.WebKitPlaybackTargetAvailabilityEvent),
|
||||
|
||||
// Inline playback support
|
||||
// https://webkit.org/blog/6784/new-video-policies-for-ios/
|
||||
playsinline: 'playsInline' in document.createElement('video'),
|
||||
// Inline playback support
|
||||
// https://webkit.org/blog/6784/new-video-policies-for-ios/
|
||||
playsinline: 'playsInline' in document.createElement('video'),
|
||||
|
||||
// Check for mime type support against a player instance
|
||||
// Credits: http://diveintohtml5.info/everything.html
|
||||
// Related: http://www.leanbackplayer.com/test/h5mt.html
|
||||
mime(input) {
|
||||
if (is.empty(input)) {
|
||||
return false;
|
||||
}
|
||||
// Check for mime type support against a player instance
|
||||
// Credits: http://diveintohtml5.info/everything.html
|
||||
// Related: http://www.leanbackplayer.com/test/h5mt.html
|
||||
mime(input) {
|
||||
if (is.empty(input)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const [mediaType] = input.split('/');
|
||||
let type = input;
|
||||
const [mediaType] = input.split('/');
|
||||
let type = input;
|
||||
|
||||
// Verify we're using HTML5 and there's no media type mismatch
|
||||
if (!this.isHTML5 || mediaType !== this.type) {
|
||||
return false;
|
||||
}
|
||||
// Verify we're using HTML5 and there's no media type mismatch
|
||||
if (!this.isHTML5 || mediaType !== this.type) {
|
||||
return false;
|
||||
}
|
||||
|
||||
// Add codec if required
|
||||
if (Object.keys(defaultCodecs).includes(type)) {
|
||||
type += `; codecs="${defaultCodecs[input]}"`;
|
||||
}
|
||||
// Add codec if required
|
||||
if (Object.keys(defaultCodecs).includes(type)) {
|
||||
type += `; codecs="${defaultCodecs[input]}"`;
|
||||
}
|
||||
|
||||
try {
|
||||
return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
try {
|
||||
return Boolean(type && this.media.canPlayType(type).replace(/no/, ''));
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
},
|
||||
|
||||
// Check for textTracks support
|
||||
textTracks: 'textTracks' in document.createElement('video'),
|
||||
// Check for textTracks support
|
||||
textTracks: 'textTracks' in document.createElement('video'),
|
||||
|
||||
// <input type="range"> Sliders
|
||||
rangeInput: (() => {
|
||||
const range = document.createElement('input');
|
||||
range.type = 'range';
|
||||
return range.type === 'range';
|
||||
})(),
|
||||
// <input type="range"> Sliders
|
||||
rangeInput: (() => {
|
||||
const range = document.createElement('input');
|
||||
range.type = 'range';
|
||||
return range.type === 'range';
|
||||
})(),
|
||||
|
||||
// Touch
|
||||
// NOTE: Remember a device can be mouse + touch enabled so we check on first touch event
|
||||
touch: 'ontouchstart' in document.documentElement,
|
||||
// Touch
|
||||
// NOTE: Remember a device can be mouse + touch enabled so we check on first touch event
|
||||
touch: 'ontouchstart' in document.documentElement,
|
||||
|
||||
// Detect transitions support
|
||||
transitions: transitionEndEvent !== false,
|
||||
// Detect transitions support
|
||||
transitions: transitionEndEvent !== false,
|
||||
|
||||
// Reduced motion iOS & MacOS setting
|
||||
// https://webkit.org/blog/7551/responsive-design-for-motion/
|
||||
reducedMotion: 'matchMedia' in window && window.matchMedia('(prefers-reduced-motion)').matches,
|
||||
// Reduced motion iOS & MacOS setting
|
||||
// https://webkit.org/blog/7551/responsive-design-for-motion/
|
||||
reducedMotion: 'matchMedia' in window && window.matchMedia('(prefers-reduced-motion)').matches,
|
||||
};
|
||||
|
||||
export default support;
|
||||
|
||||
430
src/js/ui.js
430
src/js/ui.js
@ -13,267 +13,277 @@ import is from './utils/is';
|
||||
import loadImage from './utils/load-image';
|
||||
|
||||
const ui = {
|
||||
addStyleHook() {
|
||||
toggleClass(this.elements.container, this.config.selectors.container.replace('.', ''), true);
|
||||
toggleClass(this.elements.container, this.config.classNames.uiSupported, this.supported.ui);
|
||||
},
|
||||
addStyleHook() {
|
||||
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
|
||||
toggleNativeControls(toggle = false) {
|
||||
if (toggle && this.isHTML5) {
|
||||
this.media.setAttribute('controls', '');
|
||||
} else {
|
||||
this.media.removeAttribute('controls');
|
||||
}
|
||||
},
|
||||
// Toggle native HTML5 media controls
|
||||
toggleNativeControls(toggle = false) {
|
||||
if (toggle && this.isHTML5) {
|
||||
this.media.setAttribute('controls', '');
|
||||
} else {
|
||||
this.media.removeAttribute('controls');
|
||||
}
|
||||
},
|
||||
|
||||
// Setup the UI
|
||||
build() {
|
||||
// Re-attach media element listeners
|
||||
// TODO: Use event bubbling?
|
||||
this.listeners.media();
|
||||
// Setup the UI
|
||||
build() {
|
||||
// Re-attach media element listeners
|
||||
// TODO: Use event bubbling?
|
||||
this.listeners.media();
|
||||
|
||||
// Don't setup interface if no support
|
||||
if (!this.supported.ui) {
|
||||
this.debug.warn(`Basic support only for ${this.provider} ${this.type}`);
|
||||
// Don't setup interface if no support
|
||||
if (!this.supported.ui) {
|
||||
this.debug.warn(`Basic support only for ${this.provider} ${this.type}`);
|
||||
|
||||
// Restore native controls
|
||||
ui.toggleNativeControls.call(this, true);
|
||||
// Restore native controls
|
||||
ui.toggleNativeControls.call(this, true);
|
||||
|
||||
// Bail
|
||||
return;
|
||||
}
|
||||
// Bail
|
||||
return;
|
||||
}
|
||||
|
||||
// Inject custom controls if not present
|
||||
if (!is.element(this.elements.controls)) {
|
||||
// Inject custom controls
|
||||
controls.inject.call(this);
|
||||
// Inject custom controls if not present
|
||||
if (!is.element(this.elements.controls)) {
|
||||
// Inject custom controls
|
||||
controls.inject.call(this);
|
||||
|
||||
// Re-attach control listeners
|
||||
this.listeners.controls();
|
||||
}
|
||||
// Re-attach control listeners
|
||||
this.listeners.controls();
|
||||
}
|
||||
|
||||
// Remove native controls
|
||||
ui.toggleNativeControls.call(this);
|
||||
// Remove native controls
|
||||
ui.toggleNativeControls.call(this);
|
||||
|
||||
// Setup captions for HTML5
|
||||
if (this.isHTML5) {
|
||||
captions.setup.call(this);
|
||||
}
|
||||
// Setup captions for HTML5
|
||||
if (this.isHTML5) {
|
||||
captions.setup.call(this);
|
||||
}
|
||||
|
||||
// Reset volume
|
||||
this.volume = null;
|
||||
// Reset volume
|
||||
this.volume = null;
|
||||
|
||||
// Reset mute state
|
||||
this.muted = null;
|
||||
// Reset mute state
|
||||
this.muted = null;
|
||||
|
||||
// Reset loop state
|
||||
this.loop = null;
|
||||
// Reset loop state
|
||||
this.loop = null;
|
||||
|
||||
// Reset quality setting
|
||||
this.quality = null;
|
||||
// Reset quality setting
|
||||
this.quality = null;
|
||||
|
||||
// Reset speed
|
||||
this.speed = null;
|
||||
// Reset speed
|
||||
this.speed = null;
|
||||
|
||||
// Reset volume display
|
||||
controls.updateVolume.call(this);
|
||||
// Reset volume display
|
||||
controls.updateVolume.call(this);
|
||||
|
||||
// Reset time display
|
||||
controls.timeUpdate.call(this);
|
||||
// Reset time display
|
||||
controls.timeUpdate.call(this);
|
||||
|
||||
// Update the UI
|
||||
ui.checkPlaying.call(this);
|
||||
// Update the UI
|
||||
ui.checkPlaying.call(this);
|
||||
|
||||
// Check for picture-in-picture support
|
||||
toggleClass(
|
||||
this.elements.container,
|
||||
this.config.classNames.pip.supported,
|
||||
support.pip && this.isHTML5 && this.isVideo,
|
||||
);
|
||||
// Check for picture-in-picture support
|
||||
toggleClass(
|
||||
this.elements.container,
|
||||
this.config.classNames.pip.supported,
|
||||
support.pip && this.isHTML5 && this.isVideo,
|
||||
);
|
||||
|
||||
// Check for airplay support
|
||||
toggleClass(this.elements.container, this.config.classNames.airplay.supported, support.airplay && this.isHTML5);
|
||||
// Check for airplay support
|
||||
toggleClass(this.elements.container, this.config.classNames.airplay.supported, support.airplay && this.isHTML5);
|
||||
|
||||
// Add iOS class
|
||||
toggleClass(this.elements.container, this.config.classNames.isIos, browser.isIos);
|
||||
// Add iOS class
|
||||
toggleClass(this.elements.container, this.config.classNames.isIos, browser.isIos);
|
||||
|
||||
// Add touch class
|
||||
toggleClass(this.elements.container, this.config.classNames.isTouch, this.touch);
|
||||
// Add touch class
|
||||
toggleClass(this.elements.container, this.config.classNames.isTouch, this.touch);
|
||||
|
||||
// Ready for API calls
|
||||
this.ready = true;
|
||||
// Ready for API calls
|
||||
this.ready = true;
|
||||
|
||||
// Ready event at end of execution stack
|
||||
setTimeout(() => {
|
||||
triggerEvent.call(this, this.media, 'ready');
|
||||
}, 0);
|
||||
// Ready event at end of execution stack
|
||||
setTimeout(() => {
|
||||
triggerEvent.call(this, this.media, 'ready');
|
||||
}, 0);
|
||||
|
||||
// Set the title
|
||||
ui.setTitle.call(this);
|
||||
// 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) {
|
||||
ui.setPoster.call(this, this.poster, false).catch(() => {});
|
||||
}
|
||||
// Assure the poster image is set, if the property was added before the element was created
|
||||
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);
|
||||
}
|
||||
},
|
||||
// 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);
|
||||
}
|
||||
},
|
||||
|
||||
// Setup aria attribute for play and iframe title
|
||||
setTitle() {
|
||||
// Find the current text
|
||||
let label = i18n.get('play', this.config);
|
||||
// Setup aria attribute for play and iframe title
|
||||
setTitle() {
|
||||
// Find the current text
|
||||
let label = i18n.get('play', this.config);
|
||||
|
||||
// If there's a media title set, use that for the label
|
||||
if (is.string(this.config.title) && !is.empty(this.config.title)) {
|
||||
label += `, ${this.config.title}`;
|
||||
}
|
||||
// If there's a media title set, use that for the label
|
||||
if (is.string(this.config.title) && !is.empty(this.config.title)) {
|
||||
label += `, ${this.config.title}`;
|
||||
}
|
||||
|
||||
// If there's a play button, set label
|
||||
Array.from(this.elements.buttons.play || []).forEach(button => {
|
||||
button.setAttribute('aria-label', label);
|
||||
});
|
||||
// If there's a play button, set 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 = getElement.call(this, 'iframe');
|
||||
// Set iframe title
|
||||
// https://github.com/sampotts/plyr/issues/124
|
||||
if (this.isEmbed) {
|
||||
const iframe = getElement.call(this, 'iframe');
|
||||
|
||||
if (!is.element(iframe)) {
|
||||
return;
|
||||
}
|
||||
if (!is.element(iframe)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Default to media type
|
||||
const title = !is.empty(this.config.title) ? this.config.title : 'video';
|
||||
const format = i18n.get('frameTitle', this.config);
|
||||
// Default to media type
|
||||
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));
|
||||
}
|
||||
},
|
||||
iframe.setAttribute('title', format.replace('{title}', title));
|
||||
}
|
||||
},
|
||||
|
||||
// Toggle poster
|
||||
togglePoster(enable) {
|
||||
toggleClass(this.elements.container, this.config.classNames.posterEnabled, enable);
|
||||
},
|
||||
// Toggle poster
|
||||
togglePoster(enable) {
|
||||
toggleClass(this.elements.container, this.config.classNames.posterEnabled, enable);
|
||||
},
|
||||
|
||||
// Set the poster image (async)
|
||||
// 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'));
|
||||
}
|
||||
// Set the poster image (async)
|
||||
// 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'));
|
||||
}
|
||||
|
||||
// Set property synchronously to respect the call order
|
||||
this.media.setAttribute('poster', poster);
|
||||
// Set property synchronously to respect the call order
|
||||
this.media.setAttribute('data-poster', poster);
|
||||
|
||||
// HTML5 uses native poster attribute
|
||||
if (this.isHTML5) {
|
||||
return Promise.resolve(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: '',
|
||||
});
|
||||
|
||||
// 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);
|
||||
|
||||
ui.togglePoster.call(this, true);
|
||||
return poster;
|
||||
})
|
||||
);
|
||||
},
|
||||
|
||||
return poster;
|
||||
})
|
||||
);
|
||||
},
|
||||
// Check playing state
|
||||
checkPlaying(event) {
|
||||
// Class hooks
|
||||
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);
|
||||
|
||||
// Check playing state
|
||||
checkPlaying(event) {
|
||||
// Class hooks
|
||||
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 state
|
||||
Array.from(this.elements.buttons.play || []).forEach(target => {
|
||||
Object.assign(target, { pressed: this.playing });
|
||||
target.setAttribute('aria-label', i18n.get(this.playing ? 'pause' : 'play', this.config));
|
||||
});
|
||||
|
||||
// Set state
|
||||
Array.from(this.elements.buttons.play || []).forEach(target => {
|
||||
Object.assign(target, { pressed: this.playing });
|
||||
target.setAttribute('aria-label', i18n.get(this.playing ? 'pause' : 'play', this.config));
|
||||
});
|
||||
// Only update controls on non timeupdate events
|
||||
if (is.event(event) && event.type === 'timeupdate') {
|
||||
return;
|
||||
}
|
||||
|
||||
// Only update controls on non timeupdate events
|
||||
if (is.event(event) && event.type === 'timeupdate') {
|
||||
return;
|
||||
}
|
||||
// Toggle controls
|
||||
ui.toggleControls.call(this);
|
||||
},
|
||||
|
||||
// Toggle controls
|
||||
// Check if media is loading
|
||||
checkLoading(event) {
|
||||
this.loading = ['stalled', 'waiting'].includes(event.type);
|
||||
|
||||
// Clear timer
|
||||
clearTimeout(this.timers.loading);
|
||||
|
||||
// Timer to prevent flicker when seeking
|
||||
this.timers.loading = setTimeout(
|
||||
() => {
|
||||
// Update progress bar loading class state
|
||||
toggleClass(this.elements.container, this.config.classNames.loading, this.loading);
|
||||
|
||||
// Update controls visibility
|
||||
ui.toggleControls.call(this);
|
||||
},
|
||||
},
|
||||
this.loading ? 250 : 0,
|
||||
);
|
||||
},
|
||||
|
||||
// Check if media is loading
|
||||
checkLoading(event) {
|
||||
this.loading = ['stalled', 'waiting'].includes(event.type);
|
||||
// Toggle controls based on state and `force` argument
|
||||
toggleControls(force) {
|
||||
const { controls: controlsElement } = this.elements;
|
||||
|
||||
// Clear timer
|
||||
clearTimeout(this.timers.loading);
|
||||
if (controlsElement && this.config.hideControls) {
|
||||
// Don't hide controls if a touch-device user recently seeked. (Must be limited to touch devices, or it occasionally prevents desktop controls from hiding.)
|
||||
const recentTouchSeek = this.touch && this.lastSeekTime + 2000 > Date.now();
|
||||
|
||||
// Timer to prevent flicker when seeking
|
||||
this.timers.loading = setTimeout(
|
||||
() => {
|
||||
// Update progress bar loading class state
|
||||
toggleClass(this.elements.container, this.config.classNames.loading, this.loading);
|
||||
// Show controls if force, loading, paused, button interaction, or recent seek, otherwise hide
|
||||
this.toggleControls(
|
||||
Boolean(
|
||||
force || this.loading || this.paused || controlsElement.pressed || controlsElement.hover || recentTouchSeek,
|
||||
),
|
||||
);
|
||||
}
|
||||
},
|
||||
|
||||
// Update controls visibility
|
||||
ui.toggleControls.call(this);
|
||||
},
|
||||
this.loading ? 250 : 0,
|
||||
);
|
||||
},
|
||||
// Migrate any custom properties from the media to the parent
|
||||
migrateStyles() {
|
||||
// Loop through values (as they are the keys when the object is spread 🤔)
|
||||
Object.values({ ...this.media.style })
|
||||
// We're only fussed about Plyr specific properties
|
||||
.filter(key => !is.empty(key) && key.startsWith('--plyr'))
|
||||
.forEach(key => {
|
||||
// Set on the container
|
||||
this.elements.container.style.setProperty(key, this.media.style.getPropertyValue(key));
|
||||
|
||||
// Toggle controls based on state and `force` argument
|
||||
toggleControls(force) {
|
||||
const { controls: controlsElement } = this.elements;
|
||||
// Clean up from media element
|
||||
this.media.style.removeProperty(key);
|
||||
});
|
||||
|
||||
if (controlsElement && this.config.hideControls) {
|
||||
// Don't hide controls if a touch-device user recently seeked. (Must be limited to touch devices, or it occasionally prevents desktop controls from hiding.)
|
||||
const recentTouchSeek = this.touch && this.lastSeekTime + 2000 > Date.now();
|
||||
|
||||
// Show controls if force, loading, paused, button interaction, or recent seek, otherwise hide
|
||||
this.toggleControls(
|
||||
Boolean(
|
||||
force ||
|
||||
this.loading ||
|
||||
this.paused ||
|
||||
controlsElement.pressed ||
|
||||
controlsElement.hover ||
|
||||
recentTouchSeek,
|
||||
),
|
||||
);
|
||||
}
|
||||
},
|
||||
// Remove attribute if empty
|
||||
if (is.empty(this.media.style)) {
|
||||
this.media.removeAttribute('style');
|
||||
}
|
||||
},
|
||||
};
|
||||
|
||||
export default ui;
|
||||
|
||||
@ -5,34 +5,34 @@
|
||||
import is from './is';
|
||||
|
||||
export const transitionEndEvent = (() => {
|
||||
const element = document.createElement('span');
|
||||
const element = document.createElement('span');
|
||||
|
||||
const events = {
|
||||
WebkitTransition: 'webkitTransitionEnd',
|
||||
MozTransition: 'transitionend',
|
||||
OTransition: 'oTransitionEnd otransitionend',
|
||||
transition: 'transitionend',
|
||||
};
|
||||
const events = {
|
||||
WebkitTransition: 'webkitTransitionEnd',
|
||||
MozTransition: 'transitionend',
|
||||
OTransition: 'oTransitionEnd otransitionend',
|
||||
transition: 'transitionend',
|
||||
};
|
||||
|
||||
const type = Object.keys(events).find(event => element.style[event] !== undefined);
|
||||
const type = Object.keys(events).find(event => element.style[event] !== undefined);
|
||||
|
||||
return is.string(type) ? events[type] : false;
|
||||
return is.string(type) ? events[type] : false;
|
||||
})();
|
||||
|
||||
// Force repaint of element
|
||||
export function repaint(element, delay) {
|
||||
setTimeout(() => {
|
||||
try {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
element.hidden = true;
|
||||
setTimeout(() => {
|
||||
try {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
element.hidden = true;
|
||||
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
element.offsetHeight;
|
||||
// eslint-disable-next-line no-unused-expressions
|
||||
element.offsetHeight;
|
||||
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
element.hidden = false;
|
||||
} catch (e) {
|
||||
// Do nothing
|
||||
}
|
||||
}, delay);
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
element.hidden = false;
|
||||
} catch (e) {
|
||||
// Do nothing
|
||||
}
|
||||
}, delay);
|
||||
}
|
||||
|
||||
@ -6,18 +6,18 @@ import is from './is';
|
||||
|
||||
// Remove duplicates in an array
|
||||
export function dedupe(array) {
|
||||
if (!is.array(array)) {
|
||||
return array;
|
||||
}
|
||||
if (!is.array(array)) {
|
||||
return array;
|
||||
}
|
||||
|
||||
return array.filter((item, index) => array.indexOf(item) === index);
|
||||
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;
|
||||
}
|
||||
if (!is.array(array) || !array.length) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return array.reduce((prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev));
|
||||
return array.reduce((prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev));
|
||||
}
|
||||
|
||||
@ -4,11 +4,11 @@
|
||||
// ==========================================================================
|
||||
|
||||
const browser = {
|
||||
isIE: /* @cc_on!@ */ false || !!document.documentMode,
|
||||
isEdge: window.navigator.userAgent.includes('Edge'),
|
||||
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),
|
||||
isIE: /* @cc_on!@ */ false || !!document.documentMode,
|
||||
isEdge: window.navigator.userAgent.includes('Edge'),
|
||||
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;
|
||||
|
||||
@ -7,257 +7,277 @@ import { extend } from './objects';
|
||||
|
||||
// Wrap an element
|
||||
export function wrap(elements, wrapper) {
|
||||
// Convert `elements` to an array, if necessary.
|
||||
const targets = elements.length ? elements : [elements];
|
||||
// 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;
|
||||
// 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);
|
||||
// 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);
|
||||
}
|
||||
});
|
||||
// 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;
|
||||
}
|
||||
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));
|
||||
// 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);
|
||||
// Create a new <element>
|
||||
const element = document.createElement(type);
|
||||
|
||||
// Set all passed attributes
|
||||
if (is.object(attributes)) {
|
||||
setAttributes(element, attributes);
|
||||
}
|
||||
// Set all passed attributes
|
||||
if (is.object(attributes)) {
|
||||
setAttributes(element, attributes);
|
||||
}
|
||||
|
||||
// Add text node
|
||||
if (is.string(text)) {
|
||||
element.innerText = text;
|
||||
}
|
||||
// Add text node
|
||||
if (is.string(text)) {
|
||||
element.innerText = text;
|
||||
}
|
||||
|
||||
// Return built element
|
||||
return element;
|
||||
// Return built element
|
||||
return element;
|
||||
}
|
||||
|
||||
// Inaert an element after another
|
||||
export function insertAfter(element, target) {
|
||||
if (!is.element(element) || !is.element(target)) {
|
||||
return;
|
||||
}
|
||||
if (!is.element(element) || !is.element(target)) {
|
||||
return;
|
||||
}
|
||||
|
||||
target.parentNode.insertBefore(element, target.nextSibling);
|
||||
target.parentNode.insertBefore(element, target.nextSibling);
|
||||
}
|
||||
|
||||
// Insert a DocumentFragment
|
||||
export function insertElement(type, parent, attributes, text) {
|
||||
if (!is.element(parent)) {
|
||||
return;
|
||||
}
|
||||
if (!is.element(parent)) {
|
||||
return;
|
||||
}
|
||||
|
||||
parent.appendChild(createElement(type, attributes, text));
|
||||
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.nodeList(element) || is.array(element)) {
|
||||
Array.from(element).forEach(removeElement);
|
||||
return;
|
||||
}
|
||||
|
||||
if (!is.element(element) || !is.element(element.parentNode)) {
|
||||
return;
|
||||
}
|
||||
if (!is.element(element) || !is.element(element.parentNode)) {
|
||||
return;
|
||||
}
|
||||
|
||||
element.parentNode.removeChild(element);
|
||||
element.parentNode.removeChild(element);
|
||||
}
|
||||
|
||||
// Remove all child elements
|
||||
export function emptyElement(element) {
|
||||
if (!is.element(element)) {
|
||||
return;
|
||||
}
|
||||
if (!is.element(element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
let { length } = element.childNodes;
|
||||
let { length } = element.childNodes;
|
||||
|
||||
while (length > 0) {
|
||||
element.removeChild(element.lastChild);
|
||||
length -= 1;
|
||||
}
|
||||
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;
|
||||
}
|
||||
if (!is.element(oldChild) || !is.element(oldChild.parentNode) || !is.element(newChild)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
oldChild.parentNode.replaceChild(newChild, oldChild);
|
||||
oldChild.parentNode.replaceChild(newChild, oldChild);
|
||||
|
||||
return newChild;
|
||||
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' }
|
||||
// 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 {};
|
||||
}
|
||||
if (!is.string(sel) || is.empty(sel)) {
|
||||
return {};
|
||||
}
|
||||
|
||||
const attributes = {};
|
||||
const existing = extend({}, existingAttributes);
|
||||
const attributes = {};
|
||||
const existing = extend({}, 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;
|
||||
const value = parts.length > 1 ? parts[1].replace(/["']/g, '') : '';
|
||||
// Get the first character
|
||||
const start = selector.charAt(0);
|
||||
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;
|
||||
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.string(existing.class)) {
|
||||
attributes.class = `${existing.class} ${className}`;
|
||||
} else {
|
||||
attributes.class = className;
|
||||
}
|
||||
break;
|
||||
|
||||
case '#':
|
||||
// ID selector
|
||||
attributes.id = selector.replace('#', '');
|
||||
break;
|
||||
|
||||
case '[':
|
||||
// Attribute selector
|
||||
attributes[key] = value;
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
switch (start) {
|
||||
case '.':
|
||||
// Add to existing classname
|
||||
if (is.string(existing.class)) {
|
||||
attributes.class = `${existing.class} ${className}`;
|
||||
} else {
|
||||
attributes.class = className;
|
||||
}
|
||||
});
|
||||
break;
|
||||
|
||||
return extend(existing, attributes);
|
||||
case '#':
|
||||
// ID selector
|
||||
attributes.id = selector.replace('#', '');
|
||||
break;
|
||||
|
||||
case '[':
|
||||
// Attribute selector
|
||||
attributes[key] = value;
|
||||
|
||||
break;
|
||||
|
||||
default:
|
||||
break;
|
||||
}
|
||||
});
|
||||
|
||||
return extend(existing, attributes);
|
||||
}
|
||||
|
||||
// Toggle hidden
|
||||
export function toggleHidden(element, hidden) {
|
||||
if (!is.element(element)) {
|
||||
return;
|
||||
}
|
||||
if (!is.element(element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
let hide = hidden;
|
||||
let hide = hidden;
|
||||
|
||||
if (!is.boolean(hide)) {
|
||||
hide = !element.hidden;
|
||||
}
|
||||
if (!is.boolean(hide)) {
|
||||
hide = !element.hidden;
|
||||
}
|
||||
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
element.hidden = hide;
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
element.hidden = hide;
|
||||
}
|
||||
|
||||
// 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.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';
|
||||
}
|
||||
|
||||
if (is.element(element)) {
|
||||
let method = 'toggle';
|
||||
if (typeof force !== 'undefined') {
|
||||
method = force ? 'add' : 'remove';
|
||||
}
|
||||
element.classList[method](className);
|
||||
return element.classList.contains(className);
|
||||
}
|
||||
|
||||
element.classList[method](className);
|
||||
return element.classList.contains(className);
|
||||
}
|
||||
|
||||
return false;
|
||||
return false;
|
||||
}
|
||||
|
||||
// Has class name
|
||||
export function hasClass(element, className) {
|
||||
return is.element(element) && element.classList.contains(className);
|
||||
return is.element(element) && element.classList.contains(className);
|
||||
}
|
||||
|
||||
// Element matches selector
|
||||
export function matches(element, selector) {
|
||||
const prototype = { Element };
|
||||
const { prototype } = Element;
|
||||
|
||||
function match() {
|
||||
return Array.from(document.querySelectorAll(selector)).includes(this);
|
||||
}
|
||||
function match() {
|
||||
return Array.from(document.querySelectorAll(selector)).includes(this);
|
||||
}
|
||||
|
||||
const method =
|
||||
prototype.matches ||
|
||||
prototype.webkitMatchesSelector ||
|
||||
prototype.mozMatchesSelector ||
|
||||
prototype.msMatchesSelector ||
|
||||
match;
|
||||
const method =
|
||||
prototype.matches ||
|
||||
prototype.webkitMatchesSelector ||
|
||||
prototype.mozMatchesSelector ||
|
||||
prototype.msMatchesSelector ||
|
||||
match;
|
||||
|
||||
return method.call(element, selector);
|
||||
return method.call(element, selector);
|
||||
}
|
||||
|
||||
// Closest ancestor element matching selector (also tests element itself)
|
||||
export function closest(element, selector) {
|
||||
const { prototype } = Element;
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill
|
||||
function closestElement() {
|
||||
let el = this;
|
||||
|
||||
do {
|
||||
if (matches.matches(el, selector)) return el;
|
||||
el = el.parentElement || el.parentNode;
|
||||
} while (el !== null && el.nodeType === 1);
|
||||
return null;
|
||||
}
|
||||
|
||||
const method = prototype.closest || closestElement;
|
||||
|
||||
return method.call(element, selector);
|
||||
}
|
||||
|
||||
// Find all elements
|
||||
export function getElements(selector) {
|
||||
return this.elements.container.querySelectorAll(selector);
|
||||
return this.elements.container.querySelectorAll(selector);
|
||||
}
|
||||
|
||||
// Find a single element
|
||||
export function getElement(selector) {
|
||||
return this.elements.container.querySelector(selector);
|
||||
return this.elements.container.querySelector(selector);
|
||||
}
|
||||
|
||||
// Set focus and tab focus class
|
||||
export function setFocus(element = null, tabFocus = false) {
|
||||
if (!is.element(element)) {
|
||||
return;
|
||||
}
|
||||
if (!is.element(element)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Set regular focus
|
||||
element.focus({ preventScroll: true });
|
||||
// Set regular focus
|
||||
element.focus({ preventScroll: true });
|
||||
|
||||
// If we want to mimic keyboard focus via tab
|
||||
if (tabFocus) {
|
||||
toggleClass(element, this.config.classNames.tabFocus);
|
||||
}
|
||||
// If we want to mimic keyboard focus via tab
|
||||
if (tabFocus) {
|
||||
toggleClass(element, this.config.classNames.tabFocus);
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,110 +8,110 @@ import is from './is';
|
||||
// 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
|
||||
}
|
||||
// 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;
|
||||
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;
|
||||
// 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 });
|
||||
}
|
||||
|
||||
// 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);
|
||||
});
|
||||
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);
|
||||
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);
|
||||
toggleListener.call(this, element, events, callback, false, passive, capture);
|
||||
}
|
||||
|
||||
// Bind once-only event handler
|
||||
export function once(element, events = '', callback, passive = true, capture = false) {
|
||||
const onceCallback = (...args) => {
|
||||
off(element, events, onceCallback, passive, capture);
|
||||
callback.apply(this, args);
|
||||
};
|
||||
const onceCallback = (...args) => {
|
||||
off(element, events, onceCallback, passive, capture);
|
||||
callback.apply(this, args);
|
||||
};
|
||||
|
||||
toggleListener.call(this, element, events, onceCallback, true, passive, capture);
|
||||
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;
|
||||
}
|
||||
// Bail if no element
|
||||
if (!is.element(element) || is.empty(type)) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Create and dispatch the event
|
||||
const event = new CustomEvent(type, {
|
||||
bubbles,
|
||||
detail: { ...detail, plyr: this,},
|
||||
});
|
||||
// Create and dispatch the event
|
||||
const event = new CustomEvent(type, {
|
||||
bubbles,
|
||||
detail: { ...detail, plyr: this },
|
||||
});
|
||||
|
||||
// Dispatch the event
|
||||
element.dispatchEvent(event);
|
||||
// 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);
|
||||
});
|
||||
if (this && this.eventListeners) {
|
||||
this.eventListeners.forEach(item => {
|
||||
const { element, type, callback, options } = item;
|
||||
element.removeEventListener(type, callback, options);
|
||||
});
|
||||
|
||||
this.eventListeners = [];
|
||||
}
|
||||
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(() => {});
|
||||
return new Promise(resolve =>
|
||||
this.ready ? setTimeout(resolve, 0) : on.call(this, this.elements.container, 'ready', resolve),
|
||||
).then(() => {});
|
||||
}
|
||||
|
||||
@ -4,39 +4,39 @@
|
||||
// ==========================================================================
|
||||
|
||||
export default function fetch(url, responseType = 'text') {
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
const request = new XMLHttpRequest();
|
||||
return new Promise((resolve, reject) => {
|
||||
try {
|
||||
const request = new XMLHttpRequest();
|
||||
|
||||
// Check for CORS support
|
||||
if (!('withCredentials' in request)) {
|
||||
return;
|
||||
}
|
||||
// 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);
|
||||
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);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -8,40 +8,40 @@ import { replaceAll } from './strings';
|
||||
|
||||
// Skip i18n for abbreviations and brand names
|
||||
const resources = {
|
||||
pip: 'PIP',
|
||||
airplay: 'AirPlay',
|
||||
html5: 'HTML5',
|
||||
vimeo: 'Vimeo',
|
||||
youtube: 'YouTube',
|
||||
pip: 'PIP',
|
||||
airplay: 'AirPlay',
|
||||
html5: 'HTML5',
|
||||
vimeo: 'Vimeo',
|
||||
youtube: 'YouTube',
|
||||
};
|
||||
|
||||
const i18n = {
|
||||
get(key = '', config = {}) {
|
||||
if (is.empty(key) || is.empty(config)) {
|
||||
return '';
|
||||
}
|
||||
get(key = '', config = {}) {
|
||||
if (is.empty(key) || is.empty(config)) {
|
||||
return '';
|
||||
}
|
||||
|
||||
let string = getDeep(config.i18n, key);
|
||||
let string = getDeep(config.i18n, key);
|
||||
|
||||
if (is.empty(string)) {
|
||||
if (Object.keys(resources).includes(key)) {
|
||||
return resources[key];
|
||||
}
|
||||
if (is.empty(string)) {
|
||||
if (Object.keys(resources).includes(key)) {
|
||||
return resources[key];
|
||||
}
|
||||
|
||||
return '';
|
||||
}
|
||||
return '';
|
||||
}
|
||||
|
||||
const replace = {
|
||||
'{seektime}': config.seekTime,
|
||||
'{title}': config.title,
|
||||
};
|
||||
const replace = {
|
||||
'{seektime}': config.seekTime,
|
||||
'{title}': config.title,
|
||||
};
|
||||
|
||||
Object.entries(replace).forEach(([k, v]) => {
|
||||
string = replaceAll(string, k, v);
|
||||
});
|
||||
Object.entries(replace).forEach(([k, v]) => {
|
||||
string = replaceAll(string, k, v);
|
||||
});
|
||||
|
||||
return string;
|
||||
},
|
||||
return string;
|
||||
},
|
||||
};
|
||||
|
||||
export default i18n;
|
||||
|
||||
@ -19,54 +19,54 @@ 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 isPromise = input => instanceOf(input, Promise);
|
||||
const isPromise = input => instanceOf(input, Promise) && isFunction(input.then);
|
||||
|
||||
const isEmpty = input =>
|
||||
isNullOrUndefined(input) ||
|
||||
((isString(input) || isArray(input) || isNodeList(input)) && !input.length) ||
|
||||
(isObject(input) && !Object.keys(input).length);
|
||||
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;
|
||||
}
|
||||
// Accept a URL object
|
||||
if (instanceOf(input, window.URL)) {
|
||||
return true;
|
||||
}
|
||||
|
||||
// Must be string from here
|
||||
if (!isString(input)) {
|
||||
return false;
|
||||
}
|
||||
// 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}`;
|
||||
}
|
||||
// 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;
|
||||
}
|
||||
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,
|
||||
promise: isPromise,
|
||||
url: isUrl,
|
||||
empty: isEmpty,
|
||||
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,
|
||||
promise: isPromise,
|
||||
url: isUrl,
|
||||
empty: isEmpty,
|
||||
};
|
||||
|
||||
@ -5,15 +5,15 @@
|
||||
// ==========================================================================
|
||||
|
||||
export default function loadImage(src, minWidth = 1) {
|
||||
return new Promise((resolve, reject) => {
|
||||
const image = new Image();
|
||||
return new Promise((resolve, reject) => {
|
||||
const image = new Image();
|
||||
|
||||
const handler = () => {
|
||||
delete image.onload;
|
||||
delete image.onerror;
|
||||
(image.naturalWidth >= minWidth ? resolve : reject)(image);
|
||||
};
|
||||
const handler = () => {
|
||||
delete image.onload;
|
||||
delete image.onerror;
|
||||
(image.naturalWidth >= minWidth ? resolve : reject)(image);
|
||||
};
|
||||
|
||||
Object.assign(image, { onload: handler, onerror: handler, src });
|
||||
});
|
||||
Object.assign(image, { onload: handler, onerror: handler, src });
|
||||
});
|
||||
}
|
||||
|
||||
@ -5,10 +5,10 @@
|
||||
import loadjs from 'loadjs';
|
||||
|
||||
export default function loadScript(url) {
|
||||
return new Promise((resolve, reject) => {
|
||||
loadjs(url, {
|
||||
success: resolve,
|
||||
error: reject,
|
||||
});
|
||||
return new Promise((resolve, reject) => {
|
||||
loadjs(url, {
|
||||
success: resolve,
|
||||
error: reject,
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@ -8,68 +8,68 @@ import is from './is';
|
||||
|
||||
// Load an external SVG sprite
|
||||
export default function loadSprite(url, id) {
|
||||
if (!is.string(url)) {
|
||||
return;
|
||||
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) => {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
container.innerHTML = data;
|
||||
|
||||
// Check again incase of race condition
|
||||
if (hasId && exists()) {
|
||||
return;
|
||||
}
|
||||
|
||||
const prefix = 'cache';
|
||||
const hasId = is.string(id);
|
||||
let isCached = false;
|
||||
const exists = () => document.getElementById(id) !== null;
|
||||
// Inject the SVG to the body
|
||||
document.body.insertAdjacentElement('afterbegin', container);
|
||||
};
|
||||
|
||||
const update = (container, data) => {
|
||||
// eslint-disable-next-line no-param-reassign
|
||||
container.innerHTML = data;
|
||||
// Only load once if ID set
|
||||
if (!hasId || !exists()) {
|
||||
const useStorage = Storage.supported;
|
||||
// Create container
|
||||
const container = document.createElement('div');
|
||||
container.setAttribute('hidden', '');
|
||||
|
||||
// Check again incase of race condition
|
||||
if (hasId && exists()) {
|
||||
return;
|
||||
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;
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
window.localStorage.setItem(
|
||||
`${prefix}-${id}`,
|
||||
JSON.stringify({
|
||||
content: result,
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
// 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(() => {});
|
||||
}
|
||||
update(container, result);
|
||||
})
|
||||
.catch(() => {});
|
||||
}
|
||||
}
|
||||
|
||||
@ -11,7 +11,7 @@
|
||||
* @type Number
|
||||
*/
|
||||
export function clamp(input = 0, min = 0, max = 255) {
|
||||
return Math.min(Math.max(input, min), max);
|
||||
return Math.min(Math.max(input, min), max);
|
||||
}
|
||||
|
||||
export default { clamp };
|
||||
|
||||
@ -6,37 +6,37 @@ import is from './is';
|
||||
|
||||
// Clone nested objects
|
||||
export function cloneDeep(object) {
|
||||
return JSON.parse(JSON.stringify(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);
|
||||
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;
|
||||
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] });
|
||||
}
|
||||
});
|
||||
|
||||
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);
|
||||
return extend(target, ...sources);
|
||||
}
|
||||
|
||||
14
src/js/utils/promise.js
Normal file
14
src/js/utils/promise.js
Normal file
@ -0,0 +1,14 @@
|
||||
import is from './is';
|
||||
/**
|
||||
* Silence a Promise-like object.
|
||||
* This is useful for avoiding non-harmful, but potentially confusing "uncaught
|
||||
* play promise" rejection error messages.
|
||||
* @param {Object} value An object that may or may not be `Promise`-like.
|
||||
*/
|
||||
export function silencePromise(value) {
|
||||
if (is.promise(value)) {
|
||||
value.then(null, () => {});
|
||||
}
|
||||
}
|
||||
|
||||
export default { silencePromise };
|
||||
@ -6,80 +6,75 @@ import is from './is';
|
||||
|
||||
// Generate a random ID
|
||||
export function generateId(prefix) {
|
||||
return `${prefix}-${Math.floor(Math.random() * 10000)}`;
|
||||
return `${prefix}-${Math.floor(Math.random() * 10000)}`;
|
||||
}
|
||||
|
||||
// Format string
|
||||
export function format(input, ...args) {
|
||||
if (is.empty(input)) {
|
||||
return input;
|
||||
}
|
||||
if (is.empty(input)) {
|
||||
return input;
|
||||
}
|
||||
|
||||
return input.toString().replace(/{(\d+)}/g, (match, i) => args[i].toString());
|
||||
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;
|
||||
}
|
||||
if (current === 0 || max === 0 || Number.isNaN(current) || Number.isNaN(max)) {
|
||||
return 0;
|
||||
}
|
||||
|
||||
return ((current / max) * 100).toFixed(2);
|
||||
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(),
|
||||
);
|
||||
}
|
||||
export const replaceAll = (input = '', find = '', replace = '') =>
|
||||
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());
|
||||
}
|
||||
export const toTitleCase = (input = '') =>
|
||||
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();
|
||||
let string = input.toString();
|
||||
|
||||
// Convert kebab case
|
||||
string = replaceAll(string, '-', ' ');
|
||||
// Convert kebab case
|
||||
string = replaceAll(string, '-', ' ');
|
||||
|
||||
// Convert snake case
|
||||
string = replaceAll(string, '_', ' ');
|
||||
// Convert snake case
|
||||
string = replaceAll(string, '_', ' ');
|
||||
|
||||
// Convert to title case
|
||||
string = toTitleCase(string);
|
||||
// Convert to title case
|
||||
string = toTitleCase(string);
|
||||
|
||||
// Convert to pascal case
|
||||
return replaceAll(string, ' ', '');
|
||||
// Convert to pascal case
|
||||
return replaceAll(string, ' ', '');
|
||||
}
|
||||
|
||||
// Convert string to pascalCase
|
||||
export function toCamelCase(input = '') {
|
||||
let string = input.toString();
|
||||
let string = input.toString();
|
||||
|
||||
// Convert to pascal case
|
||||
string = toPascalCase(string);
|
||||
// Convert to pascal case
|
||||
string = toPascalCase(string);
|
||||
|
||||
// Convert first character to lowercase
|
||||
return string.charAt(0).toLowerCase() + string.slice(1);
|
||||
// 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;
|
||||
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;
|
||||
const wrapper = document.createElement('div');
|
||||
wrapper.appendChild(element);
|
||||
return wrapper.innerHTML;
|
||||
}
|
||||
|
||||
@ -5,74 +5,75 @@
|
||||
import is from './is';
|
||||
|
||||
export function validateRatio(input) {
|
||||
if (!is.array(input) && (!is.string(input) || !input.includes(':'))) {
|
||||
return false;
|
||||
}
|
||||
if (!is.array(input) && (!is.string(input) || !input.includes(':'))) {
|
||||
return false;
|
||||
}
|
||||
|
||||
const ratio = is.array(input) ? input : input.split(':');
|
||||
const ratio = is.array(input) ? input : input.split(':');
|
||||
|
||||
return ratio.map(Number).every(is.number);
|
||||
return ratio.map(Number).every(is.number);
|
||||
}
|
||||
|
||||
export function reduceAspectRatio(ratio) {
|
||||
if (!is.array(ratio) || !ratio.every(is.number)) {
|
||||
return null;
|
||||
}
|
||||
if (!is.array(ratio) || !ratio.every(is.number)) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const [width, height] = ratio;
|
||||
const getDivider = (w, h) => (h === 0 ? w : getDivider(h, w % h));
|
||||
const divider = getDivider(width, height);
|
||||
const [width, height] = ratio;
|
||||
const getDivider = (w, h) => (h === 0 ? w : getDivider(h, w % h));
|
||||
const divider = getDivider(width, height);
|
||||
|
||||
return [width / divider, height / divider];
|
||||
return [width / divider, height / divider];
|
||||
}
|
||||
|
||||
export function getAspectRatio(input) {
|
||||
const parse = ratio => (validateRatio(ratio) ? ratio.split(':').map(Number) : null);
|
||||
// Try provided ratio
|
||||
let ratio = parse(input);
|
||||
const parse = ratio => (validateRatio(ratio) ? ratio.split(':').map(Number) : null);
|
||||
// Try provided ratio
|
||||
let ratio = parse(input);
|
||||
|
||||
// Get from config
|
||||
if (ratio === null) {
|
||||
ratio = parse(this.config.ratio);
|
||||
}
|
||||
// Get from config
|
||||
if (ratio === null) {
|
||||
ratio = parse(this.config.ratio);
|
||||
}
|
||||
|
||||
// Get from embed
|
||||
if (ratio === null && !is.empty(this.embed) && is.array(this.embed.ratio)) {
|
||||
({ ratio } = this.embed);
|
||||
}
|
||||
// Get from embed
|
||||
if (ratio === null && !is.empty(this.embed) && is.array(this.embed.ratio)) {
|
||||
({ ratio } = this.embed);
|
||||
}
|
||||
|
||||
// Get from HTML5 video
|
||||
if (ratio === null && this.isHTML5) {
|
||||
const { videoWidth, videoHeight } = this.media;
|
||||
ratio = reduceAspectRatio([videoWidth, videoHeight]);
|
||||
}
|
||||
// Get from HTML5 video
|
||||
if (ratio === null && this.isHTML5) {
|
||||
const { videoWidth, videoHeight } = this.media;
|
||||
ratio = reduceAspectRatio([videoWidth, videoHeight]);
|
||||
}
|
||||
|
||||
return ratio;
|
||||
return ratio;
|
||||
}
|
||||
|
||||
// Set aspect ratio for responsive container
|
||||
export function setAspectRatio(input) {
|
||||
if (!this.isVideo) {
|
||||
return {};
|
||||
}
|
||||
if (!this.isVideo) {
|
||||
return {};
|
||||
}
|
||||
|
||||
const { wrapper } = this.elements;
|
||||
const ratio = getAspectRatio.call(this, input);
|
||||
const [w, h] = is.array(ratio) ? ratio : [0, 0];
|
||||
const padding = (100 / w) * h;
|
||||
const { wrapper } = this.elements;
|
||||
const ratio = getAspectRatio.call(this, input);
|
||||
const [w, h] = is.array(ratio) ? ratio : [0, 0];
|
||||
const padding = (100 / w) * h;
|
||||
|
||||
wrapper.style.paddingBottom = `${padding}%`;
|
||||
wrapper.style.paddingBottom = `${padding}%`;
|
||||
|
||||
// For Vimeo we have an extra <div> to hide the standard controls and UI
|
||||
if (this.isVimeo && this.supported.ui) {
|
||||
const height = 240;
|
||||
const offset = (height - padding) / (height / 50);
|
||||
this.media.style.transform = `translateY(-${offset}%)`;
|
||||
} else if (this.isHTML5) {
|
||||
wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
|
||||
}
|
||||
// For Vimeo we have an extra <div> to hide the standard controls and UI
|
||||
if (this.isVimeo && !this.config.vimeo.premium && this.supported.ui) {
|
||||
const height = (100 / this.media.offsetWidth) * parseInt(window.getComputedStyle(this.media).paddingBottom, 10);
|
||||
const offset = (height - padding) / (height / 50);
|
||||
|
||||
return { padding, ratio };
|
||||
this.media.style.transform = `translateY(-${offset}%)`;
|
||||
} else if (this.isHTML5) {
|
||||
wrapper.classList.toggle(this.config.classNames.videoFixedRatio, ratio !== null);
|
||||
}
|
||||
|
||||
return { padding, ratio };
|
||||
}
|
||||
|
||||
export default { setAspectRatio };
|
||||
|
||||
@ -11,25 +11,25 @@ export const getSeconds = value => Math.trunc(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(undefined, displayHours, inverted);
|
||||
}
|
||||
// Bail if the value isn't a number
|
||||
if (!is.number(time)) {
|
||||
return formatTime(undefined, 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);
|
||||
// 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 = '';
|
||||
}
|
||||
// Do we need to display hours?
|
||||
if (displayHours || hours > 0) {
|
||||
hours = `${hours}:`;
|
||||
} else {
|
||||
hours = '';
|
||||
}
|
||||
|
||||
// Render
|
||||
return `${inverted && time > 0 ? '-' : ''}${hours}${format(mins)}:${format(secs)}`;
|
||||
// Render
|
||||
return `${inverted && time > 0 ? '-' : ''}${hours}${format(mins)}:${format(secs)}`;
|
||||
}
|
||||
|
||||
@ -10,30 +10,30 @@ import is from './is';
|
||||
* @param {Boolean} safe - failsafe parsing
|
||||
*/
|
||||
export function parseUrl(input, safe = true) {
|
||||
let url = input;
|
||||
let url = input;
|
||||
|
||||
if (safe) {
|
||||
const parser = document.createElement('a');
|
||||
parser.href = url;
|
||||
url = parser.href;
|
||||
}
|
||||
if (safe) {
|
||||
const parser = document.createElement('a');
|
||||
parser.href = url;
|
||||
url = parser.href;
|
||||
}
|
||||
|
||||
try {
|
||||
return new URL(url);
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
try {
|
||||
return new URL(url);
|
||||
} catch (e) {
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// Convert object to URLSearchParams
|
||||
export function buildUrlParams(input) {
|
||||
const params = new URLSearchParams();
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (is.object(input)) {
|
||||
Object.entries(input).forEach(([key, value]) => {
|
||||
params.set(key, value);
|
||||
});
|
||||
}
|
||||
if (is.object(input)) {
|
||||
Object.entries(input).forEach(([key, value]) => {
|
||||
params.set(key, value);
|
||||
});
|
||||
}
|
||||
|
||||
return params;
|
||||
return params;
|
||||
}
|
||||
|
||||
@ -4,66 +4,66 @@
|
||||
|
||||
// Base
|
||||
.plyr {
|
||||
@include plyr-font-smoothing($plyr-font-smoothing);
|
||||
align-items: center;
|
||||
direction: ltr;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: $plyr-font-family;
|
||||
font-variant-numeric: tabular-nums; // Force monosace-esque number widths
|
||||
font-weight: $plyr-font-weight-regular;
|
||||
@include plyr-font-smoothing($plyr-font-smoothing);
|
||||
align-items: center;
|
||||
direction: ltr;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: $plyr-font-family;
|
||||
font-variant-numeric: tabular-nums; // Force monosace-esque number widths
|
||||
font-weight: $plyr-font-weight-regular;
|
||||
height: 100%;
|
||||
line-height: $plyr-line-height;
|
||||
max-width: 100%;
|
||||
min-width: 200px;
|
||||
position: relative;
|
||||
text-shadow: none;
|
||||
transition: box-shadow 0.3s ease;
|
||||
z-index: 0; // Force any border radius
|
||||
|
||||
// Media elements
|
||||
video,
|
||||
audio,
|
||||
iframe {
|
||||
display: block;
|
||||
height: 100%;
|
||||
line-height: $plyr-line-height;
|
||||
max-width: 100%;
|
||||
min-width: 200px;
|
||||
position: relative;
|
||||
text-shadow: none;
|
||||
transition: box-shadow 0.3s ease;
|
||||
z-index: 0; // Force any border radius
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Media elements
|
||||
video,
|
||||
audio,
|
||||
iframe {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
button {
|
||||
font: inherit;
|
||||
line-height: inherit;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
button {
|
||||
font: inherit;
|
||||
line-height: inherit;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
// Ignore focus
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
// Ignore focus
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// border-box everything
|
||||
// http://paulirish.com/2012/box-sizing-border-box-ftw/
|
||||
@if $plyr-border-box {
|
||||
.plyr--full-ui {
|
||||
box-sizing: border-box;
|
||||
.plyr--full-ui {
|
||||
box-sizing: border-box;
|
||||
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
*,
|
||||
*::after,
|
||||
*::before {
|
||||
box-sizing: inherit;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Fix 300ms delay
|
||||
@if $plyr-touch-action {
|
||||
.plyr--full-ui {
|
||||
a,
|
||||
button,
|
||||
input,
|
||||
label {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
.plyr--full-ui {
|
||||
a,
|
||||
button,
|
||||
input,
|
||||
label {
|
||||
touch-action: manipulation;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,10 +3,10 @@
|
||||
// --------------------------------------------------------------
|
||||
|
||||
.plyr__badge {
|
||||
background: $plyr-badge-bg;
|
||||
border-radius: 2px;
|
||||
color: $plyr-badge-color;
|
||||
font-size: $plyr-font-size-badge;
|
||||
line-height: 1;
|
||||
padding: 3px 4px;
|
||||
background: $plyr-badge-background;
|
||||
border-radius: $plyr-badge-border-radius;
|
||||
color: $plyr-badge-text-color;
|
||||
font-size: $plyr-font-size-badge;
|
||||
line-height: 1;
|
||||
padding: 3px 4px;
|
||||
}
|
||||
|
||||
@ -4,56 +4,55 @@
|
||||
|
||||
// Hide default captions
|
||||
.plyr--full-ui ::-webkit-media-text-track-container {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.plyr__captions {
|
||||
animation: plyr-fade-in 0.3s ease;
|
||||
bottom: 0;
|
||||
color: $plyr-captions-color;
|
||||
animation: plyr-fade-in 0.3s ease;
|
||||
bottom: 0;
|
||||
display: none;
|
||||
font-size: $plyr-font-size-captions-small;
|
||||
left: 0;
|
||||
padding: $plyr-control-spacing;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
transition: transform 0.4s ease-in-out;
|
||||
width: 100%;
|
||||
|
||||
span:empty {
|
||||
display: none;
|
||||
font-size: $plyr-font-size-captions-small;
|
||||
left: 0;
|
||||
padding: $plyr-control-spacing;
|
||||
position: absolute;
|
||||
text-align: center;
|
||||
transition: transform 0.4s ease-in-out;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.plyr__caption {
|
||||
background: $plyr-captions-bg;
|
||||
border-radius: 2px;
|
||||
box-decoration-break: clone;
|
||||
line-height: 185%;
|
||||
padding: 0.2em 0.5em;
|
||||
white-space: pre-wrap;
|
||||
@media (min-width: $plyr-bp-sm) {
|
||||
font-size: $plyr-font-size-captions-base;
|
||||
padding: calc(#{$plyr-control-spacing} * 2);
|
||||
}
|
||||
|
||||
// Firefox adds a <div> when using getCueAsHTML()
|
||||
div {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
span:empty {
|
||||
display: none;
|
||||
}
|
||||
|
||||
@media (min-width: $plyr-bp-sm) {
|
||||
font-size: $plyr-font-size-captions-base;
|
||||
padding: ($plyr-control-spacing * 2);
|
||||
}
|
||||
|
||||
@media (min-width: $plyr-bp-md) {
|
||||
font-size: $plyr-font-size-captions-medium;
|
||||
}
|
||||
@media (min-width: $plyr-bp-md) {
|
||||
font-size: $plyr-font-size-captions-medium;
|
||||
}
|
||||
}
|
||||
|
||||
.plyr--captions-active .plyr__captions {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// If the lower controls are shown and not empty
|
||||
.plyr:not(.plyr--hide-controls) .plyr__controls:not(:empty) ~ .plyr__captions {
|
||||
transform: translateY(-($plyr-control-spacing * 4));
|
||||
transform: translateY(calc(#{$plyr-control-spacing} * -4));
|
||||
}
|
||||
|
||||
.plyr__caption {
|
||||
background: $plyr-captions-background;
|
||||
border-radius: 2px;
|
||||
box-decoration-break: clone;
|
||||
color: $plyr-captions-text-color;
|
||||
line-height: 185%;
|
||||
padding: 0.2em 0.5em;
|
||||
white-space: pre-wrap;
|
||||
|
||||
// Firefox adds a <div> when using getCueAsHTML()
|
||||
div {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,44 +3,44 @@
|
||||
// --------------------------------------------------------------
|
||||
|
||||
.plyr__control {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: $plyr-control-radius;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
overflow: visible; // IE11
|
||||
padding: $plyr-control-padding;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: $plyr-control-radius;
|
||||
color: inherit;
|
||||
cursor: pointer;
|
||||
flex-shrink: 0;
|
||||
overflow: visible; // IE11
|
||||
padding: $plyr-control-padding;
|
||||
position: relative;
|
||||
transition: all 0.3s ease;
|
||||
|
||||
svg {
|
||||
display: block;
|
||||
fill: currentColor;
|
||||
height: $plyr-control-icon-size;
|
||||
pointer-events: none;
|
||||
width: $plyr-control-icon-size;
|
||||
}
|
||||
svg {
|
||||
display: block;
|
||||
fill: currentColor;
|
||||
height: $plyr-control-icon-size;
|
||||
pointer-events: none;
|
||||
width: $plyr-control-icon-size;
|
||||
}
|
||||
|
||||
// Default focus
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
// Default focus
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
// Tab focus
|
||||
&.plyr__tab-focus {
|
||||
@include plyr-tab-focus();
|
||||
}
|
||||
// Tab focus
|
||||
&.plyr__tab-focus {
|
||||
@include plyr-tab-focus();
|
||||
}
|
||||
}
|
||||
|
||||
// Remove any link styling
|
||||
a.plyr__control {
|
||||
text-decoration: none;
|
||||
text-decoration: none;
|
||||
|
||||
&::after,
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
&::after,
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Change icons on state change
|
||||
@ -48,5 +48,5 @@ a.plyr__control {
|
||||
.plyr__control.plyr__control--pressed .icon--not-pressed,
|
||||
.plyr__control:not(.plyr__control--pressed) .label--pressed,
|
||||
.plyr__control.plyr__control--pressed .label--not-pressed {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@ -4,49 +4,49 @@
|
||||
|
||||
// Hide native controls
|
||||
.plyr--full-ui ::-webkit-media-controls {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Playback controls
|
||||
.plyr__controls {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
text-align: center;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
text-align: center;
|
||||
|
||||
.plyr__progress__container {
|
||||
flex: 1;
|
||||
min-width: 0; // Fix for Edge issue where content would overflow
|
||||
.plyr__progress__container {
|
||||
flex: 1;
|
||||
min-width: 0; // Fix for Edge issue where content would overflow
|
||||
}
|
||||
|
||||
// Spacing
|
||||
.plyr__controls__item {
|
||||
margin-left: calc(#{$plyr-control-spacing} / 4);
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
// Spacing
|
||||
.plyr__controls__item {
|
||||
margin-left: ($plyr-control-spacing / 4);
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
&.plyr__progress__container {
|
||||
padding-left: ($plyr-control-spacing / 4);
|
||||
}
|
||||
|
||||
&.plyr__time {
|
||||
padding: 0 ($plyr-control-spacing / 2);
|
||||
}
|
||||
|
||||
&.plyr__progress__container:first-child,
|
||||
&.plyr__time:first-child,
|
||||
&.plyr__time + .plyr__time {
|
||||
padding-left: 0;
|
||||
}
|
||||
&.plyr__progress__container {
|
||||
padding-left: calc(#{$plyr-control-spacing} / 4);
|
||||
}
|
||||
|
||||
// Hide empty controls
|
||||
&:empty {
|
||||
display: none;
|
||||
&.plyr__time {
|
||||
padding: 0 calc(#{$plyr-control-spacing} / 2);
|
||||
}
|
||||
|
||||
&.plyr__progress__container:first-child,
|
||||
&.plyr__time:first-child,
|
||||
&.plyr__time + .plyr__time {
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide empty controls
|
||||
&:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Some options are hidden by default
|
||||
@ -54,11 +54,11 @@
|
||||
.plyr [data-plyr='pip'],
|
||||
.plyr [data-plyr='airplay'],
|
||||
.plyr [data-plyr='fullscreen'] {
|
||||
display: none;
|
||||
display: none;
|
||||
}
|
||||
.plyr--captions-enabled [data-plyr='captions'],
|
||||
.plyr--pip-supported [data-plyr='pip'],
|
||||
.plyr--airplay-supported [data-plyr='airplay'],
|
||||
.plyr--fullscreen-enabled [data-plyr='fullscreen'] {
|
||||
display: inline-block;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@ -3,198 +3,200 @@
|
||||
// --------------------------------------------------------------
|
||||
|
||||
.plyr__menu {
|
||||
display: flex; // Edge fix
|
||||
position: relative;
|
||||
display: flex; // Edge fix
|
||||
position: relative;
|
||||
|
||||
// Animate the icon
|
||||
.plyr__control svg {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.plyr__control[aria-expanded='true'] {
|
||||
svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
// Hide tooltip
|
||||
.plyr__tooltip {
|
||||
display: none;
|
||||
}
|
||||
// Animate the icon
|
||||
.plyr__control svg {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
.plyr__control[aria-expanded='true'] {
|
||||
svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
||||
// The actual menu container
|
||||
&__container {
|
||||
animation: plyr-popup 0.2s ease;
|
||||
background: $plyr-menu-bg;
|
||||
border-radius: 4px;
|
||||
bottom: 100%;
|
||||
box-shadow: $plyr-menu-shadow;
|
||||
color: $plyr-menu-color;
|
||||
font-size: $plyr-font-size-base;
|
||||
margin-bottom: 10px;
|
||||
// Hide tooltip
|
||||
.plyr__tooltip {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// The actual menu container
|
||||
&__container {
|
||||
animation: plyr-popup 0.2s ease;
|
||||
background: $plyr-menu-background;
|
||||
border-radius: 4px;
|
||||
bottom: 100%;
|
||||
box-shadow: $plyr-menu-shadow;
|
||||
color: $plyr-menu-color;
|
||||
font-size: $plyr-font-size-base;
|
||||
margin-bottom: 10px;
|
||||
position: absolute;
|
||||
right: -3px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
z-index: 3;
|
||||
|
||||
> div {
|
||||
overflow: hidden;
|
||||
transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
// Arrow
|
||||
&::after {
|
||||
border: $plyr-menu-arrow-size solid transparent;
|
||||
border-top-color: $plyr-menu-background;
|
||||
content: '';
|
||||
height: 0;
|
||||
position: absolute;
|
||||
right: calc(((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding}) - (#{$plyr-menu-arrow-size} / 2));
|
||||
top: 100%;
|
||||
width: 0;
|
||||
}
|
||||
|
||||
[role='menu'] {
|
||||
padding: $plyr-control-padding;
|
||||
}
|
||||
|
||||
[role='menuitem'],
|
||||
[role='menuitemradio'] {
|
||||
margin-top: 2px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Options
|
||||
.plyr__control {
|
||||
align-items: center;
|
||||
color: $plyr-menu-color;
|
||||
display: flex;
|
||||
font-size: $plyr-font-size-menu;
|
||||
padding-bottom: calc(#{$plyr-control-padding} / 1.5);
|
||||
padding-left: calc(#{$plyr-control-padding} * 1.5);
|
||||
padding-right: calc(#{$plyr-control-padding} * 1.5);
|
||||
padding-top: calc(#{$plyr-control-padding} / 1.5);
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
|
||||
> span {
|
||||
align-items: inherit;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border: $plyr-menu-item-arrow-size solid transparent;
|
||||
content: '';
|
||||
position: absolute;
|
||||
right: -3px;
|
||||
text-align: left;
|
||||
white-space: nowrap;
|
||||
z-index: 3;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
> div {
|
||||
overflow: hidden;
|
||||
transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
&--forward {
|
||||
padding-right: calc(#{$plyr-control-padding} * 4);
|
||||
|
||||
// Arrow
|
||||
&::after {
|
||||
border: 4px solid transparent;
|
||||
border-top-color: $plyr-menu-bg;
|
||||
content: '';
|
||||
height: 0;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
top: 100%;
|
||||
width: 0;
|
||||
border-left-color: $plyr-menu-item-arrow-color;
|
||||
right: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
|
||||
}
|
||||
|
||||
[role='menu'] {
|
||||
padding: $plyr-control-padding;
|
||||
&.plyr__tab-focus::after,
|
||||
&:hover::after {
|
||||
border-left-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
&--back {
|
||||
font-weight: $plyr-font-weight-regular;
|
||||
margin: $plyr-control-padding;
|
||||
margin-bottom: calc(#{$plyr-control-padding} / 2);
|
||||
padding-left: calc(#{$plyr-control-padding} * 4);
|
||||
position: relative;
|
||||
width: calc(100% - (#{$plyr-control-padding} * 2));
|
||||
|
||||
&::after {
|
||||
border-right-color: $plyr-menu-item-arrow-color;
|
||||
left: calc((#{$plyr-control-padding} * 1.5) - #{$plyr-menu-item-arrow-size});
|
||||
}
|
||||
|
||||
[role='menuitem'],
|
||||
[role='menuitemradio'] {
|
||||
margin-top: 2px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
&::before {
|
||||
background: $plyr-menu-back-border-color;
|
||||
box-shadow: 0 1px 0 $plyr-menu-back-border-shadow-color;
|
||||
content: '';
|
||||
height: 1px;
|
||||
left: 0;
|
||||
margin-top: calc(#{$plyr-control-padding} / 2);
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
// Options
|
||||
.plyr__control {
|
||||
align-items: center;
|
||||
color: $plyr-menu-color;
|
||||
display: flex;
|
||||
font-size: $plyr-font-size-menu;
|
||||
padding: ceil($plyr-control-padding / 2) ceil($plyr-control-padding * 1.5);
|
||||
user-select: none;
|
||||
width: 100%;
|
||||
|
||||
> span {
|
||||
align-items: inherit;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&::after {
|
||||
border: 4px solid transparent;
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
&--forward {
|
||||
padding-right: ceil($plyr-control-padding * 4);
|
||||
|
||||
&::after {
|
||||
border-left-color: rgba($plyr-menu-color, 0.8);
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
&.plyr__tab-focus::after,
|
||||
&:hover::after {
|
||||
border-left-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
&--back {
|
||||
$horizontal-padding: ($plyr-control-padding * 2);
|
||||
font-weight: $plyr-font-weight-regular;
|
||||
margin: $plyr-control-padding;
|
||||
margin-bottom: floor($plyr-control-padding / 2);
|
||||
padding-left: ceil($plyr-control-padding * 4);
|
||||
position: relative;
|
||||
width: calc(100% - #{$horizontal-padding});
|
||||
|
||||
&::after {
|
||||
border-right-color: rgba($plyr-menu-color, 0.8);
|
||||
left: $plyr-control-padding;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: $plyr-menu-border-color;
|
||||
box-shadow: 0 1px 0 $plyr-menu-border-shadow-color;
|
||||
content: '';
|
||||
height: 1px;
|
||||
left: 0;
|
||||
margin-top: ceil($plyr-control-padding / 2);
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 100%;
|
||||
}
|
||||
|
||||
&.plyr__tab-focus::after,
|
||||
&:hover::after {
|
||||
border-right-color: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plyr__control[role='menuitemradio'] {
|
||||
padding-left: $plyr-control-padding;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: rgba(#000, 0.1);
|
||||
content: '';
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
height: 16px;
|
||||
margin-right: $plyr-control-spacing;
|
||||
transition: all 0.3s ease;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: #fff;
|
||||
border: 0;
|
||||
height: 6px;
|
||||
left: 12px;
|
||||
opacity: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) scale(0);
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&[aria-checked='true'] {
|
||||
&::before {
|
||||
background: $plyr-color-main;
|
||||
}
|
||||
&::after {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
&.plyr__tab-focus::before,
|
||||
&:hover::before {
|
||||
background: rgba(#000, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
// Option value
|
||||
.plyr__menu__value {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
margin-right: -($plyr-control-padding - 2);
|
||||
overflow: hidden;
|
||||
padding-left: ceil($plyr-control-padding * 3.5);
|
||||
pointer-events: none;
|
||||
&.plyr__tab-focus::after,
|
||||
&:hover::after {
|
||||
border-right-color: currentColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plyr__control[role='menuitemradio'] {
|
||||
padding-left: $plyr-control-padding;
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
background: rgba(#000, 0.1);
|
||||
content: '';
|
||||
display: block;
|
||||
flex-shrink: 0;
|
||||
height: 16px;
|
||||
margin-right: $plyr-control-spacing;
|
||||
transition: all 0.3s ease;
|
||||
width: 16px;
|
||||
}
|
||||
|
||||
&::after {
|
||||
background: #fff;
|
||||
border: 0;
|
||||
height: 6px;
|
||||
left: 12px;
|
||||
opacity: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%) scale(0);
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
width: 6px;
|
||||
}
|
||||
|
||||
&[aria-checked='true'] {
|
||||
&::before {
|
||||
background: $plyr-control-toggle-checked-background;
|
||||
}
|
||||
&::after {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
&.plyr__tab-focus::before,
|
||||
&:hover::before {
|
||||
background: rgba($plyr-color-gray-900, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
// Option value
|
||||
.plyr__menu__value {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
margin-left: auto;
|
||||
margin-right: calc((#{$plyr-control-padding} - 2) * -1);
|
||||
overflow: hidden;
|
||||
padding-left: calc(#{$plyr-control-padding} * 3.5);
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,20 +3,20 @@
|
||||
// --------------------------------------------------------------
|
||||
|
||||
.plyr__poster {
|
||||
background-color: #000;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
background-color: #000;
|
||||
background-position: 50% 50%;
|
||||
background-repeat: no-repeat;
|
||||
background-size: contain;
|
||||
height: 100%;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
transition: opacity 0.2s ease;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.plyr--stopped.plyr__poster-enabled .plyr__poster {
|
||||
opacity: 1;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
@ -6,89 +6,89 @@
|
||||
$plyr-progress-offset: $plyr-range-thumb-height;
|
||||
|
||||
.plyr__progress {
|
||||
left: $plyr-progress-offset / 2;
|
||||
margin-right: $plyr-progress-offset;
|
||||
left: calc(#{$plyr-progress-offset} * 0.5);
|
||||
margin-right: $plyr-progress-offset;
|
||||
position: relative;
|
||||
|
||||
input[type='range'],
|
||||
&__buffer {
|
||||
margin-left: calc(#{$plyr-progress-offset} * -0.5);
|
||||
margin-right: calc(#{$plyr-progress-offset} * -0.5);
|
||||
width: calc(100% + #{$plyr-progress-offset});
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
input[type='range'],
|
||||
&__buffer {
|
||||
margin-left: -($plyr-progress-offset / 2);
|
||||
margin-right: -($plyr-progress-offset / 2);
|
||||
width: calc(100% + #{$plyr-progress-offset});
|
||||
}
|
||||
|
||||
input[type='range'] {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
// Seek tooltip to show time
|
||||
.plyr__tooltip {
|
||||
font-size: $plyr-font-size-time;
|
||||
left: 0;
|
||||
}
|
||||
// Seek tooltip to show time
|
||||
.plyr__tooltip {
|
||||
font-size: $plyr-font-size-time;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.plyr__progress__buffer {
|
||||
-webkit-appearance: none; /* stylelint-disable-line */
|
||||
-webkit-appearance: none; /* stylelint-disable-line */
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: 100px;
|
||||
height: $plyr-range-track-height;
|
||||
left: 0;
|
||||
margin-top: calc((#{$plyr-range-track-height} / 2) * -1);
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background: currentColor;
|
||||
border-radius: 100px;
|
||||
height: $plyr-range-track-height;
|
||||
left: 0;
|
||||
margin-top: -($plyr-range-track-height / 2);
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
min-width: $plyr-range-track-height;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
|
||||
&::-webkit-progress-bar {
|
||||
background: transparent;
|
||||
}
|
||||
// Mozilla
|
||||
&::-moz-progress-bar {
|
||||
background: currentColor;
|
||||
border-radius: 100px;
|
||||
min-width: $plyr-range-track-height;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
|
||||
&::-webkit-progress-value {
|
||||
background: currentColor;
|
||||
border-radius: 100px;
|
||||
min-width: $plyr-range-track-height;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
|
||||
// Mozilla
|
||||
&::-moz-progress-bar {
|
||||
background: currentColor;
|
||||
border-radius: 100px;
|
||||
min-width: $plyr-range-track-height;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
|
||||
// Microsoft
|
||||
&::-ms-fill {
|
||||
border-radius: 100px;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
// Microsoft
|
||||
&::-ms-fill {
|
||||
border-radius: 100px;
|
||||
transition: width 0.2s ease;
|
||||
}
|
||||
}
|
||||
|
||||
// Loading state
|
||||
.plyr--loading .plyr__progress__buffer {
|
||||
animation: plyr-progress 1s linear infinite;
|
||||
background-image: linear-gradient(
|
||||
-45deg,
|
||||
$plyr-progress-loading-bg 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
$plyr-progress-loading-bg 50%,
|
||||
$plyr-progress-loading-bg 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
background-repeat: repeat-x;
|
||||
background-size: $plyr-progress-loading-size $plyr-progress-loading-size;
|
||||
color: transparent;
|
||||
animation: plyr-progress 1s linear infinite;
|
||||
background-image: linear-gradient(
|
||||
-45deg,
|
||||
$plyr-progress-loading-background 25%,
|
||||
transparent 25%,
|
||||
transparent 50%,
|
||||
$plyr-progress-loading-background 50%,
|
||||
$plyr-progress-loading-background 75%,
|
||||
transparent 75%,
|
||||
transparent
|
||||
);
|
||||
background-repeat: repeat-x;
|
||||
background-size: $plyr-progress-loading-size $plyr-progress-loading-size;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
.plyr--video.plyr--loading .plyr__progress__buffer {
|
||||
background-color: $plyr-video-progress-buffered-bg;
|
||||
background-color: $plyr-video-progress-buffered-background;
|
||||
}
|
||||
|
||||
.plyr--audio.plyr--loading .plyr__progress__buffer {
|
||||
background-color: $plyr-audio-progress-buffered-bg;
|
||||
background-color: $plyr-audio-progress-buffered-background;
|
||||
}
|
||||
|
||||
@ -3,92 +3,92 @@
|
||||
// --------------------------------------------------------------
|
||||
|
||||
.plyr--full-ui input[type='range'] {
|
||||
// WebKit
|
||||
// WebKit
|
||||
-webkit-appearance: none; /* stylelint-disable-line */
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: calc(#{$plyr-range-thumb-height} * 2);
|
||||
// `color` property is used in JS to populate lower fill for WebKit
|
||||
color: $plyr-range-fill-background;
|
||||
display: block;
|
||||
height: calc((#{$plyr-range-thumb-active-shadow-width} * 2) + #{$plyr-range-thumb-height});
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
transition: box-shadow 0.3s ease;
|
||||
width: 100%;
|
||||
|
||||
&::-webkit-slider-runnable-track {
|
||||
@include plyr-range-track();
|
||||
background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
@include plyr-range-thumb();
|
||||
-webkit-appearance: none; /* stylelint-disable-line */
|
||||
background: transparent;
|
||||
margin-top: calc(((#{$plyr-range-thumb-height} - #{$plyr-range-track-height}) / 2) * -1);
|
||||
}
|
||||
|
||||
// Mozilla
|
||||
&::-moz-range-track {
|
||||
@include plyr-range-track();
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include plyr-range-thumb();
|
||||
}
|
||||
|
||||
&::-moz-range-progress {
|
||||
background: currentColor;
|
||||
border-radius: calc(#{$plyr-range-track-height} / 2);
|
||||
height: $plyr-range-track-height;
|
||||
}
|
||||
|
||||
// Microsoft
|
||||
&::-ms-track {
|
||||
@include plyr-range-track();
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&::-ms-fill-upper {
|
||||
@include plyr-range-track();
|
||||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
@include plyr-range-track();
|
||||
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
@include plyr-range-thumb();
|
||||
// For some reason, Edge uses the -webkit margin above
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&::-ms-tooltip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Focus styles
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&::-moz-focus-outer {
|
||||
border: 0;
|
||||
border-radius: ($plyr-range-thumb-height * 2);
|
||||
// color is used in JS to populate lower fill for WebKit
|
||||
color: $plyr-range-fill-bg;
|
||||
display: block;
|
||||
height: $plyr-range-max-height;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
transition: box-shadow 0.3s ease;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
&.plyr__tab-focus {
|
||||
&::-webkit-slider-runnable-track {
|
||||
@include plyr-range-track();
|
||||
background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%));
|
||||
@include plyr-tab-focus();
|
||||
}
|
||||
|
||||
&::-webkit-slider-thumb {
|
||||
@include plyr-range-thumb();
|
||||
-webkit-appearance: none; /* stylelint-disable-line */
|
||||
margin-top: -(($plyr-range-thumb-height - $plyr-range-track-height) / 2);
|
||||
}
|
||||
|
||||
// Mozilla
|
||||
&::-moz-range-track {
|
||||
@include plyr-range-track();
|
||||
@include plyr-tab-focus();
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include plyr-range-thumb();
|
||||
}
|
||||
|
||||
&::-moz-range-progress {
|
||||
background: currentColor;
|
||||
border-radius: ($plyr-range-track-height / 2);
|
||||
height: $plyr-range-track-height;
|
||||
}
|
||||
|
||||
// Microsoft
|
||||
&::-ms-track {
|
||||
@include plyr-range-track();
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
&::-ms-fill-upper {
|
||||
@include plyr-range-track();
|
||||
}
|
||||
|
||||
&::-ms-fill-lower {
|
||||
@include plyr-range-track();
|
||||
|
||||
background: currentColor;
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
@include plyr-range-thumb();
|
||||
// For some reason, Edge uses the -webkit margin above
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&::-ms-tooltip {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// Focus styles
|
||||
&:focus {
|
||||
outline: 0;
|
||||
}
|
||||
|
||||
&::-moz-focus-outer {
|
||||
border: 0;
|
||||
}
|
||||
|
||||
&.plyr__tab-focus {
|
||||
&::-webkit-slider-runnable-track {
|
||||
@include plyr-tab-focus();
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
@include plyr-tab-focus();
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
@include plyr-tab-focus();
|
||||
}
|
||||
@include plyr-tab-focus();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,18 +3,18 @@
|
||||
// --------------------------------------------------------------
|
||||
|
||||
.plyr__time {
|
||||
font-size: $plyr-font-size-time;
|
||||
font-size: $plyr-font-size-time;
|
||||
}
|
||||
|
||||
// Media duration hidden on small screens
|
||||
.plyr__time + .plyr__time {
|
||||
// Add a slash in before
|
||||
&::before {
|
||||
content: '\2044';
|
||||
margin-right: $plyr-control-spacing;
|
||||
}
|
||||
// Add a slash in before
|
||||
&::before {
|
||||
content: '\2044';
|
||||
margin-right: $plyr-control-spacing;
|
||||
}
|
||||
|
||||
@media (max-width: $plyr-bp-sm-max) {
|
||||
display: none;
|
||||
}
|
||||
@media (max-width: calc(#{$plyr-bp-md} - 1)) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,86 +3,86 @@
|
||||
// --------------------------------------------------------------
|
||||
|
||||
.plyr__tooltip {
|
||||
background: $plyr-tooltip-bg;
|
||||
border-radius: $plyr-tooltip-radius;
|
||||
bottom: 100%;
|
||||
box-shadow: $plyr-tooltip-shadow;
|
||||
color: $plyr-tooltip-color;
|
||||
font-size: $plyr-font-size-small;
|
||||
font-weight: $plyr-font-weight-regular;
|
||||
left: 50%;
|
||||
line-height: 1.3;
|
||||
margin-bottom: ($plyr-tooltip-padding * 2);
|
||||
opacity: 0;
|
||||
padding: $plyr-tooltip-padding ($plyr-tooltip-padding * 1.5);
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
transform: translate(-50%, 10px) scale(0.8);
|
||||
transform-origin: 50% 100%;
|
||||
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
|
||||
white-space: nowrap;
|
||||
z-index: 2;
|
||||
background: $plyr-tooltip-background;
|
||||
border-radius: $plyr-tooltip-radius;
|
||||
bottom: 100%;
|
||||
box-shadow: $plyr-tooltip-shadow;
|
||||
color: $plyr-tooltip-color;
|
||||
font-size: $plyr-font-size-small;
|
||||
font-weight: $plyr-font-weight-regular;
|
||||
left: 50%;
|
||||
line-height: 1.3;
|
||||
margin-bottom: calc(#{$plyr-tooltip-padding} * 2);
|
||||
opacity: 0;
|
||||
padding: $plyr-tooltip-padding calc(#{$plyr-tooltip-padding} * 1.5);
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
transform: translate(-50%, 10px) scale(0.8);
|
||||
transform-origin: 50% 100%;
|
||||
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
|
||||
white-space: nowrap;
|
||||
z-index: 2;
|
||||
|
||||
// The background triangle
|
||||
&::before {
|
||||
border-left: $plyr-tooltip-arrow-size solid transparent;
|
||||
border-right: $plyr-tooltip-arrow-size solid transparent;
|
||||
border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-bg;
|
||||
bottom: -$plyr-tooltip-arrow-size;
|
||||
content: '';
|
||||
height: 0;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
// The background triangle
|
||||
&::before {
|
||||
border-left: $plyr-tooltip-arrow-size solid transparent;
|
||||
border-right: $plyr-tooltip-arrow-size solid transparent;
|
||||
border-top: $plyr-tooltip-arrow-size solid $plyr-tooltip-background;
|
||||
bottom: calc(#{$plyr-tooltip-arrow-size} * -1);
|
||||
content: '';
|
||||
height: 0;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Displaying
|
||||
.plyr .plyr__control:hover .plyr__tooltip,
|
||||
.plyr .plyr__control.plyr__tab-focus .plyr__tooltip,
|
||||
.plyr__tooltip--visible {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0) scale(1);
|
||||
opacity: 1;
|
||||
transform: translate(-50%, 0) scale(1);
|
||||
}
|
||||
|
||||
.plyr .plyr__control:hover .plyr__tooltip {
|
||||
z-index: 3;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
// First tooltip
|
||||
.plyr__controls > .plyr__control:first-child .plyr__tooltip,
|
||||
.plyr__controls > .plyr__control:first-child + .plyr__control .plyr__tooltip {
|
||||
left: 0;
|
||||
transform: translate(0, 10px) scale(0.8);
|
||||
transform-origin: 0 100%;
|
||||
left: 0;
|
||||
transform: translate(0, 10px) scale(0.8);
|
||||
transform-origin: 0 100%;
|
||||
|
||||
&::before {
|
||||
left: ($plyr-control-icon-size / 2) + $plyr-control-padding;
|
||||
}
|
||||
&::before {
|
||||
left: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});
|
||||
}
|
||||
}
|
||||
|
||||
// Last tooltip
|
||||
.plyr__controls > .plyr__control:last-child .plyr__tooltip {
|
||||
left: auto;
|
||||
right: 0;
|
||||
transform: translate(0, 10px) scale(0.8);
|
||||
transform-origin: 100% 100%;
|
||||
left: auto;
|
||||
right: 0;
|
||||
transform: translate(0, 10px) scale(0.8);
|
||||
transform-origin: 100% 100%;
|
||||
|
||||
&::before {
|
||||
left: auto;
|
||||
right: ($plyr-control-icon-size / 2) + $plyr-control-padding;
|
||||
transform: translateX(50%);
|
||||
}
|
||||
&::before {
|
||||
left: auto;
|
||||
right: calc((#{$plyr-control-icon-size} / 2) + #{$plyr-control-padding});
|
||||
transform: translateX(50%);
|
||||
}
|
||||
}
|
||||
|
||||
.plyr__controls > .plyr__control:first-child,
|
||||
.plyr__controls > .plyr__control:first-child + .plyr__control,
|
||||
.plyr__controls > .plyr__control:last-child {
|
||||
&:hover .plyr__tooltip,
|
||||
&.plyr__tab-focus .plyr__tooltip,
|
||||
.plyr__tooltip--visible {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
&:hover .plyr__tooltip,
|
||||
&.plyr__tab-focus .plyr__tooltip,
|
||||
.plyr__tooltip--visible {
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,23 +3,23 @@
|
||||
// --------------------------------------------------------------
|
||||
|
||||
.plyr__volume {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
max-width: 110px;
|
||||
min-width: 80px;
|
||||
position: relative;
|
||||
width: 20%;
|
||||
align-items: center;
|
||||
display: flex;
|
||||
max-width: 110px;
|
||||
min-width: 80px;
|
||||
position: relative;
|
||||
width: 20%;
|
||||
|
||||
input[type='range'] {
|
||||
margin-left: ($plyr-control-spacing / 2);
|
||||
margin-right: ($plyr-control-spacing / 2);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
input[type='range'] {
|
||||
margin-left: calc(#{$plyr-control-spacing} / 2);
|
||||
margin-right: calc(#{$plyr-control-spacing} / 2);
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
|
||||
// Auto size on iOS as there's no slider
|
||||
.plyr--is-ios .plyr__volume {
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
min-width: 0;
|
||||
width: auto;
|
||||
}
|
||||
|
||||
@ -3,29 +3,29 @@
|
||||
// --------------------------------------------------------------
|
||||
|
||||
@keyframes plyr-progress {
|
||||
to {
|
||||
background-position: $plyr-progress-loading-size 0;
|
||||
}
|
||||
to {
|
||||
background-position: $plyr-progress-loading-size 0;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes plyr-popup {
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
0% {
|
||||
opacity: 0.5;
|
||||
transform: translateY(10px);
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes plyr-fade-in {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
100
src/sass/lib/css-vars.scss
Normal file
100
src/sass/lib/css-vars.scss
Normal file
@ -0,0 +1,100 @@
|
||||
// Downloaded from https://github.com/malyw/css-vars (and modified)
|
||||
|
||||
// global map to be filled via variables
|
||||
$css-vars: ();
|
||||
|
||||
// the variable may be set to "true" anywhere in the code,
|
||||
// so native CSS custom properties will be used instead of the Sass global map
|
||||
$css-vars-use-native: false !default;
|
||||
|
||||
///
|
||||
// Assigns a variable to the global map
|
||||
///
|
||||
@function css-var-assign($varName: null, $varValue: null) {
|
||||
@return map-merge(
|
||||
$css-vars,
|
||||
(
|
||||
$varName: $varValue,
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
///
|
||||
// Emulates var() CSS native function behavior
|
||||
//
|
||||
// $args[0] {String} "--" + variable name
|
||||
// [$args[1]] Optional default value if variable is not assigned yet
|
||||
//
|
||||
// E.G.:
|
||||
// color: var(--main-color);
|
||||
// background: var(--main-background, green);
|
||||
///
|
||||
@function var($args...) {
|
||||
// CHECK PARAMS
|
||||
@if (length($args) ==0) {
|
||||
@error 'Variable name is expected to be passed to the var() function';
|
||||
}
|
||||
@if (str-length(nth($args, 1)) < 2 or str-slice(nth($args, 1), 0, 2) != '--') {
|
||||
@error "Variable name is expected to start from '--'";
|
||||
}
|
||||
|
||||
// PROCESS
|
||||
$var-name: nth($args, 1);
|
||||
$var-value: map-get($css-vars, $var-name);
|
||||
|
||||
@if ($css-vars-use-native) {
|
||||
// CSS variables
|
||||
// Native CSS: don't process function in case of native
|
||||
@return unquote('var(' + $args + ')');
|
||||
} @else {
|
||||
@if ($var-value == null) {
|
||||
// variable is not provided so far
|
||||
@if (length($args) == 2) {
|
||||
$var-value: nth($args, 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Sass: return value from the map
|
||||
@return $var-value;
|
||||
}
|
||||
}
|
||||
|
||||
///
|
||||
// SASS mixin to provide variables
|
||||
// E.G.:
|
||||
// @include css-vars((
|
||||
// --color: rebeccapurple,
|
||||
// --height: 68px,
|
||||
// --margin-top: calc(2vh + 20px)
|
||||
// ));
|
||||
///
|
||||
@mixin css-vars($var-map: null) {
|
||||
// CHECK PARAMS
|
||||
@if ($var-map == null) {
|
||||
@error 'Map of variables is expected, instead got: null';
|
||||
}
|
||||
@if (type_of($var-map) != map) {
|
||||
@error 'Map of variables is expected, instead got another type passed: #{type_of($var, ap)}';
|
||||
}
|
||||
|
||||
// PROCESS
|
||||
@if ($css-vars-use-native) {
|
||||
// CSS variables
|
||||
// Native CSS: assign CSS custom properties to the global scope
|
||||
@at-root :root {
|
||||
@each $var-name, $var-value in $var-map {
|
||||
@if (type_of($var-value) == string) {
|
||||
#{$var-name}: $var-value; // to prevent quotes interpolation
|
||||
} @else {
|
||||
#{$var-name}: #{$var-value};
|
||||
}
|
||||
}
|
||||
}
|
||||
} @else {
|
||||
// Sass or debug
|
||||
// merge variables and values to the global map (provides no output)
|
||||
@each $var-name, $var-value in $var-map {
|
||||
$css-vars: css-var-assign($varName, $varValue) !global; // store in global variable
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -3,5 +3,5 @@
|
||||
// ==========================================================================
|
||||
|
||||
@function to-percentage($input) {
|
||||
@return $input * 1%;
|
||||
@return $input * 1%;
|
||||
}
|
||||
|
||||
@ -4,93 +4,90 @@
|
||||
|
||||
// Nicer focus styles
|
||||
// ---------------------------------------
|
||||
@mixin plyr-tab-focus($color: $plyr-tab-focus-default-color) {
|
||||
box-shadow: 0 0 0 5px rgba($color, 0.5);
|
||||
outline: 0;
|
||||
@mixin plyr-tab-focus($color: $plyr-tab-focus-color) {
|
||||
outline-color: $color;
|
||||
outline-offset: 2px;
|
||||
outline-style: dotted;
|
||||
outline-width: 3px;
|
||||
}
|
||||
|
||||
// Font smoothing
|
||||
// ---------------------------------------
|
||||
@mixin plyr-font-smoothing($mode: true) {
|
||||
@if $mode {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
} @else {
|
||||
-moz-osx-font-smoothing: auto;
|
||||
-webkit-font-smoothing: subpixel-antialiased;
|
||||
}
|
||||
@if $mode {
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
}
|
||||
}
|
||||
|
||||
// <input type="range"> styling
|
||||
// ---------------------------------------
|
||||
@mixin plyr-range-track() {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: ($plyr-range-track-height / 2);
|
||||
height: $plyr-range-track-height;
|
||||
transition: box-shadow 0.3s ease;
|
||||
user-select: none;
|
||||
background: transparent;
|
||||
border: 0;
|
||||
border-radius: calc(#{$plyr-range-track-height} / 2);
|
||||
height: $plyr-range-track-height;
|
||||
transition: box-shadow 0.3s ease;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
@mixin plyr-range-thumb() {
|
||||
background: $plyr-range-thumb-bg;
|
||||
border: 0;
|
||||
border-radius: 100%;
|
||||
box-shadow: $plyr-range-thumb-shadow;
|
||||
height: $plyr-range-thumb-height;
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
width: $plyr-range-thumb-height;
|
||||
background: $plyr-range-thumb-background;
|
||||
border: 0;
|
||||
border-radius: 100%;
|
||||
box-shadow: $plyr-range-thumb-shadow;
|
||||
height: $plyr-range-thumb-height;
|
||||
position: relative;
|
||||
transition: all 0.2s ease;
|
||||
width: $plyr-range-thumb-height;
|
||||
}
|
||||
|
||||
@mixin plyr-range-thumb-active($color: rgba($plyr-range-thumb-bg, 0.5)) {
|
||||
box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color;
|
||||
@mixin plyr-range-thumb-active($color) {
|
||||
box-shadow: $plyr-range-thumb-shadow, 0 0 0 $plyr-range-thumb-active-shadow-width $color;
|
||||
}
|
||||
|
||||
// Fullscreen styles
|
||||
// ---------------------------------------
|
||||
@mixin plyr-fullscreen-active() {
|
||||
background: #000;
|
||||
border-radius: 0 !important;
|
||||
background: #000;
|
||||
border-radius: 0 !important;
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
|
||||
video {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
video {
|
||||
height: 100%;
|
||||
.plyr__video-wrapper {
|
||||
height: 100%;
|
||||
position: static;
|
||||
}
|
||||
|
||||
// Vimeo requires some different styling
|
||||
&.plyr--vimeo .plyr__video-wrapper {
|
||||
height: 0;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
// Display correct icon
|
||||
.plyr__control .icon--exit-fullscreen {
|
||||
display: block;
|
||||
|
||||
+ svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.plyr__video-wrapper {
|
||||
height: 100%;
|
||||
position: static;
|
||||
}
|
||||
|
||||
// Vimeo requires some different styling
|
||||
&.plyr--vimeo .plyr__video-wrapper {
|
||||
height: 0;
|
||||
position: relative;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
|
||||
// Display correct icon
|
||||
.plyr__control .icon--exit-fullscreen {
|
||||
display: block;
|
||||
|
||||
+ svg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Hide cursor in fullscreen when controls hidden
|
||||
&.plyr--hide-controls {
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
// Large captions in full screen on larger screens
|
||||
@media (min-width: $plyr-bp-lg) {
|
||||
.plyr__captions {
|
||||
font-size: $plyr-font-size-captions-large;
|
||||
}
|
||||
// Hide cursor in fullscreen when controls hidden
|
||||
&.plyr--hide-controls {
|
||||
cursor: none;
|
||||
}
|
||||
|
||||
// Large captions in full screen on larger screens
|
||||
@media (min-width: $plyr-bp-lg) {
|
||||
.plyr__captions {
|
||||
font-size: $plyr-font-size-captions-large;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -3,54 +3,54 @@
|
||||
// ==========================================================================
|
||||
|
||||
.plyr__ads {
|
||||
border-radius: inherit;
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
border-radius: inherit;
|
||||
bottom: 0;
|
||||
cursor: pointer;
|
||||
left: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: -1; // Hide it by default
|
||||
|
||||
// Make sure the inner container is big enough for the ad creative.
|
||||
> div,
|
||||
> div iframe {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: -1; // Hide it by default
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Make sure the inner container is big enough for the ad creative.
|
||||
> div,
|
||||
> div iframe {
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
// The countdown label
|
||||
&::after {
|
||||
background: $plyr-color-gray-900;
|
||||
border-radius: 2px;
|
||||
bottom: $plyr-control-spacing;
|
||||
color: #fff;
|
||||
content: attr(data-badge-text);
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: $plyr-control-spacing;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
// The countdown label
|
||||
&::after {
|
||||
background: rgba($plyr-color-gray-9, 0.8);
|
||||
border-radius: 2px;
|
||||
bottom: $plyr-control-spacing;
|
||||
color: #fff;
|
||||
content: attr(data-badge-text);
|
||||
font-size: 11px;
|
||||
padding: 2px 6px;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: $plyr-control-spacing;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
&::after:empty {
|
||||
display: none;
|
||||
}
|
||||
&::after:empty {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Advertisement cue's for the progress bar
|
||||
.plyr__cues {
|
||||
background: currentColor;
|
||||
display: block;
|
||||
height: $plyr-range-track-height;
|
||||
left: 0;
|
||||
margin: -($plyr-range-track-height / 2) 0 0;
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 3px;
|
||||
z-index: 3; // Between progress and thumb
|
||||
background: currentColor;
|
||||
display: block;
|
||||
height: $plyr-range-track-height;
|
||||
left: 0;
|
||||
margin: -($plyr-range-track-height / 2) 0 0;
|
||||
opacity: 0.8;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
width: 3px;
|
||||
z-index: 3; // Between progress and thumb
|
||||
}
|
||||
|
||||
@ -1,118 +0,0 @@
|
||||
// --------------------------------------------------------------
|
||||
// Preview Thumbnails
|
||||
// --------------------------------------------------------------
|
||||
|
||||
$plyr-preview-padding: $plyr-tooltip-padding !default;
|
||||
$plyr-preview-bg: $plyr-tooltip-bg !default;
|
||||
$plyr-preview-radius: $plyr-tooltip-radius !default;
|
||||
$plyr-preview-shadow: $plyr-tooltip-shadow !default;
|
||||
$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
|
||||
$plyr-preview-image-bg: $plyr-color-gray-2 !default;
|
||||
$plyr-preview-time-font-size: $plyr-font-size-time !default;
|
||||
$plyr-preview-time-padding: 3px 6px !default;
|
||||
$plyr-preview-time-bg: rgba(0, 0, 0, 0.55);
|
||||
$plyr-preview-time-color: #fff;
|
||||
$plyr-preview-time-bottom-offset: 6px;
|
||||
|
||||
.plyr__preview-thumb {
|
||||
background-color: $plyr-preview-bg;
|
||||
border-radius: 3px;
|
||||
bottom: 100%;
|
||||
box-shadow: $plyr-preview-shadow;
|
||||
margin-bottom: $plyr-preview-padding * 2;
|
||||
opacity: 0;
|
||||
padding: $plyr-preview-radius;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
transform: translate(0, 10px) scale(0.8);
|
||||
transform-origin: 50% 100%;
|
||||
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
|
||||
z-index: 2;
|
||||
|
||||
&--is-shown {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
|
||||
// The background triangle
|
||||
&::before {
|
||||
border-left: $plyr-preview-arrow-size solid transparent;
|
||||
border-right: $plyr-preview-arrow-size solid transparent;
|
||||
border-top: $plyr-preview-arrow-size solid $plyr-preview-bg;
|
||||
bottom: -$plyr-preview-arrow-size;
|
||||
content: '';
|
||||
height: 0;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&__image-container {
|
||||
background: $plyr-preview-image-bg;
|
||||
border-radius: ($plyr-preview-radius - 1px);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
||||
img {
|
||||
height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript
|
||||
left: 0;
|
||||
max-height: none;
|
||||
max-width: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Seek time text
|
||||
&__time-container {
|
||||
bottom: $plyr-preview-time-bottom-offset;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
white-space: nowrap;
|
||||
z-index: 3;
|
||||
|
||||
span {
|
||||
background-color: $plyr-preview-time-bg;
|
||||
border-radius: ($plyr-preview-radius - 1px);
|
||||
color: $plyr-preview-time-color;
|
||||
font-size: $plyr-preview-time-font-size;
|
||||
padding: $plyr-preview-time-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plyr__preview-scrubbing {
|
||||
bottom: 0;
|
||||
filter: blur(1px);
|
||||
height: 100%;
|
||||
left: 0;
|
||||
margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
||||
&--is-shown {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
max-height: none;
|
||||
max-width: none;
|
||||
object-fit: contain;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
109
src/sass/plugins/preview-thumbnails/index.scss
Normal file
109
src/sass/plugins/preview-thumbnails/index.scss
Normal file
@ -0,0 +1,109 @@
|
||||
// --------------------------------------------------------------
|
||||
// Preview Thumbnails
|
||||
// --------------------------------------------------------------
|
||||
|
||||
@import './settings';
|
||||
|
||||
.plyr__preview-thumb {
|
||||
background-color: $plyr-preview-background;
|
||||
border-radius: 3px;
|
||||
bottom: 100%;
|
||||
box-shadow: $plyr-preview-shadow;
|
||||
margin-bottom: calc(#{$plyr-preview-padding} * 2);
|
||||
opacity: 0;
|
||||
padding: $plyr-preview-radius;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
transform: translate(0, 10px) scale(0.8);
|
||||
transform-origin: 50% 100%;
|
||||
transition: transform 0.2s 0.1s ease, opacity 0.2s 0.1s ease;
|
||||
z-index: 2;
|
||||
|
||||
&--is-shown {
|
||||
opacity: 1;
|
||||
transform: translate(0, 0) scale(1);
|
||||
}
|
||||
|
||||
// The background triangle
|
||||
&::before {
|
||||
border-left: $plyr-preview-arrow-size solid transparent;
|
||||
border-right: $plyr-preview-arrow-size solid transparent;
|
||||
border-top: $plyr-preview-arrow-size solid $plyr-preview-background;
|
||||
bottom: calc(#{$plyr-preview-arrow-size} * -1);
|
||||
content: '';
|
||||
height: 0;
|
||||
left: 50%;
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
width: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
&__image-container {
|
||||
background: $plyr-preview-image-background;
|
||||
border-radius: calc(#{$plyr-preview-radius} - 1px);
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
||||
img {
|
||||
height: 100%; // Non sprite images are 100%. Sprites will have their size applied by JavaScript
|
||||
left: 0;
|
||||
max-height: none;
|
||||
max-width: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Seek time text
|
||||
&__time-container {
|
||||
bottom: $plyr-preview-time-bottom-offset;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
white-space: nowrap;
|
||||
z-index: 3;
|
||||
|
||||
span {
|
||||
background-color: $plyr-preview-time-background;
|
||||
border-radius: calc(#{$plyr-preview-radius} - 1px);
|
||||
color: $plyr-preview-time-color;
|
||||
font-size: $plyr-preview-time-font-size;
|
||||
padding: $plyr-preview-time-padding;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.plyr__preview-scrubbing {
|
||||
bottom: 0;
|
||||
filter: blur(1px);
|
||||
height: 100%;
|
||||
left: 0;
|
||||
margin: auto; // Required when video is different dimensions to container (e.g. fullscreen)
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
width: 100%;
|
||||
z-index: 1;
|
||||
|
||||
&--is-shown {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
img {
|
||||
height: 100%;
|
||||
left: 0;
|
||||
max-height: none;
|
||||
max-width: none;
|
||||
object-fit: contain;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
15
src/sass/plugins/preview-thumbnails/settings.scss
Normal file
15
src/sass/plugins/preview-thumbnails/settings.scss
Normal file
@ -0,0 +1,15 @@
|
||||
// --------------------------------------------------------------
|
||||
// Preview Thumbnails
|
||||
// --------------------------------------------------------------
|
||||
|
||||
$plyr-preview-padding: $plyr-tooltip-padding !default;
|
||||
$plyr-preview-background: $plyr-tooltip-background !default;
|
||||
$plyr-preview-radius: $plyr-tooltip-radius !default;
|
||||
$plyr-preview-shadow: $plyr-tooltip-shadow !default;
|
||||
$plyr-preview-arrow-size: $plyr-tooltip-arrow-size !default;
|
||||
$plyr-preview-image-background: $plyr-color-gray-200 !default;
|
||||
$plyr-preview-time-font-size: $plyr-font-size-time !default;
|
||||
$plyr-preview-time-padding: 3px 6px !default;
|
||||
$plyr-preview-time-background: rgba(0, 0, 0, 0.55);
|
||||
$plyr-preview-time-color: #fff;
|
||||
$plyr-preview-time-bottom-offset: 6px;
|
||||
@ -5,6 +5,9 @@
|
||||
// ==========================================================================
|
||||
@charset 'UTF-8';
|
||||
|
||||
@import 'lib/css-vars';
|
||||
$css-vars-use-native: true;
|
||||
|
||||
@import 'settings/breakpoints';
|
||||
@import 'settings/colors';
|
||||
@import 'settings/cosmetics';
|
||||
@ -43,7 +46,7 @@
|
||||
@import 'states/fullscreen';
|
||||
|
||||
@import 'plugins/ads';
|
||||
@import 'plugins/preview-thumbnails';
|
||||
@import 'plugins/preview-thumbnails/index';
|
||||
|
||||
@import 'utils/animation';
|
||||
@import 'utils/hidden';
|
||||
|
||||
@ -2,5 +2,6 @@
|
||||
// Badges
|
||||
// ==========================================================================
|
||||
|
||||
$plyr-badge-bg: $plyr-color-gray-7 !default;
|
||||
$plyr-badge-color: #fff !default;
|
||||
$plyr-badge-background: var(--plyr-badge-background, $plyr-color-gray-700) !default;
|
||||
$plyr-badge-text-color: var(--plyr-badge-text-color, #fff) !default;
|
||||
$plyr-badge-border-radius: var(--plyr-badge-border-radius, 2px) !default;
|
||||
|
||||
@ -1,12 +1,9 @@
|
||||
// ==========================================================================
|
||||
// Breakpoints
|
||||
// NOTE: we can't use CSS variables for breakpoints unfortunately
|
||||
// https://www.w3.org/TR/css-variables-1/#using-variables
|
||||
// ==========================================================================
|
||||
|
||||
$plyr-bp-sm: 480px !default;
|
||||
$plyr-bp-md: 768px !default;
|
||||
$plyr-bp-lg: 1024px !default;
|
||||
|
||||
// Max-width media queries
|
||||
$plyr-bp-xs-max: ($plyr-bp-sm - 1);
|
||||
$plyr-bp-sm-max: ($plyr-bp-md - 1);
|
||||
$plyr-bp-md-max: ($plyr-bp-lg - 1);
|
||||
|
||||
@ -2,8 +2,9 @@
|
||||
// Captions
|
||||
// ==========================================================================
|
||||
|
||||
$plyr-captions-bg: rgba(#000, 0.8) !default;
|
||||
$plyr-captions-color: #fff !default;
|
||||
$plyr-captions-background: var(--plyr-captions-background, rgba(#000, 0.8)) !default;
|
||||
$plyr-captions-text-color: var(--plyr-captions-text-color, #fff) !default;
|
||||
|
||||
$plyr-font-size-captions-base: $plyr-font-size-base !default;
|
||||
$plyr-font-size-captions-small: $plyr-font-size-small !default;
|
||||
$plyr-font-size-captions-medium: $plyr-font-size-large !default;
|
||||
|
||||
@ -2,16 +2,16 @@
|
||||
// Colors
|
||||
// ==========================================================================
|
||||
|
||||
$plyr-color-main: hsl(198, 100%, 50%) !default;
|
||||
$plyr-color-main: var(--plyr-color-main, hsl(198, 100%, 50%)) !default;
|
||||
|
||||
// Grayscale
|
||||
$plyr-color-gray-9: hsl(210, 15%, 16%);
|
||||
$plyr-color-gray-8: lighten($plyr-color-gray-9, 9%);
|
||||
$plyr-color-gray-7: lighten($plyr-color-gray-8, 9%);
|
||||
$plyr-color-gray-6: lighten($plyr-color-gray-7, 9%);
|
||||
$plyr-color-gray-5: lighten($plyr-color-gray-6, 9%);
|
||||
$plyr-color-gray-4: lighten($plyr-color-gray-5, 9%);
|
||||
$plyr-color-gray-3: lighten($plyr-color-gray-4, 9%);
|
||||
$plyr-color-gray-2: lighten($plyr-color-gray-3, 9%);
|
||||
$plyr-color-gray-1: lighten($plyr-color-gray-2, 9%);
|
||||
$plyr-color-gray-0: lighten($plyr-color-gray-1, 9%);
|
||||
$plyr-color-gray-900: hsl(216, 15%, 16%) !default;
|
||||
$plyr-color-gray-800: hsl(216, 15%, 25%) !default;
|
||||
$plyr-color-gray-700: hsl(216, 15%, 34%) !default;
|
||||
$plyr-color-gray-600: hsl(216, 15%, 43%) !default;
|
||||
$plyr-color-gray-500: hsl(216, 15%, 52%) !default;
|
||||
$plyr-color-gray-400: hsl(216, 15%, 61%) !default;
|
||||
$plyr-color-gray-300: hsl(216, 15%, 70%) !default;
|
||||
$plyr-color-gray-200: hsl(216, 15%, 79%) !default;
|
||||
$plyr-color-gray-100: hsl(216, 15%, 88%) !default;
|
||||
$plyr-color-gray-50: hsl(216, 15%, 97%) !default;
|
||||
|
||||
@ -2,17 +2,32 @@
|
||||
// Controls
|
||||
// ==========================================================================
|
||||
|
||||
$plyr-control-icon-size: 18px !default;
|
||||
$plyr-control-spacing: 10px !default;
|
||||
$plyr-control-padding: ($plyr-control-spacing * 0.7) !default;
|
||||
$plyr-control-radius: 3px !default;
|
||||
$plyr-control-icon-size: var(--plyr-control-icon-size, 18px) !default;
|
||||
$plyr-control-spacing: var(--plyr-control-spacing, 10px) !default;
|
||||
$plyr-control-padding: calc(#{$plyr-control-spacing} * 0.7);
|
||||
$plyr-control-padding: var(--plyr-control-padding, $plyr-control-padding) !default;
|
||||
$plyr-control-radius: var(--plyr-control-radius, 3px) !default;
|
||||
|
||||
$plyr-video-controls-bg: #000 !default;
|
||||
$plyr-video-control-color: #fff !default;
|
||||
$plyr-video-control-color-hover: #fff !default;
|
||||
$plyr-video-control-bg-hover: $plyr-color-main !default;
|
||||
$plyr-control-toggle-checked-background: var(
|
||||
--plyr-control-toggle-checked-background,
|
||||
var(--plyr-color-main, $plyr-color-main)
|
||||
) !default;
|
||||
|
||||
$plyr-audio-controls-bg: #fff !default;
|
||||
$plyr-audio-control-color: $plyr-color-gray-7 !default;
|
||||
$plyr-audio-control-color-hover: #fff !default;
|
||||
$plyr-audio-control-bg-hover: $plyr-color-main !default;
|
||||
$plyr-video-controls-background: var(
|
||||
--plyr-video-controls-background,
|
||||
linear-gradient(rgba(#000, 0), rgba(#000, 0.75))
|
||||
) !default;
|
||||
$plyr-video-control-color: var(--plyr-video-control-color, #fff) !default;
|
||||
$plyr-video-control-color-hover: var(--plyr-video-control-color-hover, #fff) !default;
|
||||
$plyr-video-control-background-hover: var(
|
||||
--plyr-video-control-background-hover,
|
||||
var(--plyr-color-main, $plyr-color-main)
|
||||
) !default;
|
||||
|
||||
$plyr-audio-controls-background: var(--plyr-audio-controls-background, #fff) !default;
|
||||
$plyr-audio-control-color: var(--plyr-audio-control-color, $plyr-color-gray-700) !default;
|
||||
$plyr-audio-control-color-hover: var(--plyr-audio-control-color-hover, #fff) !default;
|
||||
$plyr-audio-control-background-hover: var(
|
||||
--plyr-audio-control-background-hover,
|
||||
var(--plyr-color-main, $plyr-color-main)
|
||||
) !default;
|
||||
|
||||
@ -2,4 +2,4 @@
|
||||
// Cosmetic
|
||||
// ==========================================================================
|
||||
|
||||
$plyr-tab-focus-default-color: $plyr-color-main !default;
|
||||
$plyr-tab-focus-color: var(--plyr-tab-focus-color, var(--plyr-color-main, $plyr-color-main)) !default;
|
||||
|
||||
@ -2,9 +2,14 @@
|
||||
// Menus
|
||||
// ==========================================================================
|
||||
|
||||
$plyr-menu-bg: rgba(#fff, 0.9) !default;
|
||||
$plyr-menu-color: $plyr-color-gray-7 !default;
|
||||
$plyr-menu-arrow-size: 6px !default;
|
||||
$plyr-menu-border-color: rgba($plyr-color-gray-5, 0.2) !default;
|
||||
$plyr-menu-border-shadow-color: #fff !default;
|
||||
$plyr-menu-shadow: 0 1px 2px rgba(#000, 0.15) !default;
|
||||
$plyr-menu-background: var(--plyr-menu-background, rgba(#fff, 0.9)) !default;
|
||||
$plyr-menu-radius: var(--plyr-menu-radius, 4px) !default;
|
||||
$plyr-menu-color: var(--plyr-menu-color, $plyr-color-gray-700) !default;
|
||||
$plyr-menu-shadow: var(--plyr-menu-shadow, 0 1px 2px rgba(#000, 0.15)) !default;
|
||||
$plyr-menu-arrow-size: var(--plyr-menu-arrow-size, 4px) !default;
|
||||
|
||||
$plyr-menu-item-arrow-size: var(--plyr-menu-item-arrow-size, 4px) !default;
|
||||
$plyr-menu-item-arrow-color: var(--plyr-menu-arrow-color, $plyr-color-gray-500) !default;
|
||||
|
||||
$plyr-menu-back-border-color: var(--plyr-menu-back-border-color, $plyr-color-gray-100) !default;
|
||||
$plyr-menu-back-border-shadow-color: var(--plyr-menu-back-border-shadow-color, #fff) !default;
|
||||
|
||||
@ -3,9 +3,12 @@
|
||||
// ==========================================================================
|
||||
|
||||
// Loading
|
||||
$plyr-progress-loading-size: 25px !default;
|
||||
$plyr-progress-loading-bg: rgba($plyr-color-gray-9, 0.6) !default;
|
||||
$plyr-progress-loading-size: var(--plyr-progress-loading-size, 25px) !default;
|
||||
$plyr-progress-loading-background: var(--plyr-progress-loading-background, rgba($plyr-color-gray-900, 0.6)) !default;
|
||||
|
||||
// Buffered
|
||||
$plyr-video-progress-buffered-bg: rgba(#fff, 0.25) !default;
|
||||
$plyr-audio-progress-buffered-bg: rgba($plyr-color-gray-2, 0.66) !default;
|
||||
$plyr-video-progress-buffered-background: var(--plyr-video-progress-buffered-background, rgba(#fff, 0.25)) !default;
|
||||
$plyr-audio-progress-buffered-background: var(
|
||||
--plyr-audio-progress-buffered-background,
|
||||
rgba($plyr-color-gray-200, 0.6)
|
||||
) !default;
|
||||
|
||||
@ -2,23 +2,39 @@
|
||||
// Sliders
|
||||
// ==========================================================================
|
||||
|
||||
// Active state
|
||||
$plyr-range-thumb-active-shadow-width: 3px !default;
|
||||
|
||||
// Thumb
|
||||
$plyr-range-thumb-height: 13px !default;
|
||||
$plyr-range-thumb-bg: #fff !default;
|
||||
$plyr-range-thumb-border: 2px solid transparent !default;
|
||||
$plyr-range-thumb-shadow: 0 1px 1px rgba(#000, 0.15), 0 0 0 1px rgba($plyr-color-gray-9, 0.2) !default;
|
||||
$plyr-range-thumb-height: var(--plyr-range-thumb-height, 13px) !default;
|
||||
$plyr-range-thumb-background: var(--plyr-range-thumb-background, #fff) !default;
|
||||
$plyr-range-thumb-shadow: var(
|
||||
--plyr-range-thumb-shadow,
|
||||
0 1px 1px rgba($plyr-color-gray-900, 0.15),
|
||||
0 0 0 1px rgba($plyr-color-gray-900, 0.2)
|
||||
) !default;
|
||||
|
||||
// Active state
|
||||
$plyr-range-thumb-active-shadow-width: var(--plyr-range-thumb-active-shadow-width, 3px) !default;
|
||||
|
||||
// Track
|
||||
$plyr-range-track-height: 5px !default;
|
||||
$plyr-range-max-height: ($plyr-range-thumb-active-shadow-width * 2) + $plyr-range-thumb-height !default;
|
||||
$plyr-range-track-height: var(--plyr-range-track-height, 5px) !default;
|
||||
|
||||
// Fill
|
||||
$plyr-range-fill-bg: $plyr-color-main !default;
|
||||
$plyr-range-fill-background: var(--plyr-range-fill-background, var(--plyr-color-main, $plyr-color-main)) !default;
|
||||
|
||||
// Type specific
|
||||
$plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default;
|
||||
$plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default;
|
||||
$plyr-audio-range-thumb-shadow-color: rgba(#000, 0.1) !default;
|
||||
$plyr-video-range-track-background: var(
|
||||
--plyr-video-range-track-background,
|
||||
$plyr-video-progress-buffered-background
|
||||
) !default;
|
||||
$plyr-video-range-thumb-active-shadow-color: var(
|
||||
--plyr-audio-range-thumb-active-shadow-color,
|
||||
rgba(#fff, 0.5)
|
||||
) !default;
|
||||
|
||||
$plyr-audio-range-track-background: var(
|
||||
--plyr-audio-range-track-background,
|
||||
$plyr-audio-progress-buffered-background
|
||||
) !default;
|
||||
$plyr-audio-range-thumb-active-shadow-color: var(
|
||||
--plyr-audio-range-thumb-active-shadow-color,
|
||||
rgba($plyr-color-gray-900, 0.1)
|
||||
) !default;
|
||||
|
||||
@ -2,9 +2,10 @@
|
||||
// Tooltips
|
||||
// ==========================================================================
|
||||
|
||||
$plyr-tooltip-bg: rgba(#fff, 0.9) !default;
|
||||
$plyr-tooltip-color: $plyr-color-gray-7 !default;
|
||||
$plyr-tooltip-padding: ($plyr-control-spacing / 2) !default;
|
||||
$plyr-tooltip-arrow-size: 4px !default;
|
||||
$plyr-tooltip-radius: 3px !default;
|
||||
$plyr-tooltip-shadow: 0 1px 2px rgba(#000, 0.15) !default;
|
||||
$plyr-tooltip-background: var(--plyr-tooltip-background, rgba(#fff, 0.9)) !default;
|
||||
$plyr-tooltip-color: var(--plyr-tooltip-color, $plyr-color-gray-700) !default;
|
||||
$plyr-tooltip-padding: calc(#{$plyr-control-spacing} / 2);
|
||||
$plyr-tooltip-padding: var(--plyr-tooltip-padding, $plyr-tooltip-padding) !default;
|
||||
$plyr-tooltip-arrow-size: var(--plyr-tooltip-arrow-size, 4px) !default;
|
||||
$plyr-tooltip-radius: var(--plyr-tooltip-radius, 3px) !default;
|
||||
$plyr-tooltip-shadow: var(--plyr-tooltip-shadow, 0 1px 2px rgba(0, 0, 0, 0.15)) !default;
|
||||
|
||||
@ -2,19 +2,19 @@
|
||||
// Typography
|
||||
// ==========================================================================
|
||||
|
||||
$plyr-font-family: Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default;
|
||||
$plyr-font-size-base: 16px !default;
|
||||
$plyr-font-size-small: 14px !default;
|
||||
$plyr-font-size-large: 18px !default;
|
||||
$plyr-font-size-xlarge: 21px !default;
|
||||
$plyr-font-family: var(--plyr-font-family, inherit) !default;
|
||||
$plyr-font-size-base: var(--plyr-font-size-base, 15px) !default;
|
||||
$plyr-font-size-small: var(--plyr-font-size-small, 13px) !default;
|
||||
$plyr-font-size-large: var(--plyr-font-size-large, 18px) !default;
|
||||
$plyr-font-size-xlarge: var(--plyr-font-size-xlarge, 21px) !default;
|
||||
|
||||
$plyr-font-size-time: $plyr-font-size-small !default;
|
||||
$plyr-font-size-badge: 9px !default;
|
||||
$plyr-font-size-menu: $plyr-font-size-small !default;
|
||||
$plyr-font-size-time: var(--plyr-font-size-time, $plyr-font-size-small) !default;
|
||||
$plyr-font-size-menu: var(--plyr-font-size-menu, $plyr-font-size-small) !default;
|
||||
$plyr-font-size-badge: var(--plyr-font-size-badge, 9px) !default;
|
||||
|
||||
$plyr-font-weight-regular: 500 !default;
|
||||
$plyr-font-weight-bold: 600 !default;
|
||||
$plyr-font-weight-regular: var(--plyr-font-weight-regular, 400) !default;
|
||||
$plyr-font-weight-bold: var(--plyr-font-weight-bold, 600) !default;
|
||||
|
||||
$plyr-line-height: 1.7 !default;
|
||||
$plyr-line-height: var(--plyr-line-height, 1.7) !default;
|
||||
|
||||
$plyr-font-smoothing: false !default;
|
||||
$plyr-font-smoothing: var(--plyr-font-smoothing, false) !default;
|
||||
|
||||
@ -3,32 +3,32 @@
|
||||
// --------------------------------------------------------------
|
||||
|
||||
.plyr:fullscreen {
|
||||
@include plyr-fullscreen-active();
|
||||
@include plyr-fullscreen-active();
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line */
|
||||
.plyr:-webkit-full-screen {
|
||||
@include plyr-fullscreen-active();
|
||||
@include plyr-fullscreen-active();
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line */
|
||||
.plyr:-moz-full-screen {
|
||||
@include plyr-fullscreen-active();
|
||||
@include plyr-fullscreen-active();
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line */
|
||||
.plyr:-ms-fullscreen {
|
||||
@include plyr-fullscreen-active();
|
||||
@include plyr-fullscreen-active();
|
||||
}
|
||||
|
||||
// Fallback for unsupported browsers
|
||||
.plyr--fullscreen-fallback {
|
||||
@include plyr-fullscreen-active();
|
||||
bottom: 0;
|
||||
display: block;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 10000000;
|
||||
@include plyr-fullscreen-active();
|
||||
bottom: 0;
|
||||
display: block;
|
||||
left: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 10000000;
|
||||
}
|
||||
|
||||
@ -4,58 +4,58 @@
|
||||
|
||||
// Container
|
||||
.plyr--audio {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Controls container
|
||||
.plyr--audio .plyr__controls {
|
||||
background: $plyr-audio-controls-bg;
|
||||
border-radius: inherit;
|
||||
color: $plyr-audio-control-color;
|
||||
padding: $plyr-control-spacing;
|
||||
background: $plyr-audio-controls-background;
|
||||
border-radius: inherit;
|
||||
color: $plyr-audio-control-color;
|
||||
padding: $plyr-control-spacing;
|
||||
}
|
||||
|
||||
// Control elements
|
||||
.plyr--audio .plyr__control {
|
||||
&.plyr__tab-focus,
|
||||
&:hover,
|
||||
&[aria-expanded='true'] {
|
||||
background: $plyr-audio-control-bg-hover;
|
||||
color: $plyr-audio-control-color-hover;
|
||||
}
|
||||
&.plyr__tab-focus,
|
||||
&:hover,
|
||||
&[aria-expanded='true'] {
|
||||
background: $plyr-audio-control-background-hover;
|
||||
color: $plyr-audio-control-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
// Range inputs
|
||||
.plyr--full-ui.plyr--audio input[type='range'] {
|
||||
&::-webkit-slider-runnable-track {
|
||||
background-color: $plyr-audio-range-track-bg;
|
||||
&::-webkit-slider-runnable-track {
|
||||
background-color: $plyr-audio-range-track-background;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
background-color: $plyr-audio-range-track-background;
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
background-color: $plyr-audio-range-track-background;
|
||||
}
|
||||
|
||||
// Pressed styles
|
||||
&:active {
|
||||
&::-webkit-slider-thumb {
|
||||
@include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
background-color: $plyr-audio-range-track-bg;
|
||||
&::-moz-range-thumb {
|
||||
@include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
background-color: $plyr-audio-range-track-bg;
|
||||
}
|
||||
|
||||
// Pressed styles
|
||||
&:active {
|
||||
&::-webkit-slider-thumb {
|
||||
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
@include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
|
||||
}
|
||||
&::-ms-thumb {
|
||||
@include plyr-range-thumb-active($plyr-audio-range-thumb-active-shadow-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Progress
|
||||
.plyr--audio .plyr__progress__buffer {
|
||||
color: $plyr-audio-progress-buffered-bg;
|
||||
color: $plyr-audio-progress-buffered-background;
|
||||
}
|
||||
|
||||
@ -4,20 +4,21 @@
|
||||
|
||||
// Container
|
||||
.plyr--video {
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
background: #000;
|
||||
overflow: hidden;
|
||||
|
||||
&.plyr--menu-open {
|
||||
overflow: visible;
|
||||
}
|
||||
&.plyr--menu-open {
|
||||
overflow: visible;
|
||||
}
|
||||
}
|
||||
|
||||
.plyr__video-wrapper {
|
||||
background: #000;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
background: #000;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Default to 16:9 ratio but this is set by JavaScript based on config
|
||||
@ -25,134 +26,138 @@ $embed-padding: ((100 / 16) * 9);
|
||||
|
||||
.plyr__video-embed,
|
||||
.plyr__video-wrapper--fixed-ratio {
|
||||
height: 0;
|
||||
padding-bottom: to-percentage($embed-padding);
|
||||
height: 0;
|
||||
padding-bottom: to-percentage($embed-padding);
|
||||
}
|
||||
|
||||
.plyr__video-embed iframe,
|
||||
.plyr__video-wrapper--fixed-ratio video {
|
||||
border: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
// If the full custom UI is supported
|
||||
.plyr--full-ui .plyr__video-embed {
|
||||
$height: 240;
|
||||
$offset: to-percentage(($height - $embed-padding) / ($height / 50));
|
||||
$height: 240;
|
||||
$offset: to-percentage(($height - $embed-padding) / ($height / 50));
|
||||
|
||||
// Only used for Vimeo
|
||||
> .plyr__video-embed__container {
|
||||
padding-bottom: to-percentage($height);
|
||||
position: relative;
|
||||
transform: translateY(-$offset);
|
||||
}
|
||||
// Only used for Vimeo
|
||||
> .plyr__video-embed__container {
|
||||
padding-bottom: to-percentage($height);
|
||||
position: relative;
|
||||
transform: translateY(-$offset);
|
||||
}
|
||||
}
|
||||
|
||||
// Controls container
|
||||
.plyr--video .plyr__controls {
|
||||
background: linear-gradient(rgba($plyr-video-controls-bg, 0), rgba($plyr-video-controls-bg, 0.7));
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
bottom: 0;
|
||||
color: $plyr-video-control-color;
|
||||
left: 0;
|
||||
padding: ($plyr-control-spacing * 2) ($plyr-control-spacing / 2) ($plyr-control-spacing / 2);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
|
||||
z-index: 3;
|
||||
background: $plyr-video-controls-background;
|
||||
border-bottom-left-radius: inherit;
|
||||
border-bottom-right-radius: inherit;
|
||||
bottom: 0;
|
||||
color: $plyr-video-control-color;
|
||||
left: 0;
|
||||
padding: calc(#{$plyr-control-spacing} / 2);
|
||||
padding-top: calc(#{$plyr-control-spacing} * 2);
|
||||
position: absolute;
|
||||
right: 0;
|
||||
transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
|
||||
z-index: 3;
|
||||
|
||||
@media (min-width: $plyr-bp-sm) {
|
||||
padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing;
|
||||
}
|
||||
@media (min-width: $plyr-bp-sm) {
|
||||
padding: $plyr-control-spacing;
|
||||
padding-top: calc(#{$plyr-control-spacing} * 3.5);
|
||||
}
|
||||
}
|
||||
|
||||
// Hide controls
|
||||
.plyr--video.plyr--hide-controls .plyr__controls {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
// Control elements
|
||||
.plyr--video .plyr__control {
|
||||
// Hover and tab focus
|
||||
&.plyr__tab-focus,
|
||||
&:hover,
|
||||
&[aria-expanded='true'] {
|
||||
background: $plyr-video-control-bg-hover;
|
||||
color: $plyr-video-control-color-hover;
|
||||
}
|
||||
// Hover and tab focus
|
||||
&.plyr__tab-focus,
|
||||
&:hover,
|
||||
&[aria-expanded='true'] {
|
||||
background: $plyr-video-control-background-hover;
|
||||
color: $plyr-video-control-color-hover;
|
||||
}
|
||||
}
|
||||
|
||||
// Large play button (video only)
|
||||
.plyr__control--overlaid {
|
||||
background: rgba($plyr-video-control-bg-hover, 0.8);
|
||||
border: 0;
|
||||
border-radius: 100%;
|
||||
color: $plyr-video-control-color;
|
||||
display: none;
|
||||
left: 50%;
|
||||
padding: ceil($plyr-control-spacing * 1.5);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 2;
|
||||
background: $plyr-video-control-background-hover;
|
||||
border: 0;
|
||||
border-radius: 100%;
|
||||
color: $plyr-video-control-color;
|
||||
display: none;
|
||||
left: 50%;
|
||||
opacity: 0.9;
|
||||
padding: calc(#{$plyr-control-spacing} * 1.5);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transition: 0.3s;
|
||||
z-index: 2;
|
||||
|
||||
// Offset icon to make the play button look right
|
||||
svg {
|
||||
left: 2px;
|
||||
position: relative;
|
||||
}
|
||||
// Offset icon to make the play button look right
|
||||
svg {
|
||||
left: 2px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background: $plyr-video-control-bg-hover;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.plyr--playing .plyr__control--overlaid {
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.plyr--full-ui.plyr--video .plyr__control--overlaid {
|
||||
display: block;
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Video range inputs
|
||||
.plyr--full-ui.plyr--video input[type='range'] {
|
||||
&::-webkit-slider-runnable-track {
|
||||
background-color: $plyr-video-range-track-bg;
|
||||
&::-webkit-slider-runnable-track {
|
||||
background-color: $plyr-video-range-track-background;
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
background-color: $plyr-video-range-track-background;
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
background-color: $plyr-video-range-track-background;
|
||||
}
|
||||
|
||||
// Pressed styles
|
||||
&:active {
|
||||
&::-webkit-slider-thumb {
|
||||
@include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
|
||||
}
|
||||
|
||||
&::-moz-range-track {
|
||||
background-color: $plyr-video-range-track-bg;
|
||||
&::-moz-range-thumb {
|
||||
@include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
|
||||
}
|
||||
|
||||
&::-ms-track {
|
||||
background-color: $plyr-video-range-track-bg;
|
||||
}
|
||||
|
||||
// Pressed styles
|
||||
&:active {
|
||||
&::-webkit-slider-thumb {
|
||||
@include plyr-range-thumb-active();
|
||||
}
|
||||
|
||||
&::-moz-range-thumb {
|
||||
@include plyr-range-thumb-active();
|
||||
}
|
||||
|
||||
&::-ms-thumb {
|
||||
@include plyr-range-thumb-active();
|
||||
}
|
||||
&::-ms-thumb {
|
||||
@include plyr-range-thumb-active($plyr-video-range-thumb-active-shadow-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Progress
|
||||
.plyr--video .plyr__progress__buffer {
|
||||
color: $plyr-video-progress-buffered-bg;
|
||||
color: $plyr-video-progress-buffered-background;
|
||||
}
|
||||
|
||||
@ -3,5 +3,5 @@
|
||||
// --------------------------------------------------------------
|
||||
|
||||
.plyr--no-transition {
|
||||
transition: none !important;
|
||||
transition: none !important;
|
||||
}
|
||||
|
||||
@ -4,25 +4,25 @@
|
||||
|
||||
// Screen reader only elements
|
||||
.plyr__sr-only {
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
overflow: hidden;
|
||||
clip: rect(1px, 1px, 1px, 1px);
|
||||
overflow: hidden;
|
||||
|
||||
// !important is not always needed
|
||||
@if $plyr-sr-only-important {
|
||||
border: 0 !important;
|
||||
height: 1px !important;
|
||||
padding: 0 !important;
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
} @else {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
// !important is not always needed
|
||||
@if $plyr-sr-only-important {
|
||||
border: 0 !important;
|
||||
height: 1px !important;
|
||||
padding: 0 !important;
|
||||
position: absolute !important;
|
||||
width: 1px !important;
|
||||
} @else {
|
||||
border: 0;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
}
|
||||
}
|
||||
|
||||
.plyr [hidden] {
|
||||
display: none !important;
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user