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/channel-card.tsx
+++ b/k-tv-frontend/app/(main)/dashboard/components/channel-card.tsx
@@ -1,7 +1,16 @@
 "use client";

 import Link from "next/link";
-import { Pencil, Trash2, RefreshCw, Tv2, CalendarDays, Download, ChevronUp, ChevronDown } from "lucide-react";
+import {
+  Pencil,
+  Trash2,
+  RefreshCw,
+  Tv2,
+  CalendarDays,
+  Download,
+  ChevronUp,
+  ChevronDown,
+} from "lucide-react";
 import { Button } from "@/components/ui/button";
 import { useActiveSchedule } from "@/hooks/use-channels";
 import type { ChannelResponse } from "@/lib/types";
@@ -34,7 +43,12 @@ function useScheduleStatus(channelId: string) {
    const h = Math.ceil(hoursLeft);
    return { status: "expiring" as const, label: `Expires in ${h}h` };
  }
-  const fmt = expiresAt.toLocaleDateString(undefined, { weekday: "short", hour: "2-digit", minute: "2-digit", hour12: false });
+  const fmt = expiresAt.toLocaleDateString(undefined, {
+    weekday: "short",
+    hour: "2-digit",
+    minute: "2-digit",
+    hour12: false,
+  });
  return { status: "ok" as const, label: `Until ${fmt}` };
 }

@@ -55,10 +69,13 @@ export function ChannelCard({
  const { status, label } = useScheduleStatus(channel.id);

  const scheduleColor =
-    status === "expired" ? "text-red-400" :
-    status === "expiring" ? "text-amber-400" :
-    status === "ok" ? "text-zinc-500" :
-    "text-zinc-600";
+    status === "expired"
+      ? "text-red-400"
+      : status === "expiring"
+        ? "text-amber-400"
+        : status === "ok"
+          ? "text-zinc-500"
+          : "text-zinc-600";

  return (
    <div className="flex flex-col gap-4 rounded-xl border border-zinc-800 bg-zinc-900 p-5 transition-colors hover:border-zinc-700">
@@ -131,9 +148,7 @@ export function ChannelCard({
        <span>
          {blockCount} {blockCount === 1 ? "block" : "blocks"}
        </span>
-        {label && (
-          <span className={scheduleColor}>{label}</span>
-        )}
+        {label && <span className={scheduleColor}>{label}</span>}
      </div>

      {/* Actions */}
@@ -144,11 +159,12 @@ export function ChannelCard({
          disabled={isGenerating}
          className={`flex-1 ${status === "expired" ? "border border-red-800/50 bg-red-950/30 text-red-300 hover:bg-red-900/40" : ""}`}
        >
-          <RefreshCw className={`size-3.5 ${isGenerating ? "animate-spin" : ""}`} />
+          <RefreshCw
+            className={`size-3.5 ${isGenerating ? "animate-spin" : ""}`}
+          />
          {isGenerating ? "Generating…" : "Generate schedule"}
        </Button>
        <Button
-          variant="outline"
          size="icon-sm"
          onClick={onViewSchedule}
          title="View schedule"
@@ -157,7 +173,6 @@ export function ChannelCard({
          <CalendarDays className="size-3.5" />
        </Button>
        <Button
-          variant="outline"
          size="icon-sm"
          asChild
          title="Watch on TV"
--- 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>
+  );
+}
--- a/k-tv-frontend/app/(main)/dashboard/page.tsx
+++ b/k-tv-frontend/app/(main)/dashboard/page.tsx
@@ -1,7 +1,7 @@
 "use client";

 import { useState, useEffect } from "react";
-import { Plus, Upload, RefreshCw } from "lucide-react";
+import { Plus, Upload, RefreshCw, Antenna } from "lucide-react";
 import { Button } from "@/components/ui/button";
 import {
  useChannels,
@@ -19,8 +19,16 @@ import { CreateChannelDialog } from "./components/create-channel-dialog";
 import { DeleteChannelDialog } from "./components/delete-channel-dialog";
 import { EditChannelSheet } from "./components/edit-channel-sheet";
 import { ScheduleSheet } from "./components/schedule-sheet";
-import { ImportChannelDialog, type ChannelImportData } from "./components/import-channel-dialog";
-import type { ChannelResponse, ProgrammingBlock, RecyclePolicy } from "@/lib/types";
+import {
+  ImportChannelDialog,
+  type ChannelImportData,
+} from "./components/import-channel-dialog";
+import { IptvExportDialog } from "./components/iptv-export-dialog";
+import type {
+  ChannelResponse,
+  ProgrammingBlock,
+  RecyclePolicy,
+} from "@/lib/types";

 export default function DashboardPage() {
  const { token } = useAuthContext();
@@ -43,7 +51,9 @@ export default function DashboardPage() {

  const saveOrder = (order: string[]) => {
    setChannelOrder(order);
-    try { localStorage.setItem("k-tv-channel-order", JSON.stringify(order)); } catch {}
+    try {
+      localStorage.setItem("k-tv-channel-order", JSON.stringify(order));
+    } catch {}
  };

  // Sort channels by stored order; new channels appear at the end
@@ -91,17 +101,22 @@ export default function DashboardPage() {
      }
    }
    setIsRegeneratingAll(false);
-    if (failed === 0) toast.success(`All ${channels.length} schedules regenerated`);
+    if (failed === 0)
+      toast.success(`All ${channels.length} schedules regenerated`);
    else toast.error(`${failed} schedule(s) failed to generate`);
  };

+  const [iptvOpen, setIptvOpen] = useState(false);
  const [createOpen, setCreateOpen] = useState(false);
  const [importOpen, setImportOpen] = useState(false);
  const [importPending, setImportPending] = useState(false);
  const [importError, setImportError] = useState<string | null>(null);
  const [editChannel, setEditChannel] = useState<ChannelResponse | null>(null);
-  const [deleteTarget, setDeleteTarget] = useState<ChannelResponse | null>(null);
-  const [scheduleChannel, setScheduleChannel] = useState<ChannelResponse | null>(null);
+  const [deleteTarget, setDeleteTarget] = useState<ChannelResponse | null>(
+    null,
+  );
+  const [scheduleChannel, setScheduleChannel] =
+    useState<ChannelResponse | null>(null);

  const handleCreate = (data: {
    name: string;
@@ -147,12 +162,19 @@ export default function DashboardPage() {
    setImportError(null);
    try {
      const created = await api.channels.create(
-        { name: data.name, timezone: data.timezone, description: data.description },
+        {
+          name: data.name,
+          timezone: data.timezone,
+          description: data.description,
+        },
        token,
      );
      await api.channels.update(
        created.id,
-        { schedule_config: { blocks: data.blocks }, recycle_policy: data.recycle_policy },
+        {
+          schedule_config: { blocks: data.blocks },
+          recycle_policy: data.recycle_policy,
+        },
        token,
      );
      await queryClient.invalidateQueries({ queryKey: ["channels"] });
@@ -172,7 +194,9 @@ export default function DashboardPage() {
      blocks: channel.schedule_config.blocks,
      recycle_policy: channel.recycle_policy,
    };
-    const blob = new Blob([JSON.stringify(payload, null, 2)], { type: "application/json" });
+    const blob = new Blob([JSON.stringify(payload, null, 2)], {
+      type: "application/json",
+    });
    const url = URL.createObjectURL(blob);
    const a = document.createElement("a");
    a.href = url;
@@ -201,17 +225,28 @@ export default function DashboardPage() {
        <div className="flex gap-2">
          {channels && channels.length > 0 && (
            <Button
-              variant="outline"
              onClick={handleRegenerateAll}
              disabled={isRegeneratingAll}
              title="Regenerate schedules for all channels"
              className="border-zinc-700 text-zinc-400 hover:text-zinc-100"
            >
-              <RefreshCw className={`size-4 ${isRegeneratingAll ? "animate-spin" : ""}`} />
+              <RefreshCw
+                className={`size-4 ${isRegeneratingAll ? "animate-spin" : ""}`}
+              />
              Regenerate all
            </Button>
          )}
-          <Button variant="outline" onClick={() => setImportOpen(true)} className="border-zinc-700 text-zinc-300 hover:text-zinc-100">
+          <Button
+            onClick={() => setIptvOpen(true)}
+            className="border-zinc-700 text-zinc-300 hover:text-zinc-100"
+          >
+            <Antenna className="size-4" />
+            IPTV
+          </Button>
+          <Button
+            onClick={() => setImportOpen(true)}
+            className="border-zinc-700 text-zinc-300 hover:text-zinc-100"
+          >
            <Upload className="size-4" />
            Import
          </Button>
@@ -238,7 +273,7 @@ export default function DashboardPage() {
      {!isLoading && channels && channels.length === 0 && (
        <div className="flex flex-col items-center justify-center gap-3 rounded-xl border border-dashed border-zinc-800 py-20 text-center">
          <p className="text-sm text-zinc-500">No channels yet</p>
-          <Button variant="outline" onClick={() => setCreateOpen(true)}>
+          <Button onClick={() => setCreateOpen(true)}>
            <Plus className="size-4" />
            Create your first channel
          </Button>
@@ -270,9 +305,22 @@ export default function DashboardPage() {
      )}

      {/* Dialogs / sheets */}
+      {token && (
+        <IptvExportDialog
+          open={iptvOpen}
+          onOpenChange={setIptvOpen}
+          token={token}
+        />
+      )}
+
      <ImportChannelDialog
        open={importOpen}
-        onOpenChange={(open) => { if (!open) { setImportOpen(false); setImportError(null); } }}
+        onOpenChange={(open) => {
+          if (!open) {
+            setImportOpen(false);
+            setImportError(null);
+          }
+        }}
        onSubmit={handleImport}
        isPending={importPending}
        error={importError}
@@ -289,7 +337,9 @@ export default function DashboardPage() {
      <EditChannelSheet
        channel={editChannel}
        open={!!editChannel}
-        onOpenChange={(open) => { if (!open) setEditChannel(null); }}
+        onOpenChange={(open) => {
+          if (!open) setEditChannel(null);
+        }}
        onSubmit={handleEdit}
        isPending={updateChannel.isPending}
        error={updateChannel.error?.message}
@@ -298,14 +348,18 @@ export default function DashboardPage() {
      <ScheduleSheet
        channel={scheduleChannel}
        open={!!scheduleChannel}
-        onOpenChange={(open) => { if (!open) setScheduleChannel(null); }}
+        onOpenChange={(open) => {
+          if (!open) setScheduleChannel(null);
+        }}
      />

      {deleteTarget && (
        <DeleteChannelDialog
          channelName={deleteTarget.name}
          open={!!deleteTarget}
-          onOpenChange={(open) => { if (!open) setDeleteTarget(null); }}
+          onOpenChange={(open) => {
+            if (!open) setDeleteTarget(null);
+          }}
          onConfirm={handleDelete}
          isPending={deleteChannel.isPending}
        />