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.
65 lines
1.2 KiB
65 lines
1.2 KiB
import NotFound from "./404";
|
|
import axios, { AxiosError } from "axios";
|
|
|
|
import { NextPage } from "next";
|
|
import { NextSeo } from "next-seo";
|
|
import { useRouter } from "next/router";
|
|
|
|
import { useEffect } from "react";
|
|
|
|
import { useQuery } from "react-query";
|
|
|
|
import { Error } from "@interfaces/api";
|
|
import Video from "@interfaces/api/video";
|
|
|
|
import { videoToVideo } from "@utils/conversions";
|
|
import { useSettings } from "@utils/hooks";
|
|
|
|
import Layout from "@components/Layout";
|
|
import Loading from "@components/Loading";
|
|
|
|
const Watch: NextPage = () => {
|
|
const router = useRouter();
|
|
|
|
const videoId = router.query["v"];
|
|
|
|
const [settings] = useSettings();
|
|
|
|
const { isLoading, error, data, refetch } = useQuery<
|
|
Video,
|
|
AxiosError<Error>
|
|
>(
|
|
["videoData", videoId],
|
|
() =>
|
|
axios
|
|
.get(`https://${settings.invidiousServer}/api/v1/videos/${videoId}`, {
|
|
params: {}
|
|
})
|
|
.then((res) => res.data),
|
|
{ enabled: false }
|
|
);
|
|
|
|
useEffect(() => {
|
|
if (videoId) refetch();
|
|
}, [videoId, refetch]);
|
|
|
|
if (!videoId) {
|
|
return <NotFound />;
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<NextSeo
|
|
title={data ? data.title : isLoading ? "Loading video..." : "Not Found"}
|
|
/>
|
|
|
|
<Layout>
|
|
{isLoading && <Loading />}
|
|
{}
|
|
</Layout>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default Watch;
|