From 4e9e098e91e8c53c9be953c4a452bd41614d44a2 Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Sat, 13 Aug 2022 10:35:54 +0200
Subject: [PATCH 1/5] small UI fixes

---
 src/components/PreferencesPage.vue | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index 63de1040..d313730f 100644
--- a/src/components/PreferencesPage.vue
+++ b/src/components/PreferencesPage.vue
@@ -22,7 +22,7 @@
     </label>
     <label class="pref" for="ddlCountrySelection">
         <strong v-t="'actions.country_selection'" />
-        <select id="ddlCountrySelection" v-model="countrySelected" class="select" @change="onChange($event)">
+        <select id="ddlCountrySelection" v-model="countrySelected" class="select w-50" @change="onChange($event)">
             <option v-for="country in countryMap" :key="country.code" :value="country.code" v-text="country.name" />
         </select>
     </label>
@@ -61,7 +61,7 @@
         <input
             id="txtBufferingGoal"
             v-model="bufferingGoal"
-            class="input w-auto"
+            class="input w-24"
             type="text"
             @change="onChange($event)"
         />
@@ -294,7 +294,7 @@
                 <th v-t="'preferences.instance_locations'" />
                 <th v-t="'preferences.has_cdn'" />
                 <th v-t="'preferences.registered_users'" />
-                <th v-t="'preferences.version'" />
+                <th class="<md:(hidden)" v-t="'preferences.version'" />
                 <th v-t="'preferences.up_to_date'" />
                 <th v-t="'preferences.ssl_score'" />
             </tr>
@@ -303,10 +303,10 @@
             <tr>
                 <td v-text="instance.name" />
                 <td v-text="instance.locations" />
-                <td v-t="`actions.${instance.cdn ? 'yes' : 'no'}`" />
+                <td v-t="`${instance.cdn ? '&#9989;' : '&#10060;'}`" />
                 <td v-text="instance.registered" />
-                <td v-text="instance.version" />
-                <td v-t="`actions.${instance.up_to_date ? 'yes' : 'no'}`" />
+                <td class="<md:(hidden)" v-text="instance.version" />
+                <td v-t="`${instance.up_to_date ? '&#9989;' : '&#10060;'}`" />
                 <td>
                     <a :href="sslScore(instance.api_url)" target="_blank" v-t="'actions.view_ssl_score'" />
                 </td>
@@ -598,6 +598,6 @@ export default {
 
 <style>
 .pref {
-    @apply flex justify-between items-center mx-[15vw] my-2;
+    @apply flex justify-between items-center my-2 mx-[15vw] <md:(mx-[2vw]);
 }
 </style>

From 16ff17c3b51259b8154f9ad4f78900b37f6a1233 Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Sat, 13 Aug 2022 10:42:43 +0200
Subject: [PATCH 2/5] add confirmation dialog to resetting prefs

---
 src/components/PreferencesPage.vue | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index d313730f..2fa2400c 100644
--- a/src/components/PreferencesPage.vue
+++ b/src/components/PreferencesPage.vue
@@ -575,6 +575,7 @@ export default {
             window.location = "/";
         },
         resetPreferences() {
+            if (!confirm(this.$t("actions.reset_preferences") + "?")) return;
             // clear the local storage
             localStorage.clear();
             // redirect to the home page

From 47559730e3565d0cb2b398795b3c525024c0423e Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Sat, 13 Aug 2022 11:29:31 +0200
Subject: [PATCH 3/5] backup and restore prefs

---
 src/components/PreferencesPage.vue | 22 ++++++++++++++++++++++
 src/locales/en.json                |  4 +++-
 2 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index 2fa2400c..f5321f0a 100644
--- a/src/components/PreferencesPage.vue
+++ b/src/components/PreferencesPage.vue
@@ -317,6 +317,14 @@
     <p v-text="`${$t('information.preferences_note')}`" />
     <br />
     <button class="btn" v-text="`${$t('actions.reset_preferences')}`" @click="resetPreferences()" />
+    <button class="btn mx-4" v-text="`${$t('actions.backup_preferences')}`" @click="backupPreferences()" />
+    <label
+        for="fileSelector"
+        class="btn"
+        v-text="`${$t('actions.restore_preferences')}`"
+        @click="restorePreferences()"
+    />
+    <input class="hidden" id="fileSelector" ref="fileSelector" type="file" @change="restorePreferences()" />
 </template>
 
 <script>
@@ -593,6 +601,20 @@ export default {
                 } else alert(resp.error);
             });
         },
+        backupPreferences() {
+            const data = JSON.stringify(localStorage);
+            this.download(data, "preferences.json", "application/json");
+        },
+        restorePreferences() {
+            var file = this.$refs.fileSelector.files[0];
+            file.text().then(text => {
+                const data = JSON.parse(text);
+                Object.keys(data).forEach(function (key) {
+                    localStorage.setItem(key, data[key]);
+                });
+                window.location.reload();
+            });
+        },
     },
 };
 </script>
diff --git a/src/locales/en.json b/src/locales/en.json
index c1af3178..042096c3 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -93,7 +93,9 @@
         "clone_playlist": "Clone Playlist",
         "clone_playlist_success": "Successfully cloned!",
         "download_as_txt": "Download as .txt",
-        "reset_preferences": "Reset preferences"
+        "reset_preferences": "Reset preferences",
+        "backup_preferences": "Backup preferences",
+        "restore_preferences": "Restore preferences"
     },
     "comment": {
         "pinned_by": "Pinned by",

From b2084af8f21cff663af96f0fce4d4ce905d30134 Mon Sep 17 00:00:00 2001
From: Bnyro <yannick.fehler@web.de>
Date: Sat, 13 Aug 2022 13:42:35 +0200
Subject: [PATCH 4/5] fix warning

---
 src/components/PreferencesPage.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index f5321f0a..9f837b57 100644
--- a/src/components/PreferencesPage.vue
+++ b/src/components/PreferencesPage.vue
@@ -303,10 +303,10 @@
             <tr>
                 <td v-text="instance.name" />
                 <td v-text="instance.locations" />
-                <td v-t="`${instance.cdn ? '&#9989;' : '&#10060;'}`" />
+                <td v-text="`${instance.cdn ? '&#9989;' : '&#10060;'}`" />
                 <td v-text="instance.registered" />
                 <td class="<md:(hidden)" v-text="instance.version" />
-                <td v-t="`${instance.up_to_date ? '&#9989;' : '&#10060;'}`" />
+                <td v-text="`${instance.up_to_date ? '&#9989;' : '&#10060;'}`" />
                 <td>
                     <a :href="sslScore(instance.api_url)" target="_blank" v-t="'actions.view_ssl_score'" />
                 </td>
@@ -316,8 +316,8 @@
     <br />
     <p v-text="`${$t('information.preferences_note')}`" />
     <br />
-    <button class="btn" v-text="`${$t('actions.reset_preferences')}`" @click="resetPreferences()" />
-    <button class="btn mx-4" v-text="`${$t('actions.backup_preferences')}`" @click="backupPreferences()" />
+    <button class="btn" v-t="'actions.reset_preferences'" @click="resetPreferences()" />
+    <button class="btn mx-4" v-t="'actions.backup_preferences'" @click="backupPreferences()" />
     <label
         for="fileSelector"
         class="btn"

From fcf9e61756a0aafde696a28fc9d3841349350b36 Mon Sep 17 00:00:00 2001
From: Kavin <20838718+FireMasterK@users.noreply.github.com>
Date: Mon, 15 Aug 2022 00:01:09 +0530
Subject: [PATCH 5/5] Use v-t instead.

---
 src/components/PreferencesPage.vue | 17 ++++++-----------
 src/locales/en.json                |  1 +
 2 files changed, 7 insertions(+), 11 deletions(-)

diff --git a/src/components/PreferencesPage.vue b/src/components/PreferencesPage.vue
index 9f837b57..5696f09c 100644
--- a/src/components/PreferencesPage.vue
+++ b/src/components/PreferencesPage.vue
@@ -34,7 +34,7 @@
         </select>
     </label>
 
-    <h2 class="text-center" v-text="`${$t('titles.player')}`" />
+    <h2 class="text-center" v-t="'titles.player'" />
     <label class="pref" for="chkAutoPlayVideo">
         <strong v-t="'actions.autoplay_video'" />
         <input
@@ -214,7 +214,7 @@
         <input id="chkShowMarkers" v-model="showMarkers" class="checkbox" type="checkbox" @change="onChange($event)" />
     </label>
 
-    <h2 class="text-center" v-text="`${$t('titles.instance')}`" />
+    <h2 class="text-center" v-t="'titles.instance'" />
     <label class="pref" for="ddlInstanceSelection">
         <strong v-text="`${$t('actions.instance_selection')}:`" />
         <select id="ddlInstanceSelection" v-model="selectedInstance" class="select w-auto" @change="onChange($event)">
@@ -258,7 +258,7 @@
 
     <!-- options that are visible only when logged in -->
     <div v-if="this.authenticated">
-        <h2 class="text-center" v-text="`${$t('titles.account')}`"></h2>
+        <h2 class="text-center" v-t="'titles.account'"></h2>
         <label class="pref" for="txtDeleteAccountPassword">
             <strong v-t="'actions.delete_account'" />
             <div class="flex items-center">
@@ -314,16 +314,11 @@
         </tbody>
     </table>
     <br />
-    <p v-text="`${$t('information.preferences_note')}`" />
+    <p v-t="'information.preferences_note'" />
     <br />
     <button class="btn" v-t="'actions.reset_preferences'" @click="resetPreferences()" />
     <button class="btn mx-4" v-t="'actions.backup_preferences'" @click="backupPreferences()" />
-    <label
-        for="fileSelector"
-        class="btn"
-        v-text="`${$t('actions.restore_preferences')}`"
-        @click="restorePreferences()"
-    />
+    <label for="fileSelector" class="btn" v-t="'actions.restore_preferences'" @click="restorePreferences()" />
     <input class="hidden" id="fileSelector" ref="fileSelector" type="file" @change="restorePreferences()" />
 </template>
 
@@ -583,7 +578,7 @@ export default {
             window.location = "/";
         },
         resetPreferences() {
-            if (!confirm(this.$t("actions.reset_preferences") + "?")) return;
+            if (!confirm(this.$t("actions.confirm_reset_preferences"))) return;
             // clear the local storage
             localStorage.clear();
             // redirect to the home page
diff --git a/src/locales/en.json b/src/locales/en.json
index 042096c3..0615ae2e 100644
--- a/src/locales/en.json
+++ b/src/locales/en.json
@@ -94,6 +94,7 @@
         "clone_playlist_success": "Successfully cloned!",
         "download_as_txt": "Download as .txt",
         "reset_preferences": "Reset preferences",
+        "confirm_reset_preferences": "Are you sure you want to reset your preferences?",
         "backup_preferences": "Backup preferences",
         "restore_preferences": "Restore preferences"
     },