experiments
/
cloudtube_fork
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Add theme support, light theme, and edgeless light

This commit is contained in:
Cadence Ember 2021-12-28 16:32:11 +13:00
parent 4e1f2b3607
commit 0d23d66700
45 changed files with 433 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
api/channels.js
View File

@ -24,7 +24,7 @@ module.exports = [
video.watched = watchedVideos.includes(video.videoId) video.watched = watchedVideos.includes(video.videoId)
}) })
} }
return render(200, "pug/channel.pug", {url, data, subscribed, instanceOrigin}) return render(200, "pug/channel.pug", {settings, url, data, subscribed, instanceOrigin})
} }
} }
] ]

15
api/filters.js
View File

@ -9,8 +9,7 @@ const {Matcher, PatternCompileError} = require("../utils/matcher")
const filterMaxLength = 160 const filterMaxLength = 160
const regexpEnabledText = constants.server_setup.allow_regexp_filters ? "" : "not" const regexpEnabledText = constants.server_setup.allow_regexp_filters ? "" : "not"
function getCategories(req) { function getCategories(user) {
const user = getUser(req)
const filters = user.getFilters() const filters = user.getFilters()
// Sort filters into categories for display. Titles are already sorted. // Sort filters into categories for display. Titles are already sorted.
@ -39,7 +38,9 @@ function getCategories(req) {
module.exports = [ module.exports = [
{ {
route: "/filters", methods: ["GET"], code: async ({req, url}) => { route: "/filters", methods: ["GET"], code: async ({req, url}) => {
const categories = getCategories(req) const user = getUser(req)
const categories = getCategories(user)
const settings = user.getSettingsOrDefaults()
let referrer = url.searchParams.get("referrer") || null let referrer = url.searchParams.get("referrer") || null
let type = null let type = null
@ -54,7 +55,7 @@ module.exports = [
label = url.searchParams.get("label") label = url.searchParams.get("label")
} }
return render(200, "pug/filters.pug", {categories, type, contents, label, referrer, filterMaxLength, regexpEnabledText}) return render(200, "pug/filters.pug", {settings, categories, type, contents, label, referrer, filterMaxLength, regexpEnabledText})
} }
}, },
{ {
@ -100,8 +101,10 @@ module.exports = [
return true return true
}, state => { }, state => {
const {type, contents, label, compileError} = state const {type, contents, label, compileError} = state
const categories = getCategories(req) const user = getUser(req)
return render(400, "pug/filters.pug", {categories, type, contents, label, compileError, filterMaxLength, regexpEnabledText}) const categories = getCategories(user)
const settings = user.getSettingsOrDefaults()
return render(400, "pug/filters.pug", {settings, categories, type, contents, label, compileError, filterMaxLength, regexpEnabledText})
}) })
.last(state => { .last(state => {
const {type, contents, label} = state const {type, contents, label} = state

25
api/pages.js
View File

@ -1,16 +1,35 @@
const {render} = require("pinski/plugins") const {render} = require("pinski/plugins")
const {getUser} = require("../utils/getuser")
module.exports = [ module.exports = [
{ {
route: "/", methods: ["GET"], code: async ({req}) => { route: "/", methods: ["GET"], code: async ({req}) => {
const userAgent = req.headers["user-agent"] || "" const userAgent = req.headers["user-agent"] || ""
const mobile = userAgent.toLowerCase().includes("mobile") const mobile = userAgent.toLowerCase().includes("mobile")
return render(200, "pug/home.pug", {mobile}) const user = getUser(req)
const settings = user.getSettingsOrDefaults()
return render(200, "pug/home.pug", {settings, mobile})
} }
}, },
{ {
route: "/js-licenses", methods: ["GET"], code: async () => { route: "/(?:js-)?licenses", methods: ["GET"], code: async ({req}) => {
return render(200, "pug/js-licenses.pug") const user = getUser(req)
const settings = user.getSettingsOrDefaults()
return render(200, "pug/licenses.pug", {settings})
}
},
{
route: "/cant-think", methods: ["GET"], code: async ({req}) => {
const user = getUser(req)
const settings = user.getSettingsOrDefaults()
return render(200, "pug/cant-think.pug", {settings})
}
},
{
route: "/privacy", methods: ["GET"], code: async ({req}) => {
const user = getUser(req)
const settings = user.getSettingsOrDefaults()
return render(200, "pug/privacy.pug", {settings})
} }
} }
] ]

2
api/search.js
View File

@ -26,7 +26,7 @@ module.exports = [
const filters = user.getFilters() const filters = user.getFilters()
results = converters.applyVideoFilters(results, filters).videos results = converters.applyVideoFilters(results, filters).videos
return render(200, "pug/search.pug", {url, query, results, instanceOrigin}) return render(200, "pug/search.pug", {settings, url, query, results, instanceOrigin})
} }
} }
] ]

8
api/video.js
View File

@ -111,7 +111,7 @@ module.exports = [
// Check if playback is allowed // Check if playback is allowed
const videoTakedownInfo = db.prepare("SELECT id, org, url FROM TakedownVideos WHERE id = ?").get(id) const videoTakedownInfo = db.prepare("SELECT id, org, url FROM TakedownVideos WHERE id = ?").get(id)
if (videoTakedownInfo) { if (videoTakedownInfo) {
return render(451, "pug/takedown-video.pug", videoTakedownInfo) return render(451, "pug/takedown-video.pug", Object.assign({settings}, videoTakedownInfo))
} }
// Media fragment // Media fragment
@ -129,7 +129,7 @@ module.exports = [
// Work out how to fetch the video // Work out how to fetch the video
if (req.method === "GET") { if (req.method === "GET") {
if (settings.local) { // skip to the local fetching page, which will then POST video data in a moment if (settings.local) { // skip to the local fetching page, which will then POST video data in a moment
return render(200, "pug/local-video.pug", {id}) return render(200, "pug/local-video.pug", {settings, id})
} }
var instanceOrigin = settings.instance var instanceOrigin = settings.instance
var outURL = `${instanceOrigin}/api/v1/videos/${id}` var outURL = `${instanceOrigin}/api/v1/videos/${id}`
@ -153,7 +153,7 @@ module.exports = [
// automatically add the entry to the videos list, so it won't be fetched again // automatically add the entry to the videos list, so it won't be fetched again
const args = {id, ...channelTakedownInfo} const args = {id, ...channelTakedownInfo}
db.prepare("INSERT INTO TakedownVideos (id, org, url) VALUES (@id, @org, @url)").run(args) db.prepare("INSERT INTO TakedownVideos (id, org, url) VALUES (@id, @org, @url)").run(args)
return render(451, "pug/takedown-video.pug", channelTakedownInfo) return render(451, "pug/takedown-video.pug", Object.assign({settings}, channelTakedownInfo))
} }
// process stream list ordering // process stream list ordering
@ -225,7 +225,7 @@ module.exports = [
// Create appropriate formatted message // Create appropriate formatted message
const message = render(0, `pug/errors/${errorType}.pug`, locals).content const message = render(0, `pug/errors/${errorType}.pug`, locals).content
return render(500, "pug/video.pug", {video: {videoId: id}, error: true, message}) return render(500, "pug/video.pug", {video: {videoId: id}, error: true, message, settings})
} }
} }
} }

0
html/static/images/arrow-down-wide.svg → html/static/images/arrow-down-wide-dark.svg
View File

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 225 B

After

Width:  |  Height:  |  Size: 225 B

1
html/static/images/arrow-down-wide-light.svg Normal file
View File

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="22" height="8" viewBox="0 0 5.821 2.117"><path d="M1.269.53l.767.793h.161L2.964.53h.211v.265L2.117 1.852 1.058.794V.529z" fill="#202020" paint-order="markers stroke fill"/></svg>
Side by Side

After

Width:  |  Height:  |  Size: 226 B

2
html/static/images/settings.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 6.615 6.615"><path d="M2.64 0s-.03.94-.424 1.215C1.823 1.49.885.894.885.894L.112 2.232.109 2.23l.003.002c.01.006.797.499.838.974.042.478-.944.992-.944.992l.77 1.34s.83-.442 1.265-.24c.435.204.387 1.314.387 1.314l1.546.003s.032-.94.425-1.215c.393-.275 1.331.321 1.331.321l.775-1.338s-.798-.496-.84-.974c-.041-.478.944-.993.944-.993l-.77-1.34s-.83.443-1.265.24C4.14 1.113 4.187.002 4.187.002zm.688 2.25a1.106 1.106 0 110 2.211 1.106 1.106 0 010-2.21z" fill="#c4c4c4" paint-order="fill markers stroke"/></svg> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 6.615 6.615"><title>Settings</title><path d="M2.64 0s-.03.94-.424 1.215C1.823 1.49.885.894.885.894L.112 2.232.109 2.23l.003.002c.01.006.797.499.838.974.042.478-.944.992-.944.992l.77 1.34s.83-.442 1.265-.24c.435.204.387 1.314.387 1.314l1.546.003s.032-.94.425-1.215c.393-.275 1.331.321 1.331.321l.775-1.338s-.798-.496-.84-.974c-.041-.478.944-.993.944-.993l-.77-1.34s-.83.443-1.265.24C4.14 1.113 4.187.002 4.187.002zm.688 2.25a1.106 1.106 0 110 2.211 1.106 1.106 0 010-2.21z" paint-order="fill markers stroke"/></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 582 B

After

Width:  |  Height:  |  Size: 611 B

2
html/static/images/subscriptions.svg
View File

@ -1 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="25" viewBox="0 0 7.937 6.615"><path d="M2.373 0h3.191a.52.52 0 01.521.521H1.852A.52.52 0 012.373 0zm-.91.794h5.011c.371 0 .67.298.67.67v.123l-6.35-.016v-.108c0-.37.298-.67.67-.67zm-.405 1.058C.472 1.852 0 2.184 0 2.77v2.868c0 .586.472.977 1.058.977H6.88c.586 0 1.059-.39 1.059-.977V2.77c0-.586-.473-.918-1.059-.918zM5.3 4.017c.167.099.19.276.012.366l-2.098.985c-.131.077-.304-.002-.302-.19V3.29c0-.203.18-.333.34-.245z" fill="#c4c4c4" paint-order="fill markers stroke"/></svg> <svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" width="30" height="25" viewBox="0 0 7.937 6.615"><title>Subscriptions</title><path d="M2.373 0h3.191a.52.52 0 01.521.521H1.852A.52.52 0 012.373 0zm-.91.794h5.011c.371 0 .67.298.67.67v.123l-6.35-.016v-.108c0-.37.298-.67.67-.67zm-.405 1.058C.472 1.852 0 2.184 0 2.77v2.868c0 .586.472.977 1.058.977H6.88c.586 0 1.059-.39 1.059-.977V2.77c0-.586-.473-.918-1.059-.918zM5.3 4.017c.167.099.19.276.012.366l-2.098.985c-.131.077-.304-.002-.302-.19V3.29c0-.203.18-.333.34-.245z" paint-order="fill markers stroke"/></svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 535 B

After

Width:  |  Height:  |  Size: 569 B

11
pug/includes/layout.pug
View File

@ -3,7 +3,8 @@ html
head head
meta(charset="utf-8") meta(charset="utf-8")
meta(name="viewport" content="width=device-width, initial-scale=1") meta(name="viewport" content="width=device-width, initial-scale=1")
link(rel="stylesheet" type="text/css" href=getStaticURL("sass", "/main.sass")) - const theme = settings && ["dark", "light", "edgeless-light"][settings.theme] || "dark"
link(rel="stylesheet" type="text/css" href=getStaticURL("sass", `/${theme}.sass`))
script(type="module" src=getStaticURL("html", "/static/js/focus.js")) script(type="module" src=getStaticURL("html", "/static/js/focus.js"))
block head block head
@ -15,13 +16,9 @@ html
.links .links
a(href="/").link.home CloudTube a(href="/").link.home CloudTube
a(href="/subscriptions" title="Subscriptions").link.icon-link a(href="/subscriptions" title="Subscriptions").link.icon-link
svg(width=30 height=25) != icons.get("subscriptions")
image(href=getStaticURL("html", "/static/images/subscriptions.svg") alt="Subscriptions.").icon
title Subscriptions
a(href="/settings" title="Settings").link.icon-link a(href="/settings" title="Settings").link.icon-link
svg(width=25 height=25) != icons.get("settings")
image(href=getStaticURL("html", "/static/images/settings.svg") alt="Settings.").icon
title Settings
form(method="get" action="/search").search-form form(method="get" action="/search").search-form
input(type="text" placeholder="Search" aria-label="Search a video" name="q" autocomplete="off" value=query).search input(type="text" placeholder="Search" aria-label="Search a video" name="q" autocomplete="off" value=query).search

10
pug/settings.pug
View File

@ -36,6 +36,16 @@ block content
form(method="post" action="/settings") form(method="post" action="/settings")
+fieldset("Settings") +fieldset("Settings")
+select({
id: "theme",
label: "Theme",
options: [
{value: "0", text: "Standard dark"},
{value: "1", text: "Standard light"},
{value: "2", text: "Edgeless light"}
]
})
+input({ +input({
id: "instance", id: "instance",
label: "Instance", label: "Instance",

4
pug/subscriptions.pug
View File

@ -31,8 +31,8 @@ block content
if settings.save_history if settings.save_history
input(type="checkbox" id="watched-videos-display") input(type="checkbox" id="watched-videos-display")
.watched-videos-display-container .checkbox-hider__container
label(for="watched-videos-display").watched-videos-display-label Hide watched videos label(for="watched-videos-display").checkbox-hider__label Hide watched videos
each video in videos each video in videos
+video_list_item("subscriptions-video", video, instanceOrigin, {showMarkWatched: settings.save_history && !video.watched}) +video_list_item("subscriptions-video", video, instanceOrigin, {showMarkWatched: settings.save_history && !video.watched})

1
pug/video.pug
View File

@ -21,6 +21,7 @@ block content
noscript noscript
meta(http-equiv="refresh" content=`${video.lengthSeconds+5};url=/watch?v=${first.videoId}&continuous=1&session-watched=${sessionWatchedNext}`) meta(http-equiv="refresh" content=`${video.lengthSeconds+5};url=/watch?v=${first.videoId}&continuous=1&session-watched=${sessionWatchedNext}`)
.video-page(class={ .video-page(class={
"video-page--recommended-side": settings.recommended_mode === 0,
"video-page--recommended-below": settings.recommended_mode === 1, "video-page--recommended-below": settings.recommended_mode === 1,
"video-page--recommended-hidden": settings.recommended_mode === 2 "video-page--recommended-hidden": settings.recommended_mode === 2
}) })

9
sass/dark.sass Normal file
View File

@ -0,0 +1,9 @@
@use "themes/dark" as *
@use "includes/main" with ($_theme: $theme)
@use "theme-modules/edgeless" with ($_theme: $theme)
// navigation shadow
.main-nav
position: relative // needed for box shadow to overlap related videos section
box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.1)

4
sass/edgeless-light.sass Normal file
View File

@ -0,0 +1,4 @@
@use "themes/edgeless-light" as *
@use "includes/main" with ($_theme: $theme)
@use "theme-modules/edgeless" with ($_theme: $theme)

33
sass/includes/base.sass → sass/includes/_base.sass
View File

@ -1,8 +1,10 @@
@use "colors.sass" as c $_theme: () !default
@use "sass:map"
body body
background-color: c.$bg-dark background-color: map.get($_theme, "bg-2")
color: c.$fg-main color: map.get($_theme, "fg-main")
font-family: "Bariol", sans-serif font-family: "Bariol", sans-serif
font-size: 18px font-size: 18px
margin: 0 margin: 0
@ -13,13 +15,13 @@ body
flex-direction: column flex-direction: column
a a
color: c.$link color: map.get($_theme, "link")
pre, code pre, code
font-size: 0.88em font-size: 0.88em
code code
background: c.$bg-darker background: map.get($_theme, "bg-1")
padding: 3px 5px padding: 3px 5px
border-radius: 4px border-radius: 4px
@ -32,7 +34,7 @@ button
cursor: pointer cursor: pointer
::placeholder ::placeholder
color: #c4c4c4 color: map.get($_theme, "placeholder")
opacity: 1 opacity: 1
// focus section // focus section
@ -48,19 +50,20 @@ button
select:-moz-focusring select:-moz-focusring
color: transparent color: transparent
text-shadow: 0 0 0 c.$fg-bright text-shadow: 0 0 0 map.get($_theme, "fg-bright")
body.show-focus body.show-focus
a, select, button, input, video, summary a, select, button, input, video, summary
&:focus &:focus
outline: 2px dotted #ddd outline: 2px dotted map.get($_theme, "fg-main")
video video
background-color: black background-color: black
details details
background-color: c.$bg-accent-x background-color: map.get($_theme, "bg-3")
padding: 12px padding: 12px
border: 1px solid map.get($_theme, "edge-grey")
border-radius: 8px border-radius: 8px
summary summary
@ -68,20 +71,22 @@ details
line-height: 1 line-height: 1
margin-bottom: 0 margin-bottom: 0
user-select: none user-select: none
color: c.$fg-main color: map.get($_theme, "fg-main")
&[open] summary &[open] summary
margin-bottom: 16px padding-bottom: 12px
border-bottom: 1px solid map.get($_theme, "edge-grey")
margin-bottom: 8px
table table
background-color: c.$bg-darker background-color: map.get($_theme, "bg-1")
table, td, th table, td, th
border: 1px solid c.$edge-grey border: 1px solid map.get($_theme, "edge-grey")
border-collapse: collapse border-collapse: collapse
td, th td, th
padding: 4px 8px padding: 4px 8px
thead, tr:nth-child(even) thead, tr:nth-child(even)
background-color: c.$bg-darkest background-color: map.get($_theme, "bg-0")

26
sass/includes/buttons.sass → sass/includes/_buttons.sass
View File

@ -1,10 +1,12 @@
$_theme: () !default
@use "sass:selector" @use "sass:selector"
@use "colors.sass" as c @use "sass:map"
@mixin button-base @mixin button-base
-webkit-appearance: none -webkit-appearance: none
-moz-appearance: none -moz-appearance: none
color: c.$fg-bright color: map.get($_theme, "fg-bright")
border: none border: none
border-radius: 4px border-radius: 4px
padding: 8px padding: 8px
@ -14,7 +16,7 @@
@at-root #{selector.unify(&, "select")} @at-root #{selector.unify(&, "select")}
padding: 8px 27px 8px 8px padding: 8px 27px 8px 8px
background: url(/static/images/arrow-down-wide.svg) right 53% no-repeat c.$bg-accent-x background: map.get($_theme, "image-dropdown") right 53% no-repeat map.get($_theme, "bg-4")
@at-root #{selector.unify(&, "a")} @at-root #{selector.unify(&, "a")}
padding: 7px 8px padding: 7px 8px
@ -31,12 +33,12 @@
@mixin button-bg @mixin button-bg
@include button-base @include button-base
background-color: c.$bg-accent-x background-color: map.get($_theme, "bg-4")
@mixin border-button @mixin border-button
@include button-bg @include button-bg
border: 1px solid c.$edge-grey border: 1px solid map.get($_theme, "edge-grey")
@mixin button-size @mixin button-size
margin: 4px margin: 4px
@ -44,10 +46,10 @@
@mixin button-hover @mixin button-hover
&:hover &:hover
background-color: c.$bg-accent background-color: map.get($_theme, "bg-3")
&:active &:active
background-color: c.$bg-dark background-color: map.get($_theme, "bg-2")
.base-border-look .base-border-look
@include border-button @include border-button
@ -62,13 +64,13 @@
@include button-size @include button-size
-webkit-appearance: none -webkit-appearance: none
-moz-appearance: none -moz-appearance: none
color: c.$fg-bright color: map.get($_theme, "fg-bright")
text-decoration: none text-decoration: none
line-height: 1.25 line-height: 1.25
margin: 0 margin: 0
padding: 8px 20px padding: 8px 20px
background: c.$bg-accent background: map.get($_theme, "bg-3")
border: solid c.$bg-darker border: solid map.get($_theme, "edge-grey")
border-width: 1px 0px 0px border-width: 1px 0px 0px
text-align: left text-align: left
@ -76,7 +78,7 @@
border-width: 1px 0px 1px border-width: 1px 0px 1px
&:hover &:hover
background: c.$bg-accent-x background: map.get($_theme, "bg-4")
&:active &:active
background: c.$bg-darker background: map.get($_theme, "bg-1")

10
sass/includes/cant-think-page.sass → sass/includes/_cant-think-page.sass
View File

@ -1,5 +1,7 @@
$_theme: () !default
@use "sass:list" @use "sass:list"
@use "colors.sass" as c @use "sass:map"
.cant-think-page .cant-think-page
.main-nav .main-nav
@ -13,7 +15,7 @@
box-sizing: border-box box-sizing: border-box
.page-narration .page-narration
background-color: c.$bg-accent background-color: map.get($_theme, "bg-3")
border: 1px solid #aaa border: 1px solid #aaa
color: #fff color: #fff
border-radius: 0 border-radius: 0
@ -28,7 +30,7 @@
.leave .leave
margin: 26px 32px !important margin: 26px 32px !important
color: #aaa color: map.get($_theme, "fg-dim")
$sizes: 14px 16px 21px 30px 72px $sizes: 14px 16px 21px 30px 72px
@each $size in $sizes @each $size in $sizes
@ -37,7 +39,7 @@
&.leave__final &.leave__final
font-weight: bold font-weight: bold
color: #f2f2f2 color: map.get($_theme, "fg-bright")
text-align: center text-align: center
.leave__actions .leave__actions

17
sass/includes/channel-page.sass → sass/includes/_channel-page.sass
View File

@ -1,6 +1,8 @@
@use "colors.sass" as c $_theme: () !default
@use "video-list-item.sass" as *
@use "_dimensions.sass" as dimensions @use "sass:map"
@use "_dimensions" as dimensions
@use "video-list-item" as *
.channel-page .channel-page
padding: 40px 20px 20px padding: 40px 20px 20px
@ -17,7 +19,7 @@
align-self: flex-start align-self: flex-start
.channel-data .channel-data
background-color: c.$bg-darker background-color: map.get($_theme, "bg-1")
padding: 24px padding: 24px
margin: 12px 0px 24px margin: 12px 0px 24px
border-radius: 8px border-radius: 8px
@ -44,11 +46,11 @@
.name .name
font-size: 30px font-size: 30px
font-weight: normal font-weight: normal
color: c.$fg-bright color: map.get($_theme, "fg-bright")
margin: 0 margin: 0
.subscribers .subscribers
color: c.$fg-main color: map.get($_theme, "fg-main")
font-size: 18px font-size: 18px
.subscribe-form .subscribe-form
@ -61,7 +63,8 @@
line-height: 1 line-height: 1
border-radius: 8px border-radius: 8px
font-size: 22px font-size: 22px
background-color: c.$power-deep background-color: map.get($_theme, "power-deep")
color: map.get($_theme, "power-fg")
border: none border: none
.description .description

20
sass/includes/filters-page.sass → sass/includes/_filters-page.sass
View File

@ -1,10 +1,12 @@
@use "colors.sass" as c $_theme: () !default
@use "sass:map"
@mixin filter-notice @mixin filter-notice
margin-top: 24px margin-top: 24px
padding: 12px padding: 12px
border-radius: 8px border-radius: 8px
background-color: c.$bg-darker background-color: map.get($_theme, "bg-1")
white-space: pre-line white-space: pre-line
.filters-page .filters-page
@ -20,23 +22,23 @@
.filter-confirmation-notice .filter-confirmation-notice
@include filter-notice @include filter-notice
color: c.$fg-warning color: map.get($_theme, "fg-warning")
.filter-compile-error .filter-compile-error
@include filter-notice @include filter-notice
&__header &__header
color: c.$fg-warning color: map.get($_theme, "fg-warning")
&__trace &__trace
background-color: c.$bg-darkest background-color: map.get($_theme, "bg-0")
padding: 6px padding: 6px
.save-filter .save-filter
margin-top: 12px margin-top: 12px
.border-look .border-look
background-color: c.$bg-darker background-color: map.get($_theme, "bg-1")
font-size: 22px font-size: 22px
padding: 7px 16px 8px padding: 7px 16px 8px
font-size: 24px font-size: 24px
@ -48,17 +50,17 @@
.filter .filter
display: flex display: flex
padding: 5px 0 padding: 5px 0
border-top: 1px solid c.$edge-grey border-top: 1px solid map.get($_theme, "edge-grey")
&:last-child &:last-child
border-bottom: 1px solid c.$edge-grey border-bottom: 1px solid map.get($_theme, "edge-grey")
&__details &__details
flex: 1 flex: 1
&__type &__type
font-size: 15px font-size: 15px
color: c.$fg-dim color: map.get($_theme, "fg-dim")
&__remove &__remove
flex-shrink: 0 flex-shrink: 0

7
sass/includes/footer.sass → sass/includes/_footer.sass
View File

@ -1,4 +1,6 @@
@use "./colors.sass" as c $_theme: () !default
@use "sass:map"
.footer__container .footer__container
flex: 1 flex: 1
@ -10,9 +12,10 @@
display: flex display: flex
flex-direction: column flex-direction: column
align-items: center align-items: center
background-color: c.$bg-darkest background-color: map.get($_theme, "bg-dim")
margin: 40px 0 0 margin: 40px 0 0
padding: 10px 10px 30px padding: 10px 10px 30px
border-top: 1px solid map.get($_theme, "edge-grey")
.footer__cols .footer__cols
display: flex display: flex

39
sass/includes/forms.sass → sass/includes/_forms.sass
View File

@ -1,7 +1,9 @@
@use "colors.sass" as c $_theme: () !default
@use "sass:map"
@mixin disabled @mixin disabled
background-color: c.$bg-dark background-color: map.get($_theme, "bg-2")
color: #808080 color: #808080
fieldset fieldset
@ -20,7 +22,7 @@ fieldset
font-size: 28px font-size: 28px
font-weight: bold font-weight: bold
padding: 0 padding: 0
border-bottom: 1px solid #333 border-bottom: 1px solid map.get($_theme, "edge-grey") // TODO: originally contrasted more
line-height: 1.56 line-height: 1.56
@media screen and (max-width: 400px) @media screen and (max-width: 400px)
@ -36,7 +38,7 @@ fieldset
position: relative position: relative
padding-bottom: 5px padding-bottom: 5px
margin-bottom: 5px margin-bottom: 5px
border-bottom: 1px solid #999 border-bottom: 1px solid map.get($_theme, "edge-grey")
@media screen and (max-width: 400px) @media screen and (max-width: 400px)
flex-direction: column flex-direction: column
@ -52,7 +54,7 @@ fieldset
&__label &__label
grid-area: label grid-area: label
padding: 8px 8px 8px 0px padding: 8px 8px 8px 0px
color: #fff color: map.get($_theme, "fg-main")
&__input &__input
grid-area: input grid-area: input
@ -63,7 +65,7 @@ fieldset
white-space: pre-line white-space: pre-line
margin: 12px 0px 18px margin: 12px 0px 18px
font-size: 16px font-size: 16px
color: #ccc color: map.get($_theme, "fg-dim")
line-height: 1.2 line-height: 1.2
// //
@ -79,7 +81,7 @@ fieldset
width: 16px width: 16px
height: 16px height: 16px
padding: 0px padding: 0px
border: 1px solid #666 border: 1px solid map.get($_theme, "edge-grey")
border-radius: 3px border-radius: 3px
margin-left: 8px margin-left: 8px
position: relative position: relative
@ -110,18 +112,19 @@ fieldset
height: 42px height: 42px
margin: 0 margin: 0
.#{$base}-container .checkbox-hider__container
position: relative position: relative
display: grid // why does the default not work??? display: grid // why does the default not work???
top: -42px top: -42px
background: c.$bg-accent-x background: map.get($_theme, "bg-3")
line-height: 1 line-height: 1
border-radius: 8px border: 1px solid map.get($_theme, "edge-grey")
margin-bottom: -18px border-radius: 8px
margin-bottom: -18px
.#{$base}-label .checkbox-hider__label
padding: 12px 0px 12px 32px padding: 12px 0px 12px 32px
cursor: pointer cursor: pointer
@mixin single-button-form @mixin single-button-form
display: inline-block display: inline-block

8
sass/includes/home-page.sass → sass/includes/_home-page.sass
View File

@ -1,4 +1,6 @@
@use "colors.sass" as c $_theme: () !default
@use "sass:map"
.home-page .home-page
padding: 40px padding: 40px
@ -18,8 +20,8 @@
padding: 16px padding: 16px
border-radius: 4px border-radius: 4px
font-size: 20px font-size: 20px
background-color: c.$bg-darker background-color: map.get($_theme, "bg-1")
color: c.$fg-main color: map.get($_theme, "fg-main")
p p
margin: 0 32px margin: 0 32px

2
sass/includes/licenses-page.sass → sass/includes/_licenses-page.sass
View File

@ -1,3 +1,5 @@
$_theme: () !default
.js-licenses-page .js-licenses-page
max-width: 800px max-width: 800px
margin: 0 auto margin: 0 auto

32
sass/includes/_main.sass Normal file
View File

@ -0,0 +1,32 @@
$_theme: () !default
@use "sass:selector"
// preload second-level includes with the theme (there will be conflicts due to reconfiguration they are loaded individually)
// this isn't _exactly_ what @forward is supposed to be used for, but it's the best option here
@forward "video-list-item" show _ with ($_theme: $_theme)
@forward "forms" show _ with ($_theme: $_theme)
@forward "buttons" show _ with ($_theme: $_theme)
@use "base" with ($_theme: $_theme)
@use "video-page" with ($_theme: $_theme)
@use "search-page" with ($_theme: $_theme)
@use "home-page" with ($_theme: $_theme)
@use "channel-page" with ($_theme: $_theme)
@use "subscriptions-page" with ($_theme: $_theme)
@use "settings-page" with ($_theme: $_theme)
@use "cant-think-page" with ($_theme: $_theme)
@use "privacy-page" with ($_theme: $_theme)
@use "licenses-page" with ($_theme: $_theme)
@use "filters-page" with ($_theme: $_theme)
@use "takedown-page" with ($_theme: $_theme)
@use "nav" with ($_theme: $_theme)
@use "footer" with ($_theme: $_theme)
@font-face
font-family: "Bariol"
src: url(/static/fonts/bariol.woff?statichash=1)
.button-container
display: flex
flex-wrap: wrap

27
sass/includes/nav.sass → sass/includes/_nav.sass
View File

@ -1,12 +1,14 @@
@use "colors.sass" as c $_theme: () !default
@use "buttons.sass" as *
@use "_dimensions.sass" as dimensions @use "sass:map"
@use "buttons" as *
@use "_dimensions" as dimensions
.main-nav .main-nav
background-color: c.$bg-accent background-color: map.get($_theme, "bg-nav")
display: flex display: flex
padding: 8px padding: 8px
box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.1) border-bottom: 1px solid map.get($_theme, "edge-grey")
+dimensions.thin +dimensions.thin
display: block display: block
@ -30,10 +32,16 @@
font-weight: bold font-weight: bold
&, &:visited &, &:visited
color: #fff color: map.get($_theme, "fg-bright")
&:focus, &:hover &:focus, &:hover
background-color: c.$bg-accent-x background-color: map.get($_theme, "bg-4")
&.icon-link
color: map.get($_theme, "fg-dim")
&:hover, &:focus
color: map.get($_theme, "fg-bright")
.search-form .search-form
display: flex display: flex
@ -44,8 +52,7 @@
@include button-bg @include button-bg
padding: 10px padding: 10px
flex: 1 flex: 1
margin: 1px border: 1px solid map.get($_theme, "bg-nav")
&:hover, &:focus &:hover, &:focus
border: 1px solid c.$edge-grey border-color: map.get($_theme, "edge-grey")
margin: 0px

2
sass/includes/privacy-page.sass → sass/includes/_privacy-page.sass
View File

@ -1,3 +1,5 @@
$_theme: () !default
.privacy-page .privacy-page
max-width: 600px max-width: 600px
margin: 0 auto margin: 0 auto

6
sass/includes/search-page.sass → sass/includes/_search-page.sass
View File

@ -1,5 +1,7 @@
@use "video-list-item.sass" as * $_theme: () !default
@use "colors.sass" as c
@use "sass:map"
@use "video-list-item" as *
.search-page .search-page
padding: 40px 20px 20px padding: 40px 20px 20px

11
sass/includes/settings-page.sass → sass/includes/_settings-page.sass
View File

@ -1,5 +1,7 @@
@use "forms.sass" as forms $_theme: () !default
@use "colors.sass" as c
@use "sass:map"
@use "forms" as forms
.settings-page .settings-page
padding: 40px 20px 20px padding: 40px 20px 20px
@ -19,8 +21,9 @@
.more-settings .more-settings
margin-top: 24px margin-top: 24px
padding: 12px padding: 12px
border: 1px solid map.get($_theme, "edge-grey")
border-radius: 8px border-radius: 8px
background-color: c.$bg-accent-x background-color: map.get($_theme, "bg-3")
&__list &__list
margin: 0 margin: 0
@ -34,7 +37,7 @@
margin-top: 24px margin-top: 24px
.delete-confirm-container .delete-confirm-container
background: c.$bg-darker background: map.get($_theme, "bg-1")
margin-bottom: -36px margin-bottom: -36px
@include forms.checkbox-hider("delete-confirm") @include forms.checkbox-hider("delete-confirm")

10
sass/includes/subscriptions-page.sass → sass/includes/_subscriptions-page.sass
View File

@ -1,6 +1,8 @@
@use "colors.sass" as c $_theme: () !default
@use "video-list-item.sass" as *
@use "forms.sass" as forms @use "sass:map"
@use "forms" as forms
@use "video-list-item" as *
.subscriptions-page .subscriptions-page
padding: 40px 20px 20px padding: 40px 20px 20px
@ -33,7 +35,7 @@
.name .name
font-size: 22px font-size: 22px
color: c.$fg-main color: map.get($_theme, "fg-main")
@include forms.checkbox-hider("watched-videos-display") @include forms.checkbox-hider("watched-videos-display")

16
sass/includes/_takedown-page.sass Normal file
View File

@ -0,0 +1,16 @@
$_theme: () !default
@use "sass:map"
.takedown-page
max-width: 700px
margin: 0 auto
.new-section
margin-top: 200px
.important-section
padding: 4px 20px
border: 1px solid map.get($_theme, "edge-grey")
color: map.get($_theme, "fg-bright")
background-color: map.get($_theme, "bg-1")

33
sass/includes/video-list-item.sass → sass/includes/_video-list-item.sass
View File

@ -1,5 +1,7 @@
@use "colors.sass" as c $_theme: () !default
@use "_dimensions.sass" as dimensions
@use "sass:map"
@use "_dimensions" as dimensions
// navigator hacks // navigator hacks
.thumbnail > .thumbnail__options-container .thumbnail > .thumbnail__options-container
@ -30,6 +32,7 @@
&__show-more &__show-more
display: block display: block
height: $more-size height: $more-size
color: #fff
line-height: 16px line-height: 16px
font-size: 25px font-size: 25px
text-align: center text-align: center
@ -52,7 +55,7 @@
&__options-list &__options-list
pointer-events: auto pointer-events: auto
display: grid display: grid
background-color: c.$bg-accent background-color: map.get($_theme, "bg-3")
padding: 8px 0px padding: 8px 0px
border-radius: 8px border-radius: 8px
box-shadow: 0 2px 6px 2px #000 box-shadow: 0 2px 6px 2px #000
@ -67,7 +70,7 @@
right: 0 right: 0
transform: translate(-6px, -1px) rotate(-45deg) transform: translate(-6px, -1px) rotate(-45deg)
clip-path: polygon(-5% -20%, 120% -20%, 120% 125%) clip-path: polygon(-5% -20%, 120% -20%, 120% 125%)
background-color: c.$bg-accent background-color: map.get($_theme, "bg-3")
box-shadow: 0px 0px 4px 0px #000 box-shadow: 0px 0px 4px 0px #000
pointer-events: none pointer-events: none
@ -80,7 +83,7 @@
margin-bottom: 12px margin-bottom: 12px
@at-root .video-list-item--watched#{&} @at-root .video-list-item--watched#{&}
background: c.$bg-darker background: map.get($_theme, "bg-dim")
padding: 4px 4px 0px padding: 4px 4px 0px
margin: -4px -4px 8px margin: -4px -4px 8px
@ -93,7 +96,7 @@
.thumbnail .thumbnail
position: relative position: relative
display: flex display: flex
background: c.$bg-darkest background: map.get($_theme, "bg-0")
&__link &__link
font-size: 0 // remove whitespace around the image font-size: 0 // remove whitespace around the image
@ -106,7 +109,7 @@
position: absolute position: absolute
bottom: 3px bottom: 3px
right: 3px right: 3px
color: c.$fg-bright color: #fff
font-size: 14px font-size: 14px
background: rgba(20, 20, 20, 0.85) background: rgba(20, 20, 20, 0.85)
line-height: 1 line-height: 1
@ -119,20 +122,20 @@
line-height: 1.2 line-height: 1.2
.title-link .title-link
color: c.$fg-main color: map.get($_theme, "fg-main")
text-decoration: none text-decoration: none
.author-line .author-line
margin-top: 4px margin-top: 4px
font-size: 15px font-size: 15px
color: c.$fg-dim color: map.get($_theme, "fg-dim")
.author .author
color: c.$fg-dim color: map.get($_theme, "fg-dim")
text-decoration: none text-decoration: none
&:hover, &:active &:hover, &:active
color: c.$fg-bright color: map.get($_theme, "fg-bright")
text-decoration: underline text-decoration: underline
@mixin recommendation-item @mixin recommendation-item
@ -176,15 +179,15 @@
.author-line .author-line
font-size: 15px font-size: 15px
color: c.$fg-main color: map.get($_theme, "fg-main")
.author .author
color: c.$fg-main color: map.get($_theme, "fg-main")
.description .description
margin-top: 16px margin-top: 16px
font-size: 15px font-size: 15px
color: c.$fg-dim color: map.get($_theme, "fg-dim")
+dimensions.thin +dimensions.thin
.description .description
@ -195,7 +198,7 @@
.description b .description b
font-weight: normal font-weight: normal
color: c.$fg-main color: map.get($_theme, "fg-main")
@mixin channel-video @mixin channel-video
@include large-item @include large-item

45
sass/includes/video-page.sass → sass/includes/_video-page.sass
View File

@ -1,11 +1,11 @@
@use "colors.sass" as c $_theme: () !default
@use "video-list-item.sass" as *
@use "sass:map"
@use "video-list-item" as *
.video-page .video-page
display: grid display: grid
grid-auto-flow: row grid-auto-flow: row
padding: 20px
grid-gap: 16px
@media screen and (min-width: 1000px) @media screen and (min-width: 1000px)
grid-template-columns: 1fr 400px grid-template-columns: 1fr 400px
@ -13,10 +13,25 @@
&--recommended-below, &--recommended-hidden &--recommended-below, &--recommended-hidden
grid-template-columns: none grid-template-columns: none
&--recommended-hidden .related-videos &--recommended-side
display: none .related-videos
border-left: 1px solid map.get($_theme, "edge-grey")
padding-left: 12px
padding-right: 20px
background-color: map.get($_theme, "bg-4")
padding-top: 12px
&--recommended-below
.related-videos
padding: 20px
&--recommended-hidden
.related-videos
display: none
.main-video-section .main-video-section
padding: 20px
.video-container .video-container
text-align: center text-align: center
@ -27,7 +42,7 @@
max-height: 80vh max-height: 80vh
.stream-notice .stream-notice
background: c.$bg-darkest background: map.get($_theme, "bg-0")
padding: 4px padding: 4px
.info .info
@ -45,15 +60,15 @@
margin: 0px 0px 4px margin: 0px 0px 4px
font-size: 30px font-size: 30px
font-weight: normal font-weight: normal
color: c.$fg-bright color: map.get($_theme, "fg-bright")
word-break: break-word word-break: break-word
.author-link .author-link
color: c.$fg-main color: map.get($_theme, "fg-main")
text-decoration: none text-decoration: none
&:hover, &:active &:hover, &:active
color: c.$fg-bright color: map.get($_theme, "fg-bright")
text-decoration: underline text-decoration: underline
.info-secondary .info-secondary
@ -75,7 +90,7 @@
margin: 16px 4px margin: 16px 4px
padding: 12px padding: 12px
border-radius: 4px border-radius: 4px
background-color: c.$bg-darkest background-color: map.get($_theme, "bg-0")
&__description &__description
margin-left: 12px margin-left: 12px
@ -85,7 +100,7 @@
&__script-warning &__script-warning
font-size: 15px font-size: 15px
color: c.$fg-warning color: map.get($_theme, "fg-warning")
&__buttons &__buttons
display: flex display: flex
@ -97,12 +112,12 @@
line-height: 1.4 line-height: 1.4
word-break: break-word word-break: break-word
margin: 16px 4px 4px 4px margin: 16px 4px 4px 4px
background-color: c.$bg-accent-area background-color: map.get($_theme, "bg-5")
padding: 12px padding: 12px
border-radius: 4px border-radius: 4px
--regular-background: #{c.$bg-accent-area} --regular-background: #{map.get($_theme, "bg-5")}
--highlight-background: #{c.$bg-darker} --highlight-background: #{map.get($_theme, "bg-1")}
.subscribe-form .subscribe-form
display: inline-block display: inline-block

17
sass/includes/colors.sass
View File

@ -1,17 +0,0 @@
$bg-darkest: #202123
$bg-darker: #303336
$bg-dark: #36393f
$bg-accent: #4f5359
$bg-accent-x: #3f4247
$bg-accent-area: #44474b
$fg-bright: #fff
$fg-main: #ddd
$fg-dim: #bbb
$fg-warning: #fdca6d
$edge-grey: #a0a0a0
$link: #8ac2f9
$power-deep: #c62727

14
sass/includes/takedown-page.sass
View File

@ -1,14 +0,0 @@
@use "colors.sass" as c
.takedown-page
max-width: 700px
margin: 0 auto
.new-section
margin-top: 200px
.important-section
padding: 4px 20px
border: 1px solid c.$edge-grey
color: c.$fg-bright
background-color: c.$bg-darker

2
sass/light.sass Normal file
View File

@ -0,0 +1,2 @@
@use "themes/light" as *
@use "includes/main" with ($_theme: $theme)

30
sass/main.sass
View File

@ -1,30 +0,0 @@
@use "includes/colors.sass" as c
@use "includes/base.sass"
@use "sass:selector"
@use "includes/video-page.sass"
@use "includes/search-page.sass"
@use "includes/home-page.sass"
@use "includes/channel-page.sass"
@use "includes/subscriptions-page.sass"
@use "includes/settings-page.sass"
@use "includes/cant-think-page.sass"
@use "includes/privacy-page.sass"
@use "includes/licenses-page.sass"
@use "includes/filters-page.sass"
@use "includes/takedown-page.sass"
@use "includes/forms.sass"
@use "includes/nav.sass"
@use "includes/footer.sass"
@font-face
font-family: "Bariol"
src: url(/static/fonts/bariol.woff?statichash=1)
.icon-link:hover, .icon-link:focus
.icon
filter: brightness(2)
.button-container
display: flex
flex-wrap: wrap

27
sass/theme-modules/_edgeless.sass Normal file
View File

@ -0,0 +1,27 @@
$_theme: () !default
@use "sass:map"
// remove separating edges
.main-nav, .footer__center, .video-page--recommended-side .related-videos
border: none
// no background change to recommended videos sidebar
.video-page--recommended-side .related-videos
background-color: map.get($_theme, "bg-2")
// navigation shadow
.main-nav
position: relative // needed for box shadow to overlap related videos section
box-shadow: 0px 0px 20px 5px rgba(0, 0, 0, 0.1)
// thumbnail dropdown menu dividers
.menu-look
border-color: map.get($_theme, "bg-0")
// details areas
details, .checkbox-hider__container, .more-settings
border: none
details[open] summary
border: none
margin-bottom: 4px

38
sass/themes/_dark.scss Normal file
View File

@ -0,0 +1,38 @@
// Defined in scss file instead of sass because indented syntax does not have multiline maps
// https://github.com/sass/sass/issues/216
@use "sass:map";
// This section is for colour shades
$theme: (
// darker
"bg-0": #252628,
"bg-1": #303336,
// regular
"bg-2": #36393f,
// lighter
"bg-3": #3f4247, // slightly
"bg-4": #44474b, // noticably
"bg-5": #4f5359, // brightly
"fg-bright": #fff,
"fg-main": #ddd,
"fg-dim": #bbb,
"fg-warning": #fdca6d,
"edge-grey": #a0a0a0,
"placeholder": #c4c4c4,
"link": #8ac2f9,
"power-deep": #c62727,
"power-fg": "#fff",
"image-dropdown": url(/static/images/arrow-down-wide-dark.svg)
);
// This section is for colour meanings
$theme: map.merge($theme, (
"bg-dim": map.get($theme, "bg-0"),
"bg-nav": map.get($theme, "bg-5"),
));

8
sass/themes/_edgeless-light.scss Normal file
View File

@ -0,0 +1,8 @@
// extend regular light theme to change a couple of shades
@use "light";
@use "sass:map";
// this section is for colour meanings
$theme: map.merge(light.$theme, (
"edge-grey": #c0c0c0,
));

38
sass/themes/_light.scss Normal file
View File

@ -0,0 +1,38 @@
// Defined in scss file instead of sass because indented syntax does not have multiline maps
// https://github.com/sass/sass/issues/216
@use "sass:map";
// this section is for colour shades
$theme: (
// lighter
"bg-0": #fff,
"bg-1": #fff,
// regular
"bg-2": #f2f2f2,
// darker
"bg-3": #e8e8e8, // slightly
"bg-4": #dadada, // noticably
"bg-5": #d0d0d0, // brightly
"fg-bright": #000,
"fg-main": #202020,
"fg-dim": #454545,
"fg-warning": #ce8600,
"edge-grey": #909090,
"placeholder": #636363,
"link": #0b51d4,
"power-deep": #c62727,
"power-fg": #fff,
"image-dropdown": url(/static/images/arrow-down-wide-light.svg)
);
// this section is for colour meanings
$theme: map.merge($theme, (
"bg-dim": map.get($theme, "bg-4"),
"bg-nav": map.get($theme, "bg-0")
));

12
server.js
View File

@ -1,9 +1,11 @@
const {Pinski} = require("pinski") const {Pinski} = require("pinski")
const {setInstance} = require("pinski/plugins") const {setInstance} = require("pinski/plugins")
const constants = require("./utils/constants") const constants = require("./utils/constants")
const iconLoader = require("./utils/icon-loader").icons
;(async () => { ;(async () => {
await require("./utils/upgradedb")() await require("./utils/upgradedb")()
const icons = await iconLoader
const server = new Pinski({ const server = new Pinski({
port: 10412, port: 10412,
@ -13,19 +15,19 @@ const constants = require("./utils/constants")
setInstance(server) setInstance(server)
server.pugDefaultLocals.constants = constants server.pugDefaultLocals.constants = constants
server.pugDefaultLocals.icons = icons
server.muteLogsStartingWith("/vi/") server.muteLogsStartingWith("/vi/")
server.muteLogsStartingWith("/favicon") server.muteLogsStartingWith("/favicon")
server.muteLogsStartingWith("/static") server.muteLogsStartingWith("/static")
server.addSassDir("sass", ["sass/includes"]) server.addSassDir("sass", ["sass/includes", "sass/themes", "sass/theme-modules"])
server.addRoute("/static/css/main.css", "sass/main.sass", "sass") server.addRoute("/static/css/dark.css", "sass/dark.sass", "sass")
server.addRoute("/static/css/light.css", "sass/light.sass", "sass")
server.addRoute("/static/css/edgeless-light.css", "sass/edgeless-light.sass", "sass")
server.addPugDir("pug", ["pug/includes"]) server.addPugDir("pug", ["pug/includes"])
server.addPugDir("pug/errors") server.addPugDir("pug/errors")
server.addRoute("/cant-think", "pug/cant-think.pug", "pug")
server.addRoute("/privacy", "pug/privacy.pug", "pug")
server.addRoute("/licenses", "pug/licenses.pug", "pug")
server.addStaticHashTableDir("html/static/js") server.addStaticHashTableDir("html/static/js")
server.addStaticHashTableDir("html/static/js/elemjs") server.addStaticHashTableDir("html/static/js/elemjs")

4
utils/constants.js
View File

@ -9,6 +9,10 @@ let constants = {
type: "string", type: "string",
default: "http://localhost:3000" default: "http://localhost:3000"
}, },
theme: {
type: "integer",
default: 0
},
save_history: { save_history: {
type: "boolean", type: "boolean",
default: false default: false

8
utils/icon-loader.js Normal file
View File

@ -0,0 +1,8 @@
const fs = require("fs").promises
const names = ["subscriptions", "settings"]
const icons = names.map(name => fs.readFile(`html/static/images/${name}.svg`, "utf8"))
module.exports.icons = Promise.all(icons).then(resolvedIcons => {
return new Map(names.map((name, index) => [name, resolvedIcons[index]]))
})

7
utils/upgradedb.js
View File

@ -70,6 +70,11 @@ const deltas = [
.run() .run()
db.prepare("CREATE TABLE TakedownChannels (ucid TEXT NOT NULL, org TEXT, url TEXT, PRIMARY KEY (ucid))") db.prepare("CREATE TABLE TakedownChannels (ucid TEXT NOT NULL, org TEXT, url TEXT, PRIMARY KEY (ucid))")
.run() .run()
},
// 11: Settings +theme
function() {
db.prepare("ALTER TABLE Settings ADD COLUMN theme INTEGER DEFAULT 0")
.run()
} }
] ]
@ -82,7 +87,7 @@ async function createBackup(entry) {
/** /**
* @param {number} entry * @param {number} entry
* @param {boolean} log * @param {boolean} [log]
*/ */
function runDelta(entry, log) { function runDelta(entry, log) {
process.stdout.write(`Upgrading database to version ${entry}... `) process.stdout.write(`Upgrading database to version ${entry}... `)