4.4: new donations popup

this was done in my ongoing effort to renovate and simplify all parts of cobalt web interface

package.json

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

src/config.json

@@ -15,12 +15,11 @@
     },
     "donations": {
         "crypto": {
+            "bitcoin": "bc1q59jyyjvrzj4c22rkk3ljeecq6jmpyscgz9spnd",
             "ethereum": "0x4B4cF23051c78c7A7E0eA09d39099621c46bc302",
-            "bitcoin": "bc1q64amsn0wd60urem3jkhpywed8q8kqwssw6ta5j",
+            "litecoin": "ltc1qvp0xhrk2m7pa6p6z844qcslfyxv4p3vf95rhna"
-            "litecoin": "ltc1qvp0xhrk2m7pa6p6z844qcslfyxv4p3vf95rhna",
-            "bitcoin cash": "bitcoincash:qph0d7d02mvg5xxqjwjv5ahjx2254yx5kv0zfg0xsj"
         },
-        "other": {
+        "links": {
             "boosty": "https://boosty.to/wukko"
         }
     },
@@ -34,7 +33,7 @@
         "02-17": "😺",
         "02-22": "😺",
         "03-01": "😺",
-        "05-26": "🀄",
+        "05-26": "🎂",
         "08-08": "😺",
         "08-26": "🐶",
         "10-29": "😺",

src/front/cobalt.js

@@ -155,6 +155,7 @@ function popup(type, action, text) {
         switch (type) {
             case "about":
                 let tabId = sGet("seenAbout") ? "changelog" : "about";
+                if (text) tabId = text;
                 eid(`tab-button-${type}-${tabId}`).click();
                 break;
             case "settings":

src/front/emoji/cake.svg

@@ -0,0 +1,11 @@
+<svg width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.5 10.9976V6.95758C8.5 6.66758 8.62 6.38758 8.82 6.18758L9.5 5.51758L10.18 6.18758C10.38 6.38758 10.5 6.66758 10.5 6.95758V10.9976H8.5ZM15 10.9976V6.95758C15 6.66758 15.12 6.38758 15.32 6.18758L16 5.51758L16.68 6.18758C16.88 6.38758 17 6.66758 17 6.95758V10.9976H15ZM21.5 6.95758V10.9976H23.5V6.95758C23.5 6.66758 23.39 6.38758 23.18 6.18758L22.5 5.51758L21.82 6.18758C21.62 6.38758 21.5 6.66758 21.5 6.95758Z" fill="#26EAFC"/>
+<path d="M10.78 3.7275L9.87999 2.2175C9.70999 1.9275 9.27999 1.9275 9.10999 2.2175L8.21999 3.7275C8.04999 4.0075 7.96999 4.3375 8.00999 4.6875C8.08999 5.3775 8.63999 5.9275 9.32999 5.9975C10.23 6.0975 11 5.3975 11 4.5075C10.99 4.2275 10.91 3.9575 10.78 3.7275ZM17.28 3.7275L16.39 2.2175C16.22 1.9275 15.79 1.9275 15.62 2.2175L14.73 3.7275C14.56 3.9975 14.48 4.3375 14.52 4.6875C14.6 5.3675 15.15 5.9175 15.84 5.9975C16.74 6.0975 17.51 5.3975 17.51 4.5075C17.5 4.2275 17.42 3.9575 17.28 3.7275ZM22.89 2.2175L23.78 3.7275C23.92 3.9575 24 4.2275 24 4.5075C24 5.3975 23.24 6.0975 22.33 5.9975C21.65 5.9275 21.1 5.3775 21.02 4.6875C20.98 4.3375 21.06 3.9975 21.23 3.7275L22.12 2.2175C22.29 1.9275 22.72 1.9275 22.89 2.2175Z" fill="#FCD53F"/>
+<path d="M9.49999 3.13745L10.11 3.91745C10.26 4.07745 10.35 4.27745 10.35 4.50745C10.35 4.97745 9.96999 5.35745 9.49999 5.35745C9.02999 5.35745 8.64999 4.97745 8.64999 4.50745C8.64999 4.27745 8.73999 4.07745 8.88999 3.91745L9.49999 3.13745ZM16.61 3.91745L16 3.13745L15.39 3.92745C15.24 4.07745 15.15 4.28745 15.15 4.51745C15.15 4.98745 15.53 5.36745 16 5.36745C16.47 5.36745 16.85 4.98745 16.85 4.51745C16.85 4.27745 16.76 4.07745 16.61 3.91745ZM23.11 3.91745L22.5 3.13745L21.89 3.92745C21.74 4.07745 21.65 4.28745 21.65 4.51745C21.65 4.98745 22.03 5.36745 22.5 5.36745C22.97 5.36745 23.35 4.98745 23.35 4.51745C23.35 4.27745 23.26 4.07745 23.11 3.91745Z" fill="#FFB02E"/>
+<path d="M27.75 29.9976H4.25C3.56 29.9976 3 29.4376 3 28.7476V14.9976H29V28.7476C29 29.4376 28.44 29.9976 27.75 29.9976Z" fill="#D3883E"/>
+<path d="M2 12C2 10.3431 3.34314 9 5 9H27.01C28.6669 9 30.01 10.3431 30.01 12V16.9975V17.5575C30.01 18.3775 28.97 18.7575 28.45 18.1175C27.94 17.4875 27.02 17.3875 26.39 17.8875L26.15 18.0775C24.7 19.2075 22.67 19.2075 21.22 18.0775L20.76 17.7175C20.22 17.2975 19.47 17.2975 18.93 17.7175L18.47 18.0775C17.02 19.2075 14.99 19.2075 13.54 18.0775L13.08 17.7175C12.54 17.2975 11.79 17.2975 11.25 17.7175L10.79 18.0775C9.34 19.2075 7.31 19.2075 5.86 18.0775L5.62 17.8875C4.99 17.3975 4.07 17.4975 3.56 18.1175C3.03 18.7475 2 18.3775 2 17.5575V12ZM3 21.9975H29V23.9975H3V21.9975Z" fill="#FFDEA7"/>
+<path d="M15.15 11.15C14.95 11.35 14.95 11.66 15.15 11.86L15.89 12.6C16.09 12.8 16.4 12.8 16.6 12.6C16.8 12.4 16.8 12.09 16.6 11.89L15.86 11.15C15.66 10.95 15.34 10.95 15.15 11.15Z" fill="#00A6ED"/>
+<path d="M6.85355 11.1464C6.65829 10.9512 6.34171 10.9512 6.14645 11.1464C5.95118 11.3417 5.95118 11.6583 6.14645 11.8536L7.14645 12.8536C7.34171 13.0488 7.65829 13.0488 7.85355 12.8536C8.04882 12.6583 8.04882 12.3417 7.85355 12.1464L6.85355 11.1464ZM19.8536 14.1464C19.6583 13.9512 19.3417 13.9512 19.1464 14.1464C18.9512 14.3417 18.9512 14.6583 19.1464 14.8536L20.1464 15.8536C20.3417 16.0488 20.6583 16.0488 20.8536 15.8536C21.0488 15.6583 21.0488 15.3417 20.8536 15.1464L19.8536 14.1464Z" fill="#FF6DC6"/>
+<path d="M25.8536 11.8536C26.0488 11.6583 26.0488 11.3417 25.8536 11.1464C25.6583 10.9512 25.3417 10.9512 25.1464 11.1464L24.1464 12.1464C23.9512 12.3417 23.9512 12.6583 24.1464 12.8536C24.3417 13.0488 24.6583 13.0488 24.8536 12.8536L25.8536 11.8536ZM11.8536 14.8536C12.0488 14.6583 12.0488 14.3417 11.8536 14.1464C11.6583 13.9512 11.3417 13.9512 11.1464 14.1464L10.1464 15.1464C9.95118 15.3417 9.95118 15.6583 10.1464 15.8536C10.3417 16.0488 10.6583 16.0488 10.8536 15.8536L11.8536 14.8536Z" fill="#FF822D"/>
+<path d="M15.1464 11.1464C15.3417 10.9512 15.6583 10.9512 15.8536 11.1464L16.8536 12.1464C17.0488 12.3417 17.0488 12.6583 16.8536 12.8536C16.6583 13.0488 16.3417 13.0488 16.1464 12.8536L15.1464 11.8536C14.9512 11.6583 14.9512 11.3417 15.1464 11.1464Z" fill="#00A6ED"/>
+</svg>

src/localization/languages/en.json

@@ -13,7 +13,6 @@
         "AccessibilityOpenAbout": "open about popup",
         "AccessibilityDownloadButton": "download button",
         "AccessibilityOpenSettings": "open settings popup",
-        "AccessibilityOpenChangelog": "view changelog popup",
         "AccessibilityClosePopup": "close the popup",
         "AccessibilityOpenDonate": "open donation popup",
         "TitlePopupAbout": "what's {appName}?",
@@ -55,11 +54,8 @@
         "AccessibilityEnableDownloadPopup": "ask what to do with downloads",
         "SettingsFormatDescription": "select webm if you want max quality available. webm videos are usually higher bitrate, but ios devices can't play them natively.",
         "SettingsQualityDescription": "if selected quality isn't available, closest one gets picked instead.\nif you want to post a youtube video on social media, then select a combination of mp4 and 720p. those videos are usually not in av1 codec, so they should play just fine basically everywhere.",
-        "DonateSubtitle": "help me pay for hosting",
-        "DonateDescription": "i don't really like crypto in its current state, but it's the only reliable way for me to receive money and pay for anything abroad.",
         "LinkGitHubIssues": ">> report issues and check out the source code on github",
         "LinkGitHubChanges": ">> see previous commits and contribute on github",
-        "LinkDonateContact": ">> let me know if currency you want to donate isn't listed",
         "NoScriptMessage": "{appName} uses javascript for api requests and interactive interface. you have to allow javascript to use this site. i don't have any ads or trackers, pinky promise.",
         "DownloadPopupDescriptionIOS": "on ios devices, you have to press and hold the download button, hide the video preview, and then select \"download linked file\" in appeared popup to save the video. this will be required for as long as apple forces safari webview upon all browser developers on ios.",
         "DownloadPopupDescription": "download button opens a new tab with requested file. you can disable this popup in settings.",
@@ -75,7 +71,7 @@
         "SettingsOtherTab": "other",
         "ChangelogLastMajor": "current version & commit",
         "AccessibilityModeToggle": "toggle download mode",
-        "DonateLinksDescription": "donation links open in a new tab. this is the best way to donate money, if you want me to receive it directly.",
+        "DonateLinksDescription": "donation links open in a new tab. this is the best way to donate if you want me to receive your donation directly.",
         "SettingsAudioFormatBest": "best",
         "SettingsAudioFormatDescription": "when best format is selected, you get audio in best quality available, because audio is kept in its original format. if you select anything other than that, you'll get a slightly compressed file.",
         "Keyphrase": "save what you love",
@@ -95,7 +91,7 @@
         "PasteFromClipboard": "paste from clipboard",
         "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 versions",
-        "ChangelogPressToExpand": "press to load",
+        "ChangelogPressToExpand": "press to expand",
         "Miscellaneous": "miscellaneous",
         "ModeToggleAuto": "auto mode",
         "ModeToggleAudio": "audio mode",
@@ -106,6 +102,11 @@
         "MediaPickerExplanationPhoneIOS": "press and hold, hide the preview, and then select \"download linked file\" to save.",
         "TwitterSpaceWasntRecorded": "this twitter space wasn't recorded, so there's nothing to download. try another one!",
         "ErrorCantProcess": "i couldn't process your request :(\nyou can try again, but if issue persists, please {ContactLink}.",
-        "ChangelogPressToHide": "press to hide"
+        "ChangelogPressToHide": "press to hide",
+        "Donate": "donate",
+        "DonateSub": "help me keep it up",
+        "DonateExplanation": "{appName} does not (and will never) serve ads or sell your data, therefore it's <span class=\"text-backdrop\">completely free to use</span>. but hey! turns out keeping up a web service used by hundreds of thousands of people is somewhat costly.\n\nif you ever found {appName} useful and want to keep it online, or simply want to thank the developer, consider chipping in! each and every cent helps and is VERY appreciated.",
+        "DonateVia": "donate via",
+        "DonateHireMe": "or, as an alternative, you can <a class=\"text-backdrop\" href=\"{s}\" target=\"_blank\">hire me</a>."
     }
 }

src/localization/languages/ru.json

@@ -13,7 +13,6 @@
         "AccessibilityOpenAbout": "открыть окно с инфой",
         "AccessibilityDownloadButton": "кнопка скачивания",
         "AccessibilityOpenSettings": "открыть настройки",
-        "AccessibilityOpenChangelog": "просмотреть последние изменения (на английском)",
         "AccessibilityClosePopup": "закрыть окно",
         "AccessibilityOpenDonate": "сделать пожертвование",
         "TitlePopupAbout": "что за {appName}?",
@@ -55,11 +54,8 @@
         "AccessibilityEnableDownloadPopup": "спрашивать, что делать с загрузками",
         "SettingsFormatDescription": "выбирай webm, если хочешь максимальное качество. у webm видео битрейт обычно выше, но устройства на ios не могут проигрывать их без сторонних приложений.",
         "SettingsQualityDescription": "если выбранное качество недоступно, то выбирается ближайшее к нему.\nесли ты хочешь опубликовать видео с youtube где-то в соц. сетях, то выбирай комбинацию из mp4 и 720p. у таких видео кодек обычно не av1, поэтому они должны работать практически везде.",
-        "DonateSubtitle": "помоги мне платить за хостинг",
-        "DonateDescription": "я не люблю крипто в его текущем состоянии, но у меня нет другого надёжного способа оплаты хостинга.",
         "LinkGitHubIssues": ">> сообщай о проблемах и смотри исходный код на гитхабе",
         "LinkGitHubChanges": ">> смотри предыдущие изменения на гитхабе",
-        "LinkDonateContact": ">> напиши мне, если в этом списке нет подходящей валюты",
         "NoScriptMessage": "{appName} использует javascript для обработки ссылок и интерактивного интерфейса. ты должен разрешить использование javascript, чтобы пользоваться сайтом. тут нет никаких трекеров или рекламы, обещаю.",
         "DownloadPopupDescriptionIOS": "так как у тебя устройство на ios, тебе нужно зажать кнопку \"скачать\", затем скрыть превью видео и выбрать \"загрузить файл по ссылке\" в появившемся окне.",
         "DownloadPopupDescription": "кнопка скачивания открывает новое окно с файлом. ты можешь отключить выбор метода сохранения файла в настройках.",
@@ -75,7 +71,7 @@
         "SettingsOtherTab": "другое",
         "ChangelogLastMajor": "текущая версия и коммит (на английском)",
         "AccessibilityModeToggle": "переключить режим скачивания",
-        "DonateLinksDescription": "ссылки на донаты открываются в новой вкладке. это лучший метод пожертвовать деньги, если ты хочешь, чтобы я получил их лично, а не в виде крипто.",
+        "DonateLinksDescription": "ссылки на донаты открываются в новой вкладке. это наилучший способ отправить донат, если ты хочешь, чтобы я получил его напрямую.",
         "SettingsAudioFormatBest": "лучший",
         "SettingsAudioFormatDescription": "когда выбран \"лучший\" формат, ты получишь аудио максимально возможного качества, так как оно останется в оригинальном формате. если же выбрано что-то другое, то аудио будет немного сжато.",
         "Keyphrase": "сохраняй то, что любишь",
@@ -95,7 +91,7 @@
         "PasteFromClipboard": "вставить из буфера обмена",
         "FollowTwitter": "а ещё, в твиттере {appName} есть опросы, новости, и многое другое: <a class=\"text-backdrop\" href=\"https://twitter.com/justusecobalt\" target=\"_blank\">@justusecobalt</a>",
         "ChangelogOlder": "предыдущие версии (на английском)",
-        "ChangelogPressToExpand": "нажми, чтобы загрузить",
+        "ChangelogPressToExpand": "нажми, чтобы раскрыть",
         "Miscellaneous": "разное",
         "ModeToggleAuto": "авто режим",
         "ModeToggleAudio": "аудио режим",
@@ -106,6 +102,11 @@
         "MediaPickerExplanationPhoneIOS": "нажми и удерживай, затем скрой превью, и наконец выбери \"загрузить файл по ссылке\".",
         "TwitterSpaceWasntRecorded": "этот twitter space не был записан, поэтому я не могу его скачать. попробуй другой!",
         "ErrorCantProcess": "я не смог обработать твой запрос :(\nты можешь попробовать ещё раз, но если не поможет, то {ContactLink}.",
-        "ChangelogPressToHide": "нажми, чтобы скрыть"
+        "ChangelogPressToHide": "нажми, чтобы скрыть",
+        "Donate": "донаты",
+        "DonateSub": "ты можешь помочь!",
+        "DonateExplanation": "{appName} не пихает рекламу тебе в лицо и не продаёт твои личные данные, а значит работает <span class=\"text-backdrop\">совершенно бесплатно</span>. но оказывается, что хостинг сервиса, которым пользуются сотни тысяч людей, обходится довольно дорого.\n\nесли ты хочешь, чтобы твой любимый загрузчик оставался онлайн, а разработчик не помер с голоду вместе с двумя котами, то подумай над тем, чтобы задонатить. каждый рубль поможет мне, моим котам, и {appName}!",
+        "DonateVia": "открыть",
+        "DonateHireMe": "или же ты можешь <a class=\"text-backdrop\" href=\"{s}\" target=\"_blank\">пригласить меня на работу</a>."
     }
 }

src/modules/changelog/changelog.json

@@ -1,10 +1,15 @@
 {
     "current": {
+        "version": "4.4",
+        "title": "over 1 million monthly requests. thank you.",
+        "banner": "onemillionr.webp",
+        "content": "this is a huge milestone for me, i cannot express enough how grateful i am for each and every one of you.\nthank you for using cobalt, and thank you for showing that people love the web that's friendly and bullshit-free. i'm hoping to never disappoint you in the future and keep up the good work.\n\nthank you <3\n\nif you want to thank ME, check out the renovated donations tab, which now is also linked alongside bottom action buttons."
+    },
+    "history": [{
         "version": "4.3.2",
         "title": "twitter improvements & changelog overhaul",
         "content": "- you can download explicit content from twitter.\n- direct video links from twitter are properly supported (video/1, video/2, etc.).\n- changelog history got support for banners.\n- changelog categories are not messy anymore.\n- {appName} version in changelogs is now highlighted.\n- changelog history got separators to make text easier to read.\n- changelog history can be collapsed after loading.\n- download button takes less time to change back to pressable state.\n\nif you're a developer and would like to play around with cobalt's api, then read more about it in older changelogs below!"
-    },
+    }, {
-    "history": [{
         "version": "4.3",
         "title": "developers, developers, developers, developers",
         "banner": "developersdevelopersdevelopers.webp",

src/modules/emoji.js

@@ -17,7 +17,8 @@ const names = {
     "🎄": "christmas_tree",
     "🕯️": "candle",
     "😺": "cat",
-    "🐶": "dog"
+    "🐶": "dog",
+    "🎂": "cake"
 }
 let sizing = {
     22: 0.4,

src/modules/pageRender/elements.js

@@ -129,7 +129,13 @@ export function footerButtons(obj) {
                 items += `<button id="${obj[i]["name"]}-footer" class="switch footer-button" onclick="${obj[i]["action"]}()" aria-label="${obj[i]["aria"]}">${obj[i]["text"]}</button>`;
                 break;
             case "popup":
-                items += `<div class="footer-pair"><button id="${obj[i]["name"]}-footer" class="switch footer-button" onclick="popup('${obj[i]["name"]}', 1)" aria-label="${obj[i]["aria"]}">${obj[i]["text"]}</button><button id="${obj[i+1]["name"]}-footer" class="switch footer-button" onclick="popup('${obj[i+1]["name"]}', 1)" aria-label="${obj[i+1]["aria"]}">${obj[i+1]["text"]}</button></div>`;
+                let context = obj[i]["context"] ? `, '${obj[i]["context"]}'` : ''
+                let context2 = obj[i+1] && obj[i+1]["context"] ? `, '${obj[i+1]["context"]}'` : ''
+                items += `
+                <div class="footer-pair">
+                    <button id="${obj[i]["name"]}-footer" class="switch footer-button" onclick="popup('${obj[i]["name"]}', 1${context})" aria-label="${obj[i]["aria"]}">${obj[i]["text"]}</button>
+                    ${obj[i+1] ? `<button id="${obj[i+1]["name"]}-footer" class="switch footer-button" onclick="popup('${obj[i+1]["name"]}', 1${context2})" aria-label="${obj[i+1]["aria"]}">${obj[i+1]["text"]}</button>`: ''}
+                </div>`;
                 i++;
                 break;
         }

src/modules/pageRender/page.js

@@ -19,8 +19,8 @@ let audioFormats = supportedAudio.map((p) => {
     return { "action": p }
 })
 audioFormats.unshift({ "action": "best" })
-for (let i in donations["other"]) {
+for (let i in donations["links"]) {
-    donateLinks += `<a id="don-${i}" class="switch autowidth" href="${donations["other"][i]}" target="_blank">${i}</a>`
+    donateLinks += `<a id="don-${i}" class="switch autowidth" href="${donations["links"][i]}" target="_blank">REPLACEME ${i}</a>`
 }
 let extr = ''
 for (let i in donations["crypto"]) {
@@ -135,22 +135,31 @@ export default function(obj) {
                     header: {
                         closeAria: loc(obj.lang, 'AccessibilityClosePopup'),
                         title: emoji("💸", 30) + loc(obj.lang, 'TitlePopupDonate'),
-                        subtitle: loc(obj.lang, 'DonateSubtitle')
+                        subtitle: loc(obj.lang, 'DonateSub')
                     },
                     body: [{
-                        text: donateLinks,
+                        text: `<div class="changelog-banner"><img class="changelog-img" src="updateBanners/catsleep.webp" onerror="this.style.display='none'"></img></div>`,
+                        raw: true
+                    },{
+                        text: loc(obj.lang, 'DonateExplanation')
+                    }, {
+                        text: donateLinks.replace(/REPLACEME/g, loc(obj.lang, 'DonateVia')),
                         raw: true
                     }, {
                         text: loc(obj.lang, 'DonateLinksDescription'),
                         classes: ["explanation"]
                     }, {
-                        text: donate.replace(/REPLACEME/g, loc(obj.lang, 'ClickToCopy'))
+                        text: `<div class="separator"></div>`,
+                        raw: true
                     }, {
-                        text: loc(obj.lang, 'DonateDescription'),
+                        text: donate.replace(/REPLACEME/g, loc(obj.lang, 'ClickToCopy')),
-                        classes: ["explanation", "no-top-padding"]
+                        classes: ["desc-padding"]
                     }, {
-                        text: backdropLink(authorInfo.contact, loc(obj.lang, 'LinkDonateContact')),
+                        text: `<div class="separator"></div>`,
-                        classes: ["bottom-link"]
+                        raw: true
+                    }, {
+                        text: loc(obj.lang, 'DonateHireMe', authorInfo.link),
+                        classes: ["desc-padding"]
                     }]
                 })
             }],
@@ -314,6 +323,12 @@ export default function(obj) {
             type: "popup",
             text: `${emoji(celebrationsEmoji() , 22)} ${loc(obj.lang, 'AboutTab')}`,
             aria: loc(obj.lang, 'AccessibilityOpenAbout')
+        }, {
+            name: "about",
+            type: "popup",
+            context: "donate",
+            text: `${emoji("💰", 22)} ${loc(obj.lang, 'Donate')}`,
+            aria: loc(obj.lang, 'AccessibilityOpenDonate')
         }, {
             name: "settings",
             type: "popup",