From 879bd6ba3f77c7aa3468aa38cad9b3b79e2c9cda Mon Sep 17 00:00:00 2001
From: Radiquum <kentai.waah@gmail.com>
Date: Sun, 16 Mar 2025 02:02:42 +0500
Subject: [PATCH] feat: add licensed streaming platforms

---
 app/api/config.ts                             |  1 +
 .../ReleaseInfo/ReleaseInfo.Basics.tsx        |  3 ++
 .../ReleaseInfo.LicensedPlatforms.tsx         | 45 +++++++++++++++++++
 app/pages/Release.tsx                         |  1 +
 4 files changed, 50 insertions(+)
 create mode 100644 app/components/ReleaseInfo/ReleaseInfo.LicensedPlatforms.tsx

diff --git a/app/api/config.ts b/app/api/config.ts
index 815ec0a..b0fd02d 100644
--- a/app/api/config.ts
+++ b/app/api/config.ts
@@ -10,6 +10,7 @@ export const ENDPOINTS = {
     info: `${API_PREFIX}/release`,
     episode: `${API_PREFIX}/episode`,
     related: `${API_PREFIX}/related`,
+    licensed: `${API_PREFIX}/release/streaming/platform`,
   },
   user: {
     profile: `${API_PREFIX}/profile`,
diff --git a/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx b/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
index 3fcac54..50fdd5b 100644
--- a/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
+++ b/app/components/ReleaseInfo/ReleaseInfo.Basics.tsx
@@ -1,8 +1,10 @@
 import { Card, Button } from "flowbite-react";
 import { useState } from "react";
 import Image from "next/image";
+import { ReleaseInfoStreaming } from "./ReleaseInfo.LicensedPlatforms";
 
 export const ReleaseInfoBasics = (props: {
+  release_id: number;
   image: string;
   title: { ru: string; original: string };
   note: string | null;
@@ -52,6 +54,7 @@ export const ReleaseInfoBasics = (props: {
           >
             {isFullDescription ? "Скрыть" : "Показать полностью"}
           </Button>
+          <ReleaseInfoStreaming release_id={props.release_id} />
         </div>
       </div>
     </Card>
diff --git a/app/components/ReleaseInfo/ReleaseInfo.LicensedPlatforms.tsx b/app/components/ReleaseInfo/ReleaseInfo.LicensedPlatforms.tsx
new file mode 100644
index 0000000..6a1c72b
--- /dev/null
+++ b/app/components/ReleaseInfo/ReleaseInfo.LicensedPlatforms.tsx
@@ -0,0 +1,45 @@
+"use client";
+
+import { ENDPOINTS } from "#/api/config";
+import { useEffect, useState } from "react";
+
+export const ReleaseInfoStreaming = (props: { release_id: number }) => {
+  const [data, setData] = useState(null);
+
+  useEffect(() => {
+    const _getData = async () => {
+      const response = await fetch(
+        `${ENDPOINTS.release.licensed}/${props.release_id}`
+      );
+      setData(await response.json());
+    };
+    _getData();
+  }, []);
+
+  return (
+    <>
+      {!data ?
+        ""
+      : !(data.content.length > 0) ?
+        ""
+      : <div>
+          <p className="mt-4 mb-1 text-lg">Официальные источники: </p>
+          <div className="grid grid-cols-2 gap-2 md:grid-cols-4">
+            {data.content.map((item: any) => {
+              return (
+                <a
+                  href={item.url}
+                  key={`platform_${item.id}`}
+                  className="flex items-center gap-2 px-2 py-1 transition-colors bg-gray-100 rounded-lg hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 "
+                >
+                  <img src={item.icon} className="w-6 h-6 rounded-full" />
+                  <p className="text-lg">{item.name}</p>
+                </a>
+              );
+            })}
+          </div>
+        </div>
+      }
+    </>
+  );
+};
diff --git a/app/pages/Release.tsx b/app/pages/Release.tsx
index aa6f6c1..e294c5d 100644
--- a/app/pages/Release.tsx
+++ b/app/pages/Release.tsx
@@ -61,6 +61,7 @@ export const ReleasePage = (props: any) => {
             }}
             description={data.release.description}
             note={data.release.note}
+            release_id={data.release.id}
           />
         </div>
         <div className="[grid-column:2]">