feat: video component and trending

package-lock.json

@@ -8,9 +8,10 @@
       "name": "ultyt",
       "version": "0.0.0",
       "dependencies": {
+        "@heroicons/react": "^2.0.18",
         "@nextui-org/react": "^2.0.7",
         "framer-motion": "^10.15.1",
-        "piped-api": "^1.1.2",
+        "piped-api": "^1.1.6",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.14.2"
@@ -529,6 +530,14 @@
         "tslib": "^2.4.0"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
+      "integrity": "sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.10",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.10.tgz",
@@ -4430,9 +4439,9 @@
       }
     },
     "node_modules/piped-api": {
-      "version": "1.1.2",
+      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/piped-api/-/piped-api-1.1.2.tgz",
+      "resolved": "https://registry.npmjs.org/piped-api/-/piped-api-1.1.6.tgz",
-      "integrity": "sha512-5eEGjsehCG/uazk6yPzv1FuPm9pe7HYyFBgAzJoHcCLVROwOifk5+qdQMCqEeVL0d5rtdiB2i+KOozZzmsUZqg==",
+      "integrity": "sha512-Tyn6/x/nBass469Io5zyILKylQI6sHE0MIYPYgD5nD232TmBF3G0OU+AQrvqU6cCla+Bkff3oFo+4GhnJKeiuA==",
       "dependencies": {
         "axios": "^1.4.0"
       }

package.json

@@ -10,9 +10,10 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@heroicons/react": "^2.0.18",
     "@nextui-org/react": "^2.0.7",
     "framer-motion": "^10.15.1",
-    "piped-api": "^1.1.2",
+    "piped-api": "^1.1.6",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.14.2"

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 { BrowserRouter, Route, Routes } from "react-router-dom";
-import Trending from './pages/trending';
+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(){
+    async function getTrending() {
-      
+      const trending = await window.piped_api.trending("US"); //await window.piped_api.search("artegoser");
-        const trending = await window.piped_api.trending("US");
       setTrending(trending);
-        console.log(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}>
+  return (
-    <CardHeader><Image className="w-full" src={video.thumbnail}/></CardHeader>
+    <div className="grid md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 gap-2 p-4">
-    <Divider/>
+      {trending.map((video) => (
-    <CardBody className="grid grid-cols-3">
+        <VideoComponent video={video} key={video.url} />
-    <Avatar src={video.uploaderAvatar} />
+      ))}
-    <p className="text-md">{video.uploaderName}</p>
+    </div>
-    </CardBody>
+  );
-  </Card>)}</div>;
 }