diff --git a/README.md b/README.md index ed1eaae..a558bf6 100644 --- a/README.md +++ b/README.md @@ -4,10 +4,10 @@ Live web app: [co.wukko.me](https://co.wukko.me/) ![cobalt logo with repeated logo pattern background](https://raw.githubusercontent.com/wukko/cobalt/current/src/front/icons/pattern.png "cobalt logo with repeated logo pattern background") -[![Crowdin](https://badges.crowdin.net/cobalt/localized.svg)](https://crowdin.com/project/cobalt) [![DeepSource](https://deepsource.io/gh/wukko/cobalt.svg/?label=active+issues&token=MsmsJ9zUOKwcQor0yaiFot84)](https://deepsource.io/gh/wukko/cobalt/?ref=repository-badge) [![DeepSource](https://deepsource.io/gh/wukko/cobalt.svg/?label=resolved+issues&token=MsmsJ9zUOKwcQor0yaiFot84)](https://deepsource.io/gh/wukko/cobalt/?ref=repository-badge) +[![DeepSource](https://deepsource.io/gh/wukko/cobalt.svg/?label=active+issues&token=MsmsJ9zUOKwcQor0yaiFot84)](https://deepsource.io/gh/wukko/cobalt/?ref=repository-badge) ## What's cobalt? -cobalt is a social and media platform downloader that doesn't piss you off. +cobalt is social and media platform downloader that doesn't piss you off. It's fast, friendly, and doesn't have any bullshit that modern web is filled with: no ads, trackers, or analytics. Paste the link, get the video, move on. It's that simple. Just how it should be. @@ -40,19 +40,6 @@ cobalt has an open API that you can use in your projects for **free**. It's easy and straightforward to use, [check out the docs](https://github.com/wukko/cobalt/blob/current/docs/API.md) and see for yourself. Feel free to use the main API instance ([co.wuk.sh](https://co.wuk.sh/)) in your projects. -## How to contribute translations -You can translate cobalt to any language you want on [cobalt's Crowdin](https://crowdin-co.wukko.me/). Feel free to ignore QA errors if you think you know better. If you don't see a language you want to translate cobalt to, open an issue, and I'll add it to Crowdin. - -### Translation guidelines: -- Text is **ALWAYS** stylized as **lowercase** unless it's STRESSED LIKE THIS or is an internal value like `{ContactLink}` or `{appName}`. - - Example: "`this is a live video, i am yet to learn how to look into future. wait for the stream to finish and try again!`". - *Notice how **everything is lowercase**, no matter the punctuation marks? Yes, that's cobalt's style and you have to follow it.* -- Avoid extremely formal language, leave it for big and classy tech companies. Use informal language wherever possible. -- You can (and should) rephrase sentences as long as they keep the same sense and send the same message as original. -- Do **NOT** use offensive or explicit vocabulary. -- Check if there are issues in UI with your localization and optimize it accordingly. If impossible, open an issue. -- Be nice. - ## Host an instance yourself ### Requirements - Node.js 18 or above @@ -77,7 +64,7 @@ sudo service nscd start ### Docker It's also possible to run cobalt via Docker. I *highly* recommend using Docker compose. -Check out the [example compose file](https://github.com/wukko/cobalt/blob/current/docker-compose.yml.example) and alter it for your needs. +Check out the [example compose file](https://github.com/wukko/cobalt/blob/current/docker-compose.example.yml) and alter it for your needs. ## Disclaimer cobalt is my passion project, so update schedule depends solely on my free time, motivation, and mood. diff --git a/docker-compose.yml.example b/docker-compose.example.yml similarity index 100% rename from docker-compose.yml.example rename to docker-compose.example.yml diff --git a/package.json b/package.json index 74aea82..fee12c4 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "cobalt", "description": "save what you love", - "version": "6.3.1", + "version": "7.0", "author": "wukko", "exports": "./src/cobalt.js", "type": "module", diff --git a/src/cobalt.js b/src/cobalt.js index e8f13b3..d03bca2 100644 --- a/src/cobalt.js +++ b/src/cobalt.js @@ -24,13 +24,13 @@ app.disable('x-powered-by'); await loadLoc(); -const apiMode = process.env.apiURL && process.env.apiPort && !((process.env.webURL && process.env.webPort) || (process.env.selfURL && process.env.port)) -const webMode = process.env.webURL && process.env.webPort && !((process.env.apiURL && process.env.apiPort) || (process.env.selfURL && process.env.port)) +const apiMode = process.env.apiURL && process.env.apiPort && !((process.env.webURL && process.env.webPort) || (process.env.selfURL && process.env.port)); +const webMode = process.env.webURL && process.env.webPort && !((process.env.apiURL && process.env.apiPort) || (process.env.selfURL && process.env.port)); if (apiMode) { - runAPI(express, app, gitCommit, gitBranch, __dirname); + runAPI(express, app, gitCommit, gitBranch, __dirname) } else if (webMode) { - await runWeb(express, app, gitCommit, gitBranch, __dirname); + await runWeb(express, app, gitCommit, gitBranch, __dirname) } else { - console.log(Red(`cobalt wasn't configured yet or configuration is invalid.\n`) + Bright(`please run the setup script to fix this: `) + Green(`npm run setup`)); + console.log(Red(`cobalt wasn't configured yet or configuration is invalid.\n`) + Bright(`please run the setup script to fix this: `) + Green(`npm run setup`)) } diff --git a/src/config.json b/src/config.json index ef59152..6337654 100644 --- a/src/config.json +++ b/src/config.json @@ -25,7 +25,8 @@ "crypto": { "bitcoin": "bc1q59jyyjvrzj4c22rkk3ljeecq6jmpyscgz9spnd", "ethereum": "0x4B4cF23051c78c7A7E0eA09d39099621c46bc302", - "litecoin": "ltc1qvp0xhrk2m7pa6p6z844qcslfyxv4p3vf95rhna" + "litecoin": "ltc1qvp0xhrk2m7pa6p6z844qcslfyxv4p3vf95rhna", + "monero": "4B1SNB6s8Pq1hxjNeKPEe8Qa8EP3zdL16Sqsa7QDoJcUecKQzEj9BMxWnEnTGu12doKLJBKRDUqnn6V9qfSdXpXi3Nw5Uod" }, "links": { "boosty": "https://boosty.to/wukko/donate" diff --git a/src/core/api.js b/src/core/api.js index c70dd41..84464b5 100644 --- a/src/core/api.js +++ b/src/core/api.js @@ -4,40 +4,45 @@ import { randomBytes } from "crypto"; const ipSalt = randomBytes(64).toString('hex'); -import { appName, version } from "../modules/config.js"; +import { version } from "../modules/config.js"; import { getJSON } from "../modules/api.js"; import { apiJSON, checkJSONPost, getIP, languageCode } from "../modules/sub/utils.js"; import { Bright, Cyan } from "../modules/sub/consoleText.js"; import stream from "../modules/stream/stream.js"; import loc from "../localization/manager.js"; -import { changelogHistory } from "../modules/pageRender/onDemand.js"; import { sha256 } from "../modules/sub/crypto.js"; -import { celebrationsEmoji } from "../modules/pageRender/elements.js"; import { verifyStream } from "../modules/stream/manage.js"; export function runAPI(express, app, gitCommit, gitBranch, __dirname) { - const corsConfig = process.env.cors === '0' ? { origin: process.env.webURL, optionsSuccessStatus: 200 } : {}; + const corsConfig = process.env.cors === '0' ? { + origin: process.env.webURL, + optionsSuccessStatus: 200 + } : {}; const apiLimiter = rateLimit({ windowMs: 60000, max: 20, - standardHeaders: false, + standardHeaders: true, legacyHeaders: false, keyGenerator: (req, res) => sha256(getIP(req), ipSalt), handler: (req, res, next, opt) => { - res.status(429).json({ "status": "error", "text": loc(languageCode(req), 'ErrorRateLimit') }); - return; + return res.status(429).json({ + "status": "rate-limit", + "text": loc(languageCode(req), 'ErrorRateLimit') + }); } }); const apiLimiterStream = rateLimit({ windowMs: 60000, max: 25, - standardHeaders: false, + standardHeaders: true, legacyHeaders: false, keyGenerator: (req, res) => sha256(getIP(req), ipSalt), handler: (req, res, next, opt) => { - res.status(429).json({ "status": "error", "text": loc(languageCode(req), 'ErrorRateLimit') }); - return; + return res.status(429).json({ + "status": "rate-limit", + "text": loc(languageCode(req), 'ErrorRateLimit') + }); } }); @@ -55,45 +60,55 @@ export function runAPI(express, app, gitCommit, gitBranch, __dirname) { }); app.use('/api/json', express.json({ verify: (req, res, buf) => { - try { - JSON.parse(buf); + let acceptCon = String(req.header('Accept')) === "application/json"; + if (acceptCon) { if (buf.length > 720) throw new Error(); - if (String(req.header('Content-Type')) !== "application/json") { - res.status(400).json({ 'status': 'error', 'text': 'invalid content type header' }); - return; - } - if (String(req.header('Accept')) !== "application/json") { - res.status(400).json({ 'status': 'error', 'text': 'invalid accept header' }); - return; - } - } catch(e) { - res.status(400).json({ 'status': 'error', 'text': 'invalid json body.' }); - return; + JSON.parse(buf); + } else { + throw new Error(); } } })); + // handle express.json errors properly (https://github.com/expressjs/express/issues/4065) + app.use('/api/json', (err, req, res, next) => { + let errorText = "invalid json body"; + let acceptCon = String(req.header('Accept')) !== "application/json"; + if (err || acceptCon) { + if (acceptCon) errorText = "invalid accept header"; + return res.status(400).json({ + status: "error", + text: errorText + }); + } else { + next(); + } + }); app.post('/api/json', async (req, res) => { try { let lang = languageCode(req); - let j = apiJSON(0, { t: "Bad request" }); + let j = apiJSON(0, { t: "bad request" }); try { + let contentCon = String(req.header('Content-Type')) === "application/json"; let request = req.body; - if (request.url) { + if (contentCon && request.url) { request.dubLang = request.dubLang ? lang : false; + let chck = checkJSONPost(request); - j = chck ? await getJSON(chck["url"], lang, chck) : apiJSON(0, { t: loc(lang, 'ErrorCouldntFetch') }); + if (!chck) throw new Error(); + + j = await getJSON(chck["url"], lang, chck); } else { - j = apiJSON(0, { t: loc(lang, 'ErrorNoLink') }); + j = apiJSON(0, { + t: !contentCon ? "invalid content type header" : loc(lang, 'ErrorNoLink') + }); } } catch (e) { j = apiJSON(0, { t: loc(lang, 'ErrorCantProcess') }); } - res.status(j.status).json(j.body); - return; + return res.status(j.status).json(j.body); } catch (e) { - res.destroy(); - return + return res.destroy(); } }); @@ -105,49 +120,22 @@ export function runAPI(express, app, gitCommit, gitBranch, __dirname) { && req.query.h.toString().length === 64 && req.query.e.toString().length === 13) { let streamInfo = verifyStream(req.query.t, req.query.h, req.query.e); if (streamInfo.error) { - res.status(streamInfo.status).json(apiJSON(0, { t: streamInfo.error }).body); - return; + return res.status(streamInfo.status).json(apiJSON(0, { t: streamInfo.error }).body); } if (req.query.p) { - res.status(200).json({ "status": "continue" }); - return; + return res.status(200).json({ + status: "continue" + }); } - stream(res, streamInfo); + return stream(res, streamInfo); } else { - let j = apiJSON(0, { t: "stream token, hmac, or expiry timestamp is missing." }) - res.status(j.status).json(j.body); - return; + let j = apiJSON(0, { + t: "stream token, hmac, or expiry timestamp is missing" + }) + return res.status(j.status).json(j.body); } - break; - case 'onDemand': - if (req.query.blockId) { - let blockId = req.query.blockId.slice(0, 3); - let r, j; - switch(blockId) { - case "0": // changelog history - r = changelogHistory(); - j = r ? apiJSON(3, { t: r }) : apiJSON(0, { t: "couldn't render this block" }) - break; - case "1": // celebrations emoji - r = celebrationsEmoji(); - j = r ? apiJSON(3, { t: r }) : false - break; - default: - j = apiJSON(0, { t: "couldn't find a block with this id" }) - break; - } - if (j.body) { - res.status(j.status).json(j.body) - } else { - res.status(204).end() - } - } else { - let j = apiJSON(0, { t: "no block id" }); - res.status(j.status).json(j.body) - } - break; case 'serverInfo': - res.status(200).json({ + return res.status(200).json({ version: version, commit: gitCommit, branch: gitBranch, @@ -156,15 +144,17 @@ export function runAPI(express, app, gitCommit, gitBranch, __dirname) { cors: process.env.cors && process.env.cors === "0" ? 0 : 1, startTime: `${startTimestamp}` }); - break; default: - let j = apiJSON(0, { t: "unknown response type" }) - res.status(j.status).json(j.body); - break; + let j = apiJSON(0, { + t: "unknown response type" + }) + return res.status(j.status).json(j.body); } } catch (e) { - res.status(500).json({ 'status': 'error', 'text': loc(languageCode(req), 'ErrorCantProcess') }); - return; + return res.status(500).json({ + status: "error", + text: loc(languageCode(req), 'ErrorCantProcess') + }); } }); app.get('/api/status', (req, res) => { @@ -178,6 +168,11 @@ export function runAPI(express, app, gitCommit, gitBranch, __dirname) { }); app.listen(process.env.apiPort, () => { - console.log(`\n${Cyan(appName)} API ${Bright(`v.${version}-${gitCommit} (${gitBranch})`)}\nStart time: ${Bright(`${startTime.toUTCString()} (${startTimestamp})`)}\n\nURL: ${Cyan(`${process.env.apiURL}`)}\nPort: ${process.env.apiPort}\n`) + console.log(`\n` + + `${Cyan("cobalt")} API ${Bright(`v.${version}-${gitCommit} (${gitBranch})`)}\n` + + `Start time: ${Bright(`${startTime.toUTCString()} (${startTimestamp})`)}\n\n` + + `URL: ${Cyan(`${process.env.apiURL}`)}\n` + + `Port: ${process.env.apiPort}\n` + ) }); } diff --git a/src/core/web.js b/src/core/web.js index afde9fe..c2512c1 100644 --- a/src/core/web.js +++ b/src/core/web.js @@ -1,20 +1,18 @@ -import { appName, genericUserAgent, version } from "../modules/config.js"; -import { languageCode } from "../modules/sub/utils.js"; +import { genericUserAgent, version } from "../modules/config.js"; +import { apiJSON, languageCode } from "../modules/sub/utils.js"; import { Bright, Cyan } from "../modules/sub/consoleText.js"; + import { buildFront } from "../modules/build.js"; import findRendered from "../modules/pageRender/findRendered.js"; -// * will be removed in the future -import cors from "cors"; -// * +import { celebrationsEmoji } from "../modules/pageRender/elements.js"; +import { changelogHistory } from "../modules/pageRender/onDemand.js"; export async function runWeb(express, app, gitCommit, gitBranch, __dirname) { - await buildFront(gitCommit, gitBranch); + const startTime = new Date(); + const startTimestamp = Math.floor(startTime.getTime()); - // * will be removed in the future - const corsConfig = process.env.cors === '0' ? { origin: process.env.webURL, optionsSuccessStatus: 200 } : {}; - app.use('/api/:type', cors(corsConfig)); - // * + await buildFront(gitCommit, gitBranch); app.use('/', express.static('./build/min')); app.use('/', express.static('./src/front')); @@ -23,29 +21,67 @@ export async function runWeb(express, app, gitCommit, gitBranch, __dirname) { try { decodeURIComponent(req.path) } catch (e) { return res.redirect('/') } next(); }); + app.get('/onDemand', (req, res) => { + try { + if (req.query.blockId) { + let blockId = req.query.blockId.slice(0, 3); + let r, j; + switch(blockId) { + // changelog history + case "0": + r = changelogHistory(); + j = r ? apiJSON(3, { t: r }) : apiJSON(0, { + t: "couldn't render this block, please try again!" + }) + break; + // celebrations emoji + case "1": + r = celebrationsEmoji(); + j = r ? apiJSON(3, { t: r }) : false + break; + default: + j = apiJSON(0, { + t: "couldn't find a block with this id" + }) + break; + } + if (j.body) { + return res.status(j.status).json(j.body); + } else { + return res.status(204).end(); + } + } else { + return res.status(400).json({ + status: "error", + text: "couldn't render this block, please try again!" + }); + } + } catch (e) { + return res.status(400).json({ + status: "error", + text: "couldn't render this block, please try again!" + }) + } + }); app.get("/status", (req, res) => { - res.status(200).end() + return res.status(200).end() }); app.get("/", (req, res) => { - res.sendFile(`${__dirname}/${findRendered(languageCode(req), req.header('user-agent') ? req.header('user-agent') : genericUserAgent)}`) + return res.sendFile(`${__dirname}/${findRendered(languageCode(req), req.header('user-agent') ? req.header('user-agent') : genericUserAgent)}`) }); app.get("/favicon.ico", (req, res) => { - res.sendFile(`${__dirname}/src/front/icons/favicon.ico`) + return res.sendFile(`${__dirname}/src/front/icons/favicon.ico`) }); - // * will be removed in the future - app.get("/api/*", (req, res) => { - res.redirect(308, process.env.apiURL.slice(0, -1) + req.url) - }); - app.post("/api/*", (req, res) => { - res.redirect(308, process.env.apiURL.slice(0, -1) + req.url) - }); - // * app.get("/*", (req, res) => { - res.redirect('/') + return res.redirect('/') }); app.listen(process.env.webPort, () => { - let startTime = new Date(); - console.log(`\n${Cyan(appName)} WEB ${Bright(`v.${version}-${gitCommit} (${gitBranch})`)}\nStart time: ${Bright(`${startTime.toUTCString()} (${Math.floor(new Date().getTime())})`)}\n\nURL: ${Cyan(`${process.env.webURL}`)}\nPort: ${process.env.webPort}\n`) + console.log(`\n` + + `${Cyan("cobalt")} WEB ${Bright(`v.${version}-${gitCommit} (${gitBranch})`)}\n` + + `Start time: ${Bright(`${startTime.toUTCString()} (${startTimestamp})`)}\n\n` + + `URL: ${Cyan(`${process.env.webURL}`)}\n` + + `Port: ${process.env.webPort}\n` + ) }) } diff --git a/src/front/cobalt.css b/src/front/cobalt.css index 7808b58..2b7d630 100644 --- a/src/front/cobalt.css +++ b/src/front/cobalt.css @@ -3,10 +3,12 @@ --without-padding: calc(100% - 4rem); --border-15: 0.15rem solid var(--accent); --border-10: 0.1rem solid var(--accent); + --inset-focus: 0 0 0 0.1rem var(--accent) inset; + --inset-focus-inv: 0 0 0 0.15rem var(--background) inset; --font-mono: 'Noto Sans Mono', 'Consolas', 'SF Mono', monospace; --padding-1: 0.75rem; --line-height: 1.65rem; - --red: rgb(255, 0, 61); + --red: rgb(249, 47, 96); --gap: 0.5rem; --gap-no-icon: 0.6rem; } @@ -17,9 +19,11 @@ --accent-subtext: rgb(110, 110, 110); --accent-hover: rgb(30, 30, 30); --accent-hover-elevated: rgb(48, 48, 48); + --accent-hover-transparent: rgba(48, 48, 48, 0.5); --accent-button: rgb(25, 25, 25); --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); } @@ -31,9 +35,11 @@ --accent-subtext: rgb(110, 110, 110); --accent-hover: rgb(230, 230, 230); --accent-hover-elevated: rgb(215, 215, 215); + --accent-hover-transparent: rgba(215, 215, 215, 0.5); --accent-button: rgb(225, 225, 225); --accent-button-elevated: rgb(210, 210, 210); --glass: rgba(230, 230, 230, 0.85); + --glass-lite: rgba(230, 230, 230, 0.98); --subbackground: rgb(240, 240, 240); --background: rgb(255, 255, 255); } @@ -44,9 +50,11 @@ --accent-subtext: rgb(110, 110, 110); --accent-hover: rgb(30, 30, 30); --accent-hover-elevated: rgb(48, 48, 48); + --accent-hover-transparent: rgba(48, 48, 48, 0.5); --accent-button: rgb(25, 25, 25); --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); } @@ -56,9 +64,11 @@ --accent-subtext: rgb(110, 110, 110); --accent-hover: rgb(230, 230, 230); --accent-hover-elevated: rgb(215, 215, 215); + --accent-hover-transparent: rgba(215, 215, 215, 0.5); --accent-button: rgb(225, 225, 225); --accent-button-elevated: rgb(210, 210, 210); --glass: rgba(230, 230, 230, 0.85); + --glass-lite: rgba(230, 230, 230, 0.98); --subbackground: rgb(240, 240, 240); --background: rgb(255, 255, 255); } @@ -74,6 +84,12 @@ body { overflow: hidden; -ms-overflow-style: none; scrollbar-width: none; + height: calc(100% + env(safe-area-inset-top)/2); +} +#home { + position: fixed; + width: 100%; + height: 100%; } a { color: var(--accent); @@ -150,12 +166,16 @@ input[type="text"], [type="text"] { border-radius: 0; } +.glass-bkg { + background: var(--glass); + backdrop-filter: blur(7px); + -webkit-backdrop-filter: blur(7px); +} .desktop button:hover, .desktop .switch:hover, .desktop .checkbox:hover, .desktop .text-to-copy:hover, -.desktop .collapse-header:hover, -.desktop #close-button:hover { +.desktop .collapse-header:hover { background: var(--accent-hover); box-shadow: 0 0 0 0.1rem var(--accent-highlight) inset; cursor: pointer; @@ -243,7 +263,7 @@ button:active, } .box { background: var(--background); - border: var(--border-15); + border: var(--glass) solid .2rem; color: var(--accent); } #url-input-area { @@ -284,13 +304,14 @@ button:active, cursor: not-allowed; } #footer { - bottom: 0.8rem; + bottom: 0; + width: 100%; position: absolute; - left: 50%; - transform: translate(-50%, -50%); + display: flex; + justify-content: center; + padding-bottom: calc(env(safe-area-inset-bottom)/2 + 2rem); font-size: 0.9rem; text-align: center; - width: auto; } #cobalt-main-box #bottom, #footer-buttons, @@ -318,9 +339,10 @@ button:active, .text-backdrop { background: var(--accent); color: var(--background); + padding: 0 0.3rem; } -.italic { - font-style: italic; +.text-backdrop.link { + text-decoration: underline; } .cobalt-support-link { display: flex; @@ -343,26 +365,58 @@ button:active, visibility: hidden; position: fixed; height: auto; - width: 32%; + width: 36%; z-index: 999; - padding: 2rem; font-size: 0.9rem; - max-height: 85%; + max-height: 95%; + opacity: 0; + transform: translate(-50%,-48%)scale(.95); + box-shadow: 0 0 40px 0 var(--accent-hover-transparent); +} +.popup.visible { + visibility: visible; + opacity: 1; + transform: translate(-50%, -50%); + transition: transform 100ms ease-out, opacity 100ms ease-in-out; +} +#popup-backdrop { + visibility: hidden; + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + z-index: 998; + opacity: 0; + background-color: var(--background); +} +#popup-backdrop.visible { + visibility: visible; + opacity: 0.5; + transition: opacity 130ms ease-in-out; } .popup.small { width: 20%; - background: var(--glass); - backdrop-filter: blur(7px); - -webkit-backdrop-filter: blur(7px); box-shadow: 0px 0px 80px 0px var(--accent-hover); - padding: 1.7rem; border: var(--accent-highlight) solid 0.15rem; + padding: 1.7rem; + transform: translate(-50%,-50%)scale(.95); + pointer-events: all; } -.popup.small #popup-title { - margin-bottom: .2rem; +.popup.small.visible { + transform: translate(-50%, -50%); +} +.popup.small #popup-header-contents, +.popup.small .popup-content-inner, +.popup.small #popup-header { + padding: 0; } .popup.small #popup-header { - padding-top: 0; + position: relative; + border: none; +} +.popup.small #popup-title { + margin-bottom: 0.2rem; } .popup.small .explanation { margin-bottom: 0.8rem; @@ -371,32 +425,25 @@ button:active, background: var(--accent); color: var(--background); } -#popup-backdrop { - opacity: 0.5; - background-color: var(--background); - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - z-index: 998; -} .popup.scrollable { - height: 85%; + height: 95%; } .scrollable .bottom-link { padding-bottom: 2rem; } .changelog-subtitle { - font-size: 1.1rem; + font-size: 1.3rem; padding-bottom: var(--gap-no-icon); } .changelog-banner { + position: relative; width: 100%; max-height: 300px; - min-height: 160px; - margin-bottom: 1.65rem; + min-height: 210px; + margin-bottom: 0.7rem; float: left; + background: var(--accent-hover); + display: flex; } .changelog-img { object-fit: cover; @@ -404,6 +451,20 @@ button:active, height: inherit; max-height: inherit; } +.changelog-tags { + display: inline-flex; + align-items: center; + gap: 0.7rem; + padding-bottom: 0.7rem; +} +.changelog-tag-version { + font-size: 1rem; + padding: 0.15rem 0.7rem; +} +.changelog-tag-date { + color: var(--accent-subtext); + font-size: 0.8rem; +} .nowrap { white-space: nowrap; } @@ -429,45 +490,39 @@ button:active, } #popup-title { font-size: 1.5rem; - margin-bottom: 0.5rem; line-height: 1.85em; display: flex; align-items: center; } -#popup-footer { - bottom: 0; - position: fixed; - margin-bottom: 1.5rem; - background: var(--background); - width: var(--without-padding); -} -.popup-footer-content { - font-size: 0.8rem; - line-height: var(--line-height); - color: var(--accent-subtext); - border-top: 0.05rem solid var(--accent-subtext); - padding-top: 0.4rem; -} #popup-above-title { color: var(--accent-subtext); font-size: 0.8rem; } #popup-content { - overflow-x: hidden; + overflow-x: scroll; overflow-y: auto; - height: var(--without-padding); + height: 100%; scrollbar-width: none; } +.popup-content-inner, +.tab-content-settings, +#picker-holder { + padding-top: calc(env(safe-area-inset-top)/2 + 4.9rem); + padding-bottom: calc(env(safe-area-inset-bottom)/2 + 4.8rem); +} +.tab-content-settings, +#tab-about-about .popup-content-inner { + padding-top: calc(env(safe-area-inset-top)/2 + 6.2rem);; +} .bullpadding { padding-left: 0.58rem; } #popup-header { - position: relative; + position: absolute; z-index: 999; - padding-top: 0.8rem; -} -#popup-content.with-footer { - margin-bottom: 3rem; + padding-top: calc(env(safe-area-inset-top)/2 + 1.7rem); + width: 100%; + border-bottom: var(--accent-highlight) solid 0.1rem; } .settings-category { padding-bottom: 1rem; @@ -538,15 +593,29 @@ button:active, .switch.space-right { margin-right: var(--padding-1); } -.switch[data-enabled="true"] { +.switch:focus { + box-shadow: var(--inset-focus) inset; +} +#popup-tabs .switch { + background: none; +} +.desktop #popup-tabs .switch:hover, +#popup-tabs .switch:active { + background: var(--accent-hover-transparent); + box-shadow: 0 0 0 0.1rem var(--accent-highlight) inset; +} +.switch[data-enabled="true"], +#popup-tabs .switch[data-enabled="true"] { color: var(--background); - background: var(--accent); + background: var(--accent)!important; cursor: default; - z-index: 999 } .switch[data-enabled="true"]:hover { background: var(--accent); } +.switch[data-enabled="true"]:focus { + box-shadow: var(--inset-focus-inv) inset; +} .switches { display: flex; width: auto; @@ -572,77 +641,79 @@ button:active, user-select: text; -webkit-user-select: text; background: var(--accent-button); - padding: var(--padding-1); - overflow: auto; + padding: var(--gap-no-icon); + overflow: clip; } -#close-button { - max-width: 2.6rem; - margin-left: var(--padding-1); - border: var(--border-15); - color: var(--accent); - padding: 0.3rem 0.75rem 0.5rem; +#back-button { + padding: 0; + background: none; + max-width: 4rem; + font-size: 1rem; } -#close-button.up { - float: right; - position: absolute; - right: 0; - height: 2.6rem; +#back-button svg path, +.collapse-indicator svg path { + fill: var(--accent); } -.popup-tab-content { +.popup-tab-content[data-enabled="false"] { display: none; } #popup-tabs { z-index: 999; bottom: 0; - position: relative; + position: absolute; width: 100%; + padding-top: 0.2rem; + padding-bottom: 1.7rem; + border-top: var(--accent-highlight) solid 0.1rem; } -.popup-tabs { - margin-top: 0.9rem; +.popup-tabs-child { + width: 100%; + padding: 0 0.2rem; } -.emoji { - margin-right: 0.4rem; +.emoji, svg { user-select: none; -webkit-user-select: none; pointer-events: none; } +.emoji { + margin-right: 0.4rem; +} .picker-image { object-fit: cover; - width: inherit; - height: inherit; + width: 100%; + height: 100%; cursor: pointer; + user-select: all; + -webkit-user-select: all; } .picker-image-container { - width: 8rem; - height: 8rem; - margin-bottom: var(--padding-1); + width: calc(100% / 3); + height: 12rem; background-color: var(--accent-button); + cursor: pointer; } .picker-various-container { - height: 20rem; - width: 25rem; + height: 12rem; + width: 12rem; margin-bottom: var(--padding-1); background-color: var(--accent-button); border: var(--accent-button) 0.18rem solid; position: relative; + cursor: pointer; } #picker-holder { display: flex; justify-content: space-between; flex-wrap: wrap; align-content: space-around; -} -#picker-holder.various { - justify-content: left; - flex-wrap: unset; - overflow-x: scroll; - gap: 2rem; + padding-top: calc(env(safe-area-inset-top)/2 + 7.6rem); + padding-bottom: calc(env(safe-area-inset-bottom)/2 + 4.8rem); } .imageBlock { height: 100%; width: 100%; position: absolute; - z-index: 9999; + z-index: 99; } .picker-element-name { position: absolute; @@ -666,27 +737,36 @@ button:active, user-select: none; -webkit-user-select: none; } +.collapse-list.last { + margin-bottom: 1rem; +} .collapse-header { - padding: var(--padding-1); - font-size: 1rem; + padding: 0.5rem var(--padding-1); + font-size: 0.95rem; display: flex; flex-direction: row; align-items: center; cursor: pointer; background: var(--accent-button); } -.collapse-indicator { - transform: rotate(180deg); +.collapse-header .emoji { + margin-right: var(--padding-1); } -.expanded .collapse-indicator { +.collapse-indicator { + display: flex; + justify-content: center; + align-items: center; + cursor: pointer; transform: none; } +.collapse-list.expanded .collapse-indicator { + transform: rotate(180deg); +} .collapse-title { width: 100%; display: flex; flex-direction: row; align-items: center; - gap: 0.8rem; } .collapse-body { display: none; @@ -704,43 +784,166 @@ button:active, display: none; } #about-donate-footer { - box-shadow: 0 0 0 0.1rem var(--accent) inset; + box-shadow: 0 0 0 0.1rem var(--red) inset, 0 0 0.6rem 0 var(--red); + z-index: 1; } -.popup-tabs-child { - width: 100%; +.popup-content-inner, +.tab-content-settings, +#popup-header-contents { + padding-left: 1rem; + padding-right: 1rem; } .urgent-notice { - top: 1.7rem; - width: auto; - text-align: left; + width: 100%; + text-align: center; position: absolute; cursor: pointer; display: flex; justify-content: center; align-items: center; + padding-top: calc(env(safe-area-inset-top) + 1rem); +} +.no-transparency .glass-bkg { + background: var(--glass-lite); + backdrop-filter: none; + -webkit-backdrop-filter: none; +} +.no-animation .popup, +.no-animation #popup-backdrop { + transition: none; +} +#floating-notification-area { + visibility: visible; + z-index: 999999; + position: absolute; + display: flex; + justify-content: center; + width: 100%; + padding-top: 2rem; +} +.floating-notification { + text-align: center; + padding: 0.6rem 1.2rem; + background: var(--accent-hover-elevated); + display: flex; + box-shadow: 0 0 20px 10px var(--accent-hover); + font-size: 0.85rem; +} +.popup-from-bottom { + position: fixed; + width: 100%; + height: 100%; + bottom: 0; + z-index: 999; + visibility: hidden; + pointer-events: none; +} +.popup-from-bottom.visible { + visibility: visible; +} +#keyboard-collapse { + display: none; +} +.desktop #keyboard-collapse { + display: block; +} +.text-backdrop.key { + color: var(--accent-hover-elevated); +} +#keyboard-shortcuts { + display: flex; + flex-direction: row; + flex-wrap: wrap; + justify-content: flex-start; + align-items: flex-start; + gap: 1.5rem; + user-select: none; + color: var(--accent); +} +.loader { + text-align: center; +} +#picker-download { + visibility: hidden; +} +#picker-download.visible { + visibility: visible; +} +#home { + opacity: 0; +} +#home.visible { + opacity: 1; + transition: opacity 0.2s ease-out; +} +/* rounded corners */ +#bottom #paste, +#footer .switch, +#audioMode, +#popup-content .switches, +.checkbox, +.changelog-img, +.changelog-banner, +#close-error, +.changelog-tag-version, +#download-switcher .switch, +#popup-about .switch, +#popup-tabs .switch, +.text-to-copy, +.text-to-copy.text-backdrop { + border-radius: 5px / 6px; +} +[type=checkbox] { + border-radius: 3px / 4px; +} +.popup { + border-radius: 8px / 9px; +} +#popup-header { + border-top-left-radius: 5px; + border-top-right-radius: 5px; +} +#popup-tabs { + border-bottom-left-radius: 5px; + border-bottom-right-radius: 5px; +} +.switches .first { + border-top-left-radius: 5px 6px; + border-bottom-left-radius: 5px 6px; +} +.switches .last { + border-top-right-radius: 5px 6px; + border-bottom-right-radius: 5px 6px; +} +.text-backdrop { + border-radius: 3px / 4px; +} +.collapse-list.first, +.collapse-list.first .collapse-header { + border-top-left-radius: 6px 7px; + border-top-right-radius: 6px 7px; +} +.collapse-list.last, +.collapse-list.last .collapse-header { + border-bottom-left-radius: 6px 7px; + border-bottom-right-radius: 6px 7px; +} +.collapse-list.last.expanded .collapse-header { + border-radius: 0; +} +/* prevent resizing fliecker on ios if web app is installed as standalone */ +@media all and (display-mode: standalone) { + #home.visible { + transition-delay: 0.1s; + } } /* adapt the page according to screen size */ -@media screen and (min-width: 2300px) { - html { - zoom: 130%; - } -} -@media screen and (min-width: 3840px) { - html { - zoom: 180%; - } -} -@media screen and (min-width: 5000px) { - html { - zoom: 300%; - } -} @media screen and (max-width: 1550px) { .popup.small { width: 25% } .popup { - width: 35%; + width: 40%; } } @media screen and (max-width: 1440px) { @@ -751,12 +954,12 @@ button:active, width: 30% } .popup { - width: 40%; + width: 45%; } } @media screen and (max-width: 1300px) { .popup { - width: 46%; + width: 50%; } } @media screen and (max-width: 1200px) { @@ -767,7 +970,7 @@ button:active, width: 35% } .popup { - width: 50%; + width: 55%; } } @media screen and (max-width: 1025px) { @@ -781,23 +984,12 @@ button:active, width: 60%; } } -@media screen and (max-height: 605px) { +@media screen and (max-width: 850px) { .popup { - height: 80% - } - .popup.small { - height: auto; - } - .bottom-link { - padding-bottom: 2rem; + width: 75%; } } /* mobile page */ -@media screen and (max-width: 720px) { - #cobalt-main-box, #footer { - width: 90%; - } -} @media screen and (max-width: 499px) { .tab { font-size: 0!important; @@ -805,9 +997,6 @@ button:active, .tab .emoji { margin-right: 0; } - #cobalt-main-box, #footer { - width: 90%; - } .checkbox { width: calc(100% - 1.3rem); } @@ -843,7 +1032,7 @@ button:active, .subtitle, #popup-desc, .collapse-title { - font-size: .7rem; + font-size: 0.7rem; } .collapse-header { padding: 0.5rem; @@ -853,13 +1042,13 @@ button:active, font-size: 0.6rem; } .explanation { - font-size: .6rem; + font-size: 0.6rem; margin-top: 0.5rem; line-height: 1rem!important; } #popup-desc { line-height: 1.2rem; - font-size: .64rem; + font-size: 0.64rem; } .changelog-subtitle, #popup-subtitle { font-size: 0.8rem!important; @@ -894,6 +1083,9 @@ button:active, } } @media screen and (max-width: 720px) { + #cobalt-main-box { + width: calc(100% - (0.7rem * 2)); + } #cobalt-main-box #bottom { flex-direction: column-reverse; } @@ -901,12 +1093,13 @@ button:active, width: 100%; } #footer { - bottom: 4.9%; - transform: translate(-50%, 0%); + padding-bottom: calc(env(safe-area-inset-bottom)/2 + 1.5rem); } #footer-buttons { flex-direction: column; align-items: stretch; + width: 100%; + padding: 0 0.7rem; } .footer-pair .footer-button { width: 100%!important; @@ -924,7 +1117,17 @@ button:active, gap: var(--gap); } .urgent-notice { - width: 100%; + padding-top: calc(env(safe-area-inset-bottom)/2 + 1rem); + } + .popup, + #popup-header, + #popup-tabs { + border-radius: 0; + } + .popup.center { + top: unset; + left: unset; + transform: unset; } .popup.small { width: calc(100% - 1.7rem * 2); @@ -936,11 +1139,19 @@ button:active, position: absolute; border: none; border-top: var(--accent-highlight) solid 0.15rem; - padding-bottom: calc(env(safe-area-inset-bottom)/2 + 1.7rem) + padding-bottom: calc(env(safe-area-inset-bottom)/2 + 1.7rem); + transform: translateY(30rem); + } + .popup.small.visible { + transform: none; + transition: transform 200ms cubic-bezier(0.075, 0.82, 0.165, 1), opacity 130ms ease-in-out; } .popup.small #popup-header { background: none; } + .no-animation .popup.small { + transition: none; + } #close-error { bottom: 3rem; } @@ -949,7 +1160,6 @@ button:active, } #picker-holder.various { flex-wrap: wrap; - align-content: left; gap: 0; overflow-x: hidden; overflow-y: scroll; @@ -959,31 +1169,28 @@ button:active, height: 20rem; max-width: 100%; } - .picker-image-container { - height: 7rem; - width: 7rem; - line-height: 7rem; - } .popup, .popup.scrollable { border: none; - width: 90%; - height: 95%; + width: 100%; + height: 100%; max-height: 100%; } + #popup-tabs { + padding-bottom: calc(env(safe-area-inset-bottom)/2 + 1.5rem); + } .bottom-link { padding-bottom: 2rem; } - .popup-tabs { - margin-top: .3rem; + .popup-content-inner, + .tab-content-settings, + .popup-tabs-child, + #popup-header-contents { + padding-left: 0.7rem; + padding-right: 0.7rem; } } @media screen and (max-width: 400px) { .popup-title { line-height: inherit; } - .picker-image-container { - line-height: 6rem; - height: 6rem; - width: 6rem; - } } \ No newline at end of file diff --git a/src/front/cobalt.js b/src/front/cobalt.js index 7a624aa..c5a13ef 100644 --- a/src/front/cobalt.js +++ b/src/front/cobalt.js @@ -1,7 +1,9 @@ const ua = navigator.userAgent.toLowerCase(); const isIOS = ua.match("iphone os"); const isMobile = ua.match("android") || ua.match("iphone os"); -const version = 31; +const isFirefox = ua.match("firefox/"); +const isOldFirefox = ua.match("firefox/") && ua.split("firefox/")[1].split('.')[0] < 103; +const version = 33; const regex = new RegExp(/https:\/\/(www\.)?[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()!@:%_\+.~#?&\/\/=]*)/); const notification = `
`; @@ -14,10 +16,11 @@ const switchers = { "vimeoDash": ["false", "true"], "audioMode": ["false", "true"] }; -const checkboxes = ["disableTikTokWatermark", "fullTikTokAudio", "muteAudio"]; +const checkboxes = ["disableTikTokWatermark", "fullTikTokAudio", "muteAudio", "reduceTransparency", "disableAnimations"]; const exceptions = { // used for mobile devices "vQuality": "720" }; +const bottomPopups = ["error", "download"] let store = {}; @@ -111,14 +114,17 @@ function detectColorScheme() { function changeTab(evnt, tabId, tabClass) { let tabcontent = document.getElementsByClassName(`tab-content-${tabClass}`); let tablinks = document.getElementsByClassName(`tab-${tabClass}`); + for (let i = 0; i < tabcontent.length; i++) { - tabcontent[i].style.display = "none"; + tabcontent[i].dataset.enabled = "false"; } for (let i = 0; i < tablinks.length; i++) { tablinks[i].dataset.enabled = "false"; } - eid(tabId).style.display = "block"; + evnt.currentTarget.dataset.enabled = "true"; + eid(tabId).dataset.enabled = "true"; + if (tabId === "tab-about-changelog" && sGet("changelogStatus") !== `${version}`) notificationCheck("changelog"); if (tabId === "tab-about-about" && !sGet("seenAbout")) notificationCheck("about"); } @@ -156,16 +162,20 @@ function notificationCheck(type) { function hideAllPopups() { let filter = document.getElementsByClassName('popup'); for (let i = 0; i < filter.length; i++) { - filter[i].style.visibility = "hidden"; + filter[i].classList.remove("visible"); } + eid("popup-backdrop").classList.remove("visible"); + store.isPopupOpen = false; + + // clear the picker eid("picker-holder").innerHTML = ''; eid("picker-download").href = '/'; - eid("picker-download").style.visibility = "hidden"; - eid("popup-backdrop").style.visibility = "hidden"; + eid("picker-download").classList.remove("visible"); } function popup(type, action, text) { if (action === 1) { hideAllPopups(); // hide the previous popup before showing a new one + store.isPopupOpen = true; switch (type) { case "about": let tabId = sGet("seenAbout") ? "changelog" : "about"; @@ -189,10 +199,13 @@ function popup(type, action, text) { case "images": eid("picker-title").innerHTML = loc.pickerImages; eid("picker-subtitle").innerHTML = loc.pickerImagesExpl; - if (!eid("popup-picker").classList.contains("scrollable")) eid("popup-picker").classList.add("scrollable"); - if (eid("picker-holder").classList.contains("various")) eid("picker-holder").classList.remove("various"); + + eid("popup-picker").classList.add("scrollable"); + eid("picker-holder").classList.remove("various"); + eid("picker-download").href = text.audio; - eid("picker-download").style.visibility = "visible" + eid("picker-download").classList.add("visible"); + for (let i in text.arr) { eid("picker-holder").innerHTML += `` } @@ -200,18 +213,20 @@ function popup(type, action, text) { default: eid("picker-title").innerHTML = loc.pickerDefault; eid("picker-subtitle").innerHTML = loc.pickerDefaultExpl; - if (eid("popup-picker").classList.contains("scrollable")) eid("popup-picker").classList.remove("scrollable"); - if (!eid("picker-holder").classList.contains("various")) eid("picker-holder").classList.add("various"); + + eid("popup-picker").classList.remove("scrollable"); + eid("picker-holder").classList.add("various"); + for (let i in text.arr) { let s = text.arr[i], item; switch (s.type) { case "video": - item = `
VIDEO ${Number(i)+1}
` + item = `
${Number(i)+1}
` break; } eid("picker-holder").innerHTML += item } - eid("picker-download").style.visibility = "hidden"; + eid("picker-download").classList.remove("visible"); break; } break; @@ -219,14 +234,17 @@ function popup(type, action, text) { break; } } else { + store.isPopupOpen = false; if (type === "picker") { eid("picker-download").href = '/'; - eid("picker-download").style.visibility = "hidden" + eid("picker-download").classList.remove("visible"); eid("picker-holder").innerHTML = '' } } - eid("popup-backdrop").style.visibility = vis(action); - eid(`popup-${type}`).style.visibility = vis(action); + if (bottomPopups.includes(type)) eid(`popup-${type}-container`).classList.toggle("visible"); + eid("popup-backdrop").classList.toggle("visible"); + eid(`popup-${type}`).classList.toggle("visible"); + eid(`popup-${type}`).focus(); } function changeSwitcher(li, b) { if (b) { @@ -249,15 +267,12 @@ function checkbox(action) { sSet(action, !!eid(action).checked); switch(action) { case "alwaysVisibleButton": button(); break; + case "reduceTransparency": eid("cobalt-body").classList.toggle('no-transparency'); break; + case "disableAnimations": eid("cobalt-body").classList.toggle('no-animation'); break; } action === "disableChangelog" && sGet(action) === "true" ? notificationCheck("disable") : notificationCheck(); } function loadSettings() { - try { - if (typeof(navigator.clipboard.readText) == "undefined") throw new Error(); - } catch (err) { - eid("paste").style.display = "none"; - } if (sGet("alwaysVisibleButton") === "true") { eid("alwaysVisibleButton").checked = true; eid("download-button").value = '>>' @@ -266,6 +281,12 @@ function loadSettings() { if (sGet("downloadPopup") === "true" && !isIOS) { eid("downloadPopup").checked = true; } + if (sGet("reduceTransparency") === "true" || isOldFirefox) { + eid("cobalt-body").classList.toggle('no-transparency'); + } + if (sGet("disableAnimations") === "true") { + eid("cobalt-body").classList.toggle('no-animation'); + } for (let i = 0; i < checkboxes.length; i++) { if (sGet(checkboxes[i]) === "true") eid(checkboxes[i]).checked = true; } @@ -312,7 +333,17 @@ async function pasteClipboard() { eid("url-input-area").value = t; download(eid("url-input-area").value); } - } catch (e) {} + } catch (e) { + let errorMessage = loc.featureErrorGeneric; + let doError = true; + let error = String(e).toLowerCase(); + + if (error.includes("denied")) errorMessage = loc.clipboardErrorNoPermission; + if (error.includes("dismissed") || isIOS) doError = false; + if (error.includes("function") && isFirefox) errorMessage = loc.clipboardErrorFirefox; + + if (doError) popup("error", 1, errorMessage); + } } async function download(url) { changeDownloadButton(2, '...'); @@ -364,17 +395,9 @@ async function download(url) { break; case "picker": if (j.audio && j.picker) { - changeDownloadButton(2, '?..') - fetch(`${j.audio}&p=1`).then(async (res) => { - let jp = await res.json(); - if (jp.status === "continue") { - changeDownloadButton(2, '>>>'); - popup('picker', 1, { audio: j.audio, arr: j.picker, type: j.pickerType }); - setTimeout(() => { changeButton(1) }, 2500); - } else { - changeButton(0, jp.text); - } - }).catch((error) => internetError()); + changeDownloadButton(2, '>>>'); + popup('picker', 1, { audio: j.audio, arr: j.picker, type: j.pickerType }); + setTimeout(() => { changeButton(1) }, 2500); } else if (j.picker) { changeDownloadButton(2, '>>>'); popup('picker', 1, { arr: j.picker, type: j.pickerType }); @@ -388,7 +411,8 @@ async function download(url) { fetch(`${j.url}&p=1`).then(async (res) => { let jp = await res.json(); if (jp.status === "continue") { - changeDownloadButton(2, '>>>'); window.location.href = j.url; + changeDownloadButton(2, '>>>'); + window.open(j.url, '_blank'); setTimeout(() => { changeButton(1) }, 2500); } else { changeButton(0, jp.text); @@ -409,9 +433,9 @@ async function download(url) { async function loadCelebrationsEmoji() { let bac = eid("about-footer").innerHTML; try { - let j = await fetch(`${apiURL}/api/onDemand?blockId=1`).then((r) => { if (r.status === 200) { return r.json() } else { return false } }).catch(() => { return false }); + let j = await fetch(`/onDemand?blockId=1`).then((r) => { if (r.status === 200) { return r.json() } else { return false } }).catch(() => { return false }); if (j && j.status === "success" && j.text) { - eid("about-footer").innerHTML = eid("about-footer").innerHTML.replace('🐲', j.text); + eid("about-footer").innerHTML = eid("about-footer").innerHTML.replace('🐲', j.text); } } catch (e) { eid("about-footer").innerHTML = bac; @@ -420,13 +444,13 @@ async function loadCelebrationsEmoji() { async function loadOnDemand(elementId, blockId) { let j = {}; store.historyButton = eid(elementId).innerHTML; - eid(elementId).innerHTML = "..."; + eid(elementId).innerHTML = `
...
`; try { if (store.historyContent) { j = store.historyContent; } else { - await fetch(`${apiURL}/api/onDemand?blockId=${blockId}`).then(async(r) => { + await fetch(`/onDemand?blockId=${blockId}`).then(async(r) => { j = await r.json(); if (j && j.status === "success") { store.historyContent = j; @@ -448,27 +472,45 @@ window.onload = () => { loadSettings(); detectColorScheme(); changeDownloadButton(0, '>>'); - eid("cobalt-main-box").style.visibility = 'visible'; - eid("footer").style.visibility = 'visible'; - if (eid("urgent-notice")) eid("urgent-notice").style.visibility = 'visible'; - eid("url-input-area").value = ""; notificationCheck(); loadCelebrationsEmoji(); - if (isIOS) sSet("downloadPopup", "true"); + if (isIOS) { + sSet("downloadPopup", "true"); + eid("downloadPopup-chkbx").style.display = "none"; + } + eid("url-input-area").value = ""; + + eid("home").style.visibility = 'visible'; + eid("home").classList.toggle("visible"); + let urlQuery = new URLSearchParams(window.location.search).get("u"); if (urlQuery !== null && regex.test(urlQuery)) { eid("url-input-area").value = urlQuery; button(); } } -eid("url-input-area").addEventListener("keydown", (event) => { - if (event.key === 'Escape') eid("url-input-area").value = ''; +eid("url-input-area").addEventListener("keydown", (e) => { button(); }) -eid("url-input-area").addEventListener("keyup", (event) => { - if (event.key === 'Enter') eid("download-button").click(); +eid("url-input-area").addEventListener("keyup", (e) => { + if (e.key === 'Enter') eid("download-button").click(); }) -document.onkeydown = (event) => { - if (event.key === "Tab" || event.ctrlKey) eid("url-input-area").focus(); - if (event.key === 'Escape') hideAllPopups(); +document.onkeydown = (e) => { + if (!store.isPopupOpen) { + if (e.ctrlKey || e.key === "/") eid("url-input-area").focus(); + if (e.key === "Escape" || e.key === "Clear") clearInput(); + + // top buttons + if (e.key === "D") pasteClipboard(); + if (e.key === "K") changeSwitcher('audioMode', 'false'); + if (e.key === "L") changeSwitcher('audioMode', 'true'); + + // popups + if (e.key === "B") popup('about', 1, 'about'); // open about + if (e.key === "N") popup('about', 1, 'changelog'); // open changelog + if (e.key === "M") popup('settings', 1); + + } else { + if (e.key === "Escape") hideAllPopups(); + } } diff --git a/src/front/emoji/abacus.svg b/src/front/emoji/abacus.svg new file mode 100644 index 0000000..6f9587c --- /dev/null +++ b/src/front/emoji/abacus.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/src/front/emoji/boring_document.svg b/src/front/emoji/boring_document.svg new file mode 100644 index 0000000..ec3e642 --- /dev/null +++ b/src/front/emoji/boring_document.svg @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/src/front/emoji/keyboard.svg b/src/front/emoji/keyboard.svg new file mode 100644 index 0000000..f6cb218 --- /dev/null +++ b/src/front/emoji/keyboard.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/front/emoji/link.svg b/src/front/emoji/link.svg new file mode 100644 index 0000000..c3d8660 --- /dev/null +++ b/src/front/emoji/link.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/front/emoji/locked.svg b/src/front/emoji/locked.svg new file mode 100644 index 0000000..98e9e0e --- /dev/null +++ b/src/front/emoji/locked.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/front/emoji/magnifying_glass.svg b/src/front/emoji/magnifying_glass.svg new file mode 100644 index 0000000..905da55 --- /dev/null +++ b/src/front/emoji/magnifying_glass.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/front/emoji/mending_heart.svg b/src/front/emoji/mending_heart.svg new file mode 100644 index 0000000..3b647fa --- /dev/null +++ b/src/front/emoji/mending_heart.svg @@ -0,0 +1,5 @@ + + + + + \ No newline at end of file diff --git a/src/front/updateBanners/developersdevelopersdevelopers.webp b/src/front/updateBanners/developers.webp similarity index 100% rename from src/front/updateBanners/developersdevelopersdevelopers.webp rename to src/front/updateBanners/developers.webp diff --git a/src/front/updateBanners/meowthcooking.webp b/src/front/updateBanners/meowthcooking.webp new file mode 100644 index 0000000..a0bea02 Binary files /dev/null and b/src/front/updateBanners/meowthcooking.webp differ diff --git a/src/localization/languages/en.json b/src/localization/languages/en.json index 1f565a5..fa81962 100644 --- a/src/localization/languages/en.json +++ b/src/localization/languages/en.json @@ -1,24 +1,24 @@ { "name": "english", "substrings": { - "ContactLink": "create an issue on github" + "ContactLink": "create an issue on github" }, "strings": { + "AppTitleCobalt": "cobalt", "LinkInput": "paste the link here", - "AboutSummary": "{appName} 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 without ads, trackers, or other creepy bullshit.", + "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 <3 by wukko", "AccessibilityInputArea": "link input area", "AccessibilityOpenAbout": "open about popup", "AccessibilityDownloadButton": "download button", "AccessibilityOpenSettings": "open settings popup", - "AccessibilityClosePopup": "close the popup", "AccessibilityOpenDonate": "open donation popup", - "TitlePopupAbout": "what's {appName}?", + "TitlePopupAbout": "what's cobalt?", "TitlePopupSettings": "settings", "TitlePopupError": "uh-oh...", "TitlePopupChangelog": "what's new?", - "TitlePopupDonate": "support {appName}", + "TitlePopupDonate": "support cobalt", "TitlePopupDownload": "how to save?", "ErrorSomethingWentWrong": "something went wrong and i couldn't get anything for you. try again, but if issue persists, {ContactLink}.", "ErrorUnsupported": "it seems like this service is not supported yet or your link is invalid. have you pasted the right link?", @@ -29,8 +29,8 @@ "ErrorCouldntFetch": "i couldn't find anything about this link. check if it works and try again! some content may be region restricted, so keep that in mind.", "ErrorLengthLimit": "i can't process videos longer than {s} minutes, so pick something shorter instead!", "ErrorBadFetch": "something went wrong when i tried getting info about your link. are you sure it works? check if it does, and try again.", - "ErrorNoInternet": "there's no internet or {appName} api is temporarily unavailable. check your connection and try again.", - "ErrorCantConnectToServiceAPI": "i couldn't connect to the service api. maybe it's down, or {appName} got blocked. try again, but if error persists, {ContactLink}.", + "ErrorNoInternet": "there's no internet or cobalt api is temporarily unavailable. check your connection and try again.", + "ErrorCantConnectToServiceAPI": "i couldn't connect to the service api. maybe it's down, or cobalt got blocked. try again, but if error persists, {ContactLink}.", "ErrorEmptyDownload": "i don't see anything i could download by your link. try a different one!", "ErrorLiveVideo": "this is a live video, i am yet to learn how to look into future. wait for the stream to finish and try again!", "SettingsAppearanceSubtitle": "appearance", @@ -46,8 +46,8 @@ "AccessibilityEnableDownloadPopup": "ask what to do with downloads", "SettingsQualityDescription": "if selected quality isn't available, closest one is used instead.", "LinkGitHubChanges": ">> see previous commits and contribute on github", - "NoScriptMessage": "{appName} uses javascript for api requests and interactive interface. you have to allow javascript to use this site. there are no pesty scripts, pinky promise.", - "DownloadPopupDescriptionIOS": "easiest way to save videos on ios:\n1. add this siri shortcut.\n2. press \"share\" above and select \"save to photos\" in appeared share sheet.\nif asked, review the permission request, and press \"always allow\".\n\nalternative method:\npress and hold the download button, hide the video preview, and select \"download linked file\" to download.\nthen, open safari downloads, select the file you downloaded, open share menu, and finally press \"save video\".", + "NoScriptMessage": "cobalt uses javascript for api requests and interactive interface. you have to allow javascript to use this site. there are no pesty scripts, pinky promise.", + "DownloadPopupDescriptionIOS": "easiest way to save videos on ios:\n1. add this siri shortcut.\n2. press \"share\" above and select \"save to photos\" in appeared share sheet.\nif asked, review the permission request, and press \"always allow\".\n\nalternative method:\npress and hold the download button, hide the video preview, and select \"download linked file\" to download.\nthen, open safari downloads, select the file you downloaded, open share menu, and finally press \"save video\".", "DownloadPopupDescription": "download button opens a new tab with requested file. you can disable this popup in settings.", "ClickToCopy": "press to copy", "Download": "download", @@ -87,15 +87,14 @@ "MediaPickerTitle": "pick what to save", "MediaPickerExplanationPC": "click or right click to download what you want.", "MediaPickerExplanationPhone": "press or press and hold to download what you want.", - "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": "collapse", "Donate": "donate", "DonateSub": "help it stay online", - "DonateExplanation": "{appName} does not (and will never) serve ads or sell your data, meaning that it's completely free to use. turns out developing and keeping up a web service used by over 300,000 people is not that easy.\n\nif you ever found {appName} useful and want to help continue its development and maintenance consider chipping in! if you want to thank the developer, you can also do that via donations. every cent helps and is VERY appreciated!\n\n{appName}'s usage worldwide grows daily and i need to make up for it. as you can imagine, hosting costs grow progressively too. as a year 1 university student, i was not prepared for such expenses :(\n\ni am yet to earn anything from {appName}, everything goes back to users, so you're helping everyone who uses {appName}.\n\nyour help is more appreciated than ever!", + "DonateExplanation": "cobalt doesn't shove ads in your face and doesn't sell your personal data, and thus is completely free to use for everyone. but development and maintenance of a media-heavy service used by over 350k people is quite costly. both in terms of time and money. as a student, it's rather difficult for me to handle such expenses on my own.\n\nif cobalt has helped you in the past and you want to keep it growing and evolving, you can do so by making a donation!\n\nby donating you're helping everyone who uses cobalt: teachers, students, musicians, content creators, artists, lecturers, and many, many more!\n\nin past few months donations have let me:\n*; increase stability and uptime to nearly 100%.\n*; speed up ALL downloads, especially heavier ones.\n*; open cobalt api for free public use.\n*; withstand several huge user influxes with 0 downtime.\n*; move to a reliable and trustworthy cloud infrastructure provider.\n*; separate frontend and api for resilience and future decentralization.\n\nevery cent matters and is extremely appreciated, you can truly make a difference!", "DonateVia": "donate via", - "DonateHireMe": "...or you can hire me :)", + "DonateHireMe": "...or you can hire me :)", "SettingsVideoMute": "mute audio", "SettingsVideoMuteExplanation": "removes audio from video downloads when possible.", "ErrorSoundCloudNoClientId": "i couldn't get the temporary token that's required to download songs from soundcloud. try again, but if issue persists, {ContactLink}.", @@ -103,24 +102,39 @@ "CollapseSupport": "support & source code", "CollapsePrivacy": "privacy policy", "ServicesNote": "this list is not final and keeps expanding over time, make sure to check it once in a while!", - "FollowSupport": "keep in touch with {appName} for support, polls, news, and more:", - "SupportNote": "please note that questions and issues may take a while to respond to, there's only one person managing everything.", + "FollowSupport": "keep in touch with cobalt for support, polls, news, and more:", + "SupportNote": "please note that response may take a while, there's only one person managing everything.", "SourceCode": "report issues, explore source code, star or fork the repo:", - "PrivacyPolicy": "{appName}'s privacy policy is simple: no data about you is ever collected or stored. zero, zilch, nada, nothing.\nwhat you download is your business, not mine.\n\nsome non-backtraceable data does get temporarily stored when requested download requires live render. it's necessary for that feature to function.\n\nin that case, information about requested stream is temporarily stored in server's RAM for 20 seconds. as 20 seconds have passed, all previously stored information is permanently removed.\nno one (even me) has access to this data, because official {appName} codebase doesn't provide a way to read it outside of processing functions.\n\nyou can check {appName}'s github repo yourself and see that everything is as stated.", + "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 live render, some non-backtraceable data is temporarily stored in server's RAM. it's necessary for this feature to function.\n\nin this case info about requested content is stored for 20 seconds and then permanently removed.\nno one (even me) has access to this data. official cobalt codebase doesn't provide a way to read it outside of processing functions.\n\nyou can check cobalt's source code yourself and see that everything is as stated.", "ErrorYTUnavailable": "this youtube video is unavailable, it could be region or age restricted. try another one!", "ErrorYTTryOtherCodec": "i couldn't find anything to download with your settings. try another codec or quality!\n\nnote: youtube api sometimes acts unexpectedly. blame google for this, not me.", "SettingsCodecSubtitle": "youtube codec", "SettingsCodecDescription": "h264: generally better player support, but quality tops out at 1080p.\nav1: low player support, but supports 8k & HDR.\nvp9: usually highest bitrate, preserves most detail. supports 4k & HDR.\n\npick h264 if you want best editor/player/social media compatibility.", "SettingsAudioDub": "youtube audio track", - "SettingsAudioDubDescription": "defines which audio track will be used. if dubbed track isn't available, original video language is used instead.\n\noriginal: original video language is used.\nauto: default browser (and {appName}) language is used.", + "SettingsAudioDubDescription": "defines which audio track will be used. if dubbed track isn't available, original video language is used instead.\n\noriginal: original video language is used.\nauto: default browser (and cobalt) language is used.", "SettingsDubDefault": "original", "SettingsDubAuto": "auto", "SettingsVimeoPrefer": "vimeo downloads type", - "SettingsVimeoPreferDescription": "progressive: direct file link to vimeo's cdn. max quality is 1080p.\ndash: video and audio are merged by {appName} into one file. max quality is 4k.\n\npick \"progressive\" if you want best editor/player/social media compatibility. if progressive download isn't available, dash is used instead.", + "SettingsVimeoPreferDescription": "progressive: direct file link to vimeo's cdn. max quality is 1080p.\ndash: video and audio are merged by cobalt into one file. max quality is 4k.\n\npick \"progressive\" if you want best editor/player/social media compatibility. if progressive download isn't available, dash is used instead.", "ShareURL": "share", "ErrorTweetUnavailable": "couldn't find anything about this tweet. this could be because its visibility is limited. try another one!", "ErrorTwitterRIP": "twitter has restricted access to any content to unauthenticated users. while there's a way to get regular tweets, spaces are, unfortunately, impossible to get at this time. i am looking into possible solutions.", - "UrgentDonate": "{appName} needs your help!", - "PopupCloseDone": "done" + "UrgentDonate": "cobalt needs your help!", + "PopupCloseDone": "done", + "Accessibility": "accessibility", + "SettingsReduceTransparency": "reduce transparency", + "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 here!\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.", + "SupportSelfTroubleshooting": "experiencing issues? try self-troubleshooting guide first!", + "AccessibilityGoBack": "go back and close the popup", + "CollapseKeyboard": "keyboard shortcuts", + "KeyboardShortcutsIntro": "use cobalt even faster with keyboard shortcuts:", + "KeyboardShortcutQuickPaste": "paste the link", + "KeyboardShortcutClear": "clear link input area", + "KeyboardShortcutClosePopup": "close all popups", + "CollapseLegal": "legal stuff", + "FairUse": "cobalt is a tool for easing content downloads from internet and takes zero liability. you are responsible for what you download, how you use and distribute that content.\n\ncobalt does not log any info about you, it's impossible for me to snitch on you, but please be mindful when using content of others and always credit original creators!\n\nwhen used in education purposes (lecture, homework, etc) please attach the source link.\n\nfair use and credits benefit everyone." } } diff --git a/src/localization/languages/ru.json b/src/localization/languages/ru.json index 9f74c50..66f34af 100644 --- a/src/localization/languages/ru.json +++ b/src/localization/languages/ru.json @@ -1,24 +1,24 @@ { "name": "русский", "substrings": { - "ContactLink": "напиши об этом на github (можно на русском)" + "ContactLink": "напиши об этом на github (можно на русском)" }, "strings": { + "AppTitleCobalt": "кобальт", "LinkInput": "вставь ссылку сюда", - "AboutSummary": "{appName} - твой друг при скачивании контента из соцсетей и других сервисов. никакой рекламы, трекеров и прочего мусора. вставляешь ссылку и получаешь файл. всё. ничего лишнего.", + "AboutSummary": "кобальт - твой друг при скачивании контента из соцсетей и других сервисов. никакой рекламы, трекеров и прочего мусора. вставляешь ссылку и получаешь файл. всё. ничего лишнего.", "EmbedBriefDescription": "сохраняй то, что любишь. без рекламы, трекеров и лишней мороки.", "MadeWithLove": "сделано wukko, с <3", "AccessibilityInputArea": "зона вставки ссылки", "AccessibilityOpenAbout": "открыть окно с инфой", "AccessibilityDownloadButton": "кнопка скачивания", "AccessibilityOpenSettings": "открыть настройки", - "AccessibilityClosePopup": "закрыть окно", "AccessibilityOpenDonate": "сделать пожертвование", - "TitlePopupAbout": "что за {appName}?", + "TitlePopupAbout": "что за кобальт?", "TitlePopupSettings": "настройки", "TitlePopupError": "опаньки...", "TitlePopupChangelog": "что нового?", - "TitlePopupDonate": "поддержи {appName}", + "TitlePopupDonate": "поддержи кобальт", "TitlePopupDownload": "как сохранить?", "ErrorSomethingWentWrong": "что-то пошло совсем не так и у меня не получилось ничего для тебя достать. попробуй ещё раз, но если так и не получится, {ContactLink}.", "ErrorUnsupported": "с твоей ссылкой что-то не так, или же этот сервис ещё не поддерживается. может быть, ты вставил не ту ссылку?", @@ -30,7 +30,7 @@ "ErrorLengthLimit": "я не могу обрабатывать видео длиннее чем {s} минут(ы), так что скачай что-нибудь покороче!", "ErrorBadFetch": "произошла какая-то ошибка при получении данных по твоей ссылке. убедись, что она работает, и попробуй ещё раз.", "ErrorNoInternet": "не получилось подключиться к серверу. проверь подключение к интернету и попробуй ещё раз!", - "ErrorCantConnectToServiceAPI": "у меня не получилось подключиться к серверу этого сервиса. возможно он лежит, или же {appName} заблокировали. попробуй ещё раз, но если так и не получится, {ContactLink}.", + "ErrorCantConnectToServiceAPI": "у меня не получилось подключиться к серверу этого сервиса. возможно он лежит, или же кобальт заблокировали. попробуй ещё раз, но если так и не получится, {ContactLink}.", "ErrorEmptyDownload": "я не нашёл того, что могу скачать. попробуй другую ссылку!", "ErrorLiveVideo": "я пока что не умею заглядывать в будущее, поэтому дождись окончания прямого эфира, и потом уже скачивай видео!", "SettingsAppearanceSubtitle": "внешний вид", @@ -46,13 +46,13 @@ "AccessibilityEnableDownloadPopup": "спрашивать, что делать с загрузками", "SettingsQualityDescription": "если выбранное качество недоступно, то выбирается ближайшее к нему.", "LinkGitHubChanges": ">> смотри предыдущие изменения на github", - "NoScriptMessage": "{appName} использует javascript для обработки ссылок и интерактивного интерфейса. ты должен разрешить использование javascript, чтобы пользоваться сайтом. тут нет никаких зловредных скриптов, обещаю.", - "DownloadPopupDescriptionIOS": "наиболее простой метод скачивания видео на ios:\n1. добавь этот сценарий siri.\n2. нажми \"поделиться\" выше и выбери \"save to photos\" в открывшемся окне.\nесли появляется окно с запросом разрешения, то прочитай его, потом нажми \"всегда разрешать\".\n\nальтернативный метод:\nзажми кнопку \"скачать\", затем скрой превью и выбери \"загрузить файл по ссылке\" в появившемся окне.\nпотом открой загрузки в safari, выбери скачанный файл, нажми иконку \"поделиться\", и, наконец, нажми \"сохранить видео\".", + "NoScriptMessage": "кобальт использует javascript для обработки ссылок и интерактивного интерфейса. ты должен разрешить использование javascript, чтобы пользоваться сайтом. тут нет никаких зловредных скриптов, обещаю.", + "DownloadPopupDescriptionIOS": "наиболее простой метод скачивания видео на ios:\n1. добавь этот сценарий siri.\n2. нажми \"поделиться\" выше и выбери \"save to photos\" в открывшемся окне.\nесли появляется окно с запросом разрешения, то прочитай его, потом нажми \"всегда разрешать\".\n\nальтернативный метод:\nзажми кнопку \"скачать\", затем скрой превью и выбери \"загрузить файл по ссылке\" в появившемся окне.\nпотом открой загрузки в safari, выбери скачанный файл, нажми иконку \"поделиться\", и, наконец, нажми \"сохранить видео\".", "DownloadPopupDescription": "кнопка скачивания открывает новое окно с файлом. ты можешь отключить выбор метода скачивания файла в настройках.", "ClickToCopy": "нажми, чтобы скопировать", "Download": "скачать", "CopyURL": "скопировать", - "AboutTab": "о {appName}", + "AboutTab": "о кобальте", "ChangelogTab": "изменения", "DonationsTab": "донаты", "SettingsVideoTab": "видео", @@ -78,7 +78,7 @@ "ErrorNoUrlReturned": "я не получил ссылку для скачивания от сервера. такого происходить не должно. попробуй ещё раз, а если не поможет, то {ContactLink}.", "ErrorUnknownStatus": "сервер ответил мне чем-то непонятным. такого происходить не должно. попробуй ещё раз, а если не поможет, то {ContactLink}.", "PasteFromClipboard": "вставить и скачать", - "ChangelogOlder": "предыдущие версии (на английском)", + "ChangelogOlder": "предыдущие версии (тоже на английском)", "ChangelogPressToExpand": "раскрыть", "Miscellaneous": "разное", "ModeToggleAuto": "авто режим", @@ -93,9 +93,9 @@ "ChangelogPressToHide": "скрыть", "Donate": "задонатить", "DonateSub": "ты можешь помочь!", - "DonateExplanation": "{appName} не пихает рекламу тебе в лицо и не продаёт твои личные данные, а значит работает совершенно бесплатно. но оказывается, что разработка и поддержка сервиса, которым пользуются более 300 тысяч людей, обходится довольно затратно.\n\nесли {appName} тебе помог и ты хочешь, чтобы он продолжал работать, то это можно сделать через донаты!\n\nиспользование {appName} по всему миру растёт с каждым днём, а в след за ним и стоимость хостинга. мне, как первокурснику, оплачивать такое в одиночку довольно трудно.\n\nя еще ничего не заработал на {appName}, всё возвращается обратно пользователям, так что ты помогаешь всем, кто использует {appName}.\n\nтвой донат на вес золота, ценится как никогда!", + "DonateExplanation": "кобальт не пихает рекламу тебе в лицо и не продаёт твои личные данные, а значит работает совершенно бесплатно для всех. но разработка и поддержка медиа сервиса, которым пользуются более 350 тысяч людей, обходится довольно затратно. мне, как студенту, оплачивать такое в одиночку довольно трудно.\n\nесли кобальт тебе помог и ты хочешь, чтобы он продолжал работать и развиваться, то это можно сделать через донаты!\n\nделая донат ты помогаешь всем, кто пользуется кобальтом: преподавателям, студентам, музыкантам, художникам, контент-мейкерам и многим-многим другим!\n\nза последние несколько месяцев благодаря донатам я смог:\n*; повысить стабильность и аптайм почти до 100%.\n*; ускорить ВСЕ загрузки, особенно наиболее тяжёлые.\n*; открыть api кобальта для свободного публичного использования.\n*; выдержать несколько огромных наплывов пользователей без перебоев.\n*; перейти к надёжному поставщику облачной инфры.\n*; разделить фронтенд и api для обеспечения отказоустойчивости и децентрализации в будущем.\n\nкаждый донат невероятно ценится и помогает кобальту развиваться!", "DonateVia": "открыть", - "DonateHireMe": "...или же ты можешь пригласить меня на работу :)", + "DonateHireMe": "...или же ты можешь пригласить меня на работу :)", "SettingsVideoMute": "убрать аудио", "SettingsVideoMuteExplanation": "убирает звук при загрузке видео, но только когда это возможно.", "ErrorSoundCloudNoClientId": "мне не удалось достать временный токен, который необходим для скачивания аудио из soundcloud. попробуй ещё раз, но если так и не получится, {ContactLink}.", @@ -103,24 +103,39 @@ "CollapseSupport": "поддержка и исходный код", "CollapsePrivacy": "политика конфиденциальности", "ServicesNote": "этот список далеко не финальный и постоянно пополняется. заглядывай сюда почаще, тогда точно будешь знать, что поддерживается!", - "FollowSupport": "оставайтесь на связи с {appName} для новостей, поддержки, участия в опросах, и многого другого:", + "FollowSupport": "оставайтесь на связи с кобальтом для новостей, поддержки, участия в опросах, и многого другого:", "SupportNote": "так как я один занимаюсь разработкой и поддержкой в одиночку, время ожидания ответа может достигать нескольких часов. но я отвечаю всем, так что не стесняйся.", "SourceCode": "пиши о проблемах, шарься в исходнике, или же форкай репозиторий:", - "PrivacyPolicy": "политика конфиденциальности {appName} довольно проста: ничего не хранится об истории твоих действий или загрузок. совсем. даже ошибки.\nто, что ты скачиваешь - только твоё личное дело.\n\nв случаях, когда твоей загрузке требуется лайв-рендер, временно хранится неотслеживаемая информация. это необходимо для работы такого типа загрузок.\n\nв этом случае данные о запрошенном стриме хранятся в ОЗУ сервера в течение 20 секунд. по истечении этого периода всё стирается. ни у кого (даже у меня) нет доступа к временно хранящимся данным, так как официальный код {appName} не предоставляет такой возможности.\n\nты всегда можешь посмотреть исходный код {appName} и убедиться, что всё так, как описано.", + "PrivacyPolicy": "политика конфиденциальности кобальта довольно проста: никакие данные о тебе никогда не собираются и не хранятся. нуль, ноль, нада, ничего.\nто, что ты скачиваешь, - твоё личное дело, а не чьё-либо ещё.\n\nесли твоей загрузке требуется живой рендер, то некоторые неотслеживаемые данные временно держатся в ОЗУ сервера. это необходимо для работы данной функции.\n\nв этом случае данные о запрошенном контенте хранятся в течение 20 секунд. по истечении этого времени всё стирается. ни у кого (даже у меня) нет доступа к временно хранящимся данным, так как официальная кодовая база кобальта не предусматривает возможности их чтения вне функций обработки.\n\nты всегда можешь посмотреть исходный код кобальта и убедиться, что всё так, как заявлено.", "ErrorYTUnavailable": "это видео недоступно, возможно оно ограничено по региону или доступу. попробуй другое!", "ErrorYTTryOtherCodec": "я не нашёл того, что мог бы скачать с твоими настройками. попробуй другой кодек или качество!", "SettingsCodecSubtitle": "кодек для видео с youtube", "SettingsCodecDescription": "h264: обширная поддержка плеерами, но макс. качество всего лишь 1080p.\nav1: слабая поддержка плеерами, но поддерживает 8k и HDR.\nvp9: обычно наиболее высокий битрейт, лучше сохраняется качество видео. поддерживает 4k и HDR.\n\nвыбирай h264, если тебе нужна наилучшая совместимость с плеерами/редакторами/соцсетями.", "SettingsAudioDub": "звуковая дорожка для видео с youtube", - "SettingsAudioDubDescription": "определяет, какая звуковая дорожка используется при скачивании видео. если дублированная дорожка недоступна, то вместо неё используется оригинальная.\n\nоригинал: используется оригинальная дорожка.\nавто: используется язык браузера (и {appName}).", + "SettingsAudioDubDescription": "определяет, какая звуковая дорожка используется при скачивании видео. если дублированная дорожка недоступна, то вместо неё используется оригинальная.\n\nоригинал: используется оригинальная дорожка.\nавто: используется язык браузера и интерфейса кобальта.", "SettingsDubDefault": "оригинал", "SettingsDubAuto": "авто", "SettingsVimeoPrefer": "тип загрузок с vimeo", - "SettingsVimeoPreferDescription": "progressive: прямая ссылка на файл с сервера vimeo. максимальное качество: 1080p.\ndash: {appName} совмещает видео и аудио в один файл. максимальное качество: 4k.\n\nвыбирай \"progressive\", если тебе нужна наилучшая совместимость с плеерами/редакторами/соцсетями. если \"progressive\" файл недоступен, {appName} скачает \"dash\".", + "SettingsVimeoPreferDescription": "progressive: прямая ссылка на файл с сервера vimeo. максимальное качество: 1080p.\ndash: кобальт совмещает видео и аудио в один файл. максимальное качество: 4k.\n\nвыбирай \"progressive\", если тебе нужна наилучшая совместимость с плеерами/редакторами/соцсетями. если \"progressive\" файл недоступен, кобальт скачает \"dash\".", "ShareURL": "поделиться", "ErrorTweetUnavailable": "не смог найти что-либо об этом твите. возможно его видимость была ограничена. попробуй другой!", "ErrorTwitterRIP": "твиттер ограничил доступ к любому контенту на сайте для пользователей без аккаунтов. я нашёл лазейку, чтобы доставать обычные твиты, а для spaces, к сожалению, нет. я ищу возможные варианты выхода из ситуации.", "UrgentDonate": "нужна твоя помощь!", - "PopupCloseDone": "готово" + "PopupCloseDone": "готово", + "Accessibility": "общедоступность", + "SettingsReduceTransparency": "уменьшить прозрачность", + "SettingsDisableAnimations": "выключить анимации", + "FeatureErrorGeneric": "твой браузер не разрешает или не поддерживает эту функцию. проверь наличие обновлений и попробуй ещё раз!", + "ClipboardErrorFirefox": "ты используешь firefox в котором все функции чтения из буфера обмена отключены по умолчанию.\n\nно это можно исправить следуя шагам, описанным здесь\n\n...или же ты можешь просто вставить ссылку вручную.", + "ClipboardErrorNoPermission": "кобальт не может прочитать последний элемент в буфере обмена без твоего разрешения.\n\nесли ты не хочешь давать доступ, просто вставь ссылку вручную.\n\nну а если хочешь, то открой настройки сайта и разреши доступ на чтение буфера обмена.", + "SupportSelfTroubleshooting": "возникли проблемы? попробуй сначала исправить всё сам по этому гиду!", + "AccessibilityGoBack": "вернуться назад и закрыть окно", + "CollapseKeyboard": "горячие клавиши", + "KeyboardShortcutsIntro": "пользуйся кобальтом ещё быстрее с горячими клавишами:", + "KeyboardShortcutQuickPaste": "вставить ссылку", + "KeyboardShortcutClear": "очистить зону вставки ссылки", + "KeyboardShortcutClosePopup": "закрыть все окна", + "CollapseLegal": "правовые штучки", + "FairUse": "кобальт - это инструмент для облегчения скачивания контента из интернета, и он не несёт никакой ответственности. ты несёшь ответственность за то, что скачиваешь, как используешь и распространяешь скачанный контент.\n\nкобальт не собирает никакой информации о тебе, и не может донести на тебя, но, пожалуйста, будь сознателен при использовании чужого контента и всегда указывай авторов!\n\nпри использовании в образовательных целях (лекции, домашние задания и т.д.), пожалуйста, прикладывай ссылку на источник.\n\nчестное использование и указание авторства выгодно всем." } } diff --git a/src/localization/manager.js b/src/localization/manager.js index e5eec9b..76b6873 100644 --- a/src/localization/manager.js +++ b/src/localization/manager.js @@ -1,5 +1,5 @@ import * as fs from "fs"; -import { appName, links, repo } from "../modules/config.js"; +import { links, repo } from "../modules/config.js"; import loadJson from "../modules/sub/loadJSON.js"; const locPath = './src/localization/languages'; @@ -16,7 +16,7 @@ export async function loadLoc() { } export function replaceBase(s) { - return s.replace(/\n/g, '
').replace(/{saveToGalleryShortcut}/g, links.saveToGalleryShortcut).replace(/{appName}/g, appName).replace(/{repo}/g, repo).replace(/\*;/g, "•"); + return s.replace(/\n/g, '
').replace(/{saveToGalleryShortcut}/g, links.saveToGalleryShortcut).replace(/{repo}/g, repo).replace(/\*;/g, "•"); } export function replaceAll(lang, str, string, replacement) { let s = replaceBase(str[string]) diff --git a/src/modules/api.js b/src/modules/api.js index 94ed504..f4b1e29 100644 --- a/src/modules/api.js +++ b/src/modules/api.js @@ -12,12 +12,15 @@ export async function getJSON(originalURL, lang, obj) { let patternMatch, url = decodeURIComponent(originalURL), hostname = new URL(url).hostname.split('.'), host = hostname[hostname.length - 2]; + if (!url.startsWith('https://')) return apiJSON(0, { t: errorUnsupported(lang) }); switch(host) { case "youtu": - host = "youtube"; - url = `https://youtube.com/watch?v=${url.replace("youtu.be/", "").replace("https://", "")}`; + if (url.startsWith("https://youtu.be/")) { + host = "youtube"; + url = `https://youtube.com/watch?v=${url.replace("https://youtu.be/", "")}`; + } break; case "goo": if (url.substring(0, 30) === "https://soundcloud.app.goo.gl/") { @@ -25,6 +28,12 @@ export async function getJSON(originalURL, lang, obj) { url = `https://soundcloud.com/${url.replace("https://soundcloud.app.goo.gl/", "").split('/')[0]}` } break; + case "x": + if (url.startsWith("https://x.com/")) { + host = "twitter"; + url = url.replace("https://x.com/", "https://twitter.com/") + } + break; case "tumblr": if (!url.includes("blog/view")) { if (url.slice(-1) === '/') url = url.slice(0, -1); diff --git a/src/modules/build.js b/src/modules/build.js index a2515b0..887ffb5 100644 --- a/src/modules/build.js +++ b/src/modules/build.js @@ -1,14 +1,10 @@ import * as esbuild from "esbuild"; import * as fs from "fs"; import { loadLoc, languageList } from "../localization/manager.js"; +import { cleanHTML } from "./sub/utils.js"; import page from "./pageRender/page.js"; -function cleanHTML(html) { - let clean = html.replace(/ {4}/g, ''); - clean = clean.replace(/\n/g, ''); - return clean -} export async function buildFront(commitHash, branch) { try { // preload localization files diff --git a/src/modules/changelog/changelog.json b/src/modules/changelog/changelog.json index 35e39e9..858e7c0 100644 --- a/src/modules/changelog/changelog.json +++ b/src/modules/changelog/changelog.json @@ -1,64 +1,124 @@ { "current": { - "version": "6.2", - "title": "all network issues have been fixed!", - "banner": "meowthhammer.webp", - "content": "hey! there have been some hiccups in cobalt's stability lately, i was going through finals while trying to scale up the infrastructure, and that didn't really work out, lol.\nBUT i'm happy to announce that i've optimized all nodes! there should no longer be any networking issues.\n\nenjoy stable experience while i work in background to make cobalt even better :)\n\nhere's what's new in this update:\n*; better button contrast in both themes. \n*; button highlight in light theme now actually looks like a highlight.\n*; removed ip gate for streamables and updated privacy policy to reflect this change.\n*; streamable links now last for 20 seconds instead of 2 minutes.\n*; cleaned up stream verification algorithm. now the same function doesn't run 4 times in a row.\n*; removed deprecated way of hosting a cobalt instance.\n\nthank you for sticking with cobalt, and i hope you have a great day :D" + "version": "7.0", + "date": "August 15, 2023", + "title": "biggest ui refresh yet!", + "banner": { + "file": "meowthcooking.webp", + "width": 640, + "height": 360 + }, + "content": "hey! this update is huge and mostly aimed to refresh the ui, but there are also some other nice fixes/additions. read below for more info :)\n\ntl;dr:\n*; entirety of web app has been refreshed. it's more prettier and optimized than ever, both on phone and desktop.\n*; if you're on ios, try adding cobalt to home screen! it'll look and act like a native app.\n*; all soundcloud links are now supported and audio quality is higher than before.\n*; all x (previously twitter) links are now supported and work properly.\n*; newer reddit videos are downloadable now.\n*; added some sort of eula, list of keyboard shortcuts, updated privacy policy for more clarity. check it all in refreshed about tab!\n*; cobalt now lets you know if your browser doesn't support clipboard pasting and helps you fix it.\n\naccessibility notice:\nthis update includes animations and transparency, if you'd like to disable any or all of them, head to settings > other > accessibility.\n\n[full changelog]\n\nservice improvements:\n*; fixed unexpected 502 errors when downloading newer reddit videos.\n*; newer reddit videos (with audio) are downloadable now.\n*; upgraded soundcloud downloads to use higher audio quality than before.\n*; all soundcloud links are now supported.\n*; added support for x.com urls.\n*; changed twitter api once again. now everything works, again.\n\nweb improvements:\n*; all-new matte glass aesthetic, applied to revamped popup headers, tab selectors, and also small popups.\n*; rounded corners everywhere! cobalt is now safe for everyone who can't handle sharp objects.\n*; paddings everywhere are smaller, more content fits on the screen at once.\n*; optimized installed web app to look and act like a native app, especially on ios.\n*; added update release dates to changelogs.\n*; cobalt now lets you know if your browser doesn't support clipboard api and helps you fix it.\n*; refreshed all popups: less padding, more content.\n*; completely remade error and download popups, they're consistent with the rest of refreshed design.\n*; refreshed the look of entire changelog tab: separated title and version/commit, made title bigger, evened out all paddings.\n*; replaced close button with back button, moved it to left.\n*; added interaction animations.\n*; added more keyboard shorcuts.\n*; added a list of keyboard shortcuts to about tab.\n*; added eula to about tab. check it out.\n*; added more accessibility options, put them all into one category. you can disable animations and transparency if you want to.\n*; added a link to self-troubleshooting guide to about tab.\n*; renamed 2160p and 4320p to 4k and 8k respectfully for better clarity.\n*; popups now work without any weird workarounds, especially on mobile. they're clean and nice.\n*; home screen now also works without any weird workarounds. it is also clean and nice.\n*; optimized css of almost all ui elements. should be even more consistent across platforms now.\n*; added ability to translate \"cobalt\" more in-depth localization. for example, in russian \"cobalt\" is now \"кобальт\", that's the style i'll be going with from now on.\n*; updated many localization strings for more clarity.\n*; removed ability to change the app name dynamically in all locations. cobalt is a sustained app name.\n*; updated donation and privacy policy texts for more clarity in both english and russian.\n*; home screen now smoothly fades in instead of popping in.\n*; proper banner loading. no more jumping text!\n*; proper banner error handling. if banner wasn't loaded, it'll simply go grey instead of disappearing.\n*; links are no longer italic and are instead underlined.\n*; collapsible lists now have corresponding emoji.\n*; donate button is now highlighted with magenta instead of white.\n*; proper dropdown arrow.\n*; removed 6.0 api fallback.\n*; fixed celebrations emoji. again.\n*; cleaned up all related frontend modules, especially page.js.\n*; urgent notice is now a js element, not a static piece of text. can be updated easily.\n\napi improvements:\n*; now catching all json api related errors.\n*; moved on demand blocks to web server, now changelog can be updated independently from preferred api server.\n*; now sending standard rate limiting headers.\n*; better readability in source.\n\nother improvements:\n*; renamed docker-compose.yml.example to docker-compose.example.yml for linting in code editors.\n*; added a wiki with wip troubleshooting guide on github. more guides are coming soon!\n\nthat's a ton of changes! i really hope you like this update as much as i do.\n\nif you experience any issues, feel free to contact me on any platform listed in about tab! i'd love to hear back from you.\n\nthank you for sticking with me and cobalt, i hope you have THE best day :D" }, "history": [{ + "version": "6.2", + "date": "June 27 2023", + "title": "all network issues have been fixed!", + "banner": { + "file": "meowthhammer.webp", + "width": 1280, + "height": 827 + }, + "content": "hey! there have been some hiccups in cobalt's stability lately, i was going through finals while trying to scale up the infrastructure, and that didn't really work out, lol.\nBUT i'm happy to announce that i've optimized all nodes! there should no longer be any networking issues.\n\nenjoy stable experience while i work in background to make cobalt even better :)\n\nhere's what's new in this update:\n*; better button contrast in both themes. \n*; button highlight in light theme now actually looks like a highlight.\n*; removed ip gate for streamables and updated privacy policy to reflect this change.\n*; streamable links now last for 20 seconds instead of 2 minutes.\n*; cleaned up stream verification algorithm. now the same function doesn't run 4 times in a row.\n*; removed deprecated way of hosting a cobalt instance.\n\nthank you for sticking with cobalt, and i hope you have a great day :D\n\nbanner photo is by @halftroller on twitter, thank you so much!" + }, { "version": "6.0", + "date": "June 7, 2023", "title": "better reliability, new infrastructure, pinterest support, and way more!", - "banner": "catswitchboxes.webp", - "content": "hey! long time no see, hopefully over 40 changes will make up for it :)\n\ncobalt now has an official community discord server. you can go there for news, support, or just to chat. go check it out!\n\ntl;dr\n*; new infra, new hosting structure, new main instance api url. developers, get it here.\n*; added support for pinterest, vine archive, tumblr audio, youtube vr videos.\n*; better web app performance and look.\n*; better stability thanks to load balancing.\n*; (hopefully) no more random video/audio download drops.\n\nservice improvements:\n*; added support for pinterest videos and stories (pr by @Snazzah).\n*; added support for tumblr audio. sorry, tumblr.\n*; added support for youtube vr videos. please note that they're in youtube's proprietary ratio.\n*; added support for vine archive.\n*; added support for ancient vk videos in 240p.\n*; fixed an issue related to muted video downloads from tumblr.\n*; moved to twitter v2 api.\n*; soundcloud share links are now processed without errors.\n\nui improvements:\n*; lazy image loading. should significantly speed up the page load.\n*; fixed checkbox width on mobile devices.\n*; addition of a temporary urgent notice.\n*; added hover border to all buttons.\n*; less annoying donation button highlight.\n*; more consistent color scheme.\n*; added link to a discord server into about popup.\n*; remember celebratory emoji changes? they've been fixed, and are now dynamically loaded!\n*; changelog history now lets you try to load it again if first attempt failed for whatever reason.\n*; padding (everywhere) has been slightly reduced to fit in more content and be consistent across ui.\n*; added more info to the \"how to save\" popup for ios devices.\n*; crypto wallet press-to-copy buttons now look like buttons.\n*; improved ui layout for smallest screens (iphone 5, 5s, se, etc).\n*; removed partial translations for sake of clarity and consistency.\n\ninternal improvements:\n*; separated web and api servers. they're now completely independent and therefore more stress-resistant.\n*; added a dedicated script for building the web app if you don't want to reload the frontend server.\n*; web app building improvements.\n*; async localization preloading.\n*; consistent server start time reporting.\n*; dynamic stream and ip hashing salt generation.\n\ninfrastructure improvements:\n*; load balancing: your api requests are now sent to the least busy server. yes, there are now several of them with more to come in the future.\n*; when possible, server in closest region is used instead of a far-away one. this should help with download speeds.\n*; currently there are multiple servers in europe. i will let you know when (and if) i manage to get an american one.\n\nupdates for developers and instance hosters:\n*; server info api endpoint: you can now check up on the api server of choice. it reports all the basic info you may need. check the api docs for more info.\n*; api names: each and every api instance should have a distinctive name. this will be useful in the future :)\n*; added docker compose sample config.\n*; updated and more granular setup script.\n*; better api scalability and faster server start up thanks to web and api separation.\n*; added ability to specify ffmpeg threads. simply add ffmpegThreads to your environment variables!\n\ni'm still in awe from how popular cobalt has become. there are now over 200k of unique users monthly, and that number only keeps growing. i even had to come up with something to accommodate for larger traffic, it's absolutely insane.\n\nlove you all, have a great day :D" + "banner": { + "file": "catswitchboxes.webp", + "width": 600, + "height": 314 + }, + "content": "hey! long time no see, hopefully over 40 changes will make up for it :)\n\ncobalt now has an official community discord server. you can go there for news, support, or just to chat. go check it out!\n\ntl;dr\n*; new infra, new hosting structure, new main instance api url. developers, get it here.\n*; added support for pinterest, vine archive, tumblr audio, youtube vr videos.\n*; better web app performance and look.\n*; better stability thanks to load balancing.\n*; (hopefully) no more random video/audio download drops.\n\nservice improvements:\n*; added support for pinterest videos and stories (pr by @Snazzah).\n*; added support for tumblr audio. sorry, tumblr.\n*; added support for youtube vr videos. please note that they're in youtube's proprietary ratio.\n*; added support for vine archive.\n*; added support for ancient vk videos in 240p.\n*; fixed an issue related to muted video downloads from tumblr.\n*; moved to twitter v2 api.\n*; soundcloud share links are now processed without errors.\n\nui improvements:\n*; lazy image loading. should significantly speed up the page load.\n*; fixed checkbox width on mobile devices.\n*; addition of a temporary urgent notice.\n*; added hover border to all buttons.\n*; less annoying donation button highlight.\n*; more consistent color scheme.\n*; added link to a discord server into about popup.\n*; remember celebratory emoji changes? they've been fixed, and are now dynamically loaded!\n*; changelog history now lets you try to load it again if first attempt failed for whatever reason.\n*; padding (everywhere) has been slightly reduced to fit in more content and be consistent across ui.\n*; added more info to the \"how to save\" popup for ios devices.\n*; crypto wallet press-to-copy buttons now look like buttons.\n*; improved ui layout for smallest screens (iphone 5, 5s, se, etc).\n*; removed partial translations for sake of clarity and consistency.\n\ninternal improvements:\n*; separated web and api servers. they're now completely independent and therefore more stress-resistant.\n*; added a dedicated script for building the web app if you don't want to reload the frontend server.\n*; web app building improvements.\n*; async localization preloading.\n*; consistent server start time reporting.\n*; dynamic stream and ip hashing salt generation.\n\ninfrastructure improvements:\n*; load balancing: your api requests are now sent to the least busy server. yes, there are now several of them with more to come in the future.\n*; when possible, server in closest region is used instead of a far-away one. this should help with download speeds.\n*; currently there are multiple servers in europe. i will let you know when (and if) i manage to get an american one.\n\nupdates for developers and instance hosters:\n*; server info api endpoint: you can now check up on the api server of choice. it reports all the basic info you may need. check the api docs for more info.\n*; api names: each and every api instance should have a distinctive name. this will be useful in the future :)\n*; added docker compose sample config.\n*; updated and more granular setup script.\n*; better api scalability and faster server start up thanks to web and api separation.\n*; added ability to specify ffmpeg threads. simply add ffmpegThreads to your environment variables!\n\ni'm still in awe from how popular cobalt has become. there are now over 200k of unique users monthly, and that number only keeps growing. i even had to come up with something to accommodate for larger traffic, it's absolutely insane.\n\nlove you all, have a great day :D" }, { "version": "5.4", "title": "instagram support, docker, and more!", - "banner": "catphonestand.webp", + "banner": { + "file": "catphonestand.webp", + "width": 451, + "height": 272 + }, "content": "something many of you've been waiting for is finally here! try it out and let me know what you think :)\n\ntl;dr:\n*; added experimental instagram support! download any reels or videos you like, and make sure to report any issues you encounter. yes, you can convert either to audio.\n*; fixed support for on.soundcloud links.\n*; added share button to \"how to save?\" popup.\n*; added docker support.\n\nservice improvements:\n*; added experimental support for videos from instagram. currently only reels and post videos are downloadable, but i'm looking into ways to save high resolution photos too. if you experience any issues, please report them on either of support platforms.\n*; fixed support for on.soundcloud share links. should work just as well as other versions!\n*; fixed an issue that made some youtube videos impossible to download.\n\ninterface improvements:\n*; new css-only checkmark! yes, i can't stop tinkering with it because slight flashing on svg load annoyed me. now it loads instantly (and also looks slightly better).\n*; fixed copy animation.\n*; minor localization improvements.\n*; fixed the embed logo that i broke somewhere in between 5.3 and 5.4.\n\ninternal improvements:\n*; now using nanoid for live render stream ids.\n*; added support for docker. it's kind of clumsy because of how i get .git folder inside the container, but if you know how to do it better, feel free to make a pr.\n*; cobalt now checks only for existence of environment variables, not exactly the .env file.\n*; changed the way user ip address is retrieved for instances using cloudflare.\n*; added ability to disable cors, both to setup script and environment variables.\n\ni can't believe how diverse and widespread cobalt has become. it's used in all fields: music production, education, content creation, and even game development. thank you. this is absolutely nuts.\nif you don't mind sharing, please tell me about your use case. i'd really love to hear how you use cobalt and how i could make it even more useful for you." }, { "version": "5.3", "title": "better looks, better feel", - "banner": "cattired.webp", + "banner": { + "file": "cattired.webp", + "width": 640, + "height": 286 + }, "content": "this update isn't as big as previous ones, but it still greatly enhances the cobalt experience.\n\nhere's what's up:\n*; new mode switcher! elegant and 100% clear. should no longer cause any confusion. let me know if you like it better this way :D\n*; wide paste button on mobile is back, but now it's even closer to your finger.\n*; removed the weird grey chin on changelog banners.\n*; removed left-handed layout toggle since it is no longer needed.\n*; fixed input area display in chromium 112+.\n*; centered the main action box.\n*; cleaned up css of main action box to get rid of tricks and ensure correct display on all devices.\n*; fixed a bug that'd cause notifications dots to disappear when an unrelated checkbox was checked.\n\nhopefully from now on i'll focus on adding support for more services.\nthank you for using cobalt. stay cool :)" }, { "version": "5.2", "title": "fastest one in the game", - "banner": "catspeed.webp", + "banner": { + "file": "catspeed.webp", + "width": 640, + "height": 356 + }, "content": "hey, notice anything different? well, at very least the page loaded way faster! this update includes many improvements and fixes, but also some new features.\n\ntl;dr:\n*; twitter retweet links are now supported.\n*; all vimeo videos should now be possible to download.\n*; you now can download audio from vimeo.\n*; it's now possible to pick between preferred vimeo download method in settings.\n*; fixed issues related to tiktok, twitter, twitter spaces, and vimeo downloads.\n*; overall cobalt performance should be MUCH better.\n\nservice improvements:\n*; added support for twitter retweet links. now all kinds of tweet links are supported.\n*; fixed the issue related to periods in tiktok usernames (#96).\n*; fixed twitter spaces downloads.\n*; added support for audio downloads from vimeo.\n*; added ability to choose between \"progressive\" and \"dash\" vimeo downloads. go to settings > video to pick your preference.\n*; fixed the issue related to vimeo quality picking.\n*; fixed the issue when vimeo module wouldn't show appropriate errors and instead would fallback to default ones.\n*; improved audio only downloads for some edge cases.\n*; (hopefully) better youtube reliability.\n*; temporarily disabled douyin support due to api endpoint cut off.\n\ninterface improvements:\n*; merged clipboard and mode switcher rows into one for mobile view.\n*; added left-handed layout toggle for those who prefer to have the clipboard button on left.\n*; new custom-made clipboard icon. now it clearly indicates what it does.\n*; improved english and russian localization. both are way more direct and less bloaty.\n*; frontend page is now rendered once and is cached on disk instead of being rendered every time someone requests a page. this greatly improves page loading speeds and further reduces strain put on the server.\n*; frontend page is now minimized just like js and css files. this should minimize traffic wasted on loading the page, along with minor loading speed improvement.\n*; added proper checkbox icon for better clarity.\n*; checkboxes are now stretched edge-to-edge on phone to be easier to manage for right-handed people.\n*; removed button hover highlights on phones.\n*; fixed button press animations for safari on ios.\n*; fixed text selection on ios. previously you could select text or images anywhere, but now they're selectable in limited places, just like on other platforms.\n*; frontend platform is now marked in settings: p is for pc; m is for mobile; i is for ios. this is done for possible future debugging and issue-solving.\n*; better error messaging.\n\ninternal improvements:\n*; better rate limiting, there should be way less cases of accidental limits.\n*; added support for m3u8 playlists. this will be useful for future additions, and is currently used by vimeo module.\n*; added support for \"chop\" stream format for vimeo downloads.\n*; fixed vk user id extraction. i assumed the - in url was a separator, but it's actually a part of id.\n*; completely reworked the vimeo module. it's much cleaner and better performant now.\n*; minor clean ups across the board.\n\nnot really related to this update, but thank you for 50k monthly users! i really appreciate that you're still here, because that means i'm doing some things right :D" }, { "version": "5.1", "title": "the evil has been defeated", - "banner": "happymeowth.webp", + "banner": { + "file": "happymeowth.webp", + "width": 500, + "height": 330 + }, "content": "hey, ever wanted to download a youtube video without a hassle? cobalt is here to help. this update fixes all issues related to youtube downloads.\nnot only that, but it also introduces features never before seen in a downloader, such as youtube dub downloads! read below to see what's up :)\n\ntl;dr:\n*; audio in youtube videos FINALLY no longer gets cut off.\n*; you now can pick any video resolution you want (from 360p to 8k) and any possible youtube video codec (h264/av1/vp9).\n*; you now can download youtube videos with dubs in your native language. just check settings > audio.\n*; youtube processing has been vastly sped up.\n\nok, now onto the nerdy part of changelog. this update is pretty huge and includes improvements across the board.\n\nservice improvements:\n*; all youtube functionality has been reworked. cobalt now relies on innertube apis, not web scraping.\n*; random audio cut off issue has been fixed, let me know if it ever occurs again. (closes #62, #66, #75, #88).\n*; added support for youtube dubs. currently it's using your browser's default language when enabled, but i have plans on making a picker. i'll ask people on twitter and mastodon if this feature is needed, and add a picker in next updates.\n*; instead of adding more quality presets, i added granular quality options. pick whatever you like, from 360p up to 4320p (for all services, not just youtube).\n*; replaced a format picker with codec picker for youtube. you can pick h264, av1, or vp9. all of them should work as expected (closes #88).\n*; youtube audio files are now properly matched to corresponding video files.\n*; it's now always possible to download pristine h264 720p/360p videos from youtube. these videos will work ANYWHERE, so they're default for mobile.\n*; youtube requests are no longer permanently cached, ram usage should drop even further.\n*; youtube video and audio file names now include codec and dub language when applicable.\n*; max video and audio duration limits have been bumped up to 3 hours.\n*; general performance of entire youtube download process has been greatly improved.\n*; vk module has been reworked to be more compact and not make use of outdated technique of quality picking. should also be way more reliable.\n\ninternal improvements:\n*; cleaned up services config, all constants have been moved directly to modules for quicker access.\n*; matching module has been slightly cleaned up.\n\ninterface improvements:\n*; many descriptions and error messages have been slightly tuned to be less wordy.\n*; unnecessary title duplications in settings have been merged into one.\n*; added more clarity to quality and codec descriptions.\n\nif you use cobalt api, please note that you have to update your creation to support new features.\n\nthis is the second batch of 5.x improvements, there's way more to come. thank you for being here, i really appreciate your support.\n\nif you want to thank me (the developer), there's a nice tab under this changelog that has \"donations\" text on it. anything helps me continue developing and hosting the friendliest media downloader :D" }, { "version": "5.0", "title": "it's all about attention to detail!", - "banner": "valentines.webp", + "banner": { + "file": "valentines.webp", + "width": 489, + "height": 374 + }, "content": "happy valentine's day! i have an update for you, as a gift :D\n\ntl;dr: added support for reddit gifs, fixed douyin downloads, fixed vimeo quality picking, revamped entirety of codebase, and many other fixes.\n\nhere's more info:\n\nthis update is mostly about cleaning up and polishing the codebase, but it also has some new features. here's what's up:\n\nservice-related improvements:\n*; you now can download gifs from reddit!\n*; attempting to download a video from douyin no longer throws an error (bytedance changed the api endpoint, yet again).\n*; fixed quality picking for vimeo downloads.\n*; fixed length limit check in vimeo module.\n*; fixed support for \"user view\" vk clips links.\n*; various twitter errors are now displayed correctly instead of falling back to the default error.\n*; state of all services is now tested on each commit.\n\nui improvements:\n*; cobalt social links no longer disappear if you have an aggressive ad blocking extension installed.\n*; various localization improvements for both english and russian.\n*; changed some service aliases to display full list of supported downloads.\n*; added current branch information to version text (in settings).\n*; fixed typos in older changelogs.\n\ninternal improvements:\n*; everything has been sanitized, improved, and refactored. code is now much easier to read and maintain.\n*; rewrote and/or optimized all modules that were messy or inefficient.\n*; all git interaction functions now store info in cache instead of fetching it every time the function is called.\n*; added a test script that checks functionality of all supported services.\n*; updated deepsource config. checks are more accurate now.\n*; requests from internet explorer are now dropped entirely instead of redirecting people stuck in 90s to a proper browser download page. this was done to avoid (my) personal bias towards browsers.\n\ni put a ton of effort into this version, and i hope you like it as much as i do.\n\nthank you for using cobalt. there's so much more to come :)" }, { "version": "4.8", "title": "prettier than ever", - "banner": "catmakeup.webp", - "content": "this version brings many visual improvements and a completely revamped \"about\" tab.\n\nwhat's new in \"about\" tab:\n*; all information is now split into collapsible sections, making it easier to navigate.\n*; added privacy policy to further prove that none of your data is collected.\n*; added emoji to the page title to make it look consistent with other pages.\n*; added mastodon account handle and link.\n*; there are now short notes at the end of each section.\n*; other changes that are too small to describe. just go check it out!\n\nvisual improvements:\n*; less wasted space: paddings and margins have been reduced and optimized for usability, consistency, and overall beauty.\n*; all links are now in italic. it's much easier to tell them apart from regular highlights.\n*; error popup no longer looks broken and out of place.\n*; download popup now has a proper close button, not something from 2.x era.\n*; emoji are no longer selectable or draggable.\n*; better scalability: desktop layout for home screen is shown if device viewport is wide enough to fit in three action buttons.\n*; page shouldn't look broken on phones in landscape mode (i still highly recommend using cobalt in portrait mode).\n*; removed bulletpoint padding. it was unnecessary.\n*; updated some service names.\n\nas always, you can suggest features or report bugs on any platform listed in the \"support\" section of about tab.\n\nthank you for using cobalt. i hope you have a good day :)" + "banner": { + "file": "catmakeup.webp", + "width": 394, + "height": 266 + }, + "content": "this version brings many visual improvements and a completely revamped \"about\" tab.\n\nwhat's new in \"about\" tab:\n*; all information is now split into collapsible sections, making it easier to navigate.\n*; added privacy policy to further prove that none of your data is collected.\n*; added emoji to the page title to make it look consistent with other pages.\n*; added mastodon account handle and link.\n*; there are now short notes at the end of each section.\n*; other changes that are too small to describe. just go check it out!\n\nvisual improvements:\n*; less wasted space: paddings and margins have been reduced and optimized for usability, consistency, and overall beauty.\n*; all links are now in italic. it's much easier to tell them apart from regular highlights.\n*; error popup no longer looks broken and out of place.\n*; download popup now has a proper close button, not something from 2.x era.\n*; emoji are no longer selectable or draggable.\n*; better scalability: desktop layout for home screen is shown if device viewport is wide enough to fit in three action buttons.\n*; page shouldn't look broken on phones in landscape mode (i still highly recommend using cobalt in portrait mode).\n*; removed bulletpoint padding. it was unnecessary.\n*; updated some service names.\n\nas always, you can suggest features or report bugs on any platform listed in the \"support\" section of about tab.\n\nthank you for using cobalt. i hope you have a good day :)" }, { "version": "4.7", "title": "we're better together! thank you for bug reports.", - "banner": "bettertogether.webp", - "content": "this update includes a bunch of improvements, many of which were made thanks to the community :D\n\nservice-related improvements:\n*; private soundcloud links are now supported (#68);\n*; tiktok usernames with dots in them no longer confuse cobalt (#71);\n*; .ogg files no longer wrongfully include a video channel (#67);\n*; fixed an issue that caused cobalt to freak out when user attempted to download an audio from audio-only service with \"mute video\" option enabled.\n\nui improvements:\n*; popup padding has been evened out. popups are now able to fit in more information on scroll, especially on mobile;\n*; all buttons are now of even size and are displayed without any padding issues across all modern browsers and devices;\n*; checkbox is no longer crippled on ios;\n*; many explanation texts have been simplified to get rid of unnecessary bloat (no bullshit, remember?);\n*; moved tiktok section in video settings higher due to higher priority;\n*; fixed unexpectedly displayed scrollbars on switch rows in firefox.\n\nstability improvements:\n*; ffmpeg process now should end upon finishing the render;\n*; ffmpeg should also quit when download is abruptly cut off;\n*; fixed a memory leak that was caused by misconfigured stream information caching (#63).\n\ninternal improvements:\n*; requested streams are now stored in cache for 2 minutes instead of 1000 hours (yes, 1000 hours, i fucked up);\n*; cached data is now reused if user requests same content within 2 minutes;\n*; page render module is now even cleaner than before;\n*; proper support for bullet-points in loc strings.\n\nyou can suggest features or report bugs on github or twitter. both work just fine, use whichever you're more comfortable with.\n\nthank you for using cobalt, and thank you for reading this changelog.\n\nyou're amazing, keep it up :)" + "banner": { + "file": "bettertogether.webp", + "width": 640, + "height": 358 + }, + "content": "this update includes a bunch of improvements, many of which were made thanks to the community :D\n\nservice-related improvements:\n*; private soundcloud links are now supported (#68);\n*; tiktok usernames with dots in them no longer confuse cobalt (#71);\n*; .ogg files no longer wrongfully include a video channel (#67);\n*; fixed an issue that caused cobalt to freak out when user attempted to download an audio from audio-only service with \"mute video\" option enabled.\n\nui improvements:\n*; popup padding has been evened out. popups are now able to fit in more information on scroll, especially on mobile;\n*; all buttons are now of even size and are displayed without any padding issues across all modern browsers and devices;\n*; checkbox is no longer crippled on ios;\n*; many explanation texts have been simplified to get rid of unnecessary bloat (no bullshit, remember?);\n*; moved tiktok section in video settings higher due to higher priority;\n*; fixed unexpectedly displayed scrollbars on switch rows in firefox.\n\nstability improvements:\n*; ffmpeg process now should end upon finishing the render;\n*; ffmpeg should also quit when download is abruptly cut off;\n*; fixed a memory leak that was caused by misconfigured stream information caching (#63).\n\ninternal improvements:\n*; requested streams are now stored in cache for 2 minutes instead of 1000 hours (yes, 1000 hours, i fucked up);\n*; cached data is now reused if user requests same content within 2 minutes;\n*; page render module is now even cleaner than before;\n*; proper support for bullet-points in loc strings.\n\nyou can suggest features or report bugs on github or twitter. both work just fine, use whichever you're more comfortable with.\n\nthank you for using cobalt, and thank you for reading this changelog.\n\nyou're amazing, keep it up :)" }, { "version": "4.6", "title": "mute videos and proper soundcloud support", - "banner": "shutup.png", + "banner": { + "file": "shutup.webp", + "width": 1024, + "height": 665 + }, "content": "i've been longing to implement both of these things, and here they finally are.\n\nservice-related improvements:\n*; you now can download videos with no audio! simply enable the \"mute audio\" option in settings > audio.\n*; soundcloud module has been updated, and downloads should no longer break after some time.\nvisual improvements:\n*; moved some things around in settings popup, and added separators where separation is needed.\n*; updated some texts in english and russian.\n*; version and commit hash have been joined together, now they're a single unit.\ninternal improvements:\n*; updated api documentation to include isAudioMuted.\n*; simplified the startup message.\n*; created render elements for separator and explanation due to high duplication of them in the page.\n*; fully deprecated GET method for API requests.\n*; fixed some code quirks.\nhere's how soundcloud downloads got fixed:\n\npreviously, client_id was (stupidly) hardcoded. that means cobalt wasn't able to fetch song data if soundcloud web app got updated.\nnow, cobalt tries to find the up-to-date client_id, caches it in memory, and checks if web app version has changed to update the id accordingly. you can see this change for yourself on github." }, { "version": "4.5", "title": "better, faster, stronger, stable", - "banner": "meowthstrong.webp", - "content": "your favorite social media downloader just got even better! this update includes a ton of improvements and fixes.\n\nin fact, there are so many changes, i had to split them in sections.\n\nservice-related improvements:\n*; vimeo module has been revamped, all sorts of videos should now be supported.\n*; vimeo audio downloads! you now can download audios from more recent videos.\n*; cobalt now supports all sorts of tumblr links. (even those scary ones from the mobile app)\n*; vk clips support has been fixed. they rolled back the separation of videos and clips, so i had to do the same.\n*; youtube videos with community warnings should now be possible to download.\nuser interface improvements:\n*; list of supported services is now MUCH easier to read.\n*; banners in changelog history should no longer overlap each other.\n*; bullet points! they have a bit of extra padding, so it makes them stand out of the rest of text.\ninternal improvements:\n*; cobalt will now match the link to regex when using ?u= query for autopasting it into input area.\n*; better rate limiting: limiting now is done per minute, not per 20 minutes. this ensures less waiting and less attack area for request spammers.\n*; moved to my own fork of ytdl-core, cause main project seems to have been abandoned. go check it out on github or npm!\n*; ALL user inputs are now properly sanitized on the server. that includes variables for POST api method, too.\n*; \"got\" package has been (mostly) replaced by native fetch api. this should greatly reduce ram usage.\n*; all unnecessary duplications of module imports have been gotten rid of. no more error passing strings from inside of service modules. you don't make mistakes only if you don't do anything, right?\n*; other code optimizations. there's less clutter overall.\nhuge update, right? seems like everything's fixed now?\n\nnope, one issue still persists: sometimes youtube server drops packets for an audio file while cobalt's rendering the video for you. this results in abrupt cuts of audio. if you want to help solving this issue, please feel free to do it on github!\n\nthank you for reading this, and thank you for sticking with cobalt and me." + "banner": { + "file": "meowthstrong.webp", + "width": 500, + "height": 280 + }, + "content": "your favorite social media downloader just got even better! this update includes a ton of improvements and fixes.\n\nin fact, there are so many changes, i had to split them in sections.\n\nservice-related improvements:\n*; vimeo module has been revamped, all sorts of videos should now be supported.\n*; vimeo audio downloads! you now can download audios from more recent videos.\n*; cobalt now supports all sorts of tumblr links. (even those scary ones from the mobile app)\n*; vk clips support has been fixed. they rolled back the separation of videos and clips, so i had to do the same.\n*; youtube videos with community warnings should now be possible to download.\nuser interface improvements:\n*; list of supported services is now MUCH easier to read.\n*; banners in changelog history should no longer overlap each other.\n*; bullet points! they have a bit of extra padding, so it makes them stand out of the rest of text.\ninternal improvements:\n*; cobalt will now match the link to regex when using ?u= query for autopasting it into input area.\n*; better rate limiting: limiting now is done per minute, not per 20 minutes. this ensures less waiting and less attack area for request spammers.\n*; moved to my own fork of ytdl-core, cause main project seems to have been abandoned. go check it out on github or npm!\n*; ALL user inputs are now properly sanitized on the server. that includes variables for POST api method, too.\n*; \"got\" package has been (mostly) replaced by native fetch api. this should greatly reduce ram usage.\n*; all unnecessary duplications of module imports have been gotten rid of. no more error passing strings from inside of service modules. you don't make mistakes only if you don't do anything, right?\n*; other code optimizations. there's less clutter overall.\nhuge update, right? seems like everything's fixed now?\n\nnope, one issue still persists: sometimes youtube server drops packets for an audio file while cobalt's rendering the video for you. this results in abrupt cuts of audio. if you want to help solving this issue, please feel free to do it on github!\n\nthank you for reading this, and thank you for sticking with cobalt and me." }, { "version": "4.4", "title": "over 1 million monthly requests. thank you.", - "banner": "onemillionr.webp", + "banner": { + "file": "onemillionr.webp", + "width": 1441, + "height": 1441 + }, "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." }, { "version": "4.3.2", @@ -67,8 +127,12 @@ }, { "version": "4.3", "title": "developers, developers, developers, developers", - "banner": "developersdevelopersdevelopers.webp", - "content": "this update features a TON of improvements.\n\ndevelopers, you now can rely on cobalt for getting content from social media. the api has been revamped and documentation is now available. you can read more about API changes down below. go crazy, and have fun :D\n\nif you're not a developer, here's a list of changes that you probably care about:\n- rate limit is now approximately 8 times bigger. no more waiting, even if you want to download entirety of your tiktok \"for you\" page.\n- some updates will now have expressive banners, just like this one.\n- fixed what was causing an error when a youtube video had no description.\n- mp4 format button text should now be displayed properly, no matter if you touched the switcher or not.\n\nnext, the star of this update — improved api!\n- main endpoint now uses POST method instead of GET.\n- internal variables for preferences have been updated to be consistent and easier to understand.\n- ip address is now hashed right upon request, not somewhere deep inside the code.\n- global stream salt variable is no longer unnecessarily passed over a billion functions.\n- url and picker keys are now separate in the json response.\n- cobalt web app now correctly processes responses with \"success\" status.\n\nif you currently have a siri shortcut or some other script that uses the GET method, make sure to update it soon. this method is deprecated, limited, and will be removed entirely in coming updates.\n\nif you ever make something using cobalt's api, make sure to mention @justusecobalt on twitter, i would absolutely love to see what you made." + "banner": { + "file": "developers.webp", + "width": 640, + "height": 360 + }, + "content": "this update features a TON of improvements.\n\ndevelopers, you now can rely on cobalt for getting content from social media. the api has been revamped and documentation is now available. you can read more about API changes down below. go crazy, and have fun :D\n\nif you're not a developer, here's a list of changes that you probably care about:\n- rate limit is now approximately 8 times bigger. no more waiting, even if you want to download entirety of your tiktok \"for you\" page.\n- some updates will now have expressive banners, just like this one.\n- fixed what was causing an error when a youtube video had no description.\n- mp4 format button text should now be displayed properly, no matter if you touched the switcher or not.\n\nnext, the star of this update — improved api!\n- main endpoint now uses POST method instead of GET.\n- internal variables for preferences have been updated to be consistent and easier to understand.\n- ip address is now hashed right upon request, not somewhere deep inside the code.\n- global stream salt variable is no longer unnecessarily passed over a billion functions.\n- url and picker keys are now separate in the json response.\n- cobalt web app now correctly processes responses with \"success\" status.\n\nif you currently have a siri shortcut or some other script that uses the GET method, make sure to update it soon. this method is deprecated, limited, and will be removed entirely in coming updates.\n\nif you ever make something using cobalt's api, make sure to mention @justusecobalt on twitter, i would absolutely love to see what you made." }, { "version": "4.2", "title": "optimized quality picking and 8k video support", @@ -80,7 +144,7 @@ }, { "version": "4.0", "title": "better and faster than ever", - "content": "this update has a ton of improvements and new features.\n\nchanges you probably care about:\n- cobalt now has support for recorded twitter spaces! download the previous conversation no matter how long it was.\n- download speeds from youtube are at least 10 times better now. you're welcome.\n- both video and audio length limits have been extended to 2 hours.\n- audio downloads from youtube, youtube music, twitter spaces, and soundcloud now have metadata! most often it's just title and artist, but when cobalt is able to get more info, it adds that metadata too.\n- tiktok downloads have been fixed, yet again, and if they ever break in the future, cobalt will fall back to downloading a less annoyingly watermarked video.\n- soundcloud downloads have been fixed, too.\n\nless notable changes:\n- currently experimenting with using mp3 as default audio format. if you set something other than mp3 before, it'll be set to mp3. you can always change it back in settings. let me know what you think about this.\n- \"download audio\" button from image picker no longer stays on the screen after popup was closed.\n- clipboard button now shows up depending on your browser's support for it.\n- you can no longer manually hide the clipboard button, 'cause it's unnecessary.\n- small internal improvements such as separation of changelog version and title.\n- fair bit of internal clean up.\n\nif you want to help me implement covers for downloaded audios, you can do it on github." + "content": "this update has a ton of improvements and new features.\n\nchanges you probably care about:\n- cobalt now has support for recorded twitter spaces! download the previous conversation no matter how long it was.\n- download speeds from youtube are at least 10 times better now. you're welcome.\n- both video and audio length limits have been extended to 2 hours.\n- audio downloads from youtube, youtube music, twitter spaces, and soundcloud now have metadata! most often it's just title and artist, but when cobalt is able to get more info, it adds that metadata too.\n- tiktok downloads have been fixed, yet again, and if they ever break in the future, cobalt will fall back to downloading a less annoyingly watermarked video.\n- soundcloud downloads have been fixed, too.\n\nless notable changes:\n- currently experimenting with using mp3 as default audio format. if you set something other than mp3 before, it'll be set to mp3. you can always change it back in settings. let me know what you think about this.\n- \"download audio\" button from image picker no longer stays on the screen after popup was closed.\n- clipboard button now shows up depending on your browser's support for it.\n- you can no longer manually hide the clipboard button, 'cause it's unnecessary.\n- small internal improvements such as separation of changelog version and title.\n- fair bit of internal clean up.\n\nif you want to help me implement covers for downloaded audios, you can do it on github." }, { "version": "3.7", "title": "support for multi media tweets is here!", @@ -96,7 +160,7 @@ }, { "version": "3.5.4", "title": "tiktok support is back :D", - "content": "you can download videos, sounds, and images from tiktok again!\nhuge thank you to @minzique for finding another api endpoint that works." + "content": "you can download videos, sounds, and images from tiktok again!\nhuge thank you to @minzique for finding another api endpoint that works." }, { "version": "3.5.2", "title": "vk clips support, improved changelog system, and less bugs", diff --git a/src/modules/changelog/changelogManager.js b/src/modules/changelog/changelogManager.js index 306c6e1..40ddc5a 100644 --- a/src/modules/changelog/changelogManager.js +++ b/src/modules/changelog/changelogManager.js @@ -6,19 +6,33 @@ let changelog = loadJSON('./src/modules/changelog/changelog.json') export default function(string) { try { switch (string) { + case "version": + return `v.${changelog["current"]["version"]}${ + changelog["current"]["date"] ? `· ${changelog["current"]["date"]}` : '' + }` case "title": - return `${changelog["current"]["version"]}: ${replaceBase(changelog["current"]["title"])}`; + return replaceBase(changelog["current"]["title"]); case "banner": - return changelog["current"]["banner"] ? `updateBanners/${changelog["current"]["banner"]}` : false; + return changelog["current"]["banner"] ? { + url: `updateBanners/${changelog["current"]["banner"]["file"]}`, + width: changelog["current"]["banner"]["width"], + height: changelog["current"]["banner"]["height"] + } : false; case "content": return replaceBase(changelog["current"]["content"]); case "history": return changelog["history"].map((i) => { return { - title: `${i["version"]}: ${replaceBase(i["title"])}`, + title: replaceBase(i["title"]), + version: `v.${i["version"]}${ + i["date"] ? `· ${i["date"]}` : '' + }`, content: replaceBase(i["content"]), - version: i["version"], - banner: i["banner"] ? `updateBanners/${i["banner"]}` : false, + banner: i["banner"] ? { + url: `updateBanners/${i["banner"]["file"]}`, + width: i["banner"]["width"], + height: i["banner"]["height"] + } : false, } }); default: diff --git a/src/modules/config.js b/src/modules/config.js index 00b9566..5268b8d 100644 --- a/src/modules/config.js +++ b/src/modules/config.js @@ -6,7 +6,6 @@ const servicesConfigJson = loadJson("./src/modules/processing/servicesConfig.jso export const services = servicesConfigJson.config, audioIgnore = servicesConfigJson.audioIgnore, - appName = packageJson.name, version = packageJson.version, streamLifespan = config.streamLifespan, maxVideoDuration = config.maxVideoDuration, diff --git a/src/modules/emoji.js b/src/modules/emoji.js index 740c2b4..c019037 100644 --- a/src/modules/emoji.js +++ b/src/modules/emoji.js @@ -26,7 +26,14 @@ const names = { "👾": "alien_monster", "😿": "cat_crying", "🙀": "cat_flabbergasted", - "🐱": "cat_smile" + "🐱": "cat_smile", + "❤️‍🩹": "mending_heart", + "🔒": "locked", + "🔍": "magnifying_glass", + "🔗": "link", + "⌨": "keyboard", + "📑": "boring_document", + "🧮": "abacus" } let sizing = { 18: 0.8, diff --git a/src/modules/pageRender/elements.js b/src/modules/pageRender/elements.js index dd9861a..66e6de1 100644 --- a/src/modules/pageRender/elements.js +++ b/src/modules/pageRender/elements.js @@ -1,13 +1,23 @@ import { celebrations } from "../config.js"; import emoji from "../emoji.js"; +export const backButtonSVG = ` + +` + +export const dropdownSVG = ` + +` + export function switcher(obj) { let items = ``; if (obj.name === "download") { items = obj.items; } else { for (let i = 0; i < obj.items.length; i++) { - let classes = obj.items[i]["classes"] ? obj.items[i]["classes"] : [] + 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 += `` } } @@ -19,26 +29,18 @@ export function switcher(obj) { ${obj.explanation ? `
${obj.explanation}
` : ``} ` } +export function checkbox(obj) { + let paddings = ["bottom-margin", "top-margin", "no-margin", "top-margin-only"]; + let checkboxes = ``; + for (let i = 0; i < obj.length; i++) { + let paddingClass = obj[i].padding && paddings.includes(obj[i].padding) ? ` ${obj[i].padding}` : ''; -export function checkbox(action, text, paddingType, aria) { - let paddingClass = ` ` - switch (paddingType) { - case 1: - paddingClass += "bottom-margin" - break; - case 2: - paddingClass += "top-margin" - break; - case 3: - paddingClass += "no-margin" - break; - case 4: - paddingClass += "top-margin-only" + checkboxes += `` } - return `` + return checkboxes } export function sep(paddingType) { let paddingClass = `` @@ -50,7 +52,7 @@ export function sep(paddingType) { return `
` } export function popup(obj) { - let classes = obj.classes ? obj.classes : [] + let classes = obj.classes ? obj.classes : []; let body = obj.body; if (Array.isArray(obj.body)) { body = `` @@ -65,46 +67,57 @@ export function popup(obj) { } } return ` - ${obj.standalone ? `