de4438124a
This reverts commit c55429ac4937b912e42782ea6c95010a95f6d213. 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 →
|