From c845610ec50c19bfff46b42a1a02d6a24c206789 Mon Sep 17 00:00:00 2001
From: WardPearce <wardpearce@pm.me>
Date: Sun, 31 Mar 2024 12:07:51 +1300
Subject: [PATCH] Added search types

---
 README.md                                     |  1 -
 materialious/src/lib/ChannelThumbnail.svelte  |  2 +-
 .../src/routes/search/[slug]/+page.svelte     | 31 ++++++++++++++++---
 .../src/routes/search/[slug]/+page.ts         | 17 +++++++---
 4 files changed, 40 insertions(+), 11 deletions(-)

diff --git a/README.md b/README.md
index e7abd44b..ca99d2ba 100644
--- a/README.md
+++ b/README.md
@@ -21,7 +21,6 @@ Modern material design for Invidious
 
 ## Todo
 - Complete channel view.
-- Add different search filters.
 - Playlist support.
 - PWA support.
 
diff --git a/materialious/src/lib/ChannelThumbnail.svelte b/materialious/src/lib/ChannelThumbnail.svelte
index 79f9a1b0..bee5b08e 100644
--- a/materialious/src/lib/ChannelThumbnail.svelte
+++ b/materialious/src/lib/ChannelThumbnail.svelte
@@ -26,7 +26,7 @@
 	});
 </script>
 
-<a href={`/channel/${channel.authorId}`} class="wave">
+<a href={`/channel/${channel.authorId}`} class="wave" style="min-width: 100%;min-height: 100%;">
 	<div class="padding">
 		<div class="center-align">
 			{#if loading}
diff --git a/materialious/src/routes/search/[slug]/+page.svelte b/materialious/src/routes/search/[slug]/+page.svelte
index d105e42f..93868377 100644
--- a/materialious/src/routes/search/[slug]/+page.svelte
+++ b/materialious/src/routes/search/[slug]/+page.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { page } from '$app/stores';
 	import { getSearch } from '$lib/Api';
 	import ChannelThumbnail from '$lib/ChannelThumbnail.svelte';
 	import PlaylistThumbnail from '$lib/PlaylistThumbnail.svelte';
@@ -14,11 +15,19 @@
 
 	activePage.set(null);
 
+	function changeType(type: string) {
+		$page.url.searchParams.set('type', type);
+		document.location.href = $page.url.href;
+	}
+
 	async function handleScroll() {
 		const { scrollTop, clientHeight, scrollHeight } = document.documentElement;
 		if (scrollTop + clientHeight >= scrollHeight - 5) {
 			currentPage += 1;
-			search = [...search, ...(await getSearch(data.slug, { page: currentPage.toString() }))];
+			search = [
+				...search,
+				...(await getSearch(data.slug, { page: currentPage.toString(), type: data.searchType }))
+			];
 		}
 	}
 
@@ -33,19 +42,31 @@
 
 <div class="space" style="margin-bottom: 1em;">
 	<div class="tabs left-align min">
-		<a class="active">
+		<a class:active={data.searchType === 'all'} href="#all" on:click={() => changeType('all')}>
 			<i>home</i>
 			<span>All</span>
 		</a>
-		<a>
+		<a
+			class:active={data.searchType === 'video'}
+			href="#videos"
+			on:click={() => changeType('video')}
+		>
 			<i>movie</i>
 			<span>Videos</span>
 		</a>
-		<a>
+		<a
+			class:active={data.searchType === 'playlist'}
+			href="#playlists"
+			on:click={() => changeType('playlist')}
+		>
 			<i>playlist_add_check</i>
 			<span>Playlists</span>
 		</a>
-		<a>
+		<a
+			class:active={data.searchType === 'channel'}
+			href="#channels"
+			on:click={() => changeType('channel')}
+		>
 			<i>person</i>
 			<span>Channels</span>
 		</a>
diff --git a/materialious/src/routes/search/[slug]/+page.ts b/materialious/src/routes/search/[slug]/+page.ts
index 16e87ec1..b800dedb 100644
--- a/materialious/src/routes/search/[slug]/+page.ts
+++ b/materialious/src/routes/search/[slug]/+page.ts
@@ -1,8 +1,17 @@
-import { getSearch } from '$lib/Api/index.js';
+import { getSearch } from '$lib/Api/index';
 
-export async function load({ params }) {
+export async function load({ params, url }) {
+  let type: "playlist" | "all" | "video" | "channel";
+
+  const queryFlag = url.searchParams.get('type');
+  if (queryFlag && ['playlist', 'video', 'channel', 'all'].includes(queryFlag)) {
+    type = queryFlag;
+  } else {
+    type = 'all';
+  }
   return {
-    search: await getSearch(params.slug, { type: "all" }),
-    slug: params.slug
+    search: await getSearch(params.slug, { type: type }),
+    slug: params.slug,
+    searchType: type
   };
 }