1077 lines
47 KiB
TypeScript
1077 lines
47 KiB
TypeScript
import { useEffect, useState } from "react"
|
||
import { Link, useParams, useNavigate } from "react-router-dom"
|
||
import { ArrowLeft, Plus, FileText, Layers, Edit, Trash2, X, Video, MoreVertical, Play } from "lucide-react"
|
||
import spinnerSrc from "../../assets/Circular-indeterminate progress indicator.svg"
|
||
import { Card } from "../../components/ui/card"
|
||
import alertSrc from "../../assets/Alert.svg"
|
||
import { Badge } from "../../components/ui/badge"
|
||
import { Button } from "../../components/ui/button"
|
||
import { Input } from "../../components/ui/input"
|
||
import {
|
||
getSubModulesByCourse,
|
||
getQuestionSetsByOwner,
|
||
getVideosBySubModule,
|
||
updatePractice,
|
||
deleteQuestionSet,
|
||
createCourseVideo,
|
||
updateSubCourseVideo,
|
||
deleteSubCourseVideo,
|
||
getVimeoSample,
|
||
} from "../../api/courses.api"
|
||
import { uploadVideoFile } from "../../api/files.api"
|
||
import type {
|
||
SubCourse,
|
||
QuestionSet,
|
||
SubCourseVideo,
|
||
VimeoSampleVideo,
|
||
VideoStatus,
|
||
VideoVisibility,
|
||
} from "../../types/course.types"
|
||
import { SpinnerIcon } from "../../components/ui/spinner-icon"
|
||
|
||
type TabType = "lesson" | "practice"
|
||
type StatusFilter = "all" | "published" | "draft" | "archived"
|
||
|
||
/** Human Language–only sub-module editor: lesson (videos) + practice tabs; not used by general course flows. */
|
||
export function HumanLanguageSubModulePage() {
|
||
const { categoryId, courseId, subModuleId } = useParams<{
|
||
categoryId: string
|
||
courseId: string
|
||
subModuleId: string
|
||
}>()
|
||
const navigate = useNavigate()
|
||
|
||
const [subCourse, setSubCourse] = useState<SubCourse | null>(null)
|
||
const [loading, setLoading] = useState(true)
|
||
const [error, setError] = useState<string | null>(null)
|
||
|
||
const [activeTab, setActiveTab] = useState<TabType>("lesson")
|
||
const [statusFilter] = useState<StatusFilter>("all")
|
||
|
||
const [practices, setPractices] = useState<QuestionSet[]>([])
|
||
const [videos, setVideos] = useState<SubCourseVideo[]>([])
|
||
const [practicesLoading, setPracticesLoading] = useState(false)
|
||
const [videosLoading, setVideosLoading] = useState(false)
|
||
|
||
const [showEditPracticeModal, setShowEditPracticeModal] = useState(false)
|
||
const [practiceToEdit, setPracticeToEdit] = useState<QuestionSet | null>(null)
|
||
const [showDeleteModal, setShowDeleteModal] = useState(false)
|
||
const [practiceToDelete, setPracticeToDelete] = useState<QuestionSet | null>(null)
|
||
const [deleting, setDeleting] = useState(false)
|
||
|
||
const [title, setTitle] = useState("")
|
||
const [description, setDescription] = useState("")
|
||
const [persona, setPersona] = useState("")
|
||
const [saving, setSaving] = useState(false)
|
||
const [saveError, setSaveError] = useState<string | null>(null)
|
||
|
||
const [showAddVideoModal, setShowAddVideoModal] = useState(false)
|
||
const [showEditVideoModal, setShowEditVideoModal] = useState(false)
|
||
const [videoToEdit, setVideoToEdit] = useState<SubCourseVideo | null>(null)
|
||
const [showDeleteVideoModal, setShowDeleteVideoModal] = useState(false)
|
||
const [videoToDelete, setVideoToDelete] = useState<SubCourseVideo | null>(null)
|
||
const [deletingVideo, setDeletingVideo] = useState(false)
|
||
const [openVideoMenuId, setOpenVideoMenuId] = useState<number | null>(null)
|
||
|
||
const [videoTitle, setVideoTitle] = useState("")
|
||
const [videoDescription, setVideoDescription] = useState("")
|
||
const [videoUrl, setVideoUrl] = useState("")
|
||
const [videoFile, setVideoFile] = useState<File | null>(null)
|
||
const [videoFileSize, setVideoFileSize] = useState<number>(0)
|
||
const [videoDuration, setVideoDuration] = useState<number>(0)
|
||
const [videoResolution, setVideoResolution] = useState("1080p")
|
||
const [videoVisibility, setVideoVisibility] = useState<VideoVisibility>("PUBLISHED")
|
||
const [videoStatus, setVideoStatus] = useState<VideoStatus>("PUBLISHED")
|
||
const [videoDisplayOrder, setVideoDisplayOrder] = useState<number>(1)
|
||
|
||
// Vimeo preview state
|
||
const [showPreviewModal, setShowPreviewModal] = useState(false)
|
||
const [previewIframe, setPreviewIframe] = useState("")
|
||
const [previewVideo, setPreviewVideo] = useState<VimeoSampleVideo | null>(null)
|
||
const [previewLoading, setPreviewLoading] = useState(false)
|
||
|
||
useEffect(() => {
|
||
const fetchData = async () => {
|
||
if (!subModuleId || !courseId) return
|
||
|
||
try {
|
||
const subCoursesRes = await getSubModulesByCourse(Number(courseId))
|
||
const foundSubCourse = subCoursesRes.data.data.sub_courses?.find(
|
||
(sc) => sc.id === Number(subModuleId)
|
||
)
|
||
setSubCourse(foundSubCourse ?? null)
|
||
} catch (err) {
|
||
console.error("Failed to fetch course data:", err)
|
||
setError("Failed to load course")
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}
|
||
|
||
fetchData()
|
||
}, [subModuleId, courseId])
|
||
|
||
const fetchPractices = async () => {
|
||
if (!subModuleId) return
|
||
setPracticesLoading(true)
|
||
try {
|
||
const res = await getQuestionSetsByOwner("SUB_MODULE", Number(subModuleId))
|
||
const raw = res.data.data
|
||
const list = Array.isArray(raw) ? raw : raw?.question_sets ?? []
|
||
setPractices(list)
|
||
} catch (err) {
|
||
console.error("Failed to fetch practices:", err)
|
||
} finally {
|
||
setPracticesLoading(false)
|
||
}
|
||
}
|
||
|
||
const fetchVideos = async () => {
|
||
if (!subModuleId) return
|
||
setVideosLoading(true)
|
||
try {
|
||
const res = await getVideosBySubModule(Number(subModuleId))
|
||
setVideos(res.data.data.videos ?? [])
|
||
} catch (err) {
|
||
console.error("Failed to fetch videos:", err)
|
||
} finally {
|
||
setVideosLoading(false)
|
||
}
|
||
}
|
||
|
||
useEffect(() => {
|
||
if (activeTab === "practice") {
|
||
fetchPractices()
|
||
} else if (activeTab === "lesson") {
|
||
fetchVideos()
|
||
}
|
||
}, [activeTab, subModuleId])
|
||
|
||
const handleAddPractice = () => {
|
||
navigate(`/content/human-language/${categoryId}/${courseId}/sub-module/${subModuleId}/add-practice`)
|
||
}
|
||
|
||
|
||
|
||
const handleEditClick = (practice: QuestionSet) => {
|
||
setPracticeToEdit(practice)
|
||
setTitle(practice.title)
|
||
setDescription(practice.description)
|
||
setPersona(practice.persona || "")
|
||
setSaveError(null)
|
||
setShowEditPracticeModal(true)
|
||
}
|
||
|
||
const handleSaveEditPractice = async () => {
|
||
if (!practiceToEdit) return
|
||
setSaving(true)
|
||
setSaveError(null)
|
||
try {
|
||
await updatePractice(practiceToEdit.id, {
|
||
title,
|
||
description,
|
||
persona,
|
||
})
|
||
setShowEditPracticeModal(false)
|
||
setPracticeToEdit(null)
|
||
setTitle("")
|
||
setDescription("")
|
||
setPersona("")
|
||
await fetchPractices()
|
||
} catch (err) {
|
||
console.error("Failed to update practice:", err)
|
||
setSaveError("Failed to update practice")
|
||
} finally {
|
||
setSaving(false)
|
||
}
|
||
}
|
||
|
||
const handleDeleteClick = (practice: QuestionSet) => {
|
||
setPracticeToDelete(practice)
|
||
setShowDeleteModal(true)
|
||
}
|
||
|
||
const handleConfirmDelete = async () => {
|
||
if (!practiceToDelete) return
|
||
setDeleting(true)
|
||
try {
|
||
await deleteQuestionSet(practiceToDelete.id)
|
||
setShowDeleteModal(false)
|
||
setPracticeToDelete(null)
|
||
await fetchPractices()
|
||
} catch (err) {
|
||
console.error("Failed to delete practice:", err)
|
||
} finally {
|
||
setDeleting(false)
|
||
}
|
||
}
|
||
|
||
const handlePracticeClick = (practiceId: number) => {
|
||
navigate(`/content/human-language/${categoryId}/${courseId}/sub-module/${subModuleId}/practices/${practiceId}/questions`)
|
||
}
|
||
|
||
const handleAddVideo = () => {
|
||
setVideoTitle("")
|
||
setVideoDescription("")
|
||
setVideoUrl("")
|
||
setVideoFile(null)
|
||
setVideoFileSize(0)
|
||
setVideoDuration(0)
|
||
setVideoResolution("1080p")
|
||
setVideoVisibility("PUBLISHED")
|
||
setVideoStatus("PUBLISHED")
|
||
setVideoDisplayOrder(1)
|
||
setSaveError(null)
|
||
setShowAddVideoModal(true)
|
||
}
|
||
|
||
const handleVideoFileSelect = (file: File | null) => {
|
||
setVideoFile(file)
|
||
if (!file) {
|
||
setVideoFileSize(0)
|
||
setVideoDuration(0)
|
||
return
|
||
}
|
||
|
||
setVideoFileSize(file.size)
|
||
const video = document.createElement("video")
|
||
const objectUrl = URL.createObjectURL(file)
|
||
video.preload = "metadata"
|
||
video.src = objectUrl
|
||
video.onloadedmetadata = () => {
|
||
setVideoDuration(Math.max(0, Math.round(video.duration || 0)))
|
||
URL.revokeObjectURL(objectUrl)
|
||
}
|
||
video.onerror = () => {
|
||
URL.revokeObjectURL(objectUrl)
|
||
}
|
||
}
|
||
|
||
const handleSaveNewVideo = async () => {
|
||
if (!subModuleId || !videoFile) return
|
||
setSaving(true)
|
||
setSaveError(null)
|
||
try {
|
||
const uploadRes = await uploadVideoFile(videoFile, {
|
||
title: videoTitle.trim(),
|
||
description: videoDescription.trim(),
|
||
})
|
||
|
||
// Per backend guide, use embed_url as the video_url reference.
|
||
const embedUrl = uploadRes.data?.data?.embed_url?.trim()
|
||
const vimeoUrl = uploadRes.data?.data?.url?.trim()
|
||
if (!embedUrl) throw new Error("Missing uploaded video embed_url")
|
||
|
||
// Backend requires: https://player.vimeo.com/video/<id>?h=<hash>
|
||
// where <hash> is the last path segment from `url` (e.g. https://vimeo.com/<id>/<hash>)
|
||
const hashFromUrl = vimeoUrl ? vimeoUrl.split("/").filter(Boolean).at(-1) : undefined
|
||
const finalVideoUrl = hashFromUrl ? `${embedUrl}?h=${hashFromUrl}` : embedUrl
|
||
|
||
const finalTitle = videoTitle.trim() || videoFile.name
|
||
|
||
await createCourseVideo({
|
||
sub_module_id: Number(subModuleId),
|
||
title: finalTitle,
|
||
description: videoDescription.trim(),
|
||
video_url: finalVideoUrl,
|
||
duration: videoDuration,
|
||
resolution: videoResolution.trim() || undefined,
|
||
visibility: videoVisibility,
|
||
display_order: Number.isFinite(videoDisplayOrder) ? videoDisplayOrder : undefined,
|
||
status: videoStatus,
|
||
})
|
||
setShowAddVideoModal(false)
|
||
setVideoTitle("")
|
||
setVideoDescription("")
|
||
setVideoUrl("")
|
||
setVideoFile(null)
|
||
setVideoFileSize(0)
|
||
setVideoDuration(0)
|
||
setVideoResolution("1080p")
|
||
setVideoVisibility("PUBLISHED")
|
||
setVideoStatus("PUBLISHED")
|
||
setVideoDisplayOrder(1)
|
||
await fetchVideos()
|
||
} catch (err) {
|
||
console.error("Failed to create video:", err)
|
||
setSaveError("Failed to create video")
|
||
} finally {
|
||
setSaving(false)
|
||
}
|
||
}
|
||
|
||
const handleEditVideoClick = (video: SubCourseVideo) => {
|
||
setVideoToEdit(video)
|
||
setVideoTitle(video.title)
|
||
setVideoDescription(video.description || "")
|
||
setVideoUrl(video.video_url || "")
|
||
setSaveError(null)
|
||
setShowEditVideoModal(true)
|
||
}
|
||
|
||
const handleSaveEditVideo = async () => {
|
||
if (!videoToEdit) return
|
||
setSaving(true)
|
||
setSaveError(null)
|
||
try {
|
||
await updateSubCourseVideo(videoToEdit.id, {
|
||
title: videoTitle,
|
||
description: videoDescription,
|
||
video_url: videoUrl,
|
||
})
|
||
setShowEditVideoModal(false)
|
||
setVideoToEdit(null)
|
||
setVideoTitle("")
|
||
setVideoDescription("")
|
||
setVideoUrl("")
|
||
await fetchVideos()
|
||
} catch (err) {
|
||
console.error("Failed to update video:", err)
|
||
setSaveError("Failed to update video")
|
||
} finally {
|
||
setSaving(false)
|
||
}
|
||
}
|
||
|
||
const handleDeleteVideoClick = (video: SubCourseVideo) => {
|
||
setVideoToDelete(video)
|
||
setShowDeleteVideoModal(true)
|
||
}
|
||
|
||
const handleConfirmDeleteVideo = async () => {
|
||
if (!videoToDelete) return
|
||
setDeletingVideo(true)
|
||
try {
|
||
await deleteSubCourseVideo(videoToDelete.id)
|
||
setShowDeleteVideoModal(false)
|
||
setVideoToDelete(null)
|
||
await fetchVideos()
|
||
} catch (err) {
|
||
console.error("Failed to delete video:", err)
|
||
} finally {
|
||
setDeletingVideo(false)
|
||
}
|
||
}
|
||
|
||
// Preview a video card.
|
||
// We prefer embedding directly from `video_url` because Vimeo embeds may require the `h=` hash.
|
||
const handlePreviewVideo = async (video: SubCourseVideo) => {
|
||
setShowPreviewModal(true)
|
||
setPreviewLoading(true)
|
||
setPreviewIframe("")
|
||
setPreviewVideo(null)
|
||
try {
|
||
const directUrl = video.video_url?.trim()
|
||
if (directUrl) {
|
||
setPreviewIframe(
|
||
`<iframe src="${directUrl}" style="width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>`,
|
||
)
|
||
setPreviewVideo(null)
|
||
return
|
||
}
|
||
|
||
// Fallback to sample API when a direct URL is unavailable.
|
||
const idMatch = video.video_url?.match(/(\d{5,})/)
|
||
const vimeoId = idMatch?.[1] ?? "76979871" // fallback to Big Buck Bunny
|
||
const res = await getVimeoSample(vimeoId)
|
||
setPreviewIframe(res.data.data.iframe)
|
||
setPreviewVideo(res.data.data.video)
|
||
} catch {
|
||
setPreviewIframe("")
|
||
} finally {
|
||
setPreviewLoading(false)
|
||
}
|
||
}
|
||
|
||
const filteredPractices = practices.filter((practice) => {
|
||
if (statusFilter === "all") return true
|
||
if (statusFilter === "published") return practice.status === "PUBLISHED"
|
||
if (statusFilter === "draft") return practice.status === "DRAFT"
|
||
if (statusFilter === "archived") return practice.status === "ARCHIVED"
|
||
return true
|
||
})
|
||
|
||
if (loading) {
|
||
return (
|
||
<div className="flex flex-col items-center justify-center py-20">
|
||
<img src={spinnerSrc} alt="" className="h-8 w-8 animate-spin" />
|
||
<p className="mt-4 text-sm font-medium text-grayScale-500">Loading course…</p>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
if (error) {
|
||
return (
|
||
<div className="flex flex-col items-center justify-center py-20">
|
||
<img src={alertSrc} alt="" className="h-12 w-12" />
|
||
<p className="mt-3 text-sm font-medium text-red-600">{error}</p>
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className="space-y-6">
|
||
{/* Back Button */}
|
||
<Link
|
||
to="/content/human-language"
|
||
className="group inline-flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm font-medium text-grayScale-500 transition-all hover:bg-grayScale-50 hover:text-grayScale-900"
|
||
>
|
||
<ArrowLeft className="h-4 w-4 transition-transform group-hover:-translate-x-0.5" />
|
||
Back to Human Language
|
||
</Link>
|
||
|
||
{/* SubCourse Header */}
|
||
<div className="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
|
||
<div className="max-w-2xl space-y-2">
|
||
<div className="flex flex-wrap items-center gap-2.5">
|
||
<h1 className="text-2xl font-bold tracking-tight text-grayScale-900">
|
||
{subCourse?.title}
|
||
</h1>
|
||
{subCourse?.level && (
|
||
<Badge className="rounded-full bg-purple-50 px-2.5 py-0.5 text-xs font-semibold text-purple-700 ring-1 ring-inset ring-purple-200">{subCourse.level}</Badge>
|
||
)}
|
||
</div>
|
||
<p className="text-sm leading-relaxed text-grayScale-500">
|
||
{subCourse?.description || "No description available"}
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-col gap-2.5 sm:flex-row sm:gap-3">
|
||
<Button
|
||
variant="outline"
|
||
className="border-brand-200 text-brand-600 transition-colors hover:border-brand-500 hover:bg-brand-50"
|
||
onClick={handleAddPractice}
|
||
>
|
||
<FileText className="mr-2 h-4 w-4" />
|
||
Add Practice
|
||
</Button>
|
||
<Button className="bg-brand-500 shadow-sm transition-colors hover:bg-brand-600" onClick={handleAddVideo}>
|
||
<Plus className="mr-2 h-4 w-4" />
|
||
Add lesson video
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
|
||
<p className="text-xs text-grayScale-500">
|
||
Use <span className="font-medium text-grayScale-700">Lesson</span> for videos/audio and{" "}
|
||
<span className="font-medium text-grayScale-700">Practice</span> for question sets tied to this sub-module.
|
||
</p>
|
||
|
||
{/* Tabs */}
|
||
<div className="border-b border-grayScale-200">
|
||
<div className="-mb-px flex gap-6">
|
||
<button
|
||
type="button"
|
||
onClick={() => setActiveTab("lesson")}
|
||
className={`relative px-1 pb-3.5 pt-1 text-sm font-semibold transition-all ${
|
||
activeTab === "lesson"
|
||
? "text-brand-600"
|
||
: "text-grayScale-400 hover:text-grayScale-700"
|
||
}`}
|
||
>
|
||
Lesson
|
||
{activeTab === "lesson" && (
|
||
<span className="absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-brand-500" />
|
||
)}
|
||
</button>
|
||
<button
|
||
type="button"
|
||
onClick={() => setActiveTab("practice")}
|
||
className={`relative px-1 pb-3.5 pt-1 text-sm font-semibold transition-all ${
|
||
activeTab === "practice"
|
||
? "text-brand-600"
|
||
: "text-grayScale-400 hover:text-grayScale-700"
|
||
}`}
|
||
>
|
||
Practice
|
||
{activeTab === "practice" && (
|
||
<span className="absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-brand-500" />
|
||
)}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
{/* Content */}
|
||
{activeTab === "practice" && (
|
||
<>
|
||
{practicesLoading ? (
|
||
<div className="flex flex-col items-center justify-center py-20">
|
||
<SpinnerIcon className="h-8 w-8" />
|
||
<p className="mt-4 text-sm font-medium text-grayScale-500">Loading practices…</p>
|
||
</div>
|
||
) : filteredPractices.length === 0 ? (
|
||
<div className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-grayScale-200 bg-grayScale-50/50 py-16">
|
||
<div className="rounded-full bg-brand-50 p-4">
|
||
<FileText className="h-8 w-8 text-brand-400" />
|
||
</div>
|
||
<p className="mt-4 text-sm font-semibold text-grayScale-700">No practices yet</p>
|
||
<p className="mt-1 text-sm text-grayScale-400">Create your first practice to get started</p>
|
||
<Button variant="outline" className="mt-5 border-brand-200 text-brand-600 hover:bg-brand-50" onClick={handleAddPractice}>
|
||
<Plus className="mr-2 h-4 w-4" />
|
||
Add Practice
|
||
</Button>
|
||
</div>
|
||
) : (
|
||
<div className="grid gap-4 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||
{filteredPractices.map((practice) => {
|
||
const statusConfig: Record<string, { bg: string; dot: string; text: string }> = {
|
||
PUBLISHED: { bg: "bg-green-50 text-green-700 ring-1 ring-inset ring-green-200", dot: "bg-green-500", text: "Published" },
|
||
DRAFT: { bg: "bg-grayScale-50 text-grayScale-600 ring-1 ring-inset ring-grayScale-200", dot: "bg-grayScale-400", text: "Draft" },
|
||
ARCHIVED: { bg: "bg-amber-50 text-amber-700 ring-1 ring-inset ring-amber-200", dot: "bg-amber-500", text: "Archived" },
|
||
}
|
||
const status = statusConfig[practice.status] ?? statusConfig.DRAFT
|
||
|
||
return (
|
||
<Card
|
||
key={practice.id}
|
||
className="group cursor-pointer overflow-hidden rounded-xl border border-grayScale-200 bg-white shadow-sm transition-all duration-200 hover:border-brand-300 hover:shadow-md hover:ring-1 hover:ring-brand-100"
|
||
onClick={() => handlePracticeClick(practice.id)}
|
||
>
|
||
<div className="flex h-full flex-col p-5 space-y-3">
|
||
<div className="flex items-start justify-between gap-3">
|
||
<h3 className="font-semibold leading-snug text-grayScale-900 line-clamp-2">{practice.title}</h3>
|
||
<Badge className={`shrink-0 rounded-full px-2 py-0.5 text-[11px] font-semibold ${status.bg}`}>
|
||
<span className={`mr-1.5 inline-block h-1.5 w-1.5 rounded-full ${status.dot}`} />
|
||
{status.text}
|
||
</Badge>
|
||
</div>
|
||
|
||
<p className="text-sm leading-relaxed text-grayScale-500 line-clamp-2">{practice.description}</p>
|
||
|
||
<div className="flex items-center gap-2 flex-wrap">
|
||
<Badge className="rounded-full bg-[#f3e8ff] text-[#6b21a8] text-[11px] font-medium px-2.5 py-0.5 ring-1 ring-inset ring-[#d8b4fe]">
|
||
{practice.set_type}
|
||
</Badge>
|
||
{practice.persona && (
|
||
<Badge className="rounded-full bg-purple-50 text-purple-600 text-[11px] font-medium px-2.5 py-0.5 ring-1 ring-inset ring-purple-200">
|
||
{practice.persona}
|
||
</Badge>
|
||
)}
|
||
</div>
|
||
|
||
<div className="flex items-center gap-3 text-xs text-grayScale-400">
|
||
<div className="flex items-center gap-1.5">
|
||
<Layers className="h-3.5 w-3.5" />
|
||
<span>{practice.owner_type.replace("_", " ")}</span>
|
||
</div>
|
||
{practice.shuffle_questions && (
|
||
<span className="rounded-full bg-amber-50 px-2 py-0.5 text-[11px] font-medium text-amber-600 ring-1 ring-inset ring-amber-200">Shuffle ON</span>
|
||
)}
|
||
</div>
|
||
|
||
<div className="mt-auto flex items-center justify-between border-t border-grayScale-100 pt-3">
|
||
<span className="text-xs font-medium text-grayScale-400">
|
||
{new Date(practice.created_at).toLocaleDateString("en-US", {
|
||
month: "short",
|
||
day: "numeric",
|
||
year: "numeric",
|
||
})}
|
||
</span>
|
||
<div className="flex gap-0.5" onClick={(e) => e.stopPropagation()}>
|
||
<button
|
||
onClick={() => handleEditClick(practice)}
|
||
className="rounded-lg p-1.5 text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-700"
|
||
>
|
||
<Edit className="h-4 w-4" />
|
||
</button>
|
||
<button
|
||
onClick={() => handleDeleteClick(practice)}
|
||
className="rounded-lg p-1.5 text-grayScale-400 transition-colors hover:bg-red-50 hover:text-red-500"
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</Card>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{activeTab === "lesson" && (
|
||
<>
|
||
{videosLoading ? (
|
||
<div className="flex flex-col items-center justify-center py-20">
|
||
<SpinnerIcon className="h-8 w-8" />
|
||
<p className="mt-4 text-sm font-medium text-grayScale-500">Loading videos…</p>
|
||
</div>
|
||
) : videos.length === 0 ? (
|
||
<div className="flex flex-col items-center justify-center rounded-2xl border border-dashed border-grayScale-200 bg-grayScale-50/50 py-16">
|
||
<div className="rounded-full bg-brand-50 p-4">
|
||
<Video className="h-8 w-8 text-brand-400" />
|
||
</div>
|
||
<p className="mt-4 text-sm font-semibold text-grayScale-700">No videos yet</p>
|
||
<p className="mt-1 text-sm text-grayScale-400">Upload your first video to get started</p>
|
||
<Button variant="outline" className="mt-5 border-brand-200 text-brand-600 hover:bg-brand-50" onClick={handleAddVideo}>
|
||
<Plus className="mr-2 h-4 w-4" />
|
||
Add Video
|
||
</Button>
|
||
</div>
|
||
) : (
|
||
<div className="grid gap-5 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
|
||
{videos.map((video, index) => {
|
||
const gradients = [
|
||
"bg-gradient-to-br from-blue-100 via-blue-50 to-indigo-100",
|
||
"bg-gradient-to-br from-amber-100 via-yellow-50 to-orange-100",
|
||
"bg-gradient-to-br from-purple-100 via-fuchsia-50 to-pink-100",
|
||
"bg-gradient-to-br from-emerald-100 via-green-50 to-teal-100",
|
||
]
|
||
const formatDuration = (seconds: number) => {
|
||
const mins = Math.floor(seconds / 60)
|
||
const secs = seconds % 60
|
||
return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
|
||
}
|
||
return (
|
||
<Card key={video.id} className="group overflow-hidden rounded-xl border border-grayScale-200 bg-white shadow-sm transition-all duration-200 hover:border-brand-300 hover:shadow-md hover:ring-1 hover:ring-brand-100">
|
||
{/* Thumbnail with duration */}
|
||
<div className="relative aspect-video w-full overflow-hidden">
|
||
{video.thumbnail ? (
|
||
<img src={video.thumbnail} alt={video.title} className="h-full w-full rounded-t-xl object-cover transition-transform duration-300 group-hover:scale-105" />
|
||
) : (
|
||
<div className={`flex h-full w-full items-center justify-center rounded-t-xl ${gradients[index % gradients.length]}`}>
|
||
<Video className="h-10 w-10 text-white/40" />
|
||
</div>
|
||
)}
|
||
<div className="absolute bottom-2.5 right-2.5 rounded-md bg-grayScale-900/75 px-2 py-0.5 text-xs font-semibold tabular-nums text-white backdrop-blur-sm">
|
||
{formatDuration(video.duration || 0)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Content */}
|
||
<div className="p-4 space-y-3">
|
||
{/* Status and menu */}
|
||
<div className="flex items-center justify-between">
|
||
<Badge
|
||
className={`rounded-full px-2 py-0.5 text-[11px] font-semibold ${
|
||
video.is_published
|
||
? "bg-green-50 text-green-700 ring-1 ring-inset ring-green-200"
|
||
: "bg-grayScale-50 text-grayScale-600 ring-1 ring-inset ring-grayScale-200"
|
||
}`}
|
||
>
|
||
<span className={`mr-1.5 inline-block h-1.5 w-1.5 rounded-full ${video.is_published ? "bg-green-500" : "bg-grayScale-400"}`} />
|
||
{video.is_published ? "PUBLISHED" : "DRAFT"}
|
||
</Badge>
|
||
<div className="relative">
|
||
<button
|
||
onClick={() => setOpenVideoMenuId(openVideoMenuId === video.id ? null : video.id)}
|
||
className="rounded-lg p-1.5 text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
|
||
>
|
||
<MoreVertical className="h-4 w-4" />
|
||
</button>
|
||
{openVideoMenuId === video.id && (
|
||
<div className="absolute right-0 top-full z-10 mt-1 w-36 rounded-xl bg-white py-1.5 shadow-lg ring-1 ring-grayScale-200">
|
||
<button
|
||
onClick={() => {
|
||
handleDeleteVideoClick(video)
|
||
setOpenVideoMenuId(null)
|
||
}}
|
||
className="flex w-full items-center gap-2 px-4 py-2 text-sm font-medium text-red-500 transition-colors hover:bg-red-50"
|
||
>
|
||
<Trash2 className="h-4 w-4" />
|
||
Delete
|
||
</button>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Title */}
|
||
<h3 className="font-semibold leading-snug text-grayScale-900 line-clamp-2">{video.title}</h3>
|
||
|
||
{/* Edit / Preview buttons */}
|
||
<div className="flex gap-2">
|
||
<Button
|
||
variant="outline"
|
||
className="flex-1 border-grayScale-200 text-grayScale-700 transition-colors hover:border-grayScale-300 hover:bg-grayScale-50"
|
||
onClick={() => handleEditVideoClick(video)}
|
||
>
|
||
<Edit className="mr-1.5 h-4 w-4" />
|
||
Edit
|
||
</Button>
|
||
<Button
|
||
variant="outline"
|
||
className="flex-1 border-brand-200 text-brand-600 transition-colors hover:border-brand-300 hover:bg-brand-50"
|
||
onClick={() => handlePreviewVideo(video)}
|
||
>
|
||
<Play className="mr-1.5 h-4 w-4" />
|
||
Preview
|
||
</Button>
|
||
</div>
|
||
|
||
{/* Publish button */}
|
||
<Button
|
||
className={`w-full shadow-sm transition-colors ${
|
||
video.is_published
|
||
? "bg-green-500 hover:bg-green-600"
|
||
: "bg-brand-500 hover:bg-brand-600"
|
||
}`}
|
||
>
|
||
{video.is_published ? "Published" : "Publish"}
|
||
</Button>
|
||
</div>
|
||
</Card>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
</>
|
||
)}
|
||
|
||
{/* Delete Modal */}
|
||
{showDeleteModal && practiceToDelete && (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
|
||
<div className="mx-4 w-full max-w-sm rounded-2xl bg-white shadow-2xl">
|
||
<div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
|
||
<h2 className="text-lg font-semibold text-grayScale-900">Delete Practice</h2>
|
||
<button
|
||
onClick={() => setShowDeleteModal(false)}
|
||
className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
|
||
>
|
||
<X className="h-5 w-5" />
|
||
</button>
|
||
</div>
|
||
<div className="px-6 py-5">
|
||
<p className="text-sm leading-relaxed text-grayScale-600">
|
||
Are you sure you want to delete{" "}
|
||
<span className="font-semibold text-grayScale-900">{practiceToDelete.title}</span>? This action cannot be undone.
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-col-reverse gap-2.5 border-t border-grayScale-100 px-6 py-4 sm:flex-row sm:justify-end sm:gap-3">
|
||
<Button variant="outline" onClick={() => setShowDeleteModal(false)} disabled={deleting}>
|
||
Cancel
|
||
</Button>
|
||
<Button className="bg-red-500 shadow-sm hover:bg-red-600" onClick={handleConfirmDelete} disabled={deleting}>
|
||
{deleting ? "Deleting..." : "Delete"}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Edit Practice Modal */}
|
||
{showEditPracticeModal && practiceToEdit && (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
|
||
<div className="mx-4 w-full max-w-md rounded-2xl bg-white shadow-2xl">
|
||
<div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
|
||
<h2 className="text-lg font-semibold text-grayScale-900">Edit Practice</h2>
|
||
<button
|
||
onClick={() => setShowEditPracticeModal(false)}
|
||
className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
|
||
>
|
||
<X className="h-5 w-5" />
|
||
</button>
|
||
</div>
|
||
<div className="space-y-5 px-6 py-6">
|
||
<div className="space-y-1.5">
|
||
<label className="text-sm font-medium text-grayScale-700">Title</label>
|
||
<Input
|
||
value={title}
|
||
onChange={(e) => setTitle(e.target.value)}
|
||
placeholder="Enter practice title"
|
||
/>
|
||
</div>
|
||
<div className="space-y-1.5">
|
||
<label className="text-sm font-medium text-grayScale-700">Description</label>
|
||
<textarea
|
||
value={description}
|
||
onChange={(e) => setDescription(e.target.value)}
|
||
placeholder="Enter practice description"
|
||
className="w-full rounded-lg border border-grayScale-200 px-3 py-2.5 text-sm transition-colors focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20"
|
||
rows={3}
|
||
/>
|
||
</div>
|
||
<div className="space-y-1.5">
|
||
<label className="text-sm font-medium text-grayScale-700">Persona (Optional)</label>
|
||
<Input
|
||
value={persona}
|
||
onChange={(e) => setPersona(e.target.value)}
|
||
placeholder="Enter persona"
|
||
/>
|
||
</div>
|
||
{saveError && <p className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-600">{saveError}</p>}
|
||
</div>
|
||
<div className="flex flex-col-reverse gap-2.5 border-t border-grayScale-100 px-6 py-4 sm:flex-row sm:justify-end sm:gap-3">
|
||
<Button variant="outline" onClick={() => setShowEditPracticeModal(false)} disabled={saving}>
|
||
Cancel
|
||
</Button>
|
||
<Button
|
||
className="bg-brand-500 shadow-sm hover:bg-brand-600"
|
||
onClick={handleSaveEditPractice}
|
||
disabled={saving || !title.trim()}
|
||
>
|
||
{saving ? "Saving..." : "Save"}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Add Video Modal */}
|
||
{showAddVideoModal && (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
|
||
<div className="mx-4 w-full max-w-lg rounded-2xl bg-white shadow-2xl">
|
||
<div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
|
||
<h2 className="text-lg font-semibold text-grayScale-900">Add Video</h2>
|
||
<button
|
||
onClick={() => { setShowAddVideoModal(false); setVideoFile(null) }}
|
||
className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
|
||
>
|
||
<X className="h-5 w-5" />
|
||
</button>
|
||
</div>
|
||
<div className="max-h-[70vh] space-y-5 overflow-y-auto px-6 py-6">
|
||
<div className="space-y-1.5">
|
||
<label className="text-sm font-medium text-grayScale-700">Title</label>
|
||
<Input
|
||
value={videoTitle}
|
||
onChange={(e) => setVideoTitle(e.target.value)}
|
||
placeholder="Enter video title"
|
||
/>
|
||
</div>
|
||
<div className="space-y-1.5">
|
||
<label className="text-sm font-medium text-grayScale-700">Description</label>
|
||
<textarea
|
||
value={videoDescription}
|
||
onChange={(e) => setVideoDescription(e.target.value)}
|
||
placeholder="Enter video description"
|
||
className="w-full rounded-lg border border-grayScale-200 px-3 py-2.5 text-sm transition-colors focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20"
|
||
rows={3}
|
||
/>
|
||
</div>
|
||
<div className="space-y-1.5">
|
||
<label className="text-sm font-medium text-grayScale-700">Video File</label>
|
||
<Input
|
||
type="file"
|
||
accept="video/*"
|
||
onChange={(e) => handleVideoFileSelect(e.target.files?.[0] ?? null)}
|
||
/>
|
||
{videoFile && (
|
||
<p className="text-xs text-grayScale-500">
|
||
Selected: {videoFile.name}
|
||
</p>
|
||
)}
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-1.5">
|
||
<label className="text-sm font-medium text-grayScale-700">File Size (bytes)</label>
|
||
<Input
|
||
type="number"
|
||
value={videoFileSize || ""}
|
||
onChange={(e) => setVideoFileSize(Number(e.target.value))}
|
||
placeholder="52428800"
|
||
min={0}
|
||
/>
|
||
</div>
|
||
<div className="space-y-1.5">
|
||
<label className="text-sm font-medium text-grayScale-700">Duration (seconds)</label>
|
||
<Input
|
||
type="number"
|
||
value={videoDuration || ""}
|
||
onChange={(e) => setVideoDuration(Number(e.target.value))}
|
||
placeholder="300"
|
||
min={0}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-1.5">
|
||
<label className="text-sm font-medium text-grayScale-700">Resolution</label>
|
||
<Input
|
||
value={videoResolution}
|
||
onChange={(e) => setVideoResolution(e.target.value)}
|
||
placeholder="1080p"
|
||
/>
|
||
</div>
|
||
<div className="space-y-1.5">
|
||
<label className="text-sm font-medium text-grayScale-700">Display Order</label>
|
||
<Input
|
||
type="number"
|
||
value={videoDisplayOrder}
|
||
onChange={(e) => setVideoDisplayOrder(Number(e.target.value))}
|
||
min={1}
|
||
/>
|
||
</div>
|
||
</div>
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<div className="space-y-1.5">
|
||
<label className="text-sm font-medium text-grayScale-700">Visibility</label>
|
||
<select
|
||
value={videoVisibility}
|
||
onChange={(e) => setVideoVisibility(e.target.value)}
|
||
className="h-11 w-full rounded-lg border border-grayScale-200 bg-white px-3 text-sm text-grayScale-700 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20"
|
||
>
|
||
<option value="PUBLISHED">PUBLISHED</option>
|
||
<option value="DRAFT">DRAFT</option>
|
||
<option value="PRIVATE">PRIVATE</option>
|
||
<option value="UNLISTED">UNLISTED</option>
|
||
</select>
|
||
</div>
|
||
<div className="space-y-1.5">
|
||
<label className="text-sm font-medium text-grayScale-700">Status</label>
|
||
<select
|
||
value={videoStatus}
|
||
onChange={(e) => setVideoStatus(e.target.value)}
|
||
className="h-11 w-full rounded-lg border border-grayScale-200 bg-white px-3 text-sm text-grayScale-700 focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20"
|
||
>
|
||
<option value="PUBLISHED">PUBLISHED</option>
|
||
<option value="DRAFT">DRAFT</option>
|
||
<option value="ARCHIVED">ARCHIVED</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
{saveError && <p className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-600">{saveError}</p>}
|
||
</div>
|
||
<div className="flex flex-col-reverse gap-2.5 border-t border-grayScale-100 px-6 py-4 sm:flex-row sm:justify-end sm:gap-3">
|
||
<Button variant="outline" onClick={() => setShowAddVideoModal(false)} disabled={saving}>
|
||
Cancel
|
||
</Button>
|
||
<Button
|
||
className="bg-brand-500 shadow-sm hover:bg-brand-600"
|
||
onClick={handleSaveNewVideo}
|
||
disabled={saving || !videoTitle.trim() || !videoFile}
|
||
>
|
||
{saving ? "Uploading..." : "Upload Video"}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Edit Video Modal */}
|
||
{showEditVideoModal && videoToEdit && (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
|
||
<div className="mx-4 w-full max-w-md rounded-2xl bg-white shadow-2xl">
|
||
<div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
|
||
<h2 className="text-lg font-semibold text-grayScale-900">Edit Video</h2>
|
||
<button
|
||
onClick={() => setShowEditVideoModal(false)}
|
||
className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
|
||
>
|
||
<X className="h-5 w-5" />
|
||
</button>
|
||
</div>
|
||
<div className="space-y-5 px-6 py-6">
|
||
<div className="space-y-1.5">
|
||
<label className="text-sm font-medium text-grayScale-700">Title</label>
|
||
<Input
|
||
value={videoTitle}
|
||
onChange={(e) => setVideoTitle(e.target.value)}
|
||
placeholder="Enter video title"
|
||
/>
|
||
</div>
|
||
<div className="space-y-1.5">
|
||
<label className="text-sm font-medium text-grayScale-700">Description</label>
|
||
<textarea
|
||
value={videoDescription}
|
||
onChange={(e) => setVideoDescription(e.target.value)}
|
||
placeholder="Enter video description"
|
||
className="w-full rounded-lg border border-grayScale-200 px-3 py-2.5 text-sm transition-colors focus:border-brand-500 focus:outline-none focus:ring-2 focus:ring-brand-500/20"
|
||
rows={3}
|
||
/>
|
||
</div>
|
||
<div className="space-y-1.5">
|
||
<label className="text-sm font-medium text-grayScale-700">Video URL</label>
|
||
<Input
|
||
value={videoUrl}
|
||
onChange={(e) => setVideoUrl(e.target.value)}
|
||
placeholder="Enter video URL"
|
||
/>
|
||
</div>
|
||
{saveError && <p className="rounded-lg bg-red-50 px-3 py-2 text-sm text-red-600">{saveError}</p>}
|
||
</div>
|
||
<div className="flex flex-col-reverse gap-2.5 border-t border-grayScale-100 px-6 py-4 sm:flex-row sm:justify-end sm:gap-3">
|
||
<Button variant="outline" onClick={() => setShowEditVideoModal(false)} disabled={saving}>
|
||
Cancel
|
||
</Button>
|
||
<Button
|
||
className="bg-brand-500 shadow-sm hover:bg-brand-600"
|
||
onClick={handleSaveEditVideo}
|
||
disabled={saving || !videoTitle.trim()}
|
||
>
|
||
{saving ? "Saving..." : "Save"}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Delete Video Modal */}
|
||
{showDeleteVideoModal && videoToDelete && (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/40 backdrop-blur-sm">
|
||
<div className="mx-4 w-full max-w-sm rounded-2xl bg-white shadow-2xl">
|
||
<div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
|
||
<h2 className="text-lg font-semibold text-grayScale-900">Delete Video</h2>
|
||
<button
|
||
onClick={() => setShowDeleteVideoModal(false)}
|
||
className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
|
||
>
|
||
<X className="h-5 w-5" />
|
||
</button>
|
||
</div>
|
||
<div className="px-6 py-5">
|
||
<p className="text-sm leading-relaxed text-grayScale-600">
|
||
Are you sure you want to delete{" "}
|
||
<span className="font-semibold text-grayScale-900">{videoToDelete.title}</span>? This action cannot be undone.
|
||
</p>
|
||
</div>
|
||
<div className="flex flex-col-reverse gap-2.5 border-t border-grayScale-100 px-6 py-4 sm:flex-row sm:justify-end sm:gap-3">
|
||
<Button variant="outline" onClick={() => setShowDeleteVideoModal(false)} disabled={deletingVideo}>
|
||
Cancel
|
||
</Button>
|
||
<Button className="bg-red-500 shadow-sm hover:bg-red-600" onClick={handleConfirmDeleteVideo} disabled={deletingVideo}>
|
||
{deletingVideo ? "Deleting..." : "Delete"}
|
||
</Button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Video Preview Modal */}
|
||
{showPreviewModal && (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/60 backdrop-blur-sm">
|
||
<div className="mx-4 w-full max-w-2xl rounded-2xl bg-white shadow-2xl">
|
||
<div className="flex items-center justify-between border-b border-grayScale-100 px-6 py-4">
|
||
<div>
|
||
<h2 className="text-lg font-semibold text-grayScale-900">
|
||
{previewVideo?.name ?? "Video Preview"}
|
||
</h2>
|
||
{previewVideo && (
|
||
<p className="mt-0.5 text-xs text-grayScale-400">
|
||
{Math.floor(previewVideo.duration / 60)}:{(previewVideo.duration % 60).toString().padStart(2, "0")} • {previewVideo.width}×{previewVideo.height}
|
||
</p>
|
||
)}
|
||
</div>
|
||
<button
|
||
onClick={() => setShowPreviewModal(false)}
|
||
className="grid h-8 w-8 place-items-center rounded-lg text-grayScale-400 transition-colors hover:bg-grayScale-100 hover:text-grayScale-600"
|
||
>
|
||
<X className="h-5 w-5" />
|
||
</button>
|
||
</div>
|
||
<div className="p-6">
|
||
{previewLoading ? (
|
||
<div className="flex aspect-video items-center justify-center rounded-xl bg-grayScale-50">
|
||
<SpinnerIcon className="h-8 w-8" />
|
||
</div>
|
||
) : previewIframe ? (
|
||
<div
|
||
className="aspect-video w-full overflow-hidden rounded-xl"
|
||
dangerouslySetInnerHTML={{ __html: previewIframe }}
|
||
/>
|
||
) : (
|
||
<div className="flex aspect-video items-center justify-center rounded-xl bg-grayScale-50">
|
||
<p className="text-sm text-grayScale-400">Failed to load preview.</p>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)
|
||
}
|