3.6

2022-09-28 18:21:36 +06:00 · 2022-09-28 18:21:36 +06:00 · 5593b67a74
commit 5593b67a74
parent ab7e38deb5
10 changed files with 77 additions and 41 deletions
--- a/package.json
+++ b/package.json
@ -1,7 +1,7 @@
 {
    "name": "cobalt",
    "description": "save what you love",
-    "version": "3.5.5",
+    "version": "3.6",
    "author": "wukko",
    "exports": "./src/cobalt.js",
    "type": "module",
--- a/src/config.json
+++ b/src/config.json
@ -11,7 +11,7 @@
    "internetExplorerRedirect": {
        "newNT": ["6.1", "6.2", "6.3", "10.0"],
        "old": "https://mypal-browser.org/",
-        "new": "https://vivaldi.com/"
+        "new": "https://www.mozilla.org/firefox/new/"
    },
    "donations": {
        "crypto": {
--- a/src/front/cobalt.css
+++ b/src/front/cobalt.css
@ -175,6 +175,9 @@ input[type="checkbox"] {
 }
 #cobalt-main-box #bottom {
    padding-top: 1.5rem;
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
 }
 #cobalt-main-box #bottom button {
    width: auto!important;
@ -224,7 +227,7 @@ input[type="checkbox"] {
    cursor: not-allowed;
 }
 #footer {
-    bottom: 0rem;
+    bottom: 0.8rem;
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
@ -232,6 +235,11 @@ input[type="checkbox"] {
    text-align: center;
    width: auto;
 }
+#cobalt-main-box #bottom,
+#footer-buttons,
+#footer-buttons, .footer-pair {
+    gap: 0.8rem;
+}
 #footer-buttons, .footer-pair {
    display: flex;
    flex-direction: row;
@ -241,7 +249,6 @@ input[type="checkbox"] {
    width: auto!important;
    color: var(--accent-unhover-2);
    padding: 0.6rem 1.2rem!important;
-    margin: 0.4rem;
    align-content: center;
 }
 .text-backdrop {
@ -370,7 +377,13 @@ input[type="checkbox"] {
    margin-bottom: 1rem;
 }
 .bottom-margin {
-    margin-bottom: 1rem;
+    margin-bottom: 1rem!important;
+}
+.top-margin {
+    margin-top: 1rem!important;
+}
+.no-margin {
+    margin: 0!important;
 }
 .checkbox {
    display: inline-flex;
@ -397,9 +410,6 @@ input[type="checkbox"] {
    padding-bottom: 0.4rem;
    color: var(--accent);
 }
-.extra {
-    margin-top: 1rem;
-}
 .small-padding .subtitle {
    margin-top: 0.5rem;
 }
@ -432,6 +442,7 @@ input[type="checkbox"] {
    color: var(--background);
    background: var(--accent);
    cursor: default;
+    z-index: 999
 }
 .switches {
    display: flex;
@ -605,6 +616,9 @@ input[type="checkbox"] {
    }
 }
@media screen and (max-width: 949px) {
+    #cobalt-main-box #bottom {
+        flex-direction: column;
+    }
    #cobalt-main-box #bottom button {
        width: 100%!important;
    }
--- a/src/front/cobalt.js
+++ b/src/front/cobalt.js
@ -1,5 +1,4 @@
 let isIOS = navigator.userAgent.toLowerCase().match("iphone os");
-let isFirefox = navigator.userAgent.toLowerCase().match("firefox/");
 let version = 10;
 let regex = new RegExp(/https:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/);

@ -9,9 +8,8 @@ let switchers = {
    "quality": ["max", "hig", "mid", "low"],
    "audioFormat": ["best", "mp3", "ogg", "wav", "opus"]
 }
-let checkboxes = ["disableTikTokWatermark", "fullTikTokAudio"];
-if (!isFirefox) checkboxes.push("disableClipboardButton");
-let exceptions = { // used solely for ios devices, because they're less capable than everything else.
+let checkboxes = ["disableTikTokWatermark", "fullTikTokAudio", "disableClipboardButton"];
+let exceptions = { // used solely for ios devices, because they're generally less capable
    "ytFormat": "mp4",
    "audioFormat": "mp3"
 }
@ -218,7 +216,13 @@ function toggle(toggl) {
    updateToggle(toggl, sGet(toggl))
 }
 function loadSettings() {
-    if (sGet("disableClipboardButton") == "true" && !isFirefox) eid("pasteFromClipboard").style.display = "none";
+    try {
+        typeof(navigator.clipboard.readText)
+    } catch (err) {
+        eid("disableClipboardButton-chkbx").style.display = "none";
+        sSet("disableClipboardButton", "true")
+    }
+    if (sGet("disableClipboardButton") == "true") eid("pasteFromClipboard").style.display = "none";
    if (sGet("alwaysVisibleButton") == "true") {
        eid("alwaysVisibleButton").checked = true;
        eid("download-button").value = '>>'
--- a/src/localization/languages/en.json
+++ b/src/localization/languages/en.json
@ -39,7 +39,6 @@
        "SettingsAppearanceSubtitle": "appearance",
        "SettingsThemeSubtitle": "theme",
        "SettingsFormatSubtitle": "download format",
-        "SettingsMiscSubtitle": "more settings",
        "SettingsDownloadsSubtitle": "downloads",
        "SettingsQualitySubtitle": "quality",
        "SettingsThemeAuto": "auto",
@ -84,8 +83,6 @@
        "SettingsDisableChangelogOnUpdate": "don't show changelog after major updates",
        "SettingsRemoveWatermark": "disable watermark",
        "ErrorPopupCloseButton": "got it",
-        "ModeToggle": "mode",
-        "ModeToggleSmart": "smart",
        "ErrorLengthAudioConvert": "current length limit for audio conversion is {s} minutes. pick \"best\" format if you want to avoid limitations.",
        "SettingsAudioFullTikTok": "download full audio",
        "SettingsAudioFullTikTokDescription": "downloads original audio or sound used in video without any additional changes by the video author.",
@ -101,6 +98,9 @@
        "SettingsDisableClipboard": "hide clipboard button",
        "FollowTwitter": "follow {appName}'s twitter account for polls, updates, and more: <a class=\"text-backdrop\" href=\"https://twitter.com/justusecobalt\" target=\"_blank\">@justusecobalt</a>",
        "ChangelogOlder": "previous updates",
-        "ChangelogPressToExpand": "press to load"
+        "ChangelogPressToExpand": "press to load",
+        "Miscellaneous": "miscellaneous",
+        "ModeToggleAuto": "auto mode",
+        "ModeToggleAudio": "audio mode"
    }
 }
--- a/src/localization/languages/ru.json
+++ b/src/localization/languages/ru.json
@ -101,6 +101,9 @@
        "SettingsDisableClipboard": "скрыть кнопку буфера обмена",
        "FollowTwitter": "а ещё, в твиттере {appName} есть опросы, новости, и многое другое: <a class=\"text-backdrop\" href=\"https://twitter.com/justusecobalt\" target=\"_blank\">@justusecobalt</a>",
        "ChangelogOlder": "предыдущие обновления (на английском)",
-        "ChangelogPressToExpand": "нажми, чтобы загрузить"
+        "ChangelogPressToExpand": "нажми, чтобы загрузить",
+        "Miscellaneous": "разное",
+        "ModeToggleAuto": "авто режим",
+        "ModeToggleAudio": "аудио режим"
    }
 }
--- a/src/modules/changelog/changelog.json
+++ b/src/modules/changelog/changelog.json
@ -1,9 +1,13 @@
 {
    "current": {
-        "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.\n\nif you don't want to see this popup anymore, you can disable it in settings > other."
+        "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- 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."
+    }, {
        "title": "vk clips support, improved changelog system, and less bugs (3.5.2)",
        "content": "new features: \n- added support for vk clips. {appName} now lets you download even more cringy videos!\n- added update history right to the changelog menu. it's not loaded by default to minimize page load time, but can be loaded upon pressing a button. probably someone will enjoy this.\n- as you've just read, cobalt now has on-demand blocks. they're rendered on server upon request and exist to prevent any unnecessary clutter by default. the first feature to use on-demand rendering is history of updates in changelog tab.\n\nchanges:\n- moved twitter entry to about tab and made it localized.\n- added clarity to what services exactly are supported in about tab.\n\nbug fixes:\n- cobalt should no longer crash to firefox users if they love to play around with user-agent switching.\n- vk videos of any resolution and aspect ratio should now be downloadable.\n- vk quality picking has been fixed after vk broke it for parsers on their side."
    }, {
--- a/src/modules/changelog/changelogManager.js
+++ b/src/modules/changelog/changelogManager.js
@ -17,6 +17,8 @@ export default function(string) {
                        content: replaceBase(i["content"])
                    }
                });
+            default:
+                return replaceBase(changelog[string])
        }
    } catch (e) {
        return `!!CHANGELOG_${string}!!`
--- a/src/modules/pageRender/elements.js
+++ b/src/modules/pageRender/elements.js
@ -19,8 +19,20 @@ export function switcher(obj) {
        </div>`
 }

-export function checkbox(action, text, aria) {
-    return `<label class="checkbox">
+export function checkbox(action, text, aria, paddingType) {
+    let paddingClass = ` `
+    switch (paddingType) {
+        case 1:
+            paddingClass += "bottom-margin"
+            break;
+        case 2:
+            paddingClass += "top-margin"
+            break;
+        case 3:
+            paddingClass += "no-margin"
+            break;
+    }
+    return `<label id="${action}-chkbx" class="checkbox${paddingClass}">
        <input id="${action}" type="checkbox" ${aria ? `aria-label="${aria}"` : ''} onclick="checkbox('${action}')">
        <span>${text}</span>
    </label>`
--- a/src/modules/pageRender/page.js
+++ b/src/modules/pageRender/page.js
@ -26,14 +26,13 @@ for (let i in donations["other"]) {
 let extr = ''
 for (let i in donations["crypto"]) {
    donate += `<div class="subtitle${extr}">${i} (REPLACEME)</div><div id="don-${i}" class="text-to-copy" onClick="copy('don-${i}')">${donations["crypto"][i]}</div>`
-    extr = ' extra'
+    extr = ' top-margin'
 }
 export default function(obj) {
    audioFormats[0]["text"] = loc(obj.lang, 'SettingsAudioFormatBest');
    let ua = obj.useragent.toLowerCase();
    let isIOS = ua.match("iphone os");
    let isMobile = ua.match("android") || ua.match("iphone os");
-    let isFirefox = ua.match("firefox/");
    try {
        return `<!DOCTYPE html>
 <html lang="en">
@ -108,7 +107,7 @@ export default function(obj) {
                        classes: ["changelog-subtitle"],
                        nopadding: true
                    }, {
-                        text: changelogManager("content")
+                        text: changelogManager("content") + changelogManager("DisableIfYouWant")
                    }, {
                        text: `<div class="category-title">${loc(obj.lang, 'ChangelogLastCommit')}</div>`,
                        raw: true
@ -191,7 +190,7 @@ export default function(obj) {
                            "text": `${loc(obj.lang, 'SettingsQualitySwitchLow')}(${quality.low}p)`
                        }]
                    })
-                }) + `${!isIOS ? checkbox("downloadPopup", loc(obj.lang, 'SettingsEnableDownloadPopup'), loc(obj.lang, 'AccessibilityEnableDownloadPopup')) : ''}`
+                }) + `${!isIOS ? checkbox("downloadPopup", loc(obj.lang, 'SettingsEnableDownloadPopup'), loc(obj.lang, 'AccessibilityEnableDownloadPopup'), 1) : ''}`
                    + settingsCategory({
                        name: "youtube",
                        body: switcher({
@ -225,7 +224,7 @@ export default function(obj) {
                }) + settingsCategory({
                    name: "tiktok",
                    title: "tiktok & douyin",
-                    body: checkbox("fullTikTokAudio", loc(obj.lang, 'SettingsAudioFullTikTok'), loc(obj.lang, 'SettingsAudioFullTikTok')) + `<div class="explanation">${loc(obj.lang, 'SettingsAudioFullTikTokDescription')}</div>`
+                    body: checkbox("fullTikTokAudio", loc(obj.lang, 'SettingsAudioFullTikTok'), loc(obj.lang, 'SettingsAudioFullTikTok'), 3) + `<div class="explanation">${loc(obj.lang, 'SettingsAudioFullTikTokDescription')}</div>`
                })
            }, {
                name: "other",
@ -246,11 +245,13 @@ export default function(obj) {
                            "action": "light",
                            "text": loc(obj.lang, 'SettingsThemeLight')
                        }]
-                    })
+                    }) + checkbox("alwaysVisibleButton", loc(obj.lang, 'SettingsKeepDownloadButton'), loc(obj.lang, 'AccessibilityKeepDownloadButton'), 2)
+                }) + 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'))
                })
-                + checkbox("alwaysVisibleButton", loc(obj.lang, 'SettingsKeepDownloadButton'), loc(obj.lang, 'AccessibilityKeepDownloadButton'))
-                + checkbox("disableChangelog", loc(obj.lang, 'SettingsDisableChangelogOnUpdate'), loc(obj.lang, 'SettingsDisableChangelogOnUpdate'))
-                + (!isFirefox ? checkbox("disableClipboardButton", loc(obj.lang, 'SettingsDisableClipboard'), loc(obj.lang, 'SettingsDisableClipboard')) : ``)
            }],
        })}
        ${popup({
@ -313,9 +314,10 @@ export default function(obj) {
                    <button id="url-clear" onclick="clearInput()" style="display:none;">x</button>
                    <input id="download-button" class="mono dontRead" onclick="download(document.getElementById('url-input-area').value)" type="submit" value="" disabled=true aria-label="${loc(obj.lang, 'AccessibilityDownloadButton')}">
                </div>
-                ${!isFirefox ? `<div id="bottom">
-                <button id="pasteFromClipboard" class="switch" onclick="pasteClipboard()" aria-label="${loc(obj.lang, 'PasteFromClipboard')}">${emoji("📋", 22)} ${loc(obj.lang, 'PasteFromClipboard')}</button>
-            </div>` : ''}
+                <div id="bottom">
+                    <button id="pasteFromClipboard" class="switch" onclick="pasteClipboard()" aria-label="${loc(obj.lang, 'PasteFromClipboard')}">${emoji("📋", 22)} ${loc(obj.lang, 'PasteFromClipboard')}</button>
+                    <button id="audioMode" class="switch" onclick="toggle('audioMode')" aria-label="${loc(obj.lang, 'AccessibilityModeToggle')}">${emoji("✨", 22, 1)}</button>
+                </div>
            </div>
        </div>
        <footer id="footer" style="visibility: hidden;">
@ -330,11 +332,6 @@ export default function(obj) {
            type: "popup",
            text: `${emoji("⚙️", 22)} ${loc(obj.lang, 'TitlePopupSettings')}`,
            aria: loc(obj.lang, 'AccessibilityOpenSettings')
-        }, {
-            name: "audioMode",
-            type: "toggle",
-            text: emoji("✨", 22, 1),
-            aria: loc(obj.lang, 'AccessibilityModeToggle')
        }]
        )}
        </footer>
@ -343,8 +340,8 @@ export default function(obj) {
        noInternet: ` + "`" + loc(obj.lang, 'ErrorNoInternet') + "`" + `,
        noURLReturned: ` + "`" + loc(obj.lang, 'ErrorNoUrlReturned') + "`" + `,
        unknownStatus: ` + "`" + loc(obj.lang, 'ErrorUnknownStatus') + "`" + `,
-        toggleDefault: '${emoji("✨")} ${loc(obj.lang, "ModeToggleSmart")} ${loc(obj.lang, "ModeToggle")}',
-        toggleAudio: '${emoji("🎶")} ${loc(obj.lang, "SettingsAudioTab")} ${loc(obj.lang, "ModeToggle")}'
+        toggleDefault: '${emoji("✨")} ${loc(obj.lang, "ModeToggleAuto")}',
+        toggleAudio: '${emoji("🎶")} ${loc(obj.lang, "ModeToggleAudio")}'
    };</script>
    <script type="text/javascript" src="cobalt.js"></script>
 </html>`;