Merge f282b16805 into d892b3526e

src/config.json

@@ -69,5 +69,6 @@
         "copy": ["-c:a", "copy"],
         "audio": ["-ar", "48000", "-ac", "2", "-b:a", "320k"],
         "m4a": ["-movflags", "frag_keyframe+empty_moov"]
-    }
+    },
+    "otherServers": ["default", "https://co.wuk.sh", "https://api.c0ba.lt", "https://co-api.blueb.me", "https://wukko.wolfdo.gg", "https://api.co.749.city", "https://cobalt-api.fluffy.tools", "https://capi.oak.li"]
 }

src/front/cobalt.css

@@ -681,6 +681,9 @@ button:active,
 .popup-tab-content[data-enabled="false"] {
     display: none;
 }
+.popup-tab-content {
+    overflow-x: hidden!important;
+}
 #popup-tabs {
     z-index: 999;
     bottom: 0;
@@ -1147,4 +1150,22 @@ button:active,
     .popup-title {
         line-height: inherit;
     }
+}
+
+.switches-vertical {
+    display: flex;
+    width: auto;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    overflow-x: hidden!important;
+}
+.switch-vertical.first {
+    border-top-left-radius: 5px 6px!important;
+    border-top-right-radius: 5px 6px!important;
+    border-bottom-left-radius: 0px;
+}
+.switch-vertical.last {
+    border-bottom-left-radius: 5px 6px!important;
+    border-bottom-right-radius: 5px 6px!important;
+    border-top-right-radius: 0px;
 }

src/front/cobalt.js

@@ -16,7 +16,8 @@ const switchers = {
     "aFormat": ["mp3", "best", "ogg", "wav", "opus"],
     "dubLang": ["original", "auto"],
     "vimeoDash": ["false", "true"],
-    "audioMode": ["false", "true"]
+    "audioMode": ["false", "true"],
+    "serverPicker": [getDefaultAPI(), "https://co.wuk.sh", "https://api.c0ba.lt", "https://wukko.wolfdo.gg", "https://api.co.749.city", "https://cobalt-api.fluffy.tools", "https://capi.oak.li"]
 };
 const checkboxes = [
     "disableTikTokWatermark",
@@ -37,6 +38,9 @@ function changeAPI(url) {
     apiURL = url;
     return true
 }
+function getDefaultAPI() {
+    return defaultApiURL;
+}
 function eid(id) {
     return document.getElementById(id)
 }
@@ -260,7 +264,14 @@ function popup(type, action, text) {
     eid(`popup-${type}`).focus();
 }
 function changeSwitcher(li, b) {
-    if (b) {
+    if (switchers.serverPicker.includes(b)) {
+        if (!switchers[li].includes(b)) b = switchers[li][0];
+        changeAPI(b);
+        sSet(li, b);
+        for (let i in switchers[li]) {
+            (switchers[li][i] === b) ? enable(`${li}-${b}`) : disable(`${li}-${switchers[li][i]}`)
+        }
+    } else if (b) {
         if (!switchers[li].includes(b)) b = switchers[li][0];
         sSet(li, b);
         for (let i in switchers[li]) {

src/localization/languages/en.json

@@ -40,6 +40,9 @@
         "SettingsThemeAuto": "auto",
         "SettingsThemeLight": "light",
         "SettingsThemeDark": "dark",
+        "SettingsServerPicker": "server picker",
+        "SettingsServerPickerDefault": "default",
+        "SettingsServerPickerDescription": "choose which server to download from, default is ",
         "SettingsKeepDownloadButton": "keep >> visible",
         "AccessibilityKeepDownloadButton": "keep the download button always visible",
         "SettingsEnableDownloadPopup": "ask how to save",

src/modules/config.js

@@ -15,5 +15,6 @@ export const
     donations = config.donations,
     ffmpegArgs = config.ffmpegArgs,
     supportedAudio = config.supportedAudio,
+    otherServers = config.otherServers,
     celebrations = config.celebrations,
     links = config.links

src/modules/pageRender/elements.js

@@ -13,6 +13,13 @@ export function switcher(obj) {
     let items = ``;
     if (obj.name === "download") {
         items = obj.items;
+    } else if (obj.vertical) {
+        for (let i = 0; i < obj.items.length; i++) {
+            let classes = obj.items[i]["classes"] ? obj.items[i]["classes"] : [];
+            if (i === 0) classes.push("first");
+            if (i === (obj.items.length - 1)) classes.push("last");
+            items += `<button id="${obj.name}-${obj.items[i]["action"]}" class="switch switch-vertical${classes.length > 0 ? ' ' + classes.join(' ') : ''}" onclick="changeSwitcher('${obj.name}', '${obj.items[i]["action"]}')">${obj.items[i]["text"] ? obj.items[i]["text"] : obj.items[i]["action"]}</button>`
+        }
     } else {
         for (let i = 0; i < obj.items.length; i++) {
             let classes = obj.items[i]["classes"] ? obj.items[i]["classes"] : [];
@@ -22,12 +29,25 @@ export function switcher(obj) {
         }
     }
 
-    if (obj.noParent) return `<div id="${obj.name}" class="switches">${items}</div>`;
-    return `<div id="${obj.name}-switcher" class="switch-container">
+    if (obj.noParent && obj.vertical) {
+        return `<div id="${obj.name}" class="switches switches-vertical">${items}</div>`
+    } else if (obj.noParent) {
+        return `<div id="${obj.name}" class="switches">${items}</div>`
+    }
+    
+    if (obj.vertical) {
+        return `<div id="${obj.name}-switcher" class="switch-container">
+            ${obj.subtitle ? `<div class="subtitle">${obj.subtitle}</div>` : ``}
+            <div class="switches switches-vertical">${items}</div>
+            ${obj.explanation ? `<div class="explanation">${obj.explanation}</div>` : ``}
+        </div>`
+    } else {
+        return `<div id="${obj.name}-switcher" class="switch-container">
             ${obj.subtitle ? `<div class="subtitle">${obj.subtitle}</div>` : ``}
             <div class="switches">${items}</div>
             ${obj.explanation ? `<div class="explanation">${obj.explanation}</div>` : ``}
         </div>`
+    }
 }
 export function checkbox(obj) {
     let paddings = ["bottom-margin", "top-margin", "no-margin", "top-margin-only"];

src/modules/pageRender/page.js

@@ -1,5 +1,5 @@
 import { checkbox, collapsibleList, explanation, footerButtons, multiPagePopup, popup, popupWithBottomButtons, sep, settingsCategory, switcher, socialLink, urgentNotice, keyboardShortcuts } from "./elements.js";
-import { services as s, authorInfo, version, repo, donations, supportedAudio } from "../config.js";
+import { services as s, authorInfo, version, repo, donations, supportedAudio, otherServers } from "../config.js";
 import { getCommitInfo } from "../sub/currentCommit.js";
 import loc from "../../localization/manager.js";
 import emoji from "../emoji.js";
@@ -7,6 +7,8 @@ import changelogManager from "../changelog/changelogManager.js";
 
 let com = getCommitInfo();
 
+let defaultApiURL = process.env.apiURL ? process.env.apiURL.slice(0, -1) : '';
+
 let enabledServices = Object.keys(s).filter(p => s[p].enabled).sort().map((p) => {
     return `<br>&bull; ${s[p].alias ? s[p].alias : p}`
 }).join('').substring(4)
@@ -26,6 +28,14 @@ for (let i in donations["crypto"]) {
     extr = ' top-margin'
 }
 
+let servers = otherServers.map((p) => {
+    if (p === "default") {
+        return { "action": defaultApiURL }
+    } else {
+        return { "action": p, "text": p.replace("https://","") }
+    }
+})
+
 export default function(obj) {
     const t = (str, replace) => { return loc(obj.lang, str, replace) };
 
@@ -36,6 +46,7 @@ export default function(obj) {
     let platform = isMobile ? "m" : "p";
     if (isMobile && isIOS) platform = "i";
 
+    servers[0]["text"] = t('SettingsServerPickerDefault');
     audioFormats[0]["text"] = t('SettingsAudioFormatBest');
 
     try {
@@ -452,6 +463,17 @@ export default function(obj) {
                         padding: "no-margin"
                     }])
                 })
+                + settingsCategory({
+                    name: "serverpicker",
+                    title: t('SettingsServerPicker'),
+                    explanation: t('SettingsServerPickerDescription'),
+                    body: switcher({
+                        name: "serverPicker",
+                        explanation: t(['SettingsServerPickerDescription'])+defaultApiURL.replace("https://","")+".",
+                        vertical: true,
+                        items: servers
+                    })
+                })
             }],
         })}
         ${popupWithBottomButtons({
@@ -567,7 +589,7 @@ export default function(obj) {
             clipboardErrorNoPermission: ` + "`" + t('ClipboardErrorNoPermission') + "`" + `,
             clipboardErrorFirefox: ` + "`" + t('ClipboardErrorFirefox') + "`" + `,
         };
-        let apiURL = '${process.env.apiURL ? process.env.apiURL.slice(0, -1) : ''}';
+        let defaultApiURL = '${process.env.apiURL ? process.env.apiURL.slice(0, -1) : ''}';
     </script>
     <script type="text/javascript" src="cobalt.js"></script>
 </html>