More Edge fixes and small UI bugs

.eslintrc.json

@@ -19,7 +19,18 @@
         "semi": [2, "always"],
         "eqeqeq": [2, "always"],
         "one-var": [2, "never"],
-        "comma-dangle": [2, "always-multiline"]
+        "comma-dangle": [2, "always-multiline"],
+        "no-restricted-globals": [
+            "error",
+            {
+                "name": "event",
+                "message": "Use local parameter instead."
+            },
+            {
+                "name": "error",
+                "message": "Use local parameter instead."
+            }
+        ]
     },
     "parserOptions": {
         "sourceType": "module"

demo/index.html

@@ -65,20 +65,26 @@
                     </svg>Vimeo</button>
             </p>
 
-            <span class="action">
+            <p>Monetization options provided by
-                <a href="https://github.com/sampotts/plyr" target="_blank" class="button" data-shr-network="github">
+                <a href="https://vi.ai" target="_blank">vi.ai</a>
-                    <svg class="icon" role="presentation">
+            </p>
-                        <title>GitHub</title>
+
-                        <path d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6
+            <div class="call-to-action">
+                <span class="button--with-count">
+                    <a href="https://github.com/sampotts/plyr" target="_blank" class="button" data-shr-network="github">
+                        <svg class="icon" role="presentation">
+                            <title>GitHub</title>
+                            <path d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6
                C5.9,15.9,6,15.6,6,15.4c0-0.2,0-0.7,0-1.4C3.8,14.5,3.3,13,3.3,13c-0.4-0.9-0.9-1.2-0.9-1.2c-0.7-0.5,0.1-0.5,0.1-0.5
                c0.8,0.1,1.2,0.8,1.2,0.8C4.4,13.4,5.6,13,6,12.8c0.1-0.5,0.3-0.9,0.5-1.1c-1.8-0.2-3.6-0.9-3.6-4c0-0.9,0.3-1.6,0.8-2.1
                c-0.1-0.2-0.4-1,0.1-2.1c0,0,0.7-0.2,2.2,0.8c0.6-0.2,1.3-0.3,2-0.3c0.7,0,1.4,0.1,2,0.3c1.5-1,2.2-0.8,2.2-0.8
                c0.4,1.1,0.2,1.9,0.1,2.1c0.5,0.6,0.8,1.3,0.8,2.1c0,3.1-1.9,3.7-3.7,3.9C9.7,12,10,12.5,10,13.2c0,1.1,0,1.9,0,2.2
                c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z"></path>
-                    </svg>
+                        </svg>
-                    Download on GitHub
+                        Download on GitHub
-                </a>
+                    </a>
-            </span>
+                </span>
+            </div>
         </header>
 
         <main>

demo/src/less/components/buttons.less

@@ -29,16 +29,38 @@
     &:hover,
     &:focus {
         color: @gray-dark;
-        outline: 0;
 
+        // Remove the underline/border
         &::after {
             display: none;
         }
     }
 
+    &:hover {
+        transform: translateY(-1px);
+        box-shadow: 0 2px 2px fade(#000, 10%);
+    }
+
+    &:focus {
+        outline: 0;
+    }
+
     &.tab-focus {
         .tab-focus();
     }
+
+    &:active {
+        transform: translateY(1px);
+    }
+}
+
+// Button group
+.button--with-count {
+    display: inline-flex;
+
+    .button .icon {
+        flex-shrink: 0;
+    }
 }
 
 // Count bubble

demo/src/less/components/header.less

@@ -6,16 +6,8 @@ header {
     padding-bottom: @spacing-base;
     text-align: center;
 
-    p {
+    .call-to-action {
-        margin-bottom: (@spacing-base * 1.5);
+        margin-top: (@spacing-base * 1.5);
-    }
-
-    .action {
-        display: inline-flex;
-
-        .button .icon {
-            flex-shrink: 0;
-        }
     }
 
     @media @mq-md {

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-height: 14px;
-@plyr-range-thumb-width: ceil(@plyr-range-track-height * 2.3);
 @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;