From d7c32dcde924d9a3afb3790103f401be3b25ad73 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Thu, 12 Mar 2020 12:34:50 +0300
Subject: [PATCH 1/5] Fix radiobutton focus marker

---
 src/elements/emby-radio/emby-radio.css | 105 ++++++++++++++-----------
 src/elements/emby-radio/emby-radio.js  |  20 ++++-
 src/themes/purplehaze/theme.css        |   9 +++
 3 files changed, 87 insertions(+), 47 deletions(-)

diff --git a/src/elements/emby-radio/emby-radio.css b/src/elements/emby-radio/emby-radio.css
index 6db3c39e4d..34af657b9c 100644
--- a/src/elements/emby-radio/emby-radio.css
+++ b/src/elements/emby-radio/emby-radio.css
@@ -4,7 +4,6 @@
     display: inline-block;
     box-sizing: border-box;
     margin: 0;
-    padding-left: 24px;
 }
 
 .radio-label-block {
@@ -31,67 +30,81 @@
     border: none;
 }
 
-.mdl-radio__outer-circle {
-    position: absolute;
-    top: 4px;
-    left: 0;
-    display: inline-block;
-    box-sizing: border-box;
-    width: 16px;
-    height: 16px;
-    margin: 0;
-    cursor: pointer;
-    border: 2px solid currentcolor;
+.mdl-radio__circles {
+    position: relative;
+    margin-right: 0.54em;
+    width: 1.08em;
+    height: 1.08em;
     border-radius: 50%;
-    z-index: 2;
+    cursor: pointer;
 }
 
-.mdl-radio__button:checked + .mdl-radio__label + .mdl-radio__outer-circle {
-    border: 2px solid #00a4dc;
+.mdl-radio__circles svg {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 1;
 }
 
-.mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle {
-    border: 2px solid rgba(0, 0, 0, 0.26);
+.mdl-radio__button:disabled + .mdl-radio__circles {
     cursor: auto;
 }
 
+.mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__outer-circle {
+    color: #00a4dc;
+}
+
+.mdl-radio__button:disabled + .mdl-radio__circles .mdl-radio__outer-circle {
+    color: rgba(0, 0, 0, 0.26);
+}
+
 .mdl-radio__inner-circle {
-    position: absolute;
-    z-index: 1;
-    margin: 0;
-    top: 8px;
-    left: 4px;
-    box-sizing: border-box;
-    width: 8px;
-    height: 8px;
-    cursor: pointer;
-    transition-duration: 0.28s;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 0.2s;
     transition-property: -webkit-transform;
     transition-property: transform;
     transition-property: transform, -webkit-transform;
-    -webkit-transform: scale3d(0, 0, 0);
-    transform: scale3d(0, 0, 0);
+    -webkit-transform: scale(0);
+    transform: scale(0);
+    transform-origin: 50% 50%;
+}
+
+.mdl-radio__button:checked + .mdl-radio__circles .mdl-radio__inner-circle {
+    -webkit-transform: scale(1);
+    transform: scale(1);
+}
+
+.mdl-radio__button:disabled + .mdl-radio__circles .mdl-radio__inner-circle {
+    color: rgba(0, 0, 0, 0.26);
+}
+
+.mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__inner-circle {
+    color: #00a4dc;
+}
+
+.mdl-radio__focus-circle {
+    position: absolute;
+    top: 0;
+    left: 0;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    margin: 0;
     border-radius: 50%;
     background: #00a4dc;
+    opacity: 0.26;
+    transition-duration: 0.2s;
+    transition-property: -webkit-transform;
+    transition-property: transform;
+    transition-property: transform, -webkit-transform;
+    -webkit-transform: scale(0);
+    transform: scale(0);
 }
 
-.mdl-radio__button:checked + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
-    -webkit-transform: scale3d(1, 1, 1);
-    transform: scale3d(1, 1, 1);
-}
-
-.mdl-radio__button:disabled + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
-    background: rgba(0, 0, 0, 0.26);
-    cursor: auto;
-}
-
-.mdl-radio__button:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
-    box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.76);
-}
-
-.mdl-radio__button:checked:focus + .mdl-radio__label + .mdl-radio__outer-circle + .mdl-radio__inner-circle {
-    box-shadow: 0 0 0 10px rgba(0, 164, 220, 0.26);
+.mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__focus-circle {
+    -webkit-transform: scale(1.75);
+    transform: scale(1.75);
 }
 
 .mdl-radio__label {
diff --git a/src/elements/emby-radio/emby-radio.js b/src/elements/emby-radio/emby-radio.js
index 000c656822..86c08678e1 100644
--- a/src/elements/emby-radio/emby-radio.js
+++ b/src/elements/emby-radio/emby-radio.js
@@ -43,7 +43,25 @@ define(['css!./emby-radio', 'registerElement'], function () {
         labelTextElement.classList.add('radioButtonLabel');
         labelTextElement.classList.add('mdl-radio__label');
 
-        labelElement.insertAdjacentHTML('beforeend', '<span class="mdl-radio__outer-circle"></span><span class="mdl-radio__inner-circle"></span>');
+        var html = '';
+
+        html += '<div class="mdl-radio__circles">';
+
+        html += '<svg>';
+        html += '<defs>';
+        html += '<clipPath id="cutoff">';
+        html += '<circle cx="50%" cy="50%" r="50%" />';
+        html += '</clipPath>';
+        html += '</defs>';
+        html += '<circle class="mdl-radio__outer-circle" cx="50%" cy="50%" r="50%" fill="none" stroke="currentcolor" stroke-width="0.26em" clip-path="url(#cutoff)" />';
+        html += '<circle class="mdl-radio__inner-circle" cx="50%" cy="50%" r="25%" fill="currentcolor" />';
+        html += '</svg>';
+
+        html += '<div class="mdl-radio__focus-circle"></div>';
+
+        html += '</div>';
+
+        this.insertAdjacentHTML('afterend', html);
 
         this.addEventListener('keydown', onKeyDown);
     };
diff --git a/src/themes/purplehaze/theme.css b/src/themes/purplehaze/theme.css
index 9c13841422..a31b5a924f 100644
--- a/src/themes/purplehaze/theme.css
+++ b/src/themes/purplehaze/theme.css
@@ -438,6 +438,15 @@ a[data-role=button] {
     color: #f8f8fe;
 }
 
+.mdl-radio__button:focus + .mdl-radio__circles svg .mdl-radio__outer-circle,
+.mdl-radio__button:focus + .mdl-radio__circles svg .mdl-radio__inner-circle {
+    color: #ff77f1;
+}
+
+.mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__focus-circle {
+    background: #00a4dc;
+}
+
 .emby-tab-button {
     color: #999;
 }

From a41bd6de56a09baaa27fec396ed5b3a546af11af Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Thu, 12 Mar 2020 12:35:13 +0300
Subject: [PATCH 2/5] Fix checkbox border on TV

---
 src/elements/emby-checkbox/emby-checkbox.css | 2 +-
 src/themes/purplehaze/theme.css              | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/elements/emby-checkbox/emby-checkbox.css b/src/elements/emby-checkbox/emby-checkbox.css
index 42a9207560..b33a216140 100644
--- a/src/elements/emby-checkbox/emby-checkbox.css
+++ b/src/elements/emby-checkbox/emby-checkbox.css
@@ -55,7 +55,7 @@
     height: 1.83em;
     margin: 0;
     overflow: hidden;
-    border: 2px solid currentcolor;
+    border: 0.14em solid currentcolor;
     border-radius: 0.14em;
     z-index: 2;
     display: flex;
diff --git a/src/themes/purplehaze/theme.css b/src/themes/purplehaze/theme.css
index a31b5a924f..d65071afa4 100644
--- a/src/themes/purplehaze/theme.css
+++ b/src/themes/purplehaze/theme.css
@@ -382,7 +382,7 @@ a[data-role=button] {
 
 .emby-checkbox:checked + span + .checkboxOutline {
     background-color: #030322;
-    border: 2px solid rgb(72, 195, 200);
+    border: 0.14em solid rgb(72, 195, 200);
 }
 
 .emby-checkbox:checked + span + .checkboxOutline > .checkboxIcon-checked {
@@ -394,7 +394,7 @@ a[data-role=button] {
 }
 
 .emby-checkbox:focus:not(:checked) + span + .checkboxOutline {
-    border: 2px solid #ff77f1;
+    border: 0.14em solid #ff77f1;
 }
 
 .itemProgressBarForeground {

From 17d1dc355940ae0069782cba5d9cc539119ed38c Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Thu, 12 Mar 2020 18:49:38 +0300
Subject: [PATCH 3/5] Fix tiny cropping in Firefox

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

diff --git a/src/elements/emby-radio/emby-radio.css b/src/elements/emby-radio/emby-radio.css
index 34af657b9c..0b17a82ed4 100644
--- a/src/elements/emby-radio/emby-radio.css
+++ b/src/elements/emby-radio/emby-radio.css
@@ -46,6 +46,7 @@
     top: 0;
     left: 0;
     z-index: 1;
+    overflow: visible;
 }
 
 .mdl-radio__button:disabled + .mdl-radio__circles {

From a2ccaa29c3b6b4115d573fe086551ca9587cf7fc Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Thu, 12 Mar 2020 20:45:27 +0300
Subject: [PATCH 4/5] Turn off radiobutton focus on Mobile

---
 src/elements/emby-radio/emby-radio.css |  6 +++---
 src/elements/emby-radio/emby-radio.js  | 10 ++++++++--
 src/themes/purplehaze/theme.css        |  6 +++---
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/elements/emby-radio/emby-radio.css b/src/elements/emby-radio/emby-radio.css
index 0b17a82ed4..f8671ce265 100644
--- a/src/elements/emby-radio/emby-radio.css
+++ b/src/elements/emby-radio/emby-radio.css
@@ -53,7 +53,7 @@
     cursor: auto;
 }
 
-.mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__outer-circle {
+.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__outer-circle {
     color: #00a4dc;
 }
 
@@ -80,7 +80,7 @@
     color: rgba(0, 0, 0, 0.26);
 }
 
-.mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__inner-circle {
+.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__inner-circle {
     color: #00a4dc;
 }
 
@@ -103,7 +103,7 @@
     transform: scale(0);
 }
 
-.mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__focus-circle {
+.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__focus-circle {
     -webkit-transform: scale(1.75);
     transform: scale(1.75);
 }
diff --git a/src/elements/emby-radio/emby-radio.js b/src/elements/emby-radio/emby-radio.js
index 86c08678e1..46a3e3826c 100644
--- a/src/elements/emby-radio/emby-radio.js
+++ b/src/elements/emby-radio/emby-radio.js
@@ -1,4 +1,4 @@
-define(['css!./emby-radio', 'registerElement'], function () {
+define(['layoutManager', 'css!./emby-radio', 'registerElement'], function (layoutManager) {
     'use strict';
 
     var EmbyRadioPrototype = Object.create(HTMLInputElement.prototype);
@@ -23,6 +23,7 @@ define(['css!./emby-radio', 'registerElement'], function () {
     }
 
     EmbyRadioPrototype.attachedCallback = function () {
+        var showFocus = !layoutManager.mobile;
 
         if (this.getAttribute('data-radio') === 'true') {
             return;
@@ -37,6 +38,9 @@ define(['css!./emby-radio', 'registerElement'], function () {
         labelElement.classList.add('mdl-radio');
         labelElement.classList.add('mdl-js-radio');
         labelElement.classList.add('mdl-js-ripple-effect');
+        if (showFocus) {
+            labelElement.classList.add('show-focus');
+        }
 
         var labelTextElement = labelElement.querySelector('span');
 
@@ -57,7 +61,9 @@ define(['css!./emby-radio', 'registerElement'], function () {
         html += '<circle class="mdl-radio__inner-circle" cx="50%" cy="50%" r="25%" fill="currentcolor" />';
         html += '</svg>';
 
-        html += '<div class="mdl-radio__focus-circle"></div>';
+        if (showFocus) {
+            html += '<div class="mdl-radio__focus-circle"></div>';
+        }
 
         html += '</div>';
 
diff --git a/src/themes/purplehaze/theme.css b/src/themes/purplehaze/theme.css
index d65071afa4..45f43abc2f 100644
--- a/src/themes/purplehaze/theme.css
+++ b/src/themes/purplehaze/theme.css
@@ -438,12 +438,12 @@ a[data-role=button] {
     color: #f8f8fe;
 }
 
-.mdl-radio__button:focus + .mdl-radio__circles svg .mdl-radio__outer-circle,
-.mdl-radio__button:focus + .mdl-radio__circles svg .mdl-radio__inner-circle {
+.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles svg .mdl-radio__outer-circle,
+.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles svg .mdl-radio__inner-circle {
     color: #ff77f1;
 }
 
-.mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__focus-circle {
+.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__focus-circle {
     background: #00a4dc;
 }
 

From 9bf5cda44afc5ba2f31b62bd620074a341f556b3 Mon Sep 17 00:00:00 2001
From: Dmitry Lyzo <ashephard0@gmail.com>
Date: Thu, 12 Mar 2020 20:53:49 +0300
Subject: [PATCH 5/5] Fix lint error

---
 src/elements/emby-radio/emby-radio.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/elements/emby-radio/emby-radio.css b/src/elements/emby-radio/emby-radio.css
index f8671ce265..2d7f584171 100644
--- a/src/elements/emby-radio/emby-radio.css
+++ b/src/elements/emby-radio/emby-radio.css
@@ -53,14 +53,14 @@
     cursor: auto;
 }
 
-.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__outer-circle {
-    color: #00a4dc;
-}
-
 .mdl-radio__button:disabled + .mdl-radio__circles .mdl-radio__outer-circle {
     color: rgba(0, 0, 0, 0.26);
 }
 
+.mdl-radio.show-focus .mdl-radio__button:focus + .mdl-radio__circles .mdl-radio__outer-circle {
+    color: #00a4dc;
+}
+
 .mdl-radio__inner-circle {
     transition-duration: 0.2s;
     transition-property: -webkit-transform;