Started login system

materialious/src/lib/Api/index.ts

@@ -1,11 +1,15 @@
 import { get } from 'svelte/store';
-import { invidiousInstance, returnYTDislikesInstance } from '../../store';
+import { auth, invidiousInstance, returnYTDislikesInstance } from '../../store';
 import type { Channel, Comments, ReturnYTDislikes, SearchSuggestion, Video, VideoPlay } from './model';
 
 export function buildPath(path: string): string {
   return `${get(invidiousInstance)}/api/v1/${path}`;
 }
 
+export function buildAuthHeaders(): { headers: { Authorization: string; }; } {
+  return { headers: { Authorization: `Bearer ${get(auth)?.token}` } };
+}
+
 export async function getTrending(): Promise<Video[]> {
   const resp = await fetch(buildPath('trending'));
   return await resp.json();

materialious/src/lib/Thumbnail.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import { onMount } from 'svelte';
 	import type { Video, VideoBase } from './Api/model';
-	import { truncate } from './misc';
+	import { cleanNumber, truncate } from './misc';
 
 	export let video: VideoBase | Video;
 
@@ -76,7 +76,7 @@
 				</div>
 				{#if 'publishedText' in video}
 					<div>
-						{video.viewCountText} • {video.publishedText}
+						{cleanNumber(video.viewCount)} • {video.publishedText}
 					</div>{/if}
 			</div>
 		</nav>

materialious/src/routes/+layout.svelte

@@ -71,27 +71,32 @@
 		{
 			icon: 'home',
 			href: '/',
-			name: 'Home'
+			name: 'Home',
+			requiresAuth: false
 		},
 		{
 			icon: 'whatshot',
 			href: '/trending',
-			name: 'Trending'
+			name: 'Trending',
+			requiresAuth: false
 		},
 		{
 			icon: 'subscriptions',
 			href: '/subscriptions',
-			name: 'Subscriptions'
+			name: 'Subscriptions',
+			requiresAuth: true
 		},
 		{
 			icon: 'video_library',
 			href: '/playlists',
-			name: 'Playlists'
+			name: 'Playlists',
+			requiresAuth: true
 		},
 		{
 			icon: 'history',
 			href: '/history',
-			name: 'History'
+			name: 'History',
+			requiresAuth: true
 		}
 	];
 
@@ -144,9 +149,8 @@
 	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'
+			scopes: ':feed,:subscriptions*,:playlists*,:history*,:notifications*',
+			callback_url: `${import.meta.env.VITE_DEFAULT_FRONTEND_URL}/auth`
 		}).toString();
 
 		document.location.href = path.toString();
@@ -180,23 +184,20 @@
 			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));
-		// }
+		if (isLoggedIn) {
+		}
 	});
 </script>
 
 <nav class="left m l small">
 	<header></header>
 	{#each pages as page}
-		<a href={page.href} class:active={currentPage === page.name.toLowerCase()}
-			><i>{page.icon}</i>
-			<div>{page.name}</div>
-		</a>
+		{#if !page.requiresAuth || isLoggedIn}
+			<a href={page.href} class:active={currentPage === page.name.toLowerCase()}
+				><i>{page.icon}</i>
+				<div>{page.name}</div>
+			</a>
+		{/if}
 	{/each}
 </nav>
 
@@ -436,14 +437,16 @@
 		</nav>
 	</header>
 	{#each pages as page}
-		<a
-			class="row round"
-			data-ui="#menu-expanded"
-			href={page.href}
-			class:active={currentPage === page.name.toLowerCase()}
-			><i>{page.icon}</i>
-			<div>{page.name}</div></a
-		>
+		{#if !page.requiresAuth || isLoggedIn}
+			<a
+				class="row round"
+				data-ui="#menu-expanded"
+				href={page.href}
+				class:active={currentPage === page.name.toLowerCase()}
+				><i>{page.icon}</i>
+				<div>{page.name}</div></a
+			>
+		{/if}
 	{/each}
 </dialog>
 

materialious/src/routes/subscriptions/+page.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { activePage } from '../../store';
+
+	export let data;
+
+	activePage.set('subscriptions');
+</script>

materialious/src/routes/subscriptions/+page.ts

@@ -0,0 +1,3 @@
+export async function load({ params }) {
+
+}