Ilgeldi
/
turkmentv_front
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

added playlist route

This commit is contained in:
Ilgeldi 2025-02-27 16:38:46 +05:00
parent 37dd838a94
commit abe1590dcb
2 changed files with 106 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
app/(main)/playlist/[id]/page.tsx
View File

@ -1,5 +1,6 @@
import { getPlaylistById } from "@/api/queries"; import { getPlaylistById } from "@/api/queries";
import PlaylistVideos from "@/components/playlist"; import PlaylistVideos from "@/components/playlist";
import { notFound, redirect } from "next/navigation";
interface IParams { interface IParams {
params: { params: {
@ -12,6 +13,10 @@ const Page = async ({ params }: IParams) => {
const videos = await getPlaylistById(id); const videos = await getPlaylistById(id);
if (videos?.data?.length === 0) {
notFound();
}
return ( return (
<div className="video-item mt-6"> <div className="video-item mt-6">
<div className="container"> <div className="container">

182
components/playlist/index.tsx
View File

@ -6,26 +6,31 @@ import aydym from "@/public/aydym-com.webp";
import horjun from "@/public/horjun.png"; import horjun from "@/public/horjun.png";
import belet from "@/public/belet.jpg"; import belet from "@/public/belet.jpg";
import { v4 } from "uuid"; import { v4 } from "uuid";
import { useRouter, useSearchParams } from "next/navigation";
import { useQuery } from "@tanstack/react-query";
import { Queries } from "@/api/queries";
import Loader from "../Loader";
const PlaylistVideos = ({ id, data }: { id: string; data: any }) => { const PlaylistVideos = ({ id, data }: { id: string; data: any }) => {
const [index, setIndex] = useState<number>(0); const searchParams = useSearchParams();
const videoId = searchParams.get("video");
return ( return (
<div className="video-item-inner"> <div className="video-item-inner">
<div className="video-item-wrapper flex flex-col md:flex-row md:items-start items-center gap-10 relative pb-14 w-full"> <div className="video-item-wrapper flex flex-col md:flex-row md:items-start items-center gap-10 relative pb-14 w-full">
<InfoBlock data={data?.data[index]} /> <InfoBlock video_id={data?.data[Number(videoId)].id} />
<div className="video-item-inner flex flex-col gap-4 grow-0"> <div className="video-item-inner flex flex-col gap-4 grow-0">
{data?.data.map( {data?.data.map(
(item: any, i: number) => (item: any, i: number) =>
i !== index && ( i !== Number(videoId) && (
<button key={v4()} onClick={() => setIndex(i)}> <Link href={`/playlist/${id}?video=${i}`} key={v4()}>
<VideoItem <VideoItem
id={item.id} id={item.id}
img={item.banner_url} img={item.banner_url}
title={item.title} title={item.title}
/> />
</button> </Link>
) )
)} )}
</div> </div>
@ -36,91 +41,106 @@ const PlaylistVideos = ({ id, data }: { id: string; data: any }) => {
export default PlaylistVideos; export default PlaylistVideos;
const InfoBlock = ({ data }: { data: any }) => ( const InfoBlock = ({ video_id }: { video_id: number }) => {
<div className="flex gap-6 flex-1 w-full justify-between h-full"> const { data, isFetching, error } = useQuery({
<div className="flex flex-col gap-6 w-full h-full"> queryKey: ["video", video_id],
<div className="flex justify-between gap-[32px] w-full h-full"> queryFn: () => Queries.getVideo(video_id),
<div className="w-full flex flex-col gap-6 h-full"> });
<div className="flex flex-col gap-[40px] h-full w-full">
<div className="flex gap-[40px] flex-col h-full w-full">
<div className="w-full">
<VideoPlayer content={data} />
</div>
<div className="flex flex-col gap-6"> if (isFetching)
{data?.desc ? ( return (
<p className="font-roboto text-lg w-full text-black"> <div className="w-full h-[500px] sm:h-[667px] md:h-[600px] l flex items-center justify-center">
{data.desc} <Loader height={700} />
</p> </div>
) : null} );
if (error) return <h1>{JSON.stringify(error)}</h1>;
{data?.aydym_com_url || return (
data?.horjun_content_url || <div className="flex gap-6 flex-1 w-full justify-between h-full">
data?.belet_url ? ( <div className="flex flex-col gap-6 w-full h-full">
<div className="flex flex-col gap-6"> <div className="flex justify-between gap-[32px] w-full h-full">
<h2 className="text-2xl font-semibold"> <div className="w-full flex flex-col gap-6 h-full">
Beýleki platformalarda seret: <div className="flex flex-col gap-[40px] h-full w-full">
</h2> <div className="flex gap-[40px] flex-col h-full w-full">
<div className="flex gap-11 items-center"> <div className="w-full">
{data.aydym_com_url ? ( <VideoPlayer content={data?.data} />
<Link </div>
href={data.aydym_com_url}
target="_blank" <div className="flex flex-col gap-6">
className="flex flex-col items-center justify-center gap-2" {data?.data?.desc ? (
> <p className="font-roboto text-lg w-full text-black">
<div className="relative h-16 w-16 flex items-center justify-center overflow-hidden border-[#00AEFF] border-[1.5px] p-2 rounded-full"> {data?.data.desc}
<Image </p>
src={aydym} ) : null}
alt="Aydym.com"
className="rounded-full" {data?.data?.aydym_com_url ||
/> data?.data?.horjun_content_url ||
</div> data?.data?.belet_url ? (
<h3>Aydym.com</h3> <div className="flex flex-col gap-6">
</Link> <h2 className="text-2xl font-semibold">
) : null} Beýleki platformalarda seret:
{data.horjun_content_url ? ( </h2>
<Link <div className="flex gap-11 items-center">
href={data.horjun_content_url} {data?.data.aydym_com_url ? (
target="_blank" <Link
className="flex flex-col items-center justify-center gap-2" href={data?.data.aydym_com_url}
> target="_blank"
<div className="relative h-16 w-16 flex items-center justify-center overflow-hidden border-[#00AEFF] border-[1.5px] p-2 rounded-full"> className="flex flex-col items-center justify-center gap-2"
<Image >
src={horjun} <div className="relative h-16 w-16 flex items-center justify-center overflow-hidden border-[#00AEFF] border-[1.5px] p-2 rounded-full">
alt="HorjunTv" <Image
className="rounded-full" src={aydym}
/> alt="Aydym.com"
</div> className="rounded-full"
<h3>HorjunTv</h3> />
</Link> </div>
) : null} <h3>Aydym.com</h3>
{data.belet_url ? ( </Link>
<Link ) : null}
href={data.belet_url} {data?.data.horjun_content_url ? (
target="_blank" <Link
className="flex flex-col items-center justify-center gap-2" href={data?.data.horjun_content_url}
> target="_blank"
<div className="relative h-16 w-16 flex items-center justify-center overflow-hidden border-[#00AEFF] border-[1.5px] p-2 rounded-full"> className="flex flex-col items-center justify-center gap-2"
<Image >
src={belet} <div className="relative h-16 w-16 flex items-center justify-center overflow-hidden border-[#00AEFF] border-[1.5px] p-2 rounded-full">
alt="BeletTv" <Image
className="rounded-full" src={horjun}
/> alt="HorjunTv"
</div> className="rounded-full"
<h3>BeletFilm</h3> />
</Link> </div>
) : null} <h3>HorjunTv</h3>
</Link>
) : null}
{data?.data.belet_url ? (
<Link
href={data?.data.belet_url}
target="_blank"
className="flex flex-col items-center justify-center gap-2"
>
<div className="relative h-16 w-16 flex items-center justify-center overflow-hidden border-[#00AEFF] border-[1.5px] p-2 rounded-full">
<Image
src={belet}
alt="BeletTv"
className="rounded-full"
/>
</div>
<h3>BeletFilm</h3>
</Link>
) : null}
</div>
</div> </div>
</div> ) : null}
) : null} </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> );
); };
const VideoPlayer = ({ content }: { content: any }) => { const VideoPlayer = ({ content }: { content: any }) => {
const [hasWindow, setHasWindow] = useState<boolean>(false); const [hasWindow, setHasWindow] = useState<boolean>(false);