artegoser/ultyt
1
0
Fork 0
mirror of https://github.com/artegoser/ultyt.git synced 2024-11-24 04:46:23 +03:00
Code Issues Projects Releases Packages Wiki Activity

refactor: ItemComponent

Browse source
This commit is contained in:
Artemy 2023-08-10 13:22:58 +03:00
parent 46e121a037
commit 0b41082979
3 changed files with 47 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
src/components/item.tsx Normal file
View 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;
};

4
src/components/video.tsx
View file

@ -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>

65
src/pages/channel.tsx
View file

@ -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>
);
}