basic trending page
parent
b6c45a9049
commit
61b54c4081
@ -1,33 +1,36 @@
|
|||||||
{
|
{
|
||||||
"name": "materialtube",
|
"name": "materialtube",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev",
|
"dev": "next dev",
|
||||||
"build": "next build",
|
"build": "next build",
|
||||||
"start": "next start",
|
"start": "next start",
|
||||||
"lint": "next lint"
|
"lint": "next lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@nextui-org/react": "^2.2.10",
|
"@nextui-org/react": "^2.2.10",
|
||||||
"framer-motion": "^11.0.12",
|
"@tanstack/react-query": "^5.27.5",
|
||||||
"ky": "^1.2.2",
|
"framer-motion": "^11.0.12",
|
||||||
"next": "14.1.3",
|
"ky": "^1.2.2",
|
||||||
"next-pwa": "^5.6.0",
|
"next": "14.1.3",
|
||||||
"react": "^18",
|
"next-pwa": "^5.6.0",
|
||||||
"react-dom": "^18",
|
"react": "^18",
|
||||||
"zod": "^3.22.4"
|
"react-dom": "^18",
|
||||||
},
|
"react-icons": "^5.0.1",
|
||||||
"devDependencies": {
|
"zod": "^3.22.4"
|
||||||
"@types/next-pwa": "^5.6.9",
|
},
|
||||||
"@types/node": "^20",
|
"devDependencies": {
|
||||||
"@types/react": "^18",
|
"@tanstack/react-query-devtools": "^5.27.8",
|
||||||
"@types/react-dom": "^18",
|
"@types/next-pwa": "^5.6.9",
|
||||||
"autoprefixer": "^10.0.1",
|
"@types/node": "^20",
|
||||||
"eslint": "^8",
|
"@types/react": "^18",
|
||||||
"eslint-config-next": "14.1.3",
|
"@types/react-dom": "^18",
|
||||||
"postcss": "^8",
|
"autoprefixer": "^10.0.1",
|
||||||
"tailwindcss": "^3.3.0",
|
"eslint": "^8",
|
||||||
"typescript": "^5"
|
"eslint-config-next": "14.1.3",
|
||||||
}
|
"postcss": "^8",
|
||||||
|
"tailwindcss": "^3.3.0",
|
||||||
|
"typescript": "^5"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,73 @@
|
|||||||
|
"use client";
|
||||||
|
|
||||||
|
import { Component } from "@/typings/component";
|
||||||
|
import { useClient } from "@/hooks/useClient";
|
||||||
|
import { useQuery } from "@tanstack/react-query";
|
||||||
|
import { Card, CardFooter, CardBody } from "@nextui-org/card";
|
||||||
|
import { Image } from "@nextui-org/image";
|
||||||
|
import { Button } from "@nextui-org/button";
|
||||||
|
import { CircularProgress } from "@nextui-org/progress";
|
||||||
|
import { Divider } from "@nextui-org/divider";
|
||||||
|
import Link from "next/link";
|
||||||
|
import formatNumber from "@/utils/formatNumbers";
|
||||||
|
|
||||||
|
export const Trending: Component = ({}) => {
|
||||||
|
const client = useClient();
|
||||||
|
|
||||||
|
const { isLoading, error, data } = useQuery({
|
||||||
|
queryKey: ["trending"],
|
||||||
|
queryFn: () => client.getTrending("NL")
|
||||||
|
});
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="container px-4 mx-auto min-h-screen">
|
||||||
|
{isLoading && !data && (
|
||||||
|
<div className="flex items-center justify-center h-screen">
|
||||||
|
<CircularProgress aria-label="Loading trending page..." />
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
{data && (
|
||||||
|
<div className="grid gap-4 py-4 grid-cols-1 md:grid-cols-2 lg:grid-cols-3">
|
||||||
|
{data.map((video) => (
|
||||||
|
<Link key={video.id} href={`/watch?v=${video.id}`}>
|
||||||
|
<Card radius="lg">
|
||||||
|
<CardBody>
|
||||||
|
<Image
|
||||||
|
alt={video.title}
|
||||||
|
className="object-cover"
|
||||||
|
height={400}
|
||||||
|
src={video.thumbnails[0].url}
|
||||||
|
width={600}
|
||||||
|
/>
|
||||||
|
<p className="text-small absolute bottom-3 right-3 bg-content2 p-1">
|
||||||
|
20:41
|
||||||
|
</p>
|
||||||
|
</CardBody>
|
||||||
|
<Divider />
|
||||||
|
<CardFooter>
|
||||||
|
<div className="max-w-full">
|
||||||
|
<p title={video.title} className="truncate">
|
||||||
|
{video.title}
|
||||||
|
</p>
|
||||||
|
<div className="flex flex-row gap-2 justify-start overflow-scroll">
|
||||||
|
<p className="text-small tracking-tight text-default-400">
|
||||||
|
{video.author.name}
|
||||||
|
</p>
|
||||||
|
<p className="text-small tracking-tight text-default-400">
|
||||||
|
{video.uploaded.toLocaleDateString()}
|
||||||
|
</p>
|
||||||
|
|
||||||
|
<p className="text-small tracking-tight text-default-400">
|
||||||
|
Views: {formatNumber(video.views)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</CardFooter>
|
||||||
|
</Card>
|
||||||
|
</Link>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
@ -1,19 +0,0 @@
|
|||||||
"use client";
|
|
||||||
|
|
||||||
import Client from "@/client";
|
|
||||||
import { ApiType } from "@/client/adapters";
|
|
||||||
import { Component } from "@/typings/component";
|
|
||||||
import { useEffect } from "react";
|
|
||||||
|
|
||||||
export const Video: Component = ({}) => {
|
|
||||||
useEffect(() => {
|
|
||||||
const client = new Client([
|
|
||||||
{ baseUrl: "https://invidious.drgns.space", type: ApiType.Invidious },
|
|
||||||
{ baseUrl: "https://pipedapi.kavin.rocks", type: ApiType.Piped }
|
|
||||||
]);
|
|
||||||
|
|
||||||
client.getTrending("US").then(console.log);
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
return <></>;
|
|
||||||
};
|
|
||||||
@ -1,10 +1,9 @@
|
|||||||
import { Button } from "@nextui-org/button";
|
import { Trending } from "./Trending";
|
||||||
import { Video } from "./Video";
|
|
||||||
|
|
||||||
export default function Home() {
|
export default function Page() {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Video />
|
<Trending />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,7 +1,15 @@
|
|||||||
"use client";
|
"use client";
|
||||||
|
|
||||||
import { NextUIProvider } from "@nextui-org/react";
|
import { NextUIProvider } from "@nextui-org/react";
|
||||||
|
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
|
||||||
|
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
|
||||||
|
|
||||||
export function Providers({ children }: { children: React.ReactNode }) {
|
export function Providers({ children }: { children: React.ReactNode }) {
|
||||||
return <NextUIProvider>{children}</NextUIProvider>;
|
const queryClient = new QueryClient();
|
||||||
|
return (
|
||||||
|
<QueryClientProvider client={queryClient}>
|
||||||
|
<ReactQueryDevtools initialIsOpen={false} />
|
||||||
|
<NextUIProvider>{children}</NextUIProvider>
|
||||||
|
</QueryClientProvider>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
@ -0,0 +1,16 @@
|
|||||||
|
import Client from "@/client";
|
||||||
|
import { ApiType } from "@/client/adapters";
|
||||||
|
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
export const useClient = () => {
|
||||||
|
const [client] = useState(
|
||||||
|
() =>
|
||||||
|
new Client([
|
||||||
|
// { baseUrl: "https://invidious.drgns.space", type: ApiType.Invidious }
|
||||||
|
{ baseUrl: "https://pipedapi.kavin.rocks", type: ApiType.Piped }
|
||||||
|
])
|
||||||
|
);
|
||||||
|
|
||||||
|
return client;
|
||||||
|
};
|
||||||
@ -0,0 +1,14 @@
|
|||||||
|
const formatNumber = (num: number): string => {
|
||||||
|
// Nine Zeroes for Billions
|
||||||
|
return Math.abs(num) >= 1.0e9
|
||||||
|
? (Math.abs(num) / 1.0e9).toPrecision(3) + "B"
|
||||||
|
: // Six Zeroes for Millions
|
||||||
|
Math.abs(num) >= 1.0e6
|
||||||
|
? (Math.abs(num) / 1.0e6).toPrecision(3) + "M"
|
||||||
|
: // Three Zeroes for Thousands
|
||||||
|
Math.abs(num) >= 1.0e3
|
||||||
|
? (Math.abs(num) / 1.0e3).toPrecision(3) + "K"
|
||||||
|
: Math.abs(num).toString();
|
||||||
|
};
|
||||||
|
|
||||||
|
export default formatNumber;
|
||||||
Loading…
Reference in new issue