Started search results

materialious/src/lib/Api/index.ts

@@ -26,7 +26,7 @@ export async function getDislikes(videoId: string): Promise<ReturnYTDislikes> {
   return await resp.json();
 }
 
-export async function getComments(videoId: string, parameters: { sortBy: "top" | "new", source: "youtube" | "reddit", continuation?: string; }): Promise<Comments> {
+export async function getComments(videoId: string, parameters: { sort_by: "top" | "new", source: "youtube" | "reddit", continuation?: string; }): Promise<Comments> {
   const path = new URL(buildPath(`comments/${videoId}`));
   path.search = new URLSearchParams(parameters).toString();
   const resp = await fetch(path);
@@ -43,4 +43,13 @@ export async function getSearchSuggestions(search: string): Promise<SearchSugges
   path.search = new URLSearchParams({ q: search }).toString();
   const resp = await fetch(path);
   return await resp.json();
+}
+
+export async function getSearch(search: string, options: {
+  sort_by: "relevance" | "rating" | "upload_date" | "view_count", type: "video" | "playlist" | "channel" | "all";
+}): Promise<Video[]> {
+  const path = new URL(buildPath("search"));
+  path.search = new URLSearchParams({ ...options, q: search }).toString();
+  const resp = await fetch(path);
+  return await resp.json();
 }

materialious/src/routes/+layout.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+	import { goto } from '$app/navigation';
 	import { getSearchSuggestions } from '$lib/Api/index';
 	import Logo from '$lib/Logo.svelte';
 	import 'beercss';
@@ -39,6 +40,8 @@
 	let searchSuggestions = false;
 	interfaceSearchSuggestions.subscribe((value) => (searchSuggestions = value));
 
+	let search = '';
+
 	let suggestionsForSearch: string[] = [];
 
 	let debounceTimer = 0;
@@ -183,26 +186,29 @@
 	<h6 class="m l">Materialious</h6>
 
 	<div class="max"></div>
-	<div class="max field round suffix prefix small no-margin m l white black-text">
-		<i class="front">search</i><input
-			data-ui="search-suggestions"
-			type="text"
-			placeholder="Search..."
-			on:keyup={(target) => debouncedSearch(target)}
-		/>
-		{#if searchSuggestions}
-			<menu
-				class="no-wrap"
-				style="width: 100%;"
-				id="search-suggestions"
-				data-ui="#search-suggestions"
-			>
-				{#each suggestionsForSearch as suggestion}
-					<a href={`/search/${suggestion}`}>{suggestion}</a>
-				{/each}
-			</menu>
-		{/if}
-	</div>
+	<form on:submit|preventDefault={() => goto(`/search/${encodeURIComponent(search)}`)}>
+		<div class="max field round suffix prefix small no-margin m l white black-text">
+			<i class="front">search</i><input
+				data-ui="search-suggestions"
+				type="text"
+				placeholder="Search..."
+				bind:value={search}
+				on:keyup={(target) => debouncedSearch(target)}
+			/>
+			{#if searchSuggestions}
+				<menu
+					class="no-wrap"
+					style="width: 100%;"
+					id="search-suggestions"
+					data-ui="#search-suggestions"
+				>
+					{#each suggestionsForSearch as suggestion}
+						<a href={`/search/${encodeURIComponent(suggestion)}`}>{suggestion}</a>
+					{/each}
+				</menu>
+			{/if}
+		</div>
+	</form>
 	<div class="max"></div>
 	<a
 		href="https://github.com/WardPearce/Materialious"

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

@@ -0,0 +1,24 @@
+<script lang="ts">
+	import PageLoading from '$lib/PageLoading.svelte';
+	import Thumbnail from '$lib/Thumbnail.svelte';
+	import { activePage } from '../../../store';
+
+	export let data;
+
+	activePage.set(null);
+</script>
+
+{#if data}
+	<div class="page right active">
+		<div class="space"></div>
+		<div class="grid">
+			{#each data.search as video}
+				<div class="s12 m6 l2">
+					<Thumbnail {video} />
+				</div>
+			{/each}
+		</div>
+	</div>
+{:else}
+	<PageLoading />
+{/if}

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

@@ -0,0 +1,7 @@
+import { getSearch } from '$lib/Api/index.js';
+
+export async function load({ params }) {
+  return {
+    search: await getSearch(params.slug, { sort_by: "relevance", type: "video" })
+  };
+}