mirror of
https://git.sr.ht/~cadence/cloudtube
synced 2024-11-14 04:17:29 +00:00
Add "mark watched" button to subscriptions page
This commit is contained in:
parent
27435cc3b5
commit
ac28332ac0
@ -32,23 +32,19 @@ module.exports = [
|
|||||||
if (params.has("referrer")) {
|
if (params.has("referrer")) {
|
||||||
return {
|
return {
|
||||||
statusCode: 303,
|
statusCode: 303,
|
||||||
contentType: "application/json",
|
contentType: "text/plain",
|
||||||
headers: Object.assign(responseHeaders, {
|
headers: Object.assign(responseHeaders, {
|
||||||
Location: params.get("referrer")
|
Location: params.get("referrer")
|
||||||
}),
|
}),
|
||||||
content: {
|
content: "Success, redirecting..."
|
||||||
status: "ok"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
return redirect(params.get("referrer"), 303)
|
return redirect(params.get("referrer"), 303)
|
||||||
} else {
|
} else {
|
||||||
return {
|
return {
|
||||||
statusCode: 200,
|
statusCode: 200,
|
||||||
contentType: "application/json",
|
contentType: "text/plain",
|
||||||
headers: responseHeaders,
|
headers: responseHeaders,
|
||||||
content: {
|
content: "Success."
|
||||||
status: "ok"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
@ -56,7 +52,27 @@ module.exports = [
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
route: `/formapi/erase`, methods: ["POST"], upload: true, code: async ({req, fill, body}) => {
|
route: `/formapi/markwatched/(${constants.regex.video_id})`, methods: ["POST"], code: async ({req, fill}) => {
|
||||||
|
const videoID = fill[0]
|
||||||
|
const user = getUser(req)
|
||||||
|
const token = user.token
|
||||||
|
if (token) {
|
||||||
|
db.prepare("INSERT OR IGNORE INTO WatchedVideos (token, videoID) VALUES (?, ?)").run(token, videoID)
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
statusCode: 303,
|
||||||
|
contentType: "text/plain",
|
||||||
|
headers: {
|
||||||
|
Location: "/subscriptions"
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
status: "Success, redirecting..."
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
route: "/formapi/erase", methods: ["POST"], upload: true, code: async ({req, fill, body}) => {
|
||||||
return new V()
|
return new V()
|
||||||
.with(validate.presetLoad({body}))
|
.with(validate.presetLoad({body}))
|
||||||
.with(validate.presetURLParamsBody())
|
.with(validate.presetURLParamsBody())
|
||||||
@ -69,13 +85,12 @@ module.exports = [
|
|||||||
})
|
})
|
||||||
return {
|
return {
|
||||||
statusCode: 303,
|
statusCode: 303,
|
||||||
|
contentType: "text/plain",
|
||||||
headers: {
|
headers: {
|
||||||
location: "/",
|
location: "/",
|
||||||
"set-cookie": `token=; Path=/; Max-Age=0; HttpOnly; SameSite=Lax`
|
"set-cookie": `token=; Path=/; Max-Age=0; HttpOnly; SameSite=Lax`
|
||||||
},
|
},
|
||||||
content: {
|
content: "Success, redirecting..."
|
||||||
status: "ok"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
.go()
|
.go()
|
||||||
@ -88,10 +103,8 @@ module.exports = [
|
|||||||
headers: setToken({
|
headers: setToken({
|
||||||
location: "/subscriptions"
|
location: "/subscriptions"
|
||||||
}, fill[0]).responseHeaders,
|
}, fill[0]).responseHeaders,
|
||||||
contentType: "application/json",
|
contentType: "text/plain",
|
||||||
content: {
|
content: "Success, redirecting..."
|
||||||
status: "ok"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
24
html/static/js/mark-watched.js
Normal file
24
html/static/js/mark-watched.js
Normal file
@ -0,0 +1,24 @@
|
|||||||
|
import {ElemJS} from "/static/js/elemjs/elemjs.js"
|
||||||
|
|
||||||
|
class MarkWatchedButton extends ElemJS {
|
||||||
|
constructor(element) {
|
||||||
|
super(element)
|
||||||
|
this.on("click", this.onClick.bind(this))
|
||||||
|
}
|
||||||
|
|
||||||
|
onClick(event) {
|
||||||
|
event.preventDefault()
|
||||||
|
let video = this.element
|
||||||
|
while (!video.classList.contains("subscriptions-video")) {
|
||||||
|
video = video.parentElement
|
||||||
|
}
|
||||||
|
video.classList.add("video-list-item--watched")
|
||||||
|
const form = this.element.parentElement
|
||||||
|
fetch(form.getAttribute("action"), {method: "POST"})
|
||||||
|
form.remove()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export {
|
||||||
|
MarkWatchedButton
|
||||||
|
}
|
6
html/static/js/subscriptions.js
Normal file
6
html/static/js/subscriptions.js
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
import {qa} from "/static/js/elemjs/elemjs.js"
|
||||||
|
import {MarkWatchedButton} from "/static/js/mark-watched.js"
|
||||||
|
|
||||||
|
for (const button of qa(".mark-watched__button")) {
|
||||||
|
new MarkWatchedButton(button)
|
||||||
|
}
|
@ -1,4 +1,4 @@
|
|||||||
mixin video_list_item(className, video, instanceOrigin)
|
mixin video_list_item(className, video, instanceOrigin, options = {})
|
||||||
div(class={[className]: true, "video-list-item--watched": video.watched})
|
div(class={[className]: true, "video-list-item--watched": video.watched})
|
||||||
- let link = `/watch?v=${video.videoId}`
|
- let link = `/watch?v=${video.videoId}`
|
||||||
a(href=link tabindex="-1").thumbnail
|
a(href=link tabindex="-1").thumbnail
|
||||||
@ -16,5 +16,9 @@ mixin video_list_item(className, video, instanceOrigin)
|
|||||||
if video.publishedText
|
if video.publishedText
|
||||||
= ` • `
|
= ` • `
|
||||||
span.published= video.publishedText
|
span.published= video.publishedText
|
||||||
|
if options.showMarkWatched
|
||||||
|
form(method="post" action=`/formapi/markwatched/${video.videoId}`).mark-watched
|
||||||
|
= ` • `
|
||||||
|
button.mark-watched__button Mark watched
|
||||||
if video.descriptionHtml
|
if video.descriptionHtml
|
||||||
div.description!= video.descriptionHtml
|
div.description!= video.descriptionHtml
|
||||||
|
@ -4,6 +4,7 @@ include includes/video-list-item.pug
|
|||||||
|
|
||||||
block head
|
block head
|
||||||
title Subscriptions - CloudTube
|
title Subscriptions - CloudTube
|
||||||
|
script(type="module" src=getStaticURL("html", "/static/js/subscriptions.js"))
|
||||||
|
|
||||||
block content
|
block content
|
||||||
main.subscriptions-page
|
main.subscriptions-page
|
||||||
@ -34,7 +35,7 @@ block content
|
|||||||
label(for="watched-videos-display").watched-videos-display-label Hide watched videos
|
label(for="watched-videos-display").watched-videos-display-label Hide watched videos
|
||||||
|
|
||||||
each video in videos
|
each video in videos
|
||||||
+video_list_item("subscriptions-video", video, instanceOrigin)
|
+video_list_item("subscriptions-video", video, instanceOrigin, {showMarkWatched: settings.save_history && !video.watched})
|
||||||
else
|
else
|
||||||
.no-subscriptions
|
.no-subscriptions
|
||||||
h2 You have no subscriptions.
|
h2 You have no subscriptions.
|
||||||
|
@ -101,3 +101,17 @@ fieldset
|
|||||||
.#{$base}-label
|
.#{$base}-label
|
||||||
padding: 12px 0px 12px 32px
|
padding: 12px 0px 12px 32px
|
||||||
cursor: pointer
|
cursor: pointer
|
||||||
|
|
||||||
|
@mixin single-button-form
|
||||||
|
display: inline-block
|
||||||
|
white-space: pre-wrap // preserve whitespace inside the form at the edge
|
||||||
|
|
||||||
|
> button
|
||||||
|
background: none
|
||||||
|
padding: 0
|
||||||
|
margin: 0
|
||||||
|
border: none
|
||||||
|
color: inherit
|
||||||
|
font-family: inherit
|
||||||
|
font-size: inherit
|
||||||
|
text-decoration: underline
|
||||||
|
@ -39,3 +39,6 @@
|
|||||||
|
|
||||||
#watched-videos-display:checked ~ .video-list-item--watched
|
#watched-videos-display:checked ~ .video-list-item--watched
|
||||||
display: none
|
display: none
|
||||||
|
|
||||||
|
.mark-watched
|
||||||
|
@include forms.single-button-form
|
||||||
|
Loading…
Reference in New Issue
Block a user