feat: video component and trending

src/App.tsx

@@ -1,10 +1,9 @@
+import "./App.css";
 
-import './App.css'
-
-import {NextUIProvider} from "@nextui-org/react";
+import { NextUIProvider } from "@nextui-org/react";
 import { PipedAPI } from "piped-api";
-import { BrowserRouter, Route, Routes } from 'react-router-dom';
-import Trending from './pages/trending';
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Trending from "./pages/trending";
 
 declare global {
   interface Window {
@@ -12,7 +11,7 @@ declare global {
   }
 }
 function App() {
-  window.piped_api = new PipedAPI("https://ytapi.dc09.ru");
+  window.piped_api = new PipedAPI(); //"https://ytapi.dc09.ru");
 
   return (
     <NextUIProvider>
@@ -22,7 +21,7 @@ function App() {
         </Routes>
       </BrowserRouter>
     </NextUIProvider>
-  )
+  );
 }
 
-export default App
+export default App;

src/components/utils.ts

@@ -0,0 +1,8 @@
+export function shortenNumber(number: number) {
+  if (number >= 1000000) {
+    return (number / 1000000).toFixed(2) + "M";
+  } else if (number >= 1000) {
+    return (number / 1000).toFixed(1) + "k";
+  }
+  return number.toString();
+}

src/components/video.tsx

@@ -0,0 +1,47 @@
+import { Avatar, Card, CardBody, CardHeader, Link } from "@nextui-org/react";
+import { Video } from "piped-api/dist/types";
+import { useNavigate } from "react-router-dom";
+import { CheckCircleIcon, EyeIcon } from "@heroicons/react/24/solid";
+import { shortenNumber } from "./utils";
+export function VideoComponent({ video }: VideoComponentProps) {
+  const navigate = useNavigate();
+
+  return (
+    <Card
+      isBlurred
+      isPressable
+      onPress={() => navigate(video.url)}
+      shadow="none"
+    >
+      <CardHeader>
+        <img className="w-full rounded-xl" src={video.thumbnail} />
+      </CardHeader>
+      <CardBody className="flex gap-3 flex-row">
+        <Avatar className="flex-none" src={video.uploaderAvatar} />
+        <div className="flex gap-3 flex-col">
+          <Link color="foreground" href={video.url}>
+            {video.title}
+          </Link>
+          <Link color="foreground" href={video.uploaderUrl}>
+            <div className="flex flex-row items-center">
+              <p className="flex-none text-md">{video.uploaderName}</p>
+              {video.uploaderVerified && (
+                <CheckCircleIcon className="w-6 h-6 p-1" />
+              )}
+            </div>
+          </Link>
+          <div className="flex flex-row items-center">
+            <EyeIcon className="w-6 h-6 p-1" />
+            <p className="flex-none text-md">
+              {`${shortenNumber(video.views)} • ${video.uploadedDate}`}
+            </p>
+          </div>
+        </div>
+      </CardBody>
+    </Card>
+  );
+}
+
+type VideoComponentProps = {
+  video: Video;
+};

src/pages/trending.tsx

@@ -1,17 +1,14 @@
-import { Video } from "piped-api/dist/responses.interface";
+import { Video } from "piped-api/dist/types";
 import { useEffect, useState } from "react";
+import { VideoComponent } from "../components/video";
 
-import {Avatar, Badge, Card, CardHeader, CardBody, CardFooter, Divider, Link, Image} from "@nextui-org/react";
 export default function Trending() {
-  
   const [trending, setTrending] = useState([] as Video[]);
 
   useEffect(() => {
-    async function getTrending(){
-      
-        const trending = await window.piped_api.trending("US");
-        setTrending(trending);
-        console.log(trending);
+    async function getTrending() {
+      const trending = await window.piped_api.trending("US"); //await window.piped_api.search("artegoser");
+      setTrending(trending);
     }
 
     if (trending.length === 0) {
@@ -19,12 +16,11 @@ export default function Trending() {
     }
   });
 
-  return <div className="grid grid-cols-6 gap-4 p-4">{trending.map((video) => <Card key={video.url}>
-    <CardHeader><Image className="w-full" src={video.thumbnail}/></CardHeader>
-    <Divider/>
-    <CardBody className="grid grid-cols-3">
-    <Avatar src={video.uploaderAvatar} />
-    <p className="text-md">{video.uploaderName}</p>
-    </CardBody>
-  </Card>)}</div>;
+  return (
+    <div className="grid md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 gap-2 p-4">
+      {trending.map((video) => (
+        <VideoComponent video={video} key={video.url} />
+      ))}
+    </div>
+  );
 }