feat: add IPTV export functionality with M3U and XMLTV generation, including UI components for export dialog

2026-03-14 02:11:20 +01:00
parent 66ec0c51c0
commit e610c23fea
9 changed files with 462 additions and 32 deletions
--- a/k-tv-frontend/app/(main)/dashboard/components/iptv-export-dialog.tsx
+++ b/k-tv-frontend/app/(main)/dashboard/components/iptv-export-dialog.tsx
@@ -0,0 +1,116 @@
+"use client";
+
+import { useState } from "react";
+import { Copy, Check } from "lucide-react";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogDescription,
+} from "@/components/ui/dialog";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { toast } from "sonner";
+
+const API_BASE =
+  process.env.NEXT_PUBLIC_API_URL ?? "http://localhost:3000/api/v1";
+
+interface IptvExportDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  token: string;
+}
+
+export function IptvExportDialog({
+  open,
+  onOpenChange,
+  token,
+}: IptvExportDialogProps) {
+  const m3uUrl = `${API_BASE}/iptv/playlist.m3u?token=${token}`;
+  const xmltvUrl = `${API_BASE}/iptv/epg.xml?token=${token}`;
+
+  const [copiedM3u, setCopiedM3u] = useState(false);
+  const [copiedXmltv, setCopiedXmltv] = useState(false);
+
+  const copy = async (text: string, which: "m3u" | "xmltv") => {
+    try {
+      await navigator.clipboard.writeText(text);
+      if (which === "m3u") {
+        setCopiedM3u(true);
+        setTimeout(() => setCopiedM3u(false), 2000);
+      } else {
+        setCopiedXmltv(true);
+        setTimeout(() => setCopiedXmltv(false), 2000);
+      }
+      toast.success("Copied to clipboard");
+    } catch {
+      toast.error("Failed to copy");
+    }
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="bg-zinc-900 border-zinc-800 text-zinc-100 sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>IPTV Export</DialogTitle>
+          <DialogDescription className="text-zinc-400">
+            Paste these URLs into your IPTV client (TiviMate, VLC, etc.).
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-4">
+          <div className="space-y-1.5">
+            <Label className="text-zinc-300 text-xs">M3U Playlist</Label>
+            <p className="text-xs text-zinc-500">
+              Add Playlist → paste URL
+            </p>
+            <div className="flex gap-2">
+              <Input
+                readOnly
+                value={m3uUrl}
+                className="bg-zinc-800 border-zinc-700 text-zinc-300 font-mono text-xs"
+              />
+              <Button
+                variant="outline"
+                size="icon"
+                className="shrink-0 border-zinc-700 text-zinc-400 hover:text-zinc-100"
+                onClick={() => copy(m3uUrl, "m3u")}
+              >
+                {copiedM3u ? <Check className="size-4" /> : <Copy className="size-4" />}
+              </Button>
+            </div>
+          </div>
+
+          <div className="space-y-1.5">
+            <Label className="text-zinc-300 text-xs">XMLTV EPG</Label>
+            <p className="text-xs text-zinc-500">
+              EPG Source → paste URL
+            </p>
+            <div className="flex gap-2">
+              <Input
+                readOnly
+                value={xmltvUrl}
+                className="bg-zinc-800 border-zinc-700 text-zinc-300 font-mono text-xs"
+              />
+              <Button
+                variant="outline"
+                size="icon"
+                className="shrink-0 border-zinc-700 text-zinc-400 hover:text-zinc-100"
+                onClick={() => copy(xmltvUrl, "xmltv")}
+              >
+                {copiedXmltv ? <Check className="size-4" /> : <Copy className="size-4" />}
+              </Button>
+            </div>
+          </div>
+
+          <p className="text-xs text-zinc-600">
+            The token in these URLs is your session JWT. Anyone with these URLs
+            can stream your channels.
+          </p>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}