diff --git a/src/app/results/SearchPageBody/Channel.tsx b/src/app/results/SearchPageBody/Channel.tsx index ab5561a..51abfc9 100644 --- a/src/app/results/SearchPageBody/Channel.tsx +++ b/src/app/results/SearchPageBody/Channel.tsx @@ -1,48 +1,46 @@ "use client"; -import NextImage from "next/image"; import Link from "next/link"; import { FC } from "react"; +import { Avatar } from "@nextui-org/avatar"; import { Card, CardBody } from "@nextui-org/card"; -import { Image } from "@nextui-org/image"; import { ChannelItem } from "@/client/typings/item"; import formatBigNumber from "@/utils/formatBigNumber"; +import { channelUrl } from "@/utils/urls"; export const Channel: FC<{ data: ChannelItem }> = ({ data }) => { - const url = `/channel/${data.id}`; - - const imageSize = 200; + const url = channelUrl(data.id); return ( - - - -
- + +
+ + - -
-

{data.name}

-
-

{formatBigNumber(data.subscribers)} subscribers

+ +
+
+ +

{data.name}

+ +
+

{formatBigNumber(data.subscribers)} subscribers

{data.videos !== 0 && ( -

{formatBigNumber(data.videos)} videos

+

{formatBigNumber(data.videos)} videos

)}
-

{data.description}

+

{data.description}

- - - +
+ + ); }; diff --git a/src/app/results/SearchPageBody/Playlist.tsx b/src/app/results/SearchPageBody/Playlist.tsx index 0f1a92f..3712707 100644 --- a/src/app/results/SearchPageBody/Playlist.tsx +++ b/src/app/results/SearchPageBody/Playlist.tsx @@ -13,11 +13,14 @@ import { PlaylistItem } from "@/client/typings/item"; import { videoUrl } from "@/utils/urls"; import { videoSize } from "@/utils/videoSize"; +import { Author } from "@/components/Author"; + +import { imageSize } from "./constants"; + export const Playlist: FC<{ data: PlaylistItem }> = ({ data }) => { const url = `/playlist/${data.id}`; - const channelUrl = `/channel/${data.author.id}`; - const [width, height] = videoSize(30); + const [width, height] = videoSize(imageSize); const [playlistItemWidth, playlistItemHeight] = videoSize(5); @@ -43,25 +46,15 @@ export const Playlist: FC<{ data: PlaylistItem }> = ({ data }) => {
-
- -

- {data.title} -

- + +

{data.title}

+ - -

{data.author.name}

- -
+ {data.videos && ( - {data.videos.map((video) => ( + {data.videos.slice(0, 2).map((video) => ( = ({ data }) => { - const url = `/watch?v=${data.id}`; - const channelUrl = `/channel/${data.author.id}`; + const url = videoUrl(data.id); - const [width, height] = videoSize(30); + const [width, height] = videoSize(imageSize); return ( @@ -47,30 +50,19 @@ export const Video: FC<{ data: VideoItem }> = ({ data }) => { )}
-
- -

{data.title}

- -
-

{formatBigNumber(data.views)} views

- {data.uploaded &&

{formatUploadedTime(data.uploaded)}

} +
+
+ +

+ {data.title} +

+ +
+

{formatBigNumber(data.views)} views

+ {data.uploaded &&

{formatUploadedTime(data.uploaded)}

} +
- - {data.author.avatar && ( - - )} -

{data.author.name}

- +

{data.description}

diff --git a/src/app/results/SearchPageBody/constants.ts b/src/app/results/SearchPageBody/constants.ts new file mode 100644 index 0000000..f1e0e72 --- /dev/null +++ b/src/app/results/SearchPageBody/constants.ts @@ -0,0 +1 @@ +export const imageSize = 30; diff --git a/src/app/results/SearchPageBody/index.tsx b/src/app/results/SearchPageBody/index.tsx index 90c31a4..b7e237f 100644 --- a/src/app/results/SearchPageBody/index.tsx +++ b/src/app/results/SearchPageBody/index.tsx @@ -49,11 +49,10 @@ export const SearchPageBody: FC<{ query: string; filter: SearchType }> = ({ return ( <> - {error !== null && } {isFetchingInitialData && ( )} - {error === null && data && ( + {data && (
{data.pages.map((page, i) => { return ( @@ -73,12 +72,15 @@ export const SearchPageBody: FC<{ query: string; filter: SearchType }> = ({ ); })} - + {error === null && ( + + )}
)} + {error !== null && } ); }; diff --git a/src/client/adapters/piped/index.ts b/src/client/adapters/piped/index.ts index 55e547a..e4088b7 100644 --- a/src/client/adapters/piped/index.ts +++ b/src/client/adapters/piped/index.ts @@ -68,12 +68,19 @@ const getSearch = async ( ): Promise => { let url: URL; - if (options?.nextpage) + const searchParams = new URLSearchParams(); + + searchParams.append("q", query); + + if (options?.nextpage) { url = new URL(path.join("nextpage", "search"), apiBaseUrl); - else url = new URL("search", apiBaseUrl); + searchParams.append("nextpage", options.nextpage); + } else url = new URL("search", apiBaseUrl); + + if (options?.filter) searchParams.append("filter", options.filter); const response = await ky.get(url, { - searchParams: { ...options, q: query } + searchParams }); const json = await response.json(); diff --git a/src/components/Author.tsx b/src/components/Author.tsx new file mode 100644 index 0000000..fdd5f8b --- /dev/null +++ b/src/components/Author.tsx @@ -0,0 +1,37 @@ +import NextLink from "next/link"; +import { FC } from "react"; + +import { Avatar } from "@nextui-org/avatar"; +import { Link } from "@nextui-org/link"; + +import { Author as AuthorProps } from "@/client/typings/author"; +import formatBigNumber from "@/utils/formatBigNumber"; +import { channelUrl } from "@/utils/urls"; + +export const Author: FC<{ data: AuthorProps }> = ({ data }) => { + return ( + + {data.avatar && ( + + )} +
+

{data.name}

+ {data.subscribers && ( +

+ {formatBigNumber(data.subscribers)} subscribers +

+ )} +
+ + ); +};