From d9c99d91c6e1cff416d22a20f0344a313acf8f1c Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Tue, 12 Mar 2024 07:38:54 +1300
Subject: [PATCH] Added notifications and subscriptions

---
 materialious/src/lib/Api/index.ts             |  7 ++++++
 materialious/src/lib/Api/model.ts             |  9 ++++++++
 materialious/src/lib/Thumbnail.svelte         |  2 +-
 materialious/src/routes/+layout.svelte        | 23 +++++++++++++++++--
 .../src/routes/subscriptions/+page.svelte     | 19 ++++++++++++++-
 .../src/routes/subscriptions/+page.ts         |  6 ++++-
 6 files changed, 61 insertions(+), 5 deletions(-)

diff --git a/materialious/src/lib/Api/index.ts b/materialious/src/lib/Api/index.ts
index a09792ce..b25e0326 100644
--- a/materialious/src/lib/Api/index.ts
+++ b/materialious/src/lib/Api/index.ts
@@ -57,3 +57,10 @@ export async function getSearch(search: string, options: {
   const resp = await fetch(path);
   return await resp.json();
 }
+
+export async function getFeed(maxResults: number, page: number) {
+  const path = new URL(buildPath("auth/feed"));
+  path.search = new URLSearchParams({ max_results: maxResults.toString(), page: page.toString() }).toString();
+  const resp = await fetch(path, buildAuthHeaders());
+  return await resp.json();
+}
\ No newline at end of file
diff --git a/materialious/src/lib/Api/model.ts b/materialious/src/lib/Api/model.ts
index 4a1f1287..c52052ff 100644
--- a/materialious/src/lib/Api/model.ts
+++ b/materialious/src/lib/Api/model.ts
@@ -155,3 +155,12 @@ export interface SearchSuggestion {
   query: string;
   suggestions: string[];
 }
+
+export interface Notification extends VideoBase {
+  type: "video" | "shortVideo" | "stream";
+}
+
+export interface Feed {
+  notifications: Notification[];
+  videos: Video[];
+}
\ No newline at end of file
diff --git a/materialious/src/lib/Thumbnail.svelte b/materialious/src/lib/Thumbnail.svelte
index 4eb45e52..f75a6afc 100644
--- a/materialious/src/lib/Thumbnail.svelte
+++ b/materialious/src/lib/Thumbnail.svelte
@@ -3,7 +3,7 @@
 	import type { Video, VideoBase } from './Api/model';
 	import { cleanNumber, truncate } from './misc';
 
-	export let video: VideoBase | Video;
+	export let video: VideoBase | Video | Notification;
 
 	function videoLength(lengthSeconds: number): string {
 		const hours = Math.floor(lengthSeconds / 3600);
diff --git a/materialious/src/routes/+layout.svelte b/materialious/src/routes/+layout.svelte
index 2c076d4b..e1e99784 100644
--- a/materialious/src/routes/+layout.svelte
+++ b/materialious/src/routes/+layout.svelte
@@ -1,7 +1,8 @@
 <script lang="ts">
 	import { goto } from '$app/navigation';
-	import { getSearchSuggestions } from '$lib/Api/index';
+	import { getFeed, getSearchSuggestions } from '$lib/Api/index';
 	import Logo from '$lib/Logo.svelte';
+	import Thumbnail from '$lib/Thumbnail.svelte';
 	import 'beercss';
 	import 'material-dynamic-colors';
 	import { onMount } from 'svelte';
@@ -67,6 +68,8 @@
 		isLoggedIn = value !== null;
 	});
 
+	let notifications: Notification[] = [];
+
 	const pages = [
 		{
 			icon: 'home',
@@ -160,6 +163,11 @@
 		auth.set(null);
 	}
 
+	async function loadNotifications() {
+		const feed = await getFeed(15, 1);
+		notifications = feed.notifications;
+	}
+
 	onMount(async () => {
 		const isDark = get(darkMode);
 
@@ -185,6 +193,11 @@
 		}
 
 		if (isLoggedIn) {
+			try {
+				loadNotifications();
+			} catch {
+				auth.set(null);
+			}
 		}
 	});
 </script>
@@ -423,7 +436,13 @@
 		<h5 class="max">Notifications</h5>
 		<button class="circle transparent" data-ui="#dialog-notifications"><i>close</i></button>
 	</nav>
-	<p>No new notifications here</p>
+	{#if notifications.length === 0}
+		<p>No new notifications here</p>
+	{:else}
+		{#each notifications as notification}
+			<Thumbnail video={notification}></Thumbnail>
+		{/each}
+	{/if}
 </dialog>
 
 <dialog class="left small" id="menu-expanded">
diff --git a/materialious/src/routes/subscriptions/+page.svelte b/materialious/src/routes/subscriptions/+page.svelte
index f490414a..186f93d3 100644
--- a/materialious/src/routes/subscriptions/+page.svelte
+++ b/materialious/src/routes/subscriptions/+page.svelte
@@ -1,7 +1,24 @@
 <script lang="ts">
-	import { activePage } from '../../store';
+	import PageLoading from '$lib/PageLoading.svelte';
+	import Thumbnail from '$lib/Thumbnail.svelte';
+	import { activePage } from '../../store.js';
 
 	export let data;
 
 	activePage.set('subscriptions');
 </script>
+
+{#if data}
+	<div class="page right active">
+		<div class="space"></div>
+		<div class="grid">
+			{#each data.feed.videos as video}
+				<div class="s12 m6 l2">
+					<Thumbnail {video} />
+				</div>
+			{/each}
+		</div>
+	</div>
+{:else}
+	<PageLoading />
+{/if}
diff --git a/materialious/src/routes/subscriptions/+page.ts b/materialious/src/routes/subscriptions/+page.ts
index 43a4fe52..760657f4 100644
--- a/materialious/src/routes/subscriptions/+page.ts
+++ b/materialious/src/routes/subscriptions/+page.ts
@@ -1,3 +1,7 @@
-export async function load({ params }) {
+import { getFeed } from '$lib/Api/index.js';
 
+export async function load({ params }) {
+  return {
+    feed: await getFeed(100, 1)
+  };
 }
\ No newline at end of file