twotalesanimation
816 lines
28 KiB
TypeScript
816 lines
28 KiB
TypeScript
'use client';
|
|
|
|
import React, { useEffect, useState } from 'react';
|
|
import { SidebarProvider, SidebarInset } from '@/components/ui/sidebar';
|
|
import { AppSidebar } from '@/components/app-sidebar';
|
|
import { Badge } from '@/components/ui/badge';
|
|
import { SiteHeader } from '@/components/site-header';
|
|
import { useRouter } from 'next/navigation';
|
|
import { toast } from 'sonner';
|
|
import { Progress } from '@/components/ui/progress';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@/components/ui/card';
|
|
import {
|
|
Field,
|
|
FieldGroup,
|
|
FieldLabel,
|
|
FieldDescription,
|
|
} from '@/components/ui/field';
|
|
import {
|
|
Select,
|
|
SelectContent,
|
|
SelectItem,
|
|
SelectTrigger,
|
|
SelectValue,
|
|
} from '@/components/ui/select';
|
|
import { Input } from '@/components/ui/input';
|
|
import { Button } from '@/components/ui/button';
|
|
import {
|
|
Table,
|
|
TableBody,
|
|
TableCell,
|
|
TableHead,
|
|
TableHeader,
|
|
TableRow,
|
|
} from '@/components/ui/table';
|
|
import {
|
|
AlertDialog,
|
|
AlertDialogAction,
|
|
AlertDialogCancel,
|
|
AlertDialogContent,
|
|
AlertDialogDescription,
|
|
AlertDialogHeader,
|
|
AlertDialogTitle,
|
|
AlertDialogTrigger,
|
|
} from '@/components/ui/alert-dialog';
|
|
import { Trash2Icon, Edit, Check, X } from 'lucide-react';
|
|
import { Switch } from '@/components/ui/switch';
|
|
import { getVideoDuration } from '@/utils/getVideoDuration';
|
|
|
|
type Course = { id: string; title: string; code?: string };
|
|
type Playlist = { id: string; title: string; courseId: string };
|
|
type Video = {
|
|
id: string;
|
|
title: string;
|
|
durationSec?: number;
|
|
thumbnail?: string;
|
|
url: string;
|
|
index: number;
|
|
locked: boolean;
|
|
instantAccess: boolean;
|
|
playlistId: string;
|
|
playlist: {
|
|
id: string;
|
|
title: string;
|
|
course: {
|
|
id: string;
|
|
title: string;
|
|
};
|
|
};
|
|
restrictedCourseIds?: string[];
|
|
};
|
|
|
|
function VideosUI() {
|
|
const router = useRouter();
|
|
const [courses, setCourses] = useState<Course[]>([]);
|
|
const [playlists, setPlaylists] = useState<Playlist[]>([]);
|
|
const [videos, setVideos] = useState<Video[]>([]);
|
|
const [loading, setLoading] = useState(false);
|
|
const [uploadProgress, setUploadProgress] = useState<number | null>(null);
|
|
|
|
// form state
|
|
const [videoTitle, setVideoTitle] = useState('');
|
|
const [videoFile, setVideoFile] = useState<File | null>(null);
|
|
const [videoPlaylistId, setVideoPlaylistId] = useState('');
|
|
const [thumbFile, setThumbFile] = useState<File | null>(null);
|
|
const [videoDurationSec, setVideoDurationSec] = useState<number | null>(null);
|
|
const [deletingId, setDeletingId] = useState<string | null>(null);
|
|
const [togglingId, setTogglingId] = useState<string | null>(null);
|
|
const [editingId, setEditingId] = useState<string | null>(null);
|
|
const [editingTitle, setEditingTitle] = useState('');
|
|
const [savingEditId, setSavingEditId] = useState<string | null>(null);
|
|
|
|
// Manual file copy mode
|
|
const [useManualFileCopy, setUseManualFileCopy] = useState(false);
|
|
const [pendingVideoId, setPendingVideoId] = useState<string | null>(null);
|
|
const [finalizingVideoId, setFinalizingVideoId] = useState<string | null>(null);
|
|
|
|
useEffect(() => {
|
|
fetchData();
|
|
}, []);
|
|
|
|
async function toggleInstantAccess(videoId: string, currentValue: boolean) {
|
|
setTogglingId(videoId);
|
|
try {
|
|
const res = await fetch(`/api/admin/videos/${videoId}/instant-access`, {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ instantAccess: !currentValue }),
|
|
});
|
|
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
// Update the video in state
|
|
setVideos((prev) =>
|
|
prev.map((v) =>
|
|
v.id === videoId ? { ...v, instantAccess: data.video.instantAccess } : v
|
|
)
|
|
);
|
|
toast.success(`Video ${!currentValue ? 'set to' : 'removed from'} instant access`);
|
|
} else {
|
|
toast.error('Failed to toggle instant access');
|
|
}
|
|
} catch (err) {
|
|
console.error('Error toggling instant access:', err);
|
|
toast.error('Error toggling instant access');
|
|
} finally {
|
|
setTogglingId(null);
|
|
}
|
|
}
|
|
|
|
async function toggleLocked(videoId: string, currentValue: boolean) {
|
|
setTogglingId(videoId);
|
|
try {
|
|
const res = await fetch(`/api/admin/videos/${videoId}/locked`, {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ locked: !currentValue }),
|
|
});
|
|
|
|
if (res.ok) {
|
|
const data = await res.json();
|
|
// Update the video in state
|
|
setVideos((prev) =>
|
|
prev.map((v) =>
|
|
v.id === videoId ? { ...v, locked: data.video.locked } : v
|
|
)
|
|
);
|
|
toast.success(`Video ${!currentValue ? 'locked' : 'unlocked'}`);
|
|
} else {
|
|
toast.error('Failed to toggle lock status');
|
|
}
|
|
} catch (err) {
|
|
console.error('Error toggling locked:', err);
|
|
toast.error('Error toggling lock status');
|
|
} finally {
|
|
setTogglingId(null);
|
|
}
|
|
}
|
|
|
|
async function fetchData() {
|
|
try {
|
|
const [metaRes, videosRes] = await Promise.all([
|
|
fetch('/api/admin/meta'),
|
|
fetch('/api/admin/videos'),
|
|
]);
|
|
|
|
if (metaRes.ok) {
|
|
const json = await metaRes.json();
|
|
setCourses(json.courses || []);
|
|
setPlaylists(json.playlists || []);
|
|
if (!videoPlaylistId && json.playlists?.[0]) {
|
|
setVideoPlaylistId(json.playlists[0].id);
|
|
}
|
|
}
|
|
|
|
if (videosRes.ok) {
|
|
const json = await videosRes.json();
|
|
// Ensure data is serialized properly
|
|
setVideos(json.map((v: any) => ({
|
|
id: v.id,
|
|
title: v.title,
|
|
durationSec: v.durationSec,
|
|
thumbnail: v.thumbnail,
|
|
url: v.url,
|
|
index: v.index,
|
|
locked: v.locked,
|
|
instantAccess: v.instantAccess,
|
|
playlistId: v.playlistId,
|
|
playlist: {
|
|
id: v.playlist.id,
|
|
title: v.playlist.title,
|
|
course: {
|
|
id: v.playlist.course.id,
|
|
title: v.playlist.course.title,
|
|
},
|
|
},
|
|
restrictedCourseIds: (v.videoCourses ?? [])
|
|
.filter((assignment: any) => assignment.exclusive)
|
|
.map((assignment: any) => assignment.courseId),
|
|
})));
|
|
}
|
|
} catch (err) {
|
|
console.error('Failed to fetch data', err);
|
|
toast.error('Failed to fetch data');
|
|
}
|
|
}
|
|
|
|
async function handleFileChange(e: React.ChangeEvent<HTMLInputElement>) {
|
|
const f = e.target.files?.[0] ?? null;
|
|
setVideoFile(f);
|
|
setVideoDurationSec(null);
|
|
if (!f) return;
|
|
try {
|
|
const secs = await getVideoDuration(f);
|
|
setVideoDurationSec(secs);
|
|
toast.success(`Duration: ${secs}s`);
|
|
} catch (err) {
|
|
console.warn('duration read failed', err);
|
|
toast.error('Could not read duration (server will measure)');
|
|
}
|
|
}
|
|
|
|
async function uploadVideo(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
if (!videoPlaylistId) {
|
|
toast.error('Select a playlist');
|
|
return;
|
|
}
|
|
|
|
// Manual file copy mode
|
|
if (useManualFileCopy) {
|
|
if (!videoFile) {
|
|
toast.error('Select a file to get the filename');
|
|
return;
|
|
}
|
|
// Create video entry without uploading the actual file
|
|
setLoading(true);
|
|
try {
|
|
const form = new FormData();
|
|
form.append('title', videoTitle);
|
|
form.append('playlistId', videoPlaylistId);
|
|
form.append('manualFileCopy', 'true'); // Flag to skip file upload
|
|
if (videoDurationSec) form.append('durationSec', String(videoDurationSec));
|
|
if (thumbFile) form.append('thumbnail', thumbFile);
|
|
|
|
const res = await fetch('/api/admin/upload', {
|
|
method: 'POST',
|
|
body: form,
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
if (!res.ok) {
|
|
toast.error(data.error ?? 'Upload failed');
|
|
return;
|
|
}
|
|
|
|
// Show modal with the video ID
|
|
setPendingVideoId(data.video.id);
|
|
toast.success(`Video created! Copy file as: ${data.video.id}.mp4`);
|
|
} catch (err: any) {
|
|
console.error('upload error', err);
|
|
toast.error(String(err?.message ?? 'Upload failed'));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
return;
|
|
}
|
|
|
|
// Normal upload mode
|
|
if (!videoFile) {
|
|
toast.error('Pick a file first');
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
setUploadProgress(0);
|
|
|
|
try {
|
|
const form = new FormData();
|
|
form.append('file', videoFile);
|
|
form.append('title', videoTitle);
|
|
form.append('playlistId', videoPlaylistId);
|
|
if (videoDurationSec) form.append('durationSec', String(videoDurationSec));
|
|
if (thumbFile) form.append('thumbnail', thumbFile);
|
|
|
|
await new Promise<void>((resolve, reject) => {
|
|
const xhr = new XMLHttpRequest();
|
|
xhr.open('POST', '/api/admin/upload');
|
|
|
|
xhr.upload.onprogress = (ev) => {
|
|
if (ev.lengthComputable) {
|
|
const pct = Math.round((ev.loaded / ev.total) * 100);
|
|
setUploadProgress(pct);
|
|
}
|
|
};
|
|
|
|
xhr.onload = async () => {
|
|
let body: any = null;
|
|
try {
|
|
body = xhr.responseText ? JSON.parse(xhr.responseText) : null;
|
|
} catch (err) {
|
|
body = { error: xhr.responseText };
|
|
}
|
|
|
|
if (xhr.status >= 200 && xhr.status < 300) {
|
|
toast.success('Upload complete');
|
|
setUploadProgress(null);
|
|
setVideoFile(null);
|
|
setVideoTitle('');
|
|
setVideoDurationSec(null);
|
|
setThumbFile(null);
|
|
await fetchData();
|
|
router.refresh();
|
|
resolve();
|
|
} else {
|
|
const errMsg = body?.error ?? `Upload failed (${xhr.status})`;
|
|
toast.error(errMsg);
|
|
setUploadProgress(null);
|
|
reject(new Error(errMsg));
|
|
}
|
|
};
|
|
|
|
xhr.onerror = () => {
|
|
toast.error('Upload failed (network)');
|
|
setUploadProgress(null);
|
|
reject(new Error('network error'));
|
|
};
|
|
|
|
// Timeout for 2GB uploads over Tailscale: 50 minutes
|
|
xhr.timeout = 50 * 60 * 1000;
|
|
xhr.ontimeout = () => {
|
|
toast.error('Upload timed out');
|
|
setUploadProgress(null);
|
|
reject(new Error('timeout'));
|
|
};
|
|
|
|
xhr.send(form);
|
|
});
|
|
} catch (err: any) {
|
|
console.error('upload error', err);
|
|
if (!uploadProgress) setUploadProgress(null);
|
|
toast.error(String(err?.message ?? 'Upload failed'));
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
}
|
|
|
|
async function finalizeManualUpload(videoId: string) {
|
|
setFinalizingVideoId(videoId);
|
|
try {
|
|
const res = await fetch('/api/admin/upload/finalize', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ videoId }),
|
|
});
|
|
|
|
const data = await res.json();
|
|
|
|
if (!res.ok) {
|
|
toast.error(data.error ?? 'Finalization failed');
|
|
return;
|
|
}
|
|
|
|
toast.success(`Video finalized! ${data.message}`);
|
|
setPendingVideoId(null);
|
|
setVideoFile(null);
|
|
setVideoTitle('');
|
|
setVideoDurationSec(null);
|
|
setThumbFile(null);
|
|
setUseManualFileCopy(false);
|
|
await fetchData();
|
|
router.refresh();
|
|
} catch (err: any) {
|
|
console.error('finalize error', err);
|
|
toast.error(String(err?.message ?? 'Finalization failed'));
|
|
} finally {
|
|
setFinalizingVideoId(null);
|
|
}
|
|
}
|
|
|
|
async function deleteVideo(videoId: string) {
|
|
setDeletingId(videoId);
|
|
try {
|
|
const res = await fetch(`/api/admin/delete-video`, {
|
|
method: 'DELETE',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ videoId }),
|
|
});
|
|
if (res.ok) {
|
|
toast.success('Video deleted');
|
|
await fetchData();
|
|
router.refresh();
|
|
} else {
|
|
const txt = await res.text();
|
|
toast.error('Failed to delete video: ' + txt);
|
|
}
|
|
} catch (err: any) {
|
|
toast.error('Error: ' + String(err.message ?? err));
|
|
} finally {
|
|
setDeletingId(null);
|
|
}
|
|
}
|
|
|
|
async function updateVideoTitle(videoId: string, newTitle: string) {
|
|
if (!newTitle.trim()) {
|
|
toast.error('Title cannot be empty');
|
|
return;
|
|
}
|
|
|
|
setSavingEditId(videoId);
|
|
try {
|
|
const res = await fetch(`/api/admin/update-video`, {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ videoId, title: newTitle }),
|
|
});
|
|
if (res.ok) {
|
|
toast.success('Video updated');
|
|
setEditingId(null);
|
|
setEditingTitle('');
|
|
await fetchData();
|
|
router.refresh();
|
|
} else {
|
|
const txt = await res.text();
|
|
toast.error('Failed to update video: ' + txt);
|
|
}
|
|
} catch (err: any) {
|
|
toast.error('Error: ' + String(err.message ?? err));
|
|
} finally {
|
|
setSavingEditId(null);
|
|
}
|
|
}
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6 py-4 md:gap-6 md:py-6 px-4 lg:px-16">
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Upload Video</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<form onSubmit={uploadVideo}>
|
|
<FieldGroup>
|
|
<Field>
|
|
<FieldLabel htmlFor="videoTitle">Video title</FieldLabel>
|
|
<FieldDescription>Title shown in the playlist.</FieldDescription>
|
|
<Input
|
|
id="videoTitle"
|
|
required
|
|
value={videoTitle}
|
|
onChange={(e) => setVideoTitle(e.target.value)}
|
|
placeholder="e.g. Lesson 1 — Intro to the Rig"
|
|
/>
|
|
</Field>
|
|
|
|
<Field>
|
|
<div className="flex items-center gap-3">
|
|
<Switch
|
|
id="manualFileCopy"
|
|
checked={useManualFileCopy}
|
|
onCheckedChange={setUseManualFileCopy}
|
|
/>
|
|
<label htmlFor="manualFileCopy" className="text-sm cursor-pointer">
|
|
Manual file copy mode
|
|
</label>
|
|
</div>
|
|
<FieldDescription>
|
|
{useManualFileCopy
|
|
? 'Creates DB entry and thumbnail. You will copy the file manually to the server.'
|
|
: 'Upload file directly from browser.'}
|
|
</FieldDescription>
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel htmlFor="videoPlaylist">Playlist</FieldLabel>
|
|
<FieldDescription>
|
|
Select which playlist this video belongs to.
|
|
</FieldDescription>
|
|
|
|
<Select
|
|
value={videoPlaylistId}
|
|
onValueChange={(val) => setVideoPlaylistId(val)}
|
|
>
|
|
<SelectTrigger aria-label="Choose playlist">
|
|
<SelectValue placeholder="Select playlist" />
|
|
</SelectTrigger>
|
|
<SelectContent>
|
|
{playlists.map((p) => (
|
|
<SelectItem key={p.id} value={p.id}>
|
|
{p.title}
|
|
</SelectItem>
|
|
))}
|
|
</SelectContent>
|
|
</Select>
|
|
</Field>
|
|
|
|
<Field>
|
|
<FieldLabel htmlFor="videoFile">Video file</FieldLabel>
|
|
<FieldDescription>
|
|
{useManualFileCopy
|
|
? 'Select the file to get its name, then copy manually to: /uploads/videos/{videoId}.mp4'
|
|
: 'Large files will be uploaded to the server.'}
|
|
</FieldDescription>
|
|
<div className="grid w-full max-w-sm items-center gap-3">
|
|
<Input
|
|
id="videoFile"
|
|
type="file"
|
|
accept="video/*"
|
|
onChange={handleFileChange}
|
|
className="block w-full text-sm"
|
|
required={!useManualFileCopy}
|
|
/>
|
|
{videoDurationSec ? (
|
|
<div className="text-sm text-muted-foreground">
|
|
Duration: {videoDurationSec}s
|
|
</div>
|
|
) : null}
|
|
|
|
{uploadProgress !== null && !useManualFileCopy ? (
|
|
<div className="w-full">
|
|
<div className="flex items-center justify-between mb-1">
|
|
<div className="text-sm">Uploading</div>
|
|
<div className="text-xs text-muted-foreground">
|
|
{uploadProgress}%
|
|
</div>
|
|
</div>
|
|
<Progress value={uploadProgress} />
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
</Field>
|
|
<Field>
|
|
<FieldLabel htmlFor="thumbFile">Thumbnail</FieldLabel>
|
|
<div className="grid w-full max-w-sm items-center gap-3">
|
|
<Input
|
|
id="thumbFile"
|
|
type="file"
|
|
accept="image/*"
|
|
onChange={(e) => setThumbFile(e.target.files?.[0] ?? null)}
|
|
className="block w-full text-sm"
|
|
/>
|
|
|
|
{thumbFile ? (
|
|
<img
|
|
src={URL.createObjectURL(thumbFile)}
|
|
className="w-32 h-20 rounded object-cover border mt-2"
|
|
/>
|
|
) : null}
|
|
</div>
|
|
</Field>
|
|
|
|
<Field>
|
|
<Button
|
|
type="submit"
|
|
disabled={loading || (!useManualFileCopy && !videoFile) || !videoPlaylistId}
|
|
>
|
|
{loading
|
|
? useManualFileCopy
|
|
? 'Creating…'
|
|
: 'Uploading…'
|
|
: useManualFileCopy
|
|
? 'Create & Setup Manual Copy'
|
|
: 'Upload video'}
|
|
</Button>
|
|
</Field>
|
|
</FieldGroup>
|
|
</form>
|
|
</CardContent>
|
|
</Card>
|
|
|
|
{/* Manual file copy modal */}
|
|
{pendingVideoId && (
|
|
<Card className="border-blue-200 bg-blue-50">
|
|
<CardHeader>
|
|
<CardTitle className="text-blue-900">File Ready for Manual Copy</CardTitle>
|
|
</CardHeader>
|
|
<CardContent className="space-y-4">
|
|
<div className="bg-white p-4 rounded border border-blue-200">
|
|
<p className="text-sm text-muted-foreground mb-2">
|
|
Copy your video file to the following location on your server:
|
|
</p>
|
|
<code className="block bg-muted p-3 rounded text-sm font-mono mb-2">
|
|
/uploads/videos/{pendingVideoId}.mp4
|
|
</code>
|
|
<p className="text-sm text-muted-foreground">
|
|
The file must be named exactly as shown above (using the video ID).
|
|
</p>
|
|
</div>
|
|
|
|
<Button
|
|
onClick={() => finalizeManualUpload(pendingVideoId)}
|
|
disabled={finalizingVideoId !== null}
|
|
className="w-full"
|
|
>
|
|
{finalizingVideoId ? 'Checking file…' : 'I have placed the file'}
|
|
</Button>
|
|
<Button
|
|
variant="outline"
|
|
onClick={() => setPendingVideoId(null)}
|
|
disabled={finalizingVideoId !== null}
|
|
className="w-full"
|
|
>
|
|
Cancel
|
|
</Button>
|
|
</CardContent>
|
|
</Card>
|
|
)}
|
|
|
|
<Card>
|
|
<CardHeader>
|
|
<CardTitle>Videos</CardTitle>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{videos.length === 0 ? (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
No videos yet
|
|
</div>
|
|
) : (
|
|
<div className="overflow-x-auto">
|
|
<Table>
|
|
<TableHeader>
|
|
<TableRow>
|
|
<TableHead>Thumbnail</TableHead>
|
|
<TableHead>Title</TableHead>
|
|
<TableHead>Playlist</TableHead>
|
|
<TableHead>Course</TableHead>
|
|
<TableHead className="text-center">Locked</TableHead>
|
|
<TableHead className="text-center">Instant Access</TableHead>
|
|
<TableHead className="text-right">Actions</TableHead>
|
|
</TableRow>
|
|
</TableHeader>
|
|
<TableBody>
|
|
{videos.map((video) => (
|
|
<TableRow key={video.id}>
|
|
<TableCell>
|
|
{video.thumbnail ? (
|
|
<img
|
|
src={video.thumbnail}
|
|
alt={video.title}
|
|
className="w-16 h-9 object-cover rounded text-xs"
|
|
/>
|
|
) : (
|
|
<div className="w-16 h-9 bg-muted rounded flex items-center justify-center">
|
|
<span className="text-xs text-muted-foreground">
|
|
No image
|
|
</span>
|
|
</div>
|
|
)}
|
|
</TableCell>
|
|
<TableCell className="font-medium max-w-xs">
|
|
{editingId === video.id ? (
|
|
<div className="flex gap-2 items-center">
|
|
<Input
|
|
value={editingTitle}
|
|
onChange={(e) => setEditingTitle(e.target.value)}
|
|
className="h-8"
|
|
autoFocus
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter') {
|
|
updateVideoTitle(video.id, editingTitle);
|
|
}
|
|
if (e.key === 'Escape') {
|
|
setEditingId(null);
|
|
setEditingTitle('');
|
|
}
|
|
}}
|
|
/>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => updateVideoTitle(video.id, editingTitle)}
|
|
disabled={savingEditId === video.id}
|
|
>
|
|
<Check className="w-4 h-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
setEditingId(null);
|
|
setEditingTitle('');
|
|
}}
|
|
disabled={savingEditId === video.id}
|
|
>
|
|
<X className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
) : (
|
|
<div className="flex flex-col gap-1">
|
|
<div className="flex gap-2 items-center">
|
|
<span className="truncate">{video.title}</span>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => {
|
|
setEditingId(video.id);
|
|
setEditingTitle(video.title);
|
|
}}
|
|
>
|
|
<Edit className="w-4 h-4" />
|
|
</Button>
|
|
</div>
|
|
{video.restrictedCourseIds?.length ? (
|
|
<div className="flex flex-wrap gap-1">
|
|
{video.restrictedCourseIds.map((courseId) => {
|
|
const course = courses.find((c) => c.id === courseId);
|
|
const label = course?.code ?? course?.title ?? 'Course';
|
|
return (
|
|
<Badge
|
|
key={`${video.id}-${courseId}`}
|
|
variant="secondary"
|
|
>
|
|
{label}
|
|
</Badge>
|
|
);
|
|
})}
|
|
</div>
|
|
) : null}
|
|
</div>
|
|
)}
|
|
</TableCell>
|
|
<TableCell>{video.playlist.title}</TableCell>
|
|
<TableCell>{video.playlist.course.title}</TableCell>
|
|
<TableCell className="text-center">
|
|
<Switch
|
|
checked={video.locked}
|
|
onCheckedChange={() => toggleLocked(video.id, video.locked)}
|
|
disabled={togglingId === video.id}
|
|
aria-label="Toggle lock status"
|
|
/>
|
|
</TableCell>
|
|
<TableCell className="text-center">
|
|
<Switch
|
|
checked={video.instantAccess}
|
|
onCheckedChange={() => toggleInstantAccess(video.id, video.instantAccess)}
|
|
disabled={togglingId === video.id}
|
|
aria-label="Toggle instant access"
|
|
/>
|
|
</TableCell>
|
|
<TableCell className="text-right">
|
|
<div className="flex gap-1 justify-end">
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => router.push(`/admin/videos/${video.id}/edit`)}
|
|
>
|
|
<Edit className="w-4 h-4" />
|
|
</Button>
|
|
<AlertDialog>
|
|
<AlertDialogTrigger asChild>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
disabled={deletingId === video.id}
|
|
>
|
|
<Trash2Icon className="w-4 h-4" />
|
|
</Button>
|
|
</AlertDialogTrigger>
|
|
<AlertDialogContent>
|
|
<AlertDialogHeader>
|
|
<AlertDialogTitle>Delete Video</AlertDialogTitle>
|
|
<AlertDialogDescription>
|
|
Are you sure you want to delete "{video.title}"?
|
|
</AlertDialogDescription>
|
|
</AlertDialogHeader>
|
|
<div className="flex gap-2 justify-end">
|
|
<AlertDialogCancel>Cancel</AlertDialogCancel>
|
|
<AlertDialogAction
|
|
onClick={() => deleteVideo(video.id)}
|
|
>
|
|
Delete
|
|
</AlertDialogAction>
|
|
</div>
|
|
</AlertDialogContent>
|
|
</AlertDialog>
|
|
</div>
|
|
</TableCell>
|
|
</TableRow>
|
|
))}
|
|
</TableBody>
|
|
</Table>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default function VideosAdminClient() {
|
|
return (
|
|
<SidebarProvider
|
|
style={
|
|
{
|
|
'--sidebar-width': 'calc(var(--spacing) * 72)',
|
|
'--header-height': 'calc(var(--spacing) * 12)',
|
|
} as React.CSSProperties
|
|
}
|
|
>
|
|
<AppSidebar variant="inset" />
|
|
<SidebarInset>
|
|
<SiteHeader />
|
|
<div className="flex flex-1 flex-col">
|
|
<div className="@container/main flex flex-1 flex-col gap-2">
|
|
<VideosUI />
|
|
</div>
|
|
</div>
|
|
</SidebarInset>
|
|
</SidebarProvider>
|
|
);
|
|
}
|