fix: kanal detay sayfasında iç içe girinti (segment/aday klip) netleştirildi
3 seviyeli border-left girinti (oturum > segment > aday klip) yerine
gerçek kutu (soft-card) blokları — her segment kendi arka planıyla
ayrışıyor, adaylar onun içinde daha da net bir alt kutuda. Segment
başlığı artık ham dosya yolu değil ("15sn segment · 02.09.2026 20:14"
gibi) insan-okur bir etiket — dosya yolu küçük/soluk referans olarak
altta kaldı. "Canlı Durum" kartındaki karışık bölümler de (hata/canlı
önizleme/log/segment ayarı/manuel başlat) Separator ile ayrıştırıldı.
Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
Claude Sonnet 5
@@ -21,6 +21,7 @@ import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Badge, type badgeVariants } from "@/components/ui/badge";
|
||||
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Separator } from "@/components/ui/separator";
|
||||
import type { VariantProps } from "class-variance-authority";
|
||||
|
||||
export const dynamic = "force-dynamic";
|
||||
@@ -111,40 +112,12 @@ export default async function ChannelDetailPage({ params }: { params: Promise<{
|
||||
)}
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-3">
|
||||
<CardContent className="flex flex-col gap-4">
|
||||
<p className="font-mono-num text-xs text-muted-foreground">
|
||||
Aktif: {channel.isActive ? "evet" : "hayır"} · Son kontrol:{" "}
|
||||
{channel.lastCheckedAt ? formatTr(channel.lastCheckedAt) : "—"}
|
||||
</p>
|
||||
|
||||
<form
|
||||
action={updateChannelSegmentTime.bind(null, channel.id)}
|
||||
className="flex flex-wrap items-end gap-2"
|
||||
>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="segmentTimeMin" className="text-xs text-muted-foreground">
|
||||
Bu kanal için segment süresi (dakika)
|
||||
</Label>
|
||||
<Input
|
||||
id="segmentTimeMin"
|
||||
name="segmentTimeMin"
|
||||
type="number"
|
||||
min={1}
|
||||
max={60}
|
||||
step={0.5}
|
||||
placeholder="varsayılan (15)"
|
||||
defaultValue={channel.segmentTimeSec ? channel.segmentTimeSec / 60 : ""}
|
||||
className="w-40"
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" variant="outline" size="sm">
|
||||
Kaydet
|
||||
</Button>
|
||||
<span className="text-xs text-muted-foreground">
|
||||
Boş bırakılırsa global varsayılan kullanılır. Sadece bundan sonra başlayacak kayıtları etkiler.
|
||||
</span>
|
||||
</form>
|
||||
|
||||
{status === undefined && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
api-daemon'dan canlı durum alınamadı (servis erişilemez olabilir).
|
||||
@@ -152,7 +125,7 @@ export default async function ChannelDetailPage({ params }: { params: Promise<{
|
||||
)}
|
||||
|
||||
{status?.lastPollError && (
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<div className="flex flex-col gap-1.5 rounded-lg border border-err/30 bg-err/5 p-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<Badge variant="err" className="w-fit">
|
||||
son poll hatası
|
||||
@@ -161,32 +134,64 @@ export default async function ChannelDetailPage({ params }: { params: Promise<{
|
||||
{formatTr(status.lastPollError.at)}
|
||||
</span>
|
||||
</div>
|
||||
<pre className="font-mono-num whitespace-pre-wrap rounded-md border border-border bg-background/60 p-3 text-[0.7rem] text-muted-foreground">
|
||||
<pre className="font-mono-num whitespace-pre-wrap text-[0.7rem] text-muted-foreground">
|
||||
{status.lastPollError.message}
|
||||
</pre>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status?.recording && activeSession?.liveVideoId && activeSession.liveVideoId !== "forced" && (
|
||||
<iframe
|
||||
src={`https://www.youtube.com/embed/${activeSession.liveVideoId}`}
|
||||
title="Canlı yayın önizleme"
|
||||
className="aspect-video w-full max-w-md rounded-md border border-border"
|
||||
allow="autoplay; encrypted-media"
|
||||
/>
|
||||
{status?.recording && (
|
||||
<div className="flex flex-col gap-3">
|
||||
{activeSession?.liveVideoId && activeSession.liveVideoId !== "forced" && (
|
||||
<iframe
|
||||
src={`https://www.youtube.com/embed/${activeSession.liveVideoId}`}
|
||||
title="Canlı yayın önizleme"
|
||||
className="aspect-video w-full max-w-md rounded-md border border-border"
|
||||
allow="autoplay; encrypted-media"
|
||||
/>
|
||||
)}
|
||||
{activeSession && <LiveLogViewer sessionId={activeSession.id} />}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{status?.recording && activeSession && <LiveLogViewer sessionId={activeSession.id} />}
|
||||
<Separator />
|
||||
|
||||
<details className="mt-1 text-sm">
|
||||
<summary className="cursor-pointer font-mono-num text-xs text-muted-foreground">
|
||||
Manuel URL ile kayıt başlat
|
||||
</summary>
|
||||
<form action={forceStartCapture.bind(null, channel.id)} className="mt-2 flex gap-2">
|
||||
<Input name="url" placeholder="https://www.youtube.com/watch?v=..." required className="flex-1" />
|
||||
<Button type="submit">Başlat</Button>
|
||||
<div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
|
||||
<form
|
||||
action={updateChannelSegmentTime.bind(null, channel.id)}
|
||||
className="flex flex-wrap items-end gap-2"
|
||||
>
|
||||
<div className="flex flex-col gap-1.5">
|
||||
<Label htmlFor="segmentTimeMin" className="text-xs text-muted-foreground">
|
||||
Bu kanal için segment süresi (dakika)
|
||||
</Label>
|
||||
<Input
|
||||
id="segmentTimeMin"
|
||||
name="segmentTimeMin"
|
||||
type="number"
|
||||
min={1}
|
||||
max={60}
|
||||
step={0.5}
|
||||
placeholder="varsayılan"
|
||||
defaultValue={channel.segmentTimeSec ? channel.segmentTimeSec / 60 : ""}
|
||||
className="w-32"
|
||||
/>
|
||||
</div>
|
||||
<Button type="submit" variant="outline" size="sm">
|
||||
Kaydet
|
||||
</Button>
|
||||
</form>
|
||||
</details>
|
||||
|
||||
<details className="text-sm">
|
||||
<summary className="cursor-pointer font-mono-num text-xs text-muted-foreground">
|
||||
Manuel URL ile kayıt başlat
|
||||
</summary>
|
||||
<form action={forceStartCapture.bind(null, channel.id)} className="mt-2 flex gap-2">
|
||||
<Input name="url" placeholder="https://www.youtube.com/watch?v=..." required className="w-64" />
|
||||
<Button type="submit">Başlat</Button>
|
||||
</form>
|
||||
</details>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
@@ -213,11 +218,14 @@ export default async function ChannelDetailPage({ params }: { params: Promise<{
|
||||
) : (
|
||||
<CardContent className="flex flex-col gap-4">
|
||||
{session.segments.map((segment) => (
|
||||
<div key={segment.id} className="border-l-2 border-border pl-4">
|
||||
<div key={segment.id} className="rounded-lg border border-border bg-muted/20 p-4">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="font-mono-num text-xs text-muted-foreground">{segment.filePath}</span>
|
||||
<span className="text-sm font-medium">
|
||||
{segment.duration}sn segment · {formatTr(segment.startedAt)}
|
||||
</span>
|
||||
<Badge variant={STATUS_BADGE[segment.status] ?? "muted"}>{segment.status}</Badge>
|
||||
</div>
|
||||
<span className="font-mono-num text-[0.7rem] text-muted-foreground">{segment.filePath}</span>
|
||||
|
||||
<video controls preload="metadata" className="mt-2 w-full max-w-md rounded-md border border-border">
|
||||
<source src={`/api/segments/${segment.id}/video`} type="video/mp4" />
|
||||
@@ -236,73 +244,77 @@ export default async function ChannelDetailPage({ params }: { params: Promise<{
|
||||
</div>
|
||||
|
||||
{segment.candidates.length === 0 && segment.status !== "PENDING" && (
|
||||
<p className="mt-2 text-xs text-muted-foreground">
|
||||
<p className="mt-3 text-xs text-muted-foreground">
|
||||
Bu segmentte aday klip bulunamadı (sinyal analizi ilginç bir an tespit etmedi).
|
||||
</p>
|
||||
)}
|
||||
|
||||
{segment.candidates.map((c) => (
|
||||
<div key={c.id} className="mt-3 border-l-2 border-border pl-4">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="font-mono-num text-xs text-muted-foreground">
|
||||
{c.startSec}s – {c.endSec}s
|
||||
{c.audioPeakScore != null && ` · peak ${c.audioPeakScore.toFixed(1)}dB`}
|
||||
</span>
|
||||
<Badge variant={STATUS_BADGE[c.status] ?? "muted"}>{c.status}</Badge>
|
||||
</div>
|
||||
{transcriptPreview(c.transcriptJson) && (
|
||||
<p className="mt-1.5 text-sm leading-relaxed">{transcriptPreview(c.transcriptJson)}</p>
|
||||
)}
|
||||
{segment.candidates.length > 0 && (
|
||||
<div className="mt-3 flex flex-col gap-2">
|
||||
{segment.candidates.map((c) => (
|
||||
<div key={c.id} className="rounded-md border border-border bg-background/60 p-3">
|
||||
<div className="flex items-center justify-between gap-2">
|
||||
<span className="font-mono-num text-xs text-muted-foreground">
|
||||
{c.startSec}s – {c.endSec}s
|
||||
{c.audioPeakScore != null && ` · peak ${c.audioPeakScore.toFixed(1)}dB`}
|
||||
</span>
|
||||
<Badge variant={STATUS_BADGE[c.status] ?? "muted"}>{c.status}</Badge>
|
||||
</div>
|
||||
{transcriptPreview(c.transcriptJson) && (
|
||||
<p className="mt-1.5 text-sm leading-relaxed">{transcriptPreview(c.transcriptJson)}</p>
|
||||
)}
|
||||
|
||||
{c.short && (
|
||||
<div className="mt-2 flex flex-col items-start gap-2">
|
||||
<Badge variant={STATUS_BADGE[c.short.status] ?? "muted"}>9:16: {c.short.status}</Badge>
|
||||
{c.short.status === "READY" && (
|
||||
<>
|
||||
<video controls preload="metadata" className="w-[220px] rounded-md border border-border">
|
||||
<source src={`/api/shorts/${c.short.id}/video`} type="video/mp4" />
|
||||
</video>
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<a href={`/api/shorts/${c.short.id}/video?download=1`}>İndir</a>
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
{c.short.status === "FAILED" && (
|
||||
<>
|
||||
{c.short.errorMessage && (
|
||||
<p className="font-mono-num text-xs text-muted-foreground">{c.short.errorMessage}</p>
|
||||
{c.short && (
|
||||
<div className="mt-2 flex flex-col items-start gap-2">
|
||||
<Badge variant={STATUS_BADGE[c.short.status] ?? "muted"}>9:16: {c.short.status}</Badge>
|
||||
{c.short.status === "READY" && (
|
||||
<>
|
||||
<video controls preload="metadata" className="w-[220px] rounded-md border border-border">
|
||||
<source src={`/api/shorts/${c.short.id}/video`} type="video/mp4" />
|
||||
</video>
|
||||
<Button asChild variant="outline" size="sm">
|
||||
<a href={`/api/shorts/${c.short.id}/video?download=1`}>İndir</a>
|
||||
</Button>
|
||||
</>
|
||||
)}
|
||||
<form action={retryRender.bind(null, c.id)}>
|
||||
<Button type="submit" size="sm">
|
||||
Tekrar Dene
|
||||
</Button>
|
||||
</form>
|
||||
</>
|
||||
{c.short.status === "FAILED" && (
|
||||
<>
|
||||
{c.short.errorMessage && (
|
||||
<p className="font-mono-num text-xs text-muted-foreground">{c.short.errorMessage}</p>
|
||||
)}
|
||||
<form action={retryRender.bind(null, c.id)}>
|
||||
<Button type="submit" size="sm">
|
||||
Tekrar Dene
|
||||
</Button>
|
||||
</form>
|
||||
</>
|
||||
)}
|
||||
{c.short.status === "RENDERING" && (
|
||||
<form action={cancelRender.bind(null, c.id)}>
|
||||
<ConfirmButton
|
||||
confirmText="Render'ı başarısız say ve kilidi aç? (Çalışan process'i öldürmez, sadece durumu sıfırlar)"
|
||||
label="Takıldıysa İptal Et"
|
||||
variant="outline"
|
||||
/>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{c.short.status === "RENDERING" && (
|
||||
<form action={cancelRender.bind(null, c.id)}>
|
||||
<ConfirmButton
|
||||
confirmText="Render'ı başarısız say ve kilidi aç? (Çalışan process'i öldürmez, sadece durumu sıfırlar)"
|
||||
label="Takıldıysa İptal Et"
|
||||
variant="outline"
|
||||
/>
|
||||
{!c.short && c.status === "TRANSCRIBED" && (
|
||||
<form action={retryRender.bind(null, c.id)} className="mt-2">
|
||||
<Button type="submit" size="sm">
|
||||
9:16 Render Et
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
{!c.short && c.status === "TRANSCRIBED" && (
|
||||
<form action={retryRender.bind(null, c.id)} className="mt-2">
|
||||
<Button type="submit" size="sm">
|
||||
9:16 Render Et
|
||||
</Button>
|
||||
</form>
|
||||
)}
|
||||
|
||||
<form action={deleteCandidateSegment.bind(null, c.id)} className="mt-2">
|
||||
<ConfirmButton confirmText="Bu aday klibi silmek istediğine emin misin?" label="Sil" />
|
||||
</form>
|
||||
<form action={deleteCandidateSegment.bind(null, c.id)} className="mt-2">
|
||||
<ConfirmButton confirmText="Bu aday klibi silmek istediğine emin misin?" label="Sil" />
|
||||
</form>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
</CardContent>
|
||||
|
||||
Reference in New Issue
Block a user