From fe23ede57b39a574140ab4cd668697e8b9003155 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Sat, 8 Feb 2020 19:51:14 +0300
Subject: [PATCH 01/15] Pass pointer events bypassing the slider thumb

---
 src/elements/emby-slider/emby-slider.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/elements/emby-slider/emby-slider.css b/src/elements/emby-slider/emby-slider.css
index 30d4ccb6d8..7f7db46f1e 100644
--- a/src/elements/emby-slider/emby-slider.css
+++ b/src/elements/emby-slider/emby-slider.css
@@ -79,6 +79,7 @@
     background: #00a4dc;
     border: none;
     transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    pointer-events: none;
 }
 
 .mdl-slider-hoverthumb::-webkit-slider-thumb {

From c44b94a7b70efadc6f60b8f1c0b82493c7127f35 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Sun, 9 Feb 2020 02:29:36 +0300
Subject: [PATCH 02/15] Fix font size

---
 src/elements/emby-slider/emby-slider.css | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/elements/emby-slider/emby-slider.css b/src/elements/emby-slider/emby-slider.css
index 7f7db46f1e..b640f4d327 100644
--- a/src/elements/emby-slider/emby-slider.css
+++ b/src/elements/emby-slider/emby-slider.css
@@ -29,6 +29,8 @@
     /* Disable webkit tap highlighting */
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
     display: block;
+
+    font-size: inherit; /* Chrome and Firefox override font size for 'input' */
 }
 
 .mdl-slider::-moz-focus-outer {
@@ -72,8 +74,8 @@
 
 .mdl-slider::-webkit-slider-thumb {
     -webkit-appearance: none;
-    width: 1.2em;
-    height: 1.2em;
+    width: 1.08em;
+    height: 1.08em;
     box-sizing: border-box;
     border-radius: 50%;
     background: #00a4dc;
@@ -100,8 +102,8 @@
 
 .mdl-slider::-moz-range-thumb {
     -moz-appearance: none;
-    width: 0.9em;
-    height: 0.9em;
+    width: 0.81em;
+    height: 0.81em;
     box-sizing: border-box;
     border-radius: 50%;
     background: #00a4dc;

From 20a20ff9d18bf1c4efb6965a7faed445cbccf225 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Sat, 8 Feb 2020 20:04:39 +0300
Subject: [PATCH 03/15] Fix slider bubble position

---
 src/elements/emby-slider/emby-slider.css |  7 +++++++
 src/elements/emby-slider/emby-slider.js  | 11 +++++++++--
 2 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/elements/emby-slider/emby-slider.css b/src/elements/emby-slider/emby-slider.css
index b640f4d327..f1f6b72ad5 100644
--- a/src/elements/emby-slider/emby-slider.css
+++ b/src/elements/emby-slider/emby-slider.css
@@ -220,6 +220,13 @@
     bottom: 0;
 }
 
+.sliderBubbleTrack {
+    position: absolute;
+    left: 0;
+    right: 0;
+    margin: 0 0.54em; /* half of slider thumb size */
+}
+
 .sliderBubble {
     position: absolute;
     top: 0;
diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js
index 24592f4515..00c35b4e2a 100644
--- a/src/elements/emby-slider/emby-slider.js
+++ b/src/elements/emby-slider/emby-slider.js
@@ -115,10 +115,11 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
             htmlToInsert += '</div>';
         }
 
-        htmlToInsert += '<div class="sliderBubble hide"></div>';
+        htmlToInsert += '<div class="sliderBubbleTrack"><div class="sliderBubble hide"></div></div>';
 
         containerElement.insertAdjacentHTML('beforeend', htmlToInsert);
 
+        this.sliderBubbleTrack = containerElement.querySelector('.sliderBubbleTrack');
         this.backgroundLower = containerElement.querySelector('.mdl-slider-background-lower');
         this.backgroundUpper = containerElement.querySelector('.mdl-slider-background-upper');
         var sliderBubble = containerElement.querySelector('.sliderBubble');
@@ -152,10 +153,16 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
         dom.addEventListener(this, (window.PointerEvent ? 'pointermove' : 'mousemove'), function (e) {
 
             if (!this.dragging) {
-                var rect = this.getBoundingClientRect();
+                var rect = this.sliderBubbleTrack.getBoundingClientRect();
                 var clientX = e.clientX;
+
                 var bubbleValue = (clientX - rect.left) / rect.width;
                 bubbleValue *= 100;
+                if (this.step !== 0) {
+                    bubbleValue = Math.round(bubbleValue / this.step) * this.step;
+                }
+                bubbleValue = Math.min(Math.max(bubbleValue, 0), 100);
+
                 updateBubble(this, bubbleValue, sliderBubble);
 
                 if (hasHideClass) {

From 40c7dad2411483ad26d981e1798c35e1210f0221 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Sat, 8 Feb 2020 21:21:07 +0300
Subject: [PATCH 04/15] Resize progress bar to slider range

---
 src/elements/emby-slider/emby-slider.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/elements/emby-slider/emby-slider.css b/src/elements/emby-slider/emby-slider.css
index f1f6b72ad5..180d728a44 100644
--- a/src/elements/emby-slider/emby-slider.css
+++ b/src/elements/emby-slider/emby-slider.css
@@ -167,6 +167,7 @@
     margin-top: -0.05em;
     top: 50%;
     position: absolute;
+    padding: 0 0.54em; /* half of slider thumb size */
 }
 
 .mdl-slider-background-flex {

From cc84fce75b3ffd4dec32c903dd6564837b111210 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Sun, 9 Feb 2020 01:45:46 +0300
Subject: [PATCH 05/15] Make slider in Edge same as in Chrome

---
 src/elements/emby-slider/emby-slider.css | 19 ++++++++++++-------
 src/elements/emby-slider/emby-slider.js  |  3 +++
 2 files changed, 15 insertions(+), 7 deletions(-)

diff --git a/src/elements/emby-slider/emby-slider.css b/src/elements/emby-slider/emby-slider.css
index 180d728a44..18c09f61bf 100644
--- a/src/elements/emby-slider/emby-slider.css
+++ b/src/elements/emby-slider/emby-slider.css
@@ -72,6 +72,12 @@
     display: none;
 }
 
+.slider-browser-edge {
+    margin-left: -0.16em;
+    margin-right: -0.16em;
+    width: 150%; /* need to occupy space */
+}
+
 .mdl-slider::-webkit-slider-thumb {
     -webkit-appearance: none;
     width: 1.08em;
@@ -114,22 +120,21 @@
 
 .mdl-slider::-ms-thumb {
     -webkit-appearance: none;
-    width: 1.8em;
-    height: 1.8em;
+    width: 1.4em;
+    height: 1.4em;
     box-sizing: border-box;
     border-radius: 50%;
     background: #00a4dc;
     border: none;
-    transform: scale(0.9, 0.9);
+    transform: scale(0.771429);
     transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
 }
 
-.mdl-slider-hoverthumb::-ms-thumb {
-    margin-left: -0.4em;
-    transform: scale(0.5, 0.5);
+.mdl-slider:hover::-ms-thumb {
+    transform: none;
 }
 
-.mdl-slider:hover::-ms-thumb {
+.mdl-slider.show-focus:focus::-ms-thumb {
     transform: none;
 }
 
diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js
index 00c35b4e2a..f07e6433dc 100644
--- a/src/elements/emby-slider/emby-slider.js
+++ b/src/elements/emby-slider/emby-slider.js
@@ -84,6 +84,9 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
         if (browser.noFlex) {
             this.classList.add('slider-no-webkit-thumb');
         }
+        if (browser.edge || browser.msie) {
+            this.classList.add('slider-browser-edge');
+        }
         if (!layoutManager.mobile) {
             this.classList.add('mdl-slider-hoverthumb');
         }

From c6835f9c41180fad07b9a159e7c35b47e90a8167 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Sun, 9 Feb 2020 13:14:12 +0300
Subject: [PATCH 06/15] Make slider in Firefox same as in Chrome

---
 src/elements/emby-slider/emby-slider.css | 24 ++++++++++--------------
 src/elements/emby-slider/emby-slider.js  |  2 +-
 2 files changed, 11 insertions(+), 15 deletions(-)

diff --git a/src/elements/emby-slider/emby-slider.css b/src/elements/emby-slider/emby-slider.css
index 18c09f61bf..64f83d7cf8 100644
--- a/src/elements/emby-slider/emby-slider.css
+++ b/src/elements/emby-slider/emby-slider.css
@@ -45,17 +45,6 @@
     background: transparent;
 }
 
-.mdl-slider::-moz-range-track {
-    background: #444;
-    border: none;
-    width: calc(100% - 20px);
-}
-
-.mdl-slider::-moz-range-progress {
-    background: #00a4dc;
-    width: calc(100% - 20px);
-}
-
 .mdl-slider::-ms-track {
     background: none;
     color: transparent;
@@ -108,14 +97,21 @@
 
 .mdl-slider::-moz-range-thumb {
     -moz-appearance: none;
-    width: 0.81em;
-    height: 0.81em;
+    width: 1.08em;
+    height: 1.08em;
     box-sizing: border-box;
     border-radius: 50%;
     background: #00a4dc;
     background-image: none;
     border: none;
-    transform: scale(1.4, 1.4);
+}
+
+.mdl-slider:hover::-moz-range-thumb {
+    transform: scale(1.3);
+}
+
+.mdl-slider.show-focus:focus::-moz-range-thumb {
+    transform: scale(1.3);
 }
 
 .mdl-slider::-ms-thumb {
diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js
index f07e6433dc..8f93799e67 100644
--- a/src/elements/emby-slider/emby-slider.js
+++ b/src/elements/emby-slider/emby-slider.js
@@ -3,7 +3,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
 
     var EmbySliderPrototype = Object.create(HTMLInputElement.prototype);
 
-    var supportsNativeProgressStyle = browser.firefox;
+    var supportsNativeProgressStyle = false;
     var supportsValueSetOverride = false;
 
     var enableWidthWithTransform;

From 91631f266d8dd98e40407511e1575080472bde56 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Sun, 9 Feb 2020 17:07:13 +0300
Subject: [PATCH 07/15] Fix progress bar position on WebOS 3

---
 src/elements/emby-slider/emby-slider.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/elements/emby-slider/emby-slider.css b/src/elements/emby-slider/emby-slider.css
index 64f83d7cf8..ec1dc806d8 100644
--- a/src/elements/emby-slider/emby-slider.css
+++ b/src/elements/emby-slider/emby-slider.css
@@ -167,6 +167,7 @@
     box-sizing: border-box;
     margin-top: -0.05em;
     top: 50%;
+    left: 0;
     position: absolute;
     padding: 0 0.54em; /* half of slider thumb size */
 }

From 7faa4dab2bc8745c72374de9e6b4ca3863c0ddd5 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Thu, 13 Feb 2020 09:11:05 +0300
Subject: [PATCH 08/15] Remove unused CSS

---
 src/elements/emby-slider/emby-slider.css | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/elements/emby-slider/emby-slider.css b/src/elements/emby-slider/emby-slider.css
index ec1dc806d8..4284d7d81b 100644
--- a/src/elements/emby-slider/emby-slider.css
+++ b/src/elements/emby-slider/emby-slider.css
@@ -146,14 +146,6 @@
     display: none;
 }
 
-.mdl-slider-ie-container {
-    height: 1.25em;
-    overflow: visible;
-    border: none;
-    margin: 0;
-    padding: 0;
-}
-
 .mdl-slider-container {
     height: 1.25em;
     position: relative;

From c4824abfb08664822480b4662c5c24fa4d1f9193 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Thu, 13 Feb 2020 09:15:28 +0300
Subject: [PATCH 09/15] Make a style transition like a button

---
 src/elements/emby-slider/emby-slider.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/elements/emby-slider/emby-slider.css b/src/elements/emby-slider/emby-slider.css
index 4284d7d81b..9ef577a19e 100644
--- a/src/elements/emby-slider/emby-slider.css
+++ b/src/elements/emby-slider/emby-slider.css
@@ -75,7 +75,7 @@
     border-radius: 50%;
     background: #00a4dc;
     border: none;
-    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: 0.2s;
     pointer-events: none;
 }
 
@@ -104,6 +104,7 @@
     background: #00a4dc;
     background-image: none;
     border: none;
+    transition: 0.2s;
 }
 
 .mdl-slider:hover::-moz-range-thumb {
@@ -123,7 +124,7 @@
     background: #00a4dc;
     border: none;
     transform: scale(0.771429);
-    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), border 0.18s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.18s cubic-bezier(0.4, 0, 0.2, 1), background 0.28s cubic-bezier(0.4, 0, 0.2, 1);
+    transition: 0.2s;
 }
 
 .mdl-slider:hover::-ms-thumb {

From e13e6f38d53244f2243d4dcee57446c64a9fa7e9 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Thu, 13 Feb 2020 11:50:22 +0300
Subject: [PATCH 10/15] Limit slider bubble position to its track

---
 src/elements/emby-slider/emby-slider.css | 2 +-
 src/elements/emby-slider/emby-slider.js  | 7 ++++++-
 2 files changed, 7 insertions(+), 2 deletions(-)

diff --git a/src/elements/emby-slider/emby-slider.css b/src/elements/emby-slider/emby-slider.css
index 9ef577a19e..833fd3e796 100644
--- a/src/elements/emby-slider/emby-slider.css
+++ b/src/elements/emby-slider/emby-slider.css
@@ -227,7 +227,7 @@
     position: absolute;
     top: 0;
     left: 0;
-    transform: translate3d(-48%, -120%, 0);
+    transform: translate3d(-50%, -120%, 0);
     background: #282828;
     color: #fff;
     display: flex;
diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js
index 8f93799e67..44e9c63106 100644
--- a/src/elements/emby-slider/emby-slider.js
+++ b/src/elements/emby-slider/emby-slider.js
@@ -48,8 +48,13 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
     function updateBubble(range, value, bubble, bubbleText) {
 
         requestAnimationFrame(function () {
+            var bubbleTrackRect = range.sliderBubbleTrack.getBoundingClientRect();
+            var bubbleRect = bubble.getBoundingClientRect();
 
-            bubble.style.left = value + '%';
+            var bubblePos = bubbleTrackRect.width * value / 100;
+            bubblePos = Math.min(Math.max(bubblePos, bubbleRect.width / 2), bubbleTrackRect.width - bubbleRect.width / 2);
+
+            bubble.style.left = bubblePos + 'px';
 
             if (range.getBubbleHtml) {
                 value = range.getBubbleHtml(value);

From f68f3634c0af4a83f105b169656339d6cac689c3 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Thu, 13 Feb 2020 12:21:01 +0300
Subject: [PATCH 11/15] Remove 'supportsNativeProgressStyle' in favor of buffer
 progress

---
 src/elements/emby-slider/emby-slider.js | 40 +++++++++++--------------
 1 file changed, 17 insertions(+), 23 deletions(-)

diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js
index 44e9c63106..e613318814 100644
--- a/src/elements/emby-slider/emby-slider.js
+++ b/src/elements/emby-slider/emby-slider.js
@@ -3,7 +3,6 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
 
     var EmbySliderPrototype = Object.create(HTMLInputElement.prototype);
 
-    var supportsNativeProgressStyle = false;
     var supportsValueSetOverride = false;
 
     var enableWidthWithTransform;
@@ -104,25 +103,23 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
 
         var htmlToInsert = '';
 
-        if (!supportsNativeProgressStyle) {
-            htmlToInsert += '<div class="mdl-slider-background-flex-container">';
-            htmlToInsert += '<div class="mdl-slider-background-flex">';
-            htmlToInsert += '<div class="mdl-slider-background-flex-inner">';
+        htmlToInsert += '<div class="mdl-slider-background-flex-container">';
+        htmlToInsert += '<div class="mdl-slider-background-flex">';
+        htmlToInsert += '<div class="mdl-slider-background-flex-inner">';
 
-            // the more of these, the more ranges we can display
-            htmlToInsert += '<div class="mdl-slider-background-upper"></div>';
+        // the more of these, the more ranges we can display
+        htmlToInsert += '<div class="mdl-slider-background-upper"></div>';
 
-            if (enableWidthWithTransform) {
-                htmlToInsert += '<div class="mdl-slider-background-lower mdl-slider-background-lower-withtransform"></div>';
-            } else {
-                htmlToInsert += '<div class="mdl-slider-background-lower"></div>';
-            }
-
-            htmlToInsert += '</div>';
-            htmlToInsert += '</div>';
-            htmlToInsert += '</div>';
+        if (enableWidthWithTransform) {
+            htmlToInsert += '<div class="mdl-slider-background-lower mdl-slider-background-lower-withtransform"></div>';
+        } else {
+            htmlToInsert += '<div class="mdl-slider-background-lower"></div>';
         }
 
+        htmlToInsert += '</div>';
+        htmlToInsert += '</div>';
+        htmlToInsert += '</div>';
+
         htmlToInsert += '<div class="sliderBubbleTrack"><div class="sliderBubble hide"></div></div>';
 
         containerElement.insertAdjacentHTML('beforeend', htmlToInsert);
@@ -190,13 +187,10 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
             passive: true
         });
 
-        if (!supportsNativeProgressStyle) {
-
-            if (supportsValueSetOverride) {
-                this.addEventListener('valueset', updateValues);
-            } else {
-                startInterval(this);
-            }
+        if (supportsValueSetOverride) {
+            this.addEventListener('valueset', updateValues);
+        } else {
+            startInterval(this);
         }
     };
 

From dc95a76e104d491e9dbf5b5a99b6dc86cf3076b0 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Thu, 13 Feb 2020 12:23:42 +0300
Subject: [PATCH 12/15] Fix vertical position of slider progress bar

---
 src/elements/emby-slider/emby-slider.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/elements/emby-slider/emby-slider.css b/src/elements/emby-slider/emby-slider.css
index 833fd3e796..5dc57c49c3 100644
--- a/src/elements/emby-slider/emby-slider.css
+++ b/src/elements/emby-slider/emby-slider.css
@@ -158,7 +158,6 @@
 .mdl-slider-background-flex-container {
     width: 100%;
     box-sizing: border-box;
-    margin-top: -0.05em;
     top: 50%;
     left: 0;
     position: absolute;
@@ -168,7 +167,7 @@
 .mdl-slider-background-flex {
     background: #333;
     height: 0.2em;
-    margin-top: -0.08em;
+    margin-top: -0.1em;
     width: 100%;
     top: 50%;
     left: 0;

From 91c8776fbdd9c4fad02210851f8129af24c0c08d Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Thu, 13 Feb 2020 23:11:59 +0300
Subject: [PATCH 13/15] Scale on hover with 'hoverthumb' style only

---
 src/elements/emby-slider/emby-slider.css | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/src/elements/emby-slider/emby-slider.css b/src/elements/emby-slider/emby-slider.css
index 5dc57c49c3..f59c2a3cd0 100644
--- a/src/elements/emby-slider/emby-slider.css
+++ b/src/elements/emby-slider/emby-slider.css
@@ -79,11 +79,7 @@
     pointer-events: none;
 }
 
-.mdl-slider-hoverthumb::-webkit-slider-thumb {
-    transform: none;
-}
-
-.mdl-slider:hover::-webkit-slider-thumb {
+.mdl-slider-hoverthumb:hover::-webkit-slider-thumb {
     transform: scale(1.3);
 }
 
@@ -107,7 +103,7 @@
     transition: 0.2s;
 }
 
-.mdl-slider:hover::-moz-range-thumb {
+.mdl-slider-hoverthumb:hover::-moz-range-thumb {
     transform: scale(1.3);
 }
 
@@ -127,7 +123,7 @@
     transition: 0.2s;
 }
 
-.mdl-slider:hover::-ms-thumb {
+.mdl-slider-hoverthumb:hover::-ms-thumb {
     transform: none;
 }
 

From a0fa065667de0a5aa11d413b66f9d4fdb35fc125 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Thu, 13 Feb 2020 23:32:04 +0300
Subject: [PATCH 14/15] Fix slider calculations for common case

---
 src/elements/emby-slider/emby-slider.js | 71 +++++++++++++++++++++----
 1 file changed, 60 insertions(+), 11 deletions(-)

diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js
index e613318814..8026f001ec 100644
--- a/src/elements/emby-slider/emby-slider.js
+++ b/src/elements/emby-slider/emby-slider.js
@@ -16,6 +16,62 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
         }
     }
 
+    /**
+     * Returns slider fraction corresponding to client position.
+     *
+     * @param {Object} range slider itself
+     * @param {number} clientX client X-coordinate
+     * @return {number} slider fraction
+     */
+    function mapClientToFraction(range, clientX) {
+        var rect = range.sliderBubbleTrack.getBoundingClientRect();
+
+        var fraction = (clientX - rect.left) / rect.width;
+
+        // Snap to step
+        var valueRange = range.max - range.min;
+        if (range.step !== 'any' && valueRange !== 0) {
+            var step = (range.step || 1) / valueRange;
+            fraction = Math.round(fraction / step) * step;
+        }
+
+        return Math.min(Math.max(fraction, 0), 1);
+    }
+
+    /**
+     * Returns slider value corresponding to slider fraction.
+     *
+     * @param {Object} range slider itself
+     * @param {number} fraction slider fraction
+     * @return {number} slider value
+     */
+    function mapFractionToValue(range, fraction) {
+        var value = (range.max - range.min) * fraction;
+
+        // Snap to step
+        if (range.step !== 'any') {
+            var step = range.step || 1;
+            value = Math.round(value / step) * step;
+        }
+
+        value += parseFloat(range.min);
+
+        return Math.min(Math.max(value, range.min), range.max);
+    }
+
+    /**
+     * Returns slider fraction corresponding to slider value.
+     *
+     * @param {Object} range slider itself
+     * @param {number} value slider value (snapped to step)
+     * @return {number} slider fraction
+     */
+    function mapValueToFraction(range, value) {
+        var valueRange = range.max - range.min;
+        var fraction = valueRange !== 0 ? (value - range.min) / valueRange : 0;
+        return Math.min(Math.max(fraction, 0), 1);
+    }
+
     function updateValues() {
 
         // Do not update values when dragging with keyboard to keep current progress for reference
@@ -61,7 +117,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
                 if (range.getBubbleText) {
                     value = range.getBubbleText(value);
                 } else {
-                    value = Math.round(value);
+                    value = mapFractionToValue(range, value / 100).toLocaleString();
                 }
                 value = '<h1 class="sliderBubbleText">' + value + '</h1>';
             }
@@ -134,7 +190,8 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
         dom.addEventListener(this, 'input', function (e) {
             this.dragging = true;
 
-            updateBubble(this, this.value, sliderBubble);
+            var bubbleValue = mapValueToFraction(this, this.value) * 100;
+            updateBubble(this, bubbleValue, sliderBubble);
 
             if (hasHideClass) {
                 sliderBubble.classList.remove('hide');
@@ -158,15 +215,7 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
         dom.addEventListener(this, (window.PointerEvent ? 'pointermove' : 'mousemove'), function (e) {
 
             if (!this.dragging) {
-                var rect = this.sliderBubbleTrack.getBoundingClientRect();
-                var clientX = e.clientX;
-
-                var bubbleValue = (clientX - rect.left) / rect.width;
-                bubbleValue *= 100;
-                if (this.step !== 0) {
-                    bubbleValue = Math.round(bubbleValue / this.step) * this.step;
-                }
-                bubbleValue = Math.min(Math.max(bubbleValue, 0), 100);
+                var bubbleValue = mapClientToFraction(this, e.clientX) * 100;
 
                 updateBubble(this, bubbleValue, sliderBubble);
 

From 798a6798427a6b40348284245dfd8ca505773959 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Fri, 14 Feb 2020 00:31:08 +0300
Subject: [PATCH 15/15] Fix slider update by touch on iPhone/iPad

---
 src/elements/emby-slider/emby-slider.js | 43 ++++++++++++++++++++++++-
 1 file changed, 42 insertions(+), 1 deletion(-)

diff --git a/src/elements/emby-slider/emby-slider.js b/src/elements/emby-slider/emby-slider.js
index 8026f001ec..13472b4d5d 100644
--- a/src/elements/emby-slider/emby-slider.js
+++ b/src/elements/emby-slider/emby-slider.js
@@ -75,7 +75,8 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
     function updateValues() {
 
         // Do not update values when dragging with keyboard to keep current progress for reference
-        if (!!this.keyboardDragging) {
+        // Do not update values when touched to keep current progress for reference
+        if (!!this.keyboardDragging || !!this.touched) {
             return;
         }
 
@@ -236,6 +237,46 @@ define(['browser', 'dom', 'layoutManager', 'keyboardnavigation', 'css!./emby-sli
             passive: true
         });
 
+        // HACK: iPhone/iPad do not change input by touch
+        if (browser.iOS) {
+            dom.addEventListener(this, 'touchstart', function (e) {
+                if (e.targetTouches.length !== 1) {
+                    return;
+                }
+
+                this.touched = true;
+
+                var fraction = mapClientToFraction(this, e.targetTouches[0].clientX);
+                this.value = mapFractionToValue(this, fraction);
+
+                this.dispatchEvent(new Event('input', {
+                    bubbles: true,
+                    cancelable: false
+                }));
+
+                // Reset dragging (from 'input' event) so that real dragging can be detected
+                var range = this;
+                setTimeout(function () {
+                    range.dragging = false;
+                }, 0);
+            }, {
+                passive: true
+            });
+
+            dom.addEventListener(this, 'touchend', function (e) {
+                if (!this.dragging) {
+                    this.dispatchEvent(new Event('change', {
+                        bubbles: true,
+                        cancelable: false
+                    }));
+                }
+
+                this.touched = false;
+            }, {
+                passive: true
+            });
+        }
+
         if (supportsValueSetOverride) {
             this.addEventListener('valueset', updateValues);
         } else {