This commit is contained in:
2026-09-02 11:56:19 +03:30
parent fdbf02bc07
commit e248943f4c
4 changed files with 340 additions and 92 deletions
+82 -5
View File
@@ -14,8 +14,9 @@ import {
Textarea, Textarea,
Modal, Modal,
PageHeader, PageHeader,
Switch,
} from "@/components/ui"; } from "@/components/ui";
import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons"; import { EditIcon, EyeIcon, PlusIcon, TrashIcon } from "@/components/icons";
import { MediaPreview } from "@/components/MediaPreview"; import { MediaPreview } from "@/components/MediaPreview";
import { pickUrl } from "@/lib/media"; import { pickUrl } from "@/lib/media";
import { toFa } from "@/lib/utils"; import { toFa } from "@/lib/utils";
@@ -29,6 +30,8 @@ interface Category {
order?: number; order?: number;
description?: string | null; description?: string | null;
icon?: string | null; icon?: string | null;
is_deeplink_only?: boolean;
deep_link?: string | null;
subcategories_count?: number; subcategories_count?: number;
} }
@@ -48,9 +51,16 @@ const ICON_KEYS = ["icon", "icon_url"];
export default function CategoriesPage() { export default function CategoriesPage() {
const [typeFilter, setTypeFilter] = useState<CategoryType>("media"); const [typeFilter, setTypeFilter] = useState<CategoryType>("media");
const { data, loading, error, reload } = useList<Category>("/categories", { // Deep-link-only categories are hidden from the normal listing, so they need
type: typeFilter, // their own view here — otherwise a category sent to deep links disappears
}); // from this page and can only be brought back from the deep-links screen.
const [showDeepLinks, setShowDeepLinks] = useState(false);
const { data, loading, error, reload } = useList<Category>(
"/categories",
// `deeplink_only` returns every hidden category regardless of type, so the
// type filter is not sent alongside it.
showDeepLinks ? { deeplink_only: 1 } : { type: typeFilter },
);
const toast = useToast(); const toast = useToast();
const [editing, setEditing] = useState<Category | null>(null); const [editing, setEditing] = useState<Category | null>(null);
@@ -128,6 +138,25 @@ export default function CategoriesPage() {
} }
} }
// Move a category into or out of deep-link-only mode, both directions.
// Playlist categories live in music_categories, which has no such column.
async function toggleDeepLink(row: Category) {
try {
await apiFetch(`/categories/${row.id}`, {
method: "POST",
body: toFormData({ is_deeplink_only: row.is_deeplink_only ? 0 : 1 }),
});
toast.success(
row.is_deeplink_only
? "به فهرست عادی بازگشت."
: "به لینک مستقیم تبدیل شد.",
);
reload();
} catch (err) {
toast.error(err instanceof ApiError ? err.message : "خطا در ذخیره‌سازی");
}
}
async function confirmDelete() { async function confirmDelete() {
if (!deleting) return; if (!deleting) return;
setRemoving(true); setRemoving(true);
@@ -174,6 +203,25 @@ export default function CategoriesPage() {
header: "توضیحات", header: "توضیحات",
render: (r) => r.description || "—", render: (r) => r.description || "—",
}, },
{
key: "deep_link",
header: "لینک مستقیم",
className: "w-56",
render: (r) =>
r.is_deeplink_only ? (
<a
href={r.deep_link ?? undefined}
target="_blank"
rel="noreferrer"
dir="ltr"
className="inline-block max-w-[200px] truncate text-xs text-primary underline"
>
{r.deep_link ?? "—"}
</a>
) : (
<span className="text-xs text-muted">—</span>
),
},
{ {
key: "subcategories_count", key: "subcategories_count",
header: "زیر‌دسته‌ها", header: "زیر‌دسته‌ها",
@@ -189,11 +237,17 @@ export default function CategoriesPage() {
subtitle="مدیریت دسته‌بندی‌های عمومی رسانه، پلی‌لیست و قالب تنفس" subtitle="مدیریت دسته‌بندی‌های عمومی رسانه، پلی‌لیست و قالب تنفس"
action={ action={
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<Switch
checked={showDeepLinks}
onChange={setShowDeepLinks}
label="فقط لینک‌های مستقیم"
/>
<Select <Select
value={typeFilter} value={typeFilter}
onChange={(e) => setTypeFilter(e.target.value as CategoryType)} onChange={(e) => setTypeFilter(e.target.value as CategoryType)}
aria-label="نوع دسته‌بندی" aria-label="نوع دسته‌بندی"
className="w-40" className="w-40"
disabled={showDeepLinks}
> >
{TYPE_OPTIONS.map((o) => ( {TYPE_OPTIONS.map((o) => (
<option key={o.value} value={o.value}> <option key={o.value} value={o.value}>
@@ -214,7 +268,11 @@ export default function CategoriesPage() {
loading={loading} loading={loading}
error={error} error={error}
onRetry={reload} onRetry={reload}
emptyMessage="هنوز دسته‌بندی‌ای ثبت نشده است. اولین دسته‌بندی را بسازید." emptyMessage={
showDeepLinks
? "هیچ دسته‌بندی لینک مستقیمی وجود ندارد."
: "هنوز دسته‌بندی‌ای ثبت نشده است. اولین دسته‌بندی را بسازید."
}
emptyAction={ emptyAction={
<Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}> <Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}>
دسته‌بندی جدید دسته‌بندی جدید
@@ -225,6 +283,25 @@ export default function CategoriesPage() {
<Button variant="ghost" onClick={() => openEdit(row)} aria-label="ویرایش"> <Button variant="ghost" onClick={() => openEdit(row)} aria-label="ویرایش">
<EditIcon className="h-4 w-4" /> <EditIcon className="h-4 w-4" />
</Button> </Button>
{row.type !== "playlist" && (
<Button
variant="ghost"
onClick={() => toggleDeepLink(row)}
aria-label={
row.is_deeplink_only
? "بازگرداندن به فهرست"
: "تبدیل به لینک مستقیم"
}
title={
row.is_deeplink_only
? "بازگرداندن به فهرست"
: "تبدیل به لینک مستقیم"
}
className={row.is_deeplink_only ? "text-primary" : undefined}
>
<EyeIcon className="h-4 w-4" />
</Button>
)}
<Button <Button
variant="ghost" variant="ghost"
onClick={() => setDeleting(row)} onClick={() => setDeleting(row)}
+88 -41
View File
@@ -1,6 +1,6 @@
"use client"; "use client";
import { useState } from "react"; import { useCallback, useState } from "react";
import { apiFetch, ApiError, toFormData } from "@/lib/api"; import { apiFetch, ApiError, toFormData } from "@/lib/api";
import { useList } from "@/lib/useResource"; import { useList } from "@/lib/useResource";
import { useToast } from "@/components/toast"; import { useToast } from "@/components/toast";
@@ -15,7 +15,7 @@ import {
Select, Select,
Textarea, Textarea,
} from "@/components/ui"; } from "@/components/ui";
import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons"; import { EditIcon, EyeIcon, PlusIcon, TrashIcon } from "@/components/icons";
import { MediaPreview } from "@/components/MediaPreview"; import { MediaPreview } from "@/components/MediaPreview";
import { pickUrl } from "@/lib/media"; import { pickUrl } from "@/lib/media";
import { toFa } from "@/lib/utils"; import { toFa } from "@/lib/utils";
@@ -36,19 +36,40 @@ interface Category {
const ICON_KEYS = ["icon", "icon_url"]; const ICON_KEYS = ["icon", "icon_url"];
export default function CategoryDeepLinksPage() { export default function CategoryDeepLinksPage() {
const { data, loading, error, reload } = useList<Category>("/categories", { const { data, loading, error, reload: reloadHidden } = useList<Category>(
deeplink_only: 1, "/categories",
}); { deeplink_only: 1 },
const { data: allCategories, loading: allLoading } = );
useList<Category>("/categories"); // The "use an existing category" picker. /categories only lists visible ones,
// so it must be refetched on every toggle — otherwise a just-unhidden
// category is missing from the picker until a full page reload.
const {
data: allSelectable,
loading: allLoading,
reload: reloadAll,
} = useList<Category>("/categories");
const toast = useToast(); const toast = useToast();
// Only rows from the `categories` table can be toggled — /categories with no
// type also folds in music (playlist) categories, whose IDs belong to another
// table and which have no deep-link column.
const allCategories = allSelectable.filter((c) => c.type !== "playlist");
// Both lists change together on every toggle.
const reload = useCallback(() => {
reloadHidden();
reloadAll();
}, [reloadHidden, reloadAll]);
// Non-null while the modal edits an existing row (null = create).
const [editing, setEditing] = useState<Category | null>(null); const [editing, setEditing] = useState<Category | null>(null);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
// Source: 'new' (create a hidden category) or 'existing' (pick existing to hide). // Source: 'existing' (pick an existing category to hide — the common case,
const [source, setSource] = useState<"new" | "existing">("new"); // and it avoids the "name already taken" error you get from re-creating one)
// or 'new' (create a fresh hidden category).
const [source, setSource] = useState<"new" | "existing">("existing");
const [existingId, setExistingId] = useState<string>(""); const [existingId, setExistingId] = useState<string>("");
// Fields for creating a new hidden category. // Fields for creating a new hidden category.
@@ -62,7 +83,7 @@ export default function CategoryDeepLinksPage() {
const [removing, setRemoving] = useState(false); const [removing, setRemoving] = useState(false);
function resetForm() { function resetForm() {
setSource("new"); setSource("existing");
setExistingId(""); setExistingId("");
setName(""); setName("");
setType("media"); setType("media");
@@ -77,19 +98,26 @@ export default function CategoryDeepLinksPage() {
setOpen(true); setOpen(true);
} }
async function toggleHidden(row: Category) { function openEdit(row: Category) {
setEditing(row);
setSource("new"); // the edit form always shows the category fields
setExistingId("");
setName(row.name ?? "");
setType(row.type ?? "media");
setOrder(row.order != null ? String(row.order) : "0");
setDescription(row.description ?? "");
setIcon(null);
setOpen(true);
}
// Take a category back out of deep-link-only mode (it returns to the lists).
async function unhide(row: Category) {
try { try {
await apiFetch(`/categories/${row.id}`, { await apiFetch(`/categories/${row.id}`, {
method: "POST", method: "POST",
body: toFormData({ body: toFormData({ is_deeplink_only: 0 }),
is_deeplink_only: !row.is_deeplink_only ? 1 : 0,
}),
}); });
toast.success( toast.success("از لینک مستقیم خارج شد.");
row.is_deeplink_only
? "از لینک مستقیم خارج شد."
: "به لینک مستقیم تبدیل شد.",
);
reload(); reload();
} catch (err) { } catch (err) {
toast.error(err instanceof ApiError ? err.message : "خطا در ذخیره‌سازی"); toast.error(err instanceof ApiError ? err.message : "خطا در ذخیره‌سازی");
@@ -101,13 +129,13 @@ export default function CategoryDeepLinksPage() {
setSaving(true); setSaving(true);
try { try {
if (editing) { if (editing) {
setOpen(false); // Edit an existing deep-link category. It stays deeplink-only.
reload(); await apiFetch(`/categories/${editing.id}`, {
method: "POST",
body: toFormData({ name, type, order, description, icon }),
});
toast.success("لینک مستقیم بهروزرسانی شد."); toast.success("لینک مستقیم بهروزرسانی شد.");
return; } else if (source === "existing") {
}
if (source === "existing") {
if (!existingId) { if (!existingId) {
toast.error("دسته‌بندی را انتخاب کنید."); toast.error("دسته‌بندی را انتخاب کنید.");
return; return;
@@ -228,12 +256,16 @@ export default function CategoryDeepLinksPage() {
} }
actions={(row) => ( actions={(row) => (
<> <>
<Button variant="ghost" onClick={() => openEdit(row)} aria-label="ویرایش">
<EditIcon className="h-4 w-4" />
</Button>
<Button <Button
variant="ghost" variant="ghost"
onClick={() => toggleHidden(row)} onClick={() => unhide(row)}
aria-label="نمایش در فهرست" aria-label="نمایش در فهرست"
title="نمایش در فهرست"
> >
<EditIcon className="h-4 w-4" /> <EyeIcon className="h-4 w-4" />
</Button> </Button>
<Button <Button
variant="ghost" variant="ghost"
@@ -250,7 +282,9 @@ export default function CategoryDeepLinksPage() {
<Modal <Modal
open={open} open={open}
onClose={() => setOpen(false)} onClose={() => setOpen(false)}
title="لینک مستقیم دسته‌بندی جدید" title={
editing ? "ویرایش لینک مستقیم دسته‌بندی" : "لینک مستقیم دسته‌بندی جدید"
}
footer={ footer={
<> <>
<Button variant="secondary" onClick={() => setOpen(false)}> <Button variant="secondary" onClick={() => setOpen(false)}>
@@ -267,15 +301,17 @@ export default function CategoryDeepLinksPage() {
onSubmit={save} onSubmit={save}
className="flex flex-col gap-4" className="flex flex-col gap-4"
> >
<Field label="منبع دسته‌بندی" required> {!editing && (
<Select <Field label="منبع دسته‌بندی" required>
value={source} <Select
onChange={(e) => setSource(e.target.value as "new" | "existing")} value={source}
> onChange={(e) => setSource(e.target.value as "new" | "existing")}
<option value="new">ساخت دسته‌بندی جدید</option> >
<option value="existing">استفاده از دسته‌بندی موجود</option> <option value="new">ساخت دسته‌بندی جدید</option>
</Select> <option value="existing">استفاده از دسته‌بندی موجود</option>
</Field> </Select>
</Field>
)}
{source === "existing" ? ( {source === "existing" ? (
<Field label="انتخاب دسته‌بندی" required> <Field label="انتخاب دسته‌بندی" required>
@@ -309,13 +345,14 @@ export default function CategoryDeepLinksPage() {
/> />
</Field> </Field>
{/* No playlist option: playlist categories live in the
music_categories table, which has no deep-link column. */}
<Field label="نوع"> <Field label="نوع">
<Select <Select
value={type} value={type}
onChange={(e) => setType(e.target.value)} onChange={(e) => setType(e.target.value)}
> >
<option value="media">رسانه</option> <option value="media">رسانه</option>
<option value="playlist">پلی‌لیست</option>
<option value="breathing_template">قالب تنفس</option> <option value="breathing_template">قالب تنفس</option>
</Select> </Select>
</Field> </Field>
@@ -337,7 +374,7 @@ export default function CategoryDeepLinksPage() {
/> />
</Field> </Field>
<Field label="آیکن"> <Field label={editing ? "آیکن (در صورت تغییر)" : "آیکن"}>
<Input <Input
type="file" type="file"
accept="image/*" accept="image/*"
@@ -348,8 +385,18 @@ export default function CategoryDeepLinksPage() {
)} )}
<p className="rounded-xl border border-border bg-surface-muted p-3 text-xs text-muted"> <p className="rounded-xl border border-border bg-surface-muted p-3 text-xs text-muted">
پس از ذخیره، این دسته‌بندی در فهرست نمایش داده نمیشود و فقط با لینک {editing ? (
مستقیم قابل دسترسی است. <>
این دسته‌بندی در فهرست نمایش داده نمیشود و فقط با لینک مستقیم قابل
دسترسی است. برای بازگرداندن آن به فهرست، از دکمه «نمایش در فهرست»
استفاده کنید.
</>
) : (
<>
پس از ذخیره، این دسته‌بندی در فهرست نمایش داده نمیشود و فقط با لینک
مستقیم قابل دسترسی است.
</>
)}
</p> </p>
</form> </form>
</Modal> </Modal>
+88 -38
View File
@@ -1,6 +1,6 @@
"use client"; "use client";
import { useState } from "react"; import { useCallback, useState } from "react";
import { apiFetch, ApiError, toFormData } from "@/lib/api"; import { apiFetch, ApiError, toFormData } from "@/lib/api";
import { useList } from "@/lib/useResource"; import { useList } from "@/lib/useResource";
import { useToast } from "@/components/toast"; import { useToast } from "@/components/toast";
@@ -14,10 +14,8 @@ import {
PageHeader, PageHeader,
Select, Select,
Textarea, Textarea,
Badge,
Switch,
} from "@/components/ui"; } from "@/components/ui";
import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons"; import { EditIcon, EyeIcon, PlusIcon, TrashIcon } from "@/components/icons";
import { MediaPreview } from "@/components/MediaPreview"; import { MediaPreview } from "@/components/MediaPreview";
import { ImagePicker } from "@/components/ImagePicker"; import { ImagePicker } from "@/components/ImagePicker";
import { pickUrl, SOUND_KEYS, VIDEO_KEYS, IMAGE_KEYS } from "@/lib/media"; import { pickUrl, SOUND_KEYS, VIDEO_KEYS, IMAGE_KEYS } from "@/lib/media";
@@ -70,14 +68,27 @@ function DeepLink({ deep_link }: { deep_link?: string | null }) {
} }
export default function MediaDeepLinksPage() { export default function MediaDeepLinksPage() {
const { data, loading, error, reload } = useList<Media>("/media", { const { data, loading, error, reload: reloadHidden } = useList<Media>(
deeplink_only: 1, "/media",
}); { deeplink_only: 1 },
const { data: allMedia, loading: allLoading } = useList<Media>("/media", { );
count: 500, // The "use an existing media" picker. /media only lists visible media, so it
}); // must be refetched whenever a media moves in or out of deep-link mode —
// otherwise a just-unhidden media is missing from the picker until a reload.
const {
data: allMedia,
loading: allLoading,
reload: reloadAll,
} = useList<Media>("/media", { count: 500 });
const toast = useToast(); const toast = useToast();
// Both lists change together on every toggle.
const reload = useCallback(() => {
reloadHidden();
reloadAll();
}, [reloadHidden, reloadAll]);
// Non-null while the modal edits an existing row (null = create).
const [editing, setEditing] = useState<Media | null>(null); const [editing, setEditing] = useState<Media | null>(null);
const [open, setOpen] = useState(false); const [open, setOpen] = useState(false);
const [saving, setSaving] = useState(false); const [saving, setSaving] = useState(false);
@@ -118,17 +129,29 @@ export default function MediaDeepLinksPage() {
setOpen(true); setOpen(true);
} }
async function toggleHidden(row: Media) { function openEdit(row: Media) {
setEditing(row);
setSource("new"); // the edit form always shows the media fields
setExistingId("");
setTitle(row.title ?? "");
setCaption(row.caption ?? "");
setType(row.type ?? "audio");
setDuration(row.duration != null ? String(row.duration) : "");
setFile(null);
setExternalUrl(row.external_url ?? "");
setImageId(row.image_id ?? null);
setImageFile(null);
setOpen(true);
}
// Take a media back out of deep-link-only mode (it returns to the lists).
async function unhide(row: Media) {
try { try {
await apiFetch(`/media/${row.id}`, { await apiFetch(`/media/${row.id}`, {
method: "POST", method: "POST",
body: toFormData({ body: toFormData({ is_deeplink_only: 0 }),
is_deeplink_only: !row.is_deeplink_only ? 1 : 0,
}),
}); });
toast.success( toast.success("از لینک مستقیم خارج شد.");
row.is_deeplink_only ? "از لینک مستقیم خارج شد." : "به لینک مستقیم تبدیل شد.",
);
reload(); reload();
} catch (err) { } catch (err) {
toast.error(err instanceof ApiError ? err.message : "خطا در ذخیره‌سازی"); toast.error(err instanceof ApiError ? err.message : "خطا در ذخیره‌سازی");
@@ -140,13 +163,20 @@ export default function MediaDeepLinksPage() {
setSaving(true); setSaving(true);
try { try {
if (editing) { if (editing) {
setOpen(false); // Edit an existing deep-link media. It stays deeplink-only.
reload(); const body = toFormData({
title,
caption,
type,
duration,
file,
external_url: externalUrl,
image_id: imageId,
image: imageFile,
});
await apiFetch(`/media/${editing.id}`, { method: "POST", body });
toast.success("لینک مستقیم بهروزرسانی شد."); toast.success("لینک مستقیم بهروزرسانی شد.");
return; } else if (source === "existing") {
}
if (source === "existing") {
// Toggle the chosen existing media to deeplink-only. // Toggle the chosen existing media to deeplink-only.
if (!existingId) { if (!existingId) {
toast.error("رسانهای را انتخاب کنید."); toast.error("رسانهای را انتخاب کنید.");
@@ -256,12 +286,16 @@ export default function MediaDeepLinksPage() {
} }
actions={(row) => ( actions={(row) => (
<> <>
<Button variant="ghost" onClick={() => openEdit(row)} aria-label="ویرایش">
<EditIcon className="h-4 w-4" />
</Button>
<Button <Button
variant="ghost" variant="ghost"
onClick={() => toggleHidden(row)} onClick={() => unhide(row)}
aria-label="نمایش در فهرست" aria-label="نمایش در فهرست"
title="نمایش در فهرست"
> >
<EditIcon className="h-4 w-4" /> <EyeIcon className="h-4 w-4" />
</Button> </Button>
<Button <Button
variant="ghost" variant="ghost"
@@ -278,7 +312,7 @@ export default function MediaDeepLinksPage() {
<Modal <Modal
open={open} open={open}
onClose={() => setOpen(false)} onClose={() => setOpen(false)}
title="لینک مستقیم رسانه جدید" title={editing ? "ویرایش لینک مستقیم رسانه" : "لینک مستقیم رسانه جدید"}
footer={ footer={
<> <>
<Button variant="secondary" onClick={() => setOpen(false)}> <Button variant="secondary" onClick={() => setOpen(false)}>
@@ -295,15 +329,17 @@ export default function MediaDeepLinksPage() {
onSubmit={save} onSubmit={save}
className="flex flex-col gap-4" className="flex flex-col gap-4"
> >
<Field label="منبع رسانه" required> {!editing && (
<Select <Field label="منبع رسانه" required>
value={source} <Select
onChange={(e) => setSource(e.target.value as "new" | "existing")} value={source}
> onChange={(e) => setSource(e.target.value as "new" | "existing")}
<option value="new">بارگذاری رسانه جدید</option> >
<option value="existing">استفاده از رسانه موجود</option> <option value="new">بارگذاری رسانه جدید</option>
</Select> <option value="existing">استفاده از رسانه موجود</option>
</Field> </Select>
</Field>
)}
{source === "existing" ? ( {source === "existing" ? (
<Field label="انتخاب رسانه" required> <Field label="انتخاب رسانه" required>
@@ -348,6 +384,7 @@ export default function MediaDeepLinksPage() {
onPickId={setImageId} onPickId={setImageId}
file={imageFile} file={imageFile}
onPickFile={setImageFile} onPickFile={setImageFile}
existingUrl={editing ? pickUrl(editing, IMAGE_KEYS) : null}
/> />
</Field> </Field>
@@ -358,7 +395,10 @@ export default function MediaDeepLinksPage() {
</Select> </Select>
</Field> </Field>
<Field label="فایل" hint="بارگذاری فایل یا وارد کردن لینک خارجی"> <Field
label={editing ? "فایل (در صورت تغییر)" : "فایل"}
hint="بارگذاری فایل یا وارد کردن لینک خارجی"
>
<Input <Input
type="file" type="file"
accept="audio/*,video/*" accept="audio/*,video/*"
@@ -392,8 +432,18 @@ export default function MediaDeepLinksPage() {
)} )}
<p className="rounded-xl border border-border bg-surface-muted p-3 text-xs text-muted"> <p className="rounded-xl border border-border bg-surface-muted p-3 text-xs text-muted">
پس از ذخیره، این رسانه در فهرست «رسانهها» نمایش داده نمیشود و فقط با لینک {editing ? (
مستقیم قابل دسترسی است. <>
این رسانه در فهرست «رسانهها» نمایش داده نمیشود و فقط با لینک مستقیم
قابل دسترسی است. برای بازگرداندن آن به فهرست، از دکمه «نمایش در فهرست»
استفاده کنید.
</>
) : (
<>
پس از ذخیره، این رسانه در فهرست «رسانهها» نمایش داده نمیشود و فقط با
لینک مستقیم قابل دسترسی است.
</>
)}
</p> </p>
</form> </form>
</Modal> </Modal>
+82 -8
View File
@@ -17,7 +17,7 @@ import {
PageHeader, PageHeader,
Badge, Badge,
} from "@/components/ui"; } from "@/components/ui";
import { EditIcon, PlusIcon, TrashIcon } from "@/components/icons"; import { EditIcon, EyeIcon, PlusIcon, TrashIcon } from "@/components/icons";
import { formatMinutes, fileNameToTitle } from "@/lib/utils"; import { formatMinutes, fileNameToTitle } from "@/lib/utils";
import { MediaPreview } from "@/components/MediaPreview"; import { MediaPreview } from "@/components/MediaPreview";
import { ImagePicker } from "@/components/ImagePicker"; import { ImagePicker } from "@/components/ImagePicker";
@@ -42,6 +42,8 @@ interface Media {
duration?: number; duration?: number;
visibility?: string; visibility?: string;
is_premium?: boolean; is_premium?: boolean;
is_deeplink_only?: boolean;
deep_link?: string | null;
external_url?: string | null; external_url?: string | null;
image_id?: number | null; image_id?: number | null;
image?: unknown; image?: unknown;
@@ -86,7 +88,13 @@ function ChipMultiSelect({
export default function MediaPage() { export default function MediaPage() {
const [search, setSearch] = useState(""); const [search, setSearch] = useState("");
const { data, loading, error, reload } = useList<Media>("/media", { search }); // Deep-link-only media is hidden from the normal listing, so it needs its own
// view here — otherwise media sent to deep links disappears from this page.
const [showDeepLinks, setShowDeepLinks] = useState(false);
const { data, loading, error, reload } = useList<Media>(
"/media",
showDeepLinks ? { deeplink_only: 1 } : { search },
);
const { data: categories } = useList<Category>("/categories", { const { data: categories } = useList<Category>("/categories", {
type: "media", type: "media",
}); });
@@ -203,6 +211,24 @@ export default function MediaPage() {
} }
} }
// Move a media into or out of deep-link-only mode, both directions.
async function toggleDeepLink(row: Media) {
try {
await apiFetch(`/media/${row.id}`, {
method: "POST",
body: toFormData({ is_deeplink_only: row.is_deeplink_only ? 0 : 1 }),
});
toast.success(
row.is_deeplink_only
? "به فهرست عادی بازگشت."
: "به لینک مستقیم تبدیل شد.",
);
reload();
} catch (err) {
toast.error(err instanceof ApiError ? err.message : "خطا در ذخیره‌سازی");
}
}
async function confirmDelete() { async function confirmDelete() {
if (!deleting) return; if (!deleting) return;
setRemoving(true); setRemoving(true);
@@ -258,6 +284,25 @@ export default function MediaPage() {
header: "مدت", header: "مدت",
render: (r) => formatMinutes(r.duration), render: (r) => formatMinutes(r.duration),
}, },
{
key: "deep_link",
header: "لینک مستقیم",
className: "w-56",
render: (r) =>
r.is_deeplink_only ? (
<a
href={r.deep_link ?? undefined}
target="_blank"
rel="noreferrer"
dir="ltr"
className="inline-block max-w-[200px] truncate text-xs text-primary underline"
>
{r.deep_link ?? "—"}
</a>
) : (
<span className="text-xs text-muted">—</span>
),
},
{ {
key: "is_premium", key: "is_premium",
header: "ویژه", header: "ویژه",
@@ -282,11 +327,19 @@ export default function MediaPage() {
} }
/> />
<div className="mb-4 max-w-sm"> <div className="mb-4 flex items-center gap-4">
<Input <div className="max-w-sm flex-1">
value={search} <Input
onChange={(e) => setSearch(e.target.value)} value={search}
placeholder="جستجو در رسانه‌ها..." onChange={(e) => setSearch(e.target.value)}
placeholder="جستجو در رسانه‌ها..."
disabled={showDeepLinks}
/>
</div>
<Switch
checked={showDeepLinks}
onChange={setShowDeepLinks}
label="فقط لینک‌های مستقیم"
/> />
</div> </div>
@@ -296,7 +349,11 @@ export default function MediaPage() {
loading={loading} loading={loading}
error={error} error={error}
onRetry={reload} onRetry={reload}
emptyMessage="هنوز رسانه‌ای اضافه نکرده‌اید. اولین رسانه را بارگذاری کنید." emptyMessage={
showDeepLinks
? "هیچ رسانه لینک مستقیمی وجود ندارد."
: "هنوز رسانه‌ای اضافه نکرده‌اید. اولین رسانه را بارگذاری کنید."
}
emptyAction={ emptyAction={
<Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}> <Button icon={<PlusIcon className="h-4 w-4" />} onClick={openCreate}>
رسانه جدید رسانه جدید
@@ -307,6 +364,23 @@ export default function MediaPage() {
<Button variant="ghost" onClick={() => openEdit(row)} aria-label="ویرایش"> <Button variant="ghost" onClick={() => openEdit(row)} aria-label="ویرایش">
<EditIcon className="h-4 w-4" /> <EditIcon className="h-4 w-4" />
</Button> </Button>
<Button
variant="ghost"
onClick={() => toggleDeepLink(row)}
aria-label={
row.is_deeplink_only
? "بازگرداندن به فهرست"
: "تبدیل به لینک مستقیم"
}
title={
row.is_deeplink_only
? "بازگرداندن به فهرست"
: "تبدیل به لینک مستقیم"
}
className={row.is_deeplink_only ? "text-primary" : undefined}
>
<EyeIcon className="h-4 w-4" />
</Button>
<Button <Button
variant="ghost" variant="ghost"
onClick={() => setDeleting(row)} onClick={() => setDeleting(row)}