Add channels page

This commit is contained in:
Cadence Ember 2020-08-30 01:21:48 +12:00
parent fc8b54d07b
commit b9b1463cff
No known key found for this signature in database
GPG Key ID: 128B99B1B74A6412
6 changed files with 152 additions and 0 deletions

12
api/channels.js Normal file
View 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
View 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)

View 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

View File

@ -12,3 +12,5 @@ $fg-dim: #bbb
$edge-grey: #808080
$link: #72b4f6
$power-deep: #c62727

View File

@ -48,3 +48,49 @@
&:hover, &:active
color: c.$fg-bright
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

View File

@ -4,6 +4,7 @@
@use "includes/video-page.sass"
@use "includes/search-page.sass"
@use "includes/home-page.sass"
@use "includes/channel-page.sass"
@font-face
font-family: "Bariol"