From 651bfae924b5cc17843a8ab27b1955284f46ce7f Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Sat, 9 Mar 2024 20:20:01 +1300
Subject: [PATCH] Added login, home page & more

---
 materialious/package-lock.json            | 22 +++++++++
 materialious/package.json                 |  3 ++
 materialious/src/lib/Api/index.ts         |  5 ++
 materialious/src/routes/+layout.svelte    | 59 +++++++++++++++++++++--
 materialious/src/routes/+page.svelte      | 21 +++++++-
 materialious/src/routes/+page.ts          |  7 +++
 materialious/src/routes/auth/+page.svelte | 18 +++++++
 materialious/src/routes/auth/+page.ts     |  0
 materialious/src/store.ts                 |  4 +-
 9 files changed, 131 insertions(+), 8 deletions(-)
 create mode 100644 materialious/src/routes/+page.ts
 create mode 100644 materialious/src/routes/auth/+page.svelte
 create mode 100644 materialious/src/routes/auth/+page.ts

diff --git a/materialious/package-lock.json b/materialious/package-lock.json
index f630de93..639f1335 100644
--- a/materialious/package-lock.json
+++ b/materialious/package-lock.json
@@ -9,6 +9,8 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"beercss": "^3.5.1",
+				"event-source-polyfill": "^1.0.31",
+				"eventsource": "^2.0.2",
 				"human-number": "^2.0.4",
 				"plyr": "^3.7.8",
 				"svelte-persisted-store": "^0.9.1"
@@ -18,6 +20,7 @@
 				"@sveltejs/kit": "^2.0.0",
 				"@sveltejs/vite-plugin-svelte": "^3.0.0",
 				"@types/eslint": "^8.56.0",
+				"@types/event-source-polyfill": "^1.0.5",
 				"@types/human-number": "^1.0.2",
 				"@typescript-eslint/eslint-plugin": "^7.0.0",
 				"@typescript-eslint/parser": "^7.0.0",
@@ -928,6 +931,12 @@
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
 			"integrity": "sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw=="
 		},
+		"node_modules/@types/event-source-polyfill": {
+			"version": "1.0.5",
+			"resolved": "https://registry.npmjs.org/@types/event-source-polyfill/-/event-source-polyfill-1.0.5.tgz",
+			"integrity": "sha512-iaiDuDI2aIFft7XkcwMzDWLqo7LVDixd2sR6B4wxJut9xcp/Ev9bO4EFg4rm6S9QxATLBj5OPxdeocgmhjwKaw==",
+			"dev": true
+		},
 		"node_modules/@types/human-number": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/@types/human-number/-/human-number-1.0.2.tgz",
@@ -1953,6 +1962,19 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/event-source-polyfill": {
+			"version": "1.0.31",
+			"resolved": "https://registry.npmjs.org/event-source-polyfill/-/event-source-polyfill-1.0.31.tgz",
+			"integrity": "sha512-4IJSItgS/41IxN5UVAVuAyczwZF7ZIEsM1XAoUzIHA6A+xzusEZUutdXz2Nr+MQPLxfTiCvqE79/C8HT8fKFvA=="
+		},
+		"node_modules/eventsource": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/eventsource/-/eventsource-2.0.2.tgz",
+			"integrity": "sha512-IzUmBGPR3+oUG9dUeXynyNmf91/3zUSJg1lCktzKw47OXuhco54U3r9B7O4XX+Rb1Itm9OZ2b0RkTs10bICOxA==",
+			"engines": {
+				"node": ">=12.0.0"
+			}
+		},
 		"node_modules/fast-deep-equal": {
 			"version": "3.1.3",
 			"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz",
diff --git a/materialious/package.json b/materialious/package.json
index 466c9f94..f1489793 100644
--- a/materialious/package.json
+++ b/materialious/package.json
@@ -16,6 +16,7 @@
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
 		"@types/eslint": "^8.56.0",
+		"@types/event-source-polyfill": "^1.0.5",
 		"@types/human-number": "^1.0.2",
 		"@typescript-eslint/eslint-plugin": "^7.0.0",
 		"@typescript-eslint/parser": "^7.0.0",
@@ -33,6 +34,8 @@
 	"type": "module",
 	"dependencies": {
 		"beercss": "^3.5.1",
+		"event-source-polyfill": "^1.0.31",
+		"eventsource": "^2.0.2",
 		"human-number": "^2.0.4",
 		"plyr": "^3.7.8",
 		"svelte-persisted-store": "^0.9.1"
diff --git a/materialious/src/lib/Api/index.ts b/materialious/src/lib/Api/index.ts
index 83faa47f..b498fb3c 100644
--- a/materialious/src/lib/Api/index.ts
+++ b/materialious/src/lib/Api/index.ts
@@ -11,6 +11,11 @@ export async function getTrending(): Promise<Video[]> {
   return await resp.json();
 }
 
+export async function getPopular(): Promise<Video[]> {
+  const resp = await fetch(buildPath('popular'));
+  return await resp.json();
+}
+
 export async function getVideo(videoId: string): Promise<VideoPlay> {
   const resp = await fetch(buildPath(`videos/${videoId}`));
   return await resp.json();
diff --git a/materialious/src/routes/+layout.svelte b/materialious/src/routes/+layout.svelte
index d5ab9207..763a71ae 100644
--- a/materialious/src/routes/+layout.svelte
+++ b/materialious/src/routes/+layout.svelte
@@ -1,12 +1,14 @@
 <script lang="ts">
-	import { getSearchSuggestions } from '$lib/Api/index';
+	import { buildPath, getSearchSuggestions } from '$lib/Api/index';
 	import Logo from '$lib/Logo.svelte';
 	import 'beercss';
+	import { EventSourcePolyfill } from 'event-source-polyfill';
 	import 'material-dynamic-colors';
 	import { onMount } from 'svelte';
 	import { get } from 'svelte/store';
 	import {
 		activePage,
+		auth,
 		darkMode,
 		interfaceSearchSuggestions,
 		playerAlwaysLoop,
@@ -46,10 +48,19 @@
 
 		clearTimeout(debounceTimer);
 		debounceTimer = setTimeout(async () => {
+			if (event.target.value === '') {
+				suggestionsForSearch = [];
+				return;
+			}
 			suggestionsForSearch = (await getSearchSuggestions(event.target.value)).suggestions;
 		}, 250);
 	};
 
+	let isLoggedIn = false;
+	auth.subscribe((value) => {
+		isLoggedIn = value !== null;
+	});
+
 	const pages = [
 		{
 			icon: 'home',
@@ -105,6 +116,21 @@
 		}
 	});
 
+	function login() {
+		const path = new URL(`${import.meta.env.VITE_DEFAULT_INVIDIOUS_INSTANCE}/authorize_token`);
+		path.search = new URLSearchParams({
+			scopes: 'scopes=:feed,:subscriptions*,:playlists*,:history*',
+			callback_url: `${import.meta.env.VITE_DEFAULT_FRONTEND_URL}/auth`,
+			expire: '2629800'
+		}).toString();
+
+		document.location.href = path.toString();
+	}
+
+	function logout() {
+		auth.set(null);
+	}
+
 	onMount(async () => {
 		const isDark = get(darkMode);
 
@@ -128,6 +154,14 @@
 		if (themeHex) {
 			await ui('theme', themeHex);
 		}
+
+		if (isLoggedIn) {
+			const notifications = new EventSourcePolyfill(buildPath('auth/notifications?topics=ucid'), {
+				headers: { Authentication: `Bearer ${get(auth)?.token}` },
+				withCredentials: true
+			});
+			notifications.addEventListener('notice', (event) => console.log(event));
+		}
 	});
 </script>
 
@@ -142,7 +176,7 @@
 </nav>
 
 <nav class="top">
-	<button class="circle large transparent s m l small-margin" data-ui="#dialog-expanded"
+	<button class="circle large transparent s m l small-margin" data-ui="#dia1-expanded"
 		><i>menu</i></button
 	>
 
@@ -171,11 +205,26 @@
 		{/if}
 	</div>
 	<div class="max"></div>
-	<button class="circle large transparent" data-ui="#dialog-notifications"
-		><i>notifications</i></button
+	<a
+		href="https://github.com/WardPearce/Materialious"
+		target="_blank"
+		rel="noopener noreferrer"
+		class="button circle large transparent"
 	>
+		<i>code</i>
+	</a>
+	{#if isLoggedIn}
+		<button class="circle large transparent" data-ui="#dialog-notifications"
+			><i>notifications</i></button
+		>
+	{/if}
 	<button class="circle large transparent" data-ui="#dialog-settings"><i>settings</i></button>
-	<button class="circle large transparent"><i>login</i></button>
+
+	{#if !isLoggedIn}
+		<button on:click={login} class="circle large transparent"><i>login</i></button>
+	{:else}
+		<button on:click={logout} class="circle large transparent"><i>logout</i></button>
+	{/if}
 </nav>
 
 <dialog class="right" id="dialog-settings">
diff --git a/materialious/src/routes/+page.svelte b/materialious/src/routes/+page.svelte
index 352f204b..4460a0b5 100644
--- a/materialious/src/routes/+page.svelte
+++ b/materialious/src/routes/+page.svelte
@@ -1,5 +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('home');
 </script>
+
+{#if data}
+	<div class="page right active">
+		<div class="space"></div>
+		<div class="grid">
+			{#each data.popular as video}
+				<div class="s12 m6 l2">
+					<Thumbnail {video} />
+				</div>
+			{/each}
+		</div>
+	</div>
+{:else}
+	<PageLoading />
+{/if}
diff --git a/materialious/src/routes/+page.ts b/materialious/src/routes/+page.ts
new file mode 100644
index 00000000..b3b31184
--- /dev/null
+++ b/materialious/src/routes/+page.ts
@@ -0,0 +1,7 @@
+import { getPopular } from '$lib/Api/index.js';
+
+export async function load({ params }) {
+  return {
+    popular: await getPopular()
+  };
+}
\ No newline at end of file
diff --git a/materialious/src/routes/auth/+page.svelte b/materialious/src/routes/auth/+page.svelte
new file mode 100644
index 00000000..a2db56ea
--- /dev/null
+++ b/materialious/src/routes/auth/+page.svelte
@@ -0,0 +1,18 @@
+<script lang="ts">
+	import { goto } from '$app/navigation';
+	import { page } from '$app/stores';
+	import PageLoading from '$lib/PageLoading.svelte';
+	import { onMount } from 'svelte';
+	import { auth } from '../../store';
+
+	onMount(() => {
+		auth.set({
+			username: $page.url.searchParams.get('username') as string,
+			token: $page.url.searchParams.get('token') as string
+		});
+
+		goto('/');
+	});
+</script>
+
+<PageLoading />
diff --git a/materialious/src/routes/auth/+page.ts b/materialious/src/routes/auth/+page.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/materialious/src/store.ts b/materialious/src/store.ts
index ca1db23a..2dc50850 100644
--- a/materialious/src/store.ts
+++ b/materialious/src/store.ts
@@ -8,7 +8,7 @@ export const themeColor: Writable<null | string> = persisted("themeColor", null)
 
 export const activePage: Writable<string | null> = writable("home");
 
-export const playerAutoPlay = persisted("autoPlay", false);
+export const playerAutoPlay = persisted("autoPlay", true);
 export const playerAlwaysLoop = persisted("alwaysLoop", false);
 export const playerProxyVideos = persisted("proxyVideos", false);
 export const playerListenByDefault = persisted("listenByDefault", false);
@@ -17,4 +17,4 @@ export const playerDash = persisted("dash", true);
 
 export const interfaceSearchSuggestions = persisted("searchSuggestions", true);
 
-export const authToken = persisted("authToken", "");
\ No newline at end of file
+export const auth: Writable<null | { username: string, token: string; }> = persisted("authToken", null);
\ No newline at end of file