227 lines
7.9 KiB
TypeScript
227 lines
7.9 KiB
TypeScript
"use client";
|
|
import React, { useEffect, useState } from "react";
|
|
import Link from "next/link";
|
|
import Image from "next/image";
|
|
import aydym from "@/public/aydym-com.webp";
|
|
import horjun from "@/public/horjun.png";
|
|
import belet from "@/public/belet.jpg";
|
|
import { v4 } from "uuid";
|
|
|
|
const PlaylistVideos = ({ id, data }: { id: string; data: any }) => {
|
|
const [index, setIndex] = useState<number>(0);
|
|
|
|
return (
|
|
<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">
|
|
<InfoBlock data={data?.data[index]} />
|
|
|
|
<div className="video-item-inner flex flex-col gap-4 grow-0">
|
|
{data?.data.map(
|
|
(item: any, i: number) =>
|
|
i !== index && (
|
|
<button key={v4()} onClick={() => setIndex(i)}>
|
|
<VideoItem
|
|
id={item.id}
|
|
img={item.banner_url}
|
|
title={item.title}
|
|
/>
|
|
</button>
|
|
)
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default PlaylistVideos;
|
|
|
|
const InfoBlock = ({ data }: { data: any }) => (
|
|
<div className="flex gap-6 flex-1 w-full justify-between h-full">
|
|
<div className="flex flex-col gap-6 w-full h-full">
|
|
<div className="flex justify-between gap-[32px] w-full h-full">
|
|
<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">
|
|
{data?.desc ? (
|
|
<p className="font-roboto text-lg w-full text-black">
|
|
{data.desc}
|
|
</p>
|
|
) : null}
|
|
|
|
{data?.aydym_com_url ||
|
|
data?.horjun_content_url ||
|
|
data?.belet_url ? (
|
|
<div className="flex flex-col gap-6">
|
|
<h2 className="text-2xl font-semibold">
|
|
Beýleki platformalarda seret:
|
|
</h2>
|
|
<div className="flex gap-11 items-center">
|
|
{data.aydym_com_url ? (
|
|
<Link
|
|
href={data.aydym_com_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={aydym}
|
|
alt="Aydym.com"
|
|
className="rounded-full"
|
|
/>
|
|
</div>
|
|
<h3>Aydym.com</h3>
|
|
</Link>
|
|
) : null}
|
|
{data.horjun_content_url ? (
|
|
<Link
|
|
href={data.horjun_content_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={horjun}
|
|
alt="HorjunTv"
|
|
className="rounded-full"
|
|
/>
|
|
</div>
|
|
<h3>HorjunTv</h3>
|
|
</Link>
|
|
) : null}
|
|
{data.belet_url ? (
|
|
<Link
|
|
href={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>
|
|
) : null}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
|
|
const VideoPlayer = ({ content }: { content: any }) => {
|
|
const [hasWindow, setHasWindow] = useState<boolean>(false);
|
|
const [data, setData] = useState<any>(content);
|
|
|
|
useEffect(() => {
|
|
if (typeof window !== "undefined") {
|
|
setHasWindow(true);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
setData(content);
|
|
}, [content]);
|
|
|
|
return (
|
|
<div className="w-full h-full">
|
|
{hasWindow ? (
|
|
data?.content_url.endsWith(".mp4") ? (
|
|
<div className="lg:w-full md:w-[550px] w-full h-[200px] sm:h-[250px] md:h-[350px] lg:h-[620px]">
|
|
<video
|
|
controls
|
|
controlsList={data?.is_downloadable === 0 ? "nodownload" : ""} // Conditionally enable/disable download
|
|
poster={data?.banner_url}
|
|
playsInline
|
|
>
|
|
<source src={data?.video_stream_url} type="video/mp4" />
|
|
</video>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col gap-4 h-fit">
|
|
<div className="relative w-full h-[200px] sm:h-[400px] md:h-[420px]">
|
|
{data?.banner_url ? (
|
|
<Image
|
|
src={data.banner_url}
|
|
fill
|
|
alt={"image"}
|
|
className="object-cover"
|
|
/>
|
|
) : null}
|
|
</div>
|
|
<audio
|
|
controls
|
|
controlsList={data?.is_downloadable === 0 ? "nodownload" : ""} // Conditionally enable/disable download
|
|
className="w-full rounded bg-white"
|
|
>
|
|
<source src={data?.content_url} />
|
|
</audio>
|
|
</div>
|
|
)
|
|
) : null}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const VideoItem = ({
|
|
img,
|
|
title,
|
|
id,
|
|
}: {
|
|
img: any;
|
|
title: string;
|
|
id: number;
|
|
}) => {
|
|
return (
|
|
<div className="video-list-item flex flex-col gap-2 lg:w-[250px] md:w-[200px] sm:w-[200px] w-[300px] ">
|
|
{img ? (
|
|
<>
|
|
<div className="relative sm:h-[150px] h-[200px] w-full overflow-hidden rounded-five">
|
|
<Image
|
|
src={img}
|
|
alt={title}
|
|
unoptimized
|
|
unselectable="off"
|
|
className="top-0 left-0 w-full h-full object-cover z-0 absolute pointer-events-none"
|
|
width={280}
|
|
height={160}
|
|
/>
|
|
<Image
|
|
src={"/play.svg"}
|
|
alt={"play icon"}
|
|
unoptimized
|
|
unselectable="off"
|
|
className="top-[50%] left-[50%] w-[52px] h-[52px] object-cover z-10 -translate-x-[50%] -translate-y-[50%] absolute"
|
|
width={52}
|
|
height={52}
|
|
/>
|
|
</div>
|
|
</>
|
|
) : null}
|
|
|
|
{/* {premium ? <Premium /> : null} */}
|
|
<div className="flex gap-3 justify-start items-center">
|
|
<div className="flex flex-col">
|
|
<h3 className="clamped font-mw_sans font-bold text-lg text-black transition-all dark:text-white overflow-hidden w-full">
|
|
{title}
|
|
</h3>
|
|
{/* <span className="font-roboto text-lg font-normal text-black transition-all dark:text-white">{`${views} Views`}</span> */}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|