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

video player download functionality regulation

This commit is contained in:
Kakabay 2025-01-19 16:03:08 +05:00
parent f6d1c4e0d3
commit 8b751e752f
1 changed files with 37 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

58
components/VideoPlayer.tsx
View File

@ -1,11 +1,12 @@
'use client'; "use client";
import { Queries } from '@/api/queries'; import { Queries } from "@/api/queries";
import { useMutation, useQuery } from '@tanstack/react-query'; import { useMutation, useQuery } from "@tanstack/react-query";
import { useState, useEffect } from 'react'; import { useState, useEffect } from "react";
import ReactPlayer from 'react-player'; import ReactPlayer from "react-player";
import Loader from './Loader'; import Loader from "./Loader";
import Image from 'next/image'; import Image from "next/image";
import axios from 'axios'; import axios from "axios";
interface IProps { interface IProps {
maxWidth?: string; maxWidth?: string;
maxHeight?: string; maxHeight?: string;
@ -15,31 +16,34 @@ interface IProps {
const VideoPlayer = ({ maxHeight, maxWidth, video_id }: IProps) => { const VideoPlayer = ({ maxHeight, maxWidth, video_id }: IProps) => {
const [hasWindow, setHasWindow] = useState<boolean>(false); const [hasWindow, setHasWindow] = useState<boolean>(false);
const [hasStartedPlaying, setHasStartedPlaying] = useState<boolean>(false); const [hasStartedPlaying, setHasStartedPlaying] = useState<boolean>(false);
const [canDownload, setCanDownload] = useState<boolean>(false); // State to store canDownload
useEffect(() => { useEffect(() => {
if (typeof window !== 'undefined') { if (typeof window !== "undefined") {
setHasWindow(true); setHasWindow(true);
} }
}, []); }, []);
const { data, isFetching, error } = useQuery({ const { data, isFetching, error } = useQuery({
queryKey: ['video', `video:${video_id}`], queryKey: ["video", `video:${video_id}`],
queryFn: () => Queries.getVideo(video_id), queryFn: async () => {
const response = await Queries.getVideo(video_id);
// setCanDownload(response.data.canDownload); // Set canDownload from API
return response;
},
}); });
async function addViews() { async function addViews() {
return axios.post(`https://turkmentv.gov.tm/v2/api/material/${video_id}/views/increment`); return axios.post(
`https://turkmentv.gov.tm/v2/api/material/${video_id}/views/increment`
);
} }
const mutation = useMutation(() => addViews()); const mutation = useMutation(() => addViews());
const onPlayHandler = () => { const onPlayHandler = () => {
// Check if the video has not started playing before
if (!hasStartedPlaying) { if (!hasStartedPlaying) {
// Send a POST request to the server
mutation.mutate(); mutation.mutate();
// Update the state to indicate that the video has started playing
setHasStartedPlaying(true); setHasStartedPlaying(true);
} }
}; };
@ -48,26 +52,38 @@ const VideoPlayer = ({ maxHeight, maxWidth, video_id }: IProps) => {
if (error) return <h1>{JSON.stringify(error)}</h1>; if (error) return <h1>{JSON.stringify(error)}</h1>;
return ( return (
<div className="w-full h-full "> <div className="w-full h-full">
{hasWindow ? ( {hasWindow ? (
data?.data.content_url.endsWith('.mp4') ? ( data?.data.content_url.endsWith(".mp4") ? (
<div className="lg:w-[700px] md:w-[550px] w-full h-[200px] sm:h-[250px] md:h-[350px] lg:h-[420px]"> <div className="lg:w-[700px] md:w-[550px] w-full h-[200px] sm:h-[250px] md:h-[350px] lg:h-[420px]">
<video <video
controls controls
controlsList={canDownload ? "" : "nodownload"} // Conditionally enable/disable download
src={data!.data.video_stream_url} src={data!.data.video_stream_url}
poster={data?.data.banner_url} poster={data?.data.banner_url}
playsInline playsInline
itemType="video/mp4" itemType="video/mp4"
onPlay={() => onPlayHandler()}></video> onPlay={() => onPlayHandler()}
></video>
</div> </div>
) : ( ) : (
<div className="flex flex-col gap-4 h-fit"> <div className="flex flex-col gap-4 h-fit">
<div className="relative lg:w-[700px] md:w-[550px] w-full h-[200px] sm:h-[400px] md:h-[420px]"> <div className="relative lg:w-[700px] md:w-[550px] w-full h-[200px] sm:h-[400px] md:h-[420px]">
{data?.data.banner_url ? ( {data?.data.banner_url ? (
<Image src={data?.data.banner_url} width={700} height={420} alt={'image'} /> <Image
src={data?.data.banner_url}
width={700}
height={420}
alt={"image"}
/>
) : null} ) : null}
</div> </div>
<audio controls className="w-full rounded bg-white" onPlay={() => onPlayHandler()}> <audio
controls
controlsList={canDownload ? "" : "nodownload"} // Conditionally enable/disable download
className="w-full rounded bg-white"
onPlay={() => onPlayHandler()}
>
<source src={data?.data.content_url} /> <source src={data?.data.content_url} />
</audio> </audio>
</div> </div>