From ffd864ed39340c081adb9e4a45b3c9cfe4c139e3 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Mon, 18 Jun 2018 21:39:47 +1000
Subject: Work on controls

---
 src/sass/components/menus.scss | 24 ++++++++++++++----------
 1 file changed, 14 insertions(+), 10 deletions(-)

(limited to 'src/sass/components')

diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss
index 3ad4039a..b8dbf5e7 100644
--- a/src/sass/components/menus.scss
+++ b/src/sass/components/menus.scss
@@ -54,18 +54,16 @@
             width: 0;
         }
 
-        ul {
-            list-style: none;
-            margin: 0;
-            overflow: hidden;
+        [role='menu'] {
             padding: $plyr-control-padding;
+        }
 
-            li {
-                margin-top: 2px;
+        [role='menuitem'],
+        [role='menuitemradio'] {
+            margin-top: 2px;
 
-                &:first-child {
-                    margin-top: 0;
-                }
+            &:first-child {
+                margin-top: 0;
             }
         }
 
@@ -75,10 +73,16 @@
             color: $plyr-menu-color;
             display: flex;
             font-size: $plyr-font-size-menu;
-            padding: ceil($plyr-control-padding / 2) ($plyr-control-padding * 2);
+            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: '';
-- 
cgit v1.2.3


From 7b9ef7d757811cb7c855856ef091061d315b13c4 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Mon, 18 Jun 2018 23:13:40 +1000
Subject: More work on menus

---
 src/sass/components/menus.scss | 53 +++++++++++++++++++++---------------------
 1 file changed, 26 insertions(+), 27 deletions(-)

(limited to 'src/sass/components')

diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss
index b8dbf5e7..35bfdeaa 100644
--- a/src/sass/components/menus.scss
+++ b/src/sass/components/menus.scss
@@ -139,50 +139,49 @@
             }
         }
 
-        label.plyr__control {
+        .plyr__control[role='menuitemradio'] {
             padding-left: $plyr-control-padding;
 
-            input[type='radio'] + span {
-                background: rgba(#000, 0.1);
+            &::before,
+            &::after {
                 border-radius: 100%;
+            }
+
+            &::before {
+                background: rgba(#000, 0.1);
+                content: '';
                 display: block;
                 flex-shrink: 0;
                 height: 16px;
                 margin-right: $plyr-control-spacing;
-                position: relative;
                 transition: all 0.3s ease;
                 width: 16px;
-
-                &::after {
-                    background: #fff;
-                    border-radius: 100%;
-                    content: '';
-                    height: 6px;
-                    left: 5px;
-                    opacity: 0;
-                    position: absolute;
-                    top: 5px;
-                    transform: scale(0);
-                    transition: transform 0.3s ease, opacity 0.3s ease;
-                    width: 6px;
-                }
             }
 
-            input[type='radio']:checked + span {
-                background: $plyr-color-main;
+            &::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: scale(1);
+                    transform: translateY(-50%) scale(1);
                 }
             }
 
-            input[type='radio']:focus + span {
-                @include plyr-tab-focus();
-            }
-
-            &.plyr__tab-focus input[type='radio'] + span,
-            &:hover input[type='radio'] + span {
+            &.plyr__tab-focus::before,
+            &:hover::before {
                 background: rgba(#000, 0.1);
             }
         }
-- 
cgit v1.2.3


From 1f1d74ba50f2ac4113948a3b92a0b55f05b735c2 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Thu, 21 Jun 2018 09:01:16 +1000
Subject: Work on menus

---
 src/sass/components/menus.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

(limited to 'src/sass/components')

diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss
index 35bfdeaa..be354e46 100644
--- a/src/sass/components/menus.scss
+++ b/src/sass/components/menus.scss
@@ -191,7 +191,7 @@
             align-items: center;
             display: flex;
             margin-left: auto;
-            margin-right: -$plyr-control-padding;
+            margin-right: -($plyr-control-padding - 2);
             overflow: hidden;
             padding-left: ceil($plyr-control-padding * 3.5);
             pointer-events: none;
-- 
cgit v1.2.3


From 3a8332bdb30e1f64047a0f8a3e60647f0473301b Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Sun, 29 Jul 2018 12:32:26 +1000
Subject: Fix for webkit redrawing issue

---
 src/sass/components/sliders.scss | 18 ++++++++++++++----
 1 file changed, 14 insertions(+), 4 deletions(-)

(limited to 'src/sass/components')

diff --git a/src/sass/components/sliders.scss b/src/sass/components/sliders.scss
index b9264b05..ee64271b 100644
--- a/src/sass/components/sliders.scss
+++ b/src/sass/components/sliders.scss
@@ -19,7 +19,11 @@
 
     &::-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 {
@@ -140,15 +144,21 @@
     // Pressed styles
     &:active {
         &::-webkit-slider-thumb {
-            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+            @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);
+            @include plyr-range-thumb-active(
+                $plyr-audio-range-thumb-shadow-color
+            );
         }
 
         &::-ms-thumb {
-            @include plyr-range-thumb-active($plyr-audio-range-thumb-shadow-color);
+            @include plyr-range-thumb-active(
+                $plyr-audio-range-thumb-shadow-color
+            );
         }
     }
 }
-- 
cgit v1.2.3


From 599b33e55fb4c0aec78cd0895bcd13f3fed12ad2 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Mon, 30 Jul 2018 01:13:12 +1000
Subject: Click to play fix, poster fix, iOS controls fixes

---
 src/sass/components/poster.scss   | 7 +++----
 src/sass/components/progress.scss | 1 -
 2 files changed, 3 insertions(+), 5 deletions(-)

(limited to 'src/sass/components')

diff --git a/src/sass/components/poster.scss b/src/sass/components/poster.scss
index 9bf7398d..15e87257 100644
--- a/src/sass/components/poster.scss
+++ b/src/sass/components/poster.scss
@@ -7,17 +7,16 @@
     background-position: 50% 50%;
     background-repeat: no-repeat;
     background-size: contain;
+    display: none;
     height: 100%;
     left: 0;
-    opacity: 0;
+    pointer-events: none;
     position: absolute;
     top: 0;
-    transition: opacity 0.3s ease;
     width: 100%;
     z-index: 1;
 }
 
 .plyr--stopped.plyr__poster-enabled .plyr__poster {
-    opacity: 1;
-    pointer-events: none;
+    display: block;
 }
diff --git a/src/sass/components/progress.scss b/src/sass/components/progress.scss
index eddd32ab..16992808 100644
--- a/src/sass/components/progress.scss
+++ b/src/sass/components/progress.scss
@@ -3,7 +3,6 @@
 // --------------------------------------------------------------
 
 .plyr__progress {
-    display: flex;
     flex: 1;
     left: $plyr-range-thumb-height / 2;
     margin-right: $plyr-range-thumb-height;
-- 
cgit v1.2.3


From 9488de30e5ec5363a9fa3298c846a5ba100e4dbb Mon Sep 17 00:00:00 2001
From: Albin Larsson <mail@albinlarsson.com>
Date: Tue, 31 Jul 2018 16:17:55 +0200
Subject: Fix #1137: Improve captions positioning consistency

---
 src/sass/components/captions.scss |  7 ++++---
 src/sass/components/controls.scss | 13 +++++--------
 2 files changed, 9 insertions(+), 11 deletions(-)

(limited to 'src/sass/components')

diff --git a/src/sass/components/captions.scss b/src/sass/components/captions.scss
index 8fce581a..1cfca92e 100644
--- a/src/sass/components/captions.scss
+++ b/src/sass/components/captions.scss
@@ -17,7 +17,6 @@
     padding: $plyr-control-spacing;
     position: absolute;
     text-align: center;
-    transform: translateY(-($plyr-control-spacing * 4));
     transition: transform 0.4s ease-in-out;
     width: 100%;
 
@@ -53,6 +52,8 @@
     display: block;
 }
 
-.plyr--hide-controls .plyr__captions {
-    transform: translateY(-($plyr-control-spacing * 1.5));
+// 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));
 }
+
diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss
index d06cb232..65b7554c 100644
--- a/src/sass/components/controls.scss
+++ b/src/sass/components/controls.scss
@@ -2,6 +2,11 @@
 // Controls
 // --------------------------------------------------------------
 
+// Hide empty controls
+.plyr__controls:empty {
+    display: none;
+}
+
 // Hide native controls
 .plyr--full-ui ::-webkit-media-controls {
     display: none;
@@ -109,11 +114,3 @@
 .plyr--fullscreen-enabled [data-plyr='fullscreen'] {
     display: inline-block;
 }
-
-.plyr__controls:empty {
-    display: none;
-    
-    ~ .plyr__captions {
-        transform: translateY(0);
-    }
-}
-- 
cgit v1.2.3


From 56a485bac63ebc211c3502be81caf3b7efa718ac Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Wed, 1 Aug 2018 00:37:55 +1000
Subject: Fix Firefox spacebar issue

---
 src/sass/components/control.scss  | 17 ++++++++++++-
 src/sass/components/controls.scss | 50 ++++++++++++++-------------------------
 src/sass/components/menus.scss    |  6 +++--
 3 files changed, 38 insertions(+), 35 deletions(-)

(limited to 'src/sass/components')

diff --git a/src/sass/components/control.scss b/src/sass/components/control.scss
index cfef1b3a..2b681465 100644
--- a/src/sass/components/control.scss
+++ b/src/sass/components/control.scss
@@ -41,7 +41,7 @@
     display: none;
 }
 
-// Audio styles
+// Audio control
 .plyr--audio .plyr__control {
     &.plyr__tab-focus,
     &:hover,
@@ -51,6 +51,21 @@
     }
 }
 
+// Video control
+.plyr--video .plyr__control {
+    svg {
+        filter: drop-shadow(0 1px 1px rgba(#000, 0.15));
+    }
+
+    // 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);
diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss
index d06cb232..0991a9bf 100644
--- a/src/sass/components/controls.scss
+++ b/src/sass/components/controls.scss
@@ -32,6 +32,14 @@
         margin-left: ($plyr-control-spacing / 2);
     }
 
+    &:empty {
+        display: none;
+
+        ~ .plyr__captions {
+            transform: translateY(0);
+        }
+    }
+
     @media (min-width: $plyr-bp-sm) {
         > .plyr__control,
         .plyr__progress,
@@ -48,6 +56,14 @@
     }
 }
 
+// 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(
@@ -64,32 +80,10 @@
     position: absolute;
     right: 0;
     transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out;
-    z-index: 2;
-
-    .plyr__control {
-        svg {
-            filter: drop-shadow(0 1px 1px rgba(#000, 0.15));
-        }
-
-        // Hover and tab focus
-        &.plyr__tab-focus,
-        &:hover,
-        &[aria-expanded='true'] {
-            background: $plyr-video-control-bg-hover;
-            color: $plyr-video-control-color-hover;
-        }
-    }
-}
-
-// Audio controls
-.plyr--audio .plyr__controls {
-    background: $plyr-audio-controls-bg;
-    border-radius: inherit;
-    color: $plyr-audio-control-color;
-    padding: $plyr-control-spacing;
+    z-index: 3;
 }
 
-// Hide controls
+// Hide video controls
 .plyr--video.plyr--hide-controls .plyr__controls {
     opacity: 0;
     pointer-events: none;
@@ -109,11 +103,3 @@
 .plyr--fullscreen-enabled [data-plyr='fullscreen'] {
     display: inline-block;
 }
-
-.plyr__controls:empty {
-    display: none;
-    
-    ~ .plyr__captions {
-        transform: translateY(0);
-    }
-}
diff --git a/src/sass/components/menus.scss b/src/sass/components/menus.scss
index be354e46..b8c85284 100644
--- a/src/sass/components/menus.scss
+++ b/src/sass/components/menus.scss
@@ -39,7 +39,8 @@
 
         > 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
@@ -73,7 +74,8 @@
             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%;
 
-- 
cgit v1.2.3


From 7f4b74e2d43ed95a695f760f48e5b8e0792f9528 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Thu, 2 Aug 2018 00:47:03 +1000
Subject: Fix for hover over iframed players not showing controls

---
 src/sass/components/poster.scss | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'src/sass/components')

diff --git a/src/sass/components/poster.scss b/src/sass/components/poster.scss
index 15e87257..9b239d4f 100644
--- a/src/sass/components/poster.scss
+++ b/src/sass/components/poster.scss
@@ -7,16 +7,16 @@
     background-position: 50% 50%;
     background-repeat: no-repeat;
     background-size: contain;
-    display: none;
     height: 100%;
     left: 0;
-    pointer-events: none;
+    opacity: 0;
     position: absolute;
     top: 0;
+    transition: opacity 0.2s ease;
     width: 100%;
     z-index: 1;
 }
 
 .plyr--stopped.plyr__poster-enabled .plyr__poster {
-    display: block;
+    opacity: 1;
 }
-- 
cgit v1.2.3


From 6953a12e2af93cd4c7c45ce89ac9052da4725eac Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Mon, 13 Aug 2018 23:01:56 +1000
Subject: Set background color for video

---
 src/sass/components/video.scss | 1 +
 1 file changed, 1 insertion(+)

(limited to 'src/sass/components')

diff --git a/src/sass/components/video.scss b/src/sass/components/video.scss
index 3caf866d..c3dc4152 100644
--- a/src/sass/components/video.scss
+++ b/src/sass/components/video.scss
@@ -3,6 +3,7 @@
 // --------------------------------------------------------------
 
 .plyr--video {
+    background: #000;
     overflow: hidden;
 
     // Menu open
-- 
cgit v1.2.3


From 4e1df8677ff1d4c0e02ec78d4d23d161b80d468c Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Mon, 13 Aug 2018 23:02:14 +1000
Subject: Fix tooltip alignment

---
 src/sass/components/tooltips.scss | 2 ++
 1 file changed, 2 insertions(+)

(limited to 'src/sass/components')

diff --git a/src/sass/components/tooltips.scss b/src/sass/components/tooltips.scss
index 537e2444..80603bb5 100644
--- a/src/sass/components/tooltips.scss
+++ b/src/sass/components/tooltips.scss
@@ -10,6 +10,7 @@
     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;
@@ -64,6 +65,7 @@
 
 // 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%;
-- 
cgit v1.2.3


From 468b20d227f7b6c17aab90364e3d9699bae0ac9d Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Mon, 13 Aug 2018 23:42:12 +1000
Subject: Moved mute button inside plyr__volume

---
 src/sass/components/volume.scss | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

(limited to 'src/sass/components')

diff --git a/src/sass/components/volume.scss b/src/sass/components/volume.scss
index d22b7cba..82a6dd36 100644
--- a/src/sass/components/volume.scss
+++ b/src/sass/components/volume.scss
@@ -3,20 +3,23 @@
 // --------------------------------------------------------------
 
 .plyr__volume {
+    align-items: center;
+    display: flex;
     flex: 1;
     position: relative;
 
     input[type='range'] {
+        margin-left: ($plyr-control-spacing / 2);
         position: relative;
         z-index: 2;
     }
 
     @media (min-width: $plyr-bp-sm) {
-        max-width: 50px;
+        max-width: 90px;
     }
 
     @media (min-width: $plyr-bp-md) {
-        max-width: 80px;
+        max-width: 110px;
     }
 }
 
-- 
cgit v1.2.3


From 1aeef8128895a97ba7f2f4e8f289efae4db5e9a9 Mon Sep 17 00:00:00 2001
From: Sam Potts <sam@potts.es>
Date: Mon, 13 Aug 2018 23:43:22 +1000
Subject: Controls spacing improvements

---
 src/sass/components/controls.scss | 36 +++++++++++++++++++-----------------
 1 file changed, 19 insertions(+), 17 deletions(-)

(limited to 'src/sass/components')

diff --git a/src/sass/components/controls.scss b/src/sass/components/controls.scss
index bde8600b..41426e8b 100644
--- a/src/sass/components/controls.scss
+++ b/src/sass/components/controls.scss
@@ -18,18 +18,22 @@
     > .plyr__control,
     .plyr__progress,
     .plyr__time,
-    .plyr__menu {
+    .plyr__menu,
+    .plyr__volume {
         margin-left: ($plyr-control-spacing / 2);
+    }
 
-        &:first-child,
-        &:first-child + [data-plyr='pause'] {
-            margin-left: 0;
-            margin-right: auto;
-        }
+    .plyr__menu + .plyr__control,
+    > .plyr__control + .plyr__menu,
+    > .plyr__control + .plyr__control,
+    .plyr__progress + .plyr__control {
+        margin-left: floor($plyr-control-spacing / 4);
     }
 
-    .plyr__volume {
-        margin-left: ($plyr-control-spacing / 2);
+    > .plyr__control:first-child,
+    > .plyr__control:first-child + [data-plyr='pause'] {
+        margin-left: 0;
+        margin-right: auto;
     }
 
     // Hide empty controls
@@ -39,17 +43,12 @@
 
     @media (min-width: $plyr-bp-sm) {
         > .plyr__control,
+        .plyr__menu,
         .plyr__progress,
         .plyr__time,
-        .plyr__menu {
+        .plyr__volume {
             margin-left: $plyr-control-spacing;
         }
-
-        > .plyr__control + .plyr__control,
-        .plyr__menu + .plyr__control,
-        > .plyr__control + .plyr__menu {
-            margin-left: ($plyr-control-spacing / 2);
-        }
     }
 }
 
@@ -72,12 +71,15 @@
     bottom: 0;
     color: $plyr-video-control-color;
     left: 0;
-    padding: ($plyr-control-spacing * 3.5) $plyr-control-spacing
-        $plyr-control-spacing;
+    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
-- 
cgit v1.2.3