fix: reset everything btn

assets/translations/README.md

@@ -16,15 +16,15 @@ To submit or edit a translation, please follow [this guide](../../contributing.m
 ### Translation progress:
 |   | Locale | Translated keys | Based on |
 | :----: | ------ | --------------- | :------: |
-|  | [`en-US`](./en-US.json) | `324` (default locale) |  |
-| ✅ | [`de-DE`](./de-DE.json) | `324/324` (100%) | ─ |
-|  | [`en-GB`](./en-GB.json) | `324/324` (100%) | `en-US` |
-| ✅ | [`es-ES`](./es-ES.json) | `324/324` (100%) | ─ |
-| ✅ | [`fr-FR`](./fr-FR.json) | `324/324` (100%) | ─ |
-| ✅ | [`hi-IN`](./hi-IN.json) | `324/324` (100%) | ─ |
-| ✅ | [`ja-JP`](./ja-JP.json) | `324/324` (100%) | ─ |
-| ✅ | [`pt-BR`](./pt-BR.json) | `324/324` (100%) | ─ |
-| ✅ | [`zh-CN`](./zh-CN.json) | `324/324` (100%) | ─ |
+|  | [`en-US`](./en-US.json) | `328` (default locale) |  |
+| ⚠ | [`de-DE`](./de-DE.json) | `327/328` (99.7%) | ─ |
+|  | [`en-GB`](./en-GB.json) | `328/328` (100%) | `en-US` |
+| ⚠ | [`es-ES`](./es-ES.json) | `324/328` (98.8%) | ─ |
+| ⚠ | [`fr-FR`](./fr-FR.json) | `324/328` (98.8%) | ─ |
+| ⚠ | [`hi-IN`](./hi-IN.json) | `324/328` (98.8%) | ─ |
+| ⚠ | [`ja-JP`](./ja-JP.json) | `324/328` (98.8%) | ─ |
+| ⚠ | [`pt-BR`](./pt-BR.json) | `324/328` (98.8%) | ─ |
+| ⚠ | [`zh-CN`](./zh-CN.json) | `324/328` (98.8%) | ─ |
 
 <sub>
 ✅ - Fully translated
@@ -44,4 +44,77 @@ This means to figure out which keys are untranslated, you will need to manually
 <br>
 
 ### Missing keys:
-No missing keys
+
+<details><summary><code>de-DE</code> - 1 missing key <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `reset_everything_confirm` | `Do you really want to reset all stored data to the default values?\nThe page will be automatically reloaded.` |
+
+<br></details>
+
+<details><summary><code>es-ES</code> - 4 missing keys <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `reset_everything_confirm` | `Do you really want to reset all stored data to the default values?\nThe page will be automatically reloaded.` |
+| `feature_desc_resetEverything` | `Reset all stored data to the default values` |
+| `feature_btn_resetEverything` | `Reset everything` |
+| `feature_btn_resetEverything_running` | `Resetting...` |
+
+<br></details>
+
+<details><summary><code>fr-FR</code> - 4 missing keys <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `reset_everything_confirm` | `Do you really want to reset all stored data to the default values?\nThe page will be automatically reloaded.` |
+| `feature_desc_resetEverything` | `Reset all stored data to the default values` |
+| `feature_btn_resetEverything` | `Reset everything` |
+| `feature_btn_resetEverything_running` | `Resetting...` |
+
+<br></details>
+
+<details><summary><code>hi-IN</code> - 4 missing keys <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `reset_everything_confirm` | `Do you really want to reset all stored data to the default values?\nThe page will be automatically reloaded.` |
+| `feature_desc_resetEverything` | `Reset all stored data to the default values` |
+| `feature_btn_resetEverything` | `Reset everything` |
+| `feature_btn_resetEverything_running` | `Resetting...` |
+
+<br></details>
+
+<details><summary><code>ja-JP</code> - 4 missing keys <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `reset_everything_confirm` | `Do you really want to reset all stored data to the default values?\nThe page will be automatically reloaded.` |
+| `feature_desc_resetEverything` | `Reset all stored data to the default values` |
+| `feature_btn_resetEverything` | `Reset everything` |
+| `feature_btn_resetEverything_running` | `Resetting...` |
+
+<br></details>
+
+<details><summary><code>pt-BR</code> - 4 missing keys <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `reset_everything_confirm` | `Do you really want to reset all stored data to the default values?\nThe page will be automatically reloaded.` |
+| `feature_desc_resetEverything` | `Reset all stored data to the default values` |
+| `feature_btn_resetEverything` | `Reset everything` |
+| `feature_btn_resetEverything_running` | `Resetting...` |
+
+<br></details>
+
+<details><summary><code>zh-CN</code> - 4 missing keys <i>(click to show)</i></summary><br>
+
+| Key | English text |
+| --- | ------------ |
+| `reset_everything_confirm` | `Do you really want to reset all stored data to the default values?\nThe page will be automatically reloaded.` |
+| `feature_desc_resetEverything` | `Reset all stored data to the default values` |
+| `feature_btn_resetEverything` | `Reset everything` |
+| `feature_btn_resetEverything_running` | `Resetting...` |
+
+<br></details>

dist/BetterYTM.css

@@ -1548,6 +1548,150 @@ hr {
   border: revert;
 }
 
+:root {
+  --bytm-auto-like-btn-color: #bf87f0;
+}
+
+#bytm-auto-like-channels-list {
+  display: flex;
+  flex-direction: column;
+  overflow-x: hidden;
+  overflow-y: auto;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  /* idk how else to get the scroll bar to show up correctly */
+  max-height: calc(min(100vh - 40px, var(--bytm-dialog-height-max)) - 300px);
+}
+
+.bytm-auto-like-channels-desc {
+  padding: 0px 15px;
+  white-space: pre-wrap;
+  font-size: 1.6rem;
+  margin-bottom: 10px;
+}
+
+.bytm-auto-like-channels-search-cont {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 5px;
+  padding: 0px 15px;
+  margin-bottom: 10px;
+}
+
+.bytm-auto-like-channels-searchbar {
+  min-width: calc(min(250px, 50%));
+}
+
+.bytm-auto-like-channel-row-left-cont {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.bytm-auto-like-channel-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 8px 15px;
+  transition: background-color 0.15s ease-out;
+}
+
+.bytm-auto-like-channel-row.hidden {
+  display: none;
+}
+
+.bytm-auto-like-channel-row:hover {
+  background-color: var(--bytm-menu-bg-highlight);
+}
+
+.bytm-auto-like-channel-row
+  .bytm-toggle-input-wrapper.bytm-auto-like-channel-toggle {
+  --toggle-height: 18px !important;
+  --toggle-width: 36px !important;
+}
+
+.bytm-auto-like-channel-row .bytm-generic-btn {
+  --bytm-generic-btn-width: 30px;
+  --bytm-generic-btn-height: 30px;
+}
+
+.bytm-auto-like-channel-name-label {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.bytm-auto-like-channel-id {
+  cursor: text;
+  font-family: var(--bytm-font-monospace);
+  font-size: 1.25rem;
+  color: #aaa;
+  margin-left: 10px;
+}
+
+/* add more specificity to override the default styles */
+
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn {
+  margin-right: 8px;
+  border: 1px solid var(--bytm-auto-like-btn-color);
+  box-sizing: border-box;
+  background-color: transparent;
+  transition: border-color 0.2s ease;
+  animation: none;
+}
+
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn.left-margin {
+  margin: 0 0 0 8px;
+}
+
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn.right-margin {
+  margin: 0 8px 0 0;
+}
+
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn:hover {
+  background-color: rgba(255, 255, 255, 0.1);
+}
+
+body.bytm-dom-ytm
+  ytmusic-subscribe-button-renderer
+  #button-shape-subscribe:hover
+  > button {
+  background-color: rgba(255, 255, 255, 0.1) !important;
+}
+
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn:active {
+  background-color: rgba(255, 255, 255, 0.2);
+}
+
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn:active,
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn.toggled {
+  border-color: rgba(255, 255, 255, 0.2);
+}
+
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn svg path {
+  fill: var(--bytm-auto-like-btn-color);
+  transition: fill 0.2s ease;
+}
+
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn:active svg path,
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn.toggled svg path {
+  fill: var(--ytmusic-subscribe-button-color, rgba(255, 255, 255, 0.7));
+}
+
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn .bytm-generic-long-btn-txt {
+  font-weight: 500;
+  color: var(--bytm-auto-like-btn-color);
+  transition: color 0.2s ease;
+}
+
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn:active
+  .bytm-generic-long-btn-txt,
+.bytm-generic-btn.long.bytm-auto-like-toggle-btn.toggled
+  .bytm-generic-long-btn-txt {
+  color: var(--ytmusic-subscribe-button-color, rgba(255, 255, 255, 0.7));
+}
+
 /* #region misc */
 
 :root {
@@ -2013,150 +2157,6 @@ ytmusic-app-layout[player-ui-state="FULLSCREEN"] .bytm-vote-label {
   color: #fff;
 }
 
-:root {
-  --bytm-auto-like-btn-color: #bf87f0;
-}
-
-#bytm-auto-like-channels-list {
-  display: flex;
-  flex-direction: column;
-  overflow-x: hidden;
-  overflow-y: auto;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  /* idk how else to get the scroll bar to show up correctly */
-  max-height: calc(min(100vh - 40px, var(--bytm-dialog-height-max)) - 300px);
-}
-
-.bytm-auto-like-channels-desc {
-  padding: 0px 15px;
-  white-space: pre-wrap;
-  font-size: 1.6rem;
-  margin-bottom: 10px;
-}
-
-.bytm-auto-like-channels-search-cont {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 5px;
-  padding: 0px 15px;
-  margin-bottom: 10px;
-}
-
-.bytm-auto-like-channels-searchbar {
-  min-width: calc(min(250px, 50%));
-}
-
-.bytm-auto-like-channel-row-left-cont {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-}
-
-.bytm-auto-like-channel-row {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 8px 15px;
-  transition: background-color 0.15s ease-out;
-}
-
-.bytm-auto-like-channel-row.hidden {
-  display: none;
-}
-
-.bytm-auto-like-channel-row:hover {
-  background-color: var(--bytm-menu-bg-highlight);
-}
-
-.bytm-auto-like-channel-row
-  .bytm-toggle-input-wrapper.bytm-auto-like-channel-toggle {
-  --toggle-height: 18px !important;
-  --toggle-width: 36px !important;
-}
-
-.bytm-auto-like-channel-row .bytm-generic-btn {
-  --bytm-generic-btn-width: 30px;
-  --bytm-generic-btn-height: 30px;
-}
-
-.bytm-auto-like-channel-name-label {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-}
-
-.bytm-auto-like-channel-id {
-  cursor: text;
-  font-family: var(--bytm-font-monospace);
-  font-size: 1.25rem;
-  color: #aaa;
-  margin-left: 10px;
-}
-
-/* add more specificity to override the default styles */
-
-.bytm-generic-btn.long.bytm-auto-like-toggle-btn {
-  margin-right: 8px;
-  border: 1px solid var(--bytm-auto-like-btn-color);
-  box-sizing: border-box;
-  background-color: transparent;
-  transition: border-color 0.2s ease;
-  animation: none;
-}
-
-.bytm-generic-btn.long.bytm-auto-like-toggle-btn.left-margin {
-  margin: 0 0 0 8px;
-}
-
-.bytm-generic-btn.long.bytm-auto-like-toggle-btn.right-margin {
-  margin: 0 8px 0 0;
-}
-
-.bytm-generic-btn.long.bytm-auto-like-toggle-btn:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-body.bytm-dom-ytm
-  ytmusic-subscribe-button-renderer
-  #button-shape-subscribe:hover
-  > button {
-  background-color: rgba(255, 255, 255, 0.1) !important;
-}
-
-.bytm-generic-btn.long.bytm-auto-like-toggle-btn:active {
-  background-color: rgba(255, 255, 255, 0.2);
-}
-
-.bytm-generic-btn.long.bytm-auto-like-toggle-btn:active,
-.bytm-generic-btn.long.bytm-auto-like-toggle-btn.toggled {
-  border-color: rgba(255, 255, 255, 0.2);
-}
-
-.bytm-generic-btn.long.bytm-auto-like-toggle-btn svg path {
-  fill: var(--bytm-auto-like-btn-color);
-  transition: fill 0.2s ease;
-}
-
-.bytm-generic-btn.long.bytm-auto-like-toggle-btn:active svg path,
-.bytm-generic-btn.long.bytm-auto-like-toggle-btn.toggled svg path {
-  fill: var(--ytmusic-subscribe-button-color, rgba(255, 255, 255, 0.7));
-}
-
-.bytm-generic-btn.long.bytm-auto-like-toggle-btn .bytm-generic-long-btn-txt {
-  font-weight: 500;
-  color: var(--bytm-auto-like-btn-color);
-  transition: color 0.2s ease;
-}
-
-.bytm-generic-btn.long.bytm-auto-like-toggle-btn:active
-  .bytm-generic-long-btn-txt,
-.bytm-generic-btn.long.bytm-auto-like-toggle-btn.toggled
-  .bytm-generic-long-btn-txt {
-  color: var(--ytmusic-subscribe-button-color, rgba(255, 255, 255, 0.7));
-}
-
 :root {
   --bytm-themed-bg: var(--ts-playerpage-color, #030303);
 }

src/features/index.ts

@@ -8,7 +8,7 @@ import langMapping from "../../assets/locales.json" with { type: "json" };
 import { getAutoLikeDialog, getPluginListDialog, showPrompt } from "../dialogs/index.js";
 import { showIconToast } from "../components/index.js";
 import { mode } from "../constants.js";
-import { storeSerializer } from "../storeSerializer.js";
+import { getStoreSerializer } from "../storeSerializer.js";
 
 //#region re-exports
 
@@ -769,7 +769,7 @@ export const featInfo = {
         type: "confirm",
         message: t("reset_everything_confirm"),
       })) {
-        await storeSerializer.resetStoresData();
+        await getStoreSerializer().resetStoresData();
         location.reload();
       }
     },

src/index.ts

@@ -35,7 +35,7 @@ import {
   // menu
   addConfigMenuOptionYT, addConfigMenuOptionYTM,
 } from "./features/index.js";
-import { storeSerializer } from "./storeSerializer.js";
+import { getStoreSerializer } from "./storeSerializer.js";
 import { MarkdownDialog } from "./components/index.js";
 
 //#region cns. watermark
@@ -498,7 +498,7 @@ function registerDevCommands() {
   });
 
   GM.registerMenuCommand("Export all data using DataStoreSerializer", async () => {
-    const ser = await storeSerializer.serialize();
+    const ser = await getStoreSerializer().serialize();
     dbg("Serialized data stores:", JSON.stringify(JSON.parse(ser)));
     alert("See console.");
   });
@@ -506,7 +506,7 @@ function registerDevCommands() {
   GM.registerMenuCommand("Import all data using DataStoreSerializer", async () => {
     const input = await showPrompt({ type: "prompt", message: "Enter the serialized data to import:" });
     if(input && input.length > 0) {
-      await storeSerializer.deserialize(input);
+      await getStoreSerializer().deserialize(input);
       alert("Imported data. Reload the page to apply changes.");
     }
   });

src/storeSerializer.ts

@@ -4,10 +4,17 @@ import { configStore } from "./config.js";
 import { autoLikeStore } from "./features/input.js";
 
 /** Central serializer for all data stores */
-export const storeSerializer = new DataStoreSerializer([
-  configStore,
-  autoLikeStore,
-], {
-  addChecksum: true,
-  ensureIntegrity: true,
-});
+let serializer: DataStoreSerializer | undefined;
+
+export function getStoreSerializer() {
+  if(!serializer) {
+    serializer = new DataStoreSerializer([
+      configStore,
+      autoLikeStore,
+    ], {
+      addChecksum: true,
+      ensureIntegrity: true,
+    });
+  }
+  return serializer;
+}