Added search types

README.md

@@ -21,7 +21,6 @@ Modern material design for Invidious
 
 ## Todo
 - Complete channel view.
-- Add different search filters.
 - Playlist support.
 - PWA support.
 

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}

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>

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
   };
 }