feat: add kodik source parsing for custom player

.eslintrc.json

@@ -1,3 +1,7 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": ["next/core-web-vitals", "prettier"],
+  "rules": {
+    "prettier/prettier": "error"
+  },
+  "plugins": ["prettier"]
 }

.gitignore

@@ -52,3 +52,10 @@ traefik/traefik
 
 old/
 #Trigger Vercel Prod Build
+
+# next-video
+videos/*
+!videos/*.json
+!videos/*.js
+!videos/*.ts
+public/_next-video

app/components/ReleasePlayer/ReleasePlayerCustom.tsx

@@ -1,8 +1,119 @@
+"use client";
+
 import { Card } from "flowbite-react";
+import Player from "next-video/player";
+import { useEffect, useState } from "react";
+import { ENDPOINTS } from "#/api/config";
 
 export const ReleasePlayerCustom = (props: { id: number }) => {
+  const [voiceover, setVoiceover] = useState({
+    selected: null,
+    available: null,
+  });
+  const [source, setSource] = useState({
+    selected: null,
+    available: null,
+  });
+  const [episode, setEpisode] = useState({
+    selected: null,
+    available: null,
+  });
+  const [playerSrc, SetPlayerSrc] = useState(null);
+
+  const _fetchVoiceover = async (release_id: number) => {
+    const response = await fetch(`${ENDPOINTS.release.episode}/${release_id}`);
+    const data = await response.json();
+    return data;
+  };
+
+  const _fetchSource = async (release_id: number, voiceover_id: number) => {
+    const response = await fetch(
+      `${ENDPOINTS.release.episode}/${release_id}/${voiceover_id}`
+    );
+    const data = await response.json();
+    return data;
+  };
+
+  const _fetchEpisode = async (
+    release_id: number,
+    voiceover_id: number,
+    source_id: number
+  ) => {
+    const response = await fetch(
+      `${ENDPOINTS.release.episode}/${release_id}/${voiceover_id}/${source_id}`
+    );
+    const data = await response.json();
+    return data;
+  };
+
+  const _fetchKodikManifest = async (url: string) => {
+    const response = await fetch(
+      `/api/proxy/${encodeURIComponent(url)}?html=true`
+    );
+    const data = await response.text();
+
+    const urlParamsRe = /var urlParams = .*;$/m;
+    const urlParamsMatch = urlParamsRe.exec(data);
+
+    if (urlParamsMatch.length == 0) {
+      alert("Failed to get urlParams");
+      return;
+    };
+
+    const urlParamsStr = urlParamsMatch[0].replace("var urlParams = '", "").replace("';", "");
+    const urlParams = JSON.parse(urlParamsStr);
+
+    const urlStr = url.replace("https://kodik.info/", "")
+    const type = urlStr.split("/")[0]
+    const id = urlStr.split("/")[1]
+    const hash = urlStr.split("/")[2]
+
+    const responseMan = await fetch(
+      `/api/proxy/${encodeURIComponent("https://kodik.info/ftor")}?isNotAnixart=true`, {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+          type: type,
+          id: id,
+          hash: hash,
+          d: urlParams.d,
+          d_sign: urlParams.d_sign,
+          pd: urlParams.pd,
+          pd_sign: urlParams.pd_sign,
+          ref: urlParams.ref,
+          ref_sign: urlParams.ref_sign,
+          bad_user: false,
+          cdn_is_working: true,
+          info: {}
+        }),
+      }
+    );
+    const dataMan = await responseMan.json();
+    let manifest = `https:${dataMan.links["360"][0].src.replace("360.mp4:hls:", "")}`;
+    return manifest;
+  };
+
+  useEffect(() => {
+    const __getInfo = async () => {
+      const vo = await _fetchVoiceover(props.id);
+      const src = await _fetchSource(props.id, vo.types[0].id);
+      const episodes = await _fetchEpisode(
+        props.id,
+        vo.types[0].id,
+        src.sources[0].id
+      );
+      const manifest = await _fetchKodikManifest(episodes.episodes[0].url);
+      SetPlayerSrc(manifest);
+    };
+    __getInfo();
+  }, []);
+
   return (
     <Card>
+      {/* @ts-ignore */}
+      {!playerSrc ? <p>Loading...</p> : <Player src={playerSrc} />}
       <p>ReleasePlayerCustom</p>
     </Card>
   );

app/pages/Release.tsx

@@ -10,6 +10,7 @@ import { useEffect, useState } from "react";
 import { ReleaseInfoBasics } from "#/components/ReleaseInfo/ReleaseInfo.Basics";
 import { ReleaseInfoInfo } from "#/components/ReleaseInfo/ReleaseInfo.Info";
 import { ReleasePlayer } from "#/components/ReleasePlayer/ReleasePlayer";
+import { ReleasePlayerCustom } from "#/components/ReleasePlayer/ReleasePlayerCustom";
 import { ReleaseInfoUserList } from "#/components/ReleaseInfo/ReleaseInfo.UserList";
 import { ReleaseInfoRating } from "#/components/ReleaseInfo/ReleaseInfo.Rating";
 import { ReleaseInfoRelated } from "#/components/ReleaseInfo/ReleaseInfo.Related";
@@ -17,9 +18,11 @@ import { ReleaseInfoScreenshots } from "#/components/ReleaseInfo/ReleaseInfo.Scr
 import { CommentsMain } from "#/components/Comments/Comments.Main";
 import { InfoLists } from "#/components/InfoLists/InfoLists";
 import { ENDPOINTS } from "#/api/config";
+import { usePreferencesStore } from "#/store/preferences";
 
 export const ReleasePage = (props: any) => {
   const userStore = useUserStore();
+  const preferenceStore = usePreferencesStore();
   const [userList, setUserList] = useState(0);
   const [userFavorite, setUserFavorite] = useState(false);
 
@@ -92,29 +95,35 @@ export const ReleasePage = (props: any) => {
             collection_count={data.release.collection_count}
           />
         </div>
-        {data.release.status && data.release.status.name.toLowerCase() != "анонс" && (
+        {data.release.status &&
-          <div className="[grid-column:1] [grid-row:span_12]">
+          data.release.status.name.toLowerCase() != "анонс" && (
-            <ReleasePlayer id={props.id} />
+            <div className="[grid-column:1] [grid-row:span_12]">
-          </div>
+              {preferenceStore.params.experimental.newPlayer ? (
-        )}
+                <ReleasePlayerCustom id={props.id} />
-        {data.release.status && data.release.status.name.toLowerCase() != "анонс" && (
+              ) : (
-          <div className="[grid-column:2]">
+                <ReleasePlayer id={props.id} />
-            <ReleaseInfoRating
+              )}
-              release_id={props.id}
+            </div>
-              grade={data.release.grade}
+          )}
-              token={userStore.token}
+        {data.release.status &&
-              votes={{
+          data.release.status.name.toLowerCase() != "анонс" && (
-                1: data.release.vote_1_count,
+            <div className="[grid-column:2]">
-                2: data.release.vote_2_count,
+              <ReleaseInfoRating
-                3: data.release.vote_3_count,
+                release_id={props.id}
-                4: data.release.vote_4_count,
+                grade={data.release.grade}
-                5: data.release.vote_5_count,
+                token={userStore.token}
-                total: data.release.vote_count,
+                votes={{
-                user: data.release.your_vote,
+                  1: data.release.vote_1_count,
-              }}
+                  2: data.release.vote_2_count,
-            />
+                  3: data.release.vote_3_count,
-          </div>
+                  4: data.release.vote_4_count,
-        )}
+                  5: data.release.vote_5_count,
+                  total: data.release.vote_count,
+                  user: data.release.your_vote,
+                }}
+              />
+            </div>
+          )}
         <div className="[grid-column:2] [grid-row:span_4]">
           <InfoLists
             completed={data.release.completed_count}

middleware.ts

@@ -1,27 +1,63 @@
-import type { NextFetchEvent } from 'next/server';
+import type { NextFetchEvent } from "next/server";
-import { fetchDataViaGet, fetchDataViaPost } from '#/api/utils';
+import { fetchDataViaGet, fetchDataViaPost } from "#/api/utils";
-import { API_URL } from '#/api/config';
+import { API_URL } from "#/api/config";
 
 export const config = {
-  matcher: '/api/proxy/:path*',
+  matcher: "/api/proxy/:path*",
 };
 
-export default async function middleware(request: Request, context: NextFetchEvent) {
+export default async function middleware(
+  request: Request,
+  context: NextFetchEvent
+) {
   if (request.method == "GET") {
     const url = new URL(request.url);
     const isApiV2 = url.searchParams.get("API-Version") == "v2" || false;
     if (isApiV2) {
       url.searchParams.delete("API-Version");
     }
-    const path = url.pathname.match(/\/api\/proxy\/(.*)/)?.[1] + url.search
+    const isHTML = url.searchParams.get("html") == "true" || false;
+    if (isHTML) {
+      url.searchParams.delete("html");
+    }
+    const isNotAnixart =
+      url.searchParams.get("isNotAnixart") == "true" || false;
+    if (isNotAnixart) {
+      url.searchParams.delete("isNotAnixart");
+    }
+    let path = url.pathname.match(/\/api\/proxy\/(.*)/)?.[1] + url.search;
+    let data = null;
+    path = decodeURIComponent(path);
 
-    const data = await fetchDataViaGet(`${API_URL}/${path}`, isApiV2);
+    if ((isHTML || isNotAnixart) && !path.startsWith("https://kodik.info")) {
+      return new Response(JSON.stringify({ message: "URL not allowed" }), {
+        status: 403,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+    }
+
+    if (isHTML) {
+      const response = await fetch(path);
+      data = await response.text();
+      return new Response(data, {
+        status: 200,
+        headers: {
+          "Content-Type": "text/html",
+        },
+      });
+    } else if (isNotAnixart) {
+      data = await fetchDataViaGet(path);
+    } else {
+      data = await fetchDataViaGet(`${API_URL}/${path}`, isApiV2);
+    }
 
     if (!data) {
       return new Response(JSON.stringify({ message: "Error Fetching Data" }), {
         status: 500,
         headers: {
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
         },
       });
     }
@@ -29,7 +65,7 @@ export default async function middleware(request: Request, context: NextFetchEve
     return new Response(JSON.stringify(data), {
       status: 200,
       headers: {
-        'Content-Type': 'application/json',
+        "Content-Type": "application/json",
       },
     });
   }
@@ -40,7 +76,41 @@ export default async function middleware(request: Request, context: NextFetchEve
     if (isApiV2) {
       url.searchParams.delete("API-Version");
     }
-    const path = url.pathname.match(/\/api\/proxy\/(.*)/)?.[1] + url.search
+    const isNotAnixart =
+      url.searchParams.get("isNotAnixart") == "true" || false;
+    if (isNotAnixart) {
+      url.searchParams.delete("isNotAnixart");
+    }
+    let path = url.pathname.match(/\/api\/proxy\/(.*)/)?.[1] + url.search;
+    path = decodeURIComponent(path);
+
+    if (isNotAnixart) {
+      if (!path.startsWith("https://kodik.info")) {
+        return new Response(JSON.stringify({ message: "URL not allowed" }), {
+          status: 403,
+          headers: {
+            "Content-Type": "application/json",
+          },
+        });
+      }
+
+      const formData = new FormData();
+      for (const [key, value] of Object.entries(await request.json())) {
+        formData.append(key as any, value as any);
+      }
+
+      const response = await fetch(path, {
+        method: "POST",
+        body: formData,
+      });
+      const data = await response.json();
+      return new Response(JSON.stringify(data), {
+        status: 200,
+        headers: {
+          "Content-Type": "application/json",
+        },
+      });
+    }
 
     const ReqContentTypeHeader = request.headers.get("Content-Type") || "";
     let ResContentTypeHeader = "";
@@ -54,13 +124,18 @@ export default async function middleware(request: Request, context: NextFetchEve
       body = JSON.stringify(await request.json());
     }
 
-    const data = await fetchDataViaPost(`${API_URL}/${path}`, body, isApiV2, ResContentTypeHeader);
+    const data = await fetchDataViaPost(
+      `${API_URL}/${path}`,
+      body,
+      isApiV2,
+      ResContentTypeHeader
+    );
 
     if (!data) {
       return new Response(JSON.stringify({ message: "Error Fetching Data" }), {
         status: 500,
         headers: {
-          'Content-Type': 'application/json',
+          "Content-Type": "application/json",
         },
       });
     }
@@ -68,8 +143,8 @@ export default async function middleware(request: Request, context: NextFetchEve
     return new Response(JSON.stringify(data), {
       status: 200,
       headers: {
-        'Content-Type': 'application/json',
+        "Content-Type": "application/json",
       },
     });
   }
-}
+}

package.json

@@ -16,6 +16,7 @@
     "markdown-to-jsx": "^7.4.7",
     "next": "^14.2.13",
     "next-plausible": "^3.12.1",
+    "next-video": "^2.1.0",
     "react": "^18",
     "react-cropper": "^2.3.3",
     "react-dom": "^18",
@@ -35,6 +36,7 @@
     "eslint": "^8",
     "eslint-config-next": "14.2.5",
     "postcss": "^8",
+    "prettier": "^3.5.3",
     "tailwind-scrollbar": "^3.1.0",
     "tailwindcss": "^3.4.1"
   }

tsconfig.json

@@ -8,7 +8,7 @@
     "incremental": true,
     "module": "esnext",
     "esModuleInterop": true,
-    "moduleResolution": "node",
+    "moduleResolution": "bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "jsx": "preserve",
@@ -27,6 +27,7 @@
     }
   },
   "include": [
+    "video.d.ts",
     "next-env.d.ts",
     ".next/types/**/*.ts",
     "**/*.ts",

video.d.ts

@@ -0,0 +1 @@
+/// <reference types="next-video/video-types/global" />