From 37dd838a946c14dd3db4e46f0ff8db8b4cf49cec Mon Sep 17 00:00:00 2001 From: Ilgeldi Date: Thu, 27 Feb 2025 16:13:29 +0500 Subject: [PATCH] added playlist route --- api/queries.ts | 19 +++ app/(main)/playlist/[id]/page.tsx | 24 ++++ components/playlist/index.tsx | 226 ++++++++++++++++++++++++++++++ 3 files changed, 269 insertions(+) create mode 100644 app/(main)/playlist/[id]/page.tsx create mode 100644 components/playlist/index.tsx diff --git a/api/queries.ts b/api/queries.ts index 234f65a..23a23a3 100644 --- a/api/queries.ts +++ b/api/queries.ts @@ -330,3 +330,22 @@ export const getNextQuizWinnners = async ( console.log(err); } }; + +export const getPlaylistById = async (id: string) => { + try { + const res = await fetch( + `${baseUrl.MATERIALS_SRC}${routes.videos( + `?per_page=8&page=1&category_id=${id}` + )}`, + { + next: { revalidate: 3600 }, + } + ); + + const result = await res.json(); + + return result; + } catch (err) { + console.log(err); + } +}; diff --git a/app/(main)/playlist/[id]/page.tsx b/app/(main)/playlist/[id]/page.tsx new file mode 100644 index 0000000..d998680 --- /dev/null +++ b/app/(main)/playlist/[id]/page.tsx @@ -0,0 +1,24 @@ +import { getPlaylistById } from "@/api/queries"; +import PlaylistVideos from "@/components/playlist"; + +interface IParams { + params: { + id: string; + }; +} + +const Page = async ({ params }: IParams) => { + const { id } = await params; + + const videos = await getPlaylistById(id); + + return ( +
+
+ +
+
+ ); +}; + +export default Page; diff --git a/components/playlist/index.tsx b/components/playlist/index.tsx new file mode 100644 index 0000000..54a9f3a --- /dev/null +++ b/components/playlist/index.tsx @@ -0,0 +1,226 @@ +"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(0); + + return ( +
+
+ + +
+ {data?.data.map( + (item: any, i: number) => + i !== index && ( + + ) + )} +
+
+
+ ); +}; + +export default PlaylistVideos; + +const InfoBlock = ({ data }: { data: any }) => ( +
+
+
+
+
+
+
+ +
+ +
+ {data?.desc ? ( +

+ {data.desc} +

+ ) : null} + + {data?.aydym_com_url || + data?.horjun_content_url || + data?.belet_url ? ( +
+

+ Beýleki platformalarda seret: +

+
+ {data.aydym_com_url ? ( + +
+ Aydym.com +
+

Aydym.com

+ + ) : null} + {data.horjun_content_url ? ( + +
+ HorjunTv +
+

HorjunTv

+ + ) : null} + {data.belet_url ? ( + +
+ BeletTv +
+

BeletFilm

+ + ) : null} +
+
+ ) : null} +
+
+
+
+
+
+
+); + +const VideoPlayer = ({ content }: { content: any }) => { + const [hasWindow, setHasWindow] = useState(false); + const [data, setData] = useState(content); + + useEffect(() => { + if (typeof window !== "undefined") { + setHasWindow(true); + } + }, []); + + useEffect(() => { + setData(content); + }, [content]); + + return ( +
+ {hasWindow ? ( + data?.content_url.endsWith(".mp4") ? ( +
+ +
+ ) : ( +
+
+ {data?.banner_url ? ( + {"image"} + ) : null} +
+ +
+ ) + ) : null} +
+ ); +}; + +const VideoItem = ({ + img, + title, + id, +}: { + img: any; + title: string; + id: number; +}) => { + return ( +
+ {img ? ( + <> +
+ {title} + {"play +
+ + ) : null} + + {/* {premium ? : null} */} +
+
+

+ {title} +

+ {/* {`${views} Views`} */} +
+
+
+ ); +};