More Edge fixes and small UI bugs

src/js/utils.js

@@ -29,22 +29,22 @@ const utils = {
             return !this.nullOrUndefined(input) && Array.isArray(input);
         },
         weakMap(input) {
-            return this.instanceof(input, WeakMap);
+            return this.instanceof(input, window.WeakMap);
         },
         nodeList(input) {
-            return this.instanceof(input, NodeList);
+            return this.instanceof(input, window.NodeList);
         },
         element(input) {
-            return this.instanceof(input, Element);
+            return this.instanceof(input, window.Element);
         },
         textNode(input) {
             return this.getConstructor(input) === Text;
         },
         event(input) {
-            return this.instanceof(input, Event);
+            return this.instanceof(input, window.Event);
         },
         cue(input) {
-            return this.instanceof(input, TextTrackCue) || this.instanceof(input, VTTCue);
+            return this.instanceof(input, window.TextTrackCue) || this.instanceof(input, window.VTTCue);
         },
         track(input) {
             return this.instanceof(input, TextTrack) || (!this.nullOrUndefined(input) && this.string(input.kind));

src/less/components/menus.less

@@ -3,6 +3,7 @@
 // --------------------------------------------------------------
 
 .plyr__menu {
+    display: flex; // Edge fix
     position: relative;
 
     // Animate the icon
@@ -11,7 +12,7 @@
     }
     .plyr__control[aria-expanded='true'] {
         svg {
-            transform: rotate(45deg);
+            transform: rotate(90deg);
         }
 
         // Hide tooltip

src/less/components/progress.less

@@ -4,7 +4,7 @@
 
 .plyr__progress {
     position: relative;
-    display: none;
+    display: flex;
     flex: 1;
 
     input[type='range'] {
@@ -19,10 +19,6 @@
     }
 }
 
-.plyr .plyr__progress {
-    display: inline-block;
-}
-
 .plyr__progress--buffer {
     position: absolute;
     left: 0;
@@ -40,6 +36,7 @@
 
     &::-webkit-progress-bar {
         background: transparent;
+        transition: width 0.2s ease;
     }
 
     &::-webkit-progress-value {
@@ -53,24 +50,12 @@
         background: currentColor;
         border-radius: 100px;
         min-width: @plyr-range-track-height;
+        transition: width 0.2s ease;
     }
 
     // Microsoft
     &::-ms-fill {
         border-radius: 100px;
-    }
-}
-
-.plyr__progress--buffer {
-    &::-webkit-progress-value {
-        transition: width 0.2s ease;
-    }
-
-    &::-moz-progress-bar {
-        transition: width 0.2s ease;
-    }
-
-    &::-ms-fill {
         transition: width 0.2s ease;
     }
 }

src/less/components/sliders.less

@@ -5,7 +5,7 @@
 // Specificity is for bootstrap compatibility
 .plyr--full-ui input[type='range'] {
     display: block;
-    height: (@plyr-range-thumb-height * @plyr-range-thumb-active-scale);
+    height: @plyr-range-thumb-active-height;
     width: 100%;
     margin: 0;
     padding: 0;
@@ -16,7 +16,7 @@
     border-radius: (@plyr-range-thumb-height * 2);
 
     // Used in JS to populate lower fill for WebKit
-    color: @plyr-range-selected-bg;
+    color: @plyr-range-fill-bg;
 
     // WebKit
     -webkit-appearance: none;

src/less/lib/mixins.less

@@ -35,7 +35,7 @@
 .plyr-range-thumb() {
     position: relative;
     height: @plyr-range-thumb-height;
-    width: @plyr-range-thumb-width;
+    width: @plyr-range-thumb-height;
     background: @plyr-range-thumb-bg;
     border: @plyr-range-thumb-border;
     border-radius: 100%;
@@ -47,7 +47,7 @@
 .plyr-range-thumb-active() {
     background: @plyr-range-thumb-active-bg;
     border-color: @plyr-range-thumb-active-border-color;
-    transform: scale(@plyr-range-thumb-active-scale);
+    transform: scale(unit(@plyr-range-thumb-active-height / @plyr-range-thumb-height));
 }
 
 // Fullscreen styles

src/less/settings.less

@@ -78,17 +78,18 @@
 
 // Range sliders
 @plyr-range-track-height: 6px;
-@plyr-range-thumb-height: ceil(@plyr-range-track-height * 2.3);
-@plyr-range-thumb-width: ceil(@plyr-range-track-height * 2.3);
+@plyr-range-thumb-height: 14px;
 @plyr-range-thumb-bg: #fff;
 @plyr-range-thumb-border: 2px solid transparent;
 @plyr-range-thumb-shadow: 0 1px 1px fade(@plyr-video-controls-bg, 15%), 0 0 0 1px fade(@plyr-color-gunmetal, 20%);
+@plyr-range-fill-bg: @plyr-color-main;
+
 @plyr-range-thumb-active-border-color: #fff;
 @plyr-range-thumb-active-bg: @plyr-video-control-bg-hover;
-@plyr-range-thumb-active-scale: 1.5;
+@plyr-range-thumb-active-height: 20px;
+
 @plyr-video-range-track-bg: @plyr-video-progress-buffered-bg;
 @plyr-audio-range-track-bg: @plyr-audio-progress-buffered-bg;
-@plyr-range-selected-bg: @plyr-color-main;
 
 // Breakpoints
 @plyr-bp-sm: 480px;