mirror of
https://github.com/artegoser/ultyt.git
synced 2024-11-05 20:43:58 +03:00
refactor: class components
This commit is contained in:
parent
b7a10179ad
commit
bafd943814
3 changed files with 161 additions and 128 deletions
|
@ -1,10 +1,3 @@
|
|||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
@layer base {
|
||||
body {
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='%23f1f5f9'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
|
||||
@apply bg-gray-200;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import { Channel, Tab, Video } from "piped-api/dist/types";
|
||||
import { useEffect, useState } from "react";
|
||||
import {
|
||||
SkeletonVideoComponent,
|
||||
VideoComponent,
|
||||
|
@ -8,118 +7,156 @@ import {
|
|||
import { useParams, useSearchParams } from "react-router-dom";
|
||||
import { Button, Card, CardFooter } from "@nextui-org/react";
|
||||
import { capitalize } from "../components/utils";
|
||||
import React from "react";
|
||||
|
||||
export default function ChannelPage() {
|
||||
const [channel, setChannel] = useState<Channel>();
|
||||
const [tab, setTab] = useState<Tab>();
|
||||
|
||||
const { id } = useParams();
|
||||
const [searchParams, setSearchParams] = useSearchParams();
|
||||
const tabId = searchParams.get("tabId") || "videos";
|
||||
|
||||
useEffect(() => {
|
||||
async function getChannel() {
|
||||
const channel = (await window.piped_api.channel(id || "")) as Channel;
|
||||
setChannel(channel);
|
||||
return (
|
||||
<ChannelPageСomponent
|
||||
id={id}
|
||||
setSearchParams={setSearchParams}
|
||||
tabId={tabId}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
class ChannelPageСomponent extends React.Component<
|
||||
{ id; setSearchParams; tabId },
|
||||
{ channel: Channel; tab: Tab | undefined }
|
||||
> {
|
||||
async componentDidMount() {
|
||||
const channel = (await window.piped_api.channel(
|
||||
this.props.id || ""
|
||||
)) as Channel;
|
||||
|
||||
if (this.props.tabId === "videos") {
|
||||
return this.setState({ channel });
|
||||
}
|
||||
|
||||
async function getTab(name: string) {
|
||||
const tab = await window.piped_api.channelTabs(channel?.tabs[name].data);
|
||||
setTab(tab);
|
||||
if (!this.state?.tab) {
|
||||
const tab = await window.piped_api.channelTabs(
|
||||
channel.tabs[this.props.tabId].data
|
||||
);
|
||||
|
||||
this.setState({ channel, tab });
|
||||
}
|
||||
}
|
||||
|
||||
async updateTab() {
|
||||
if (this.props.tabId === "videos") {
|
||||
return;
|
||||
}
|
||||
const { channel } = this.state;
|
||||
const tab = await window.piped_api.channelTabs(
|
||||
channel.tabs[this.props.tabId].data
|
||||
);
|
||||
this.setState({ channel, tab });
|
||||
}
|
||||
|
||||
componentDidUpdate() {
|
||||
if (!this.state.tab) {
|
||||
this.updateTab();
|
||||
}
|
||||
}
|
||||
render() {
|
||||
if (!this.state) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const { channel, tab } = this.state;
|
||||
const { setSearchParams, tabId } = this.props;
|
||||
|
||||
if (!channel) {
|
||||
getChannel();
|
||||
}
|
||||
|
||||
if (!tab && tabId !== "videos") {
|
||||
getTab(tabId);
|
||||
}
|
||||
});
|
||||
|
||||
if (!channel) {
|
||||
return (
|
||||
<div className="grid md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 gap-2 p-4">
|
||||
{[...Array(20).keys()].map((num) => (
|
||||
<SkeletonVideoComponent key={num} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className="grid grid-rows p-4">
|
||||
<Card radius="lg" shadow="none">
|
||||
<div className="p-4">
|
||||
<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 gap-2 text-xl font-bold pl-2">
|
||||
{channel.name}
|
||||
</div>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
<div className="flex flex-row flex-wrap gap-2 mt-4">
|
||||
<Button
|
||||
onClick={() => {
|
||||
setSearchParams({ tabId: "videos" });
|
||||
}}
|
||||
key="videos"
|
||||
className="text-xl font-bold mt-4"
|
||||
>
|
||||
Videos
|
||||
</Button>
|
||||
{channel.tabs.map((tab, index) => {
|
||||
return (
|
||||
<Button
|
||||
onClick={() => {
|
||||
setSearchParams({ tabId: String(index) });
|
||||
setTab(undefined);
|
||||
}}
|
||||
key={tab.name}
|
||||
className="text-xl font-bold mt-4"
|
||||
>
|
||||
{capitalize(tab.name)}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
return (
|
||||
<div className="grid md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 gap-2 p-4">
|
||||
{[...Array(20).keys()].map((num) => (
|
||||
<SkeletonVideoComponent key={num} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className="grid grid-rows p-4">
|
||||
<Card radius="lg" shadow="none">
|
||||
<div className="p-4">
|
||||
<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 gap-2 text-xl font-bold pl-2">
|
||||
{channel.name}
|
||||
</div>
|
||||
</div>
|
||||
</CardFooter>
|
||||
</Card>
|
||||
|
||||
{tabId !== "videos" ? (
|
||||
<VideoContainer>
|
||||
{tab?.content.map((video) => {
|
||||
if (video.type === "stream") {
|
||||
video = video as Video;
|
||||
return (
|
||||
<VideoComponent
|
||||
video={video}
|
||||
key={video.url}
|
||||
uploaderAvatar={channel.avatarUrl}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className="" key={Math.random()}>
|
||||
Soon...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
<div className="flex flex-row flex-wrap gap-2 mt-4">
|
||||
<Button
|
||||
onClick={() => {
|
||||
setSearchParams({ tabId: "videos" });
|
||||
}}
|
||||
key="videos"
|
||||
className="text-xl font-bold mt-4"
|
||||
>
|
||||
Videos
|
||||
</Button>
|
||||
{channel.tabs.map((tab, index) => {
|
||||
return (
|
||||
<Button
|
||||
onClick={() => {
|
||||
setSearchParams({ tabId: String(index) });
|
||||
|
||||
this.setState({
|
||||
...this.state,
|
||||
tab: undefined,
|
||||
});
|
||||
}}
|
||||
key={tab.name}
|
||||
className="text-xl font-bold mt-4"
|
||||
>
|
||||
{capitalize(tab.name)}
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</VideoContainer>
|
||||
) : (
|
||||
<VideoContainer>
|
||||
{channel.relatedStreams.map((video) => (
|
||||
<VideoComponent
|
||||
video={video}
|
||||
key={video.url}
|
||||
uploaderAvatar={channel.avatarUrl}
|
||||
/>
|
||||
))}
|
||||
</VideoContainer>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
</div>
|
||||
|
||||
{tabId !== "videos" ? (
|
||||
<VideoContainer>
|
||||
{tab?.content.map((video) => {
|
||||
if (video.type === "stream") {
|
||||
video = video as Video;
|
||||
return (
|
||||
<VideoComponent
|
||||
video={video}
|
||||
key={video.url}
|
||||
uploaderAvatar={channel.avatarUrl}
|
||||
/>
|
||||
);
|
||||
} else {
|
||||
return (
|
||||
<div className="" key={Math.random()}>
|
||||
Soon...
|
||||
</div>
|
||||
);
|
||||
}
|
||||
})}
|
||||
</VideoContainer>
|
||||
) : (
|
||||
<VideoContainer>
|
||||
{channel.relatedStreams.map((video) => (
|
||||
<VideoComponent
|
||||
video={video}
|
||||
key={video.url}
|
||||
uploaderAvatar={channel.avatarUrl}
|
||||
/>
|
||||
))}
|
||||
</VideoContainer>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -1,36 +1,39 @@
|
|||
import { Video } from "piped-api/dist/types";
|
||||
import { useEffect, useState } from "react";
|
||||
import { SkeletonVideoComponent, VideoComponent } from "../components/video";
|
||||
import React from "react";
|
||||
|
||||
export default function TrendingPage() {
|
||||
const [trending, setTrending] = useState([] as Video[]);
|
||||
export default class TrendingPage extends React.Component {
|
||||
state: { trending: Video[] } = {
|
||||
trending: [],
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
async function getTrending() {
|
||||
const trending = await window.piped_api.trending("US");
|
||||
setTrending(trending);
|
||||
}
|
||||
async componentDidMount() {
|
||||
console.log("trending");
|
||||
const trending = await window.piped_api.trending(
|
||||
localStorage.getItem("region") || "US"
|
||||
);
|
||||
this.setState({ trending });
|
||||
}
|
||||
|
||||
render() {
|
||||
const { trending } = this.state;
|
||||
|
||||
if (trending.length === 0) {
|
||||
getTrending();
|
||||
return (
|
||||
<div className="grid md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 gap-2 p-4">
|
||||
{[...Array(20).keys()].map((num) => (
|
||||
<SkeletonVideoComponent key={num} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
if (trending.length === 0) {
|
||||
return (
|
||||
<div className="grid md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 gap-2 p-4">
|
||||
{[...Array(20).keys()].map((num) => (
|
||||
<SkeletonVideoComponent key={num} />
|
||||
{trending.map((video) => (
|
||||
<VideoComponent video={video} key={video.url} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="grid md:grid-cols-2 xl:grid-cols-4 2xl:grid-cols-5 gap-2 p-4">
|
||||
{trending.map((video) => (
|
||||
<VideoComponent video={video} key={video.url} />
|
||||
))}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue