1
0
mirror of https://git.sr.ht/~cadence/cloudtube synced 2024-09-19 18:57:30 +00:00
cloudtube/pug/video.pug
Cadence Ember e0bc0d2e81
Implement watched videos
Watched videos on your subscriptions feed will be darkened, and the
option to hide all of them has been added.

This only takes effect if you have enabled saving watched videos on the
server in the settings menu - default is off.
2020-12-29 01:45:02 +13:00

77 lines
3.0 KiB
Plaintext

extends includes/layout
include includes/video-list-item
include includes/subscribe-button
block head
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
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") && f.qualityLabel).sort((a, b) => a.second__order - b.second__order)
.main-video-section
.video-container
- const format = sortedFormatStreams[0]
if format
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)
else
video(src="")#video.video
.stream-notice The server provided no playback streams.
#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
audio(preload="auto")#audio
#live-event-notice
#audio-loading-display
.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}#cloudtube`).border-look YouTube
a(href=`https://invidio.us/watch?v=${video.videoId}`).border-look Invidious
.description!= video.descriptionHtml
aside.related-videos
h2.related-header Related videos
each r in video.recommendedVideos
+video_list_item("related-video", r, instanceOrigin)
else
//- error
main.video-error-page
h2 Error
!= message
p: a(href=`https://www.youtube.com/watch?v=${video.videoId}#cloudtube`) Watch on YouTube →