From c4ab1a5868b2dc6251e2bfdfc3f46bedd7bfb973 Mon Sep 17 00:00:00 2001
From: Madh93 <mhdez@protonmail.com>
Date: Wed, 6 Apr 2022 17:20:52 +0100
Subject: [PATCH] Show subtitle text color setting

---
 .../subtitlesettings/subtitlesettings.js        |  8 +++++++-
 .../subtitlesettings.template.html              | 17 +++++++++++++++--
 src/elements/emby-input/emby-input.scss         |  5 +++++
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/src/components/subtitlesettings/subtitlesettings.js b/src/components/subtitlesettings/subtitlesettings.js
index 067d8f9e4..c20120039 100644
--- a/src/components/subtitlesettings/subtitlesettings.js
+++ b/src/components/subtitlesettings/subtitlesettings.js
@@ -32,7 +32,7 @@ function getSubtitleAppearanceObject(context) {
     appearanceSettings.dropShadow = context.querySelector('#selectDropShadow').value;
     appearanceSettings.font = context.querySelector('#selectFont').value;
     appearanceSettings.textBackground = context.querySelector('#inputTextBackground').value;
-    appearanceSettings.textColor = context.querySelector('#inputTextColor').value;
+    appearanceSettings.textColor = layoutManager.tv ? context.querySelector('#selectTextColor').value : context.querySelector('#inputTextColor').value;
     appearanceSettings.verticalPosition = context.querySelector('#sliderVerticalPosition').value;
 
     return appearanceSettings;
@@ -57,6 +57,7 @@ function loadForm(context, user, userSettings, appearanceSettings, apiClient) {
         context.querySelector('#selectTextWeight').value = appearanceSettings.textWeight || 'normal';
         context.querySelector('#selectDropShadow').value = appearanceSettings.dropShadow || '';
         context.querySelector('#inputTextBackground').value = appearanceSettings.textBackground || 'transparent';
+        context.querySelector('#selectTextColor').value = appearanceSettings.textColor || '#ffffff';
         context.querySelector('#inputTextColor').value = appearanceSettings.textColor || '#ffffff';
         context.querySelector('#selectFont').value = appearanceSettings.font || '';
         context.querySelector('#sliderVerticalPosition').value = appearanceSettings.verticalPosition;
@@ -171,6 +172,7 @@ function embed(options, self) {
     options.element.querySelector('#selectTextWeight').addEventListener('change', onAppearanceFieldChange);
     options.element.querySelector('#selectDropShadow').addEventListener('change', onAppearanceFieldChange);
     options.element.querySelector('#selectFont').addEventListener('change', onAppearanceFieldChange);
+    options.element.querySelector('#selectTextColor').addEventListener('change', onAppearanceFieldChange);
     options.element.querySelector('#inputTextColor').addEventListener('change', onAppearanceFieldChange);
     options.element.querySelector('#inputTextBackground').addEventListener('change', onAppearanceFieldChange);
 
@@ -201,6 +203,10 @@ function embed(options, self) {
                 sliderVerticalPosition.classList.add('focusable');
                 sliderVerticalPosition.enableKeyboardDragging();
             }, 0);
+
+            // Replace color picker
+            dom.parentWithTag(options.element.querySelector('#inputTextColor'), 'DIV').classList.add('hide');
+            dom.parentWithTag(options.element.querySelector('#selectTextColor'), 'DIV').classList.remove('hide');
         }
 
         options.element.querySelector('.chkPreview').addEventListener('change', (e) => {
diff --git a/src/components/subtitlesettings/subtitlesettings.template.html b/src/components/subtitlesettings/subtitlesettings.template.html
index 941cd937d..685b03997 100644
--- a/src/components/subtitlesettings/subtitlesettings.template.html
+++ b/src/components/subtitlesettings/subtitlesettings.template.html
@@ -95,8 +95,21 @@
             <input is="emby-input" id="inputTextBackground" label="${LabelTextBackgroundColor}" type="text" />
         </div>
 
-        <div class="inputContainer hide">
-            <input is="emby-input" id="inputTextColor" label="${LabelTextColor}" type="text" />
+        <div class="selectContainer">
+            <input is="emby-input" id="inputTextColor" label="${LabelTextColor}" type="color" />
+        </div>
+
+        <div class="selectContainer hide">
+            <select is="emby-select" id="selectTextColor" label="${LabelTextColor}">
+                <option value="#ffffff">${White}</option>
+                <option value="#ffff00">${Yellow}</option>
+                <option value="#008000">${Green}</option>
+                <option value="#00ffff">${Cyan}</option>
+                <option value="#0000ff">${Blue}</option>
+                <option value="#ff00ff">${Magenta}</option>
+                <option value="#ff0000">${Red}</option>
+                <option value="#000000">${Black}</option>
+            </select>
         </div>
 
         <div class="selectContainer">
diff --git a/src/elements/emby-input/emby-input.scss b/src/elements/emby-input/emby-input.scss
index 195e68027..08376e5de 100644
--- a/src/elements/emby-input/emby-input.scss
+++ b/src/elements/emby-input/emby-input.scss
@@ -17,6 +17,11 @@
     width: 100%;
 }
 
+.emby-input[type=color] {
+    height: 2.5em;
+    padding: 0;
+}
+
 .emby-input::-moz-focus-inner {
     border: 0;
 }