From be2e7d4c995c12f691896fccc01eeebfddf1385d Mon Sep 17 00:00:00 2001 From: Sam Date: Mon, 23 May 2016 21:19:53 +0100 Subject: Always hide standard controls (Fixes #225) --- src/scss/plyr.scss | 5 +++++ 1 file changed, 5 insertions(+) (limited to 'src/scss') diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss index c5e0bfaa..00fb4320 100644 --- a/src/scss/plyr.scss +++ b/src/scss/plyr.scss @@ -245,6 +245,11 @@ // Controls // -------------------------------------------------------------- +// Hide native controls +.plyr ::-webkit-media-controls { + display: none; +} + // Playback controls .plyr__controls { display: flex; -- cgit v1.2.3 From b3299b464114dc2dd3fd102c4ceb22ce0a1f8349 Mon Sep 17 00:00:00 2001 From: Sam Date: Mon, 23 May 2016 22:29:20 +0100 Subject: Fix for Tooltips overflowing (fixes #230) --- src/scss/plyr.scss | 34 ++++++++++++++++++++++++++++++++++ src/scss/variables.scss | 8 +++++--- 2 files changed, 39 insertions(+), 3 deletions(-) (limited to 'src/scss') diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss index 00fb4320..d886919f 100644 --- a/src/scss/plyr.scss +++ b/src/scss/plyr.scss @@ -484,6 +484,40 @@ z-index: 3; } +// First tooltip +.plyr__controls button:first-child .plyr__tooltip { + $tooltip-arrow-offset: ; + left: 0; + transform: translate(0, 10px) scale(.8); + transform-origin: 0 100%; + + &::before { + left: ($plyr-control-icon-size / 2) + $plyr-control-padding; + } +} + +// Last tooltip +.plyr__controls button:last-child .plyr__tooltip { + right: 0; + transform: translate(0, 10px) scale(.8); + transform-origin: 100% 100%; + + &::before { + left: auto; + right: ($plyr-control-icon-size / 2) + $plyr-control-padding; + transform: translateX(50%); + } +} + +.plyr__controls button:first-child, +.plyr__controls button:last-child { + &:hover .plyr__tooltip, + &.tab-focus:focus .plyr__tooltip, + .plyr__tooltip--visible { + transform: translate(0, 0) scale(1); + } +} + // Playback progress // -------------------------------------------------------------- // element diff --git a/src/scss/variables.scss b/src/scss/variables.scss index 5aa0d629..5e0a16b3 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -17,14 +17,16 @@ $plyr-font-size-small: 14px !default; $plyr-font-size-base: 16px !default; // Captions -$plyr-captions-bg: transparentize(#000, .3) !default; -$plyr-captions-color: #fff !default; +$plyr-captions-bg: transparentize(#000, .3) !default; +$plyr-captions-color: #fff !default; $plyr-font-size-captions-base: $plyr-font-size-base !default; $plyr-font-size-captions-medium: ceil($plyr-font-size-base * 1.5) !default; $plyr-font-size-captions-large: ($plyr-font-size-base * 2) !default; // Controls +$plyr-control-icon-size: 18px !default; $plyr-control-spacing: 10px !default; +$plyr-control-padding: ($plyr-control-spacing * .7) !default; $plyr-video-controls-bg: #000 !default; $plyr-video-control-color: #fff !default; $plyr-video-control-color-hover: #fff !default; @@ -63,7 +65,7 @@ $plyr-range-thumb-active-bg: $plyr-video-control-bg-hover !default; $plyr-range-thumb-active-scale: 1.25 !default; $plyr-video-range-track-bg: $plyr-video-progress-buffered-bg !default; $plyr-audio-range-track-bg: $plyr-audio-progress-buffered-bg !default; -$plyr-range-selected-bg: $plyr-color-main !default; +$plyr-range-selected-bg: $plyr-color-main !default; // Breakpoints $plyr-bp-screen-sm: 480px !default; -- cgit v1.2.3 From 1c9f7901bcaab851d48c1f1971b087877f1247dd Mon Sep 17 00:00:00 2001 From: Tzvi <5633910@gmail.com> Date: Thu, 26 May 2016 03:32:22 +0300 Subject: FIx Plyr to work with RTL systems (scss) --- src/scss/plyr.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'src/scss') diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss index d886919f..011a8281 100644 --- a/src/scss/plyr.scss +++ b/src/scss/plyr.scss @@ -20,6 +20,7 @@ max-width: 100%; min-width: 200px; font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; + direction: ltr; @if $plyr-border-box == true { // border-box everything -- cgit v1.2.3 From 7a9eac093ae5fbf21851f864e294534a8ec8e04d Mon Sep 17 00:00:00 2001 From: cytec Date: Thu, 2 Jun 2016 11:40:09 +0200 Subject: use $plyr-control-icon-size in sass file --- src/scss/plyr.scss | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) (limited to 'src/scss') diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss index 011a8281..b2439b76 100644 --- a/src/scss/plyr.scss +++ b/src/scss/plyr.scss @@ -294,8 +294,8 @@ color: inherit; svg { - width: 18px; - height: 18px; + width: $plyr-control-icon-size; + height: $plyr-control-icon-size; display: block; fill: currentColor; } -- cgit v1.2.3 From 70646ca90798823932573f209eb30f6a8e82694f Mon Sep 17 00:00:00 2001 From: Sam Date: Tue, 7 Jun 2016 12:34:36 +0100 Subject: See changelog (fixes #265, #253, #257) --- src/scss/plyr.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'src/scss') diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss index 011a8281..9fbb3803 100644 --- a/src/scss/plyr.scss +++ b/src/scss/plyr.scss @@ -487,7 +487,6 @@ // First tooltip .plyr__controls button:first-child .plyr__tooltip { - $tooltip-arrow-offset: ; left: 0; transform: translate(0, 10px) scale(.8); transform-origin: 0 100%; -- cgit v1.2.3 From cb591dac0c0b68d6d501d68e3ec952dcceb71bf0 Mon Sep 17 00:00:00 2001 From: Joel Mbugua Date: Tue, 21 Jun 2016 21:59:00 +0300 Subject: Make the player button clickable on small videos If you set the plyr video to width of 300px, the plyr__controls overlays the play centered play button such that you can't click on the play button. Adding a z-index on the plyr .plyr__play-large fixes that. --- src/scss/plyr.scss | 1 + 1 file changed, 1 insertion(+) (limited to 'src/scss') diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss index 5c75c6fb..a06376d6 100644 --- a/src/scss/plyr.scss +++ b/src/scss/plyr.scss @@ -397,6 +397,7 @@ } .plyr .plyr__play-large { display: inline-block; + z-index: 1; } .plyr--audio .plyr__play-large { display: none; -- cgit v1.2.3 From 2fdcc18356510ab22998052eb9258238cd0de022 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 25 Jun 2016 22:33:23 +1000 Subject: Hide Shadow DOM elements --- src/scss/plyr.scss | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) (limited to 'src/scss') diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss index c5e0bfaa..812f7cef 100644 --- a/src/scss/plyr.scss +++ b/src/scss/plyr.scss @@ -202,8 +202,8 @@ // Captions // -------------------------------------------------------------- -// Hide default captions -.plyr video::-webkit-media-text-track-container { +// Hide default captions (can't find -moz -ms prefixes) +.plyr ::-webkit-media-text-track-container { display: none; } .plyr__captions { @@ -245,6 +245,11 @@ // Controls // -------------------------------------------------------------- +// Hide default controls (can't find -moz -ms prefixes) +.plyr ::-webkit-media-controls, +.plyr ::-webkit-media-controls-enclosure { + display: none; +} // Playback controls .plyr__controls { display: flex; -- cgit v1.2.3 From 9b75436380bade755a7d54347dd85885b8230dd5 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 25 Jun 2016 23:39:00 +1000 Subject: v1.8.3 - Disabled iPad support for YouTube and Vimeo due to iOS limitations with iFrame playback - Fixed IE11 icon loading (fixes #269) - Updated screenshot (fixes #281) - Added WordPress plugin (fixes #239) - Added Neos plugin - Added HLS, Shaka and dash.js examples (see #235 for more) - Improvements for controls hiding and showing on touch devices --- src/scss/plyr.scss | 15 +++++++-------- 1 file changed, 7 insertions(+), 8 deletions(-) (limited to 'src/scss') diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss index 5abe18c0..3f8f2e9e 100644 --- a/src/scss/plyr.scss +++ b/src/scss/plyr.scss @@ -19,6 +19,7 @@ position: relative; max-width: 100%; min-width: 200px; + overflow: hidden; font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; direction: ltr; @@ -203,8 +204,8 @@ // Captions // -------------------------------------------------------------- -// Hide default captions (can't find -moz -ms prefixes) -.plyr ::-webkit-media-text-track-container { +// Hide default captions +.plyr video::-webkit-media-text-track-container { display: none; } .plyr__captions { @@ -246,9 +247,8 @@ // Controls // -------------------------------------------------------------- -// Hide default controls (can't find -moz -ms prefixes) -.plyr ::-webkit-media-controls, -.plyr ::-webkit-media-controls-enclosure { +// Hide native controls +.plyr ::-webkit-media-controls { display: none; } @@ -256,12 +256,9 @@ .plyr__controls { display: flex; align-items: center; - line-height: 1; text-align: center; - transition: opacity .3s ease; - // Spacing > button, .plyr__progress, @@ -325,6 +322,7 @@ // Hide controls .plyr--hide-controls .plyr__controls { opacity: 0; + pointer-events: none; } // Video controls @@ -338,6 +336,7 @@ border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; color: $plyr-video-control-color; + transition: opacity .3s ease; button { // Hover and tab focus -- cgit v1.2.3 From c61fad51c1aeb947616aefd626cbddfd102c2e0c Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 25 Jun 2016 23:46:37 +1000 Subject: Fix for z-index on large play button --- src/scss/plyr.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/scss') diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss index c177364a..0974ebee 100644 --- a/src/scss/plyr.scss +++ b/src/scss/plyr.scss @@ -371,6 +371,7 @@ .plyr__play-large { display: none; position: absolute; + z-index: 1; top: 50%; left: 50%; transform: translate(-50%, -50%); @@ -397,7 +398,6 @@ } .plyr .plyr__play-large { display: inline-block; - z-index: 1; } .plyr--audio .plyr__play-large { display: none; -- cgit v1.2.3 From 7e7508ca821b930fc132370d6d490e9c16d983a4 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 26 Jun 2016 08:34:36 +1000 Subject: Fixed overflow issues (fixes #286) --- src/scss/plyr.scss | 3 +-- src/scss/variables.scss | 1 + 2 files changed, 2 insertions(+), 2 deletions(-) (limited to 'src/scss') diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss index 0974ebee..afc679f2 100644 --- a/src/scss/plyr.scss +++ b/src/scss/plyr.scss @@ -19,8 +19,7 @@ position: relative; max-width: 100%; min-width: 200px; - overflow: hidden; - font-family: Avenir, "Avenir Next", "Helvetica Neue", "Segoe UI", Helvetica, Arial, sans-serif; + font-family: $plyr-font-family; direction: ltr; @if $plyr-border-box == true { diff --git a/src/scss/variables.scss b/src/scss/variables.scss index 5e0a16b3..9eafbe44 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -13,6 +13,7 @@ $plyr-sr-only-important: true !default; $plyr-color-main: #3498db !default; // Font sizes +$plyr-font-family: 'San Francisco', -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; $plyr-font-size-small: 14px !default; $plyr-font-size-base: 16px !default; -- cgit v1.2.3 From 7f7ecf852e2cc1e98ccb747c3a07206d7668520a Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 26 Jun 2016 09:07:42 +1000 Subject: Line height fix --- src/scss/plyr.scss | 1 - 1 file changed, 1 deletion(-) (limited to 'src/scss') diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss index afc679f2..7fb96cd6 100644 --- a/src/scss/plyr.scss +++ b/src/scss/plyr.scss @@ -662,7 +662,6 @@ display: inline-block; vertical-align: middle; font-size: $plyr-font-size-small; - line-height: .95; } // Media duration hidden on small screens .plyr__time + .plyr__time { -- cgit v1.2.3 From bf9de231d8046cd6a5ec90e22bf8585019cbd1d0 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sun, 10 Jul 2016 20:45:54 +1000 Subject: Styling minor tweaks --- src/scss/plyr.scss | 3 +-- src/scss/variables.scss | 1 - 2 files changed, 1 insertion(+), 3 deletions(-) (limited to 'src/scss') diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss index 7fb96cd6..2a119071 100644 --- a/src/scss/plyr.scss +++ b/src/scss/plyr.scss @@ -353,7 +353,6 @@ border-radius: inherit; background: $plyr-audio-controls-bg; border: $plyr-audio-controls-border; - box-shadow: $plyr-audio-controls-box-shadow; color: $plyr-audio-control-color; button { @@ -378,7 +377,7 @@ background: $plyr-video-control-bg-hover; border: 4px solid currentColor; border-radius: 100%; - box-shadow: 0 1px 1px transparentize($plyr-video-controls-bg, .85); + box-shadow: 0 1px 1px transparentize(#000, .85); color: $plyr-video-control-color; transition: all .3s ease; diff --git a/src/scss/variables.scss b/src/scss/variables.scss index 9eafbe44..81a87d88 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -34,7 +34,6 @@ $plyr-video-control-color-hover: #fff !default; $plyr-video-control-bg-hover: $plyr-color-main !default; $plyr-audio-controls-bg: #fff !default; $plyr-audio-controls-border: 1px solid #dbe3e8 !default; -$plyr-audio-controls-box-shadow: 0 1px 1px transparentize(#000, .95) !default; $plyr-audio-control-color: #565D64 !default; $plyr-audio-control-color-hover: #fff !default; $plyr-audio-control-bg-hover: $plyr-color-main; -- cgit v1.2.3 From a6f57fc034216f3f458c36d886d1f7a17119d235 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Thu, 21 Jul 2016 21:15:44 +1000 Subject: Fix for multiline captions (Fixes #314) --- src/scss/plyr.scss | 2 ++ 1 file changed, 2 insertions(+) (limited to 'src/scss') diff --git a/src/scss/plyr.scss b/src/scss/plyr.scss index 2a119071..b100e761 100644 --- a/src/scss/plyr.scss +++ b/src/scss/plyr.scss @@ -225,6 +225,8 @@ border-radius: 2px; padding: floor($plyr-control-spacing / 3) $plyr-control-spacing; background: $plyr-captions-bg; + box-decoration-break: clone; + line-height: 150%; } span:empty { display: none; -- cgit v1.2.3 From f18d9589eb4722db53763e25b8b8023d7ebc0e18 Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Sat, 6 Aug 2016 11:08:28 +1000 Subject: Font stack SASS fix (Fixes #328) --- src/scss/variables.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'src/scss') diff --git a/src/scss/variables.scss b/src/scss/variables.scss index 81a87d88..7606c8d9 100644 --- a/src/scss/variables.scss +++ b/src/scss/variables.scss @@ -13,7 +13,7 @@ $plyr-sr-only-important: true !default; $plyr-color-main: #3498db !default; // Font sizes -$plyr-font-family: 'San Francisco', -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif; +$plyr-font-family: 'San Francisco', -apple-system, BlinkMacSystemFont, '.SFNSText-Regular', Avenir, 'Avenir Next', 'Helvetica Neue', 'Segoe UI', Helvetica, Arial, sans-serif !default; $plyr-font-size-small: 14px !default; $plyr-font-size-base: 16px !default; -- cgit v1.2.3