Added manage subscriptions

materialious/package-lock.json

@@ -9,6 +9,7 @@
 			"version": "0.0.1",
 			"dependencies": {
 				"beercss": "^3.5.1",
+				"fuse.js": "^7.0.0",
 				"human-number": "^2.0.4",
 				"media-icons": "^0.10.0",
 				"peerjs": "^1.5.2",
@@ -4913,6 +4914,14 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/fuse.js": {
+			"version": "7.0.0",
+			"resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.0.0.tgz",
+			"integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==",
+			"engines": {
+				"node": ">=10"
+			}
+		},
 		"node_modules/gensync": {
 			"version": "1.0.0-beta.2",
 			"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",

materialious/package.json

@@ -36,6 +36,7 @@
 	"type": "module",
 	"dependencies": {
 		"beercss": "^3.5.1",
+		"fuse.js": "^7.0.0",
 		"human-number": "^2.0.4",
 		"media-icons": "^0.10.0",
 		"peerjs": "^1.5.2",

materialious/src/routes/+layout.svelte

@@ -664,6 +664,8 @@
 </dialog>
 
 <dialog id="sync-party">
+	<h6>Sync party</h6>
+	<p>Please note your IP will be visible to users you invite.</p>
 	{#if $syncPartyPeer}
 		<nav>
 			<div class="field label border">
@@ -673,7 +675,7 @@
 					value={`${import.meta.env.VITE_DEFAULT_FRONTEND_URL}?sync=${$syncPartyPeer.id}`}
 					type="text"
 				/>
-				<label for="sync-share">Share URL</label>
+				<label class="active" for="sync-share">Share URL</label>
 			</div>
 			<button
 				on:click={async () => {
@@ -688,7 +690,10 @@
 		</nav>
 	{/if}
 	<div class="space"></div>
-	<button on:click={startWatchSync} data-ui={`${$syncPartyPeer ? '#sync-party' : ''}`}
+	<button
+		class="no-margin"
+		on:click={startWatchSync}
+		data-ui={`${$syncPartyPeer ? '#sync-party' : ''}`}
 		>{#if $syncPartyPeer}
 			End
 		{:else}

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

@@ -23,6 +23,14 @@
 	}
 </script>
 
+<div class="space"></div>
+<nav class="right-align">
+	<a class="button" href="/subscriptions/manage">
+		<i>subscriptions</i>
+		<span>Manage subscriptions</span>
+	</a>
+</nav>
+
 <VideoList bind:videos />
 
 <InfiniteLoading on:infinite={loadMore} />

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

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { deleteUnsubscribe } from '$lib/Api';
+	import Fuse from 'fuse.js';
+	import { activePage } from '../../../store';
+
+	activePage.set(null);
+
+	export let data;
+
+	let subscriptions = structuredClone(data.subscriptions);
+
+	let search: string;
+
+	const fuse = new Fuse(subscriptions, {
+		keys: ['author']
+	});
+
+	function searchSubs() {
+		if (search === '') {
+			subscriptions = structuredClone(data.subscriptions);
+		} else {
+			subscriptions = fuse.search(search).map((item) => item.item);
+		}
+	}
+
+	async function unsubscribe(authorId: string) {
+		try {
+			await deleteUnsubscribe(authorId);
+			subscriptions = subscriptions.filter((item) => {
+				return item.authorId !== authorId;
+			});
+		} catch {}
+	}
+</script>
+
+<div class="space"></div>
+
+<div class="max field round suffix prefix small no-margin white black-text">
+	<i class="front">search</i><input
+		bind:value={search}
+		on:input={searchSubs}
+		type="text"
+		placeholder="Search..."
+	/>
+</div>
+
+{#each subscriptions as sub}
+	<article>
+		<nav>
+			<h6 class="max">{sub.author}</h6>
+			<button on:click={async () => unsubscribe(sub.authorId)} class="inverse-surface">
+				Unsubscribe
+			</button>
+		</nav>
+	</article>
+{/each}

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

@@ -0,0 +1,16 @@
+import { getSubscriptions } from "$lib/Api";
+import { error } from "@sveltejs/kit";
+
+export async function load() {
+  let subscriptions;
+
+  try {
+    subscriptions = await getSubscriptions();
+  } catch (errorMessage: any) {
+    error(500, errorMessage);
+  }
+
+  return {
+    subscriptions: subscriptions
+  };
+}

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

@@ -56,7 +56,11 @@
 				} else if (event.type === 'play') {
 					player.play();
 				} else if (event.type === 'seek' && event.time) {
-					player.currentTime = event.time;
+					const timeDiff = player.currentTime - event.time;
+
+					if (timeDiff > 3 || timeDiff < 3) {
+						player.currentTime = event.time;
+					}
 				}
 			});
 		});