mirror of
https://git.sr.ht/~cadence/cloudtube
synced 2024-11-10 02:27:29 +00:00
de4438124a
This reverts commit c55429ac49.
Reasoning: The video has no height while the poster image is loading,
and then once it loads a moment later, it takes up extra space,
enlarges the video, and the page jumps. I don't know how to make the
page not jump while loading the poster. Width, height, and styles
look like they're set correctly.
77 lines
3.0 KiB
Plaintext
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+mediaFragment 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://redirect.invidious.io/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 →
|