admin/cobalt
1
0
Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

biblically accurate HTML and clean up

Browse Source 
merge pull request #317 from dumbmoron/html-cleanup
This commit is contained in:
wukko
2024-01-17 17:17:57 +06:00
committed by GitHub
parent 93c329c52f 2acbbadbcb
commit 2332c18cee
14 changed files with 166 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/modules/changelog/changelog.json
View File

@@ -5,6 +5,7 @@
"title": "new years clean up! bug fixes and fresh look for the home page",
"banner": {
"file": "catroomba.webp",
"alt": "a cat riding a roomba vacuum",
"width": 300,
"height": 168
},
@@ -16,6 +17,7 @@
"title": "bugfixes and better downloads!",
"banner": {
"file": "meowthpolishegg.webp",
"alt": "meowth polishing a togepi egg",
"width": 640,
"height": 480
},
@@ -26,6 +28,7 @@
"title": "customizable file names, instagram stories, and first cobalt sponsor!",
"banner": {
"file": "meowthcenter.webp",
"alt": "meowth plush in a datacenter wearing a hardhat, wielding a hammer",
"width": 851,
"height": 640
},
@@ -36,6 +39,7 @@
"title": "support for twitch clips and rutube!",
"banner": {
"file": "twitchupdate.webp",
"alt": "meowth plush staring into the camera, laptop with generic purple service in the background",
"width": 851,
"height": 640
},
@@ -46,6 +50,7 @@
"title": "new domain, what's coming in future, bug fixes, and more!",
"banner": {
"file": "newdomain.webp",
"alt": "text: new domain, same cobalt",
"width": 960,
"height": 540
},
@@ -56,6 +61,7 @@
"title": "extended video length limit, metadata toggle, ui improvements, and more!",
"banner": {
"file": "meowthsnap.webp",
"alt": "cartoon meowth pointing paw dramatically and saying something",
"width": 500,
"height": 280
},
@@ -66,6 +72,7 @@
"title": "instagram, streamable, video metadata, and more!",
"banner": {
"file": "meowthproductions.webp",
"alt": "meowth roaring in a fancy circle, à la MGM studios intro",
"width": 640,
"height": 358
},
@@ -76,6 +83,7 @@
"title": "biggest ui refresh yet!",
"banner": {
"file": "meowthcooking.webp",
"alt": "meowth handling orders in a restaurant",
"width": 640,
"height": 360
},
@@ -86,6 +94,7 @@
"title": "all network issues have been fixed!",
"banner": {
"file": "meowthhammer.webp",
"alt": "meowth plush holding a hammer in real life",
"width": 1280,
"height": 827
},
@@ -96,6 +105,7 @@
"title": "better reliability, new infrastructure, pinterest support, and way more!",
"banner": {
"file": "catswitchboxes.webp",
"alt": "a cat climbing into two empty boxes of asahi beer",
"width": 600,
"height": 314
},
@@ -105,6 +115,7 @@
"title": "instagram support, docker, and more!",
"banner": {
"file": "catphonestand.webp",
"alt": "a cat holding a phone under its chin while a person plays clash of clans on it",
"width": 451,
"height": 272
},
@@ -114,6 +125,7 @@
"title": "better looks, better feel",
"banner": {
"file": "cattired.webp",
"alt": "a cat laying on a sofa face down, wiggling its tail",
"width": 640,
"height": 286
},
@@ -123,6 +135,7 @@
"title": "fastest one in the game",
"banner": {
"file": "catspeed.webp",
"alt": "a cat running very fast in an exercise wheel",
"width": 640,
"height": 356
},
@@ -132,6 +145,7 @@
"title": "the evil has been defeated",
"banner": {
"file": "happymeowth.webp",
"alt": "meowth jumping up into the sky very excitedly",
"width": 500,
"height": 330
},
@@ -141,6 +155,7 @@
"title": "it's all about attention to detail!",
"banner": {
"file": "valentines.webp",
"alt": "relaxed meowth with sakura petals falling in front of them",
"width": 489,
"height": 374
},
@@ -150,6 +165,7 @@
"title": "prettier than ever",
"banner": {
"file": "catmakeup.webp",
"alt": "a cat being brushed with a powder makeup brush",
"width": 394,
"height": 266
},
@@ -159,6 +175,7 @@
"title": "we're better together! thank you for bug reports.",
"banner": {
"file": "bettertogether.webp",
"alt": "various different pokémon jumping in happiness",
"width": 640,
"height": 358
},
@@ -168,6 +185,7 @@
"title": "mute videos and proper soundcloud support",
"banner": {
"file": "shutup.webp",
"alt": "a cat yawning, with a crossed out loudspeaker icon next to it",
"width": 1024,
"height": 665
},
@@ -177,6 +195,7 @@
"title": "better, faster, stronger, stable",
"banner": {
"file": "meowthstrong.webp",
"alt": "meowth stretching",
"width": 500,
"height": 280
},
@@ -186,6 +205,7 @@
"title": "over 1 million monthly requests. thank you.",
"banner": {
"file": "onemillionr.webp",
"alt": "cobalt logo and a confetti emoji",
"width": 1441,
"height": 1441
},
@@ -199,6 +219,7 @@
"title": "developers, developers, developers, developers",
"banner": {
"file": "developers.webp",
"alt": "steve ballmer going \"developers, developers, developers\"",
"width": 640,
"height": 360
},

36
src/modules/changelog/changelogManager.js
View File

@@ -5,33 +5,35 @@ let changelog = loadJSON('./src/modules/changelog/changelog.json')
export default function(string) {
try {
const currentChangelog = changelog.current;
switch (string) {
case "version":
return `<span class="text-backdrop changelog-tag-version">v.${changelog["current"]["version"]}</span>${
changelog["current"]["date"] ? `<span class="changelog-tag-date">· ${changelog["current"]["date"]}</span>` : ''
return `<span class="text-backdrop changelog-tag-version">v.${currentChangelog.version}</span>${
currentChangelog.date ? `<span class="changelog-tag-date">· ${currentChangelog.date}</span>` : ''
}`
case "title":
return replaceBase(changelog["current"]["title"]);
return replaceBase(currentChangelog.title);
case "banner":
return changelog["current"]["banner"] ? {
url: `updateBanners/${changelog["current"]["banner"]["file"]}`,
width: changelog["current"]["banner"]["width"],
height: changelog["current"]["banner"]["height"]
const currentBanner = changelog.current.banner;
return currentBanner ? {
...currentBanner,
url: `updateBanners/${currentBanner.file}`
} : false;
case "content":
return replaceBase(changelog["current"]["content"]);
return replaceBase(currentChangelog.content);
case "history":
return changelog["history"].map((i) => {
return changelog.history.map((log) => {
const banner = log.banner;
return {
title: replaceBase(i["title"]),
version: `<span class="text-backdrop changelog-tag-version">v.${i["version"]}</span>${
i["date"] ? `<span class="changelog-tag-date">· ${i["date"]}</span>` : ''
title: replaceBase(log.title),
version: `<span class="text-backdrop changelog-tag-version">v.${log.version}</span>${
log.date ? `<span class="changelog-tag-date">· ${log.date}</span>` : ''
}`,
content: replaceBase(i["content"]),
banner: i["banner"] ? {
url: `updateBanners/${i["banner"]["file"]}`,
width: i["banner"]["width"],
height: i["banner"]["height"]
content: replaceBase(log.content),
banner: banner ? {
...banner,
url: `updateBanners/${banner.file}`
} : false,
}
});

2
src/modules/emoji.js
View File

@@ -62,5 +62,5 @@ export default function(emoji, size, disablePadding, fluent) {
let filePath = `emoji/${names[emoji]}.svg`;
if (fluent) filePath = `emoji/3d/${names[emoji]}.svg`;
return `<img class="emoji" draggable=false height="${size}" width="${size}" ${padding ? `style="${padding}"` : ''}alt="${emoji}" src="${filePath}" loading="lazy">`
return `<img class="emoji" draggable=false height="${size}" width="${size}" ${padding ? `style="${padding}" ` : ''}alt="${emoji}" src="${filePath}" loading="lazy">`
}

46
src/modules/pageRender/elements.js
View File

@@ -59,27 +59,27 @@ export function popup(obj) {
body = ``
for (let i = 0; i < obj.body.length; i++) {
if (obj.body[i]["text"].length > 0) {
classes = obj.body[i]["classes"] ? obj.body[i]["classes"] : []
classes = obj.body[i]["classes"] ?? []
if (i !== obj.body.length - 1 && !obj.body[i]["nopadding"]) {
classes.push("desc-padding")
}
body += obj.body[i]["raw"] ? obj.body[i]["text"] : `<div id="popup-desc" class="${classes.length > 0 ? classes.join(' ') : ''}">${obj.body[i]["text"]}</div>`
body += obj.body[i]["raw"] ? obj.body[i]["text"] : `<div class="${['popup-desc', ...classes].join(' ')}">${obj.body[i]["text"]}</div>`
}
}
}
return `
${obj.standalone ? `<div id="popup-${obj.name}" class="popup center${!obj.buttonOnly ? " box" : ''}${classes.length > 0 ? ' ' + classes.join(' ') : ''}">` : ''}
<div id="popup-header" class="popup-header">
<div id="popup-header-contents">
<div class="popup-header">
<div class="popup-header-contents">
${obj.buttonOnly ? obj.header.emoji : ``}
${obj.header.aboveTitle ? `<a id="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
${obj.header.title ? `<div id="popup-title">${obj.header.title}</div>` : ''}
${obj.header.aboveTitle ? `<a class="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
${obj.header.title ? `<div class="popup-title">${obj.header.title}</div>` : ''}
${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''}
</div>
${!obj.buttonOnly ? `<div class="glass-bkg alone"></div>` : ''}
</div>
<div id="popup-content" class="popup-content-inner">
${body}${obj.buttonOnly ? `<button id="close-error" class="switch" onclick="popup('${obj.name}', 0)">${obj.buttonText}</button>` : ''}
<div class="popup-content popup-content-inner">
${body}${obj.buttonOnly ? `<button class="close-error switch" onclick="popup('${obj.name}', 0)">${obj.buttonText}</button>` : ''}
</div>
${classes.includes("small") ? `<div class="glass-bkg small"></div>` : ''}
${obj.standalone ? `</div>` : ''}`
@@ -87,7 +87,7 @@ export function popup(obj) {
export function multiPagePopup(obj) {
let tabs = `
<button id="back-button" class="switch tab-${obj.name}" onclick="popup('${obj.name}', 0)" ${obj.closeAria ? `aria-label="${obj.closeAria}"` : ''}>
<button class="back-button switch tab-${obj.name}" onclick="popup('${obj.name}', 0)" ${obj.closeAria ? `aria-label="${obj.closeAria}"` : ''}>
${backButtonSVG}
</button>`;
@@ -99,16 +99,16 @@ export function multiPagePopup(obj) {
return `
<div id="popup-${obj.name}" class="popup center box scrollable">
<div id="popup-content">
${obj.header ? `<div id="popup-header" class="popup-header">
<div id="popup-header-contents">
${obj.header.aboveTitle ? `<a id="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
${obj.header.title ? `<div id="popup-title">${obj.header.title}</div>` : ''}
<div class="popup-content">
${obj.header ? `<div class="popup-header">
<div class="popup-header-contents">
${obj.header.aboveTitle ? `<a class="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
${obj.header.title ? `<div class="popup-title">${obj.header.title}</div>` : ''}
${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''}
</div>
<div class="glass-bkg alone"></div>
</div>` : ''}${tabContent}</div>
<div id="popup-tabs" class="switches popup-tabs">
<div class="switches popup-tabs">
<div class="switches popup-tabs-child">${tabs}</div>
<div class="glass-bkg alone"></div>
</div>
@@ -131,7 +131,7 @@ export function collapsibleList(arr) {
}
export function popupWithBottomButtons(obj) {
let tabs = `
<button id="back-button" class="switch tab-${obj.name}" onclick="popup('${obj.name}', 0)" ${obj.closeAria ? `aria-label="${obj.closeAria}"` : ''}>
<button class="back-button switch tab-${obj.name}" onclick="popup('${obj.name}', 0)" ${obj.closeAria ? `aria-label="${obj.closeAria}"` : ''}>
${backButtonSVG}
</button>`
@@ -140,17 +140,17 @@ export function popupWithBottomButtons(obj) {
}
return `
<div id="popup-${obj.name}" class="popup center box scrollable">
<div id="popup-content">
${obj.header ? `<div id="popup-header" class="popup-header">
<div id="popup-header-contents">
${obj.header.aboveTitle ? `<a id="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
${obj.header.title ? `<div id="popup-title">${obj.header.title}</div>` : ''}
<div class="popup-content">
${obj.header ? `<div class="popup-header">
<div class="popup-header-contents">
${obj.header.aboveTitle ? `<a class="popup-above-title" target="_blank" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
${obj.header.title ? `<div class="popup-title">${obj.header.title}</div>` : ''}
${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''}
${obj.header.explanation ? `<div class="explanation">${obj.header.explanation}</div>` : ''}
</div>
<div class="glass-bkg alone"></div>
</div>` : ''}${obj.content}</div>
<div id="popup-tabs" class="switches popup-tabs">
<div class="switches popup-tabs">
<div id="picker-buttons" class="switches popup-tabs-child">${tabs}</div>
<div class="glass-bkg alone"></div>
</div>
@@ -171,7 +171,7 @@ export function socialLinks(lang) {
}
export function settingsCategory(obj) {
return `<div id="settings-${obj.name}" class="settings-category">
<div class="category-title">${obj.title ? obj.title : obj.name}</div>
<div class="category-title">${obj.title ?? obj.name}</div>
<div class="category-content">${obj.body}</div>
</div>`
}

9
src/modules/pageRender/onDemand.js
View File

@@ -17,14 +17,15 @@ export function changelogHistory() { // blockId 0
`<div class="changelog-banner">
<img class="changelog-img" ` +
`src="${history[i]["banner"]["url"]}" ` +
`alt="${history[i]["banner"]["alt"].replaceAll('"', '&quot;')}" ` +
`width="${history[i]["banner"]["width"]}" ` +
`height="${history[i]["banner"]["height"]}" ` +
`onerror="this.style.opacity=0" loading="lazy">`+
`</img>
`
</div>` : ''}
<div id="popup-desc" class="changelog-tags">${history[i]["version"]}</div>
<div id="popup-desc" class="changelog-subtitle">${history[i]["title"]}</div>
<div id="popup-desc" class="desc-padding">${history[i]["content"]}</div>`
<div class="popup-desc changelog-tags">${history[i]["version"]}</div>
<div class="popup-desc changelog-subtitle">${history[i]["title"]}</div>
<div class="popup-desc desc-padding">${history[i]["content"]}</div>`
}
render = cleanHTML(render);
cache['0'] = render;

88
src/modules/pageRender/page.js
View File

@@ -43,36 +43,40 @@ export default function(obj) {
<!DOCTYPE html>
<html lang="${obj.lang}">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="viewport-fit=cover, width=device-width, height=device-height, initial-scale=1, maximum-scale=${isIOS ? `1` : `5`}" />
<meta charset="utf-8">
<meta name="viewport" content="viewport-fit=cover, width=device-width, height=device-height, initial-scale=1, maximum-scale=${isIOS ? `1` : `5`}">
<title>${t("AppTitleCobalt")}</title>
<meta property="og:url" content="${process.env.webURL || process.env.selfURL}" />
<meta property="og:title" content="${t("AppTitleCobalt")}" />
<meta property="og:description" content="${t('EmbedBriefDescription')}" />
<meta property="og:image" content="${process.env.webURL || process.env.selfURL}icons/generic.png" />
<meta name="title" content="${t("AppTitleCobalt")}" />
<meta name="description" content="${t('AboutSummary')}" />
<meta name="theme-color" content="#000000" />
<meta name="twitter:card" content="summary" />
<meta property="og:url" content="${process.env.webURL}">
<meta property="og:title" content="${t("AppTitleCobalt")}">
<meta property="og:description" content="${t('EmbedBriefDescription')}">
<meta property="og:image" content="${process.env.webURL}icons/generic.png">
<meta name="title" content="${t("AppTitleCobalt")}">
<meta name="description" content="${t('AboutSummary')}">
<meta name="theme-color" content="#000000">
<meta name="twitter:card" content="summary">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="apple-mobile-web-app-title" content="${t("AppTitleCobalt")}">
<link rel="icon" type="image/x-icon" href="icons/favicon.ico" />
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png" />
<link rel="icon" type="image/x-icon" href="icons/favicon.ico">
<link rel="icon" type="image/png" sizes="32x32" href="icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="icons/favicon-16x16.png">
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png" />
<link rel="apple-touch-icon" sizes="180x180" href="icons/apple-touch-icon.png">
<link rel="manifest" href="manifest.webmanifest">
<link rel="preload" href="fonts/notosansmono.css" as="style">
<link rel="stylesheet" href="fonts/notosansmono.css">
<link rel="stylesheet" href="cobalt.css">
<link rel="manifest" href="manifest.webmanifest" />
<link rel="stylesheet" href="fonts/notosansmono.css" rel="preload" />
<link rel="stylesheet" href="cobalt.css" />
</head>
<body id="cobalt-body" ${platform === "d" ? 'class="desktop"' : ''} data-nosnippet ontouchstart>
<noscript>${t('NoScriptMessage')}</noscript>
<body id="cobalt-body" ${platform === "d" ? 'class="desktop"' : ''} data-nosnippet>
<noscript>
<div style="margin: 2rem;">${t('NoScriptMessage')}</div>
</noscript>
${multiPagePopup({
name: "about",
closeAria: t('AccessibilityGoBack'),
@@ -145,10 +149,10 @@ export default function(obj) {
body: `${t("SupportSelfTroubleshooting")}`
+ `${socialLink(emoji("📢"), t("StatusPage"), links.statusPage)}`
+ `${socialLink(emoji("🔧"), t("TroubleshootingGuide"), links.troubleshootingGuide)}`
+ `<br/>`
+ `<br>`
+ `${t("FollowSupport")}`
+ `${socialLinks(obj.lang)}`
+ `<br/>`
+ `<br>`
+ `${t("SourceCode")}`
+ `${socialLink(emoji("🐙"), repo.replace("https://github.com/", ''), repo)}`
}, {
@@ -185,15 +189,18 @@ export default function(obj) {
text: `<div class="category-title">${t('ChangelogLastMajor')}</div>`,
raw: true
}, {
text: changelogManager("banner") ?
`<div class="changelog-banner">
<img class="changelog-img" ` +
`src="${changelogManager("banner")["url"]}" ` +
`width="${changelogManager("banner")["width"]}" ` +
`height="${changelogManager("banner")["height"]}" ` +
`onerror="this.style.opacity=0" loading="lazy">`+
`</img>
</div>`: '',
text: (() => {
const banner = changelogManager('banner');
if (!banner) return '';
return `<div class="changelog-banner">
<img class="changelog-img" ` +
`src="${banner.url}" ` +
`alt="${banner.alt.replaceAll('"', '&quot;')}" ` +
`width="${banner.width}" ` +
`height="${banner.height}" ` +
`onerror="this.style.opacity=0" loading="lazy">
</div>`;
})(),
raw: true
}, {
text: changelogManager("version"),
@@ -242,13 +249,14 @@ export default function(obj) {
text: `<div class="category-title">${t('DonateSub')}</div>`,
raw: true
}, {
text: `<div class="changelog-banner">
text: `
<div class="changelog-banner">
<img class="changelog-img" ` +
`src="updateBanners/catsleep.webp"` +
`src="updateBanners/catsleep.webp" ` +
`alt="${t("DonateImageDescription")}" ` +
`width="480" ` +
`height="270" ` +
`onerror="this.style.opacity=0" loading="lazy">`+
`</img>
`onerror="this.style.opacity=0" loading="lazy">
</div>`,
raw: true
}, {
@@ -319,7 +327,7 @@ export default function(obj) {
})
})
+ settingsCategory({
name: "tiktok",
name: "tiktok-watermark",
title: "tiktok",
body: checkbox([{
action: "disableTikTokWatermark",
@@ -405,7 +413,7 @@ export default function(obj) {
})
})
+ settingsCategory({
name: "tiktok",
name: "tiktok-audio",
title: "tiktok",
body: checkbox([{
action: "fullTikTokAudio",
@@ -578,9 +586,9 @@ export default function(obj) {
<div id="download-area">
<div id="top">
<div id="link-icon">${linkSVG}</div>
<input id="url-input-area" class="mono" type="text" autocorrect="off" maxlength="256" autocapitalize="off" placeholder="${t('LinkInput')}" aria-label="${t('AccessibilityInputArea')}" oninput="button()"></input>
<input id="url-input-area" class="mono" type="text" autocomplete="off" spellcheck="false" maxlength="256" autocapitalize="off" placeholder="${t('LinkInput')}" aria-label="${t('AccessibilityInputArea')}" oninput="button()">
<button id="url-clear" onclick="clearInput()" style="display:none;">x</button>
<input id="download-button" class="mono dontRead" onclick="download(document.getElementById('url-input-area').value)" type="submit" value="" disabled=true aria-label="${t('AccessibilityDownloadButton')}">
<input id="download-button" class="mono dontRead" onclick="download(document.getElementById('url-input-area').value)" type="submit" value="" disabled aria-label="${t('AccessibilityDownloadButton')}">
</div>
<div id="bottom">
<button id="paste" class="switch" onclick="pasteClipboard()" aria-label="${t('PasteFromClipboard')}">${emoji("📋", 22)} ${t('PasteFromClipboard')}</button>
@@ -618,7 +626,7 @@ export default function(obj) {
}])}
</footer>
</div>
<script type="text/javascript">
<script>
let defaultApiUrl = '${process.env.apiURL ? process.env.apiURL : ''}';
const loc = ${webLoc(t,
[
@@ -642,7 +650,7 @@ export default function(obj) {
'FilenamePreviewAudioAuthor'
])}
</script>
<script type="text/javascript" src="cobalt.js"></script>
<script src="cobalt.js"></script>
</body>
</html>
`

2
src/modules/stream/manage.js
View File

@@ -43,7 +43,7 @@ export function createStream(obj) {
exp = streamInfo.exp;
ghmac = streamInfo.hmac;
}
return `${process.env.apiURL || process.env.selfURL}api/stream?t=${streamID}&e=${exp}&h=${ghmac}`;
return `${process.env.apiURL}api/stream?t=${streamID}&e=${exp}&h=${ghmac}`;
}
export function verifyStream(id, hmac, exp) {