You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
58 lines
1.2 KiB
58 lines
1.2 KiB
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/useSettings";
|
|
|
|
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 };
|
|
};
|