Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-09-28 22:30:00 +01:00
Code Issues Projects Releases Packages 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
commit 2332c18cee
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
14 changed files with 166 additions and 126 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
src/front/cobalt.css
View file

@ -107,7 +107,7 @@ a {
color: var(--accent-subtext); color: var(--accent-subtext);
} }
.switches::-webkit-scrollbar, .switches::-webkit-scrollbar,
#popup-content::-webkit-scrollbar { .popup-content::-webkit-scrollbar {
display: none; display: none;
} }
:focus-visible { :focus-visible {
@ -450,23 +450,23 @@ button:active,
.popup.small.visible { .popup.small.visible {
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
.popup.small #popup-header-contents, .popup.small .popup-header-contents,
.popup.small .popup-content-inner, .popup.small .popup-content-inner,
.popup.small #popup-header { .popup.small .popup-header {
padding: 0; padding: 0;
} }
.popup.small #popup-header { .popup.small .popup-header {
position: relative; position: relative;
border: none; border: none;
} }
.popup.small #popup-title { .popup.small .popup-title {
margin-bottom: 0.6rem; margin-bottom: 0.6rem;
} }
.popup.small .explanation { .popup.small .explanation {
margin-bottom: 0.9rem; margin-bottom: 0.9rem;
} }
#close-error { .popup.small .close-error.switch {
background: var(--accent); background: var(--accent)!important;
color: var(--background); color: var(--background);
} }
.popup.scrollable { .popup.scrollable {
@ -520,7 +520,7 @@ button:active,
font-size: 1.1rem; font-size: 1.1rem;
padding-bottom: var(--padding-1); padding-bottom: var(--padding-1);
} }
#popup-desc, .popup-desc,
.desc-error, .desc-error,
#popup-info-desc { #popup-info-desc {
width: 100%; width: 100%;
@ -533,7 +533,7 @@ button:active,
.desc-error { .desc-error {
padding-bottom: 1.5rem; padding-bottom: 1.5rem;
} }
#popup-title { .popup-title {
font-size: 1.5rem; font-size: 1.5rem;
line-height: 1.2em; line-height: 1.2em;
display: flex; display: flex;
@ -541,11 +541,11 @@ button:active,
margin-bottom: 0.4rem; margin-bottom: 0.4rem;
margin-top: 0.4rem; margin-top: 0.4rem;
} }
#popup-above-title { .popup-above-title {
color: var(--accent-subtext); color: var(--accent-subtext);
font-size: 0.8rem; font-size: 0.8rem;
} }
#popup-content { .popup-content {
overflow-x: scroll; overflow-x: scroll;
overflow-y: auto; overflow-y: auto;
height: 100%; height: 100%;
@ -564,7 +564,7 @@ button:active,
.bullpadding { .bullpadding {
padding-left: 0.58rem; padding-left: 0.58rem;
} }
#popup-header { .popup-header {
position: absolute; position: absolute;
z-index: 999; z-index: 999;
padding-top: calc(env(safe-area-inset-top)/2 + 1.7rem); padding-top: calc(env(safe-area-inset-top)/2 + 1.7rem);
@ -646,16 +646,16 @@ button:active,
.switch:focus { .switch:focus {
box-shadow: var(--inset-focus) inset; box-shadow: var(--inset-focus) inset;
} }
#popup-tabs .switch { .popup-tabs .switch {
background: none; background: none;
} }
.desktop #popup-tabs .switch:hover, .desktop .popup-tabs .switch:hover,
#popup-tabs .switch:active { .popup-tabs .switch:active {
background: var(--accent-hover-transparent); background: var(--accent-hover-transparent);
box-shadow: 0 0 0 0.1rem var(--accent-highlight) inset; box-shadow: 0 0 0 0.1rem var(--accent-highlight) inset;
} }
.switch[data-enabled="true"], .switch[data-enabled="true"],
#popup-tabs .switch[data-enabled="true"] { .popup-tabs .switch[data-enabled="true"] {
color: var(--background); color: var(--background);
background: var(--accent)!important; background: var(--accent)!important;
cursor: default; cursor: default;
@ -693,20 +693,20 @@ button:active,
padding: var(--gap-no-icon); padding: var(--gap-no-icon);
overflow: clip; overflow: clip;
} }
#back-button { .back-button {
padding: 0; padding: 0;
background: none; background: none;
max-width: 4rem; max-width: 4rem;
font-size: 1rem; font-size: 1rem;
} }
#back-button svg path, .back-button svg path,
.collapse-indicator svg path { .collapse-indicator svg path {
fill: var(--accent); fill: var(--accent);
} }
.popup-tab-content[data-enabled="false"] { .popup-tab-content[data-enabled="false"] {
display: none; display: none;
} }
#popup-tabs { .popup-tabs {
z-index: 999; z-index: 999;
bottom: 0; bottom: 0;
position: absolute; position: absolute;
@ -823,7 +823,7 @@ button:active,
} }
.popup-content-inner, .popup-content-inner,
.tab-content-settings, .tab-content-settings,
#popup-header-contents { .popup-header-contents {
padding-left: 1rem; padding-left: 1rem;
padding-right: 1rem; padding-right: 1rem;
} }
@ -947,15 +947,15 @@ button:active,
#bottom #paste, #bottom #paste,
#footer .switch, #footer .switch,
#audioMode, #audioMode,
#popup-content .switches, .popup-content .switches,
.checkbox, .checkbox,
.changelog-img, .changelog-img,
.changelog-banner, .changelog-banner,
#close-error, .close-error,
.changelog-tag-version, .changelog-tag-version,
#download-switcher .switch, #download-switcher .switch,
#popup-about .switch, #popup-about .switch,
#popup-tabs .switch, .popup-tabs .switch,
.text-to-copy, .text-to-copy,
.text-to-copy.text-backdrop, .text-to-copy.text-backdrop,
#filename-preview { #filename-preview {
@ -965,16 +965,16 @@ button:active,
border-radius: 3px / 4px; border-radius: 3px / 4px;
} }
.popup, .popup,
.scrollable #popup-content { .scrollable .popup-content {
border-radius: 8px; border-radius: 8px;
} }
#popup-header .glass-bkg { .popup-header .glass-bkg {
border-top-left-radius: 8px 9px; border-top-left-radius: 8px 9px;
border-top-right-radius: 8px 9px; border-top-right-radius: 8px 9px;
border-bottom: var(--accent-highlight) solid 0.1rem; border-bottom: var(--accent-highlight) solid 0.1rem;
top: -1px; top: -1px;
} }
#popup-tabs .glass-bkg { .popup-tabs .glass-bkg {
border-bottom-left-radius: 8px 9px; border-bottom-left-radius: 8px 9px;
border-bottom-right-radius: 8px 9px; border-bottom-right-radius: 8px 9px;
border-top: var(--accent-highlight) solid 0.1rem; border-top: var(--accent-highlight) solid 0.1rem;
@ -1103,12 +1103,12 @@ button:active,
padding-top: calc(env(safe-area-inset-bottom)/2 + 1rem); padding-top: calc(env(safe-area-inset-bottom)/2 + 1rem);
} }
.popup, .popup,
#popup-header .glass-bkg, .popup-header .glass-bkg,
#popup-tabs .glass-bkg, .popup-tabs .glass-bkg,
.glass-bkg.small { .glass-bkg.small {
border-radius: 0; border-radius: 0;
} }
#popup-tabs .glass-bkg { .popup-tabs .glass-bkg {
bottom: 0; bottom: 0;
} }
.switches { .switches {
@ -1141,13 +1141,13 @@ button:active,
transform: none; transform: none;
transition: transform 210ms cubic-bezier(0.062, 0.82, 0.165, 1), opacity 130ms ease-in-out; transition: transform 210ms cubic-bezier(0.062, 0.82, 0.165, 1), opacity 130ms ease-in-out;
} }
.popup.small #popup-header { .popup.small .popup-header {
background: none; background: none;
} }
.no-animation .popup.small { .no-animation .popup.small {
transition: none; transition: none;
} }
#close-error { .close-error {
bottom: 3rem; bottom: 3rem;
} }
#picker-holder::-webkit-scrollbar { #picker-holder::-webkit-scrollbar {
@ -1166,13 +1166,13 @@ button:active,
max-height: 100%; max-height: 100%;
box-shadow: none; box-shadow: none;
} }
#popup-tabs { .popup-tabs {
padding-bottom: calc(env(safe-area-inset-bottom)/2 + 1.5rem); padding-bottom: calc(env(safe-area-inset-bottom)/2 + 1.5rem);
} }
.popup-content-inner, .popup-content-inner,
.tab-content-settings, .tab-content-settings,
.popup-tabs-child, .popup-tabs-child,
#popup-header-contents { .popup-header-contents {
padding-left: 0.7rem; padding-left: 0.7rem;
padding-right: 0.7rem; padding-right: 0.7rem;
} }

13
src/front/cobalt.js
View file

@ -236,7 +236,7 @@ function popup(type, action, text) {
`<a class="picker-image-container" ${ `<a class="picker-image-container" ${
isIOS ? `onClick="share('${text.arr[i]["url"]}')"` : `href="${text.arr[i]["url"]}" target="_blank"` isIOS ? `onClick="share('${text.arr[i]["url"]}')"` : `href="${text.arr[i]["url"]}" target="_blank"`
}>` + }>` +
`<img class="picker-image" src="${text.arr[i]["url"]}" onerror="this.parentNode.style.display='none'"></img>` + `<img class="picker-image" src="${text.arr[i]["url"]}" onerror="this.parentNode.style.display='none'">` +
`</a>` `</a>`
} }
break; break;
@ -253,7 +253,7 @@ function popup(type, action, text) {
}>` + }>` +
`<div class="picker-element-name">${text.arr[i].type}</div>` + `<div class="picker-element-name">${text.arr[i].type}</div>` +
`<div class="imageBlock"></div>` + `<div class="imageBlock"></div>` +
`<img class="picker-image" src="${text.arr[i]["thumb"]}" onerror="this.style.display='none'"></img>` + `<img class="picker-image" src="${text.arr[i]["thumb"]}" onerror="this.style.display='none'">` +
`</a>` `</a>`
} }
eid("picker-download").classList.remove("visible"); eid("picker-download").classList.remove("visible");
@ -603,9 +603,9 @@ window.onload = () => {
if (setUn !== null) { if (setUn !== null) {
if (setUn) { if (setUn) {
sSet("migrated", "true") sSet("migrated", "true")
eid("desc-migration").innerHTML += `<br/><br/>${loc.DataTransferSuccess}` eid("desc-migration").innerHTML += `<br><br>${loc.DataTransferSuccess}`
} else { } else {
eid("desc-migration").innerHTML += `<br/><br/>${loc.DataTransferError}` eid("desc-migration").innerHTML += `<br><br>${loc.DataTransferError}`
} }
} }
} }
@ -616,6 +616,11 @@ window.onload = () => {
window.history.replaceState(null, '', window.location.pathname); window.history.replaceState(null, '', window.location.pathname);
notificationCheck(); notificationCheck();
// fix for animations not working in Safari
if (isIOS) {
document.addEventListener('touchstart', () => {}, true);
}
} }
eid("url-input-area").addEventListener("keydown", (e) => { eid("url-input-area").addEventListener("keydown", (e) => {
button(); button();

BIN
src/front/updateBanners/shutup.png
View file

Binary file not shown.
Side by side

Before

Width:  |  Height:  |  Size: 220 KiB

BIN
src/front/updateBanners/shutup.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 21 KiB

4
src/localization/languages/en.json
View file

@ -8,7 +8,7 @@
"LinkInput": "paste the link here", "LinkInput": "paste the link here",
"AboutSummary": "cobalt is your go-to place for downloads from social and media platforms. zero ads, trackers, or other creepy bullshit. simply paste a share link and you're ready to rock!", "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.", "EmbedBriefDescription": "save what you love. no ads, trackers, or other creepy bullshit.",
"MadeWithLove": "made with <3 by wukko", "MadeWithLove": "made with &lt;3 by wukko",
"AccessibilityInputArea": "link input area", "AccessibilityInputArea": "link input area",
"AccessibilityOpenAbout": "open about popup", "AccessibilityOpenAbout": "open about popup",
"AccessibilityDownloadButton": "download button", "AccessibilityDownloadButton": "download button",
@ -152,6 +152,8 @@
"FilenamePreviewAudioAuthor": "Audio Author", "FilenamePreviewAudioAuthor": "Audio Author",
"StatusPage": "service status page", "StatusPage": "service status page",
"TroubleshootingGuide": "self-troubleshooting guide", "TroubleshootingGuide": "self-troubleshooting guide",
"DonateImageDescription": "cat sleeping on a laptop keyboard and typing letters repeatedly",
"UpdateNewYears": "new years clean up",
"SettingsTwitterGif": "convert gifs to .gif", "SettingsTwitterGif": "convert gifs to .gif",
"SettingsTwitterGifDescription": "converting looping videos to .gif reduces quality and majorly increases file size. if you want best efficiency, keep this setting off.", "SettingsTwitterGifDescription": "converting looping videos to .gif reduces quality and majorly increases file size. if you want best efficiency, keep this setting off.",
"UpdateTwitterGif": "twitter gifs and pinterest" "UpdateTwitterGif": "twitter gifs and pinterest"

3
src/localization/languages/ru.json
View file

@ -8,7 +8,7 @@
"LinkInput": "вставь ссылку сюда", "LinkInput": "вставь ссылку сюда",
"AboutSummary": "кобальт - твой друг при скачивании контента из соцсетей и других сервисов. никакой рекламы, трекеров и прочего мусора. вставляешь ссылку и получаешь файл. всё. ничего лишнего.", "AboutSummary": "кобальт - твой друг при скачивании контента из соцсетей и других сервисов. никакой рекламы, трекеров и прочего мусора. вставляешь ссылку и получаешь файл. всё. ничего лишнего.",
"EmbedBriefDescription": "сохраняй то, что любишь. без рекламы, трекеров и лишней мороки.", "EmbedBriefDescription": "сохраняй то, что любишь. без рекламы, трекеров и лишней мороки.",
"MadeWithLove": "сделано с любовью <3", "MadeWithLove": "сделано с любовью &lt;3",
"AccessibilityInputArea": "зона вставки ссылки", "AccessibilityInputArea": "зона вставки ссылки",
"AccessibilityOpenAbout": "открыть окно с инфой", "AccessibilityOpenAbout": "открыть окно с инфой",
"AccessibilityDownloadButton": "кнопка скачивания", "AccessibilityDownloadButton": "кнопка скачивания",
@ -154,6 +154,7 @@
"FilenamePreviewAudioAuthor": "Автор Аудио", "FilenamePreviewAudioAuthor": "Автор Аудио",
"StatusPage": "статус серверов", "StatusPage": "статус серверов",
"TroubleshootingGuide": "гайд по устранению проблем", "TroubleshootingGuide": "гайд по устранению проблем",
"DonateImageDescription": "кошка спит на клавиатуре ноутбука и многократно печатает буквы",
"UpdateNewYears": "новогодняя уборка", "UpdateNewYears": "новогодняя уборка",
"SettingsTwitterGif": "конвертировать гифки в .gif", "SettingsTwitterGif": "конвертировать гифки в .gif",
"SettingsTwitterGifDescription": "конвертирование зацикленного видео в .gif снижает качество и значительно увеличивает размер файла. если важна максимальная эффективность, то не используй эту функцию.", "SettingsTwitterGifDescription": "конвертирование зацикленного видео в .gif снижает качество и значительно увеличивает размер файла. если важна максимальная эффективность, то не используй эту функцию.",

2
src/localization/manager.js
View file

@ -17,7 +17,7 @@ export async function loadLoc() {
export function replaceBase(s) { export function replaceBase(s) {
return s return s
.replace(/\n/g, '<br/>') .replace(/\n/g, '<br>')
.replace(/{saveToGalleryShortcut}/g, links.saveToGalleryShortcut) .replace(/{saveToGalleryShortcut}/g, links.saveToGalleryShortcut)
.replace(/{repo}/g, repo) .replace(/{repo}/g, repo)
.replace(/{statusPage}/g, links.statusPage) .replace(/{statusPage}/g, links.statusPage)

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", "title": "new years clean up! bug fixes and fresh look for the home page",
"banner": { "banner": {
"file": "catroomba.webp", "file": "catroomba.webp",
"alt": "a cat riding a roomba vacuum",
"width": 300, "width": 300,
"height": 168 "height": 168
}, },
@ -16,6 +17,7 @@
"title": "bugfixes and better downloads!", "title": "bugfixes and better downloads!",
"banner": { "banner": {
"file": "meowthpolishegg.webp", "file": "meowthpolishegg.webp",
"alt": "meowth polishing a togepi egg",
"width": 640, "width": 640,
"height": 480 "height": 480
}, },
@ -26,6 +28,7 @@
"title": "customizable file names, instagram stories, and first cobalt sponsor!", "title": "customizable file names, instagram stories, and first cobalt sponsor!",
"banner": { "banner": {
"file": "meowthcenter.webp", "file": "meowthcenter.webp",
"alt": "meowth plush in a datacenter wearing a hardhat, wielding a hammer",
"width": 851, "width": 851,
"height": 640 "height": 640
}, },
@ -36,6 +39,7 @@
"title": "support for twitch clips and rutube!", "title": "support for twitch clips and rutube!",
"banner": { "banner": {
"file": "twitchupdate.webp", "file": "twitchupdate.webp",
"alt": "meowth plush staring into the camera, laptop with generic purple service in the background",
"width": 851, "width": 851,
"height": 640 "height": 640
}, },
@ -46,6 +50,7 @@
"title": "new domain, what's coming in future, bug fixes, and more!", "title": "new domain, what's coming in future, bug fixes, and more!",
"banner": { "banner": {
"file": "newdomain.webp", "file": "newdomain.webp",
"alt": "text: new domain, same cobalt",
"width": 960, "width": 960,
"height": 540 "height": 540
}, },
@ -56,6 +61,7 @@
"title": "extended video length limit, metadata toggle, ui improvements, and more!", "title": "extended video length limit, metadata toggle, ui improvements, and more!",
"banner": { "banner": {
"file": "meowthsnap.webp", "file": "meowthsnap.webp",
"alt": "cartoon meowth pointing paw dramatically and saying something",
"width": 500, "width": 500,
"height": 280 "height": 280
}, },
@ -66,6 +72,7 @@
"title": "instagram, streamable, video metadata, and more!", "title": "instagram, streamable, video metadata, and more!",
"banner": { "banner": {
"file": "meowthproductions.webp", "file": "meowthproductions.webp",
"alt": "meowth roaring in a fancy circle, à la MGM studios intro",
"width": 640, "width": 640,
"height": 358 "height": 358
}, },
@ -76,6 +83,7 @@
"title": "biggest ui refresh yet!", "title": "biggest ui refresh yet!",
"banner": { "banner": {
"file": "meowthcooking.webp", "file": "meowthcooking.webp",
"alt": "meowth handling orders in a restaurant",
"width": 640, "width": 640,
"height": 360 "height": 360
}, },
@ -86,6 +94,7 @@
"title": "all network issues have been fixed!", "title": "all network issues have been fixed!",
"banner": { "banner": {
"file": "meowthhammer.webp", "file": "meowthhammer.webp",
"alt": "meowth plush holding a hammer in real life",
"width": 1280, "width": 1280,
"height": 827 "height": 827
}, },
@ -96,6 +105,7 @@
"title": "better reliability, new infrastructure, pinterest support, and way more!", "title": "better reliability, new infrastructure, pinterest support, and way more!",
"banner": { "banner": {
"file": "catswitchboxes.webp", "file": "catswitchboxes.webp",
"alt": "a cat climbing into two empty boxes of asahi beer",
"width": 600, "width": 600,
"height": 314 "height": 314
}, },
@ -105,6 +115,7 @@
"title": "instagram support, docker, and more!", "title": "instagram support, docker, and more!",
"banner": { "banner": {
"file": "catphonestand.webp", "file": "catphonestand.webp",
"alt": "a cat holding a phone under its chin while a person plays clash of clans on it",
"width": 451, "width": 451,
"height": 272 "height": 272
}, },
@ -114,6 +125,7 @@
"title": "better looks, better feel", "title": "better looks, better feel",
"banner": { "banner": {
"file": "cattired.webp", "file": "cattired.webp",
"alt": "a cat laying on a sofa face down, wiggling its tail",
"width": 640, "width": 640,
"height": 286 "height": 286
}, },
@ -123,6 +135,7 @@
"title": "fastest one in the game", "title": "fastest one in the game",
"banner": { "banner": {
"file": "catspeed.webp", "file": "catspeed.webp",
"alt": "a cat running very fast in an exercise wheel",
"width": 640, "width": 640,
"height": 356 "height": 356
}, },
@ -132,6 +145,7 @@
"title": "the evil has been defeated", "title": "the evil has been defeated",
"banner": { "banner": {
"file": "happymeowth.webp", "file": "happymeowth.webp",
"alt": "meowth jumping up into the sky very excitedly",
"width": 500, "width": 500,
"height": 330 "height": 330
}, },
@ -141,6 +155,7 @@
"title": "it's all about attention to detail!", "title": "it's all about attention to detail!",
"banner": { "banner": {
"file": "valentines.webp", "file": "valentines.webp",
"alt": "relaxed meowth with sakura petals falling in front of them",
"width": 489, "width": 489,
"height": 374 "height": 374
}, },
@ -150,6 +165,7 @@
"title": "prettier than ever", "title": "prettier than ever",
"banner": { "banner": {
"file": "catmakeup.webp", "file": "catmakeup.webp",
"alt": "a cat being brushed with a powder makeup brush",
"width": 394, "width": 394,
"height": 266 "height": 266
}, },
@ -159,6 +175,7 @@
"title": "we're better together! thank you for bug reports.", "title": "we're better together! thank you for bug reports.",
"banner": { "banner": {
"file": "bettertogether.webp", "file": "bettertogether.webp",
"alt": "various different pokémon jumping in happiness",
"width": 640, "width": 640,
"height": 358 "height": 358
}, },
@ -168,6 +185,7 @@
"title": "mute videos and proper soundcloud support", "title": "mute videos and proper soundcloud support",
"banner": { "banner": {
"file": "shutup.webp", "file": "shutup.webp",
"alt": "a cat yawning, with a crossed out loudspeaker icon next to it",
"width": 1024, "width": 1024,
"height": 665 "height": 665
}, },
@ -177,6 +195,7 @@
"title": "better, faster, stronger, stable", "title": "better, faster, stronger, stable",
"banner": { "banner": {
"file": "meowthstrong.webp", "file": "meowthstrong.webp",
"alt": "meowth stretching",
"width": 500, "width": 500,
"height": 280 "height": 280
}, },
@ -186,6 +205,7 @@
"title": "over 1 million monthly requests. thank you.", "title": "over 1 million monthly requests. thank you.",
"banner": { "banner": {
"file": "onemillionr.webp", "file": "onemillionr.webp",
"alt": "cobalt logo and a confetti emoji",
"width": 1441, "width": 1441,
"height": 1441 "height": 1441
}, },
@ -199,6 +219,7 @@
"title": "developers, developers, developers, developers", "title": "developers, developers, developers, developers",
"banner": { "banner": {
"file": "developers.webp", "file": "developers.webp",
"alt": "steve ballmer going \"developers, developers, developers\"",
"width": 640, "width": 640,
"height": 360 "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) { export default function(string) {
try { try {
const currentChangelog = changelog.current;
switch (string) { switch (string) {
case "version": case "version":
return `<span class="text-backdrop changelog-tag-version">v.${changelog["current"]["version"]}</span>${ return `<span class="text-backdrop changelog-tag-version">v.${currentChangelog.version}</span>${
changelog["current"]["date"] ? `<span class="changelog-tag-date">· ${changelog["current"]["date"]}</span>` : '' currentChangelog.date ? `<span class="changelog-tag-date">· ${currentChangelog.date}</span>` : ''
}` }`
case "title": case "title":
return replaceBase(changelog["current"]["title"]); return replaceBase(currentChangelog.title);
case "banner": case "banner":
return changelog["current"]["banner"] ? { const currentBanner = changelog.current.banner;
url: `updateBanners/${changelog["current"]["banner"]["file"]}`, return currentBanner ? {
width: changelog["current"]["banner"]["width"], ...currentBanner,
height: changelog["current"]["banner"]["height"] url: `updateBanners/${currentBanner.file}`
} : false; } : false;
case "content": case "content":
return replaceBase(changelog["current"]["content"]); return replaceBase(currentChangelog.content);
case "history": case "history":
return changelog["history"].map((i) => { return changelog.history.map((log) => {
const banner = log.banner;
return { return {
title: replaceBase(i["title"]), title: replaceBase(log.title),
version: `<span class="text-backdrop changelog-tag-version">v.${i["version"]}</span>${ version: `<span class="text-backdrop changelog-tag-version">v.${log.version}</span>${
i["date"] ? `<span class="changelog-tag-date">· ${i["date"]}</span>` : '' log.date ? `<span class="changelog-tag-date">· ${log.date}</span>` : ''
}`, }`,
content: replaceBase(i["content"]), content: replaceBase(log.content),
banner: i["banner"] ? { banner: banner ? {
url: `updateBanners/${i["banner"]["file"]}`, ...banner,
width: i["banner"]["width"], url: `updateBanners/${banner.file}`
height: i["banner"]["height"]
} : false, } : 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`; let filePath = `emoji/${names[emoji]}.svg`;
if (fluent) filePath = `emoji/3d/${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 = `` body = ``
for (let i = 0; i < obj.body.length; i++) { for (let i = 0; i < obj.body.length; i++) {
if (obj.body[i]["text"].length > 0) { 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"]) { if (i !== obj.body.length - 1 && !obj.body[i]["nopadding"]) {
classes.push("desc-padding") 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 ` return `
${obj.standalone ? `<div id="popup-${obj.name}" class="popup center${!obj.buttonOnly ? " box" : ''}${classes.length > 0 ? ' ' + classes.join(' ') : ''}">` : ''} ${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 class="popup-header">
<div id="popup-header-contents"> <div class="popup-header-contents">
${obj.buttonOnly ? obj.header.emoji : ``} ${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.aboveTitle ? `<a class="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.title ? `<div class="popup-title">${obj.header.title}</div>` : ''}
${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''} ${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''}
</div> </div>
${!obj.buttonOnly ? `<div class="glass-bkg alone"></div>` : ''} ${!obj.buttonOnly ? `<div class="glass-bkg alone"></div>` : ''}
</div> </div>
<div id="popup-content" class="popup-content-inner"> <div class="popup-content popup-content-inner">
${body}${obj.buttonOnly ? `<button id="close-error" class="switch" onclick="popup('${obj.name}', 0)">${obj.buttonText}</button>` : ''} ${body}${obj.buttonOnly ? `<button class="close-error switch" onclick="popup('${obj.name}', 0)">${obj.buttonText}</button>` : ''}
</div> </div>
${classes.includes("small") ? `<div class="glass-bkg small"></div>` : ''} ${classes.includes("small") ? `<div class="glass-bkg small"></div>` : ''}
${obj.standalone ? `</div>` : ''}` ${obj.standalone ? `</div>` : ''}`
@ -87,7 +87,7 @@ export function popup(obj) {
export function multiPagePopup(obj) { export function multiPagePopup(obj) {
let tabs = ` 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} ${backButtonSVG}
</button>`; </button>`;
@ -99,16 +99,16 @@ export function multiPagePopup(obj) {
return ` return `
<div id="popup-${obj.name}" class="popup center box scrollable"> <div id="popup-${obj.name}" class="popup center box scrollable">
<div id="popup-content"> <div class="popup-content">
${obj.header ? `<div id="popup-header" class="popup-header"> ${obj.header ? `<div class="popup-header">
<div id="popup-header-contents"> <div class="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.aboveTitle ? `<a class="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.title ? `<div class="popup-title">${obj.header.title}</div>` : ''}
${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''} ${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''}
</div> </div>
<div class="glass-bkg alone"></div> <div class="glass-bkg alone"></div>
</div>` : ''}${tabContent}</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="switches popup-tabs-child">${tabs}</div>
<div class="glass-bkg alone"></div> <div class="glass-bkg alone"></div>
</div> </div>
@ -131,7 +131,7 @@ export function collapsibleList(arr) {
} }
export function popupWithBottomButtons(obj) { export function popupWithBottomButtons(obj) {
let tabs = ` 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} ${backButtonSVG}
</button>` </button>`
@ -140,17 +140,17 @@ export function popupWithBottomButtons(obj) {
} }
return ` return `
<div id="popup-${obj.name}" class="popup center box scrollable"> <div id="popup-${obj.name}" class="popup center box scrollable">
<div id="popup-content"> <div class="popup-content">
${obj.header ? `<div id="popup-header" class="popup-header"> ${obj.header ? `<div class="popup-header">
<div id="popup-header-contents"> <div class="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.aboveTitle ? `<a class="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.title ? `<div class="popup-title">${obj.header.title}</div>` : ''}
${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''} ${obj.header.subtitle ? `<div id="popup-subtitle">${obj.header.subtitle}</div>` : ''}
${obj.header.explanation ? `<div class="explanation">${obj.header.explanation}</div>` : ''} ${obj.header.explanation ? `<div class="explanation">${obj.header.explanation}</div>` : ''}
</div> </div>
<div class="glass-bkg alone"></div> <div class="glass-bkg alone"></div>
</div>` : ''}${obj.content}</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 id="picker-buttons" class="switches popup-tabs-child">${tabs}</div>
<div class="glass-bkg alone"></div> <div class="glass-bkg alone"></div>
</div> </div>
@ -171,7 +171,7 @@ export function socialLinks(lang) {
} }
export function settingsCategory(obj) { export function settingsCategory(obj) {
return `<div id="settings-${obj.name}" class="settings-category"> 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 class="category-content">${obj.body}</div>
</div>` </div>`
} }

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

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

86
src/modules/pageRender/page.js
View file

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

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

@ -43,7 +43,7 @@ export function createStream(obj) {
exp = streamInfo.exp; exp = streamInfo.exp;
ghmac = streamInfo.hmac; 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) { export function verifyStream(id, hmac, exp) {