mirror of
https://git.sr.ht/~cadence/cloudtube
synced 2024-11-14 04:17:29 +00:00
Add channels page
This commit is contained in:
parent
fc8b54d07b
commit
b9b1463cff
12
api/channels.js
Normal file
12
api/channels.js
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
const fetch = require("node-fetch")
|
||||||
|
const {render} = require("pinski/plugins")
|
||||||
|
|
||||||
|
module.exports = [
|
||||||
|
{
|
||||||
|
route: "/channel/([A-Za-z0-9-_]+)", methods: ["GET"], code: async ({fill}) => {
|
||||||
|
const id = fill[0]
|
||||||
|
const data = await fetch(`http://localhost:3000/api/v1/channels/${id}`).then(res => res.json())
|
||||||
|
return render(200, "pug/channel.pug", {data})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
]
|
28
pug/channel.pug
Normal file
28
pug/channel.pug
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
extends includes/layout.pug
|
||||||
|
|
||||||
|
include includes/video-list-item.pug
|
||||||
|
|
||||||
|
block content
|
||||||
|
main.channel-page
|
||||||
|
- const banner = data.authorBanners.slice(-1)[0]
|
||||||
|
if banner
|
||||||
|
.banner
|
||||||
|
img(src=banner.url width=banner.width height=banner.height alt="").banner-image
|
||||||
|
|
||||||
|
.channel-data
|
||||||
|
.info
|
||||||
|
- const thumbnail = data.authorThumbnails.slice(-1)[0]
|
||||||
|
if thumbnail
|
||||||
|
.logo
|
||||||
|
img(src=thumbnail.url width=thumbnail.width height=thumbnail.height alt="").thumbnail-image
|
||||||
|
.about
|
||||||
|
.name= data.author
|
||||||
|
.subscribers= data.second__subCountText || `${data.subCount} subscribers`
|
||||||
|
form(method="post" action=`/formapi/subscribe/${data.authorId}`).subscribe
|
||||||
|
button.subscribe-button.base-border-look Subscribe
|
||||||
|
.description!= data.descriptionHtml
|
||||||
|
|
||||||
|
.videos
|
||||||
|
each video in data.latestVideos
|
||||||
|
.channel-video
|
||||||
|
+video_list_item(video)
|
63
sass/includes/channel-page.sass
Normal file
63
sass/includes/channel-page.sass
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
@use "colors.sass" as c
|
||||||
|
@use "video-list-item.sass" as *
|
||||||
|
|
||||||
|
.channel-page
|
||||||
|
padding: 40px 20px 20px
|
||||||
|
max-width: 900px
|
||||||
|
margin: 0 auto
|
||||||
|
|
||||||
|
.banner
|
||||||
|
display: flex
|
||||||
|
|
||||||
|
.banner-image
|
||||||
|
width: 100%
|
||||||
|
height: auto
|
||||||
|
border-radius: 8px
|
||||||
|
|
||||||
|
.channel-data
|
||||||
|
background-color: c.$bg-darker
|
||||||
|
padding: 24px
|
||||||
|
margin: 12px 0px 24px
|
||||||
|
border-radius: 8px
|
||||||
|
|
||||||
|
.info
|
||||||
|
display: flex
|
||||||
|
|
||||||
|
.thumbnail-image
|
||||||
|
$size: 120px
|
||||||
|
|
||||||
|
width: $size
|
||||||
|
height: $size
|
||||||
|
border-radius: 50%
|
||||||
|
margin-right: 24px
|
||||||
|
|
||||||
|
.about
|
||||||
|
flex: 1
|
||||||
|
margin-top: 10px
|
||||||
|
|
||||||
|
.name
|
||||||
|
font-size: 30px
|
||||||
|
color: c.$fg-bright
|
||||||
|
|
||||||
|
.subscribers
|
||||||
|
color: c.$fg-main
|
||||||
|
font-size: 18px
|
||||||
|
|
||||||
|
.subscribe
|
||||||
|
margin-top: 24px
|
||||||
|
|
||||||
|
.subscribe-button
|
||||||
|
$padding: 14px
|
||||||
|
|
||||||
|
padding: $padding - 2px $padding $padding
|
||||||
|
line-height: 1
|
||||||
|
border-radius: 8px
|
||||||
|
font-size: 22px
|
||||||
|
background-color: c.$power-deep
|
||||||
|
border: none
|
||||||
|
|
||||||
|
.description
|
||||||
|
margin-top: 16px
|
||||||
|
|
||||||
|
.channel-video
|
||||||
|
@include channel-video
|
@ -12,3 +12,5 @@ $fg-dim: #bbb
|
|||||||
$edge-grey: #808080
|
$edge-grey: #808080
|
||||||
|
|
||||||
$link: #72b4f6
|
$link: #72b4f6
|
||||||
|
|
||||||
|
$power-deep: #c62727
|
||||||
|
@ -48,3 +48,49 @@
|
|||||||
&:hover, &:active
|
&:hover, &:active
|
||||||
color: c.$fg-bright
|
color: c.$fg-bright
|
||||||
text-decoration: underline
|
text-decoration: underline
|
||||||
|
|
||||||
|
@mixin recommendation-item
|
||||||
|
@include video-list-item
|
||||||
|
|
||||||
|
@mixin large-item
|
||||||
|
@include video-list-item
|
||||||
|
|
||||||
|
grid-gap: 16px
|
||||||
|
grid-template-columns: 240px 1fr
|
||||||
|
margin-bottom: 20px
|
||||||
|
overflow: hidden
|
||||||
|
|
||||||
|
.image
|
||||||
|
width: 240px
|
||||||
|
height: 135px
|
||||||
|
|
||||||
|
.duration
|
||||||
|
font-size: 17px
|
||||||
|
padding: 4px 5px
|
||||||
|
right: 5px
|
||||||
|
bottom: 5px
|
||||||
|
|
||||||
|
.title
|
||||||
|
font-size: 24px
|
||||||
|
|
||||||
|
.author-line
|
||||||
|
font-size: 15px
|
||||||
|
color: c.$fg-main
|
||||||
|
|
||||||
|
.author
|
||||||
|
color: c.$fg-main
|
||||||
|
|
||||||
|
.description
|
||||||
|
margin-top: 16px
|
||||||
|
font-size: 15px
|
||||||
|
color: c.$fg-dim
|
||||||
|
|
||||||
|
@mixin search-result
|
||||||
|
@include large-item
|
||||||
|
|
||||||
|
.description b
|
||||||
|
font-weight: normal
|
||||||
|
color: c.$fg-main
|
||||||
|
|
||||||
|
@mixin channel-video
|
||||||
|
@include large-item
|
||||||
|
@ -4,6 +4,7 @@
|
|||||||
@use "includes/video-page.sass"
|
@use "includes/video-page.sass"
|
||||||
@use "includes/search-page.sass"
|
@use "includes/search-page.sass"
|
||||||
@use "includes/home-page.sass"
|
@use "includes/home-page.sass"
|
||||||
|
@use "includes/channel-page.sass"
|
||||||
|
|
||||||
@font-face
|
@font-face
|
||||||
font-family: "Bariol"
|
font-family: "Bariol"
|
||||||
|
Loading…
Reference in New Issue
Block a user