Added notifications and subscriptions

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();
+}

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[];
+}

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);

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

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}

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)
+  };
 }