1
0
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:
Cadence Ember 2021-01-09 14:09:59 +13:00
parent 27435cc3b5
commit ac28332ac0
No known key found for this signature in database
GPG Key ID: BC1C2C61CF521B17
7 changed files with 83 additions and 18 deletions

View File

@ -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"
}
} }
} }
} }

View 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
}

View 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)
}

View File

@ -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

View File

@ -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.

View File

@ -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

View File

@ -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