3.6

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",

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": {

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;
     }

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"];
+let checkboxes = ["disableTikTokWatermark", "fullTikTokAudio", "disableClipboardButton"];
-if (!isFirefox) checkboxes.push("disableClipboardButton");
+let exceptions = { // used solely for ios devices, because they're generally less capable
-let exceptions = { // used solely for ios devices, because they're less capable than everything else.
     "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 = '>>'

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"
     }
 }

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": "аудио режим"
     }
 }

src/modules/changelog/changelog.json

@@ -1,9 +1,13 @@
 {
     "current": {
-        "title": "tiktok support is back :D (3.5.4)",
+        "title": "improvements all around! (3.6)",
-        "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."
+        "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."
     }, {

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}!!`

src/modules/pageRender/elements.js

@@ -19,8 +19,20 @@ export function switcher(obj) {
         </div>`
 }
 
-export function checkbox(action, text, aria) {
+export function checkbox(action, text, aria, paddingType) {
-    return `<label class="checkbox">
+    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>`

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">
+                <div id="bottom">
                     <button id="pasteFromClipboard" class="switch" onclick="pasteClipboard()" aria-label="${loc(obj.lang, 'PasteFromClipboard')}">${emoji("📋", 22)} ${loc(obj.lang, 'PasteFromClipboard')}</button>
-            </div>` : ''}
+                    <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")}',
+        toggleDefault: '${emoji("✨")} ${loc(obj.lang, "ModeToggleAuto")}',
-        toggleAudio: '${emoji("🎶")} ${loc(obj.lang, "SettingsAudioTab")} ${loc(obj.lang, "ModeToggle")}'
+        toggleAudio: '${emoji("🎶")} ${loc(obj.lang, "ModeToggleAudio")}'
     };</script>
     <script type="text/javascript" src="cobalt.js"></script>
 </html>`;