2022-09-03 16:32:39 +01:00
import { backdropLink , checkbox , footerButtons , multiPagePopup , popup , popupWithBottomButtons , settingsCategory , switcher } from "./elements.js" ;
2022-08-12 14:36:19 +01:00
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 emoji from "../emoji.js" ;
2022-09-11 16:04:06 +01:00
import changelogManager from "../changelog/changelogManager.js" ;
2022-08-12 14:36:19 +01:00
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 ) => {
2022-08-16 08:14:19 +01:00
return { "action" : p }
2022-08-12 14:36:19 +01:00
} )
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> `
2022-09-28 13:21:36 +01:00
extr = ' top-margin'
2022-08-12 14:36:19 +01:00
}
export default function ( obj ) {
2022-09-08 17:02:55 +01:00
audioFormats [ 0 ] [ "text" ] = loc ( obj . lang , 'SettingsAudioFormatBest' ) ;
let ua = obj . useragent . toLowerCase ( ) ;
let isIOS = ua . match ( "iphone os" ) ;
let isMobile = ua . match ( "android" ) || ua . match ( "iphone os" ) ;
2022-08-12 14:36:19 +01:00
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 } < / t i t l e >
< 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' ) } < / d i v > < / n o s c r i p t >
< / h e a d >
< 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 ( {
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 } . `
2022-09-11 16:04:06 +01:00
} , {
2022-10-05 06:28:52 +01:00
text : obj . lang != "ru" ? ` <div id="popup-desc" class="desc-padding"> ${ loc ( obj . lang , 'FollowTwitter' ) } </div> ` : "" ,
raw : true
2022-08-12 14:36:19 +01:00
} , {
text : backdropLink ( repo , loc ( obj . lang , 'LinkGitHubIssues' ) ) ,
classes : [ "bottom-link" ]
} ]
} )
} , {
name : "changelog" ,
title : ` ${ emoji ( "🎉" ) } ${ loc ( obj . lang , 'ChangelogTab' ) } ` ,
content : popup ( {
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
} , {
2022-09-11 16:04:06 +01:00
text : changelogManager ( "title" ) ,
2022-08-12 14:36:19 +01:00
classes : [ "changelog-subtitle" ] ,
nopadding : true
2022-08-19 18:54:20 +01:00
} , {
2022-10-02 15:13:33 +01:00
text : changelogManager ( "content" )
2022-08-12 14:36:19 +01:00
} , {
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" ]
2022-09-11 16:04:06 +01:00
} , {
text : ` <div class="category-title"> ${ loc ( obj . lang , 'ChangelogOlder' ) } </div> ` ,
raw : true
} , {
text : ` <div id="changelog-history"><button class="switch bottom-margin" onclick="loadOnDemand('changelog-history', '0')"> ${ loc ( obj . lang , "ChangelogPressToExpand" ) } </button></div> ` ,
raw : true
2022-08-12 14:36:19 +01:00
} ]
} )
} , {
name : "donate" ,
title : ` ${ emoji ( "💰" ) } ${ loc ( obj . lang , 'DonationsTab' ) } ` ,
content : popup ( {
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 } ` ,
2022-08-22 15:10:54 +01:00
url : ` ${ repo } /commit/ ${ obj . hash } `
2022-08-12 14:36:19 +01:00
} ,
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" ,
2022-10-02 15:18:41 +01:00
"text" : ` ${ loc ( obj . lang , 'SettingsQualitySwitchHigh' ) } <br/>( ${ quality . hig } p) `
2022-08-12 14:36:19 +01:00
} , {
"action" : "mid" ,
2022-10-02 15:18:41 +01:00
"text" : ` ${ loc ( obj . lang , 'SettingsQualitySwitchMedium' ) } <br/>( ${ quality . mid } p) `
2022-08-12 14:36:19 +01:00
} , {
"action" : "low" ,
2022-10-02 15:18:41 +01:00
"text" : ` ${ loc ( obj . lang , 'SettingsQualitySwitchLow' ) } <br/>( ${ quality . low } p) `
2022-08-12 14:36:19 +01:00
} ]
} )
2022-09-28 13:21:36 +01:00
} ) + ` ${ ! isIOS ? checkbox ( "downloadPopup" , loc ( obj . lang , 'SettingsEnableDownloadPopup' ) , loc ( obj . lang , 'AccessibilityEnableDownloadPopup' ) , 1 ) : '' } `
2022-08-16 08:14:19 +01:00
+ settingsCategory ( {
name : "youtube" ,
body : switcher ( {
name : "ytFormat" ,
subtitle : loc ( obj . lang , 'SettingsFormatSubtitle' ) ,
explanation : loc ( obj . lang , 'SettingsFormatDescription' ) ,
items : [ {
"action" : "mp4"
} , {
"action" : "webm"
} ]
} )
2022-08-12 14:36:19 +01:00
} )
2022-08-16 11:31:41 +01:00
+ settingsCategory ( {
name : "tiktok" ,
title : "tiktok & douyin" ,
2022-10-02 15:13:33 +01:00
body : checkbox ( "disableTikTokWatermark" , loc ( obj . lang , 'SettingsRemoveWatermark' ) )
2022-08-16 11:31:41 +01:00
} )
2022-08-12 14:36:19 +01:00
} , {
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
} )
2022-08-23 15:43:56 +01:00
} ) + settingsCategory ( {
name : "tiktok" ,
title : "tiktok & douyin" ,
2022-09-28 13:21:36 +01:00
body : checkbox ( "fullTikTokAudio" , loc ( obj . lang , 'SettingsAudioFullTikTok' ) , loc ( obj . lang , 'SettingsAudioFullTikTok' ) , 3 ) + ` <div class="explanation"> ${ loc ( obj . lang , 'SettingsAudioFullTikTokDescription' ) } </div> `
2022-08-12 14:36:19 +01:00
} )
} , {
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' )
2022-08-16 08:14:19 +01:00
} , {
2022-08-12 14:36:19 +01:00
"action" : "dark" ,
"text" : loc ( obj . lang , 'SettingsThemeDark' )
2022-08-16 08:14:19 +01:00
} , {
2022-08-12 14:36:19 +01:00
"action" : "light" ,
"text" : loc ( obj . lang , 'SettingsThemeLight' )
} ]
2022-09-28 13:21:36 +01:00
} ) + checkbox ( "alwaysVisibleButton" , loc ( obj . lang , 'SettingsKeepDownloadButton' ) , loc ( obj . lang , 'AccessibilityKeepDownloadButton' ) , 2 )
} ) + settingsCategory ( {
name : "miscellaneous" ,
title : loc ( obj . lang , 'Miscellaneous' ) ,
2022-10-02 15:13:33 +01:00
body : checkbox ( "disableChangelog" , loc ( obj . lang , 'SettingsDisableNotifications' ) )
+ checkbox ( "disableClipboardButton" , loc ( obj . lang , 'SettingsDisableClipboard' ) )
2022-09-08 17:02:55 +01:00
} )
2022-08-12 14:36:19 +01:00
} ] ,
} ) }
$ { popup ( {
name : "download" ,
2022-08-19 18:54:20 +01:00
standalone : true ,
2022-08-12 14:36:19 +01:00
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' ) } < / d i v > `
} )
} ) }
2022-09-03 16:32:39 +01:00
$ { popupWithBottomButtons ( {
name : "imagePicker" ,
closeAria : loc ( obj . lang , 'AccessibilityClosePopup' ) ,
header : {
title : loc ( obj . lang , 'ImagePickerTitle' ) ,
explanation : isMobile ? loc ( obj . lang , 'ImagePickerExplanationPhone' ) : loc ( obj . lang , 'ImagePickerExplanationPC' )
} ,
buttons : [ ` <a id="imagepicker-download" class="switch" target="_blank" href="/"> ${ loc ( obj . lang , 'ImagePickerDownloadAudio' ) } </a> ` ] ,
content : '<div id="imagepicker-holder"></div>'
} ) }
2022-08-12 14:36:19 +01:00
$ { popup ( {
name : "error" ,
2022-08-19 18:54:20 +01:00
standalone : true ,
buttonOnly : true ,
emoji : emoji ( "☹️" , 48 , 1 ) ,
classes : [ "small" ] ,
buttonText : loc ( obj . lang , 'ErrorPopupCloseButton' ) ,
2022-08-12 14:36:19 +01:00
header : {
closeAria : loc ( obj . lang , 'AccessibilityClosePopup' ) ,
title : loc ( obj . lang , 'TitlePopupError' )
} ,
2022-08-19 18:54:20 +01:00
body : ` <div id="desc-error" class="desc-padding subtext"></div> `
2022-08-12 14:36:19 +01:00
} ) }
2022-09-08 17:02:55 +01:00
$ { popup ( {
name : "info" ,
standalone : true ,
buttonOnly : true ,
emoji : emoji ( "✨" , 48 , 1 ) ,
classes : [ "small" ] ,
buttonText : loc ( obj . lang , 'ErrorPopupCloseButton' ) ,
header : {
closeAria : loc ( obj . lang , 'AccessibilityClosePopup' ) ,
title : "popup title"
} ,
body : ` <div id="popup-info-desc" class="desc-padding subtext"></div> `
} ) }
2022-08-12 14:36:19 +01:00
< div id = "popup-backdrop" style = "visibility: hidden;" onclick = "hideAllPopups()" > < / d i v >
2022-09-08 17:02:55 +01:00
< div id = "cobalt-main-box" class = "center" style = "visibility: hidden;" >
2022-08-12 14:36:19 +01:00
< div id = "logo-area" > $ { appName } < / d i v >
< div id = "download-area" class = "mobile-center" >
2022-09-08 17:02:55 +01:00
< div id = "top" >
< input id = "url-input-area" class = "mono" type = "text" autocorrect = "off" maxlength = "128" autocapitalize = "off" placeholder = "${loc(obj.lang, 'LinkInput')}" aria - label = "${loc(obj.lang, 'AccessibilityInputArea')}" oninput = "button()" > < / i n p u t >
< button id = "url-clear" onclick = "clearInput()" style = "display:none;" > x < / b u t t o n >
< 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')}" >
< / d i v >
2022-09-28 13:21:36 +01:00
< div id = "bottom" >
< button id = "pasteFromClipboard" class = "switch" onclick = "pasteClipboard()" aria - label = "${loc(obj.lang, 'PasteFromClipboard')}" > $ { emoji ( "📋" , 22 ) } $ { loc ( obj . lang , 'PasteFromClipboard' ) } < / b u t t o n >
< button id = "audioMode" class = "switch" onclick = "toggle('audioMode')" aria - label = "${loc(obj.lang, 'AccessibilityModeToggle')}" > $ { emoji ( "✨" , 22 , 1 ) } < / b u t t o n >
< / d i v >
2022-08-12 14:36:19 +01:00
< / d i v >
< / d i v >
< footer id = "footer" style = "visibility: hidden;" >
2022-09-08 17:02:55 +01:00
$ { /* big action buttons are ALWAYS either first or last, because usual buttons are bundled in pairs and are sandwiched between bigger buttons for mobile view */
footerButtons ( [ {
2022-08-16 08:14:19 +01:00
name : "about" ,
type : "popup" ,
2022-09-08 17:02:55 +01:00
text : ` ${ emoji ( "🐲" , 22 ) } ${ loc ( obj . lang , 'AboutTab' ) } ` ,
2022-08-16 08:14:19 +01:00
aria : loc ( obj . lang , 'AccessibilityOpenAbout' )
} , {
name : "settings" ,
type : "popup" ,
2022-09-08 17:02:55 +01:00
text : ` ${ emoji ( "⚙️" , 22 ) } ${ loc ( obj . lang , 'TitlePopupSettings' ) } ` ,
2022-08-16 08:14:19 +01:00
aria : loc ( obj . lang , 'AccessibilityOpenSettings' )
} ]
2022-08-12 14:36:19 +01:00
) }
< / f o o t e r >
< / b o d y >
2022-08-22 15:10:54 +01:00
< script type = "text/javascript" > const loc = {
2022-09-03 16:32:39 +01:00
noInternet : ` + " ` " + loc(obj.lang, 'ErrorNoInternet') + " ` " + ` ,
noURLReturned : ` + " ` " + loc(obj.lang, 'ErrorNoUrlReturned') + " ` " + ` ,
unknownStatus : ` + " ` " + loc(obj.lang, 'ErrorUnknownStatus') + " ` " + ` ,
2022-09-28 13:21:36 +01:00
toggleDefault : '${emoji("✨")} ${loc(obj.lang, "ModeToggleAuto")}' ,
toggleAudio : '${emoji("🎶")} ${loc(obj.lang, "ModeToggleAudio")}'
2022-08-22 15:10:54 +01:00
} ; < / s c r i p t >
2022-08-12 14:36:19 +01:00
< script type = "text/javascript" src = "cobalt.js" > < / s c r i p t >
< / h t m l > ` ;
} catch ( err ) {
return ` ${ loc ( obj . lang , 'ErrorPageRenderFail' , obj . hash ) } ` ;
}
}
