mirror of
https://github.com/artegoser/ultyt.git
synced 2024-11-05 20:43:58 +03:00
refactor: ItemComponent
This commit is contained in:
parent
46e121a037
commit
0b41082979
3 changed files with 47 additions and 50 deletions
28
src/components/item.tsx
Normal file
28
src/components/item.tsx
Normal file
|
@ -0,0 +1,28 @@
|
|||
import { Channel, Playlist, Video } from "piped-api/dist/types";
|
||||
import { VideoComponent } from "./video";
|
||||
import { PlaylistComponent } from "./playlist";
|
||||
import { ChannelComponent } from "./channel";
|
||||
|
||||
export function ItemComponent({ item, channel }: ItemComponentProps) {
|
||||
if (item.type === "stream") {
|
||||
item = item as Video;
|
||||
return <VideoComponent video={item} uploaderAvatar={channel.avatarUrl} />;
|
||||
} else if (item.type === "playlist") {
|
||||
item = item as Playlist;
|
||||
return (
|
||||
<PlaylistComponent playlist={item} uploaderAvatar={channel.avatarUrl} />
|
||||
);
|
||||
} else if (item.type === "channel") {
|
||||
item = item as Channel;
|
||||
return <ChannelComponent channel={item} />;
|
||||
} else {
|
||||
<div className="" key={Math.random()}>
|
||||
Idk how to render this
|
||||
</div>;
|
||||
}
|
||||
}
|
||||
|
||||
type ItemComponentProps = {
|
||||
channel: Channel;
|
||||
item: Video | Playlist | Channel;
|
||||
};
|
|
@ -38,7 +38,9 @@ export function VideoComponent({ video, uploaderAvatar }: VideoComponentProps) {
|
|||
<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}`}
|
||||
{`${shortenNumber(video.views)}${
|
||||
video.uploadedDate ? ` • ${video.uploadedDate}` : ""
|
||||
}`}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
@ -1,16 +1,11 @@
|
|||
import { Channel, Playlist, Tab, Video } from "piped-api/dist/types";
|
||||
import {
|
||||
SkeletonVideoComponent,
|
||||
VideoComponent,
|
||||
VideoContainer,
|
||||
} from "../components/video";
|
||||
import { Channel, Tab } from "piped-api/dist/types";
|
||||
import { SkeletonVideoComponent, VideoContainer } from "../components/video";
|
||||
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";
|
||||
import { ChannelComponent } from "../components/channel";
|
||||
import { ItemComponent } from "../components/item";
|
||||
|
||||
export default function ChannelPage() {
|
||||
const { id } = useParams();
|
||||
|
@ -135,48 +130,20 @@ class ChannelPageСomponent extends React.Component<
|
|||
})}
|
||||
</div>
|
||||
|
||||
{tabId !== "videos" ? (
|
||||
<VideoContainer>
|
||||
{tab?.content.map((item) => {
|
||||
if (item.type === "stream") {
|
||||
item = item as Video;
|
||||
return (
|
||||
<VideoComponent
|
||||
video={item}
|
||||
key={item.url}
|
||||
uploaderAvatar={channel.avatarUrl}
|
||||
/>
|
||||
);
|
||||
} else if (item.type === "playlist") {
|
||||
item = item as Playlist;
|
||||
return (
|
||||
<PlaylistComponent
|
||||
playlist={item}
|
||||
key={item.url}
|
||||
uploaderAvatar={channel.avatarUrl}
|
||||
/>
|
||||
);
|
||||
} else if (item.type === "channel") {
|
||||
item = item as Channel;
|
||||
return <ChannelComponent key={item.url} channel={item} />;
|
||||
} else {
|
||||
<div className="" key={Math.random()}>
|
||||
Idk how to render this
|
||||
</div>;
|
||||
}
|
||||
})}
|
||||
</VideoContainer>
|
||||
) : (
|
||||
<VideoContainer>
|
||||
{channel.relatedStreams.map((video) => (
|
||||
<VideoComponent
|
||||
video={video}
|
||||
key={video.url}
|
||||
uploaderAvatar={channel.avatarUrl}
|
||||
<VideoContainer>
|
||||
{(tabId !== "videos"
|
||||
? tab?.content || []
|
||||
: channel.relatedStreams
|
||||
).map((item) => {
|
||||
return (
|
||||
<ItemComponent
|
||||
key={Math.random()}
|
||||
item={item}
|
||||
channel={channel}
|
||||
/>
|
||||
))}
|
||||
</VideoContainer>
|
||||
)}
|
||||
);
|
||||
})}
|
||||
</VideoContainer>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue