feat: ctrl interact with lyrics btn to open lyrics search prompt

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) | 258 (default locale) |  |
-| ‼️ | [`de_DE`](./de_DE.json) | `210/258` (81.4%) | ─ |
-| ─ | [`en_UK`](./en_UK.json) | `258` (100%) | `en_US` |
-| ‼️ | [`es_ES`](./es_ES.json) | `210/258` (81.4%) | ─ |
-| ‼️ | [`fr_FR`](./fr_FR.json) | `210/258` (81.4%) | ─ |
-| ‼️ | [`hi_IN`](./hi_IN.json) | `210/258` (81.4%) | ─ |
-| ‼️ | [`ja_JA`](./ja_JA.json) | `210/258` (81.4%) | ─ |
-| ‼️ | [`pt_BR`](./pt_BR.json) | `210/258` (81.4%) | ─ |
-| ‼️ | [`zh_CN`](./zh_CN.json) | `210/258` (81.4%) | ─ |
+| ─ | [`en_US`](./en_US.json) | 259 (default locale) |  |
+| ‼️ | [`de_DE`](./de_DE.json) | `210/259` (81.1%) | ─ |
+| ─ | [`en_UK`](./en_UK.json) | `259` (100%) | `en_US` |
+| ‼️ | [`es_ES`](./es_ES.json) | `210/259` (81.1%) | ─ |
+| ‼️ | [`fr_FR`](./fr_FR.json) | `210/259` (81.1%) | ─ |
+| ‼️ | [`hi_IN`](./hi_IN.json) | `210/259` (81.1%) | ─ |
+| ‼️ | [`ja_JA`](./ja_JA.json) | `210/259` (81.1%) | ─ |
+| ‼️ | [`pt_BR`](./pt_BR.json) | `210/259` (81.1%) | ─ |
+| ‼️ | [`zh_CN`](./zh_CN.json) | `210/259` (81.1%) | ─ |
 
 <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> - 48 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>de_DE</code> - 49 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `create_new_entry` | `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:` |
 | `auto_like_channels_dialog_title` | `Auto-liked channels` |
 | `auto_like_channels_dialog_desc` | `Here you can see what channels you have set to auto-like and you can edit, enable, disable and remove them.\nYou can also manually create entries, though it's easier to just visit the channel page and click the button there.` |
 | `auto_like` | `Auto-like` |
@@ -100,13 +101,14 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>es_ES</code> - 48 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>es_ES</code> - 49 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `create_new_entry` | `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:` |
 | `auto_like_channels_dialog_title` | `Auto-liked channels` |
 | `auto_like_channels_dialog_desc` | `Here you can see what channels you have set to auto-like and you can edit, enable, disable and remove them.\nYou can also manually create entries, though it's easier to just visit the channel page and click the button there.` |
 | `auto_like` | `Auto-like` |
@@ -155,13 +157,14 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>fr_FR</code> - 48 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>fr_FR</code> - 49 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `create_new_entry` | `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:` |
 | `auto_like_channels_dialog_title` | `Auto-liked channels` |
 | `auto_like_channels_dialog_desc` | `Here you can see what channels you have set to auto-like and you can edit, enable, disable and remove them.\nYou can also manually create entries, though it's easier to just visit the channel page and click the button there.` |
 | `auto_like` | `Auto-like` |
@@ -210,13 +213,14 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>hi_IN</code> - 48 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>hi_IN</code> - 49 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `create_new_entry` | `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:` |
 | `auto_like_channels_dialog_title` | `Auto-liked channels` |
 | `auto_like_channels_dialog_desc` | `Here you can see what channels you have set to auto-like and you can edit, enable, disable and remove them.\nYou can also manually create entries, though it's easier to just visit the channel page and click the button there.` |
 | `auto_like` | `Auto-like` |
@@ -265,13 +269,14 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>ja_JA</code> - 48 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>ja_JA</code> - 49 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `create_new_entry` | `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:` |
 | `auto_like_channels_dialog_title` | `Auto-liked channels` |
 | `auto_like_channels_dialog_desc` | `Here you can see what channels you have set to auto-like and you can edit, enable, disable and remove them.\nYou can also manually create entries, though it's easier to just visit the channel page and click the button there.` |
 | `auto_like` | `Auto-like` |
@@ -320,13 +325,14 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>pt_BR</code> - 48 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>pt_BR</code> - 49 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `create_new_entry` | `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:` |
 | `auto_like_channels_dialog_title` | `Auto-liked channels` |
 | `auto_like_channels_dialog_desc` | `Here you can see what channels you have set to auto-like and you can edit, enable, disable and remove them.\nYou can also manually create entries, though it's easier to just visit the channel page and click the button there.` |
 | `auto_like` | `Auto-like` |
@@ -375,13 +381,14 @@ This means to figure out which keys are untranslated, you will need to manually
 
 <br></details>
 
-<details><summary><code>zh_CN</code> - 48 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>zh_CN</code> - 49 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
 | `create_new_entry` | `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:` |
 | `auto_like_channels_dialog_title` | `Auto-liked channels` |
 | `auto_like_channels_dialog_desc` | `Here you can see what channels you have set to auto-like and you can edit, enable, disable and remove them.\nYou can also manually create entries, though it's easier to just visit the channel page and click the button there.` |
 | `auto_like` | `Auto-like` |

assets/translations/en_US.json

@@ -71,6 +71,7 @@
 
     "open_current_lyrics": "Open the current song's lyrics in a new tab",
     "open_lyrics": "Open this song's lyrics in a new tab",
+    "open_lyrics_search_prompt": "Enter the song title and artist to search for the lyrics:",
     "lyrics_loading": "Loading lyrics URL...",
     "lyrics_rate_limited-1": "You are being rate limited.\nPlease wait a few seconds before requesting more lyrics.",
     "lyrics_rate_limited-n": "You are being rate limited.\nPlease wait %1 seconds before requesting more lyrics.",

src/features/lyrics.ts

@@ -1,6 +1,6 @@
 import { autoPlural, fetchAdvanced } from "@sv443-network/userutils";
 import Fuse from "fuse.js";
-import { error, getResourceUrl, info, log, warn, t, tp, currentMediaType, constructUrl } from "../utils/index.js";
+import { error, getResourceUrl, info, log, warn, t, tp, currentMediaType, constructUrl, onInteraction, openInTab } from "../utils/index.js";
 import { emitInterface } from "../interface.js";
 import { mode, scriptInfo } from "../constants.js";
 import { getFeature } from "../config.js";
@@ -399,6 +399,20 @@ export async function createLyricsBtn(geniusUrl?: string, hideIfLoading = true)
 
   linkElem.appendChild(imgElem);
 
+  onInteraction(linkElem, async (e) => {
+    if(e.ctrlKey) {
+      e.preventDefault();
+      e.stopPropagation();
+
+      const search = prompt(t("open_lyrics_search_prompt"));
+      if(search)
+        openInTab(`https://genius.com/search?q=${encodeURIComponent(search)}`);
+    }
+  }, {
+    preventDefault: false,
+    stopPropagation: false,
+  });
+
   return linkElem;
 }
 

src/features/songLists.ts

@@ -10,6 +10,8 @@ import { getFeature } from "../config.js";
 import type { LyricsCacheEntry } from "../types.js";
 import "./songLists.css";
 
+//#region init queue btns
+
 /** Initializes the queue buttons */
 export async function initQueueButtons() {
   const addCurrentQueueBtns = (
@@ -72,6 +74,8 @@ export async function initQueueButtons() {
   }
 }
 
+//#region add queue btns
+
 /**
  * Adds the buttons to each item in the current song queue.  
  * Also observes for changes to add new buttons to new items in the queue.
@@ -91,7 +95,7 @@ async function addQueueButtons(
   const lyricsIconUrl = await getResourceUrl("icon-lyrics");
   const deleteIconUrl = await getResourceUrl("icon-delete");
 
-  //#region lyrics
+  //#region lyrics btn
   let lyricsBtnElem: HTMLAnchorElement | undefined;
 
   if(getFeature("lyricsQueueButton")) {
@@ -196,7 +200,7 @@ async function addQueueButtons(
     });
   }
 
-  //#region delete from queue
+  //#region delete btn
   let deleteBtnElem: HTMLAnchorElement | undefined;
 
   if(getFeature("deleteFromQueueButton")) {