mirror of
https://git.sr.ht/~cadence/cloudtube
synced 2024-11-12 19:37:29 +00:00
Settings page and instance selection
This commit is contained in:
parent
59a7489545
commit
c573a5ac3e
@ -7,8 +7,9 @@ module.exports = [
|
||||
{
|
||||
route: `/channel/(${constants.regex.ucid})`, methods: ["GET"], code: async ({req, fill}) => {
|
||||
const id = fill[0]
|
||||
const data = await fetchChannel(id)
|
||||
const user = getUser(req)
|
||||
const settings = user.getSettingsOrDefaults()
|
||||
const data = await fetchChannel(id, settings.instance)
|
||||
const subscribed = user.isSubscribed(id)
|
||||
return render(200, "pug/channel.pug", {data, subscribed})
|
||||
}
|
||||
|
67
api/settings.js
Normal file
67
api/settings.js
Normal file
@ -0,0 +1,67 @@
|
||||
const {render, redirect} = require("pinski/plugins")
|
||||
const db = require("./utils/db")
|
||||
const {getToken, getUser} = require("./utils/getuser")
|
||||
const constants = require("./utils/constants")
|
||||
const validate = require("./utils/validate")
|
||||
const V = validate.V
|
||||
|
||||
module.exports = [
|
||||
{
|
||||
route: "/settings", methods: ["GET"], code: async ({req}) => {
|
||||
const user = getUser(req)
|
||||
const settings = user.getSettings()
|
||||
return render(200, "pug/settings.pug", {constants, settings})
|
||||
}
|
||||
},
|
||||
{
|
||||
route: "/settings", methods: ["POST"], upload: true, code: async ({req, body}) => {
|
||||
return new V()
|
||||
.with(validate.presetLoad({body}))
|
||||
.with(validate.presetURLParamsBody())
|
||||
.last(async state => {
|
||||
const {params} = state
|
||||
const responseHeaders = {
|
||||
Location: "/settings"
|
||||
}
|
||||
const token = getToken(req, responseHeaders)
|
||||
const data = {}
|
||||
|
||||
for (const key of Object.keys(constants.user_settings)) {
|
||||
const setting = constants.user_settings[key]
|
||||
if (params.has(key)) {
|
||||
const provided = params.get(key)
|
||||
if (setting.type === "string") {
|
||||
if (provided) data[key] = provided
|
||||
else data[key] = null
|
||||
} else if (setting.type === "integer") {
|
||||
if (isNaN(provided)) data[key] = null
|
||||
else data[key] = +provided
|
||||
} else if (setting.type === "boolean") {
|
||||
if (provided === "true") data[key] = true
|
||||
else if (provided === "false") data[key] = false
|
||||
else data[key] = null
|
||||
} else {
|
||||
throw new Error("Unsupported setting type: "+setting.type)
|
||||
}
|
||||
} else {
|
||||
data[key] = null
|
||||
}
|
||||
}
|
||||
|
||||
db.prepare("DELETE FROM Settings WHERE token = ?").run(token)
|
||||
const keys = ["token", ...Object.keys(constants.user_settings)]
|
||||
const baseFields = keys.join(", ")
|
||||
const atFields = keys.map(k => "@"+k).join(", ")
|
||||
db.prepare(`INSERT INTO Settings (${baseFields}) VALUES (${atFields})`).run({token, ...data})
|
||||
|
||||
return {
|
||||
statusCode: 303,
|
||||
headers: responseHeaders,
|
||||
contentType: "text/html",
|
||||
content: "Redirecting..."
|
||||
}
|
||||
})
|
||||
.go()
|
||||
}
|
||||
}
|
||||
]
|
@ -1,4 +1,15 @@
|
||||
const constants = {
|
||||
user_settings: {
|
||||
instance: {
|
||||
type: "string",
|
||||
default: "https://invidious.snopyta.org"
|
||||
},
|
||||
save_history: {
|
||||
type: "boolean",
|
||||
default: false
|
||||
}
|
||||
},
|
||||
|
||||
caching: {
|
||||
csrf_time: 4*60*60*1000
|
||||
},
|
||||
|
@ -23,6 +23,22 @@ class User {
|
||||
this.token = token
|
||||
}
|
||||
|
||||
getSettings() {
|
||||
if (this.token) {
|
||||
return db.prepare("SELECT * FROM Settings WHERE token = ?").get(this.token) || {}
|
||||
} else {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
|
||||
getSettingsOrDefaults() {
|
||||
const settings = this.getSettings()
|
||||
for (const key of Object.keys(settings)) {
|
||||
if (settings[key] === null) settings[key] = constants.user_settings[key].default
|
||||
}
|
||||
return settings
|
||||
}
|
||||
|
||||
getSubscriptions() {
|
||||
if (this.token) {
|
||||
return db.prepare("SELECT ucid FROM Subscriptions WHERE token = ?").pluck().all(this.token)
|
||||
|
@ -10,8 +10,14 @@ const deltas = [
|
||||
.run()
|
||||
db.prepare("CREATE TABLE Channels (ucid TEXT NOT NULL, name TEXT NOT NULL, icon_url TEXT, PRIMARY KEY (ucid))")
|
||||
.run()
|
||||
db.prepare("CREATE TABLE Videos (videoId TEXT NOT NULL, title TEXT NOT NULL, author TEXT, authorId TEXT NOT NULL, published INTEGER, publishedText TEXT, lengthText TEXT, viewCountText TEXT, descriptionHtml TEXT, PRIMARY KEY (videoId))")
|
||||
.run()
|
||||
db.prepare("CREATE TABLE CSRFTokens (token TEXT NOT NULL, expires INTEGER NOT NULL, PRIMARY KEY (token))")
|
||||
.run()
|
||||
db.prepare("CREATE TABLE SeenTokens (token TEXT NOT NULL, seen INTEGER NOT NULL, PRIMARY KEY (token))")
|
||||
.run()
|
||||
db.prepare("CREATE TABLE Settings (token TEXT NOT NULL, instance TEXT, save_history INTEGER, PRIMARY KEY (token))")
|
||||
.run()
|
||||
}
|
||||
]
|
||||
|
||||
|
@ -1,9 +1,9 @@
|
||||
const fetch = require("node-fetch")
|
||||
const db = require("./db")
|
||||
|
||||
async function fetchChannel(ucid) {
|
||||
async function fetchChannel(ucid, instance) {
|
||||
// fetch
|
||||
const channel = await fetch(`http://localhost:3000/api/v1/channels/${ucid}`).then(res => res.json())
|
||||
const channel = await fetch(`${instance}/api/v1/channels/${ucid}`).then(res => res.json())
|
||||
// update database
|
||||
const bestIcon = channel.authorThumbnails.slice(-1)[0]
|
||||
const iconURL = bestIcon ? bestIcon.url : null
|
||||
|
43
api/video.js
43
api/video.js
@ -1,19 +1,48 @@
|
||||
const fetch = require("node-fetch")
|
||||
const {render} = require("pinski/plugins")
|
||||
const db = require("./utils/db")
|
||||
const {getToken} = require("./utils/getuser")
|
||||
const {getToken, getUser} = require("./utils/getuser")
|
||||
const pug = require("pug")
|
||||
|
||||
class InstanceError extends Error {
|
||||
constructor(error, identifier) {
|
||||
super(error)
|
||||
this.identifier = identifier
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = [
|
||||
{
|
||||
route: "/watch", methods: ["GET"], code: async ({req, url}) => {
|
||||
const id = url.searchParams.get("v")
|
||||
const video = await fetch(`http://localhost:3000/api/v1/videos/${id}`).then(res => res.json())
|
||||
let subscribed = false
|
||||
const token = getToken(req)
|
||||
if (token) {
|
||||
subscribed = !!db.prepare("SELECT * FROM Subscriptions WHERE token = ? AND ucid = ?").get([token, video.authorId])
|
||||
const user = getUser(req)
|
||||
const settings = user.getSettingsOrDefaults()
|
||||
const outURL = `${settings.instance}/api/v1/videos/${id}`
|
||||
try {
|
||||
const video = await fetch(outURL).then(res => res.json())
|
||||
if (!video) throw new Error("The instance returned null.")
|
||||
if (video.error) throw new InstanceError(video.error, video.identifier)
|
||||
const subscribed = user.isSubscribed(video.authorId)
|
||||
return render(200, "pug/video.pug", {video, subscribed})
|
||||
} catch (e) {
|
||||
let message = pug.render("pre= error", {error: e.stack || e.toString()})
|
||||
if (e instanceof fetch.FetchError) {
|
||||
const template = `
|
||||
p The selected instance, #[code= instance], did not respond correctly.
|
||||
p Requested URL: #[a(href=url)= url]
|
||||
`
|
||||
message = pug.render(template, {instance: settings.instance, url: outURL})
|
||||
} else if (e instanceof InstanceError) {
|
||||
const template = `
|
||||
p #[strong= error.message]
|
||||
if error.identifier
|
||||
p #[code= error.identifier]
|
||||
p That error was generated by #[code= instance].
|
||||
`
|
||||
message = pug.render(template, {instance: settings.instance, error: e})
|
||||
}
|
||||
return render(500, "pug/video.pug", {video: {videoId: id}, error: true, message})
|
||||
}
|
||||
return render(200, "pug/video.pug", {video, subscribed})
|
||||
}
|
||||
}
|
||||
]
|
||||
|
2
background/feed-update.js
Normal file
2
background/feed-update.js
Normal file
@ -0,0 +1,2 @@
|
||||
const db = require("../api/utils/db")
|
||||
|
87
html/static/images/settings.svg
Normal file
87
html/static/images/settings.svg
Normal file
@ -0,0 +1,87 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
width="25"
|
||||
height="25"
|
||||
viewBox="0 0 6.6145832 6.6145837"
|
||||
version="1.1"
|
||||
id="svg27"
|
||||
inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
|
||||
sodipodi:docname="settings.svg">
|
||||
<defs
|
||||
id="defs21">
|
||||
<clipPath
|
||||
clipPathUnits="userSpaceOnUse"
|
||||
id="clipPath54">
|
||||
<rect
|
||||
style="opacity:1;fill:#c4c4c4;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.0583334;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke"
|
||||
id="rect56"
|
||||
width="5.7141514"
|
||||
height="5.8818746"
|
||||
x="-344.6713"
|
||||
y="-23.818602" />
|
||||
</clipPath>
|
||||
</defs>
|
||||
<sodipodi:namedview
|
||||
id="base"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#666666"
|
||||
borderopacity="1.0"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pageshadow="2"
|
||||
inkscape:zoom="11.313708"
|
||||
inkscape:cx="30.493294"
|
||||
inkscape:cy="11.333495"
|
||||
inkscape:document-units="px"
|
||||
inkscape:current-layer="layer1"
|
||||
showgrid="false"
|
||||
units="px"
|
||||
inkscape:window-width="1440"
|
||||
inkscape:window-height="877"
|
||||
inkscape:window-x="0"
|
||||
inkscape:window-y="0"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:snap-global="true"
|
||||
inkscape:snap-center="true"
|
||||
inkscape:snap-bbox="true"
|
||||
inkscape:snap-bbox-midpoints="false"
|
||||
showguides="false">
|
||||
<inkscape:grid
|
||||
type="xygrid"
|
||||
id="grid40"
|
||||
originx="-46.744516"
|
||||
originy="-203.04119" />
|
||||
</sodipodi:namedview>
|
||||
<metadata
|
||||
id="metadata24">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title></dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="layer1"
|
||||
transform="translate(344.08287,33.230171)">
|
||||
<path
|
||||
id="path100"
|
||||
style="opacity:1;fill:#c4c4c4;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.0583334;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;paint-order:fill markers stroke"
|
||||
d="m -341.44225,-33.230169 c 0,0 -0.0312,0.939474 -0.42432,1.214551 -0.39309,0.275081 -1.33164,-0.320927 -1.33164,-0.320927 l -0.77299,1.338204 c -4e-5,-2.6e-5 -0.003,-0.0017 -0.003,-0.0017 l 0.003,0.0023 c 0.0111,0.0056 0.79687,0.498135 0.83826,0.973489 0.0416,0.477954 -0.94437,0.992482 -0.94437,0.992482 l 0.77131,1.339876 c 0,0 0.82948,-0.442244 1.26426,-0.239355 0.43479,0.202871 0.38726,1.313379 0.38726,1.313379 l 1.54597,0.0023 c 0,0 0.0312,-0.939459 0.42429,-1.21454 0.39309,-0.27508 1.33168,0.320916 1.33168,0.320916 l 0.77468,-1.337642 c 0,0 -0.79776,-0.496643 -0.8394,-0.974608 -0.0416,-0.477957 0.94383,-0.992483 0.94383,-0.992483 l -0.77131,-1.339874 c 0,0 -0.82893,0.442849 -1.26369,0.239971 -0.43478,-0.202878 -0.38784,-1.313998 -0.38784,-1.313998 z m 0.68755,2.250259 c 0.61082,-1.69e-4 1.10602,0.495039 1.10586,1.105858 -1.4e-4,0.610603 -0.49526,1.105472 -1.10586,1.105302 -0.61038,-1.38e-4 -1.10517,-0.494918 -1.1053,-1.105302 -1.7e-4,-0.6106 0.49469,-1.105718 1.1053,-1.105858 z"
|
||||
inkscape:connector-curvature="0"
|
||||
sodipodi:nodetypes="cccccccccccccccccccccccccc" />
|
||||
</g>
|
||||
</svg>
|
After Width: | Height: | Size: 3.8 KiB |
@ -49,6 +49,7 @@ class FormatLoader {
|
||||
video.currentTime = lastTime
|
||||
if (this.npa) {
|
||||
audio.src = this.npa.url
|
||||
audio.pause()
|
||||
audio.currentTime = lastTime
|
||||
} else {
|
||||
audio.pause()
|
||||
@ -59,6 +60,30 @@ class FormatLoader {
|
||||
|
||||
const formatLoader = new FormatLoader()
|
||||
|
||||
class PlayManager {
|
||||
constructor(media, isAudio) {
|
||||
this.media = media
|
||||
this.isAudio = isAudio
|
||||
}
|
||||
|
||||
isActive() {
|
||||
return !this.isAudio || formatLoader.npa
|
||||
}
|
||||
|
||||
play() {
|
||||
if (this.isActive()) this.media.play()
|
||||
}
|
||||
|
||||
pause() {
|
||||
if (this.isActive()) this.media.pause()
|
||||
}
|
||||
}
|
||||
|
||||
const playManagers = {
|
||||
video: new PlayManager(video, false),
|
||||
audio: new PlayManager(audio, true)
|
||||
}
|
||||
|
||||
class QualitySelect extends ElemJS {
|
||||
constructor() {
|
||||
super(q("#quality-select"))
|
||||
@ -74,12 +99,21 @@ class QualitySelect extends ElemJS {
|
||||
|
||||
const qualitySelect = new QualitySelect()
|
||||
|
||||
const ignoreNext = {
|
||||
play: 0
|
||||
}
|
||||
|
||||
function playbackIntervention(event) {
|
||||
console.log(event.target.tagName.toLowerCase(), event.type)
|
||||
if (audio.src) {
|
||||
let target = event.target
|
||||
let targetName = target.tagName.toLowerCase()
|
||||
let other = (event.target === video ? audio : video)
|
||||
let targetPlayManager = playManagers[target.tagName.toLowerCase()]
|
||||
let otherPlayManager = playManagers[other.tagName.toLowerCase()]
|
||||
if (ignoreNext[event.type] > 0) {
|
||||
ignoreNext[event.type]--
|
||||
return
|
||||
}
|
||||
switch (event.type) {
|
||||
case "durationchange":
|
||||
target.ready = false;
|
||||
@ -91,7 +125,7 @@ function playbackIntervention(event) {
|
||||
break;
|
||||
case "play":
|
||||
other.currentTime = target.currentTime;
|
||||
other.play();
|
||||
otherPlayManager.play();
|
||||
break;
|
||||
case "pause":
|
||||
other.currentTime = target.currentTime;
|
||||
@ -125,13 +159,44 @@ function relativeSeek(seconds) {
|
||||
video.currentTime += seconds
|
||||
}
|
||||
|
||||
function playVideo() {
|
||||
audio.currentTime = video.currentTime
|
||||
let lastTime = video.currentTime
|
||||
video.play().then(() => {
|
||||
const interval = setInterval(() => {
|
||||
console.log("checking video", video.currentTime, lastTime)
|
||||
if (video.currentTime !== lastTime) {
|
||||
clearInterval(interval)
|
||||
playManagers.audio.play()
|
||||
return
|
||||
}
|
||||
}, 15)
|
||||
})
|
||||
}
|
||||
|
||||
function togglePlaying() {
|
||||
if (video.paused) video.play()
|
||||
if (video.paused) playVideo()
|
||||
else video.pause()
|
||||
}
|
||||
|
||||
function toggleFullScreen() {
|
||||
if (document.fullscreen) document.exitFullscreen()
|
||||
else video.requestFullscreen()
|
||||
}
|
||||
|
||||
video.addEventListener("click", event => {
|
||||
event.preventDefault()
|
||||
togglePlaying()
|
||||
})
|
||||
|
||||
video.addEventListener("dblclick", event => {
|
||||
event.preventDefault()
|
||||
toggleFullScreen()
|
||||
})
|
||||
|
||||
document.addEventListener("keydown", event => {
|
||||
if (["INPUT", "SELECT", "BUTTON"].includes(event.target.tagName)) return
|
||||
if (event.ctrlKey || event.shiftKey) return
|
||||
let caught = true
|
||||
if (event.key === "j" || event.key === "n") {
|
||||
relativeSeek(-10)
|
||||
@ -148,8 +213,7 @@ document.addEventListener("keydown", event => {
|
||||
} else if (event.key >= "0" && event.key <= "9") {
|
||||
video.currentTime = video.duration * (+event.key) / 10
|
||||
} else if (event.key === "f") {
|
||||
if (document.fullscreen) document.exitFullscreen()
|
||||
else video.requestFullscreen()
|
||||
toggleFullScreen()
|
||||
} else {
|
||||
caught = false
|
||||
}
|
||||
|
@ -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 →
|
@ -11,6 +11,14 @@ body
|
||||
a
|
||||
color: c.$link
|
||||
|
||||
pre, code
|
||||
font-size: 0.88em
|
||||
|
||||
code
|
||||
background: c.$bg-darker
|
||||
padding: 3px 5px
|
||||
border-radius: 4px
|
||||
|
||||
input, select, button
|
||||
font-family: inherit
|
||||
font-size: 16px
|
||||
@ -38,3 +46,19 @@ body.show-focus
|
||||
|
||||
video
|
||||
background-color: black
|
||||
|
||||
details
|
||||
background-color: c.$bg-accent-x
|
||||
padding: 12px
|
||||
border-radius: 8px
|
||||
|
||||
summary
|
||||
text-decoration: underline
|
||||
cursor: pointer
|
||||
line-height: 1
|
||||
margin-bottom: 0
|
||||
user-select: none
|
||||
color: c.$fg-main
|
||||
|
||||
&[open] summary
|
||||
margin-bottom: 16px
|
||||
|
81
sass/includes/forms.sass
Normal file
81
sass/includes/forms.sass
Normal file
@ -0,0 +1,81 @@
|
||||
@use "colors.sass" as c
|
||||
|
||||
@mixin disabled
|
||||
background-color: c.$bg-dark
|
||||
color: #808080
|
||||
|
||||
fieldset
|
||||
border: none
|
||||
padding: 55px 0px 0px 0px
|
||||
position: relative
|
||||
|
||||
@media screen and (max-width: 400px)
|
||||
padding-top: 70px
|
||||
|
||||
legend
|
||||
position: absolute
|
||||
top: 5px
|
||||
left: 0px
|
||||
width: 100%
|
||||
font-size: 28px
|
||||
font-weight: bold
|
||||
padding: 0
|
||||
border-bottom: 1px solid #333
|
||||
line-height: 1.56
|
||||
|
||||
@media screen and (max-width: 400px)
|
||||
margin-top: 15px
|
||||
|
||||
|
||||
.field-row
|
||||
line-height: 1
|
||||
display: flex
|
||||
align-items: center
|
||||
justify-content: space-between
|
||||
position: relative
|
||||
padding-bottom: 5px
|
||||
margin-bottom: 5px
|
||||
border-bottom: 1px solid #bbb
|
||||
|
||||
@media screen and (max-width: 400px)
|
||||
flex-direction: column
|
||||
align-items: start
|
||||
padding-bottom: 15px
|
||||
|
||||
.description
|
||||
padding: 8px 8px 8px 0px
|
||||
|
||||
//
|
||||
.checkbox-row
|
||||
.pill
|
||||
display: flex
|
||||
align-items: center
|
||||
user-select: none
|
||||
|
||||
.fake-checkbox
|
||||
-webkit-appearance: none
|
||||
background-color: white
|
||||
width: 16px
|
||||
height: 16px
|
||||
padding: 0px
|
||||
border: 1px solid #666
|
||||
border-radius: 3px
|
||||
margin-left: 8px
|
||||
position: relative
|
||||
outline: none
|
||||
|
||||
.checkbox
|
||||
display: none
|
||||
|
||||
&:checked + .pill .fake-checkbox
|
||||
background: center center / contain url(/static/img/tick.svg)
|
||||
|
||||
&:disabled + .pill
|
||||
@include disabled
|
||||
|
||||
.fake-checkbox
|
||||
@include disabled
|
||||
|
||||
&.checkbox:not(:disabled) + .pill
|
||||
@include acts-like-button
|
||||
cursor: pointer
|
11
sass/includes/settings-page.sass
Normal file
11
sass/includes/settings-page.sass
Normal file
@ -0,0 +1,11 @@
|
||||
.settings-page
|
||||
padding: 40px 20px 20px
|
||||
max-width: 600px
|
||||
margin: 0 auto
|
||||
|
||||
.save-settings
|
||||
margin-top: 24px
|
||||
|
||||
.border-look
|
||||
font-size: 22px
|
||||
padding: 7px 16px 8px
|
@ -1,3 +1,4 @@
|
||||
@use "colors.sass" as c
|
||||
@use "video-list-item.sass" as *
|
||||
|
||||
.subscriptions-page
|
||||
@ -7,3 +8,28 @@
|
||||
|
||||
.subscriptions-video
|
||||
@include subscriptions-video
|
||||
|
||||
.no-subscriptions
|
||||
text-align: center
|
||||
|
||||
.channels-details
|
||||
margin-bottom: 24px
|
||||
|
||||
.channels-list
|
||||
display: grid
|
||||
grid-gap: 8px
|
||||
|
||||
.channel-item
|
||||
display: flex
|
||||
align-items: center
|
||||
text-decoration: none
|
||||
|
||||
.thumbnail
|
||||
width: 40px
|
||||
height: 40px
|
||||
border-radius: 50%
|
||||
margin-right: 8px
|
||||
|
||||
.name
|
||||
font-size: 22px
|
||||
color: c.$fg-main
|
||||
|
@ -74,3 +74,8 @@
|
||||
|
||||
.related-video
|
||||
@include video-list-item
|
||||
|
||||
.video-error-page
|
||||
padding: 40px 20px 20px
|
||||
margin: 0 auto
|
||||
max-width: 600px
|
||||
|
@ -6,13 +6,15 @@
|
||||
@use "includes/home-page.sass"
|
||||
@use "includes/channel-page.sass"
|
||||
@use "includes/subscriptions-page.sass"
|
||||
@use "includes/settings-page.sass"
|
||||
@use "includes/forms.sass"
|
||||
|
||||
@font-face
|
||||
font-family: "Bariol"
|
||||
src: url(/static/fonts/bariol.woff?statichash=1)
|
||||
|
||||
@mixin button-base
|
||||
appearance: none
|
||||
-webkit-appearance: none
|
||||
-moz-appearance: none
|
||||
color: c.$fg-bright
|
||||
border: none
|
||||
@ -23,12 +25,15 @@
|
||||
line-height: 1.25
|
||||
|
||||
@at-root #{selector.unify(&, "select")}
|
||||
padding: 7px 27px 7px 8px
|
||||
padding: 8px 27px 8px 8px
|
||||
background: url(/static/images/arrow-down-wide.svg) right 53% no-repeat c.$bg-accent-x
|
||||
|
||||
@at-root #{selector.unify(&, "a")}
|
||||
padding: 7px 8px
|
||||
|
||||
@at-root #{selector.unify(&, "button")}
|
||||
cursor: pointer
|
||||
|
||||
.button-icon
|
||||
position: relative
|
||||
top: 3px
|
||||
@ -102,6 +107,9 @@
|
||||
border: 1px solid c.$edge-grey
|
||||
margin: 0px
|
||||
|
||||
.subscriptions-link:hover, .subscriptions-link:focus
|
||||
.subscriptions-icon
|
||||
.icon-link:hover, .icon-link:focus
|
||||
.icon
|
||||
filter: brightness(2)
|
||||
|
||||
.button-container
|
||||
display: flex
|
||||
|
Loading…
Reference in New Issue
Block a user