1
0
mirror of https://git.sr.ht/~cadence/cloudtube synced 2024-11-10 02:27:29 +00:00
cloudtube/pug/video.pug
2021-05-02 00:59:28 +12:00

109 lines
4.5 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, continuous})}
block content
unless error
if continuous
- const first = video.recommendedVideos[0]
if first
script(type="module" src=getStaticURL("html", "/static/js/continuous.js"))
noscript
meta(http-equiv="refresh" content=`${video.lengthSeconds+5};url=/watch?v=${first.videoId}&continuous=1&session-watched=${sessionWatchedNext}`)
main.video-page
.main-video-section
.video-container
- const format = formats[0]
if format
video(controls preload="auto" width=format.second__width height=format.second__height data-itag=format.itag autoplay=continuous||autoplay)#video.video
source(src=format.url type=format.type)
each t in video.captions
track(label=t.label kind="subtitles" srclang=t.languageCode src=t.url)
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
if continuous
div#continuous-controls.continuous
.continuous__description
.continuous__title Continuous mode: next video autoplays
noscript
.continuous__script-warning Without JavaScript, it will trigger on a timer, not on video completion.
.continuous__buttons
a(href=`/watch?v=${video.videoId}`)#continuous-stop.border-look Turn off
.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 formats
option(value=f.itag)= f.cloudtube__label
//-
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://redirect.invidious.io/watch?v=${video.videoId}`).border-look Invidious
.description!= video.descriptionHtml
//- Standard view
aside(style=continuous ? "display: none" : "")#standard-related-videos.related-videos
.related-cols
h2.related-header Related videos
if video.recommendedVideos.length
.continuous-start
a(href=`/watch?v=${video.videoId}&continuous=1` nofollow) Continuous mode
each r in video.recommendedVideos
+video_list_item("related-video", r, instanceOrigin)
//- Continuous view
if continuous
aside.related-videos#continuous-related-videos
- let column = video.recommendedVideos.filter(v => !sessionWatched.includes(v.videoId))
if column.length
.related-cols
h2.related-header Autoplay next
#continuous-first
+video_list_item("related-video", column.shift(), instanceOrigin, {continuous: true})
if column.length
.related-cols
h2.related-header Related videos
each r in column
+video_list_item("related-video", r, instanceOrigin, {continuous: true}) // keep on continuous mode for all recommendations
else
//- error
main.video-error-page
h2 Error
!= message
p: a(href=`https://www.youtube.com/watch?v=${video.videoId}#cloudtube`) Watch on YouTube →