removed annoying popups

2022-10-02 20:13:33 +06:00 · 2022-10-02 20:13:33 +06:00 · fe3ada0323
commit fe3ada0323
parent 9a65e9117c
8 changed files with 100 additions and 67 deletions
--- a/package.json
+++ b/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",
--- a/src/front/cobalt.css
+++ b/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%;
    }
--- a/src/front/cobalt.js
+++ b/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();
-    eid("popup-backdrop").style.visibility = vis(action);
-    switch (type) {
-        case "about":
-            let tabId = text ? text : "changelog";
-            if (tabId == "changelog") {
-                sSet("changelogStatus", version)
-            }
-            eid(`tab-button-${type}-${tabId}`).click();
-            eid("popup-about").style.visibility = vis(action);
-            if (!sGet("seenAbout")) sSet("seenAbout", "true");
-            break;
-        case "settings":
-            eid(`tab-button-${type}-video`).click();
-            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) {
+    if (action == 1) {
+        hideAllPopups(); // hide the previous popup before showing a new one
+        switch (type) {
+            case "about":
+                let tabId = sGet("seenAbout") ? "changelog" : "about";
+                eid(`tab-button-${type}-${tabId}`).click();
+                break;
+            case "settings":
+                eid(`tab-button-${type}-video`).click();
+                break;
+            case "error":
+                eid("desc-error").innerHTML = text;
+                break;
+            case "download":
                eid("pd-download").href = text;
                eid("pd-copy").setAttribute("onClick", `copy('pd-copy', '${text}')`);
-            }
-            eid("popup-download").style.visibility = vis(action);
-            break;
-        case "imagePicker":
-            switch (action) {
-                case 1:
-                    eid("imagepicker-download").href = text.url;
-                    for (let i in text.images) {
-                        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;
-                case 0:
-                    eid("imagepicker-download").href = '/';
-                    eid("imagepicker-holder").innerHTML = ''
-                    break;
-            }
-            eid("popup-imagePicker").style.visibility = vis(action);
-            break;
-        default:
-            eid(`popup-${type}`).style.visibility = vis(action);
-            break;
+                break;
+            case "imagePicker":
+                eid("imagepicker-download").href = text.url;
+                for (let i in text.images) {
+                    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;
+            default:
+                break;
+        }
+    } else {
+        if (type == "imagePicker") {
+            eid("imagepicker-download").href = '/';
+            eid("imagepicker-holder").innerHTML = ''
+        }
    }
+    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")) {
-        popup('about', 1, "about");
-    } else if (sGet("changelogStatus") != `${version}` && sGet("disableChangelog") != "true") {
-        popup('about', 1, "changelog");
-    }
+    notificationCheck();
    if (isIOS) sSet("downloadPopup", "true");
    let urlQuery = new URLSearchParams(window.location.search).get("u");
    if (urlQuery !== null) {
--- a/src/localization/languages/en.json
+++ b/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"
    }
 }
--- a/src/localization/languages/ru.json
+++ b/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": "не показывать уведомления"
    }
 }
--- a/src/modules/changelog/changelog.json
+++ b/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."
    }, {
--- a/src/modules/pageRender/elements.js
+++ b/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;
        }
--- a/src/modules/pageRender/page.js
+++ b/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'))
-                        + checkbox("disableClipboardButton", loc(obj.lang, 'SettingsDisableClipboard'), loc(obj.lang, 'SettingsDisableClipboard'))
+                    body: checkbox("disableChangelog", loc(obj.lang, 'SettingsDisableNotifications'))
+                        + checkbox("disableClipboardButton", loc(obj.lang, 'SettingsDisableClipboard'))
                })
            }],
        })}