feat(component): update component[Embeded](add provider changer)

alfaruqii · Nov 11, 2024 · 0637431 · 0637431
1 parent 05ec9ce
commit 0637431
Showing 1 changed file with 96 additions and 27 deletions.
diff --git a/app/components/media/Embeded.tsx b/app/components/media/Embeded.tsx
@@ -1,4 +1,7 @@
-import { getEnv } from "@/utils/getEnv";
+"use client";
+import React, { useState, useRef, useEffect } from "react";
+import { AiOutlineSetting } from "react-icons/ai";
+import { Provider } from "@/types/movies.type";
 
 type EmbededProps = {
   id: string;
@@ -7,37 +10,103 @@ type EmbededProps = {
   ep?: string;
 };
 
+const sourcesMap: Provider[] = JSON.parse(
+  process.env.NEXT_PUBLIC_WATCHLO_SOURCE_EMBED || "[]"
+);
+
+function generateUrl(
+  base: string,
+  type: string,
+  id: string,
+  season: string,
+  ep: string
+) {
+  return type?.toLowerCase() === "movie"
+    ? `${base}/movie/${id}`
+    : `${base}/tv/${id}/${season}/${ep}`;
+}
+
 function Embeded({ id, type, season = "1", ep = "1" }: EmbededProps) {
-  const determinePathQuery = (): string => {
-    if (type.toLowerCase() === "tv") return `/tv/${id}/${season}/${ep}`;
-    return `/movie/${id}`;
+  const initialProvider =
+    sourcesMap.length > 0
+      ? sourcesMap[0]
+      : {
+          name: "vidsrc.xyz",
+          label: "Initial Stream",
+          url: "https://vidsrc.to",
+        };
+  const [provider, setProvider] = useState(initialProvider);
+  console.log("provider: ", generateUrl(provider.url, type, id, season, ep));
+
+  const iframeRef = useRef<HTMLIFrameElement>(null);
+
+  const handleProviderChange = (providerName: string) => {
+    const selectedProvider = sourcesMap.find(
+      (source) => source.name === providerName
+    );
+    setProvider(selectedProvider || sourcesMap[0]);
   };
 
-  const source = `${
-    getEnv("WATCHLO_SOURCE_EMBED") ??
-    process.env["NEXT_PUBLIC_WATCHLO_SOURCE_EMBED"]
-  }${determinePathQuery()}`;
-  return (
-    <>
-      <div
-        className={`mt-4 flex flex-col items-center overflow-hidden w-full ${
-          type.toLowerCase() === "tv" ? "col-span-3" : ""
-        }`}
-      >
-        {type.toLowerCase() === "movie" && (
-          <p className="text-center w-full text-xl mb-2 font-bold">Watch 🎬</p>
-        )}
-        <iframe
-          src={
-            source ??
-            "https://www.youtube.com/embed/xvFZjo5PgG0?si=ANsa_ekk0Jg9zbWg"
+  useEffect(() => {
+    const handleIframeLoad = () => {
+      if (iframeRef.current) {
+        try {
+          const iframeWindow = iframeRef.current.contentWindow;
+          if (iframeWindow) {
+            iframeWindow.onbeforeunload = (e: BeforeUnloadEvent) => {
+              e.preventDefault();
+            };
           }
-          referrerPolicy="origin"
-          allowFullScreen
-          className="rounded drop-shadow-lg"
-        ></iframe>
+        } catch (error) {
+          console.error("Error setting up iframe redirect prevention:", error);
+        }
+      }
+    };
+
+    if (iframeRef.current) {
+      iframeRef.current.addEventListener("load", handleIframeLoad);
+    }
+  }, [provider]);
+
+  return (
+    <div
+      className={`mt-4 flex flex-col w-full ${
+        type.toLowerCase() === "tv" ? "col-span-3" : ""
+      }`}
+    >
+      {/* Iframe at the top */}
+      {type.toLowerCase() === "movie" && (
+        <p className="text-center w-full text-xl mb-2 font-bold">Watch 🎬</p>
+      )}
+      <iframe
+        ref={iframeRef}
+        src={generateUrl(provider.url, type, id, season, ep)}
+        allowFullScreen
+        className="w-full h-full rounded aspect-video drop-shadow-lg mb-4"
+      />
+
+      {/* Provider changer below the iframe */}
+      <div className="flex items-center justify-between">
+        <div className="dropdown dropdown-top rounded">
+          <label tabIndex={0} className="btn btn-ghost">
+            <AiOutlineSetting className="w-6 h-6 mr-2" />
+            <span>{provider.label}</span>
+          </label>
+          <ul
+            tabIndex={0}
+            className="dropdown-content menu p-2 shadow bg-base-100 rounded-box w-52"
+          >
+            {sourcesMap.map((source, index) => (
+              <li key={index}>
+                <a onClick={() => handleProviderChange(source.name)}>
+                  {source.label}
+                </a>
+              </li>
+            ))}
+          </ul>
+        </div>
       </div>
-    </>
+    </div>
   );
 }