mirror of
https://git.sr.ht/~cadence/cloudtube
synced 2026-03-02 02:31:35 +00:00
Settings page and instance selection
This commit is contained in:
Cadence Ember
parent
59a7489545
commit
c573a5ac3e
22 changed files with 587 additions and 71 deletions
|
|
@ -10,8 +10,10 @@ html
|
|||
body.show-focus
|
||||
nav.main-nav
|
||||
a(href="/").link.home CloudTube
|
||||
a(href="/subscriptions" title="Subscriptions").link.subscriptions-link
|
||||
img(src=getStaticURL("html", "/static/images/subscriptions.svg") width=30 height=25 alt="Subscriptions.").subscriptions-icon
|
||||
a(href="/subscriptions" title="Subscriptions").link.icon-link
|
||||
img(src=getStaticURL("html", "/static/images/subscriptions.svg") width=30 height=25 alt="Subscriptions.").icon
|
||||
a(href="/settings" title="Settings").link.icon-link
|
||||
img(src=getStaticURL("html", "/static/images/settings.svg") width=25 height=25 alt="Settings.").icon
|
||||
form(method="get" action="/search").search-form
|
||||
input(type="text" placeholder="Search" name="q" autocomplete="off" value=query).search
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,8 @@ mixin video_list_item(video)
|
|||
- let link = `/watch?v=${video.videoId}`
|
||||
a(href=link tabindex="-1").thumbnail
|
||||
img(src=`https://i.ytimg.com/vi/${video.videoId}/mqdefault.jpg` width=320 height=180 alt="").image
|
||||
span.duration= video.second__lengthText
|
||||
if video.second__lengthText !== undefined
|
||||
span.duration= video.second__lengthText
|
||||
.info
|
||||
div.title: a(href=link).title-link= video.title
|
||||
div.author-line
|
||||
|
|
|
|||
46
pug/settings.pug
Normal file
46
pug/settings.pug
Normal file
|
|
@ -0,0 +1,46 @@
|
|||
extends includes/layout.pug
|
||||
|
||||
mixin fieldset(name)
|
||||
fieldset
|
||||
legend= name
|
||||
.fieldset-contents
|
||||
block
|
||||
|
||||
mixin input(id, description, placeholder, disabled, list)
|
||||
.field-row
|
||||
label.description(for=id)= description
|
||||
input(type="text" id=id name=id value=settings[id] placeholder=placeholder disabled=disabled list=`${id}-list`).border-look
|
||||
if list
|
||||
datalist(id=`${id}-list`)
|
||||
each item in list
|
||||
option(value=item)
|
||||
|
||||
mixin select(id, description, disabled, options)
|
||||
.field-row
|
||||
label.description(for=id)= description
|
||||
select(id=id name=id disabled=disabled).border-look
|
||||
each option in options
|
||||
option(value=option.value selected=(option.value === settings[id]))= option.text
|
||||
|
||||
block head
|
||||
title Settings - CloudTube
|
||||
|
||||
block content
|
||||
main.settings-page
|
||||
form(method="post" action="/settings")
|
||||
+fieldset("Settings")
|
||||
|
||||
+input("instance", "Instance", constants.user_settings.instance.default, false, [
|
||||
"https://invidious.snopyta.org",
|
||||
"https://invidious.13ad.de",
|
||||
"https://watch.nettohikari.com",
|
||||
"https://invidious.fdn.fr"
|
||||
])
|
||||
|
||||
+select("save_history", "Watch history", false, [
|
||||
{value: "", text: "Don't save"},
|
||||
{value: "yes", text: "Save"}
|
||||
])
|
||||
|
||||
.save-settings
|
||||
button.border-look Save
|
||||
|
|
@ -7,6 +7,21 @@ block head
|
|||
|
||||
block content
|
||||
main.subscriptions-page
|
||||
each video in videos
|
||||
.subscriptions-video
|
||||
+video_list_item(video)
|
||||
if hasSubscriptions
|
||||
section
|
||||
details.channels-details
|
||||
summary #{channels.length} subscriptions
|
||||
.channels-list
|
||||
for channel in channels
|
||||
a(href=`/channel/${channel.ucid}`).channel-item
|
||||
img(src=channel.icon_url width=512 height=512 alt="").thumbnail
|
||||
span.name= channel.name
|
||||
|
||||
each video in videos
|
||||
.subscriptions-video
|
||||
+video_list_item(video)
|
||||
else
|
||||
.no-subscriptions
|
||||
h2 You have no subscriptions.
|
||||
p Subscribing to a channel makes its videos appear here.
|
||||
p You can find the subscribe button on channels and videos.
|
||||
|
|
|
|||
104
pug/video.pug
104
pug/video.pug
|
|
@ -4,58 +4,70 @@ include includes/video-list-item
|
|||
include includes/subscribe-button
|
||||
|
||||
block head
|
||||
title= `${video.title} - CloudTube`
|
||||
unless error
|
||||
title= `${video.title} - CloudTube`
|
||||
else
|
||||
title Error - CloudTube
|
||||
script(type="module" src=getStaticURL("html", "/static/js/player.js"))
|
||||
script const data = !{JSON.stringify(video)}
|
||||
|
||||
block content
|
||||
- const sortedFormatStreams = video.formatStreams.slice().sort((a, b) => b.second__height - a.second__height)
|
||||
- const sortedVideoAdaptiveFormats = video.adaptiveFormats.filter(f => f.type.startsWith("video")).sort((a, b) => a.second__order - b.second__order)
|
||||
main.video-page
|
||||
.main-video-section
|
||||
.video-container
|
||||
- const format = sortedFormatStreams[0]
|
||||
video(controls preload="auto" width=format.second__width height=format.second__height data-itag=format.itag)#video.video
|
||||
source(src=format.url type=format.type)
|
||||
unless error
|
||||
main.video-page
|
||||
- const sortedFormatStreams = video.formatStreams.slice().sort((a, b) => b.second__height - a.second__height)
|
||||
- const sortedVideoAdaptiveFormats = video.adaptiveFormats.filter(f => f.type.startsWith("video")).sort((a, b) => a.second__order - b.second__order)
|
||||
|
||||
#current-time-container
|
||||
#end-cards-container
|
||||
.info
|
||||
header.info-main
|
||||
h1.title= video.title
|
||||
.author
|
||||
a(href=`/channel/${video.authorId}`).author-link= `Uploaded by ${video.author}`
|
||||
.info-secondary
|
||||
- const date = new Date(video.published*1000)
|
||||
- const month = new Intl.DateTimeFormat("en-US", {month: "short"}).format(date.getTime())
|
||||
div= `Uploaded ${date.getUTCDate()} ${month} ${date.getUTCFullYear()}`
|
||||
div= video.second__viewCountText
|
||||
div(style=`--rating: ${video.rating*20}%`)#rating-bar.rating-bar
|
||||
.main-video-section
|
||||
.video-container
|
||||
- const format = sortedFormatStreams[0]
|
||||
video(controls preload="auto" width=format.second__width height=format.second__height data-itag=format.itag)#video.video
|
||||
source(src=format.url type=format.type)
|
||||
|
||||
audio(preload="auto")#audio
|
||||
#live-event-notice
|
||||
#audio-loading-display
|
||||
#current-time-container
|
||||
#end-cards-container
|
||||
.info
|
||||
header.info-main
|
||||
h1.title= video.title
|
||||
.author
|
||||
a(href=`/channel/${video.authorId}`).author-link= `Uploaded by ${video.author}`
|
||||
.info-secondary
|
||||
- const date = new Date(video.published*1000)
|
||||
- const month = new Intl.DateTimeFormat("en-US", {month: "short"}).format(date.getTime())
|
||||
div= `Uploaded ${date.getUTCDate()} ${month} ${date.getUTCFullYear()}`
|
||||
div= video.second__viewCountText
|
||||
div(style=`--rating: ${video.rating*20}%`)#rating-bar.rating-bar
|
||||
|
||||
.video-button-container
|
||||
+subscribe_button(video.authorId, subscribed, `/watch?v=${video.videoId}`).border-look
|
||||
//- button.border-look#theatre Theatre
|
||||
select(autocomplete="off").border-look#quality-select
|
||||
each f in sortedFormatStreams
|
||||
option(value=f.itag)= `${f.qualityLabel} ${f.container}`
|
||||
each f in sortedVideoAdaptiveFormats
|
||||
option(value=f.itag)= `${f.qualityLabel} ${f.container} *`
|
||||
//-
|
||||
a(href="/subscriptions").border-look
|
||||
img(src="/static/images/search.svg" width=17 height=17 alt="").button-icon
|
||||
| Search
|
||||
//- button.border-look#share Share
|
||||
a(href=`https://www.youtube.com/watch?v=${video.videoId}`).border-look YouTube
|
||||
a(href=`https://invidio.us/watch?v=${video.videoId}`).border-look Invidious
|
||||
audio(preload="auto")#audio
|
||||
#live-event-notice
|
||||
#audio-loading-display
|
||||
|
||||
.description!= video.descriptionHtml
|
||||
.button-container
|
||||
+subscribe_button(video.authorId, subscribed, `/watch?v=${video.videoId}`).border-look
|
||||
//- button.border-look#theatre Theatre
|
||||
select(autocomplete="off").border-look#quality-select
|
||||
each f in sortedFormatStreams
|
||||
option(value=f.itag)= `${f.qualityLabel} ${f.container}`
|
||||
each f in sortedVideoAdaptiveFormats
|
||||
option(value=f.itag)= `${f.qualityLabel} ${f.container} *`
|
||||
//-
|
||||
a(href="/subscriptions").border-look
|
||||
img(src="/static/images/search.svg" width=17 height=17 alt="").button-icon
|
||||
| Search
|
||||
//- button.border-look#share Share
|
||||
a(href=`https://www.youtube.com/watch?v=${video.videoId}`).border-look YouTube
|
||||
a(href=`https://invidio.us/watch?v=${video.videoId}`).border-look Invidious
|
||||
|
||||
aside.related-videos
|
||||
h2.related-header Related videos
|
||||
each r in video.recommendedVideos
|
||||
.related-video
|
||||
+video_list_item(r)
|
||||
.description!= video.descriptionHtml
|
||||
|
||||
aside.related-videos
|
||||
h2.related-header Related videos
|
||||
each r in video.recommendedVideos
|
||||
.related-video
|
||||
+video_list_item(r)
|
||||
|
||||
else
|
||||
//- error
|
||||
main.video-error-page
|
||||
h2 Error
|
||||
!= message
|
||||
p: a(href=`https://www.youtube.com/watch?v=${video.videoId}`) Watch on YouTube →
|
||||
Loading…
Add table
Add a link
Reference in a new issue