feat: playlists in channel

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"
       }

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"

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 (
+    <Card isPressable onPress={() => navigate(playlist.url)} shadow="none">
+      <CardHeader>
+        <img className="w-full rounded-xl" src={playlist.thumbnail} />
+      </CardHeader>
+      <CardBody className="flex gap-3 flex-row">
+        <Avatar
+          className="flex-none"
+          src={uploaderAvatar ? uploaderAvatar : playlist.uploaderAvatar}
+        />
+        <div className="flex gap-3 flex-col">
+          <Link color="foreground" href={`#${playlist.url}`}>
+            {playlist.name}
+          </Link>
+          <Link color="foreground" href={`#${playlist.uploaderUrl}`}>
+            <div className="flex flex-row items-center">
+              <p className="text-md">{playlist.uploaderName}</p>
+              {playlist.uploaderVerified && (
+                <CheckCircleIcon className="w-6 h-6 p-1" />
+              )}
+            </div>
+          </Link>
+          <div className="flex flex-row items-center">
+            <p className="flex-none text-md">
+              {`${shortenNumber(playlist.videos)} videos`}
+            </p>
+          </div>
+        </div>
+      </CardBody>
+    </Card>
+  );
+}
+
+type PlaylistComponentProps = {
+  playlist: Playlist;
+  uploaderAvatar?: string;
+};

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<
               <img className="w-full rounded-xl" src={channel.bannerUrl} />
             </div>
             <CardFooter className="p-4 justify-between ">
-              <div className="flex flex-col">
+              <div className="flex flex-row">
                 <div className="flex flex-row gap-2 text-xl font-bold pl-2">
                   {channel.name}
                 </div>
+                {channel.verified && (
+                  <CheckCircleIcon className="w-6 h-6 p-1" />
+                )}
               </div>
             </CardFooter>
           </Card>
@@ -125,22 +130,32 @@ class ChannelPageСomponent extends React.Component<
 
           {tabId !== "videos" ? (
             <VideoContainer>
-              {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 (
                     <VideoComponent
-                      video={video}
-                      key={video.url}
+                      video={item}
+                      key={item.url}
                       uploaderAvatar={channel.avatarUrl}
                     />
                   );
-                } else {
+                } else if (item.type === "playlist") {
+                  item = item as Playlist;
                   return (
-                    <div className="" key={Math.random()}>
-                      Soon...
-                    </div>
+                    <PlaylistComponent
+                      playlist={item}
+                      key={item.url}
+                      uploaderAvatar={channel.avatarUrl}
+                    />
                   );
+                } else if (item.type === "channel") {
+                  item = item as Channel;
+                  return <div>Soon...</div>;
+                } else {
+                  <div className="" key={Math.random()}>
+                    Idk how to render this
+                  </div>;
                 }
               })}
             </VideoContainer>