3.6

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."
     }, {

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) {
-    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>`

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