diff options
Diffstat (limited to 'src')
39 files changed, 187 insertions, 139 deletions
diff --git a/src/js/captions.js b/src/js/captions.js index 98d7d613..856baccf 100644 --- a/src/js/captions.js +++ b/src/js/captions.js @@ -154,7 +154,9 @@ const captions = { } // Enable or disable captions based on track length - toggleClass(this.elements.container, this.config.classNames.captions.enabled, !is.empty(tracks)); + if (this.elements) { + toggleClass(this.elements.container, this.config.classNames.captions.enabled, !is.empty(tracks)); + } // Update available languages in list if ( diff --git a/src/js/config/defaults.js b/src/js/config/defaults.js index aa219bad..4d64d514 100644 --- a/src/js/config/defaults.js +++ b/src/js/config/defaults.js @@ -61,7 +61,7 @@ const defaults = { // Sprite (for icons) loadSprite: true, iconPrefix: 'plyr', - iconUrl: 'https://cdn.plyr.io/3.6.8/plyr.svg', + iconUrl: 'https://cdn.plyr.io/3.6.12/plyr.svg', // Blank video (used to prevent errors on source change) blankVideo: 'https://cdn.plyr.io/static/blank.mp4', @@ -398,6 +398,7 @@ const defaults = { embed: { provider: 'data-plyr-provider', id: 'data-plyr-embed-id', + hash: 'data-plyr-embed-hash', }, }, diff --git a/src/js/controls.js b/src/js/controls.js index ff20982e..9fe74272 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -38,7 +38,8 @@ const controls = { // Get icon URL getIconUrl() { const url = new URL(this.config.iconUrl, window.location); - const cors = url.host !== window.location.host || (browser.isIE && !window.svg4everybody); + const host = window.location.host ? window.location.host : window.top.location.host; + const cors = url.host !== host || (browser.isIE && !window.svg4everybody); return { url: this.config.iconUrl, diff --git a/src/js/fullscreen.js b/src/js/fullscreen.js index 20e958fc..c1feadb5 100644 --- a/src/js/fullscreen.js +++ b/src/js/fullscreen.js @@ -124,7 +124,9 @@ class Fullscreen { return hasClass(this.target, this.player.config.classNames.fullscreen.fallback); } - const element = !this.prefix ? document.fullscreenElement : document[`${this.prefix}${this.property}Element`]; + const element = !this.prefix + ? this.target.getRootNode().fullscreenElement + : this.target.getRootNode()[`${this.prefix}${this.property}Element`]; return element && element.shadowRoot ? element === this.target.getRootNode().host : element === this.target; } diff --git a/src/js/html5.js b/src/js/html5.js index ab796234..9ec808c1 100644 --- a/src/js/html5.js +++ b/src/js/html5.js @@ -73,7 +73,7 @@ const html5 = { return; } - // If we're using an an external handler... + // If we're using an external handler... if (player.config.quality.forced && is.function(player.config.quality.onChange)) { player.config.quality.onChange(input); } else { diff --git a/src/js/listeners.js b/src/js/listeners.js index c490070c..dfe118b5 100644 --- a/src/js/listeners.js +++ b/src/js/listeners.js @@ -841,7 +841,9 @@ class Listeners { .filter((c) => !c.contains(elements.container)) .forEach((child) => { this.bind(child, 'mouseenter mouseleave', (event) => { - elements.controls.hover = !player.touch && event.type === 'mouseenter'; + if (elements.controls) { + elements.controls.hover = !player.touch && event.type === 'mouseenter'; + } }); }); } diff --git a/src/js/plugins/ads.js b/src/js/plugins/ads.js index 5d9406d1..515c4b97 100644 --- a/src/js/plugins/ads.js +++ b/src/js/plugins/ads.js @@ -213,8 +213,8 @@ class Ads { request.setAdWillPlayMuted(!this.player.muted); this.loader.requestAds(request); - } catch (e) { - this.onAdError(e); + } catch (error) { + this.onAdError(error); } }; diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 10246c66..f20159f9 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -28,6 +28,21 @@ function parseId(url) { return url.match(regex) ? RegExp.$2 : url; } +// Try to extract a hash for private videos from the URL +function parseHash(url) { + /* This regex matches a hexadecimal hash if given in any of these forms: + * - [https://player.]vimeo.com/video/{id}/{hash}[?params] + * - [https://player.]vimeo.com/video/{id}?h={hash}[¶ms] + * - [https://player.]vimeo.com/video/{id}?[params]&h={hash} + * - video/{id}/{hash} + * If matched, the hash is available in the named group `hash` + */ + const regex = /^.*(?:vimeo.com\/|video\/)(?:\d+)(?:\?.*&*h=|\/)+(?<hash>[\d,a-f]+)/; + const found = url.match(regex); + + return found ? found.groups.hash : null; +} + // Set playback state and trigger change (only on actual change) function assurePlaybackState(play) { if (play && !this.embed.hasPlayed) { @@ -71,6 +86,18 @@ const vimeo = { const player = this; const config = player.config.vimeo; const { premium, referrerPolicy, ...frameParams } = config; + // Get the source URL or ID + let source = player.media.getAttribute('src'); + let hash = ''; + // Get from <div> if needed + if (is.empty(source)) { + source = player.media.getAttribute(player.config.attributes.embed.id); + // hash can also be set as attribute on the <div> + hash = player.media.getAttribute(player.config.attributes.embed.hash); + } else { + hash = parseHash(source); + } + const hashParam = hash ? { h: hash } : {}; // If the owner has a pro or premium account then we can hide controls etc if (premium) { @@ -87,17 +114,11 @@ const vimeo = { muted: player.muted, gesture: 'media', playsinline: !this.config.fullscreen.iosNative, + // hash has to be added to iframe-URL + ...hashParam, ...frameParams, }); - // 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'); diff --git a/src/js/plyr.d.ts b/src/js/plyr.d.ts index 6eb2fa88..cf45f1ae 100644 --- a/src/js/plyr.d.ts +++ b/src/js/plyr.d.ts @@ -212,6 +212,11 @@ declare class Plyr { airplay(): void; /** + * Sets the preview thubmnails for the current source. + */ + setPreviewThumbnails(source: Plyr.PreviewThumbnailsOptions): void; + + /** * Toggle the controls (video only). Takes optional truthy value to force it on/off. */ toggleControls(toggle: boolean): void; @@ -238,8 +243,10 @@ declare class Plyr { /** * Destroy lib instance + * @param {Function} callback - Callback for when destroy is complete + * @param {Boolean} soft - Whether it's a soft destroy (for source changes etc) */ - destroy(): void; + destroy(callback?: (...args: any[]) => void, soft?: boolean): void; } declare namespace Plyr { @@ -452,7 +459,7 @@ declare namespace Plyr { * Allows binding of event listeners to the controls before the default handlers. See the defaults.js for available listeners. * If your handler prevents default on the event (event.preventDefault()), the default handler will not fire. */ - listeners?: { [key: string]: (error: PlyrEvent) => void }; + listeners?: {[key: string]: (error: PlyrEvent) => void}; /** * active: Toggles if captions should be active by default. language: Sets the default language to load (if available). 'auto' uses the browser language. @@ -526,7 +533,8 @@ declare namespace Plyr { interface AdOptions { enabled: boolean; - publisherId: string; + publisherId?: string; + tagUrl?: string; } interface SpeedOptions { @@ -616,6 +624,11 @@ declare namespace Plyr { * Booleans are converted to HTML5 value-less attributes. */ tracks?: Track[]; + + /** + * Enable or disable preview thumbnails for current source + */ + previewThumbnails?: Plyr.PreviewThumbnailsOptions; } interface Source { @@ -654,7 +667,7 @@ declare namespace Plyr { } interface PlyrEvent extends CustomEvent { - readonly detail: { readonly plyr: Plyr }; + readonly detail: {readonly plyr: Plyr}; } enum YoutubeState { diff --git a/src/js/plyr.js b/src/js/plyr.js index 7cfa5386..cad45d66 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr -// plyr.js v3.6.8 +// plyr.js v3.6.12 // https://github.com/sampotts/plyr // License: The MIT License (MIT) // ========================================================================== @@ -72,7 +72,7 @@ class Plyr { (() => { try { return JSON.parse(this.media.getAttribute('data-plyr-config')); - } catch (e) { + } catch (_) { return {}; } })(), @@ -675,7 +675,9 @@ class Plyr { // Set media speed setTimeout(() => { - this.media.playbackRate = speed; + if (this.media) { + this.media.playbackRate = speed; + } }, 0); } @@ -956,6 +958,7 @@ class Plyr { */ set currentTrack(input) { captions.set.call(this, input, false); + captions.setup(); } /** @@ -1030,6 +1033,23 @@ class Plyr { } /** + * Sets the preview thubmnails for the current source + */ + setPreviewThumbnails(thumbnailSource) { + if (this.previewThumbnails && this.previewThumbnails.loaded) { + this.previewThumbnails.destroy(); + this.previewThumbnails = null; + } + + Object.assign(this.config.previewThumbnails, thumbnailSource); + + // Create new instance if it is still enabled + if (this.config.previewThumbnails.enabled) { + this.previewThumbnails = new PreviewThumbnails(this); + } + } + + /** * Trigger the airplay dialog * TODO: update player with state, support, enabled */ diff --git a/src/js/plyr.polyfilled.js b/src/js/plyr.polyfilled.js index 3a515063..686d0693 100644 --- a/src/js/plyr.polyfilled.js +++ b/src/js/plyr.polyfilled.js @@ -1,6 +1,6 @@ // ========================================================================== // Plyr Polyfilled Build -// plyr.js v3.6.8 +// plyr.js v3.6.12 // https://github.com/sampotts/plyr // License: The MIT License (MIT) // ========================================================================== diff --git a/src/js/storage.js b/src/js/storage.js index 323a6d25..6ba3b239 100644 --- a/src/js/storage.js +++ b/src/js/storage.js @@ -26,7 +26,7 @@ class Storage { window.localStorage.removeItem(test); return true; - } catch (e) { + } catch (_) { return false; } } @@ -70,7 +70,11 @@ class Storage { extend(storage, object); // Update storage - window.localStorage.setItem(this.key, JSON.stringify(storage)); + try { + window.localStorage.setItem(this.key, JSON.stringify(storage)); + } catch (_) { + // Do nothing + } }; } diff --git a/src/js/support.js b/src/js/support.js index 99900210..9b5d2aa0 100644 --- a/src/js/support.js +++ b/src/js/support.js @@ -88,7 +88,7 @@ const support = { try { return Boolean(type && this.media.canPlayType(type).replace(/no/, '')); - } catch (e) { + } catch (_) { return false; } }, diff --git a/src/js/ui.js b/src/js/ui.js index c8b19677..b674c70d 100644 --- a/src/js/ui.js +++ b/src/js/ui.js @@ -82,6 +82,9 @@ const ui = { // Reset time display controls.timeUpdate.call(this); + // Reset duration display + controls.durationUpdate.call(this); + // Update the UI ui.checkPlaying.call(this); @@ -181,13 +184,13 @@ const ui = { .call(this) // Load image .then(() => loadImage(poster)) - .catch((err) => { + .catch((error) => { // Hide poster on error unless it's been set by another call if (poster === this.poster) { ui.togglePoster.call(this, false); } // Rethrow - throw err; + throw error; }) .then(() => { // Prevent race conditions diff --git a/src/js/utils/animation.js b/src/js/utils/animation.js index b4ccf268..8cb37895 100644 --- a/src/js/utils/animation.js +++ b/src/js/utils/animation.js @@ -31,7 +31,7 @@ export function repaint(element, delay) { // eslint-disable-next-line no-param-reassign element.hidden = false; - } catch (e) { + } catch (_) { // Do nothing } }, delay); diff --git a/src/js/utils/events.js b/src/js/utils/events.js index 287129f1..d1c104ee 100644 --- a/src/js/utils/events.js +++ b/src/js/utils/events.js @@ -19,7 +19,7 @@ const supportsPassiveListeners = (() => { }); window.addEventListener('test', null, options); window.removeEventListener('test', null, options); - } catch (e) { + } catch (_) { // Do nothing } diff --git a/src/js/utils/fetch.js b/src/js/utils/fetch.js index ef695193..1d0791ea 100644 --- a/src/js/utils/fetch.js +++ b/src/js/utils/fetch.js @@ -17,7 +17,7 @@ export default function fetch(url, responseType = 'text') { if (responseType === 'text') { try { resolve(JSON.parse(request.responseText)); - } catch (e) { + } catch (_) { resolve(request.responseText); } } else { @@ -35,8 +35,8 @@ export default function fetch(url, responseType = 'text') { request.responseType = responseType; request.send(); - } catch (e) { - reject(e); + } catch (error) { + reject(error); } }); } diff --git a/src/js/utils/is.js b/src/js/utils/is.js index 28f0c1a4..38317e3f 100644 --- a/src/js/utils/is.js +++ b/src/js/utils/is.js @@ -51,7 +51,7 @@ const isUrl = (input) => { try { return !isEmpty(new URL(string).hostname); - } catch (e) { + } catch (_) { return false; } }; diff --git a/src/js/utils/load-sprite.js b/src/js/utils/load-sprite.js index 293163e5..b4a47f21 100644 --- a/src/js/utils/load-sprite.js +++ b/src/js/utils/load-sprite.js @@ -60,12 +60,16 @@ export default function loadSprite(url, id) { } if (useStorage) { - window.localStorage.setItem( - `${prefix}-${id}`, - JSON.stringify({ - content: result, - }), - ); + try { + window.localStorage.setItem( + `${prefix}-${id}`, + JSON.stringify({ + content: result, + }), + ); + } catch (_) { + // Do nothing + } } update(container, result); diff --git a/src/js/utils/urls.js b/src/js/utils/urls.js index ba264511..e0779dec 100644 --- a/src/js/utils/urls.js +++ b/src/js/utils/urls.js @@ -20,7 +20,7 @@ export function parseUrl(input, safe = true) { try { return new URL(url); - } catch (e) { + } catch (_) { return null; } } diff --git a/src/sass/base.scss b/src/sass/base.scss index 93f91bd9..794e7960 100644 --- a/src/sass/base.scss +++ b/src/sass/base.scss @@ -5,6 +5,7 @@ // Base .plyr { @include plyr-font-smoothing($plyr-font-smoothing); + align-items: center; direction: ltr; display: flex; diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss index 8671fa2a..55d02143 100644 --- a/src/sass/components/control.scss +++ b/src/sass/components/control.scss @@ -29,7 +29,7 @@ // Tab focus &.plyr__tab-focus { - @include plyr-tab-focus(); + @include plyr-tab-focus; } } diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss index 60ee774d..330c450c 100644 --- a/src/sass/components/controls.scss +++ b/src/sass/components/controls.scss @@ -56,6 +56,7 @@ .plyr [data-plyr='fullscreen'] { display: none; } + .plyr--captions-enabled [data-plyr='captions'], .plyr--pip-supported [data-plyr='pip'], .plyr--airplay-supported [data-plyr='airplay'], diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss index ce6d7e6e..c6ce6ce8 100644 --- a/src/sass/components/menus.scss +++ b/src/sass/components/menus.scss @@ -10,6 +10,7 @@ .plyr__control svg { transition: transform 0.3s ease; } + .plyr__control[aria-expanded='true'] { svg { transform: rotate(90deg); @@ -77,10 +78,7 @@ 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); + padding: calc(#{$plyr-control-padding} / 1.5) calc(#{$plyr-control-padding} * 1.5); user-select: none; width: 100%; @@ -180,6 +178,7 @@ &::before { background: $plyr-control-toggle-checked-background; } + &::after { opacity: 1; transform: translateY(-50%) scale(1); diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss index 69947003..db75bd56 100644 --- a/src/sass/components/sliders.scss +++ b/src/sass/components/sliders.scss @@ -3,10 +3,11 @@ // -------------------------------------------------------------- .plyr--full-ui input[type='range'] { - -webkit-appearance: none; /* stylelint-disable-line */ + appearance: none; 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; @@ -18,23 +19,25 @@ width: 100%; &::-webkit-slider-runnable-track { - @include plyr-range-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 */ + @include plyr-range-thumb; + + appearance: none; margin-top: calc(((#{$plyr-range-thumb-height} - #{$plyr-range-track-height}) / 2) * -1); } // Mozilla &::-moz-range-track { - @include plyr-range-track(); + @include plyr-range-track; } &::-moz-range-thumb { - @include plyr-range-thumb(); + @include plyr-range-thumb; } &::-moz-range-progress { @@ -45,22 +48,24 @@ // Microsoft &::-ms-track { - @include plyr-range-track(); + @include plyr-range-track; + color: transparent; } &::-ms-fill-upper { - @include plyr-range-track(); + @include plyr-range-track; } &::-ms-fill-lower { - @include plyr-range-track(); + @include plyr-range-track; background: currentColor; } &::-ms-thumb { - @include plyr-range-thumb(); + @include plyr-range-thumb; + // For some reason, Edge uses the -webkit margin above margin-top: 0; } @@ -70,25 +75,25 @@ } // Focus styles - &:focus { - outline: 0; - } - &::-moz-focus-outer { border: 0; } + &:focus { + outline: 0; + } + &.plyr__tab-focus { &::-webkit-slider-runnable-track { - @include plyr-tab-focus(); + @include plyr-tab-focus; } &::-moz-range-track { - @include plyr-tab-focus(); + @include plyr-tab-focus; } &::-ms-track { - @include plyr-tab-focus(); + @include plyr-tab-focus; } } } diff --git a/src/sass/components/tooltips.scss b/src/sass/components/tooltips.scss index 2d5eceaf..b7afd366 100644 --- a/src/sass/components/tooltips.scss +++ b/src/sass/components/tooltips.scss @@ -1,3 +1,4 @@ +/* stylelint-disable selector-max-compound-selectors */ // -------------------------------------------------------------- // Tooltips // -------------------------------------------------------------- diff --git a/src/sass/lib/css-vars.scss b/src/sass/lib/css-vars.scss index fb30f3a7..cb3da879 100644 --- a/src/sass/lib/css-vars.scss +++ b/src/sass/lib/css-vars.scss @@ -1,5 +1,8 @@ // Downloaded from https://github.com/malyw/css-vars (and modified) +@use 'sass:list'; +@use 'sass:map'; + // global map to be filled via variables $css-vars: (); @@ -21,36 +24,35 @@ $css-vars-use-native: false !default; /// // 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) { + @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) != '--') { + + @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); + $var-name: list.nth($args, 1); + $var-value: map.get($css-vars, $var-name); - @if ($css-vars-use-native) { + @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) { + @if not $var-value { // variable is not provided so far - @if (length($args) == 2) { - $var-value: nth($args, 2); + @if length($args) == 2 { + $var-value: list.nth($args, 2); } } @@ -70,20 +72,21 @@ $css-vars-use-native: false !default; /// @mixin css-vars($var-map: null) { // CHECK PARAMS - @if ($var-map == null) { + @if not $var-map { @error 'Map of variables is expected, instead got: null'; } - @if (type_of($var-map) != map) { + + @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) { + @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) { + @if type_of($var-value) == string { #{$var-name}: $var-value; // to prevent quotes interpolation } @else { #{$var-name}: #{$var-value}; diff --git a/src/sass/lib/functions.scss b/src/sass/lib/functions.scss index e991e2d8..d312874a 100644 --- a/src/sass/lib/functions.scss +++ b/src/sass/lib/functions.scss @@ -1,7 +1,3 @@ -// ========================================================================== -// Useful functions -// ========================================================================== - @function to-percentage($input) { @return $input * 1%; } diff --git a/src/sass/lib/mixins.scss b/src/sass/lib/mixins.scss index d1bc4b3e..0c1eab6e 100644 --- a/src/sass/lib/mixins.scss +++ b/src/sass/lib/mixins.scss @@ -5,10 +5,8 @@ // Nicer focus styles // --------------------------------------- @mixin plyr-tab-focus($color: $plyr-tab-focus-color) { - outline-color: $color; + outline: $color dotted 3px; outline-offset: 2px; - outline-style: dotted; - outline-width: 3px; } // Font smoothing diff --git a/src/sass/plugins/ads.scss b/src/sass/plugins/ads.scss index 16fb43e4..c422c695 100644 --- a/src/sass/plugins/ads.scss +++ b/src/sass/plugins/ads.scss @@ -36,7 +36,7 @@ z-index: 3; } - &::after:empty { + &:empty::after { display: none; } } @@ -47,10 +47,10 @@ display: block; height: $plyr-range-track-height; left: 0; - margin: -($plyr-range-track-height / 2) 0 0; opacity: 0.8; position: absolute; top: 50%; + transform: translateY(-50%); width: 3px; z-index: 3; // Between progress and thumb } diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 3a8ca093..39dc49d6 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -4,15 +4,14 @@ // TODO: Review use of BEM classnames // ========================================================================== @charset 'UTF-8'; - @import 'lib/css-vars'; + $css-vars-use-native: true; @import 'settings/breakpoints'; @import 'settings/colors'; @import 'settings/cosmetics'; @import 'settings/type'; - @import 'settings/badges'; @import 'settings/captions'; @import 'settings/controls'; @@ -21,13 +20,10 @@ $css-vars-use-native: true; @import 'settings/progress'; @import 'settings/sliders'; @import 'settings/tooltips'; - @import 'lib/animation'; @import 'lib/functions'; @import 'lib/mixins'; - @import 'base'; - @import 'components/badges'; @import 'components/captions'; @import 'components/control'; @@ -39,14 +35,10 @@ $css-vars-use-native: true; @import 'components/tooltips'; @import 'components/progress'; @import 'components/volume'; - @import 'types/audio'; @import 'types/video'; - @import 'states/fullscreen'; - @import 'plugins/ads'; @import 'plugins/preview-thumbnails/index'; - @import 'utils/animation'; @import 'utils/hidden'; diff --git a/src/sass/settings/captions.scss b/src/sass/settings/captions.scss index 23d944cb..156e9291 100644 --- a/src/sass/settings/captions.scss +++ b/src/sass/settings/captions.scss @@ -4,7 +4,6 @@ $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; diff --git a/src/sass/settings/colors.scss b/src/sass/settings/colors.scss index a9846b19..060564ee 100644 --- a/src/sass/settings/colors.scss +++ b/src/sass/settings/colors.scss @@ -2,17 +2,17 @@ // Colors // ========================================================================== -$plyr-color-main: var(--plyr-color-main, hsl(198, 100%, 50%)) !default; -$plyr-video-background: var(--plyr-video-background, rgba(0,0,0,1)) !default; +$plyr-color-main: var(--plyr-color-main, hsl(198deg 100% 50%)) !default; +$plyr-video-background: var(--plyr-video-background, rgb(0 0 0 / 100%)) !default; // Grayscale -$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; +$plyr-color-gray-900: hsl(216deg 15% 16%) !default; +$plyr-color-gray-800: hsl(216deg 15% 25%) !default; +$plyr-color-gray-700: hsl(216deg 15% 34%) !default; +$plyr-color-gray-600: hsl(216deg 15% 43%) !default; +$plyr-color-gray-500: hsl(216deg 15% 52%) !default; +$plyr-color-gray-400: hsl(216deg 15% 61%) !default; +$plyr-color-gray-300: hsl(216deg 15% 70%) !default; +$plyr-color-gray-200: hsl(216deg 15% 79%) !default; +$plyr-color-gray-100: hsl(216deg 15% 88%) !default; +$plyr-color-gray-50: hsl(216deg 15% 97%) !default; diff --git a/src/sass/settings/controls.scss b/src/sass/settings/controls.scss index da4d5dbe..a9862734 100644 --- a/src/sass/settings/controls.scss +++ b/src/sass/settings/controls.scss @@ -7,15 +7,13 @@ $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-control-toggle-checked-background: var( --plyr-control-toggle-checked-background, var(--plyr-color-main, $plyr-color-main) ) !default; - $plyr-video-controls-background: var( --plyr-video-controls-background, - linear-gradient(rgba(#000, 0), rgba(#000, 0.8)) + 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; @@ -23,7 +21,6 @@ $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; diff --git a/src/sass/settings/menus.scss b/src/sass/settings/menus.scss index 283a0c59..bf47837a 100644 --- a/src/sass/settings/menus.scss +++ b/src/sass/settings/menus.scss @@ -7,9 +7,7 @@ $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; diff --git a/src/sass/settings/sliders.scss b/src/sass/settings/sliders.scss index 444b43da..2f5448da 100644 --- a/src/sass/settings/sliders.scss +++ b/src/sass/settings/sliders.scss @@ -29,7 +29,6 @@ $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 diff --git a/src/sass/settings/type.scss b/src/sass/settings/type.scss index 17db54f2..3c79291c 100644 --- a/src/sass/settings/type.scss +++ b/src/sass/settings/type.scss @@ -7,14 +7,10 @@ $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: 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: var(--plyr-font-weight-regular, 400) !default; $plyr-font-weight-bold: var(--plyr-font-weight-bold, 600) !default; - $plyr-line-height: var(--plyr-line-height, 1.7) !default; - $plyr-font-smoothing: var(--plyr-font-smoothing, false) !default; diff --git a/src/sass/states/fullscreen.scss b/src/sass/states/fullscreen.scss index 4143d28e..7a5c8b83 100644 --- a/src/sass/states/fullscreen.scss +++ b/src/sass/states/fullscreen.scss @@ -3,27 +3,13 @@ // -------------------------------------------------------------- .plyr:fullscreen { - @include plyr-fullscreen-active(); -} - -/* stylelint-disable-next-line */ -.plyr:-webkit-full-screen { - @include plyr-fullscreen-active(); -} - -/* stylelint-disable-next-line */ -.plyr:-moz-full-screen { - @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(); + @include plyr-fullscreen-active; + bottom: 0; display: block; left: 0; diff --git a/src/sass/types/video.scss b/src/sass/types/video.scss index e0de7acc..747a2eb7 100644 --- a/src/sass/types/video.scss +++ b/src/sass/types/video.scss @@ -2,6 +2,8 @@ // Video styles // -------------------------------------------------------------- +@use 'sass:math'; + // Container .plyr--video { background: var(--plyr-video-background, $plyr-video-background); @@ -14,6 +16,7 @@ .plyr__video-wrapper { background: var(--plyr-video-background, $plyr-video-background); + height: 100%; margin: auto; overflow: hidden; position: relative; @@ -21,7 +24,7 @@ } // Default to 16:9 ratio but this is set by JavaScript based on config -$embed-padding: ((100 / 16) * 9); +$embed-padding: (math.div(100, 16) * 9); .plyr__video-embed, .plyr__video-wrapper--fixed-ratio { @@ -47,7 +50,8 @@ $embed-padding: ((100 / 16) * 9); // For Vimeo, if the full custom UI is supported .plyr--full-ui .plyr__video-embed > .plyr__video-embed__container { $height: 240; - $offset: to-percentage(($height - $embed-padding) / ($height / 50)); + $offset: to-percentage(math.div($height - $embed-padding, math.div($height, 50))); + padding-bottom: to-percentage($height); position: relative; transform: translateY(-$offset); |