search: added infinite scrolling support

package.json

@@ -21,6 +21,7 @@
 		"react": "^18",
 		"react-dom": "^18",
 		"react-icons": "^5.0.1",
+		"reactjs-visibility": "^0.1.4",
 		"use-debounce": "^10.0.0",
 		"zod": "^3.22.4",
 		"zustand": "^4.5.2"

public/.gitignore

@@ -1 +1,2 @@
 /**.js
+/**.js.map

src/app/results/Loading.tsx

@@ -0,0 +1,18 @@
+import { Component } from "@/typings/component";
+import { CircularProgress } from "@nextui-org/progress";
+import { useVisibility } from "reactjs-visibility";
+
+export const Loading: Component<{
+	isFetching: boolean;
+	onVisible: (visiblity: boolean) => void;
+}> = ({ onVisible, isFetching }) => {
+	const { ref } = useVisibility({
+		onChangeVisibility: onVisible
+	});
+
+	return (
+		<div ref={ref} className="flex items-center justify-center min-h-10">
+			{isFetching && <CircularProgress aria-label="Loading more items..." />}
+		</div>
+	);
+};

src/app/results/Playlist.tsx

@@ -6,19 +6,14 @@ import { Card, CardBody } from "@nextui-org/card";
 import { Image } from "@nextui-org/image";
 import NextLink from "next/link";
 import NextImage from "next/image";
-import { useMemo } from "react";
 import { Link } from "@nextui-org/link";
+import { videoSize } from "@/utils/videoSize";
 
 export const Playlist: Component<{ data: PlaylistProps }> = ({ data }) => {
 	const url = `/playlist/${data.id}`;
 	const channelUrl = `/channel/${data.author.id}`;
 
-	const videoSize = 200;
-	const aspectRatio = 16 / 9;
-
-	const [width, height] = useMemo(() => {
-		return [videoSize * aspectRatio, videoSize];
-	}, [videoSize]);
+	const [width, height] = videoSize([16, 9], 30);
 
 	return (
 		<NextLink href={url}>

src/app/results/Search.tsx

@@ -4,7 +4,7 @@ import { Search as SearchInput } from "@/components/Search";
 import { useClient } from "@/hooks/useClient";
 import { Component } from "@/typings/component";
 import { Spacer } from "@nextui-org/spacer";
-import { useQuery } from "@tanstack/react-query";
+import { useInfiniteQuery } from "@tanstack/react-query";
 import { useSearchParams } from "next/navigation";
 import { Channel } from "./Channel";
 import { Container } from "@/components/Container";
@@ -12,6 +12,10 @@ import { LoadingPage } from "@/components/LoadingPage";
 import { Button } from "@nextui-org/button";
 import { Video } from "./Video";
 import { Playlist } from "./Playlist";
+import { Fragment, useCallback } from "react";
+import { CircularProgress } from "@nextui-org/progress";
+import { useVisibility } from "reactjs-visibility";
+import { Loading } from "./Loading";
 
 export const Search: Component = () => {
 	const searchParams = useSearchParams();
@@ -20,23 +24,41 @@ export const Search: Component = () => {
 
 	const client = useClient();
 
-	const { isLoading, error, refetch, data } = useQuery({
+	const {
+		data,
+		error,
+		fetchNextPage,
+		hasNextPage,
+		refetch,
+		isFetching,
+		isFetchingNextPage
+	} = useInfiniteQuery({
 		queryKey: ["search", query],
-		queryFn: () => {
-			if (query === null) return;
-
-			return client.getSearch(query);
-		}
+		queryFn: async ({ pageParam }) => {
+			return await client.getSearch(query ?? "", { pageParam: pageParam });
+		},
+		enabled: query !== null,
+		initialPageParam: "",
+		getNextPageParam: (lastPage, pages) => lastPage.nextCursor
 	});
 
-	const results = data ?? [];
+	const handleUserReachedPageEnd = useCallback(
+		(visiblity: boolean) => {
+			console.log(visiblity);
+
+			console.log(visiblity, !isFetchingNextPage, hasNextPage);
+
+			if (visiblity && !isFetchingNextPage) fetchNextPage();
+		},
+		[hasNextPage, isFetchingNextPage]
+	);
 
 	return (
 		<>
 			<Container>
 				<SearchInput initialQueryValue={query ?? undefined} />
 				<Spacer y={4} />
-				{isLoading && <LoadingPage />}
+				{isFetching && <LoadingPage />}
 				{error && (
 					<div className="flex-1 flex items-center justify-center">
 						<div className="text-center">
@@ -52,8 +74,10 @@ export const Search: Component = () => {
 					</div>
 				)}
 				<div className="flex flex-col gap-4">
-					{results.length != 0 &&
-						results.map((result) => {
+					{data?.pages.map((page, i) => {
+						return (
+							<Fragment key={i}>
+								{page.items.map((result) => {
 									switch (result.type) {
 										case "channel":
 											return <Channel key={result.id} data={result} />;
@@ -65,6 +89,18 @@ export const Search: Component = () => {
 											return <Playlist key={result.id} data={result} />;
 									}
 								})}
+							</Fragment>
+						);
+					})}
+
+					<Loading
+						isFetching={isFetchingNextPage}
+						onVisible={handleUserReachedPageEnd}
+					/>
+
+					{/* {!isFetching && !isFetchingNextPage && !error && (
+						<Button onClick={() => fetchNextPage()}>Load more</Button>
+					)} */}
 				</div>
 			</Container>
 		</>

src/app/results/Video.tsx

@@ -12,17 +12,13 @@ import formatUploadedTime from "@/utils/formatUploadedTime";
 import { Link } from "@nextui-org/link";
 import NextLink from "next/link";
 import formatDuration from "@/utils/formatDuration";
+import { videoSize } from "@/utils/videoSize";
 
 export const Video: Component<{ data: VideoProps }> = ({ data }) => {
 	const url = `/watch?v=${data.id}`;
 	const channelUrl = `/channel/${data.author.id}`;
 
-	const videoSize = 200;
-	const aspectRatio = 16 / 9;
-
-	const [width, height] = useMemo(() => {
-		return [videoSize * aspectRatio, videoSize];
-	}, [videoSize]);
+	const [width, height] = videoSize([16, 9], 30);
 
 	return (
 		<NextLink href={url}>
@@ -65,6 +61,7 @@ export const Video: Component<{ data: VideoProps }> = ({ data }) => {
 										height={64}
 										src={data.author.avatar}
 										alt={data.author.name}
+										className="rounded-full"
 										as={NextImage}
 										unoptimized
 									/>

src/client/adapters/invidious/index.ts

@@ -96,10 +96,14 @@ const adapter: Adapter = {
 				return getSearchSuggestions(url, query).then(Transformer.suggestions);
 			},
 			async getSearch(query, options) {
-				return getSearch(url, query, {
-					page: options?.page,
+				const page = options?.pageParam ? parseInt(options.pageParam) : 1;
+
+				const items = await getSearch(url, query, {
+					page: page,
 					type: options?.type
 				}).then(Transformer.search);
+
+				return { items: items, nextCursor: (page + 1).toString() };
 			}
 		};
 	}

src/client/adapters/invidious/transformer.ts

@@ -3,7 +3,7 @@ import { Suggestions } from "@/client/typings/search/suggestions";
 import {
 	ChannelResult,
 	PlaylistResult,
-	SearchResults,
+	SearchItems,
 	VideoResult
 } from "@/client/typings/search";
 
@@ -56,7 +56,7 @@ export default class Transformer {
 		return data.suggestions;
 	}
 
-	public static search(data: InvidiousSearch): SearchResults {
+	public static search(data: InvidiousSearch): SearchItems {
 		return data.map((result) => {
 			switch (result.type) {
 				case "video":

src/client/adapters/piped/index.ts

@@ -115,9 +115,10 @@ const adapter: Adapter = {
 						break;
 				}
 
-				return getSearch(url, query, { filter: filter }).then(
-					Transformer.search
-				);
+				return getSearch(url, query, {
+					filter: filter,
+					nextpage: options?.pageParam
+				}).then(Transformer.search);
 			}
 		};
 	}

src/client/adapters/piped/transformer.ts

@@ -45,7 +45,7 @@ export default class Transformer {
 	}
 
 	public static search(data: PipedSearch): SearchResults {
-		return data.items.map((result) => {
+		const items = data.items.map((result) => {
 			switch (result.type) {
 				case "stream":
 					const video: VideoResult = {
@@ -92,5 +92,7 @@ export default class Transformer {
 					return playlist;
 			}
 		});
+
+		return { items, nextCursor: data.nextpage };
 	}
 }

src/client/adapters/piped/typings/search/index.ts

@@ -35,7 +35,7 @@ export const SearchModel = z.object({
 		.union([VideoResultModel, ChannelResultModel, PlaylistResultModel])
 		.array(),
 	nextpage: z.string(),
-	suggestion: z.string(),
+	suggestion: z.string().nullable(),
 	corrected: z.boolean()
 });
 

src/client/index.ts

@@ -68,8 +68,11 @@ export default class Client {
 	): Promise<SearchResults> {
 		const adapter = this.getBestAdapter();
 
+		const pageParam =
+			options?.pageParam?.length === 0 ? undefined : options?.pageParam;
+
 		return await adapter.getSearch(query, {
-			page: options?.page ?? 1,
+			pageParam: pageParam,
 			type: options?.type ?? "all"
 		});
 	}

src/client/typings/search/index.ts

@@ -30,4 +30,9 @@ export interface PlaylistResult {
 	}[];
 }
 
-export type SearchResults = (VideoResult | ChannelResult | PlaylistResult)[];
+export type SearchItems = (VideoResult | ChannelResult | PlaylistResult)[];
+
+export interface SearchResults {
+	items: SearchItems;
+	nextCursor: string;
+}

src/client/typings/search/options.ts

@@ -1,5 +1,5 @@
 export interface SearchOptions {
-	page?: number;
+	pageParam?: string;
 	type?: SearchType;
 }
 

src/components/Search.tsx

@@ -4,15 +4,15 @@ import { useClient } from "@/hooks/useClient";
 import { Component } from "@/typings/component";
 import { Autocomplete, AutocompleteItem } from "@nextui-org/autocomplete";
 import { useQuery } from "@tanstack/react-query";
-import { FormEventHandler, useCallback, useMemo, useState } from "react";
+import { useCallback, useMemo, useState } from "react";
 import { useDebounce } from "use-debounce";
 
 import { FiSearch as SearchIcon } from "react-icons/fi";
 import { useRouter } from "next/navigation";
 
-export const Search: Component<{ initialQueryValue?: string }> = ({
-	initialQueryValue
-}) => {
+export const Search: Component<{
+	initialQueryValue?: string;
+}> = ({ initialQueryValue }) => {
 	const client = useClient();
 
 	const [searchQuery, setSearchQuery] = useState(initialQueryValue ?? "");
@@ -70,7 +70,7 @@ export const Search: Component<{ initialQueryValue?: string }> = ({
 				required
 				type="text"
 				label="Search"
-				variant="bordered"
+				variant="flat"
 				placeholder="Search for videos"
 			>
 				{(suggestion) => (

src/components/Video.tsx

@@ -12,18 +12,13 @@ import { Tooltip } from "@nextui-org/tooltip";
 import { ContextMenuItem } from "@/typings/contextMenu";
 
 import NextImage from "next/image";
-import { useMemo } from "react";
+import { videoSize } from "@/utils/videoSize";
 
 export const Video: Component<{ data: VideoProps }> = ({ data }) => {
 	const url = `/watch?v=${data.id}`;
 	const channelUrl = `/channel/${data.author.id}`;
 
-	const videoSize = 400;
-	const aspectRatio = 16 / 9;
-
-	const [width, height] = useMemo(() => {
-		return [videoSize * aspectRatio, videoSize];
-	}, [videoSize]);
+	const [width, height] = videoSize([16, 9], 40);
 
 	const menuItems: ContextMenuItem[] = [
 		{ title: "Go to video", key: "gotoVideo", href: url },
@@ -69,7 +64,7 @@ export const Video: Component<{ data: VideoProps }> = ({ data }) => {
 							width={width}
 							unoptimized
 							alt={data.title}
-							className="object-contain aspect-video"
+							className="object-contain aspect"
 							src={data.thumbnail}
 						/>
 

src/hooks/useClient.ts

@@ -7,8 +7,8 @@ export const useClient = () => {
 	const [client] = useState(
 		() =>
 			new Client([
-				{ baseUrl: "https://invidious.drgns.space", type: ApiType.Invidious }
-				// { baseUrl: "https://pipedapi.kavin.rocks", type: ApiType.Piped }
+				// { baseUrl: "https://invidious.drgns.space", type: ApiType.Invidious }
+				{ baseUrl: "https://pipedapi.kavin.rocks", type: ApiType.Piped }
 			])
 	);
 

src/utils/videoSize.ts

@@ -0,0 +1,6 @@
+export const videoSize = (
+	aspectRatio: [number, number],
+	size: number
+): [number, number] => {
+	return [aspectRatio[0] * size, aspectRatio[1] * size];
+};

yarn.lock

@@ -5680,6 +5680,11 @@ react@^18:
   dependencies:
     loose-envify "^1.1.0"
 
+reactjs-visibility@^0.1.4:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/reactjs-visibility/-/reactjs-visibility-0.1.4.tgz#843a50cf8c156109fb9ebf855ad60f86b699f10d"
+  integrity sha512-r2NZUFt8kXcay3/oIC+iiP8I/woTWTtQ7CW/Q2aBfJtHertGTN2Qpg68scJpSA7oP4r3nVtXtUOffHJMuICbMQ==
+
 read-cache@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/read-cache/-/read-cache-1.0.0.tgz#e664ef31161166c9751cdbe8dbcf86b5fb58f774"