feat: begin auto-like feature

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) | 216 (default locale) |  |
-| ⚠ | [`de_DE`](./de_DE.json) | `214/216` (99.1%) | ─ |
-| ─ | [`en_UK`](./en_UK.json) | `216/216` (100%) | `en_US` |
-| ⚠ | [`es_ES`](./es_ES.json) | `214/216` (99.1%) | ─ |
-| ⚠ | [`fr_FR`](./fr_FR.json) | `214/216` (99.1%) | ─ |
-| ⚠ | [`hi_IN`](./hi_IN.json) | `214/216` (99.1%) | ─ |
-| ⚠ | [`ja_JA`](./ja_JA.json) | `214/216` (99.1%) | ─ |
-| ⚠ | [`pt_BR`](./pt_BR.json) | `214/216` (99.1%) | ─ |
-| ⚠ | [`zh_CN`](./zh_CN.json) | `214/216` (99.1%) | ─ |
+| ─ | [`en_US`](./en_US.json) | 222 (default locale) |  |
+| ⚠ | [`de_DE`](./de_DE.json) | `214/222` (96.4%) | ─ |
+| ─ | [`en_UK`](./en_UK.json) | `222/222` (100%) | `en_US` |
+| ⚠ | [`es_ES`](./es_ES.json) | `214/222` (96.4%) | ─ |
+| ⚠ | [`fr_FR`](./fr_FR.json) | `214/222` (96.4%) | ─ |
+| ⚠ | [`hi_IN`](./hi_IN.json) | `214/222` (96.4%) | ─ |
+| ⚠ | [`ja_JA`](./ja_JA.json) | `214/222` (96.4%) | ─ |
+| ⚠ | [`pt_BR`](./pt_BR.json) | `214/222` (96.4%) | ─ |
+| ⚠ | [`zh_CN`](./zh_CN.json) | `214/222` (96.4%) | ─ |
 
 <sub>
 ✅ - Fully translated
@@ -45,64 +45,106 @@ This means to figure out which keys are untranslated, you will need to manually
 
 ### Missing keys:
 
-<details><summary><code>de_DE</code> - 2 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>de_DE</code> - 8 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
+| `remove_entry` | `Remove this entry` |
+| `feature_desc_autoLikeChannels` | `Automatically like all songs and videos of certain channels` |
+| `feature_helpText_autoLikeChannels` | `Once enabled, you can enable this feature for certain channels by opening their page and clicking the toggle button. Afterwards, any song you play of that channel will be liked automatically.\nUse the option below to open a dialog to manage the channels.` |
+| `feature_desc_openAutoLikeChannelsDialog` | `Open the dialog to manage auto-liked channels` |
+| `feature_btn_openAutoLikeChannelsDialog` | `Open dialog` |
+| `feature_btn_openAutoLikeChannelsDialog_running` | `Opening...` |
 | `plugin_validation_error_invalid_property-1` | `Property '%1' with value '%2' is invalid. Example value: %3` |
 | `plugin_validation_error_invalid_property-n` | `Property '%1' with value '%2' is invalid. Example values: %3` |
 
 <br></details>
 
-<details><summary><code>es_ES</code> - 2 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>es_ES</code> - 8 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
+| `remove_entry` | `Remove this entry` |
+| `feature_desc_autoLikeChannels` | `Automatically like all songs and videos of certain channels` |
+| `feature_helpText_autoLikeChannels` | `Once enabled, you can enable this feature for certain channels by opening their page and clicking the toggle button. Afterwards, any song you play of that channel will be liked automatically.\nUse the option below to open a dialog to manage the channels.` |
+| `feature_desc_openAutoLikeChannelsDialog` | `Open the dialog to manage auto-liked channels` |
+| `feature_btn_openAutoLikeChannelsDialog` | `Open dialog` |
+| `feature_btn_openAutoLikeChannelsDialog_running` | `Opening...` |
 | `plugin_validation_error_invalid_property-1` | `Property '%1' with value '%2' is invalid. Example value: %3` |
 | `plugin_validation_error_invalid_property-n` | `Property '%1' with value '%2' is invalid. Example values: %3` |
 
 <br></details>
 
-<details><summary><code>fr_FR</code> - 2 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>fr_FR</code> - 8 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
+| `remove_entry` | `Remove this entry` |
+| `feature_desc_autoLikeChannels` | `Automatically like all songs and videos of certain channels` |
+| `feature_helpText_autoLikeChannels` | `Once enabled, you can enable this feature for certain channels by opening their page and clicking the toggle button. Afterwards, any song you play of that channel will be liked automatically.\nUse the option below to open a dialog to manage the channels.` |
+| `feature_desc_openAutoLikeChannelsDialog` | `Open the dialog to manage auto-liked channels` |
+| `feature_btn_openAutoLikeChannelsDialog` | `Open dialog` |
+| `feature_btn_openAutoLikeChannelsDialog_running` | `Opening...` |
 | `plugin_validation_error_invalid_property-1` | `Property '%1' with value '%2' is invalid. Example value: %3` |
 | `plugin_validation_error_invalid_property-n` | `Property '%1' with value '%2' is invalid. Example values: %3` |
 
 <br></details>
 
-<details><summary><code>hi_IN</code> - 2 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>hi_IN</code> - 8 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
+| `remove_entry` | `Remove this entry` |
+| `feature_desc_autoLikeChannels` | `Automatically like all songs and videos of certain channels` |
+| `feature_helpText_autoLikeChannels` | `Once enabled, you can enable this feature for certain channels by opening their page and clicking the toggle button. Afterwards, any song you play of that channel will be liked automatically.\nUse the option below to open a dialog to manage the channels.` |
+| `feature_desc_openAutoLikeChannelsDialog` | `Open the dialog to manage auto-liked channels` |
+| `feature_btn_openAutoLikeChannelsDialog` | `Open dialog` |
+| `feature_btn_openAutoLikeChannelsDialog_running` | `Opening...` |
 | `plugin_validation_error_invalid_property-1` | `Property '%1' with value '%2' is invalid. Example value: %3` |
 | `plugin_validation_error_invalid_property-n` | `Property '%1' with value '%2' is invalid. Example values: %3` |
 
 <br></details>
 
-<details><summary><code>ja_JA</code> - 2 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>ja_JA</code> - 8 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
+| `remove_entry` | `Remove this entry` |
+| `feature_desc_autoLikeChannels` | `Automatically like all songs and videos of certain channels` |
+| `feature_helpText_autoLikeChannels` | `Once enabled, you can enable this feature for certain channels by opening their page and clicking the toggle button. Afterwards, any song you play of that channel will be liked automatically.\nUse the option below to open a dialog to manage the channels.` |
+| `feature_desc_openAutoLikeChannelsDialog` | `Open the dialog to manage auto-liked channels` |
+| `feature_btn_openAutoLikeChannelsDialog` | `Open dialog` |
+| `feature_btn_openAutoLikeChannelsDialog_running` | `Opening...` |
 | `plugin_validation_error_invalid_property-1` | `Property '%1' with value '%2' is invalid. Example value: %3` |
 | `plugin_validation_error_invalid_property-n` | `Property '%1' with value '%2' is invalid. Example values: %3` |
 
 <br></details>
 
-<details><summary><code>pt_BR</code> - 2 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>pt_BR</code> - 8 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
+| `remove_entry` | `Remove this entry` |
+| `feature_desc_autoLikeChannels` | `Automatically like all songs and videos of certain channels` |
+| `feature_helpText_autoLikeChannels` | `Once enabled, you can enable this feature for certain channels by opening their page and clicking the toggle button. Afterwards, any song you play of that channel will be liked automatically.\nUse the option below to open a dialog to manage the channels.` |
+| `feature_desc_openAutoLikeChannelsDialog` | `Open the dialog to manage auto-liked channels` |
+| `feature_btn_openAutoLikeChannelsDialog` | `Open dialog` |
+| `feature_btn_openAutoLikeChannelsDialog_running` | `Opening...` |
 | `plugin_validation_error_invalid_property-1` | `Property '%1' with value '%2' is invalid. Example value: %3` |
 | `plugin_validation_error_invalid_property-n` | `Property '%1' with value '%2' is invalid. Example values: %3` |
 
 <br></details>
 
-<details><summary><code>zh_CN</code> - 2 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>zh_CN</code> - 8 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
+| `remove_entry` | `Remove this entry` |
+| `feature_desc_autoLikeChannels` | `Automatically like all songs and videos of certain channels` |
+| `feature_helpText_autoLikeChannels` | `Once enabled, you can enable this feature for certain channels by opening their page and clicking the toggle button. Afterwards, any song you play of that channel will be liked automatically.\nUse the option below to open a dialog to manage the channels.` |
+| `feature_desc_openAutoLikeChannelsDialog` | `Open the dialog to manage auto-liked channels` |
+| `feature_btn_openAutoLikeChannelsDialog` | `Open dialog` |
+| `feature_btn_openAutoLikeChannelsDialog_running` | `Opening...` |
 | `plugin_validation_error_invalid_property-1` | `Property '%1' with value '%2' is invalid. Example value: %3` |
 | `plugin_validation_error_invalid_property-n` | `Property '%1' with value '%2' is invalid. Example values: %3` |
 

assets/translations/en_US.json

@@ -47,6 +47,7 @@
     "toggled_off": "Off",
     "trigger_btn_action": "Run action",
     "trigger_btn_action_running": "Running...",
+    "remove_entry": "Remove this entry",
     "remove_from_queue": "Remove this song from the queue",
     "delete_from_list": "Delete this song from the list",
     "couldnt_remove_from_queue": "Couldn't remove this song from the queue",
@@ -202,6 +203,11 @@
     "feature_desc_switchSitesHotkey": "Which hotkey needs to be pressed to switch sites?",
     "feature_desc_anchorImprovements": "Add and improve links all over the page so things can be opened in a new tab easier",
     "feature_helptext_anchorImprovements": "Some elements on the page are only clickable with the left mouse button, which means you can't open them in a new tab by middle-clicking or through the context menu using shift + right-click. This feature adds links to a lot of them or enlarges existing ones to make clicking easier.",
+    "feature_desc_autoLikeChannels": "Automatically like all songs and videos of certain channels",
+    "feature_helpText_autoLikeChannels": "Once enabled, you can enable this feature for certain channels by opening their page and clicking the toggle button. Afterwards, any song you play of that channel will be liked automatically.\nUse the option below to open a dialog to manage the channels.",
+    "feature_desc_openAutoLikeChannelsDialog": "Open the dialog to manage auto-liked channels",
+    "feature_btn_openAutoLikeChannelsDialog": "Open dialog",
+    "feature_btn_openAutoLikeChannelsDialog_running": "Opening...",
 
     "feature_desc_geniusLyrics": "Add a button to the media controls of the currently playing song to open its lyrics on genius.com",
     "feature_desc_geniUrlBase": "Base URL of your geniURL instance, see https://github.com/Sv443/geniURL",

src/config.ts

@@ -58,9 +58,13 @@ export const migrations: DataMigrationsDict = {
     "fixHdrIssues", "clearQueueBtn",
     "closeToastsTimeout", "disableDarkReaderSites",
   ]),
+  // 5 -> 6 (v2.1)
+  6: (oldData: FeatureConfig) => useDefaultConfig(oldData, [
+    "openAutoLikeChannelsDialog",
+  ]),
   // TODO: once advanced filtering is fully implemented, clear cache on migration to fv6
-  // 5 -> 6 (v2.x)
-  // 6: (oldData: FeatureConfig) => 
+  // 6 -> 7 (v2.x)
+  // 7: (oldData: FeatureConfig) => 
 } as const satisfies DataMigrationsDict;
 
 export const defaultData = (Object.keys(featInfo) as (keyof typeof featInfo)[])

src/dialogs/autoLikeChannels.ts

@@ -0,0 +1,105 @@
+import { getDomain, t } from "../utils";
+import { BytmDialog, createCircularBtn, createToggleInput } from "../components";
+import { autoLikeChannelsStore } from "../features";
+
+let autoLikeChannelsDialog: BytmDialog | null = null;
+
+/** Creates and/or returns the import dialog */
+export function getAutoLikeChannelsDialog() {
+  if(!autoLikeChannelsDialog) {
+    autoLikeChannelsDialog = new BytmDialog({
+      id: "auto-like-channels",
+      width: 500,
+      height: 700,
+      closeBtnEnabled: true,
+      closeOnBgClick: true,
+      closeOnEscPress: true,
+      small: true,
+      renderHeader,
+      renderBody,
+    });
+  }
+  return autoLikeChannelsDialog;
+}
+
+async function renderHeader() {
+  const headerEl = document.createElement("h2");
+  headerEl.classList.add("bytm-dialog-title");
+  headerEl.role = "heading";
+  headerEl.ariaLevel = "1";
+  headerEl.textContent = t("auto_like_channels_dialog_title"); // TODO
+
+  return headerEl;
+}
+
+async function renderBody() {
+  const contElem = document.createElement("div");
+
+  const descriptionEl = document.createElement("p");
+  descriptionEl.classList.add("bytm-auto-like-channels-desc");
+  descriptionEl.textContent = t("auto_like_channels_dialog_desc"); // TODO
+
+  contElem.appendChild(descriptionEl);
+
+  const channelListCont = document.createElement("div");
+  channelListCont.id = "bytm-auto-like-channels-list";
+
+  const removeChannel = (id: string) => autoLikeChannelsStore.setData({
+    channels: autoLikeChannelsStore.getData().channels.filter((ch) => ch.id !== id),
+  });
+
+  const setChannelEnabled = (id: string, enabled: boolean) => autoLikeChannelsStore.setData({
+    channels: autoLikeChannelsStore.getData().channels.map((ch) => ch.id === id ? { ...ch, enabled } : ch),
+  });
+
+  for(const { name, id, enabled } of autoLikeChannelsStore.getData().channels) {
+    const rowElem = document.createElement("div");
+    rowElem.classList.add("bytm-auto-like-channel-row");
+
+    const leftCont = document.createElement("div");
+    leftCont.classList.add("bytm-auto-like-channel-row-left-cont");
+
+    const nameLabelEl = document.createElement("label");
+    nameLabelEl.ariaLabel = nameLabelEl.title = name;
+    nameLabelEl.htmlFor = `bytm-auto-like-channel-list-toggle-${id}`;
+
+    const nameElem = document.createElement("a");
+    nameElem.classList.add("bytm-auto-like-channel-name", "bytm-link");
+    nameElem.ariaLabel = nameElem.textContent = name;
+    nameElem.href = `https://${getDomain() === "yt" ? "" : "music."}youtube.com/channel/${id}`;
+    nameElem.target = "_blank";
+    nameElem.rel = "noopener noreferrer";
+    nameElem.tabIndex = 0;
+
+    nameLabelEl.appendChild(nameElem);
+
+    const toggleElem = await createToggleInput({
+      id: `bytm-auto-like-channel-list-toggle-${id}`,
+      labelPos: "off",
+      initialValue: enabled,
+      onChange: (en) => setChannelEnabled(id, en),
+    });
+    toggleElem.classList.add("bytm-auto-like-channel-toggle");
+
+    const removeBtn = await createCircularBtn({
+      resourceName: "icon-delete",
+      title: t("remove_entry"),
+      onClick() {
+        removeChannel(id);
+        rowElem.remove();
+      },
+    });
+
+    leftCont.appendChild(toggleElem);
+    leftCont.appendChild(nameLabelEl);
+
+    rowElem.appendChild(leftCont);
+    rowElem.appendChild(removeBtn);
+
+    channelListCont.appendChild(rowElem);
+  }
+
+  contElem.appendChild(channelListCont);
+
+  return contElem;
+}

src/dialogs/dialogs.css

@@ -159,3 +159,8 @@
   justify-content: space-between;
   border-radius: 0px 0px var(--bytm-menu-border-radius) var(--bytm-menu-border-radius);
 }
+
+#bytm-auto-like-channels-dialog-body {
+  padding-left: 0;
+  padding-right: 0;
+}

src/dialogs/index.ts

@@ -1,5 +1,6 @@
 import "./dialogs.css";
 
+export * from "./autoLikeChannels";
 export * from "./changelog";
 export * from "./exportCfg";
 export * from "./featConfig";

src/features/index.ts

@@ -5,6 +5,7 @@ import { getFeatures } from "../config";
 import { FeatureInfo, type ResourceKey, type SiteSelection, type SiteSelectionOrNone } from "../types";
 import { emitSiteEvent } from "../siteEvents";
 import langMapping from "../../assets/locales.json" with { type: "json" };
+import { getAutoLikeChannelsDialog } from "../dialogs";
 
 export * from "./layout";
 export * from "./behavior";
@@ -445,6 +446,17 @@ export const featInfo = {
     reloadRequired: false,
     enable: noop,
   },
+  autoLikeChannels: {
+    type: "toggle",
+    category: "input",
+    default: false,
+    textAdornment: adornments.reloadRequired,
+  },
+  openAutoLikeChannelsDialog: {
+    type: "button",
+    category: "input",
+    click: () => getAutoLikeChannelsDialog().open(),
+  },
 
   //#region lyrics
   geniusLyrics: {

src/features/input.css

@@ -0,0 +1,29 @@
+.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: 4px 15px;
+  transition: background-color 0.15s ease-out;
+}
+
+.bytm-auto-like-channels-desc {
+  padding: 0px 15px;
+  white-space: pre-wrap;
+  font-size: 1.6rem;
+  margin-bottom: 15px;
+}
+
+.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;
+}

src/features/input.ts

@@ -1,11 +1,13 @@
-import { clamp } from "@sv443-network/userutils";
-import { error, getVideoTime, info, log, warn, getVideoSelector } from "../utils";
+import { DataStore, clamp, compress, decompress } from "@sv443-network/userutils";
+import { error, getVideoTime, info, log, warn, getVideoSelector, getDomain, compressionSupported } from "../utils";
 import type { Domain } from "../types";
 import { isCfgMenuOpen } from "../menu/menu_old";
 import { disableBeforeUnload } from "./behavior";
 import { siteEvents } from "../siteEvents";
 import { featInfo } from "./index";
 import { getFeatures } from "../config";
+import { compressionFormat } from "../constants";
+import "./input.css";
 
 export const inputIgnoreTagNames = ["INPUT", "TEXTAREA", "SELECT", "BUTTON", "A"];
 
@@ -147,3 +149,68 @@ export async function initNumKeysSkip() {
   });
   log("Added number key press listener");
 }
+
+//#region auto-like channels
+
+let canCompress = false;
+
+export const autoLikeChannelsStore = new DataStore<{
+  channels: {
+    id: string;
+    name: string;
+    enabled: boolean;
+  }[];
+}>({
+  id: "bytm-auto-like-channels",
+  formatVersion: 1,
+  defaultData: {
+    channels: [],
+  },
+  encodeData: (data) => canCompress ? compress(data, compressionFormat, "string") : data,
+  decodeData: (data) => canCompress ? decompress(data, compressionFormat, "string") : data,
+  // migrations: {},
+});
+
+export async function initAutoLikeChannels() {
+  try {
+    canCompress = await compressionSupported();
+    await autoLikeChannelsStore.loadData();
+    if(getDomain() === "ytm") {
+      let timeout: NodeJS.Timeout;
+      // TODO:FIXME: needs actual fix instead of timeout
+      siteEvents.on("songTitleChanged", () => {
+        timeout && clearTimeout(timeout);
+        timeout = setTimeout(() => {
+          // TODO: support multiple artists
+          const artistEls = document.querySelectorAll<HTMLAnchorElement>("ytmusic-player-bar .content-info-wrapper .subtitle a.yt-formatted-string[href]");
+          const channelIds = [...artistEls].map(a => a.href.split("/").pop()).filter(a => typeof a === "string") as string[];
+
+          const likeChan = autoLikeChannelsStore.getData().channels.find((ch) => channelIds.includes(ch.id));
+
+          if(!likeChan || !likeChan.enabled)
+            return;
+
+          if(artistEls.length === 0)
+            return error("Couldn't auto-like channel because the artist element couldn't be found");
+
+          const likeRenderer = document.querySelector<HTMLElement>(".middle-controls-buttons ytmusic-like-button-renderer");
+          const likeBtn = likeRenderer?.querySelector<HTMLButtonElement>("#button-shape-like button");
+
+          if(!likeRenderer || !likeBtn)
+            return error("Couldn't auto-like channel because the like button couldn't be found");
+
+          if(likeRenderer.getAttribute("like-status") !== "LIKE") {
+            likeBtn.click();
+            log(`Auto-liked channel '${likeChan.name}' (ID: '${likeChan.id}')`);
+          }
+        }, 5_000);
+      });
+    }
+    else if(getDomain() === "yt") {
+      // TODO:
+    }
+  }
+  catch(err) {
+    error("Error while auto-liking channel:", err);
+  }
+}

src/index.ts

@@ -18,7 +18,7 @@ import {
   // behavior
   initBeforeUnloadHook, disableBeforeUnload, initAutoCloseToasts, initRememberSongTime, disableDarkReader,
   // input
-  initArrowKeySkip, initSiteSwitch, addAnchorImprovements, initNumKeysSkip,
+  initArrowKeySkip, initSiteSwitch, addAnchorImprovements, initNumKeysSkip, initAutoLikeChannels,
   // lyrics
   addMediaCtrlLyricsBtn, initLyricsCache,
   // menu
@@ -226,6 +226,9 @@ async function onDomLoad() {
       //#region (ytm+yt) input
 
       ftInit.push(["initSiteSwitch", initSiteSwitch(domain)]);
+
+      if(getFeatures().autoLikeChannels)
+        ftInit.push(["initAutoLikeChannels", initAutoLikeChannels()]);
     }
 
     const initStartTs = Date.now();

src/menu/menu_old.css

@@ -1,6 +1,9 @@
+:root {
+  --bytm-menu-bg-highlight: #252525;
+}
+
 .bytm-menu-bg {
   --bytm-menu-bg: #333333;
-  --bytm-menu-bg-highlight: #252525;
   --bytm-scroll-indicator-bg: rgba(10, 10, 10, 0.7);
   --bytm-menu-separator-color: #797979;
   --bytm-menu-border-radius: 10px;

src/types.ts

@@ -267,7 +267,7 @@ type FeatureTypeProps = ({
   | {
     type: "button";
     default?: undefined;
-    click: () => Promise<void> | void;
+    click: () => Promise<void | unknown> | void | unknown;
   }
 
 type FeatureFuncProps = (
@@ -410,6 +410,10 @@ export interface FeatureConfig {
   switchSitesHotkey: HotkeyObj;
   /** Make it so middle clicking a song to open it in a new tab (through thumbnail and song title) is easier */
   anchorImprovements: boolean;
+  /** Whether to auto-like all played videos of configured channels */
+  autoLikeChannels: boolean;
+  /** Opens the auto-like channels management dialog */
+  openAutoLikeChannelsDialog: undefined;
 
   //#region lyrics
   /** Add a button to the media controls to open the current song's lyrics on genius.com in a new tab */