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

3.0

Browse Source 
probably the biggest update in history of cobalt
This commit is contained in:
wukko
2022-08-12 19:36:19 +06:00
parent 2fae43d890
commit 54c14232d5
42 changed files with 896 additions and 385 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
src/modules/pageRender/elements.js Normal file
View File

@@ -0,0 +1,95 @@
export function switcher(obj) {
let items = ``;
switch(obj.name) {
case "download":
items = obj.items;
break;
default:
for (let i = 0; i < obj.items.length; i++) {
let classes = obj.items[i]["classes"] ? obj.items[i]["classes"] : []
items += `<button id="${obj.name}-${obj.items[i]["action"]}" class="switch${classes.length > 0 ? ' ' + classes.join(' ') : ''}" onclick="changeSwitcher('${obj.name}', '${obj.items[i]["action"]}')">${obj.items[i]["text"] ? obj.items[i]["text"] : obj.items[i]["action"]}</button>`
}
break;
}
return `
<div id="${obj.name}-switcher" class="switch-container">
${obj.subtitle ? `<div class="subtitle">${obj.subtitle}</div>` : ``}
<div class="switches">${items}</div>
${obj.explanation ? `<div class="explanation">${obj.explanation}</div>` : ``}
</div>`
}
export function checkbox(action, text, aria) {
return `<label class="checkbox">
<input id="${action}" type="checkbox" ${aria ? `aria-label="${aria}"` : ''} onclick="checkbox('${action}')">
<span>${text}</span>
</label>`
}
export function popup(obj) {
let classes = obj.classes ? obj.classes : []
let body = obj.body;
if (Array.isArray(obj.body)) {
body = ``
for (let i = 0; i < obj.body.length; i++) {
let classes = obj.body[i]["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>`
}
}
return `
${!obj.embed ? `<div id="popup-${obj.name}" class="popup center box${classes.length > 0 ? ' ' + classes.join(' ') : ''}" style="visibility: hidden;">`: ''}
<div id="popup-header" class="popup-header">
${!obj.embed ? `<button id="popup-close" class="button mono" onclick="popup('${obj.name}', 0)" ${obj.header.closeAria ? `aria-label="${obj.header.closeAria}"` : ''}>x</button>`: ''}
${obj.header.aboveTitle ? `<a id="popup-above-title" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
${obj.header.title ? `<div id="popup-title">${obj.header.title}</div>` : ''}
${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''}
</div>
<div id="popup-content"${obj.footer ? ' class="with-footer"' : ''}>${body}</div>
${obj.footer ? `<div id="popup-footer" class="popup-footer">
<a id="popup-bottom" class="popup-footer-content" href="${obj.footer.url}">${obj.footer.text}</a>
</div>` : ''}
${!obj.embed ? `</div>`: ''}`
}
export function multiPagePopup(obj) {
let tabs = ``
let tabContent = ``
for (let i = 0; i < obj.tabs.length; i++) {
tabs += `<button id="tab-button-${obj.name}-${obj.tabs[i]["name"]}" class="switch tab tab-${obj.name}" onclick="changeTab(event, 'tab-${obj.name}-${obj.tabs[i]["name"]}', '${obj.name}')">${obj.tabs[i]["title"]}</button>`
tabContent += `<div id="tab-${obj.name}-${obj.tabs[i]["name"]}" class="popup-tab-content tab-content-${obj.name}">${obj.tabs[i]["content"]}</div>`
}
tabs += `<button id="close-bottom" class="switch tab-${obj.name}" onclick="popup('${obj.name}', 0)" ${obj.closeAria ? `aria-label="${obj.closeAria}"` : ''}>x</button>`
return `
<div id="popup-${obj.name}" class="popup center box scrollable" style="visibility: hidden;">
<div id="popup-content">${obj.header ? `<div id="popup-header" class="popup-header">
${obj.header.aboveTitle ? `<a id="popup-above-title" href="${obj.header.aboveTitle.url}">${obj.header.aboveTitle.text}</a>` : ''}
${obj.header.title ? `<div id="popup-title">${obj.header.title}</div>` : ''}
${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''}</div>`: ''}${tabContent}</div>
<div id="popup-tabs" class="switches popup-tabs">${tabs}</div>
</div>`
}
export function backdropLink(link, text) {
return `<a class="text-backdrop" href="${link}" target="_blank">${text}</a>`
}
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="settings-category-content">${obj.body}</div>
</div>`
}
export function footerButtons(obj) {
let items = ``
for (let i = 0; i < obj.length; i++) {
let func = `${obj[i]["type"] == "toggle" ? `toggle('${obj[i]["name"]}')` : `popup('${obj[i]["name"]}', 1)`}`
items += `<button id="${obj[i]["name"]}" class="button footer-button" onclick="${func}" aria-label="${obj[i]["aria"]}">${obj[i]["icon"]}</button> `
}
return `
<div id="footer-buttons">${items}</div>`
}

291
src/modules/pageRender/page.js Normal file
View File

@@ -0,0 +1,291 @@
import { services, appName, authorInfo, version, quality, repo, donations, supportedAudio } from "../config.js";
import { getCommitInfo } from "../sub/currentCommit.js";
import loc from "../../localization/manager.js";
import { backdropLink, checkbox, footerButtons, multiPagePopup, popup, settingsCategory, switcher } from "./elements.js";
import emoji from "../emoji.js";
let s = services;
let com = getCommitInfo();
let enabledServices = Object.keys(s).filter((p) => {
if (s[p].enabled) return true;
}).sort().map((p) => {
return s[p].alias ? s[p].alias : p
}).join(', ')
let donate = ``
let donateLinks = ``
let audioFormats = supportedAudio.map((p) => {
return {"action": p}
})
audioFormats.unshift({ "action": "best" })
for (let i in donations["other"]) {
donateLinks += `<a id="don-${i}" class="switch autowidth" href="${donations["other"][i]}" target="_blank">${i}</a>`
}
let extr = ''
for (let i in donations["crypto"]) {
donate += `<div class="subtitle${extr}">${i} (REPLACEME)</div><div id="don-${i}" class="text-to-copy" onClick="copy('don-${i}')">${donations["crypto"][i]}</div>`
extr = ' extra'
}
export default function(obj) {
audioFormats[0]["text"] = loc(obj.lang, 'SettingsAudioFormatBest')
let isIOS = obj.useragent.toLowerCase().match("iphone os")
try {
return `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=${isIOS ? `1` : `5`}" />
<title>${appName}</title>
<meta property="og:url" content="${process.env.selfURL}" />
<meta property="og:title" content="${appName}" />
<meta property="og:description" content="${loc(obj.lang, 'EmbedBriefDescription')}" />
<meta property="og:image" content="${process.env.selfURL}icons/generic.png" />
<meta name="title" content="${appName}" />
<meta name="description" content="${loc(obj.lang, 'AboutSummary')}" />
<meta name="theme-color" content="#000000" />
<meta name="twitter:card" content="summary" />
<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="manifest" href="manifest.webmanifest" />
<link rel="stylesheet" href="cobalt.css" />
<link rel="stylesheet" href="fonts/notosansmono.css" />
<noscript><div style="margin: 2rem;">${loc(obj.lang, 'NoScriptMessage')}</div></noscript>
</head>
<body id="cobalt-body" data-nosnippet>
${multiPagePopup({
name: "about",
closeAria: loc(obj.lang, 'AccessibilityClosePopup'),
tabs: [{
name: "about",
title: `${emoji("🐲")} ${loc(obj.lang, 'AboutTab')}`,
content: popup({
embed: true,
name: "about",
header: {
aboveTitle: {
text: loc(obj.lang, 'MadeWithLove'),
url: authorInfo.link
},
closeAria: loc(obj.lang, 'AccessibilityClosePopup'),
title: loc(obj.lang, 'TitlePopupAbout')
},
body: [{
text: loc(obj.lang, 'AboutSummary')
}, {
text: `${loc(obj.lang, 'AboutSupportedServices')} ${enabledServices}.`
}, {
text: backdropLink(repo, loc(obj.lang, 'LinkGitHubIssues')),
classes: ["bottom-link"]
}]
})
}, {
name: "changelog",
title: `${emoji("🎉")} ${loc(obj.lang, 'ChangelogTab')}`,
content: popup({
embed: true,
name: "changelog",
header: {
closeAria: loc(obj.lang, 'AccessibilityClosePopup'),
title: `${emoji("🪄", 30)} ${loc(obj.lang, 'TitlePopupChangelog')}`
},
body: [{
text: `<div class="category-title">${loc(obj.lang, 'ChangelogLastMajor')}</div>`,
raw: true
}, {
text: loc('en', 'ChangelogContentTitle'),
classes: ["changelog-subtitle"],
nopadding: true
}, {
text: loc('en', 'ChangelogContent')
}, {
text: `<div class="category-title">${loc(obj.lang, 'ChangelogLastCommit')}</div>`,
raw: true
}, {
text: `${com[0]} (${obj.hash})`,
classes: ["changelog-subtitle"],
nopadding: true
}, {
text: com[1]
}, {
text: backdropLink(`${repo}/commits`, loc(obj.lang, 'LinkGitHubChanges')),
classes: ["bottom-link"]
}]
})
}, {
name: "donate",
title: `${emoji("💰")} ${loc(obj.lang, 'DonationsTab')}`,
content: popup({
embed: true,
name: "donate",
header: {
closeAria: loc(obj.lang, 'AccessibilityClosePopup'),
title: emoji("💸", 30) + loc(obj.lang, 'TitlePopupDonate'),
subtitle: loc(obj.lang, 'DonateSubtitle')
},
body: [{
text: donateLinks,
raw: true
}, {
text: loc(obj.lang, 'DonateLinksDescription'),
classes: ["explanation"]
}, {
text: donate.replace(/REPLACEME/g, loc(obj.lang, 'ClickToCopy'))
}, {
text: loc(obj.lang, 'DonateDescription'),
classes: ["explanation", "no-top-padding"]
}, {
text: backdropLink(authorInfo.contact, loc(obj.lang, 'LinkDonateContact')),
classes: ["bottom-link"]
}]
})
}],
})}
${multiPagePopup({
name: "settings",
closeAria: loc(obj.lang, 'AccessibilityClosePopup'),
header: {
aboveTitle: {
text: `v.${version} ~ ${obj.hash}`,
url: repo
},
title: `${emoji("⚙️", 30)} ${loc(obj.lang, 'TitlePopupSettings')}`
},
tabs: [{
name: "video",
title: `${emoji("🎬")} ${loc(obj.lang, 'SettingsVideoTab')}`,
content: settingsCategory({
name: "downloads",
title: loc(obj.lang, 'SettingsDownloadsSubtitle'),
body: switcher({
name: "quality",
subtitle: loc(obj.lang, 'SettingsQualitySubtitle'),
explanation: loc(obj.lang, 'SettingsQualityDescription'),
items: [{
"action": "max",
"text": loc(obj.lang, 'SettingsQualitySwitchMax')
}, {
"action": "hig",
"text": `${loc(obj.lang, 'SettingsQualitySwitchHigh')}(${quality.hig}p)`
}, {
"action": "mid",
"text": `${loc(obj.lang, 'SettingsQualitySwitchMedium')}(${quality.mid}p)`
}, {
"action": "low",
"text": `${loc(obj.lang, 'SettingsQualitySwitchLow')}(${quality.low}p)`
}]
})
}) + `${!isIOS ? checkbox("downloadPopup", loc(obj.lang, 'SettingsEnableDownloadPopup'), loc(obj.lang, 'AccessibilityEnableDownloadPopup')) : ''}`
+ settingsCategory({
name: "youtube",
body: switcher({
name: "ytFormat",
subtitle: loc(obj.lang, 'SettingsFormatSubtitle'),
explanation: loc(obj.lang, 'SettingsFormatDescription'),
items: [{
"action": "mp4"
}, {
"action": "webm"
}]
})
})
}, {
name: "audio",
title: `${emoji("🎶")} ${loc(obj.lang, 'SettingsAudioTab')}`,
content: settingsCategory({
name: "general",
title: loc(obj.lang, 'SettingsAudioTab'),
body: switcher({
name: "audioFormat",
subtitle: loc(obj.lang, 'SettingsFormatSubtitle'),
explanation: loc(obj.lang, 'SettingsAudioFormatDescription'),
items: audioFormats
})
})
}, {
name: "other",
title: `${emoji("🪅")} ${loc(obj.lang, 'SettingsOtherTab')}`,
content: settingsCategory({
name: "appearance",
title: loc(obj.lang, 'SettingsAppearanceSubtitle'),
body: switcher({
name: "theme",
subtitle: loc(obj.lang, 'SettingsThemeSubtitle'),
items: [{
"action": "auto",
"text": loc(obj.lang, 'SettingsThemeAuto')
},{
"action": "dark",
"text": loc(obj.lang, 'SettingsThemeDark')
},{
"action": "light",
"text": loc(obj.lang, 'SettingsThemeLight')
}]
})
}) + checkbox("alwaysVisibleButton", loc(obj.lang, 'SettingsKeepDownloadButton'), loc(obj.lang, 'AccessibilityKeepDownloadButton')) + checkbox("disableChangelog", loc(obj.lang, 'SettingsDisableChangelogOnUpdate'), loc(obj.lang, 'SettingsDisableChangelogOnUpdate'))
}],
})}
${popup({
name: "download",
header: {
closeAria: loc(obj.lang, 'AccessibilityClosePopup'),
subtitle: loc(obj.lang, 'TitlePopupDownload')
},
body: switcher({
name: "download",
subtitle: loc(obj.lang, 'DownloadPopupWayToSave'),
explanation: `${!isIOS ? loc(obj.lang, 'DownloadPopupDescription') : loc(obj.lang, 'DownloadPopupDescriptionIOS')}`,
items: `<a id="pd-download" class="switch full space-right" target="_blank" href="/">${loc(obj.lang, 'Download')}</a>
<div id="pd-copy" class="switch full">${loc(obj.lang, 'CopyURL')}</div>`
})
})}
${popup({
name: "error",
header: {
closeAria: loc(obj.lang, 'AccessibilityClosePopup'),
title: loc(obj.lang, 'TitlePopupError')
},
body: `<div id="desc-error"></div>`
})}
<div id="popup-backdrop" style="visibility: hidden;" onclick="hideAllPopups()"></div>
<div id="cobalt-main-box" class="center box" style="visibility: hidden;">
<div id="logo-area">${appName}</div>
<div id="download-area" class="mobile-center">
<input id="url-input-area" class="mono" type="text" autocorrect="off" maxlength="110" autocapitalize="off" placeholder="${loc(obj.lang, 'LinkInput')}" aria-label="${loc(obj.lang, 'AccessibilityInputArea')}" oninput="button()">
<input id="download-button" class="mono dontRead" onclick="download(document.getElementById('url-input-area').value)" type="submit" value="" disabled=true aria-label="${loc(obj.lang, 'AccessibilityDownloadButton')}">
</div>
</div>
<footer id="footer" style="visibility: hidden;">
${footerButtons([{
name: "about",
type: "popup",
icon: "?",
aria: loc(obj.lang, 'AccessibilityOpenAbout')
}, {
name: "settings",
type: "popup",
icon: "+",
aria: loc(obj.lang, 'AccessibilityOpenSettings')
}, {
name: "audioMode",
type: "toggle",
icon: emoji("✨", 22, 1),
aria: loc(obj.lang, 'AccessibilityModeToggle')
}]
)}
</footer>
</body>
<script type="text/javascript">const loc = {noInternet:"${loc(obj.lang, 'ErrorNoInternet')}", noURLReturned: "${loc(obj.lang, 'ErrorBadFetch')}", toggleDefault:'${emoji("✨")} ${loc(obj.lang, "ModeToggleDefault")}', toggleAudio:'${emoji("🎶")} ${loc(obj.lang, "SettingsFormatSwitchAudio")}'};</script>
<script type="text/javascript" src="cobalt.js"></script>
</html>`;
} catch (err) {
return `${loc(obj.lang, 'ErrorPageRenderFail', obj.hash)}`;
}
}