Added subscription status

materialious/src/lib/Api/index.ts

@@ -1,6 +1,6 @@
 import { get } from 'svelte/store';
 import { auth, invidiousInstance, returnYTDislikesInstance } from '../../store';
-import type { Channel, Comments, ReturnYTDislikes, SearchSuggestion, Video, VideoPlay } from './model';
+import type { Channel, Comments, ReturnYTDislikes, SearchSuggestion, Subscription, Video, VideoPlay } from './model';
 
 export function buildPath(path: string): string {
   return `${get(invidiousInstance)}/api/v1/${path}`;
@@ -63,4 +63,14 @@ export async function getFeed(maxResults: number, page: number) {
   path.search = new URLSearchParams({ max_results: maxResults.toString(), page: page.toString() }).toString();
   const resp = await fetch(path, buildAuthHeaders());
   return await resp.json();
+}
+
+export async function getSubscriptions(): Promise<Subscription[]> {
+  const resp = await fetch(buildPath("auth/subscriptions"), buildAuthHeaders());
+  return await resp.json();
+}
+
+export async function amSubscribed(authorId: string): Promise<boolean> {
+  const subscriptions = (await getSubscriptions()).filter(sub => sub.authorId === authorId);
+  return subscriptions.length === 1;
 }

materialious/src/lib/Api/model.ts

@@ -163,4 +163,9 @@ export interface Notification extends VideoBase {
 export interface Feed {
   notifications: Notification[];
   videos: Video[];
+}
+
+export interface Subscription {
+  author: string;
+  authorId: string;
 }

materialious/src/routes/watch/[slug]/+page.svelte

@@ -33,7 +33,13 @@
 						</div>
 					</nav>
 				</a>
-				<button class="inverse-surface">Subscribe</button>
+				<button class:inverse-surface={!data.subscribed} class:border={data.subscribed}>
+					{#if !data.subscribed}
+						Subscribe
+					{:else}
+						Unsubscribe
+					{/if}
+				</button>
 				<div class="max"></div>
 				<nav class="no-space m l">
 					<button style="cursor: default;" class="border left-round">

materialious/src/routes/watch/[slug]/+page.ts

@@ -1,5 +1,11 @@
-import { getComments, getDislikes, getVideo } from '$lib/Api/index.js';
+import { amSubscribed, getComments, getDislikes, getVideo } from '$lib/Api/index.js';
 
 export async function load({ params }) {
-  return { video: await getVideo(params.slug), returnYTDislikes: await getDislikes(params.slug), comments: await getComments(params.slug, { sortBy: "top", source: "youtube" }) };
+  const video = await getVideo(params.slug);
+  return {
+    video: video,
+    returnYTDislikes: await getDislikes(params.slug),
+    comments: await getComments(params.slug, { sort_by: "top", source: "youtube" }),
+    subscribed: await amSubscribed(video.authorId)
+  };
 };