Started work on #9, many small changes
parent
0973689fb7
commit
99d1e1dc90
GPG Key ID:
2BA7D7912771966E
@ -0,0 +1,71 @@
|
||||
import Link from "next/link";
|
||||
|
||||
import { FC } from "react";
|
||||
|
||||
import Avatar from "@mui/material/Avatar";
|
||||
import Box from "@mui/material/Box";
|
||||
import Paper from "@mui/material/Paper";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
|
||||
import { abbreviateNumber, formatNumber } from "@src/utils/";
|
||||
|
||||
import { Channel as ChannelModel } from "@interfaces/api/search";
|
||||
|
||||
const Channel: FC<{ channel: ChannelModel }> = ({ channel }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const thumbnail = channel.authorThumbnails.find(
|
||||
(thumbnail) => thumbnail.height == 512
|
||||
)?.url as string;
|
||||
|
||||
return (
|
||||
<Link
|
||||
passHref
|
||||
href={{ pathname: "/channel", query: { c: channel.authorId } }}
|
||||
>
|
||||
<a>
|
||||
<Paper sx={{ my: 2 }}>
|
||||
<Box
|
||||
sx={{
|
||||
p: 3,
|
||||
display: { md: "flex", xs: "block" },
|
||||
alignItems: "center"
|
||||
}}
|
||||
>
|
||||
<Avatar
|
||||
sx={{
|
||||
width: 96,
|
||||
height: 96,
|
||||
mx: { md: 3, xs: "auto" },
|
||||
mb: { md: 0, xs: 2 }
|
||||
}}
|
||||
src={thumbnail}
|
||||
alt={channel.author}
|
||||
/>
|
||||
|
||||
<Box sx={{ textAlign: { md: "left", xs: "center" } }}>
|
||||
<Typography variant="h5">{channel.author}</Typography>
|
||||
<Typography
|
||||
variant="subtitle1"
|
||||
color={theme.palette.text.secondary}
|
||||
>
|
||||
{abbreviateNumber(channel.subCount)} subscribers •{" "}
|
||||
{formatNumber(channel.videoCount)} videos
|
||||
</Typography>
|
||||
|
||||
<Typography
|
||||
variant="subtitle1"
|
||||
color={theme.palette.text.secondary}
|
||||
>
|
||||
{channel.description}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Box>
|
||||
</Paper>
|
||||
</a>
|
||||
</Link>
|
||||
);
|
||||
};
|
||||
|
||||
export default Channel;
|
||||
@ -0,0 +1,94 @@
|
||||
import Link from "next/link";
|
||||
|
||||
import { FC } from "react";
|
||||
|
||||
import Avatar from "@mui/material/Avatar";
|
||||
import Box from "@mui/material/Box";
|
||||
import CircularProgress from "@mui/material/CircularProgress";
|
||||
import Grid from "@mui/material/Grid";
|
||||
import Paper from "@mui/material/Paper";
|
||||
import Typography from "@mui/material/Typography";
|
||||
import { useTheme } from "@mui/material/styles";
|
||||
|
||||
import { abbreviateNumber } from "@src/utils/";
|
||||
|
||||
import VideoModel from "@interfaces/video";
|
||||
|
||||
import { useAuthorThumbnail } from "@utils/requests";
|
||||
|
||||
const Video: FC<{ video: VideoModel }> = ({ video }) => {
|
||||
const theme = useTheme();
|
||||
|
||||
const {
|
||||
ref,
|
||||
isLoading,
|
||||
thumbnail: authorThumbnail
|
||||
} = useAuthorThumbnail(video.author.id, 176);
|
||||
|
||||
return (
|
||||
<Paper sx={{ my: 2 }}>
|
||||
<Grid container spacing={0}>
|
||||
<Grid item md={4}>
|
||||
{/* eslint-disable-next-line @next/next/no-img-element */}
|
||||
<img
|
||||
style={{
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
borderRadius: "4px"
|
||||
}}
|
||||
src={video.thumbnail}
|
||||
alt="thumbnail"
|
||||
loading="lazy"
|
||||
/>
|
||||
</Grid>
|
||||
|
||||
<Grid item md={8} sx={{ padding: 3, width: "100%" }}>
|
||||
<Link href={{ pathname: "/watch", query: { v: video.id } }}>
|
||||
<a>
|
||||
<Typography gutterBottom noWrap variant="h5">
|
||||
{video.title}
|
||||
</Typography>
|
||||
</a>
|
||||
</Link>
|
||||
<Typography
|
||||
gutterBottom
|
||||
variant="subtitle1"
|
||||
color={theme.palette.text.secondary}
|
||||
>
|
||||
{abbreviateNumber(video.views)} Views • Published{" "}
|
||||
{video.published.text}
|
||||
</Typography>
|
||||
<Typography
|
||||
gutterBottom
|
||||
variant="subtitle1"
|
||||
color={theme.palette.text.secondary}
|
||||
>
|
||||
{video.description.text}
|
||||
</Typography>
|
||||
<Link
|
||||
passHref
|
||||
href={{ pathname: "/channel", query: { c: video.author.id } }}
|
||||
>
|
||||
<a>
|
||||
<Box ref={ref} sx={{ display: "flex", alignItems: "center" }}>
|
||||
{isLoading && <CircularProgress />}
|
||||
{!isLoading && (
|
||||
<Avatar src={authorThumbnail} alt={video.author.name} />
|
||||
)}
|
||||
<Typography
|
||||
sx={{ ml: 2 }}
|
||||
variant="subtitle1"
|
||||
color={theme.palette.text.secondary}
|
||||
>
|
||||
{video.author.name}
|
||||
</Typography>
|
||||
</Box>
|
||||
</a>
|
||||
</Link>
|
||||
</Grid>
|
||||
</Grid>
|
||||
</Paper>
|
||||
);
|
||||
};
|
||||
|
||||
export default Video;
|
||||
@ -0,0 +1,4 @@
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: unset;
|
||||
}
|
||||
@ -1,3 +1,22 @@
|
||||
export interface Error {
|
||||
error: string;
|
||||
}
|
||||
|
||||
export interface Thumbnail {
|
||||
url: string;
|
||||
width: number;
|
||||
height: number;
|
||||
quality?: Quality;
|
||||
}
|
||||
|
||||
export enum Quality {
|
||||
Default = "default",
|
||||
End = "end",
|
||||
High = "high",
|
||||
Maxres = "maxres",
|
||||
Maxresdefault = "maxresdefault",
|
||||
Medium = "medium",
|
||||
Middle = "middle",
|
||||
Sddefault = "sddefault",
|
||||
Start = "start"
|
||||
}
|
||||
|
||||
@ -0,0 +1,83 @@
|
||||
import { Thumbnail } from "@interfaces/api";
|
||||
import VideoTrending from "@interfaces/api/trending";
|
||||
|
||||
interface Results {
|
||||
type: Type;
|
||||
}
|
||||
|
||||
export interface ChannelResult extends Results {
|
||||
type: "channel";
|
||||
author: string;
|
||||
authorId: string;
|
||||
authorUrl: string;
|
||||
authorThumbnails: Thumbnail[];
|
||||
subCount: number;
|
||||
videoCount: number;
|
||||
description: string;
|
||||
descriptionHtml: string;
|
||||
}
|
||||
|
||||
export interface VideoResult extends Results {
|
||||
type: "video";
|
||||
title: string;
|
||||
author: string;
|
||||
authorId: string;
|
||||
authorUrl: string;
|
||||
description: string;
|
||||
descriptionHtml: string;
|
||||
videoId: string;
|
||||
videoThumbnails: Thumbnail[];
|
||||
viewCount: number;
|
||||
published: number;
|
||||
publishedText: string;
|
||||
lengthSeconds: number;
|
||||
liveNow: boolean;
|
||||
premium: boolean;
|
||||
}
|
||||
|
||||
export interface PlaylistResult extends Results {
|
||||
type: "playlist";
|
||||
title: string;
|
||||
playlistId: string;
|
||||
author: string;
|
||||
authorId: string;
|
||||
authorUrl: string;
|
||||
videoCount: number;
|
||||
videos: Video[];
|
||||
}
|
||||
|
||||
export interface CategoryResult extends Results {
|
||||
type: "category";
|
||||
title: string;
|
||||
contents: VideoTrending[];
|
||||
}
|
||||
|
||||
export interface Content {
|
||||
type: Type;
|
||||
title: string;
|
||||
videoId: string;
|
||||
author: string;
|
||||
authorId: string;
|
||||
authorUrl: string;
|
||||
videoThumbnails: Thumbnail[];
|
||||
description: string;
|
||||
descriptionHtml: string;
|
||||
viewCount: number;
|
||||
published: number;
|
||||
publishedText: string;
|
||||
lengthSeconds: number;
|
||||
liveNow: boolean;
|
||||
premium: boolean;
|
||||
isUpcoming: boolean;
|
||||
}
|
||||
|
||||
export type Type = "category" | "channel" | "playlist" | "video";
|
||||
|
||||
export interface Video {
|
||||
title: string;
|
||||
videoId: string;
|
||||
lengthSeconds: number;
|
||||
videoThumbnails: Thumbnail[];
|
||||
}
|
||||
|
||||
export default Results;
|
||||
@ -0,0 +1,103 @@
|
||||
import NotFound from "./404";
|
||||
|
||||
import { NextPage } from "next";
|
||||
import { NextSeo } from "next-seo";
|
||||
import { useRouter } from "next/router";
|
||||
|
||||
import { useQuery } from "react-query";
|
||||
|
||||
import axios from "axios";
|
||||
|
||||
import Container from "@mui/material/Container";
|
||||
import Divider from "@mui/material/Divider";
|
||||
import Typography from "@mui/material/Typography";
|
||||
|
||||
import Result, {
|
||||
CategoryResult,
|
||||
ChannelResult,
|
||||
PlaylistResult,
|
||||
VideoResult
|
||||
} from "@interfaces/api/search";
|
||||
|
||||
import { apiToVideo } from "@utils/conversions";
|
||||
import { useSettings } from "@utils/hooks";
|
||||
|
||||
import Channel from "@components/Channel/Inline";
|
||||
import Layout from "@components/Layout";
|
||||
import Loading from "@components/Loading";
|
||||
import Video from "@components/Video/Inline";
|
||||
|
||||
const Results: NextPage = () => {
|
||||
const router = useRouter();
|
||||
|
||||
const [settings] = useSettings();
|
||||
|
||||
const query = router.query["search_query"];
|
||||
|
||||
const { data, isLoading } = useQuery<Result[] | undefined>(
|
||||
["searchResultsFor", query],
|
||||
() =>
|
||||
query
|
||||
? axios
|
||||
.get(`https://${settings.invidiousServer}/api/v1/search`, {
|
||||
params: {
|
||||
q: query,
|
||||
type: "all"
|
||||
}
|
||||
})
|
||||
.then((res) => res.data)
|
||||
: undefined
|
||||
);
|
||||
|
||||
if (!router.isReady || isLoading)
|
||||
return (
|
||||
<>
|
||||
<NextSeo title="Searching..." />
|
||||
<Layout>
|
||||
<Loading />
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
|
||||
if (!query) return <NotFound />;
|
||||
|
||||
const channels = data?.filter((result) => result.type == "channel") as
|
||||
| ChannelResult[]
|
||||
| undefined;
|
||||
|
||||
const videos = data?.filter((result) => result.type == "video") as
|
||||
| VideoResult[]
|
||||
| undefined;
|
||||
|
||||
// const categories = data?.filter()
|
||||
|
||||
return (
|
||||
<>
|
||||
<NextSeo title={query as string} />
|
||||
<Layout>
|
||||
<Container sx={{ py: 2 }}>
|
||||
{channels && channels.length != 0 && (
|
||||
<>
|
||||
<Typography variant="h5">Channels</Typography>
|
||||
{channels.map((channel, i) => (
|
||||
<Channel key={i} channel={channel} />
|
||||
))}
|
||||
<Divider sx={{ my: 4 }} />
|
||||
</>
|
||||
)}
|
||||
{videos && videos.length != 0 && (
|
||||
<>
|
||||
<Typography variant="h5">Videos</Typography>
|
||||
{videos.map((video, i) => (
|
||||
<Video key={i} video={apiToVideo(video)} />
|
||||
))}
|
||||
<Divider sx={{ my: 4 }} />
|
||||
</>
|
||||
)}
|
||||
</Container>
|
||||
</Layout>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Results;
|
||||
@ -0,0 +1,57 @@
|
||||
import { useEffect } from "react";
|
||||
|
||||
import { useInView } from "react-intersection-observer";
|
||||
import { useQuery } from "react-query";
|
||||
|
||||
import axios, { AxiosError } from "axios";
|
||||
|
||||
import { useSettings } from "@utils/hooks";
|
||||
|
||||
interface Channel {
|
||||
authorThumbnails: { url: string; width: number; height: number }[];
|
||||
}
|
||||
|
||||
export const useAuthorThumbnail = (
|
||||
authorId: string,
|
||||
quality: 32 | 48 | 76 | 100 | 176 | 512
|
||||
): {
|
||||
isLoading: boolean;
|
||||
error: AxiosError<Error> | null;
|
||||
ref: (node?: Element) => void;
|
||||
thumbnail?: string;
|
||||
} => {
|
||||
const [settings] = useSettings();
|
||||
|
||||
const { ref, inView } = useInView({
|
||||
threshold: 0
|
||||
});
|
||||
|
||||
const { isLoading, error, data, isFetched, refetch } = useQuery<
|
||||
Channel,
|
||||
AxiosError<Error>
|
||||
>(
|
||||
["channelData", authorId],
|
||||
() =>
|
||||
axios
|
||||
.get(
|
||||
`https://${settings.invidiousServer}/api/v1/channels/${authorId}`,
|
||||
{
|
||||
params: {
|
||||
fields: ["authorThumbnails"].join(",")
|
||||
}
|
||||
}
|
||||
)
|
||||
.then((res) => res.data),
|
||||
{ enabled: false }
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isFetched && inView) refetch();
|
||||
}, [refetch, isFetched, inView]);
|
||||
|
||||
const thumbnail = data?.authorThumbnails.find(
|
||||
(thumbnail) => thumbnail.width == quality
|
||||
)?.url;
|
||||
|
||||
return { isLoading, error, ref, thumbnail };
|
||||
};
|
||||
Loading…
Reference in new issue