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

treasury video and music download controled from api

This commit is contained in:
Kakabay 2025-01-20 16:53:01 +05:00
parent 14f8b02662
commit 1318e84044
3 changed files with 67 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

80
components/InfoBlock.tsx
View File

@ -1,21 +1,21 @@
'use client'; "use client";
// NextJs components // NextJs components
import Image from 'next/image'; import Image from "next/image";
import Link from 'next/link'; import Link from "next/link";
// React query // React query
import { useQuery } from '@tanstack/react-query'; import { useQuery } from "@tanstack/react-query";
import { Queries } from '@/api/queries'; import { Queries } from "@/api/queries";
// Components // Components
import Loader from './Loader'; import Loader from "./Loader";
import VideoPlayer from './VideoPlayer'; import VideoPlayer from "./VideoPlayer";
import SectionTitle from './SectionTitle'; import SectionTitle from "./SectionTitle";
// Images and cions // Images and cions
import { SlEye } from 'react-icons/sl'; import { SlEye } from "react-icons/sl";
import aydym from '@/public/aydym-com.webp'; 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 ReactionsBlock from './treasury/ReactionsBlock'; import ReactionsBlock from "./treasury/ReactionsBlock";
interface IProps { interface IProps {
video_id: number; video_id: number;
@ -23,11 +23,16 @@ interface IProps {
const InfoBlock = ({ video_id }: IProps) => { const InfoBlock = ({ video_id }: IProps) => {
const { data, isFetching, error } = useQuery({ const { data, isFetching, error } = useQuery({
queryKey: ['video', video_id], queryKey: ["video", video_id],
queryFn: () => Queries.getVideo(video_id), queryFn: () => Queries.getVideo(video_id),
}); });
if (isFetching) return <Loader height={200} />; if (isFetching)
return (
<div className="w-full h-[500px] sm:h-[667px] md:h-[600px] l flex items-center justify-center">
<Loader height={700} />
</div>
);
if (error) return <h1>{JSON.stringify(error)}</h1>; if (error) return <h1>{JSON.stringify(error)}</h1>;
return ( return (
@ -39,7 +44,9 @@ const InfoBlock = ({ video_id }: IProps) => {
<SectionTitle title={data!.data.title} /> <SectionTitle title={data!.data.title} />
<div className="flex gap-2 items-center"> <div className="flex gap-2 items-center">
<SlEye <SlEye
style={{ transition: '150ms all cubic-bezier(0.4, 0, 0.2, 1)' }} style={{
transition: "150ms all cubic-bezier(0.4, 0, 0.2, 1)",
}}
width={30} width={30}
height={18} height={18}
className="w-[30px] h-[18px]" className="w-[30px] h-[18px]"
@ -52,12 +59,18 @@ const InfoBlock = ({ video_id }: IProps) => {
<div className="flex flex-col gap-[40px] h-full w-full"> <div className="flex flex-col gap-[40px] h-full w-full">
<div className="flex gap-[40px] md:flex-row flex-col h-full w-full"> <div className="flex gap-[40px] md:flex-row flex-col h-full w-full">
<div> <div>
<VideoPlayer video_id={video_id} maxHeight="700px" maxWidth="100%" /> <VideoPlayer
video_id={video_id}
maxHeight="700px"
maxWidth="100%"
/>
</div> </div>
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
{data?.data.desc ? ( {data?.data.desc ? (
<p className="font-roboto text-lg w-full text-black">{data!.data.desc}</p> <p className="font-roboto text-lg w-full text-black">
{data!.data.desc}
</p>
) : null} ) : null}
<ReactionsBlock video_id={video_id} /> <ReactionsBlock video_id={video_id} />
@ -66,15 +79,22 @@ const InfoBlock = ({ video_id }: IProps) => {
data?.data.horjun_content_url || data?.data.horjun_content_url ||
data?.data.belet_url ? ( data?.data.belet_url ? (
<div className="flex flex-col gap-6"> <div className="flex flex-col gap-6">
<h2 className="text-2xl font-semibold">Beýleki platformalarda seret:</h2> <h2 className="text-2xl font-semibold">
Beýleki platformalarda seret:
</h2>
<div className="flex gap-11 items-center"> <div className="flex gap-11 items-center">
{data?.data.aydym_com_url ? ( {data?.data.aydym_com_url ? (
<Link <Link
href={data?.data.aydym_com_url} href={data?.data.aydym_com_url}
target="_blank" target="_blank"
className="flex flex-col items-center justify-center gap-2"> 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"> <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" /> <Image
src={aydym}
alt="Aydym.com"
className="rounded-full"
/>
</div> </div>
<h3>Aydym.com</h3> <h3>Aydym.com</h3>
</Link> </Link>
@ -83,9 +103,14 @@ const InfoBlock = ({ video_id }: IProps) => {
<Link <Link
href={data?.data.horjun_content_url} href={data?.data.horjun_content_url}
target="_blank" target="_blank"
className="flex flex-col items-center justify-center gap-2"> 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"> <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" /> <Image
src={horjun}
alt="HorjunTv"
className="rounded-full"
/>
</div> </div>
<h3>HorjunTv</h3> <h3>HorjunTv</h3>
</Link> </Link>
@ -94,9 +119,14 @@ const InfoBlock = ({ video_id }: IProps) => {
<Link <Link
href={data.data.belet_url} href={data.data.belet_url}
target="_blank" target="_blank"
className="flex flex-col items-center justify-center gap-2"> 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"> <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" /> <Image
src={belet}
alt="BeletTv"
className="rounded-full"
/>
</div> </div>
<h3>BeletFilm</h3> <h3>BeletFilm</h3>
</Link> </Link>

13
components/VideoPlayer.tsx
View File

@ -28,7 +28,11 @@ const VideoPlayer = ({ maxHeight, maxWidth, video_id }: IProps) => {
queryKey: ["video", `video:${video_id}`], queryKey: ["video", `video:${video_id}`],
queryFn: async () => { queryFn: async () => {
const response = await Queries.getVideo(video_id); const response = await Queries.getVideo(video_id);
// setCanDownload(response.data.canDownload); // Set canDownload from API if (response.data.is_downloadable === 0) {
setCanDownload(false);
} else {
setCanDownload(true);
} // Set canDownload from API
return response; return response;
}, },
}); });
@ -48,7 +52,12 @@ const VideoPlayer = ({ maxHeight, maxWidth, video_id }: IProps) => {
} }
}; };
if (isFetching) return <Loader height={700} />; if (isFetching)
return (
<div className="lg:w-[700px] md:w-[550px] w-full h-[200px] sm:h-[250px] md:h-[350px] lg:h-[420px] flex items-center justify-center">
<Loader height={700} />
</div>
);
if (error) return <h1>{JSON.stringify(error)}</h1>; if (error) return <h1>{JSON.stringify(error)}</h1>;
return ( return (

1
models/video.model.ts
View File

@ -18,4 +18,5 @@ export interface Data {
video_stream_url: string; video_stream_url: string;
likes: number; likes: number;
dislikes: number; dislikes: number;
is_downloadable: 0 | 1;
} }