feat: finished version notif dialog

assets/translations/README.md

@@ -6,15 +6,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) | 129 (default locale) |  |
-| [`de_DE`](./de_DE.json) | 🚫 `125/129` (96.9%) | ─ |
-| [`en_UK`](./en_UK.json) | ✅ `129/129` (100.0%) | `en_US` |
-| [`es_ES`](./es_ES.json) | 🚫 `125/129` (96.9%) | ─ |
-| [`fr_FR`](./fr_FR.json) | 🚫 `125/129` (96.9%) | ─ |
-| [`hi_IN`](./hi_IN.json) | 🚫 `125/129` (96.9%) | ─ |
-| [`ja_JA`](./ja_JA.json) | 🚫 `125/129` (96.9%) | ─ |
-| [`pt_BR`](./pt_BR.json) | 🚫 `125/129` (96.9%) | ─ |
-| [`zh_CN`](./zh_CN.json) | 🚫 `125/129` (96.9%) | ─ |
+| [`en_US`](./en_US.json) | 130 (default locale) |  |
+| [`de_DE`](./de_DE.json) | 🚫 `125/130` (96.2%) | ─ |
+| [`en_UK`](./en_UK.json) | ✅ `130/130` (100.0%) | `en_US` |
+| [`es_ES`](./es_ES.json) | 🚫 `125/130` (96.2%) | ─ |
+| [`fr_FR`](./fr_FR.json) | 🚫 `125/130` (96.2%) | ─ |
+| [`hi_IN`](./hi_IN.json) | 🚫 `125/130` (96.2%) | ─ |
+| [`ja_JA`](./ja_JA.json) | 🚫 `125/130` (96.2%) | ─ |
+| [`pt_BR`](./pt_BR.json) | 🚫 `125/130` (96.2%) | ─ |
+| [`zh_CN`](./zh_CN.json) | 🚫 `125/130` (96.2%) | ─ |
 
 <br>
 
@@ -25,79 +25,86 @@ This means you need to manually check against the base translations for missing
 
 ### Missing keys:
 
-<details><summary><code>de_DE</code> - 4 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>de_DE</code> - 5 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
-| `new_version_available` | `A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3\n\nDo you want to open %4 to install it manually?` |
-| `open_update_page` | `Open %1` |
+| `new_version_available` | `A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3` |
+| `open_update_page_install_manually` | `Install on %1` |
 | `disable_update_check` | `Disable automatic update checks` |
 | `ignore_for_24h` | `Ignore for 24h` |
+| `expand_release_notes` | `Click to expand the latest release notes` |
 
 <br></details>
 
-<details><summary><code>es_ES</code> - 4 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>es_ES</code> - 5 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
-| `new_version_available` | `A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3\n\nDo you want to open %4 to install it manually?` |
-| `open_update_page` | `Open %1` |
+| `new_version_available` | `A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3` |
+| `open_update_page_install_manually` | `Install on %1` |
 | `disable_update_check` | `Disable automatic update checks` |
 | `ignore_for_24h` | `Ignore for 24h` |
+| `expand_release_notes` | `Click to expand the latest release notes` |
 
 <br></details>
 
-<details><summary><code>fr_FR</code> - 4 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>fr_FR</code> - 5 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
-| `new_version_available` | `A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3\n\nDo you want to open %4 to install it manually?` |
-| `open_update_page` | `Open %1` |
+| `new_version_available` | `A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3` |
+| `open_update_page_install_manually` | `Install on %1` |
 | `disable_update_check` | `Disable automatic update checks` |
 | `ignore_for_24h` | `Ignore for 24h` |
+| `expand_release_notes` | `Click to expand the latest release notes` |
 
 <br></details>
 
-<details><summary><code>hi_IN</code> - 4 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>hi_IN</code> - 5 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
-| `new_version_available` | `A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3\n\nDo you want to open %4 to install it manually?` |
-| `open_update_page` | `Open %1` |
+| `new_version_available` | `A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3` |
+| `open_update_page_install_manually` | `Install on %1` |
 | `disable_update_check` | `Disable automatic update checks` |
 | `ignore_for_24h` | `Ignore for 24h` |
+| `expand_release_notes` | `Click to expand the latest release notes` |
 
 <br></details>
 
-<details><summary><code>ja_JA</code> - 4 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>ja_JA</code> - 5 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
-| `new_version_available` | `A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3\n\nDo you want to open %4 to install it manually?` |
-| `open_update_page` | `Open %1` |
+| `new_version_available` | `A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3` |
+| `open_update_page_install_manually` | `Install on %1` |
 | `disable_update_check` | `Disable automatic update checks` |
 | `ignore_for_24h` | `Ignore for 24h` |
+| `expand_release_notes` | `Click to expand the latest release notes` |
 
 <br></details>
 
-<details><summary><code>pt_BR</code> - 4 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>pt_BR</code> - 5 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
-| `new_version_available` | `A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3\n\nDo you want to open %4 to install it manually?` |
-| `open_update_page` | `Open %1` |
+| `new_version_available` | `A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3` |
+| `open_update_page_install_manually` | `Install on %1` |
 | `disable_update_check` | `Disable automatic update checks` |
 | `ignore_for_24h` | `Ignore for 24h` |
+| `expand_release_notes` | `Click to expand the latest release notes` |
 
 <br></details>
 
-<details><summary><code>zh_CN</code> - 4 missing keys <i>(click to show)</i></summary><br>
+<details><summary><code>zh_CN</code> - 5 missing keys <i>(click to show)</i></summary><br>
 
 | Key | English text |
 | --- | ------------ |
-| `new_version_available` | `A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3\n\nDo you want to open %4 to install it manually?` |
-| `open_update_page` | `Open %1` |
+| `new_version_available` | `A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3` |
+| `open_update_page_install_manually` | `Install on %1` |
 | `disable_update_check` | `Disable automatic update checks` |
 | `ignore_for_24h` | `Ignore for 24h` |
+| `expand_release_notes` | `Click to expand the latest release notes` |
 
 <br></details>

assets/translations/en_US.json

@@ -86,10 +86,11 @@
     "remember_song_time_sites_yt": "Only YouTube",
     "remember_song_time_sites_ytm": "Only YouTube Music",
 
-    "new_version_available": "A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3\n\nDo you want to open %4 to install it manually?",
-    "open_update_page": "Open %1",
+    "new_version_available": "A new version of %1 is available!\nYou currently have version %2 installed and you can update to version %3",
+    "open_update_page_install_manually": "Install on %1",
     "disable_update_check": "Disable automatic update checks",
     "ignore_for_24h": "Ignore for 24h",
+    "expand_release_notes": "Click to expand the latest release notes",
 
     "feature_category_layout": "Layout",
     "feature_category_songLists": "Song Lists",

src/dialogs/dialogs.css

@@ -1,3 +1,12 @@
+.bytm-dialog-body p {
+  overflow-wrap: break-word;
+}
+
+.bytm-dialog-body details summary {
+  cursor: pointer;
+  font-style: italic;
+}
+
 #bytm-version-notif-dialog-btns {
   display: flex;
   flex-direction: row;
@@ -13,3 +22,13 @@
 #bytm-disable-update-check-wrapper label {
   padding-left: 8px;
 }
+
+#bytm-version-notif-changelog-cont {
+  max-height: 400px;
+  overflow-y: auto;
+  margin: 10px 0px;
+}
+
+#bytm-version-notif-changelog-details {
+  margin-top: 15px;
+}

src/dialogs/versionNotif.ts

@@ -26,7 +26,10 @@ export async function getVersionNotifDialog({
       closeOnEscPress: true,
       destroyOnClose: true,
       smallMenu: true,
-      renderBody: () => renderBody({ latestTag, changelogHtml }),
+      renderBody: () => renderBody({
+        latestTag,
+        changelogHtml,
+      }),
     });
   }
   return verNotifDialog!;
@@ -45,21 +48,40 @@ function renderBody({
     openuserjs: "OpenUserJS",
   };
 
-  // TODO:
-  void changelogHtml;
-
   const wrapperEl = document.createElement("div");
 
   const pEl = document.createElement("p");
   pEl.textContent = t("new_version_available", scriptInfo.name, scriptInfo.version, latestTag, hostPlatformNames[host]);
   wrapperEl.appendChild(pEl);
 
+  const changelogDetailsEl = document.createElement("details");
+  changelogDetailsEl.id = "bytm-version-notif-changelog-details";
+  changelogDetailsEl.open = false;
+
+  const changelogSummaryEl = document.createElement("summary");
+  changelogSummaryEl.ariaLabel = changelogSummaryEl.title = changelogSummaryEl.textContent = t("expand_release_notes");
+  changelogDetailsEl.appendChild(changelogSummaryEl);
+
+  const changelogEl = document.createElement("p");
+  changelogEl.id = "bytm-version-notif-changelog-cont";
+  changelogEl.classList.add("bytm-markdown-container");
+  changelogEl.innerHTML = changelogHtml;
+
+  changelogEl.querySelectorAll("a").forEach((a) => {
+    a.target = "_blank";
+    a.rel = "noopener noreferrer";
+  });
+
+  changelogDetailsEl.appendChild(changelogEl);
+  wrapperEl.appendChild(changelogDetailsEl);
+
   const disableUpdCheckEl = document.createElement("div");
   disableUpdCheckEl.id = "bytm-disable-update-check-wrapper";
 
   const checkboxEl = document.createElement("input");
   checkboxEl.type = "checkbox";
   checkboxEl.id = "bytm-disable-update-check-chkbox";
+  checkboxEl.tabIndex = 0;
   checkboxEl.checked = false;
 
   const labelEl = document.createElement("label");
@@ -71,7 +93,7 @@ function renderBody({
 
   wrapperEl.appendChild(disableUpdCheckEl);
 
-  verNotifDialog!.on("close", async () => {
+  verNotifDialog?.on("close", async () => {
     const config = getFeatures();
     if(checkboxEl.checked)
       config.versionCheck = false;
@@ -83,19 +105,32 @@ function renderBody({
 
   const btnUpdate = document.createElement("button");
   btnUpdate.className = "bytm-btn";
-  btnUpdate.textContent = t("open_update_page", hostPlatformNames[host]);
-  btnUpdate.addEventListener("click", () => {
+  btnUpdate.tabIndex = 0;
+  btnUpdate.textContent = t("open_update_page_install_manually", hostPlatformNames[host]);
+  const btnUpdateClicked = () => {
     window.open(pkg.updates[host]);
-    verNotifDialog!.close();
+    verNotifDialog?.close();
+  };
+  btnUpdate.addEventListener("click", btnUpdateClicked);
+  btnUpdate.addEventListener("keydown", (e) => e.key === "Enter" && btnUpdateClicked());
+
+  const btnClose = document.createElement("button");
+  btnClose.className = "bytm-btn";
+  btnClose.tabIndex = 0;
+  btnClose.textContent = t("ignore_for_24h");
+
+  checkboxEl.addEventListener("change", () => {
+    if(checkboxEl.checked)
+      btnClose.textContent = t("close");
+    else
+      btnClose.textContent = t("ignore_for_24h");
   });
 
-  const btnIgnore = document.createElement("button");
-  btnIgnore.className = "bytm-btn";
-  btnIgnore.textContent = t("ignore_for_24h");
-  btnIgnore.addEventListener("click", () => verNotifDialog!.close());
+  btnClose.addEventListener("click", () => verNotifDialog?.close());
+  btnClose.addEventListener("keydown", (e) => e.key === "Enter" && verNotifDialog?.close());
 
   btnWrapper.appendChild(btnUpdate);
-  btnWrapper.appendChild(btnIgnore);
+  btnWrapper.appendChild(btnClose);
 
   wrapperEl.appendChild(btnWrapper);
 

src/utils/BytmDialog.css

@@ -62,11 +62,6 @@
   padding: 15px;
 }
 
-.bytm-dialog-body p {
-  overflow-wrap: break-word;
-  white-space: pre-wrap;
-}
-
 #bytm-dialog-opts {
   display: flex;
   flex-direction: column;
@@ -305,7 +300,7 @@
   display: flex;
   flex-direction: column;
   overflow-y: auto;
-  font-size: 1.5em;
+  font-size: 1.4rem;
   line-height: 20px;
 }