removed annoying popups

package.json

@@ -1,7 +1,7 @@
 {
     "name": "cobalt",
     "description": "save what you love",
-    "version": "3.6",
+    "version": "3.6.1",
     "author": "wukko",
     "exports": "./src/cobalt.js",
     "type": "module",

src/front/cobalt.css

@@ -4,6 +4,7 @@
     --border-15: 0.15rem solid var(--accent);
     --border-10: 0.1rem solid var(--accent);
     --font-mono: 'Noto Sans Mono', 'Consolas', 'SF Mono', monospace;
+    --red: rgb(255, 0, 61);
 }
 @media (prefers-color-scheme: dark) {
     :root {
@@ -251,6 +252,13 @@ input[type="checkbox"] {
     padding: 0.6rem 1.2rem!important;
     align-content: center;
 }
+.notification-dot {
+    width: 8px;
+    height: 8px;
+    background: var(--red);
+    margin-right: 0.4rem;
+    border-radius: 99rem;
+}
 .text-backdrop {
     background: var(--accent);
     color: var(--background);
@@ -268,7 +276,7 @@ input[type="checkbox"] {
     visibility: hidden;
     position: fixed;
     height: auto;
-    width: 30%;
+    width: 32%;
     z-index: 999;
     padding: 3rem 2rem 2rem 2rem;
     font-size: 0.9rem;
@@ -542,6 +550,9 @@ input[type="checkbox"] {
     .popup.small {
         width: 25%
     }
+    .popup {
+        width: 35%;
+    }
 }
 @media screen and (max-width: 1440px) {
     #cobalt-main-box {
@@ -554,7 +565,12 @@ input[type="checkbox"] {
         width: 40%;
     }
 }
-@media screen and (max-width: 1100px) {
+@media screen and (max-width: 1300px) {
+    .popup {
+        width: 46%;
+    }
+}
+@media screen and (max-width: 1200px) {
     #cobalt-main-box {
         width: 70%;
     }

src/front/cobalt.js

@@ -1,6 +1,7 @@
 let isIOS = navigator.userAgent.toLowerCase().match("iphone os");
-let version = 11;
+let version = 12;
 let regex = new RegExp(/https:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/);
+let notification = `<div class="notification-dot"></div>`
 
 let switchers = {
     "theme": ["auto", "light", "dark"],
@@ -105,6 +106,35 @@ function changeTab(evnt, tabId, tabClass) {
     }
     eid(tabId).style.display = "block";
     evnt.currentTarget.dataset.enabled = "true";
+    if (tabId == "tab-about-changelog" && sGet("changelogStatus") != `${version}`) notificationCheck("changelog");
+    if (tabId == "tab-about-about" && !sGet("seenAbout")) notificationCheck("about");
+}
+function notificationCheck(type) {
+    let changed = true;
+    switch (type) {
+        case "about":
+            sSet("seenAbout", "true");
+            break;
+        case "changelog":
+            sSet("changelogStatus", version)
+            break;
+        default:
+            changed = false;
+            break;
+    }
+    if (changed && sGet("changelogStatus") == `${version}` || type == "disable") {
+        setTimeout(() => {
+            eid("about-footer").innerHTML = eid("about-footer").innerHTML.replace(notification, '');
+            eid("tab-button-about-changelog").innerHTML = eid("tab-button-about-changelog").innerHTML.replace(notification, '')
+        }, 900)
+    }
+    if (sGet("disableChangelog") != "true") {
+        if (!sGet("seenAbout") && !eid("about-footer").innerHTML.includes(notification)) eid("about-footer").innerHTML = `${notification}${eid("about-footer").innerHTML}`;
+        if (sGet("changelogStatus") != `${version}`) {
+            if (!eid("about-footer").innerHTML.includes(notification)) eid("about-footer").innerHTML = `${notification}${eid("about-footer").innerHTML}`;
+            if (!eid("tab-button-about-changelog").innerHTML.includes(notification)) eid("tab-button-about-changelog").innerHTML = `${notification}${eid("tab-button-about-changelog").innerHTML}`;
+        }
+    }
 }
 function hideAllPopups() {
     let filter = document.getElementsByClassName('popup');
@@ -116,52 +146,40 @@ function hideAllPopups() {
     eid("popup-backdrop").style.visibility = "hidden";
 }
 function popup(type, action, text) {
-    if (action == 1) hideAllPopups();
+    if (action == 1) {
-    eid("popup-backdrop").style.visibility = vis(action);
+        hideAllPopups(); // hide the previous popup before showing a new one
-    switch (type) {
+        switch (type) {
-        case "about":
+            case "about":
-            let tabId = text ? text : "changelog";
+                let tabId = sGet("seenAbout") ? "changelog" : "about";
-            if (tabId == "changelog") {
+                eid(`tab-button-${type}-${tabId}`).click();
-                sSet("changelogStatus", version)
+                break;
-            }
+            case "settings":
-            eid(`tab-button-${type}-${tabId}`).click();
+                eid(`tab-button-${type}-video`).click();
-            eid("popup-about").style.visibility = vis(action);
+                break;
-            if (!sGet("seenAbout")) sSet("seenAbout", "true");
+            case "error":
-            break;
+                eid("desc-error").innerHTML = text;
-        case "settings":
+                break;
-            eid(`tab-button-${type}-video`).click();
+            case "download":
-            eid("popup-settings").style.visibility = vis(action);
-            break;
-        case "error":
-            eid("desc-error").innerHTML = text;
-            eid("popup-error").style.visibility = vis(action);
-            break;
-        case "download":
-            if (action == 1) {
                 eid("pd-download").href = text;
                 eid("pd-copy").setAttribute("onClick", `copy('pd-copy', '${text}')`);
-            }
+                break;
-            eid("popup-download").style.visibility = vis(action);
+            case "imagePicker":
-            break;
+                eid("imagepicker-download").href = text.url;
-        case "imagePicker":
+                for (let i in text.images) {
-            switch (action) {
+                    eid("imagepicker-holder").innerHTML += `<div class="imagepicker-image-container"><img class="imagepicker-image" src="${text.images[i]}" onerror="this.parentNode.style.display='none'"></img></div>`
-                case 1:
+                }
-                    eid("imagepicker-download").href = text.url;
+                break;
-                    for (let i in text.images) {
+            default:
-                        eid("imagepicker-holder").innerHTML += `<div class="imagepicker-image-container"><img class="imagepicker-image" src="${text.images[i]}" onerror="this.parentNode.style.display='none'"></img></div>`
+                break;
-                    }
+        }
-                    break;
+    } else {
-                case 0:
+        if (type == "imagePicker") {
-                    eid("imagepicker-download").href = '/';
+            eid("imagepicker-download").href = '/';
-                    eid("imagepicker-holder").innerHTML = ''
+            eid("imagepicker-holder").innerHTML = ''
-                    break;
+        }
-            }
-            eid("popup-imagePicker").style.visibility = vis(action);
-            break;
-        default:
-            eid(`popup-${type}`).style.visibility = vis(action);
-            break;
     }
+    eid("popup-backdrop").style.visibility = vis(action);
+    eid(`popup-${type}`).style.visibility = vis(action);
 }
 function changeSwitcher(li, b) {
     if (b) {
@@ -194,6 +212,7 @@ function checkbox(action) {
         if (action == "alwaysVisibleButton") button();
         if (action == "disableClipboardButton") eid("pasteFromClipboard").style.display = "flex";
     }
+    sGet(action) == "true" ? notificationCheck("disable") : notificationCheck();
 }
 function updateToggle(toggl, state) {
     switch(state) {
@@ -359,11 +378,7 @@ window.onload = () => {
     eid("cobalt-main-box").style.visibility = 'visible';
     eid("footer").style.visibility = 'visible';
     eid("url-input-area").value = "";
-    if (!sGet("seenAbout")) {
+    notificationCheck();
-        popup('about', 1, "about");
-    } else if (sGet("changelogStatus") != `${version}` && sGet("disableChangelog") != "true") {
-        popup('about', 1, "changelog");
-    }
     if (isIOS) sSet("downloadPopup", "true");
     let urlQuery = new URLSearchParams(window.location.search).get("u");
     if (urlQuery !== null) {

src/localization/languages/en.json

@@ -80,7 +80,6 @@
         "SettingsAudioFormatBest": "best",
         "SettingsAudioFormatDescription": "when best format is selected, you get audio in best quality available, because audio is kept in its original format. if you select anything other than that, you'll get a slightly compressed file.",
         "Keyphrase": "save what you love",
-        "SettingsDisableChangelogOnUpdate": "don't show changelog after major updates",
         "SettingsRemoveWatermark": "disable watermark",
         "ErrorPopupCloseButton": "got it",
         "ErrorLengthAudioConvert": "current length limit for audio conversion is {s} minutes. pick \"best\" format if you want to avoid limitations.",
@@ -101,6 +100,7 @@
         "ChangelogPressToExpand": "press to load",
         "Miscellaneous": "miscellaneous",
         "ModeToggleAuto": "auto mode",
-        "ModeToggleAudio": "audio mode"
+        "ModeToggleAudio": "audio mode",
+        "SettingsDisableNotifications": "disable in-app notifications"
     }
 }

src/localization/languages/ru.json

@@ -81,7 +81,6 @@
         "SettingsAudioFormatBest": "лучший",
         "SettingsAudioFormatDescription": "когда выбран \"лучший\" формат, ты получишь аудио максимально возможного качества, так как оно останется в оригинальном формате. если же выбрано что-то другое, то аудио будет немного сжато.",
         "Keyphrase": "сохраняй то, что любишь",
-        "SettingsDisableChangelogOnUpdate": "не показывать изменения после обновлений",
         "SettingsRemoveWatermark": "убрать ватермарку",
         "ErrorPopupCloseButton": "ясно",
         "ModeToggle": "режим",
@@ -104,6 +103,7 @@
         "ChangelogPressToExpand": "нажми, чтобы загрузить",
         "Miscellaneous": "разное",
         "ModeToggleAuto": "авто режим",
-        "ModeToggleAudio": "аудио режим"
+        "ModeToggleAudio": "аудио режим",
+        "SettingsDisableNotifications": "не показывать уведомления"
     }
 }

src/modules/changelog/changelog.json

@@ -1,10 +1,12 @@
 {
     "current": {
+        "title": "less disturbance (3.6.2)",
+        "content": "changelog no longer annoys you after a major update! this action has been replaced with a notification dot. if you see a red dot, then there's something new.\n\nyour old setting that disabled the changelog popup now applies to notifications.\n\nnew users will see a notification dot instead of an about popup, too. this was mostly done to prevent complications if your browser is set up to clean local storage when you close it.\n\nother changes:\n- popups are now a bit wider, just so more content fits at once.\n- better interface scaling.\n- code is a bit cleaner now."
+    },
+    "history": [{
         "title": "improvements all around! (3.6)",
         "content": "- download mode switcher is moving places, it's now right next to link input area.\n- smart mode has been renamed to auto mode, because this name is easier to understand.\n- all spacings in ui have been evened out. no more eye strain.\n- added support for twitter /video/1 links\n- clipboard button exception has been redone to prepare for adoption of readtext clipboard api in firefox.\n- cobalt is now using different tiktok api endpoint, because previous one got killed, just like the one before.\n- \"other\" settings tab has been cleaned up."
-    },
+    }, {
-    "DisableIfYouWant": "\n\nif you don't want to see this popup after every major update, you can disable it in settings > other.",
-    "history": [{
         "title": "tiktok support is back :D (3.5.4)",
         "content": "you can download videos, sounds, and images from tiktok again!\nhuge thank you to <a class=\"text-backdrop\" href=\"https://github.com/minzique\" target=\"_blank\">@minzique</a> for finding another api endpoint that works."
     }, {

src/modules/pageRender/elements.js

@@ -33,7 +33,7 @@ export function checkbox(action, text, aria, paddingType) {
             break;
     }
     return `<label id="${action}-chkbx" class="checkbox${paddingClass}">
-        <input id="${action}" type="checkbox" ${aria ? `aria-label="${aria}"` : ''} onclick="checkbox('${action}')">
+        <input id="${action}" type="checkbox" ${aria ? `aria-label="${aria}"` : `aria-label="${text}"`} onclick="checkbox('${action}')">
         <span>${text}</span>
     </label>`
 }
@@ -119,13 +119,13 @@ export function footerButtons(obj) {
     for (let i = 0; i < obj.length; i++) {
         switch (obj[i]["type"]) {
             case "toggle": 
-                items += `<button id="${obj[i]["name"]}" class="switch footer-button" onclick="toggle('${obj[i]["name"]}')" aria-label="${obj[i]["aria"]}">${obj[i]["text"]}</button>`;
+                items += `<button id="${obj[i]["name"]}-footer" class="switch footer-button" onclick="toggle('${obj[i]["name"]}')" aria-label="${obj[i]["aria"]}">${obj[i]["text"]}</button>`;
                 break;
             case "action":
-                items += `<button id="${obj[i]["name"]}" class="switch footer-button" onclick="${obj[i]["action"]}()" aria-label="${obj[i]["aria"]}">${obj[i]["text"]}</button>`;
+                items += `<button id="${obj[i]["name"]}-footer" class="switch footer-button" onclick="${obj[i]["action"]}()" aria-label="${obj[i]["aria"]}">${obj[i]["text"]}</button>`;
                 break;
             case "popup":
-                items += `<div class="footer-pair"><button id="${obj[i]["name"]}" class="switch footer-button" onclick="popup('${obj[i]["name"]}', 1)" aria-label="${obj[i]["aria"]}">${obj[i]["text"]}</button><button id="${obj[i+1]["name"]}" class="switch footer-button" onclick="popup('${obj[i+1]["name"]}', 1)" aria-label="${obj[i+1]["aria"]}">${obj[i+1]["text"]}</button></div>`;
+                items += `<div class="footer-pair"><button id="${obj[i]["name"]}-footer" class="switch footer-button" onclick="popup('${obj[i]["name"]}', 1)" aria-label="${obj[i]["aria"]}">${obj[i]["text"]}</button><button id="${obj[i+1]["name"]}-footer" class="switch footer-button" onclick="popup('${obj[i+1]["name"]}', 1)" aria-label="${obj[i+1]["aria"]}">${obj[i+1]["text"]}</button></div>`;
                 i++;
                 break;
         }

src/modules/pageRender/page.js

@@ -107,7 +107,7 @@ export default function(obj) {
                         classes: ["changelog-subtitle"],
                         nopadding: true
                     }, {
-                        text: changelogManager("content") + changelogManager("DisableIfYouWant")
+                        text: changelogManager("content")
                     }, {
                         text: `<div class="category-title">${loc(obj.lang, 'ChangelogLastCommit')}</div>`,
                         raw: true
@@ -207,7 +207,7 @@ export default function(obj) {
                     + settingsCategory({
                         name: "tiktok",
                         title: "tiktok & douyin",
-                        body: checkbox("disableTikTokWatermark", loc(obj.lang, 'SettingsRemoveWatermark'), loc(obj.lang, 'SettingsRemoveWatermark'))
+                        body: checkbox("disableTikTokWatermark", loc(obj.lang, 'SettingsRemoveWatermark'))
                     })
             }, {
                 name: "audio",
@@ -249,8 +249,8 @@ export default function(obj) {
                 }) + settingsCategory({
                     name: "miscellaneous",
                     title: loc(obj.lang, 'Miscellaneous'),
-                    body: checkbox("disableChangelog", loc(obj.lang, 'SettingsDisableChangelogOnUpdate'), loc(obj.lang, 'SettingsDisableChangelogOnUpdate'))
+                    body: checkbox("disableChangelog", loc(obj.lang, 'SettingsDisableNotifications'))
-                        + checkbox("disableClipboardButton", loc(obj.lang, 'SettingsDisableClipboard'), loc(obj.lang, 'SettingsDisableClipboard'))
+                        + checkbox("disableClipboardButton", loc(obj.lang, 'SettingsDisableClipboard'))
                 })
             }],
         })}