diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/js/config/defaults.js | 5 | ||||
-rw-r--r-- | src/js/controls.js | 11 | ||||
-rw-r--r-- | src/js/html5.js | 6 | ||||
-rw-r--r-- | src/js/media.js | 2 | ||||
-rw-r--r-- | src/js/plugins/preview-thumbnails.js | 24 | ||||
-rw-r--r-- | src/js/plugins/vimeo.js | 32 | ||||
-rw-r--r-- | src/js/plugins/youtube.js | 4 | ||||
-rw-r--r-- | src/js/source.js | 18 | ||||
-rw-r--r-- | src/js/utils/arrays.js | 8 | ||||
-rw-r--r-- | src/sass/base.scss | 1 | ||||
-rw-r--r-- | src/sass/components/audio.scss | 7 | ||||
-rw-r--r-- | src/sass/components/control.scss | 56 | ||||
-rw-r--r-- | src/sass/components/controls.scss | 34 | ||||
-rw-r--r-- | src/sass/components/menus.scss | 6 | ||||
-rw-r--r-- | src/sass/components/sliders.scss | 72 | ||||
-rw-r--r-- | src/sass/components/times.scss | 4 | ||||
-rw-r--r-- | src/sass/components/video.scss | 51 | ||||
-rw-r--r-- | src/sass/plyr.scss | 5 | ||||
-rw-r--r-- | src/sass/settings/menus.scss | 2 | ||||
-rw-r--r-- | src/sass/types/audio.scss | 56 | ||||
-rw-r--r-- | src/sass/types/video.scss | 157 |
21 files changed, 294 insertions, 267 deletions
diff --git a/src/js/config/defaults.js b/src/js/config/defaults.js index bf0f8c42..be289e6a 100644 --- a/src/js/config/defaults.js +++ b/src/js/config/defaults.js @@ -419,6 +419,11 @@ const defaults = { 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 }, // YouTube plugin diff --git a/src/js/controls.js b/src/js/controls.js index 1cce51f6..66ec7139 100644 --- a/src/js/controls.js +++ b/src/js/controls.js @@ -9,7 +9,7 @@ import captions from './captions'; import html5 from './html5'; import support from './support'; import { repaint, transitionEndEvent } from './utils/animation'; -import { dedupe, fillRange } from './utils/arrays'; +import { dedupe } from './utils/arrays'; import browser from './utils/browser'; import { createElement, @@ -1053,13 +1053,8 @@ const controls = { const type = 'speed'; const list = this.elements.settings.panels.speed.querySelector('[role="menu"]'); - // Determine options to display - // Vimeo and YouTube limit to 0.5x-2x - if (this.isVimeo || this.isYouTube) { - this.options.speed = fillRange(0.5, 2, 0.25).filter(s => this.config.speed.options.includes(s)); - } else { - this.options.speed = this.config.speed.options; - } + // Filter out invalid speeds + this.options.speed = this.options.speed.filter(o => o >= this.minimumSpeed && o <= this.maximumSpeed); // Toggle the pane and tab const toggle = !is.empty(this.options.speed) && this.options.speed.length > 1; diff --git a/src/js/html5.js b/src/js/html5.js index d1e82489..0591a709 100644 --- a/src/js/html5.js +++ b/src/js/html5.js @@ -42,13 +42,16 @@ const html5 = { .filter(Boolean); }, - extend() { + 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); @@ -93,7 +96,6 @@ const html5 = { if (preload !== 'none' || readyState) { // Restore time player.once('loadedmetadata', () => { - player.speed = playbackRate; player.currentTime = currentTime; diff --git a/src/js/media.js b/src/js/media.js index cd1533d0..8c08456d 100644 --- a/src/js/media.js +++ b/src/js/media.js @@ -49,7 +49,7 @@ const media = { } if (this.isHTML5) { - html5.extend.call(this); + html5.setup.call(this); } else if (this.isYouTube) { youtube.setup.call(this); } else if (this.isVimeo) { diff --git a/src/js/plugins/preview-thumbnails.js b/src/js/plugins/preview-thumbnails.js index 6cd09ef2..86eeebc8 100644 --- a/src/js/plugins/preview-thumbnails.js +++ b/src/js/plugins/preview-thumbnails.js @@ -104,7 +104,7 @@ class PreviewThumbnails { } load() { - // Togglethe regular seek tooltip + // Toggle the regular seek tooltip if (this.player.elements.display.seekTooltip) { this.player.elements.display.seekTooltip.hidden = this.enabled; } @@ -328,6 +328,15 @@ class PreviewThumbnails { this.player.elements.wrapper.appendChild(this.elements.scrubbing.container); } + destroy() { + if (this.elements.thumb.container) { + this.elements.thumb.container.remove(); + } + if (this.elements.scrubbing.container) { + this.elements.scrubbing.container.remove(); + } + } + showImageAtCurrentTime() { if (this.mouseDown) { this.setScrubbingContainerSize(); @@ -561,6 +570,11 @@ class PreviewThumbnails { return height; } + // If css is used this needs to return the css height for sprites to work (see setImageSizeAndOffset) + if (this.sizeSpecifiedInCSS) { + return this.elements.thumb.imageContainer.clientHeight; + } + return Math.floor(this.player.media.clientWidth / this.thumbAspectRatio / 4); } @@ -601,7 +615,7 @@ class PreviewThumbnails { } determineContainerAutoSizing() { - if (this.elements.thumb.imageContainer.clientHeight > 20) { + if (this.elements.thumb.imageContainer.clientHeight > 20 || this.elements.thumb.imageContainer.clientWidth > 20) { // This will prevent auto sizing in this.setThumbContainerSizeAndPos() this.sizeSpecifiedInCSS = true; } @@ -613,6 +627,12 @@ class PreviewThumbnails { const thumbWidth = Math.floor(this.thumbContainerHeight * this.thumbAspectRatio); this.elements.thumb.imageContainer.style.height = `${this.thumbContainerHeight}px`; this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`; + } else if (this.elements.thumb.imageContainer.clientHeight > 20 && this.elements.thumb.imageContainer.clientWidth < 20) { + const thumbWidth = Math.floor(this.elements.thumb.imageContainer.clientHeight * this.thumbAspectRatio); + this.elements.thumb.imageContainer.style.width = `${thumbWidth}px`; + } else if (this.elements.thumb.imageContainer.clientHeight < 20 && this.elements.thumb.imageContainer.clientWidth > 20) { + const thumbHeight = Math.floor(this.elements.thumb.imageContainer.clientWidth / this.thumbAspectRatio); + this.elements.thumb.imageContainer.style.height = `${thumbHeight}px`; } this.setThumbContainerPos(); diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 9529f2cd..fa965d8e 100644 --- a/src/js/plugins/vimeo.js +++ b/src/js/plugins/vimeo.js @@ -42,23 +42,28 @@ function assurePlaybackState(play) { const vimeo = { setup() { + const player = this; + // Add embed class for responsive - toggleClass(this.elements.wrapper, this.config.classNames.embed, true); + toggleClass(player.elements.wrapper, player.config.classNames.embed, true); + + // Set speed options from config + player.options.speed = player.config.speed.options; // Set intial ratio - setAspectRatio.call(this); + setAspectRatio.call(player); // Load the SDK if not already if (!is.object(window.Vimeo)) { - loadScript(this.config.urls.vimeo.sdk) + loadScript(player.config.urls.vimeo.sdk) .then(() => { - vimeo.ready.call(this); + vimeo.ready.call(player); }) .catch(error => { - this.debug.warn('Vimeo SDK (player.js) failed to load', error); + player.debug.warn('Vimeo SDK (player.js) failed to load', error); }); } else { - vimeo.ready.call(this); + vimeo.ready.call(player); } }, @@ -99,6 +104,11 @@ const vimeo = { 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 @@ -191,12 +201,10 @@ const vimeo = { return speed; }, set(input) { - player.embed - .setPlaybackRate(input) - .then(() => { - speed = input; - triggerEvent.call(player, player.media, 'ratechange'); - }); + player.embed.setPlaybackRate(input).then(() => { + speed = input; + triggerEvent.call(player, player.media, 'ratechange'); + }); }, }); diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index ba5d8de9..8c65b1dc 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -297,7 +297,9 @@ const youtube = { }); // Get available speeds - player.options.speed = instance.getAvailablePlaybackRates(); + 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) { diff --git a/src/js/source.js b/src/js/source.js index 0173cc9e..cb806746 100644 --- a/src/js/source.js +++ b/src/js/source.js @@ -5,6 +5,7 @@ import { providers } from './config/types'; import html5 from './html5'; import media from './media'; +import PreviewThumbnails from './plugins/preview-thumbnails'; import support from './support'; import ui from './ui'; import { createElement, insertElement, removeElement } from './utils/elements'; @@ -130,9 +131,20 @@ const source = { this.media.load(); } - // Reload thumbnails - if (this.previewThumbnails) { - this.previewThumbnails.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 diff --git a/src/js/utils/arrays.js b/src/js/utils/arrays.js index c0d69626..69ef242c 100644 --- a/src/js/utils/arrays.js +++ b/src/js/utils/arrays.js @@ -21,11 +21,3 @@ export function closest(array, value) { return array.reduce((prev, curr) => (Math.abs(curr - value) < Math.abs(prev - value) ? curr : prev)); } - -export function fillRange(start, end, step = 1) { - const len = Math.floor((end - start) / step) + 1; - - return Array(len) - .fill() - .map((_, idx) => start + idx * step); -} diff --git a/src/sass/base.scss b/src/sass/base.scss index 811c762d..05e77bb1 100644 --- a/src/sass/base.scss +++ b/src/sass/base.scss @@ -8,6 +8,7 @@ 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; diff --git a/src/sass/components/audio.scss b/src/sass/components/audio.scss deleted file mode 100644 index 285d34f9..00000000 --- a/src/sass/components/audio.scss +++ /dev/null @@ -1,7 +0,0 @@ -// -------------------------------------------------------------- -// Audio styles -// -------------------------------------------------------------- - -.plyr--audio { - display: block; -} diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss index 0022d17b..64390dbd 100644 --- a/src/sass/components/control.scss +++ b/src/sass/components/control.scss @@ -50,59 +50,3 @@ a.plyr__control { .plyr__control.plyr__control--pressed .label--not-pressed { display: none; } - -// Audio control -.plyr--audio .plyr__control { - &.plyr__tab-focus, - &:hover, - &[aria-expanded='true'] { - background: $plyr-audio-control-bg-hover; - color: $plyr-audio-control-color-hover; - } -} - -// Video control -.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; - } -} - -// 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; - - // Offset icon to make the play button look right - svg { - left: 2px; - position: relative; - } - - &:hover, - &:focus { - background: $plyr-video-control-bg-hover; - } -} - -.plyr--playing .plyr__control--overlaid { - opacity: 0; - visibility: hidden; -} - -.plyr--full-ui.plyr--video .plyr__control--overlaid { - display: block; -} diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss index cc07ef7f..50333701 100644 --- a/src/sass/components/controls.scss +++ b/src/sass/components/controls.scss @@ -49,40 +49,6 @@ } } -// Audio controls -.plyr--audio .plyr__controls { - background: $plyr-audio-controls-bg; - border-radius: inherit; - color: $plyr-audio-control-color; - padding: $plyr-control-spacing; -} - -// Video controls -.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; - - @media (min-width: $plyr-bp-sm) { - padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing; - } -} - -// Hide video controls -.plyr--video.plyr--hide-controls .plyr__controls { - opacity: 0; - pointer-events: none; - transform: translateY(100%); -} - // Some options are hidden by default .plyr [data-plyr='captions'], .plyr [data-plyr='pip'], diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss index b8c85284..be354e46 100644 --- a/src/sass/components/menus.scss +++ b/src/sass/components/menus.scss @@ -39,8 +39,7 @@ > 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); + transition: height 0.35s cubic-bezier(0.4, 0, 0.2, 1), width 0.35s cubic-bezier(0.4, 0, 0.2, 1); } // Arrow @@ -74,8 +73,7 @@ color: $plyr-menu-color; display: flex; font-size: $plyr-font-size-menu; - padding: ceil($plyr-control-padding / 2) - ceil($plyr-control-padding * 1.5); + padding: ceil($plyr-control-padding / 2) ceil($plyr-control-padding * 1.5); user-select: none; width: 100%; diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss index ee64271b..7b519fc6 100644 --- a/src/sass/components/sliders.scss +++ b/src/sass/components/sliders.scss @@ -19,11 +19,7 @@ &::-webkit-slider-runnable-track { @include plyr-range-track(); - background-image: linear-gradient( - to right, - currentColor var(--value, 0%), - transparent var(--value, 0%) - ); + background-image: linear-gradient(to right, currentColor var(--value, 0%), transparent var(--value, 0%)); } &::-webkit-slider-thumb { @@ -96,69 +92,3 @@ } } } - -// Video range inputs -.plyr--full-ui.plyr--video input[type='range'] { - &::-webkit-slider-runnable-track { - background-color: $plyr-video-range-track-bg; - } - - &::-moz-range-track { - background-color: $plyr-video-range-track-bg; - } - - &::-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(); - } - } -} - -// Audio range inputs -.plyr--full-ui.plyr--audio input[type='range'] { - &::-webkit-slider-runnable-track { - background-color: $plyr-audio-range-track-bg; - } - - &::-moz-range-track { - background-color: $plyr-audio-range-track-bg; - } - - &::-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 - ); - } - } -} diff --git a/src/sass/components/times.scss b/src/sass/components/times.scss index 240d3528..7d7a50f1 100644 --- a/src/sass/components/times.scss +++ b/src/sass/components/times.scss @@ -18,7 +18,3 @@ display: none; } } - -.plyr--video .plyr__time { - text-shadow: 0 1px 1px rgba(#000, 0.15); -} diff --git a/src/sass/components/video.scss b/src/sass/components/video.scss deleted file mode 100644 index e5f6fe87..00000000 --- a/src/sass/components/video.scss +++ /dev/null @@ -1,51 +0,0 @@ -// -------------------------------------------------------------- -// Video styles -// -------------------------------------------------------------- - -.plyr--video { - background: #000; - overflow: hidden; - - // Menu open - &.plyr--menu-open { - overflow: visible; - } -} - -.plyr__video-wrapper { - background: #000; - height: 100%; - margin: auto; - overflow: hidden; - width: 100%; -} - -// Default to 16:9 ratio but this is set by JavaScript based on config -$embed-padding: ((100 / 16) * 9); - -.plyr__video-embed, -.plyr__video-wrapper--fixed-ratio { - 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; -} - -// If the full custom UI is supported -.plyr--full-ui .plyr__video-embed { - $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); - } -} diff --git a/src/sass/plyr.scss b/src/sass/plyr.scss index 445ca1ea..cb8a3921 100644 --- a/src/sass/plyr.scss +++ b/src/sass/plyr.scss @@ -25,7 +25,6 @@ @import 'base'; -@import 'components/audio'; @import 'components/badges'; @import 'components/captions'; @import 'components/control'; @@ -35,10 +34,12 @@ @import 'components/poster'; @import 'components/times'; @import 'components/tooltips'; -@import 'components/video'; @import 'components/progress'; @import 'components/volume'; +@import 'types/audio'; +@import 'types/video'; + @import 'states/fullscreen'; @import 'plugins/ads'; diff --git a/src/sass/settings/menus.scss b/src/sass/settings/menus.scss index 420ebb03..5e232d19 100644 --- a/src/sass/settings/menus.scss +++ b/src/sass/settings/menus.scss @@ -5,6 +5,6 @@ $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: $plyr-color-gray-2 !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; diff --git a/src/sass/types/audio.scss b/src/sass/types/audio.scss new file mode 100644 index 00000000..5d779a61 --- /dev/null +++ b/src/sass/types/audio.scss @@ -0,0 +1,56 @@ +// -------------------------------------------------------------- +// Audio styles +// -------------------------------------------------------------- + +// Container +.plyr--audio { + 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; +} + +// 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; + } +} + +// Range inputs +.plyr--full-ui.plyr--audio input[type='range'] { + &::-webkit-slider-runnable-track { + background-color: $plyr-audio-range-track-bg; + } + + &::-moz-range-track { + background-color: $plyr-audio-range-track-bg; + } + + &::-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); + } + } +} diff --git a/src/sass/types/video.scss b/src/sass/types/video.scss new file mode 100644 index 00000000..cf3ee9c8 --- /dev/null +++ b/src/sass/types/video.scss @@ -0,0 +1,157 @@ +// -------------------------------------------------------------- +// Video styles +// -------------------------------------------------------------- + +// Container +.plyr--video { + background: #000; + overflow: hidden; + + &.plyr--menu-open { + overflow: visible; + } +} + +.plyr__video-wrapper { + background: #000; + height: 100%; + margin: auto; + overflow: hidden; + width: 100%; +} + +// Default to 16:9 ratio but this is set by JavaScript based on config +$embed-padding: ((100 / 16) * 9); + +.plyr__video-embed, +.plyr__video-wrapper--fixed-ratio { + 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; +} + +// If the full custom UI is supported +.plyr--full-ui .plyr__video-embed { + $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); + } +} + +// 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; + + @media (min-width: $plyr-bp-sm) { + padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing $plyr-control-spacing; + } +} + +// Hide controls +.plyr--video.plyr--hide-controls .plyr__controls { + 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; + } +} + +// 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; + + // Offset icon to make the play button look right + svg { + left: 2px; + position: relative; + } + + &:hover, + &:focus { + background: $plyr-video-control-bg-hover; + } +} + +.plyr--playing .plyr__control--overlaid { + opacity: 0; + visibility: hidden; +} + +.plyr--full-ui.plyr--video .plyr__control--overlaid { + display: block; +} + +// Video range inputs +.plyr--full-ui.plyr--video input[type='range'] { + &::-webkit-slider-runnable-track { + background-color: $plyr-video-range-track-bg; + } + + &::-moz-range-track { + background-color: $plyr-video-range-track-bg; + } + + &::-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(); + } + } +} + +.plyr--video .plyr__time { + text-shadow: 0 1px 1px rgba(#000, 0.15); +} |