mirror of
https://github.com/Radiquum/AniX.git
synced 2025-04-27 08:29:40 +05:00
Merge remote-tracking branch 'origin/feat_player'
This commit is contained in:
parent
bb437fe7ca
commit
25e31a7799
GPG key ID:
858E8EE696525EED
62 changed files with 1508 additions and 701 deletions
286
app/pages/Profile.tsx
Normal file
286
app/pages/Profile.tsx
Normal file
|
|
@ -0,0 +1,286 @@
|
|||
"use client";
|
||||
import { useUserStore } from "#/store/auth";
|
||||
import { useEffect, useState } from "react";
|
||||
import { fetchDataViaGet } from "../api/utils";
|
||||
import { Spinner } from "../components/Spinner/Spinner";
|
||||
import { Avatar, Card, Button, Table } from "flowbite-react";
|
||||
import { Chip } from "../components/Chip/Chip";
|
||||
import { unixToDate, minutesToTime } from "../api/utils";
|
||||
import { ReleaseCourusel } from "#/components/ReleaseCourusel/ReleaseCourusel";
|
||||
|
||||
export const ProfilePage = (props: any) => {
|
||||
const authUser = useUserStore((state) => state);
|
||||
const [user, setUser] = useState(null);
|
||||
const [isMyProfile, setIsMyProfile] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
async function _getData() {
|
||||
let url = `/api/profile/${props.id}`;
|
||||
if (authUser.token) {
|
||||
url += `?token=${authUser.token}`;
|
||||
}
|
||||
const data = await fetchDataViaGet(url);
|
||||
setUser(data.profile);
|
||||
setIsMyProfile(data.is_my_profile);
|
||||
}
|
||||
_getData();
|
||||
}, [authUser]);
|
||||
|
||||
if (!user) {
|
||||
return (
|
||||
<main className="flex items-center justify-center min-h-screen">
|
||||
<Spinner />
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
const hasSocials =
|
||||
user.vk_page != "" ||
|
||||
user.tg_page != "" ||
|
||||
user.tt_page != "" ||
|
||||
user.inst_page != "" ||
|
||||
user.discord_page != "" ||
|
||||
false;
|
||||
const socials = [
|
||||
{
|
||||
name: "vk",
|
||||
nickname: user.vk_page,
|
||||
icon: "fa6-brands--vk",
|
||||
urlPrefix: "https://vk.com",
|
||||
},
|
||||
{
|
||||
name: "telegram",
|
||||
nickname: user.tg_page,
|
||||
icon: "fa6-brands--telegram",
|
||||
urlPrefix: "https://t.me",
|
||||
},
|
||||
{
|
||||
name: "discord",
|
||||
nickname: user.discord_page,
|
||||
icon: "fa6-brands--discord",
|
||||
},
|
||||
{
|
||||
name: "tiktok",
|
||||
nickname: user.tt_page,
|
||||
icon: "fa6-brands--tiktok",
|
||||
urlPrefix: "https://tiktok.com",
|
||||
},
|
||||
{
|
||||
name: "instagram",
|
||||
nickname: user.inst_page,
|
||||
icon: "fa6-brands--instagram",
|
||||
urlPrefix: "https://instagram.com",
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<main className="container flex flex-col gap-4 px-4 pt-4 pb-32 mx-auto overflow-hidden sm:pb-4">
|
||||
<div className="flex flex-col gap-4">
|
||||
<Card className="max-w-full">
|
||||
<div className="flex gap-2">
|
||||
{isMyProfile && <Chip bg_color="bg-blue-500" name="Мой профиль" />}
|
||||
{user.is_banned && (
|
||||
<Chip bg_color="bg-red-500" name="Заблокирован" />
|
||||
)}
|
||||
{user.is_verified && (
|
||||
<Chip bg_color="bg-green-500" name="Подтвержден" />
|
||||
)}
|
||||
{/* {user.is_banned && <Chip bg_color="bg-red-500" name="Заблокирован" />} */}
|
||||
|
||||
{/* <Chip bg="bg-blue-500" name={`Зарегистрирован: ${unixToDate(user.register_date)}`} /> */}
|
||||
{/* <Chip bg="bg-blue-500" name={`Последний вход: ${unixToDate(user.last_activity_time)}`} /> */}
|
||||
</div>
|
||||
<Avatar
|
||||
img={user.avatar}
|
||||
rounded={true}
|
||||
bordered={true}
|
||||
size="lg"
|
||||
className="justify-start"
|
||||
>
|
||||
<div className="space-y-1 font-medium dark:text-white">
|
||||
<div className="text-xl">{user.login}</div>
|
||||
<div className="text-sm text-gray-500 dark:text-gray-400 max-w-64">
|
||||
{user.status}
|
||||
</div>
|
||||
</div>
|
||||
</Avatar>
|
||||
{hasSocials && (
|
||||
<Button.Group
|
||||
outline={true}
|
||||
className="overflow-x-scroll scrollbar-none"
|
||||
>
|
||||
{socials.map((social) => {
|
||||
if (!social.nickname) return null;
|
||||
if (social.name == "discord")
|
||||
return (
|
||||
<Button color="light" key={social.name} as="a">
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<span
|
||||
className={`iconify-color h-4 w-4 sm:h-6 sm:w-6 ${social.icon}`}
|
||||
></span>
|
||||
{social.nickname}
|
||||
</div>
|
||||
</Button>
|
||||
);
|
||||
return (
|
||||
<Button
|
||||
color="light"
|
||||
key={social.name}
|
||||
href={`${social.urlPrefix}/${social.nickname}`}
|
||||
className="[&:is(a)]:hover:bg-gray-100"
|
||||
>
|
||||
<div className="flex items-center justify-center gap-2">
|
||||
<span
|
||||
className={`iconify-color h-4 w-4 sm:h-6 sm:w-6 ${social.icon}`}
|
||||
></span>
|
||||
{social.nickname}
|
||||
</div>
|
||||
</Button>
|
||||
);
|
||||
})}
|
||||
</Button.Group>
|
||||
)}
|
||||
</Card>
|
||||
<div className="flex flex-wrap gap-4">
|
||||
<Card className="flex-1 max-w-full">
|
||||
<h1>Активность</h1>
|
||||
<Table>
|
||||
<Table.Body className="divide-y">
|
||||
<Table.Row>
|
||||
<Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Регистрация
|
||||
</Table.Cell>
|
||||
<Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
{unixToDate(user.register_date)}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Был(а) в сети
|
||||
</Table.Cell>
|
||||
<Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
{unixToDate(user.last_activity_time)}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
Комментарий
|
||||
</Table.Cell>
|
||||
<Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
{user.comment_count}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
друзей
|
||||
</Table.Cell>
|
||||
<Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
{user.friend_count}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
видео
|
||||
</Table.Cell>
|
||||
<Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
{user.video_count}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
коллекций
|
||||
</Table.Cell>
|
||||
<Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
{user.collection_count}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
</Card>
|
||||
<Card className="flex-1 max-w-full">
|
||||
<h1>Статистика</h1>
|
||||
<Table>
|
||||
<Table.Body className="divide-y">
|
||||
<Table.Row>
|
||||
<Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
<span className="w-4 h-4 mr-2 iconify mdi--123 "></span>
|
||||
Просмотрено серий
|
||||
</Table.Cell>
|
||||
<Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
{user.watched_episode_count}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row className="hidden sm:table-row">
|
||||
<Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
<span className="w-4 h-4 mr-2 iconify mdi--clock "></span>
|
||||
Время просмотра
|
||||
</Table.Cell>
|
||||
<Table.Cell className="font-medium text-gray-900 whitespace-pre sm:whitespace-nowrap dark:text-white">
|
||||
{minutesToTime(user.watched_time)}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row className="table-row sm:hidden">
|
||||
<Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-pre sm:whitespace-nowrap dark:text-white">
|
||||
<span className="w-4 h-4 mr-2 iconify mdi--clock "></span>
|
||||
{minutesToTime(user.watched_time)}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
<span className="w-4 h-4 mr-2 iconify mdi--play "></span>
|
||||
Смотрю
|
||||
</Table.Cell>
|
||||
<Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
{user.watching_count}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
<span className="w-4 h-4 mr-2 iconify mdi--note-multiple "></span>
|
||||
В Планах
|
||||
</Table.Cell>
|
||||
<Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
{user.plan_count}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
<span className="w-4 h-4 mr-2 iconify mdi--tick "></span>
|
||||
Просмотрено
|
||||
</Table.Cell>
|
||||
<Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
{user.completed_count}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
<span className="w-4 h-4 mr-2 iconify mdi--question-mark "></span>
|
||||
Отложено
|
||||
</Table.Cell>
|
||||
<Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
{user.hold_on_count}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
<Table.Row>
|
||||
<Table.Cell className="flex items-center px-0 font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
<span className="w-4 h-4 mr-2 iconify mdi--erase "></span>
|
||||
Брошено
|
||||
</Table.Cell>
|
||||
<Table.Cell className="font-medium text-gray-900 whitespace-nowrap dark:text-white">
|
||||
{user.dropped_count}
|
||||
</Table.Cell>
|
||||
</Table.Row>
|
||||
</Table.Body>
|
||||
</Table>
|
||||
</Card>
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-4 py-2 bg-white border border-gray-200 rounded-lg shadow-md dark:border-gray-700 dark:bg-gray-800">
|
||||
<ReleaseCourusel
|
||||
sectionTitle="Недавно просмотренные"
|
||||
content={user.history}
|
||||
/>
|
||||
</div>
|
||||
</main>
|
||||
);
|
||||
};
|
||||
Loading…
Add table
Add a link
Reference in a new issue