feat: better version notif dialog behavior

changelog.md

@@ -8,7 +8,9 @@
   - Implemented new class BytmMenu for less duplicate code and better accessibility, and to enable the improved configuration menu
   - Plugin interface now has access to the classes [`BytmDialog`](https://github.com/Sv443/BetterYTM/blob/0f2563541289e383a87b1dd34e6b3f86baf34c63/contributing.md#bytmdialog) and [`NanoEmitter`](https://github.com/Sv443/BetterYTM/blob/0f2563541289e383a87b1dd34e6b3f86baf34c63/contributing.md#nanoemitter), and functions [`createHotkeyInput()`](https://github.com/Sv443/BetterYTM/blob/0f2563541289e383a87b1dd34e6b3f86baf34c63/contributing.md#createhotkeyinput) and [`createToggleInput()`](https://github.com/Sv443/BetterYTM/blob/0f2563541289e383a87b1dd34e6b3f86baf34c63/contributing.md#createtoggleinput)
 
-[See pull request for more info](https://github.com/Sv443/BetterYTM/pull/52)
+<div class="pr-link-cont">
+  <a href="https://github.com/Sv443/BetterYTM/pull/52" rel="noopener noreferrer">See pull request for more info</a>
+</div>
 
 <div class="split"></div>
 <br>
@@ -28,7 +30,9 @@
   - Removed React JSX support
   - Small utility function refactoring
   
-[See pull request for more info](https://github.com/Sv443/BetterYTM/pull/47)
+<div class="pr-link-cont">
+  <a href="https://github.com/Sv443/BetterYTM/pull/47" rel="noopener noreferrer">See pull request for more info</a>
+</div>
 
 <div class="split"></div>
 <br>
@@ -60,7 +64,9 @@
   - Added support for React JSX
   - Added support for external libraries through `@require`
   
-[See pull request for more info](https://github.com/Sv443/BetterYTM/pull/35)
+<div class="pr-link-cont">
+  <a href="https://github.com/Sv443/BetterYTM/pull/35" rel="noopener noreferrer">See pull request for more info</a>
+</div>
 
 <div class="split"></div>
 <br>
@@ -105,7 +111,9 @@
   - Site switch with <kbd>F9</kbd> will now keep the video time
   - Moved lots of utility code to my new library [UserUtils](https://github.com/Sv443-Network/UserUtils)
   
-[See pull request for more info](https://github.com/Sv443/BetterYTM/pull/9)
+<div class="pr-link-cont">
+  <a href="https://github.com/Sv443/BetterYTM/pull/9" rel="noopener noreferrer">See pull request for more info</a>
+</div>
 
 <div class="split"></div>
 <br>
@@ -117,7 +125,9 @@
   - Search for song lyrics with new button in media controls
   - Remove "Upgrade to YTM Premium" tab
   
-[See pull request for more info](https://github.com/Sv443/BetterYTM/pull/3)
+<div class="pr-link-cont">
+  <a href="https://github.com/Sv443/BetterYTM/pull/3" rel="noopener noreferrer">See pull request for more info</a>
+</div>
 
 <div class="split"></div>
 <br>

src/dialogs/versionNotif.ts

@@ -3,6 +3,7 @@ import { getChangelogMd, getResourceUrl, onInteraction, parseMarkdown, t } from
 import { BytmDialog, createToggleInput } from "../components";
 import { getFeatures, setFeatures } from "../config";
 import pkg from "../../package.json" assert { type: "json" };
+import { siteEvents } from "src/siteEvents";
 
 let verNotifDialog: BytmDialog | null = null;
 
@@ -105,9 +106,12 @@ async function renderBody({
   const disableUpdCheckEl = document.createElement("div");
   disableUpdCheckEl.id = "bytm-disable-update-check-wrapper";
 
+  if(getFeatures().versionCheck === false)
+    disableUpdateCheck = true;
+
   const disableToggleEl = await createToggleInput({
     id: "disable-update-check",
-    initialValue: false,
+    initialValue: disableUpdateCheck,
     labelPos: "off",
     onChange(checked) {
       disableUpdateCheck = checked;
@@ -139,8 +143,13 @@ async function renderBody({
 
   verNotifDialog?.on("close", async () => {
     const config = getFeatures();
-    config.versionCheck = !disableUpdateCheck;
+    const recreateCfgMenu = config.versionCheck === disableUpdateCheck;
+    if(config.versionCheck && disableUpdateCheck)
+      config.versionCheck = false;
+    else if(!config.versionCheck && !disableUpdateCheck)
+      config.versionCheck = true;
     await setFeatures(config);
+    recreateCfgMenu && siteEvents.emit("recreateCfgMenu");
   });
 
   const btnWrapper = document.createElement("div");

src/features/versionCheck.ts

@@ -29,29 +29,34 @@ export async function initVersionCheck() {
 export async function doVersionCheck(notifyNoUpdatesFound = false) {
   await GM.setValue("bytm-version-check", Date.now());
 
-  const res = await sendRequest({
-    method: "GET",
-    url: releaseURL,
-  });
+  // DEBUG:
+  const dialog = await getVersionNotifDialog({ latestTag: "1.1.1" });
+  await dialog.open();
+  return;
 
-  // TODO: small dialog for "no update found" message?
-  const noUpdateFound = () => notifyNoUpdatesFound ? alert(t("no_updates_found")) : undefined;
+  // const res = await sendRequest({
+  //   method: "GET",
+  //   url: releaseURL,
+  // });
 
-  const latestTag = res.finalUrl.split("/").pop()?.replace(/[a-zA-Z]/g, "");
+  // // TODO: small dialog for "no update found" message?
+  // const noUpdateFound = () => notifyNoUpdatesFound ? alert(t("no_updates_found")) : undefined;
 
-  if(!latestTag)
-    return noUpdateFound();
+  // const latestTag = res.finalUrl.split("/").pop()?.replace(/[a-zA-Z]/g, "");
 
-  const versionComp = compareVersions(scriptInfo.version, latestTag);
+  // if(!latestTag)
+  //   return noUpdateFound();
 
-  info("Version check - current version:", scriptInfo.version, "- latest version:", latestTag);
+  // const versionComp = compareVersions(scriptInfo.version, latestTag);
 
-  if(versionComp < 0) {
-    const dialog = await getVersionNotifDialog({ latestTag });
-    await dialog.open();
-    return;
-  }
-  return noUpdateFound();
+  // info("Version check - current version:", scriptInfo.version, "- latest version:", latestTag);
+
+  // if(versionComp < 0) {
+  //   const dialog = await getVersionNotifDialog({ latestTag });
+  //   await dialog.open();
+  //   return;
+  // }
+  // return noUpdateFound();
 }
 
 /**

src/index.ts

@@ -1,5 +1,5 @@
 import { compress, decompress, type Stringifiable } from "@sv443-network/userutils";
-import { addStyle, domLoaded, reserialize, t, warn } from "./utils";
+import { addStyle, domLoaded, reserialize, warn } from "./utils";
 import { clearConfig, defaultData as defaultFeatData, getFeatures, initConfig, setFeatures } from "./config";
 import { buildNumber, compressionFormat, defaultLogLevel, mode, scriptInfo } from "./constants";
 import { error, getDomain, info, getSessionId, log, setLogLevel, initTranslations, setLocale } from "./utils";
@@ -117,8 +117,6 @@ async function onDomLoad() {
   const features = getFeatures();
   const ftInit = [] as Promise<void>[];
 
-  console.log(">>>\n", Object.keys(features).map(k => ([k, t(`feature_desc_${k}`)]).join(" :: ")).reduce((a, c, i) => `${a}${i === 0 ? "" : "\n"}${c}`, ""));
-
   try {
     insertGlobalStyle();
 

src/menu/menu_old.css

@@ -409,6 +409,10 @@
   font-weight: bolder;
 }
 
+.bytm-markdown-container .pr-link-cont {
+  padding-top: 10px;
+}
+
 #bytm-feat-help-dialog-desc, #bytm-feat-help-dialog-text {
   overflow-wrap: break-word;
   white-space: pre-wrap;

src/menu/menu_old.ts

@@ -2,7 +2,7 @@ import { debounce, isScrollable } from "@sv443-network/userutils";
 import { defaultData, getFeatures, setFeatures, setDefaultFeatures } from "../config";
 import { buildNumber, host, mode, scriptInfo } from "../constants";
 import { featInfo, disableBeforeUnload } from "../features/index";
-import { error, getResourceUrl, info, log, resourceToHTMLString, getLocale, hasKey, initTranslations, setLocale, t, arrayWithSeparators, tp, type TrKey, onInteraction } from "../utils";
+import { error, getResourceUrl, info, log, resourceToHTMLString, getLocale, hasKey, initTranslations, setLocale, t, arrayWithSeparators, tp, type TrKey, onInteraction, getDomain } from "../utils";
 import { siteEvents } from "../siteEvents";
 import { getChangelogDialog, getExportDialog, getFeatHelpDialog, getImportDialog } from "../dialogs";
 import type { FeatureCategory, FeatureKey, FeatureConfig, HotkeyObj, FeatureInfo } from "../types";
@@ -41,7 +41,7 @@ async function addCfgMenu() {
   //#region bg & container
   const backgroundElem = document.createElement("div");
   backgroundElem.id = "bytm-cfg-menu-bg";
-  backgroundElem.classList.add("bytm-menu-bg");
+  backgroundElem.classList.add("bytm-menu-bg", `bytm-menu-bg-dom-${getDomain()}`);
   backgroundElem.ariaLabel = backgroundElem.title = t("close_menu_tooltip");
   backgroundElem.style.visibility = "hidden";
   backgroundElem.style.display = "none";
@@ -56,7 +56,7 @@ async function addCfgMenu() {
 
   const menuContainer = document.createElement("div");
   menuContainer.ariaLabel = menuContainer.title = ""; // prevent bg title from propagating downwards
-  menuContainer.classList.add("bytm-menu");
+  menuContainer.classList.add("bytm-menu", `bytm-menu-dom-${getDomain()}`);
   menuContainer.id = "bytm-cfg-menu";
 
 

src/utils/misc.ts

@@ -209,7 +209,7 @@ export async function getChangelogHtmlWithDetails() {
     for(const match of h2Matches) {
       const [fullMatch, , verStr] = match;
       const verId = getVerId(verStr);
-      const h2Elem = `<h2 id="${verId}" role="subheading" aria-level="1">Version ${verStr}</h2>`;
+      const h2Elem = `<h2 id="${verId}" role="subheading" aria-level="1">${verStr}</h2>`;
       const summaryElem = `<summary tab-index="0">${h2Elem}</summary>`;
       changelogHtml = changelogHtml.replace(fullMatch, `${summaryElem}`);
     }