commit 6/24

src/front/cobalt.css

@@ -18,16 +18,16 @@
 [data-theme="dark"] {
     --accent: rgb(225, 225, 225);
     --accent-highlight: rgb(225, 225, 225, 4%);
-    --accent-subtext: rgb(110, 110, 110);
+    --accent-subtext: rgb(255, 255, 255);
     --accent-hover: rgb(30, 30, 30);
-    --accent-hover-elevated: rgb(48, 48, 48);
+    --accent-hover-elevated: rgb(255, 255, 255);
     --accent-hover-transparent: rgba(48, 48, 48, 0.5);
-    --accent-button: rgb(25, 25, 25);
+    --accent-button: rgb(180, 180, 180);
     --accent-button-elevated: rgb(42, 42, 42);
     --glass: rgba(25, 25, 25, 0.85);
     --glass-lite: rgba(25, 25, 25, 0.98);
     --subbackground: rgb(10, 10, 10);
-    --background: rgb(0, 0, 0);
+    --background: rgb(90, 90, 90);
     --background-backdrop: rgba(0, 0, 0, 0.5);
 }
 [data-theme="light"] {
@@ -331,6 +331,7 @@ button:active,
     display: flex;
     flex-direction: row;
     align-items: center;
+    border-radius: 22px;
 }
 .footer-button {
     width: auto!important;

src/localization/languages/en.json

@@ -4,8 +4,8 @@
         "ContactLink": "check the <a class=\"text-backdrop link\" href=\"{statusPage}\" target=\"_blank\">status page</a> or <a class=\"text-backdrop link\" href=\"{repo}\" target=\"_blank\">create an issue on github</a>"
     },
     "strings": {
-        "AppTitleCobalt": "cobalt",
+        "AppTitleInsta": "insta media convertor",
-        "LinkInput": "paste the link here",
+        "LinkInput": "paste your insta link here",
         "AboutSummary": "cobalt is your go-to place for downloads from social and media platforms. zero ads, trackers, or other creepy bullshit. simply paste a share link and you're ready to rock!",
         "EmbedBriefDescription": "save what you love. no ads, trackers, or other creepy bullshit.",
         "MadeWithLove": "made with &lt;3 by imput",
@@ -102,9 +102,9 @@
         "PrivacyPolicy": "cobalt's privacy policy is simple: no data about you is ever collected or stored. zero, zilch, nada, nothing.\nwhat you download is solely your business, not mine or anyone else's.\n\nif your download requires rendering, then data about requested content is encrypted and temporarily stored in server's RAM. it's necessary for this feature to function.\n\nencrypted data is stored for <span class=\"text-backdrop\">90 seconds</span> and then permanently removed.\n\nstored data is only possible to decrypt with unique encryption keys from your download link. furthermore, the official cobalt codebase doesn't provide a way to read temporarily stored data outside of processing functions.\n\nyou can check cobalt's <a class=\"text-backdrop link\" href=\"{repo}\" target=\"_blank\">source code</a> yourself and see that everything is as stated.",
         "ErrorYTUnavailable": "this youtube video is unavailable. it could be visibility or region restricted. try another one!",
         "ErrorYTTryOtherCodec": "i couldn't find anything to download with your settings. try another codec or quality in settings!",
-        "SettingsCodecSubtitle": "youtube codec",
+        "SettingsCodecSubtitle": "codec",
         "SettingsCodecDescription": "h264: best support across apps/platforms, average detail level. max quality is 1080p.\nav1: best quality, small file size, most detail. supports 8k & HDR.\nvp9: same quality as av1, but file is x2 bigger. supports 4k & HDR.\n\npick h264 if you want best compatibility.\npick av1 if you want best quality and efficiency.",
-        "SettingsAudioDub": "youtube audio track",
+        "SettingsAudioDub": "audio track",
         "ShareURL": "share",
         "ErrorTweetUnavailable": "couldn't find anything about this tweet. this could be because its visibility is limited. try another one!",
         "PopupCloseDone": "done",
@@ -113,7 +113,7 @@
         "SettingsDisableAnimations": "disable animations",
         "FeatureErrorGeneric": "your browser doesn't allow or support this feature. check if there are any updates available and try again!",
         "ClipboardErrorFirefox": "you're using firefox where all clipboard reading functionality is disabled.\n\nyou can fix this by following steps listed <a class=\"text-backdrop link\" href=\"{repo}/blob/current/docs/troubleshooting.md#how-to-fix-clipboard-pasting-in-firefox\" target=\"_blank\">here!</a>\n\n...or you can paste the link manually instead.",
-        "ClipboardErrorNoPermission": "cobalt can't access the most recent item in your clipboard without your permission.\n\nif you don't want to give access, just paste the link manually instead.\n\nif you do, go to site settings and enable the clipboard permission.",
+        "ClipboardErrorNoPermission": "i can't access the most recent item in your clipboard without your permission.\n\nif you don't want to give access, just paste the link manually instead.\n\nif you do, go to site settings and enable the clipboard permission.",
         "SupportSelfTroubleshooting": "experiencing issues? try one of these first:",
         "AccessibilityGoBack": "go back and close the popup",
         "CollapseKeyboard": "keyboard shortcuts",
@@ -152,11 +152,11 @@
         "SettingsAnalyticsExplanation": "enable if you don't want to be included in anonymous traffic stats. read more about this in about > privacy policy (tl;dr: nothing about you is ever stored or tracked, no cookies are used).",
         "AnalyticsDescription": "cobalt uses a self-hosted plausible instance to get an approximate number of how many people use it.\n\nplausible is fully compliant with GDPR, CCPA and PECR, doesn't use cookies, and never stores any identifiable info, not even your ip address.\n\nall data is aggregated and never personalized. nothing about what you download is ever saved anywhere. it's used just for anonymous traffic stats, nothing more.\n\nplausible is fully open source, just like cobalt, and if you want to learn more about it, you can do so <a class=\"text-backdrop link\" href=\"https://plausible.io\" target=\"_blank\">here</a>. if you wish to opt out of traffic stats, you can do it in settings > other.",
         "SettingsTikTokH265": "prefer h265",
-        "SettingsTikTokH265Description": "download 1080p videos from tiktok in h265/hevc format when available.",
+        "SettingsTikTokH265Description": "download 1080p videos in h265/hevc format when available.",
         "SettingsYoutubeDub": "use browser language",
-        "SettingsYoutubeDubDescription": "uses your browser's default language for youtube dubbed audio tracks. works even if cobalt ui isn't translated to your language.",
+        "SettingsYoutubeDubDescription": "uses your browser's default language for dubbed audio tracks. works even if cobalt ui isn't translated to your language.",
         "ErrorInvalidContentType": "invalid content type header",
-        "UpdateOneMillion": "1 million users and blazing speed",
+        "WelcomeMessage": "welcome to my insta media convertor",
         "ErrorYTAgeRestrict": "this youtube video is age-restricted, so i can't see it. try another one!",
         "ErrorYTLogin": "couldn't get this youtube video because it requires an account to view.\n\nthis limitation is done by google to seemingly stop scraping, affecting all 3rd party tools and even their own clients.\n\ntry again, but if issue persists, {ContactLink}.",
         "ErrorYTRateLimit": "i got rate limited by youtube. try again in a few seconds, but if issue persists, {ContactLink}."

src/modules/pageRender/page.js

@@ -61,19 +61,19 @@ export default function(obj) {
         <meta charset="utf-8">
         <meta name="viewport" content="viewport-fit=cover, width=device-width, height=device-height, initial-scale=1, maximum-scale=1">
 
-        <title>${t("AppTitleCobalt")}</title>
+        <title>${t("AppTitleInsta")}</title>
 
         <meta property="og:url" content="${env.webURL}">
-        <meta property="og:title" content="${t("AppTitleCobalt")}">
+        <meta property="og:title" content="${t("AppTitleInsta")}">
         <meta property="og:description" content="${t('EmbedBriefDescription')}">
         <meta property="og:image" content="${env.webURL}icons/generic.png">
-        <meta name="title" content="${t("AppTitleCobalt")}">
+        <meta name="title" content="${t("AppTitleInsta")}">
         <meta name="description" content="${t('AboutSummary')}">
         <meta name="twitter:card" content="summary">
         
         <meta name="apple-mobile-web-app-capable" content="yes">
         <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
-        <meta name="apple-mobile-web-app-title" content="${t("AppTitleCobalt")}">
+        <meta name="apple-mobile-web-app-title" content="${t("AppTitleInsta")}">
 
         <link rel="icon" type="image/x-icon" href="icons/favicon.ico">
         <link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
@@ -103,208 +103,6 @@ export default function(obj) {
         <noscript>
             <div style="margin: 2rem;">${t('NoScriptMessage')}</div>
         </noscript>
-        ${multiPagePopup({
-            name: "about",
-            closeAria: t('AccessibilityGoBack'),
-            tabs: [{
-                name: "about",
-                title: `${emoji("🐲")} ${t('AboutTab')}`,
-                content: popup({
-                    name: "about",
-                    header: {
-                        aboveTitle: {
-                            text: t('MadeWithLove'),
-                            url: repo
-                        },
-                        closeAria: t('AccessibilityGoBack'),
-                        title: `${emoji("🔮", 30)} ${t('TitlePopupAbout')}`
-                    },
-                    body: [{
-                        text: t('AboutSummary')
-                    }, {
-                        text: collapsibleList([{
-                            name: "services",
-                            title: `${emoji("🔗")} ${t("CollapseServices")}`,
-                            body: `${enabledServices}`
-                            + `<div class="explanation embedded">${t("SupportNotAffiliated")}`
-                            + `${obj.lang === "ru" ? `<br>${t("SupportMetaNoticeRU")}` : ''}`
-                            + `</div>`
-                            + `${t("ServicesNote")}`
-                        }, {
-                            name: "keyboard",
-                            title: `${emoji("⌨")} ${t("CollapseKeyboard")}`,
-                            body: 
-                            `${t("KeyboardShortcutsIntro")}
-                            ${keyboardShortcuts([{
-                                items: [{
-                                    combo: "Shift+D",
-                                    name: t("PasteFromClipboard")
-                                }, {
-                                     combo: "Shift+K",
-                                     name: t("ModeToggleAuto")
-                                }, {
-                                     combo: "Shift+L",
-                                     name: t("ModeToggleAudio")
-                                }]
-                            }, {
-                                items: [{
-                                    combo: "⌘/Ctrl+V",
-                                    name: t("KeyboardShortcutQuickPaste")
-                                }, {
-                                    combo: "Esc",
-                                    name: t("KeyboardShortcutClear")
-                                }, {
-                                    combo: "Esc",
-                                    name: t("KeyboardShortcutClosePopup")
-                                }]
-                            }, {
-                                items: [{
-                                     combo: "Shift+B",
-                                     name: t("AboutTab")
-                                }, {
-                                     combo: "Shift+N",
-                                     name: t("ChangelogTab")
-                                }, {
-                                    combo: "Shift+M",
-                                    name: t("TitlePopupSettings")
-                                }]
-                            }])}`
-                        }, {
-                            name: "support",
-                            title: `${emoji("❤️‍🩹")} ${t("CollapseSupport")}`,
-                            body: `${t("SupportSelfTroubleshooting")}`
-                            + `${socialLink(emoji("📢"), t("StatusPage"), links.statusPage)}`
-                            + `${socialLink(emoji("🔧"), t("TroubleshootingGuide"), links.troubleshootingGuide)}`
-                            + `<br>`
-                            + `${t("FollowSupport")}`
-                            + `${socialLinks(obj.lang)}`
-                            + `<br>`
-                            + `${t("SourceCode")}`
-                            + `${socialLink(emoji("🐙"), repo.replace("https://github.com/", ''), repo)}`
-                        }, {
-                            name: "privacy",
-                            title: `${emoji("🔒")} ${t("CollapsePrivacy")}`,
-                            body: t("PrivacyPolicy") + `${
-                                env.plausibleHostname ? `<br><br>${t("AnalyticsDescription")}` : ''
-                            }`
-                        }, {
-                            name: "legal",
-                            title: `${emoji("📑")} ${t("CollapseLegal")}`,
-                            body: t("FairUse")
-                        }])
-                    },
-                    ...(env.showSponsors ?
-                    [{
-                        text: t("SponsoredBy"),
-                        classes: ["sponsored-by-text"],
-                        nopadding: true
-                    }, {
-                        text: sponsoredList(),
-                        raw: true
-                    }] : []
-                    )]
-                })
-            }, {
-                name: "changelog",
-                title: `${emoji("🎉")} ${t('ChangelogTab')}`,
-                content: popup({
-                    name: "changelog",
-                    header: {
-                        closeAria: t('AccessibilityGoBack'),
-                        title: `${emoji("🪄", 30)} ${t('TitlePopupChangelog')}`
-                    },
-                    body: [{
-                        text: `<div class="category-title">${t('ChangelogLastMajor')}</div>`,
-                        raw: true
-                    }, {
-                        text: (() => {
-                            const banner = changelogManager('banner');
-                            if (!banner) return '';
-                            return `<div class="changelog-banner">
-                                        <img class="changelog-img" ` +
-                                            `src="${banner.url}" ` +
-                                            `alt="${banner.alt.replaceAll('"', '&quot;')}" ` +
-                                            `width="${banner.width}" ` +
-                                            `height="${banner.height}" ` +
-                                            `onerror="this.style.opacity=0" loading="lazy">
-                                    </div>`;
-                        })(),
-                        raw: true
-                    }, {
-                        text: changelogManager("version"),
-                        classes: ["changelog-tags"],
-                        nopadding: true
-                    }, {
-                        text: changelogManager("title"),
-                        classes: ["changelog-subtitle"],
-                        nopadding: true
-                    }, {
-                        text: changelogManager("content")
-                    }, {
-                        text: sep(),
-                        raw: true
-                    },{
-                        text: `<a class="text-backdrop changelog-tag-version" href="${repo}/commit/${obj.hash}">#${obj.hash}</a>`,
-                        classes: ["changelog-tags"],
-                        nopadding: true
-                    }, {
-                        text: com[0],
-                        classes: ["changelog-subtitle"],
-                        nopadding: true
-                    }, {
-                        text: com[1]
-                    }, {
-                        text: `<div class="category-title">${t('ChangelogOlder')}</div>`,
-                        raw: true
-                    }, {
-                        text: `
-                        <div id="changelog-history">
-                            <button class="switch bottom-margin" onclick="loadOnDemand('changelog-history', '0')">${t("ChangelogPressToExpand")}</button>
-                        </div>`,
-                        raw: true
-                    }]
-                })
-            }, {
-                name: "donate",
-                title: `${emoji("💖")} ${t('DonationsTab')}`,
-                content: popup({
-                    name: "donate",
-                    header: {
-                        closeAria: t('AccessibilityGoBack'),
-                        title: emoji("💸", 30) + t('TitlePopupDonate')
-                    },
-                    body: [{
-                        text: `<div class="category-title">${t('DonateSub')}</div>`,
-                        raw: true
-                    }, {
-                        text: `
-                        <div class="changelog-banner">
-                            <img class="changelog-img" ` +
-                                `src="updateBanners/catsleep.webp" ` +
-                                `alt="${t("DonateImageDescription")}" ` +
-                                `width="480" ` +
-                                `height="270" ` +
-                                `onerror="this.style.opacity=0" loading="lazy">
-                        </div>`,
-                        raw: true
-                    }, {
-                        text: t('DonateExplanation')
-                    }, {
-                        text: donateLinks.replace(/REPLACEME/g, t('DonateVia')),
-                        raw: true
-                    }, {
-                        text: t('DonateLinksDescription'),
-                        classes: ["explanation"]
-                    }, {
-                        text: sep(),
-                        raw: true
-                    }, {
-                        text: donate.replace(/REPLACEME/g, t('ClickToCopy')),
-                        classes: ["desc-padding"]
-                    }]
-                })
-            }],
-        })}
         ${multiPagePopup({
             name: "settings",
             closeAria: t('AccessibilityGoBack'),
@@ -584,13 +382,13 @@ export default function(obj) {
         <div id="popup-backdrop" onclick="hideAllPopups()"></div>
         <div id="home" style="visibility:hidden">
             ${urgentNotice({
-                emoji: "🎉",
+                text: t("WelcomeMessage"),
-                text: t("UpdateOneMillion"),
                 visible: true,
                 action: "popup('about', 1, 'changelog')"
             })}
             <div id="cobalt-main-box" class="center">
-                <div id="logo">${t("AppTitleCobalt")}${betaTag()}</div>
+                <div id="logo">${t("AppTitleInsta")}${betaTag()}</div>
+                <br></br><br></br><br></br>
                 <div id="download-area">
                     <div id="top">
                         <div id="link-icon">${linkSVG}</div>
@@ -598,6 +396,7 @@ 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 aria-label="${t('AccessibilityDownloadButton')}">
                     </div>
+                    <br></br><br></br><br></br>
                     <div id="bottom">
                     <button id="paste" class="switch" onclick="pasteClipboard()" aria-label="${t('PasteFromClipboard')}">${emoji("📋", 22)} ${t('PasteFromClipboard')}</button>
                     ${switcher({
@@ -605,34 +404,20 @@ export default function(obj) {
                         noParent: true,
                         items: [{
                             action: "false",
-                                text: `${emoji("✨")} ${t("ModeToggleAuto")}`
+                            text: `${t("ModeToggleAuto")}`
                         }, {
                             action: "true",
-                                text: `${emoji("🎶")} ${t("ModeToggleAudio")}`
+                            text: `${t("ModeToggleAudio")}`
                         }]
                     })}
-                    </div>
-                </div>
-            </div>
-            <footer id="footer">
                     ${footerButtons([{
-                    name: "about",
-                    type: "popup",
-                    text: `${emoji("🐲" , 22)} ${t('AboutTab')}`,
-                    aria: t('AccessibilityOpenAbout')
-                }, {
-                    name: "about",
-                    type: "popup",
-                    context: "donate",
-                    text: `${emoji("💖", 22)} ${t('Donate')}`,
-                    aria: t('AccessibilityOpenDonate')
-                }, {
                         name: "settings",
                         type: "popup",
                         text: `${emoji("⚙️", 22)} ${t('TitlePopupSettings')}`,
                         aria: t('AccessibilityOpenSettings')
                     }])}
-            </footer>
+                </div>
+            </div>
         </div>
         <script>
             let defaultApiUrl = '${env.apiURL}';