diff --git a/package-lock.json b/package-lock.json index 9f4d41b..d98d077 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,7 +11,7 @@ "@heroicons/react": "^2.0.18", "@nextui-org/react": "^2.0.7", "framer-motion": "^10.15.1", - "piped-api": "^1.2.0", + "piped-api": "^1.2.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.14.2" @@ -4439,9 +4439,9 @@ } }, "node_modules/piped-api": { - "version": "1.2.0", - "resolved": "https://registry.npmjs.org/piped-api/-/piped-api-1.2.0.tgz", - "integrity": "sha512-180w5tI7/I4bPQ0+Jwl5fj84cd+bffq4XihK9lt6zbUQdmbIcxVsJ/zi83rUAJGAijCp0/BuZeGywpKp9Lt5NA==", + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/piped-api/-/piped-api-1.2.1.tgz", + "integrity": "sha512-HoJPQVEiDkwPFTwl29pg1zRcCm7GGZjW5pWt35A8uRRPb6475NgmZT0K+Z+GPtC4j78rbcGK2NEdkZceibW9gQ==", "dependencies": { "axios": "^1.4.0" } diff --git a/package.json b/package.json index 1b54131..601f00b 100644 --- a/package.json +++ b/package.json @@ -13,7 +13,7 @@ "@heroicons/react": "^2.0.18", "@nextui-org/react": "^2.0.7", "framer-motion": "^10.15.1", - "piped-api": "^1.2.0", + "piped-api": "^1.2.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.14.2" diff --git a/src/components/playlist.tsx b/src/components/playlist.tsx new file mode 100644 index 0000000..a61c940 --- /dev/null +++ b/src/components/playlist.tsx @@ -0,0 +1,48 @@ +import { Avatar, Card, CardBody, CardHeader, Link } from "@nextui-org/react"; +import { Playlist } from "piped-api/dist/types"; +import { useNavigate } from "react-router-dom"; +import { CheckCircleIcon } from "@heroicons/react/24/solid"; +import { shortenNumber } from "./utils"; +export function PlaylistComponent({ + playlist, + uploaderAvatar, +}: PlaylistComponentProps) { + const navigate = useNavigate(); + + return ( + navigate(playlist.url)} shadow="none"> + + + + + +
+ + {playlist.name} + + +
+

{playlist.uploaderName}

+ {playlist.uploaderVerified && ( + + )} +
+ +
+

+ {`${shortenNumber(playlist.videos)} videos`} +

+
+
+
+
+ ); +} + +type PlaylistComponentProps = { + playlist: Playlist; + uploaderAvatar?: string; +}; diff --git a/src/pages/channel.tsx b/src/pages/channel.tsx index 34151c1..9c1be1e 100644 --- a/src/pages/channel.tsx +++ b/src/pages/channel.tsx @@ -1,4 +1,4 @@ -import { Channel, Tab, Video } from "piped-api/dist/types"; +import { Channel, Playlist, Tab, Video } from "piped-api/dist/types"; import { SkeletonVideoComponent, VideoComponent, @@ -8,6 +8,8 @@ import { useParams, useSearchParams } from "react-router-dom"; import { Button, Card, CardFooter } from "@nextui-org/react"; import { capitalize } from "../components/utils"; import React from "react"; +import { PlaylistComponent } from "../components/playlist"; +import { CheckCircleIcon } from "@heroicons/react/24/solid"; export default function ChannelPage() { const { id } = useParams(); @@ -85,10 +87,13 @@ class ChannelPageŠ”omponent extends React.Component< -
+
{channel.name}
+ {channel.verified && ( + + )}
@@ -125,22 +130,32 @@ class ChannelPageŠ”omponent extends React.Component< {tabId !== "videos" ? ( - {tab?.content.map((video) => { - if (video.type === "stream") { - video = video as Video; + {tab?.content.map((item) => { + if (item.type === "stream") { + item = item as Video; return ( ); - } else { + } else if (item.type === "playlist") { + item = item as Playlist; return ( -
- Soon... -
+ ); + } else if (item.type === "channel") { + item = item as Channel; + return
Soon...
; + } else { +
+ Idk how to render this +
; } })}