feat: more autoLike stuff

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) | 261 (default locale) |  |
-| ‼️ | [`de_DE`](./de_DE.json) | `210/261` (80.5%) | ─ |
-| ─ | [`en_UK`](./en_UK.json) | `261` (100%) | `en_US` |
-| ‼️ | [`es_ES`](./es_ES.json) | `210/261` (80.5%) | ─ |
-| ‼️ | [`fr_FR`](./fr_FR.json) | `210/261` (80.5%) | ─ |
-| ‼️ | [`hi_IN`](./hi_IN.json) | `210/261` (80.5%) | ─ |
-| ‼️ | [`ja_JA`](./ja_JA.json) | `210/261` (80.5%) | ─ |
-| ‼️ | [`pt_BR`](./pt_BR.json) | `210/261` (80.5%) | ─ |
-| ‼️ | [`zh_CN`](./zh_CN.json) | `210/261` (80.5%) | ─ |
+| ─ | [`en_US`](./en_US.json) | 263 (default locale) |  |
+| ‼️ | [`de_DE`](./de_DE.json) | `210/263` (79.8%) | ─ |
+| ─ | [`en_UK`](./en_UK.json) | `263` (100%) | `en_US` |
+| ‼️ | [`es_ES`](./es_ES.json) | `210/263` (79.8%) | ─ |
+| ‼️ | [`fr_FR`](./fr_FR.json) | `210/263` (79.8%) | ─ |
+| ‼️ | [`hi_IN`](./hi_IN.json) | `210/263` (79.8%) | ─ |
+| ‼️ | [`ja_JA`](./ja_JA.json) | `210/263` (79.8%) | ─ |
+| ‼️ | [`pt_BR`](./pt_BR.json) | `210/263` (79.8%) | ─ |
+| ‼️ | [`zh_CN`](./zh_CN.json) | `210/263` (79.8%) | ─ |
 
 <sub>
 ✅ - Fully translated
@@ -45,13 +45,14 @@ This means to figure out which keys are untranslated, you will need to manually
 
 ### Missing keys:
 
-<details><summary><code>de_DE</code> - 51 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>de_DE</code> - 53 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `export_import` | `Export/Import` |
 | `close_tooltip` | `Click to close` |
-| `create_new_entry` | `Create a new entry` |
+| `new_entry` | `New entry` |
+| `new_entry_tooltip` | `Click to create a new entry` |
 | `remove_entry` | `Remove this entry` |
 | `edit_entry` | `Edit this entry` |
 | `open_lyrics_search_prompt` | `Enter the song title and artist to search for the lyrics:` |
@@ -70,6 +71,7 @@ This means to figure out which keys are untranslated, you will need to manually
 | `auto_like_disabled_toast` | `Auto-liking disabled` |
 | `auto_liked_a_channels_song` | `Liked song by %1` |
 | `auto_liked_a_channels_video` | `Liked video by %1` |
+| `auto_like_export_or_import_tooltip` | `Export or import your auto-liked channels` |
 | `vote_label_likes` | `%1 likes` |
 | `vote_label_dislikes` | `%1 dislikes` |
 | `vote_ratio_disabled` | `Disabled` |
@@ -103,13 +105,14 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>es_ES</code> - 51 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>es_ES</code> - 53 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `export_import` | `Export/Import` |
 | `close_tooltip` | `Click to close` |
-| `create_new_entry` | `Create a new entry` |
+| `new_entry` | `New entry` |
+| `new_entry_tooltip` | `Click to create a new entry` |
 | `remove_entry` | `Remove this entry` |
 | `edit_entry` | `Edit this entry` |
 | `open_lyrics_search_prompt` | `Enter the song title and artist to search for the lyrics:` |
@@ -128,6 +131,7 @@ This means to figure out which keys are untranslated, you will need to manually
 | `auto_like_disabled_toast` | `Auto-liking disabled` |
 | `auto_liked_a_channels_song` | `Liked song by %1` |
 | `auto_liked_a_channels_video` | `Liked video by %1` |
+| `auto_like_export_or_import_tooltip` | `Export or import your auto-liked channels` |
 | `vote_label_likes` | `%1 likes` |
 | `vote_label_dislikes` | `%1 dislikes` |
 | `vote_ratio_disabled` | `Disabled` |
@@ -161,13 +165,14 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>fr_FR</code> - 51 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>fr_FR</code> - 53 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `export_import` | `Export/Import` |
 | `close_tooltip` | `Click to close` |
-| `create_new_entry` | `Create a new entry` |
+| `new_entry` | `New entry` |
+| `new_entry_tooltip` | `Click to create a new entry` |
 | `remove_entry` | `Remove this entry` |
 | `edit_entry` | `Edit this entry` |
 | `open_lyrics_search_prompt` | `Enter the song title and artist to search for the lyrics:` |
@@ -186,6 +191,7 @@ This means to figure out which keys are untranslated, you will need to manually
 | `auto_like_disabled_toast` | `Auto-liking disabled` |
 | `auto_liked_a_channels_song` | `Liked song by %1` |
 | `auto_liked_a_channels_video` | `Liked video by %1` |
+| `auto_like_export_or_import_tooltip` | `Export or import your auto-liked channels` |
 | `vote_label_likes` | `%1 likes` |
 | `vote_label_dislikes` | `%1 dislikes` |
 | `vote_ratio_disabled` | `Disabled` |
@@ -219,13 +225,14 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>hi_IN</code> - 51 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>hi_IN</code> - 53 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `export_import` | `Export/Import` |
 | `close_tooltip` | `Click to close` |
-| `create_new_entry` | `Create a new entry` |
+| `new_entry` | `New entry` |
+| `new_entry_tooltip` | `Click to create a new entry` |
 | `remove_entry` | `Remove this entry` |
 | `edit_entry` | `Edit this entry` |
 | `open_lyrics_search_prompt` | `Enter the song title and artist to search for the lyrics:` |
@@ -244,6 +251,7 @@ This means to figure out which keys are untranslated, you will need to manually
 | `auto_like_disabled_toast` | `Auto-liking disabled` |
 | `auto_liked_a_channels_song` | `Liked song by %1` |
 | `auto_liked_a_channels_video` | `Liked video by %1` |
+| `auto_like_export_or_import_tooltip` | `Export or import your auto-liked channels` |
 | `vote_label_likes` | `%1 likes` |
 | `vote_label_dislikes` | `%1 dislikes` |
 | `vote_ratio_disabled` | `Disabled` |
@@ -277,13 +285,14 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>ja_JA</code> - 51 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>ja_JA</code> - 53 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `export_import` | `Export/Import` |
 | `close_tooltip` | `Click to close` |
-| `create_new_entry` | `Create a new entry` |
+| `new_entry` | `New entry` |
+| `new_entry_tooltip` | `Click to create a new entry` |
 | `remove_entry` | `Remove this entry` |
 | `edit_entry` | `Edit this entry` |
 | `open_lyrics_search_prompt` | `Enter the song title and artist to search for the lyrics:` |
@@ -302,6 +311,7 @@ This means to figure out which keys are untranslated, you will need to manually
 | `auto_like_disabled_toast` | `Auto-liking disabled` |
 | `auto_liked_a_channels_song` | `Liked song by %1` |
 | `auto_liked_a_channels_video` | `Liked video by %1` |
+| `auto_like_export_or_import_tooltip` | `Export or import your auto-liked channels` |
 | `vote_label_likes` | `%1 likes` |
 | `vote_label_dislikes` | `%1 dislikes` |
 | `vote_ratio_disabled` | `Disabled` |
@@ -335,13 +345,14 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>pt_BR</code> - 51 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>pt_BR</code> - 53 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `export_import` | `Export/Import` |
 | `close_tooltip` | `Click to close` |
-| `create_new_entry` | `Create a new entry` |
+| `new_entry` | `New entry` |
+| `new_entry_tooltip` | `Click to create a new entry` |
 | `remove_entry` | `Remove this entry` |
 | `edit_entry` | `Edit this entry` |
 | `open_lyrics_search_prompt` | `Enter the song title and artist to search for the lyrics:` |
@@ -360,6 +371,7 @@ This means to figure out which keys are untranslated, you will need to manually
 | `auto_like_disabled_toast` | `Auto-liking disabled` |
 | `auto_liked_a_channels_song` | `Liked song by %1` |
 | `auto_liked_a_channels_video` | `Liked video by %1` |
+| `auto_like_export_or_import_tooltip` | `Export or import your auto-liked channels` |
 | `vote_label_likes` | `%1 likes` |
 | `vote_label_dislikes` | `%1 dislikes` |
 | `vote_ratio_disabled` | `Disabled` |
@@ -393,13 +405,14 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>zh_CN</code> - 51 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>zh_CN</code> - 53 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `export_import` | `Export/Import` |
 | `close_tooltip` | `Click to close` |
-| `create_new_entry` | `Create a new entry` |
+| `new_entry` | `New entry` |
+| `new_entry_tooltip` | `Click to create a new entry` |
 | `remove_entry` | `Remove this entry` |
 | `edit_entry` | `Edit this entry` |
 | `open_lyrics_search_prompt` | `Enter the song title and artist to search for the lyrics:` |
@@ -418,6 +431,7 @@ This means to figure out which keys are untranslated, you will need to manually
 | `auto_like_disabled_toast` | `Auto-liking disabled` |
 | `auto_liked_a_channels_song` | `Liked song by %1` |
 | `auto_liked_a_channels_video` | `Liked video by %1` |
+| `auto_like_export_or_import_tooltip` | `Export or import your auto-liked channels` |
 | `vote_label_likes` | `%1 likes` |
 | `vote_label_dislikes` | `%1 dislikes` |
 | `vote_ratio_disabled` | `Disabled` |

assets/translations/en_US.json

@@ -48,7 +48,8 @@
     "toggled_off": "Off",
     "trigger_btn_action": "Run action",
     "trigger_btn_action_running": "Running...",
-    "create_new_entry": "Create a new entry",
+    "new_entry": "New entry",
+    "new_entry_tooltip": "Click to create a new entry",
     "remove_entry": "Remove this entry",
     "edit_entry": "Edit this entry",
     "remove_from_queue": "Remove this song from the queue",
@@ -148,6 +149,7 @@
     "auto_like_disabled_toast": "Auto-liking disabled",
     "auto_liked_a_channels_song": "Liked song by %1",
     "auto_liked_a_channels_video": "Liked video by %1",
+    "auto_like_export_or_import_tooltip": "Export or import your auto-liked channels",
 
     "vote_label_likes": "%1 likes",
     "vote_label_dislikes": "%1 dislikes",

dist/BetterYTM.css

@@ -354,7 +354,7 @@
   border-radius: 0px 0px var(--bytm-dialog-border-radius) var(--bytm-dialog-border-radius);
 }
 
-#bytm-dialog-footer-buttons-cont button:not(:last-of-type) {
+.bytm-dialog-footer-buttons-cont button:not(:last-of-type) {
   margin-right: 15px;
 }
 
@@ -1002,7 +1002,7 @@ body .bytm-ripple.slower {
   border-radius: 0px 0px var(--bytm-menu-border-radius) var(--bytm-menu-border-radius);
 }
 
-#bytm-menu-footer-buttons-cont button:not(:last-of-type) {
+.bytm-menu-footer-buttons-cont button:not(:last-of-type) {
   margin-right: 15px;
 }
 

src/components/BytmDialog.css

@@ -179,7 +179,7 @@
   border-radius: 0px 0px var(--bytm-dialog-border-radius) var(--bytm-dialog-border-radius);
 }
 
-#bytm-dialog-footer-buttons-cont button:not(:last-of-type) {
+.bytm-dialog-footer-buttons-cont button:not(:last-of-type) {
   margin-right: 15px;
 }
 

src/dialogs/autoLike.ts

@@ -58,6 +58,7 @@ async function renderBody() {
 
   contElem.appendChild(descriptionEl);
 
+  // TODO: remove
   const addNewWrapper = document.createElement("div");
   addNewWrapper.id = "bytm-auto-like-channels-add-new-wrapper";
 
@@ -65,59 +66,13 @@ async function renderBody() {
   addNewEl.id = "bytm-auto-like-channels-add-new";
   addNewEl.role = "button";
   addNewEl.tabIndex = 0;
-  addNewEl.textContent = `+ ${t("create_new_entry")}`;
-  addNewEl.title = addNewEl.ariaLabel = t("create_new_entry");
+  addNewEl.textContent = `+ ${t("new_entry_tooltip")}`;
+  addNewEl.title = addNewEl.ariaLabel = t("new_entry_tooltip");
   addNewEl.classList.add("bytm-link", "bytm-no-select");
 
   addNewWrapper.appendChild(addNewEl);
 
-  onInteraction(addNewEl, async () => {
-    await autoLikeStore.loadData();
-
-    const idPrompt = prompt(t("add_auto_like_channel_id_prompt"))?.trim();
-    if(!idPrompt)
-      return;
-
-    const id = parseChannelIdFromUrl(idPrompt) ?? (idPrompt.trim().startsWith("@") ? idPrompt.trim() : null);
-
-    if(!id || id.length <= 0)
-      return alert(t("add_auto_like_channel_invalid_id"));
-
-    let overwriteName = false;
-
-    if(autoLikeStore.getData().channels.some((ch) => ch.id === id)) {
-      if(!confirm(t("add_auto_like_channel_already_exists_prompt_new_name")))
-        return;
-      overwriteName = true;
-    }
-
-    const name = prompt(t("add_auto_like_channel_name_prompt"))?.trim();
-    if(!name || name.length === 0)
-      return;
-
-    await autoLikeStore.setData(
-      overwriteName
-        ? {
-          channels: autoLikeStore.getData().channels
-            .map((ch) => ch.id === id ? { ...ch, name } : ch),
-        }
-        : {
-          channels: [
-            ...autoLikeStore.getData().channels,
-            { id, name, enabled: true },
-          ],
-        }
-    );
-
-    siteEvents.emit("autoLikeChannelsUpdated");
-
-    const unsub = autoLikeDialog?.on("clear", async () => {
-      unsub?.();
-      await autoLikeDialog?.open();
-    });
-
-    autoLikeDialog?.unmount();
-  });
+  onInteraction(addNewEl, addAutoLikeEntryPrompts);
 
   contElem.appendChild(addNewWrapper);
 
@@ -231,18 +186,31 @@ function renderFooter() {
   const wrapperEl = document.createElement("div");
   wrapperEl.classList.add("bytm-auto-like-channels-footer-wrapper");
 
+  const leftItemsWrapper = document.createElement("div");
+  leftItemsWrapper.classList.add("bytm-dialog-footer-buttons-cont");
+
+  const addNewBtnElem = document.createElement("button");
+  addNewBtnElem.classList.add("bytm-btn");
+  addNewBtnElem.textContent = t("new_entry");
+  addNewBtnElem.ariaLabel = addNewBtnElem.title = t("new_entry_tooltip");
+  leftItemsWrapper.appendChild(addNewBtnElem);
+
   const importExportBtnElem = document.createElement("button");
   importExportBtnElem.classList.add("bytm-btn");
   importExportBtnElem.textContent = t("export_import");
-  importExportBtnElem.ariaLabel = importExportBtnElem.title = t("TODO:auto_like_import_or_export_tooltip");
-  wrapperEl.appendChild(importExportBtnElem);
+  importExportBtnElem.ariaLabel = importExportBtnElem.title = t("auto_like_export_or_import_tooltip");
+  leftItemsWrapper.appendChild(importExportBtnElem);
+
+  wrapperEl.appendChild(leftItemsWrapper);
 
   const closeBtnElem = document.createElement("button");
   closeBtnElem.classList.add("bytm-btn");
   closeBtnElem.textContent = t("close");
   closeBtnElem.ariaLabel = closeBtnElem.title = t("close_tooltip");
+
   wrapperEl.appendChild(closeBtnElem);
 
+  onInteraction(addNewBtnElem, addAutoLikeEntryPrompts);
   onInteraction(importExportBtnElem, openImportExportAutoLikeChannelsDialog);
   onInteraction(closeBtnElem, () => autoLikeDialog?.close());
 
@@ -250,7 +218,55 @@ function renderFooter() {
 }
 
 function openImportExportAutoLikeChannelsDialog() {
-  void "TODO: ImportExportDialog stuff";
+  alert("TODO: ImportExportDialog stuff");
+}
+
+async function addAutoLikeEntryPrompts() {
+  await autoLikeStore.loadData();
+
+  const idPrompt = prompt(t("add_auto_like_channel_id_prompt"))?.trim();
+  if(!idPrompt)
+    return;
+
+  const id = parseChannelIdFromUrl(idPrompt) ?? (idPrompt.trim().startsWith("@") ? idPrompt.trim() : null);
+
+  if(!id || id.length <= 0)
+    return alert(t("add_auto_like_channel_invalid_id"));
+
+  let overwriteName = false;
+
+  if(autoLikeStore.getData().channels.some((ch) => ch.id === id)) {
+    if(!confirm(t("add_auto_like_channel_already_exists_prompt_new_name")))
+      return;
+    overwriteName = true;
+  }
+
+  const name = prompt(t("add_auto_like_channel_name_prompt"))?.trim();
+  if(!name || name.length === 0)
+    return;
+
+  await autoLikeStore.setData(
+    overwriteName
+      ? {
+        channels: autoLikeStore.getData().channels
+          .map((ch) => ch.id === id ? { ...ch, name } : ch),
+      }
+      : {
+        channels: [
+          ...autoLikeStore.getData().channels,
+          { id, name, enabled: true },
+        ],
+      }
+  );
+
+  siteEvents.emit("autoLikeChannelsUpdated");
+
+  const unsub = autoLikeDialog?.on("clear", async () => {
+    unsub?.();
+    await autoLikeDialog?.open();
+  });
+
+  autoLikeDialog?.unmount();
 }
 
 function getChannelIdFromPrompt(promptStr: string) {

src/menu/menu_old.css

@@ -213,7 +213,7 @@
   border-radius: 0px 0px var(--bytm-menu-border-radius) var(--bytm-menu-border-radius);
 }
 
-#bytm-menu-footer-buttons-cont button:not(:last-of-type) {
+.bytm-menu-footer-buttons-cont button:not(:last-of-type) {
   margin-right: 15px;
 }
 

src/menu/menu_old.ts

@@ -197,7 +197,7 @@ async function addCfgMenu() {
   });
 
   const buttonsCont = document.createElement("div");
-  buttonsCont.id = "bytm-menu-footer-buttons-cont";
+  buttonsCont.classList.add("bytm-menu-footer-buttons-cont");
   buttonsCont.appendChild(exportElem);
   buttonsCont.appendChild(importElem);