list of sponsors + fixes

- added list of sponsors, if you host an instance, it can be enabled with showSponsors.
- fixed download button thickness on ios.
- about button now opens about tab when no new changelog is available.

package.json

@@ -1,7 +1,7 @@
 {
     "name": "cobalt",
     "description": "save what you love",
-    "version": "7.5.1",
+    "version": "7.6",
     "author": "wukko",
     "exports": "./src/cobalt.js",
     "type": "module",

src/config.json

@@ -74,5 +74,15 @@
         "copy": ["-c:a", "copy"],
         "audio": ["-ar", "48000", "-ac", "2", "-b:a", "320k"],
         "m4a": ["-movflags", "frag_keyframe+empty_moov"]
-    }
+    },
+    "sponsors": [{
+        "name": "royale",
+        "fullName": "RoyaleHosting",
+        "url": "https://royalehosting.net/",
+        "logo": {
+            "width": 605,
+            "height": 136,
+            "scale": 5
+        }
+    }]
 }

src/front/cobalt.css

@@ -315,10 +315,11 @@ button:active,
     color: var(--accent);
     background: none;
     border: none;
-    font-size: 1.6rem;
+    font-size: 1.8rem;
     cursor: pointer;
     padding: 0;
-    letter-spacing: -0.36rem;
+    letter-spacing: -0.35rem;
+    font-weight: normal!important;
 }
 #download-button:disabled {
     color: var(--accent-subtext);
@@ -759,9 +760,6 @@ button:active,
     user-select: none;
     -webkit-user-select: none;
 }
-.collapse-list.last {
-    margin-bottom: 1rem;
-}
 .collapse-header {
     padding: 0.5rem var(--padding-1);
     font-size: 0.95rem;
@@ -948,6 +946,27 @@ button:active,
 .collapse-list.last.expanded .collapse-header {
     border-radius: 0;
 }
+.sponsored-by-text {
+    text-align: center!important;
+    font-size: .85rem;
+    color: var(--accent-subtext);
+    user-select: none;
+}
+#sponsored-logos {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    gap: 0.2rem 1rem;
+    margin-bottom: 1rem;
+}
+.sponsored-logo svg {
+    height: inherit;
+    width: inherit;
+}
+.sponsored-logo svg path {
+    fill: var(--accent-subtext);
+}
 /* prevent resizing fliecker on ios if web app is installed as standalone */
 @media all and (display-mode: standalone) {
     #home.visible {
@@ -1092,7 +1111,7 @@ button:active,
     }
     .popup.small.visible {
         transform: none;
-        transition: transform 200ms cubic-bezier(0.075, 0.82, 0.165, 1), opacity 130ms ease-in-out;
+        transition: transform 210ms cubic-bezier(0.062, 0.82, 0.165, 1), opacity 130ms ease-in-out;
     }
     .popup.small #popup-header {
         background: none;

src/front/cobalt.js

@@ -194,7 +194,7 @@ function popup(type, action, text) {
         store.isPopupOpen = true;
         switch (type) {
             case "about":
-                let tabId = sGet("seenAbout") ? "changelog" : "about";
+                let tabId = sGet("changelogStatus") !== `${version}` ? "changelog" : "about";
                 if (text) tabId = text;
                 eid(`tab-button-${type}-${tabId}`).click();
                 break;

src/localization/languages/en.json

@@ -144,6 +144,7 @@
         "NewDomainWelcome": "cobalt is moving! same features, same owner, simply a more rememberable domain. and still no ads.\n\n<span class=\"text-backdrop\">cobalt.tools</span> is the new main domain, aka where you are now. make sure to update your bookmarks and reinstall the web app!",
         "DataTransferSuccess": "btw, your settings have been transferred automatically :)",
         "DataTransferError": "something went wrong when transferring your preferences. you'll have to open settings and configure cobalt by hand.",
-        "SupportNotAffiliated": "cobalt is <span class=\"text-backdrop\">not affiliated</span> with any services listed above."
+        "SupportNotAffiliated": "cobalt is <span class=\"text-backdrop\">not affiliated</span> with any services listed above.",
+        "SponsoredBy": "sponsored by"
     }
 }

src/localization/languages/ru.json

@@ -146,6 +146,7 @@
         "DataTransferSuccess": "кстати, твои настройки были перенесены автоматически :)",
         "DataTransferError": "при переносе настроек что-то пошло не так. придётся зайти в настройки и настроить кобальт вручную.",
         "SupportNotAffiliated": "кобальт <span class=\"text-backdrop\">не аффилирован</span> ни с одним из перечисленных выше сервисов.",
-        "SupportMetaNoticeRU": "деятельность meta platforms inc. (владелец instagram) запрещена на территории россии."
+        "SupportMetaNoticeRU": "деятельность meta platforms inc. (владелец instagram) запрещена на территории россии.",
+        "SponsoredBy": "спонсируется"
     }
 }

src/localization/manager.js

@@ -1,6 +1,6 @@
 import * as fs from "fs";
 import { links, repo } from "../modules/config.js";
-import loadJson from "../modules/sub/loadJSON.js";
+import { loadJSON } from "../modules/sub/loadFromFs.js";
 
 const locPath = './src/localization/languages';
 
@@ -10,7 +10,7 @@ let languages = [];
 export async function loadLoc() {
     const files = await fs.promises.readdir(locPath).catch((e) => { return [] });
     files.forEach(file => {
-        loc[file.split('.')[0]] = loadJson(`${locPath}/${file}`);
+        loc[file.split('.')[0]] = loadJSON(`${locPath}/${file}`);
         languages.push(file.split('.')[0])
     });
 }

src/modules/changelog/changelogManager.js

@@ -1,5 +1,5 @@
 import { replaceBase } from "../../localization/manager.js";
-import loadJSON from "../sub/loadJSON.js";
+import { loadJSON } from "../sub/loadFromFs.js";
 
 let changelog = loadJSON('./src/modules/changelog/changelog.json')
 

src/modules/config.js

@@ -1,7 +1,7 @@
-import loadJson from "./sub/loadJSON.js";
-const config = loadJson("./src/config.json");
-const packageJson = loadJson("./package.json");
-const servicesConfigJson = loadJson("./src/modules/processing/servicesConfig.json");
+import { loadJSON } from "./sub/loadFromFs.js";
+const config = loadJSON("./src/config.json");
+const packageJson = loadJSON("./package.json");
+const servicesConfigJson = loadJSON("./src/modules/processing/servicesConfig.json");
 
 export const
     services = servicesConfigJson.config,
@@ -16,4 +16,5 @@ export const
     ffmpegArgs = config.ffmpegArgs,
     supportedAudio = config.supportedAudio,
     celebrations = config.celebrations,
-    links = config.links
+    links = config.links,
+    sponsors = config.sponsors

src/modules/pageRender/elements.js

@@ -1,5 +1,6 @@
-import { authorInfo, celebrations } from "../config.js";
+import { authorInfo, celebrations, sponsors } from "../config.js";
 import emoji from "../emoji.js";
+import { loadFile } from "../sub/loadFromFs.js";
 
 export const backButtonSVG = `<svg width="22" height="22" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M14.1905 28.5L2 16L14.1905 3.5L16.2857 5.62054L7.65986 14.4654H30V17.5346H7.65986L16.2857 26.3516L14.1905 28.5Z" fill="#E1E1E1"/>
@@ -255,3 +256,21 @@ export function webLoc(t, arr) {
     }
     return `{${base}};`
 }
+
+export function sponsoredList() {
+    let base = ``;
+    let altText = ``
+    for (let i = 0; i < sponsors.length; i++) {
+        let s = sponsors[i];
+        let loadedLogo = loadFile(`./src/front/sponsors/${s.name}.svg`);
+
+        altText += `${s.fullName ? s.fullName : s.name}, `;
+        base +=
+        `<a class="sponsored-logo ${s.name}" 
+            href="${s.url}" target="_blank" 
+            style="width: calc(${s.logo.width}px / ${s.logo.scale}); height: calc(${s.logo.height}px / ${s.logo.scale});">
+            ${loadedLogo}
+        </a>`
+    }
+    return `<div id="sponsored-logos" aria-label="${altText.slice(0, -2)}">${base}</div>`
+}

src/modules/pageRender/page.js

@@ -1,4 +1,4 @@
-import { checkbox, collapsibleList, explanation, footerButtons, multiPagePopup, popup, popupWithBottomButtons, sep, settingsCategory, switcher, socialLink, socialLinks, urgentNotice, keyboardShortcuts, webLoc } from "./elements.js";
+import { checkbox, collapsibleList, explanation, footerButtons, multiPagePopup, popup, popupWithBottomButtons, sep, settingsCategory, switcher, socialLink, socialLinks, urgentNotice, keyboardShortcuts, webLoc, sponsoredList } from "./elements.js";
 import { services as s, authorInfo, version, repo, donations, supportedAudio } from "../config.js";
 import { getCommitInfo } from "../sub/currentCommit.js";
 import loc from "../../localization/manager.js";
@@ -164,7 +164,17 @@ export default function(obj) {
                             title: `${emoji("📑")} ${t("CollapseLegal")}`,
                             body: t("FairUse")
                         }])
-                    }]
+                    },
+                    ...(process.env.showSponsors ?
+                    [{
+                        text: t("SponsoredBy"),
+                        classes: ["sponsored-by-text"],
+                        nopadding: true
+                    }, {
+                        text: sponsoredList(),
+                        raw: true
+                    }] : []
+                    )]
                 })
             }, {
                 name: "changelog",

src/modules/sub/loadFromFs.js

@@ -0,0 +1,16 @@
+import * as fs from "fs";
+
+export function loadJSON(path) {
+    try {
+        return JSON.parse(fs.readFileSync(path, 'utf-8'))
+    } catch(e) {
+        return false
+    }
+}
+export function loadFile(path) {
+    try {
+        return fs.readFileSync(path, 'utf-8')
+    } catch(e) {
+        return false
+    }
+}

src/modules/sub/loadJSON.js

@@ -1,9 +0,0 @@
-import * as fs from "fs";
-
-export default function(path) {
-    try {
-        return JSON.parse(fs.readFileSync(path, 'utf-8'))
-    } catch(e) {
-        return false
-    }
-}

src/test/test.js

@@ -2,7 +2,7 @@ import "dotenv/config";
 
 import { getJSON } from "../modules/api.js";
 import { services } from "../modules/config.js";
-import loadJSON from "../modules/sub/loadJSON.js";
+import { loadJSON } from "../modules/sub/loadFromFs.js";
 import { checkJSONPost } from "../modules/sub/utils.js";
 
 let tests = loadJSON('./src/test/tests.json');