Add subscriptions page

api/subscriptions.js

@@ -0,0 +1,30 @@
+const {render} = require("pinski/plugins")
+const db = require("./utils/db")
+const {fetchChannelLatest} = require("./utils/youtube")
+const {getUser} = require("./utils/getuser")
+
+module.exports = [
+	{
+		route: `/subscriptions`, methods: ["GET"], code: async ({req}) => {
+			const user = getUser(req)
+			let hasSubscriptions = false
+			let videos = []
+			let channels = []
+			if (user.token) {
+				const subscriptions = user.getSubscriptions()
+				const channelPrepared = db.prepare("SELECT * FROM Channels WHERE ucid = ?")
+				channels = subscriptions.map(id => channelPrepared.get(id)).sort((a, b) => {
+					if (a.name < b.name) return -1
+					else if (b.name > a.name) return 1
+					else return 0
+				})
+				if (subscriptions.length) {
+					hasSubscriptions = true
+					const all = await Promise.all(subscriptions.map(id => fetchChannelLatest(id)))
+					videos = all.flat(1).sort((a, b) => b.published - a.published).slice(0, 60)
+				}
+			}
+			return render(200, "pug/subscriptions.pug", {hasSubscriptions, videos, channels})
+		}
+	}
+]

api/utils/getuser.js

@@ -1,6 +1,5 @@
 const crypto = require("crypto")
 const {parse: parseCookie} = require("cookie")
-
 const constants = require("./constants")
 const db = require("./db")
 
@@ -26,7 +25,7 @@ class User {
 
 	getSubscriptions() {
 		if (this.token) {
-			return db.prepare("SELECT ucid FROM Subscriptions WHERE token = ?").pluck().all(ucid)
+			return db.prepare("SELECT ucid FROM Subscriptions WHERE token = ?").pluck().all(this.token)
 		} else {
 			return []
 		}

api/utils/youtube.js

@@ -12,4 +12,14 @@ async function fetchChannel(ucid) {
 	return channel
 }
 
+function fetchChannelLatest(ucid) {
+	return fetch(`http://localhost:3000/api/v1/channels/${ucid}/latest`).then(res => res.json()).then(root => {
+		root.forEach(video => {
+			video.descriptionHtml = video.descriptionHtml.replace(/<a /g, '<a tabindex="-1" ')
+		})
+		return root
+	})
+}
+
 module.exports.fetchChannel = fetchChannel
+module.exports.fetchChannelLatest = fetchChannelLatest

html/static/images/subscriptions.svg

@@ -0,0 +1,76 @@
+<?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="30"
+   height="24.999874"
+   viewBox="0 0 7.9374998 6.6145502"
+   version="1.1"
+   id="svg27"
+   inkscape:version="0.92.4 (5da689c313, 2019-01-14)"
+   sodipodi:docname="subscriptions.svg">
+  <defs
+     id="defs21" />
+  <sodipodi:namedview
+     id="base"
+     pagecolor="#36393f"
+     bordercolor="#666666"
+     borderopacity="1.0"
+     inkscape:pageopacity="0"
+     inkscape:pageshadow="2"
+     inkscape:zoom="22.627417"
+     inkscape:cx="17.632604"
+     inkscape:cy="10.153317"
+     inkscape:document-units="px"
+     inkscape:current-layer="layer1"
+     showgrid="true"
+     units="px"
+     inkscape:window-width="1440"
+     inkscape:window-height="877"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="1"
+     inkscape:snap-bbox="true"
+     inkscape:snap-bbox-edge-midpoints="false"
+     inkscape:snap-text-baseline="false"
+     inkscape:snap-center="false"
+     inkscape:snap-global="false"
+     inkscape:pagecheckerboard="false">
+    <inkscape:grid
+       type="xygrid"
+       id="grid828"
+       originx="32.014582"
+       originy="-164.3063" />
+  </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 />
+      </cc:Work>
+    </rdf:RDF>
+  </metadata>
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(32.014583,-126.07915)">
+    <path
+       id="rect15"
+       style="opacity:1;fill:#c4c4c4;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.05833316;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 -29.641547,126.07915 h 3.191429 c 0.288608,0 0.520954,0.23235 0.520954,0.52096 H -30.1625 c 0,-0.28861 0.232345,-0.52096 0.520953,-0.52096 z m -0.90981,0.79375 h 5.011047 c 0.37089,0 0.669473,0.29859 0.669476,0.66948 l 10e-7,0.12427 -6.35,-0.0163 v -0.10799 c 0,-0.37089 0.298586,-0.66948 0.669476,-0.66948 z m -0.404893,1.0583 c -0.586322,0 -1.058333,0.33169 -1.058333,0.91801 v 2.86801 c 0,0.58632 0.472011,0.97648 1.058333,0.97648 h 5.820834 c 0.586321,0 1.058333,-0.39016 1.058333,-0.97648 v -2.86801 c 0,-0.58632 -0.472012,-0.91801 -1.058333,-0.91801 z m 4.241825,2.16468 c 0.167331,0.0992 0.189069,0.27627 0.01203,0.3666 l -2.09776,0.9851 c -0.131847,0.0763 -0.304206,-0.002 -0.302769,-0.19054 v -1.88797 c 0,-0.20313 0.17976,-0.33275 0.340294,-0.24486 z"
+       inkscape:connector-curvature="0"
+       sodipodi:nodetypes="ssccscssccsccsssssssssccccccc" />
+  </g>
+</svg>

pug/includes/layout.pug

@@ -10,6 +10,8 @@ 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
       form(method="get" action="/search").search-form
         input(type="text" placeholder="Search" name="q" autocomplete="off" value=query).search
 

pug/includes/video-list-item.pug

@@ -1,14 +1,16 @@
 mixin video_list_item(video)
   - let link = `/watch?v=${video.videoId}`
-  a(href=link).thumbnail
+  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
   .info
     div.title: a(href=link).title-link= video.title
     div.author-line
       a(href=`/channel/${video.authorId}`).author= video.author
+      - const views = video.viewCountText || video.second__viewCountText
+      if views
         = ` • `
-      span.views= video.viewCountText || video.second__viewCountText
+        span.views= views
       if video.publishedText
         = ` • `
         span.published= video.publishedText

pug/subscriptions.pug

@@ -0,0 +1,12 @@
+extends includes/layout.pug
+
+include includes/video-list-item.pug
+
+block head
+  title Subscriptions - CloudTube
+
+block content
+  main.subscriptions-page
+    each video in videos
+      .subscriptions-video
+        +video_list_item(video)

sass/includes/subscriptions-page.sass

@@ -0,0 +1,9 @@
+@use "video-list-item.sass" as *
+
+.subscriptions-page
+  padding: 40px 20px 20px
+  max-width: 900px
+  margin: 0 auto
+
+.subscriptions-video
+  @include subscriptions-video

sass/includes/video-list-item.sass

@@ -59,6 +59,7 @@
   grid-template-columns: 240px 1fr
   margin-bottom: 20px
   overflow: hidden
+  max-height: 150px
 
   .image
     width: 240px
@@ -94,3 +95,6 @@
 
 @mixin channel-video
   @include large-item
+
+@mixin subscriptions-video
+  @include large-item

sass/main.sass

@@ -5,10 +5,11 @@
 @use "includes/search-page.sass"
 @use "includes/home-page.sass"
 @use "includes/channel-page.sass"
+@use "includes/subscriptions-page.sass"
 
 @font-face
   font-family: "Bariol"
-  src: url(/static/fonts/bariol.woff)
+  src: url(/static/fonts/bariol.woff?statichash=1)
 
 @mixin button-base
   appearance: none
@@ -74,6 +75,8 @@
     text-decoration: none
     margin: 1px 8px 1px 0px
     font-size: 20px
+    display: flex
+    align-items: center
 
     &.home
       font-weight: bold
@@ -98,3 +101,7 @@
       &:hover, &:focus
         border: 1px solid c.$edge-grey
         margin: 0px
+
+.subscriptions-link:hover, .subscriptions-link:focus
+  .subscriptions-icon
+    filter: brightness(2)

server.js

@@ -20,6 +20,8 @@ const {setInstance} = require("pinski/plugins")
 
 	server.addStaticHashTableDir("html/static/js")
 	server.addStaticHashTableDir("html/static/js/elemjs")
+	server.addStaticHashTableDir("html/static/images")
+	server.addStaticHashTableDir("html/static/fonts")
 
 	server.addAPIDir("api")