mirror of
https://github.com/rzmk/learnhouse.git
synced 2025-12-19 04:19:25 +00:00
feat: Init explore metadata features & redesign org settings panel
This commit is contained in:
swve
parent
87787724c4
commit
bfd27ef6e3
12 changed files with 1419 additions and 217 deletions
|
|
@ -0,0 +1,735 @@
|
|||
'use client'
|
||||
import React, { useState } from 'react'
|
||||
import { UploadCloud, Info, Plus, X, Video, GripVertical, Image, Layout, Images, StarIcon, ImageIcon } from 'lucide-react'
|
||||
import { useRouter } from 'next/navigation'
|
||||
import { useOrg } from '@components/Contexts/OrgContext'
|
||||
import { useLHSession } from '@components/Contexts/LHSessionContext'
|
||||
import { getOrgLogoMediaDirectory, getOrgPreviewMediaDirectory, getOrgThumbnailMediaDirectory } from '@services/media/media'
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@components/ui/tabs"
|
||||
import { toast } from 'react-hot-toast'
|
||||
import { constructAcceptValue } from '@/lib/constants'
|
||||
import { uploadOrganizationLogo, uploadOrganizationThumbnail, uploadOrganizationPreview, updateOrganization } from '@services/settings/org'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { Input } from "@components/ui/input"
|
||||
import { Dialog, DialogContent, DialogHeader, DialogTitle, DialogTrigger } from "@components/ui/dialog"
|
||||
import { Button } from "@components/ui/button"
|
||||
import { Label } from "@components/ui/label"
|
||||
import { SiLoom, SiYoutube } from '@icons-pack/react-simple-icons'
|
||||
import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd'
|
||||
|
||||
const SUPPORTED_FILES = constructAcceptValue(['png', 'jpg'])
|
||||
|
||||
type Preview = {
|
||||
id: string;
|
||||
url: string;
|
||||
type: 'image' | 'youtube' | 'loom';
|
||||
filename?: string;
|
||||
thumbnailUrl?: string;
|
||||
order: number;
|
||||
};
|
||||
|
||||
// Update the height constant
|
||||
const PREVIEW_HEIGHT = 'h-28' // Reduced height
|
||||
|
||||
// Add this type for the video service selection
|
||||
type VideoService = 'youtube' | 'loom' | null;
|
||||
|
||||
// Add this constant for consistent sizing
|
||||
const DIALOG_ICON_SIZE = 'w-16 h-16'
|
||||
|
||||
// Add this constant at the top with other constants
|
||||
const ADD_PREVIEW_OPTIONS = [
|
||||
{
|
||||
id: 'image',
|
||||
title: 'Upload Images',
|
||||
description: 'PNG, JPG (max 5MB)',
|
||||
icon: UploadCloud,
|
||||
color: 'blue',
|
||||
onClick: () => document.getElementById('previewInput')?.click()
|
||||
},
|
||||
{
|
||||
id: 'youtube',
|
||||
title: 'YouTube',
|
||||
description: 'Add YouTube video',
|
||||
icon: SiYoutube,
|
||||
color: 'red',
|
||||
onClick: (setSelectedService: Function) => setSelectedService('youtube')
|
||||
},
|
||||
{
|
||||
id: 'loom',
|
||||
title: 'Loom',
|
||||
description: 'Add Loom video',
|
||||
icon: SiLoom,
|
||||
color: 'blue',
|
||||
onClick: (setSelectedService: Function) => setSelectedService('loom')
|
||||
}
|
||||
] as const;
|
||||
|
||||
export default function OrgEditImages() {
|
||||
const router = useRouter()
|
||||
const session = useLHSession() as any
|
||||
const access_token = session?.data?.tokens?.access_token
|
||||
const org = useOrg() as any
|
||||
const [localLogo, setLocalLogo] = useState<string | null>(null)
|
||||
const [localThumbnail, setLocalThumbnail] = useState<string | null>(null)
|
||||
const [isLogoUploading, setIsLogoUploading] = useState(false)
|
||||
const [isThumbnailUploading, setIsThumbnailUploading] = useState(false)
|
||||
const [previews, setPreviews] = useState<Preview[]>(() => {
|
||||
// Initialize with image previews
|
||||
const imagePreviews = (org?.previews?.images || [])
|
||||
.filter((item: any) => item?.filename) // Filter out empty filenames
|
||||
.map((item: any, index: number) => ({
|
||||
id: item.filename,
|
||||
url: getOrgThumbnailMediaDirectory(org?.org_uuid, item.filename),
|
||||
filename: item.filename,
|
||||
type: 'image' as const,
|
||||
order: item.order ?? index // Use existing order or fallback to index
|
||||
}));
|
||||
|
||||
// Initialize with video previews
|
||||
const videoPreviews = (org?.previews?.videos || [])
|
||||
.filter((video: any) => video && video.id)
|
||||
.map((video: any, index: number) => ({
|
||||
id: video.id,
|
||||
url: video.url,
|
||||
type: video.type as 'youtube' | 'loom',
|
||||
thumbnailUrl: video.type === 'youtube'
|
||||
? `https://img.youtube.com/vi/${video.id}/maxresdefault.jpg`
|
||||
: '',
|
||||
filename: '',
|
||||
order: video.order ?? (imagePreviews.length + index) // Use existing order or fallback to index after images
|
||||
}));
|
||||
|
||||
const allPreviews = [...imagePreviews, ...videoPreviews];
|
||||
return allPreviews.sort((a, b) => a.order - b.order);
|
||||
});
|
||||
const [isPreviewUploading, setIsPreviewUploading] = useState(false)
|
||||
const [videoUrl, setVideoUrl] = useState('')
|
||||
const [videoDialogOpen, setVideoDialogOpen] = useState(false)
|
||||
const [selectedService, setSelectedService] = useState<VideoService>(null)
|
||||
|
||||
const handleFileChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (event.target.files && event.target.files.length > 0) {
|
||||
const file = event.target.files[0]
|
||||
setLocalLogo(URL.createObjectURL(file))
|
||||
setIsLogoUploading(true)
|
||||
const loadingToast = toast.loading('Uploading logo...')
|
||||
try {
|
||||
await uploadOrganizationLogo(org.id, file, access_token)
|
||||
await new Promise((r) => setTimeout(r, 1500))
|
||||
toast.success('Logo Updated', { id: loadingToast })
|
||||
router.refresh()
|
||||
} catch (err) {
|
||||
toast.error('Failed to upload logo', { id: loadingToast })
|
||||
} finally {
|
||||
setIsLogoUploading(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleThumbnailChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (event.target.files && event.target.files.length > 0) {
|
||||
const file = event.target.files[0]
|
||||
setLocalThumbnail(URL.createObjectURL(file))
|
||||
setIsThumbnailUploading(true)
|
||||
const loadingToast = toast.loading('Uploading thumbnail...')
|
||||
try {
|
||||
await uploadOrganizationThumbnail(org.id, file, access_token)
|
||||
await new Promise((r) => setTimeout(r, 1500))
|
||||
toast.success('Thumbnail Updated', { id: loadingToast })
|
||||
router.refresh()
|
||||
} catch (err) {
|
||||
toast.error('Failed to upload thumbnail', { id: loadingToast })
|
||||
} finally {
|
||||
setIsThumbnailUploading(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleImageButtonClick = (inputId: string) => (event: React.MouseEvent) => {
|
||||
event.preventDefault()
|
||||
document.getElementById(inputId)?.click()
|
||||
}
|
||||
|
||||
const handlePreviewUpload = async (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (event.target.files && event.target.files.length > 0) {
|
||||
const files = Array.from(event.target.files)
|
||||
const remainingSlots = 4 - previews.length
|
||||
|
||||
if (files.length > remainingSlots) {
|
||||
toast.error(`You can only upload ${remainingSlots} more preview${remainingSlots === 1 ? '' : 's'}`)
|
||||
return
|
||||
}
|
||||
|
||||
setIsPreviewUploading(true)
|
||||
const loadingToast = toast.loading(`Uploading ${files.length} preview${files.length === 1 ? '' : 's'}...`)
|
||||
|
||||
try {
|
||||
const uploadPromises = files.map(async (file) => {
|
||||
const response = await uploadOrganizationPreview(org.id, file, access_token)
|
||||
return {
|
||||
id: response.name_in_disk,
|
||||
url: URL.createObjectURL(file),
|
||||
filename: response.name_in_disk,
|
||||
type: 'image' as const,
|
||||
order: previews.length // Add new items at the end
|
||||
}
|
||||
})
|
||||
|
||||
const newPreviews = await Promise.all(uploadPromises)
|
||||
const updatedPreviews = [...previews, ...newPreviews]
|
||||
|
||||
await updateOrganization(org.id, {
|
||||
previews: {
|
||||
images: updatedPreviews
|
||||
.filter(p => p.type === 'image')
|
||||
.map(p => ({
|
||||
filename: p.filename,
|
||||
order: p.order
|
||||
})),
|
||||
videos: updatedPreviews
|
||||
.filter(p => p.type === 'youtube' || p.type === 'loom')
|
||||
.map(p => ({
|
||||
type: p.type,
|
||||
url: p.url,
|
||||
id: p.id,
|
||||
order: p.order
|
||||
}))
|
||||
}
|
||||
}, access_token)
|
||||
|
||||
setPreviews(updatedPreviews)
|
||||
toast.success(`${files.length} preview${files.length === 1 ? '' : 's'} added`, { id: loadingToast })
|
||||
router.refresh()
|
||||
} catch (err) {
|
||||
toast.error('Failed to upload previews', { id: loadingToast })
|
||||
} finally {
|
||||
setIsPreviewUploading(false)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const removePreview = async (id: string) => {
|
||||
const loadingToast = toast.loading('Removing preview...')
|
||||
try {
|
||||
const updatedPreviews = previews.filter(p => p.id !== id)
|
||||
const updatedPreviewFilenames = updatedPreviews.map(p => p.filename)
|
||||
|
||||
await updateOrganization(org.id, {
|
||||
previews: {
|
||||
images: updatedPreviewFilenames
|
||||
}
|
||||
}, access_token)
|
||||
|
||||
setPreviews(updatedPreviews)
|
||||
toast.success('Preview removed', { id: loadingToast })
|
||||
router.refresh()
|
||||
} catch (err) {
|
||||
toast.error('Failed to remove preview', { id: loadingToast })
|
||||
}
|
||||
}
|
||||
|
||||
const extractVideoId = (url: string, type: 'youtube' | 'loom'): string | null => {
|
||||
if (type === 'youtube') {
|
||||
const regex = /(?:youtube\.com\/(?:[^\/]+\/.+\/|(?:v|e(?:mbed)?)\/|.*[?&]v=)|youtu\.be\/)([^"&?\/\s]{11})/
|
||||
const match = url.match(regex)
|
||||
return match ? match[1] : null
|
||||
} else if (type === 'loom') {
|
||||
const regex = /(?:loom\.com\/(?:share|embed)\/)([a-zA-Z0-9]+)/
|
||||
const match = url.match(regex)
|
||||
return match ? match[1] : null
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
const handleVideoSubmit = async (type: 'youtube' | 'loom') => {
|
||||
const videoId = extractVideoId(videoUrl, type);
|
||||
if (!videoId) {
|
||||
toast.error(`Invalid ${type} URL`);
|
||||
return;
|
||||
}
|
||||
|
||||
// Check if video already exists
|
||||
if (previews.some(preview => preview.id === videoId)) {
|
||||
toast.error('This video has already been added');
|
||||
return;
|
||||
}
|
||||
|
||||
const loadingToast = toast.loading('Adding video preview...');
|
||||
|
||||
try {
|
||||
const thumbnailUrl = type === 'youtube'
|
||||
? `https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`
|
||||
: '';
|
||||
|
||||
const newPreview: Preview = {
|
||||
id: videoId,
|
||||
url: videoUrl,
|
||||
type,
|
||||
thumbnailUrl,
|
||||
filename: '',
|
||||
order: previews.length // Add new items at the end
|
||||
};
|
||||
|
||||
const updatedPreviews = [...previews, newPreview];
|
||||
|
||||
await updateOrganization(org.id, {
|
||||
previews: {
|
||||
images: updatedPreviews
|
||||
.filter(p => p.type === 'image')
|
||||
.map(p => ({
|
||||
filename: p.filename,
|
||||
order: p.order
|
||||
})),
|
||||
videos: updatedPreviews
|
||||
.filter(p => p.type === 'youtube' || p.type === 'loom')
|
||||
.map(p => ({
|
||||
type: p.type,
|
||||
url: p.url,
|
||||
id: p.id,
|
||||
order: p.order
|
||||
}))
|
||||
}
|
||||
}, access_token);
|
||||
|
||||
setPreviews(updatedPreviews);
|
||||
setVideoUrl('');
|
||||
setVideoDialogOpen(false);
|
||||
toast.success('Video preview added', { id: loadingToast });
|
||||
router.refresh();
|
||||
} catch (err) {
|
||||
toast.error('Failed to add video preview', { id: loadingToast });
|
||||
}
|
||||
};
|
||||
|
||||
const handleDragEnd = async (result: DropResult) => {
|
||||
if (!result.destination) return;
|
||||
|
||||
const items = Array.from(previews);
|
||||
const [reorderedItem] = items.splice(result.source.index, 1);
|
||||
items.splice(result.destination.index, 0, reorderedItem);
|
||||
|
||||
// Update order numbers
|
||||
const reorderedItems = items.map((item, index) => ({
|
||||
...item,
|
||||
order: index
|
||||
}));
|
||||
|
||||
setPreviews(reorderedItems);
|
||||
|
||||
// Update the order in the backend
|
||||
const loadingToast = toast.loading('Updating preview order...');
|
||||
try {
|
||||
await updateOrganization(org.id, {
|
||||
previews: {
|
||||
images: reorderedItems
|
||||
.filter(p => p.type === 'image')
|
||||
.map(p => ({
|
||||
filename: p.filename,
|
||||
order: p.order
|
||||
})),
|
||||
videos: reorderedItems
|
||||
.filter(p => p.type === 'youtube' || p.type === 'loom')
|
||||
.map(p => ({
|
||||
type: p.type,
|
||||
url: p.url,
|
||||
id: p.id,
|
||||
order: p.order
|
||||
}))
|
||||
}
|
||||
}, access_token);
|
||||
|
||||
toast.success('Preview order updated', { id: loadingToast });
|
||||
router.refresh();
|
||||
} catch (err) {
|
||||
toast.error('Failed to update preview order', { id: loadingToast });
|
||||
setPreviews(previews);
|
||||
}
|
||||
};
|
||||
|
||||
// Add function to reset video dialog state
|
||||
const resetVideoDialog = () => {
|
||||
setSelectedService(null)
|
||||
setVideoUrl('')
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="sm:mx-10 mx-0 bg-white rounded-xl nice-shadow px-3 py-3 sm:mb-0 mb-16">
|
||||
<div className="flex flex-col bg-gray-50 -space-y-1 px-5 py-3 mb-2 rounded-md">
|
||||
<h1 className="font-bold text-xl text-gray-800">
|
||||
Images & Previews
|
||||
</h1>
|
||||
<h2 className="text-gray-500 text-md">
|
||||
Manage your organization's logo, thumbnail, and preview images
|
||||
</h2>
|
||||
</div>
|
||||
<Tabs defaultValue="logo" className="w-full">
|
||||
<TabsList className="grid w-full grid-cols-3 p-1 bg-gray-100 rounded-lg">
|
||||
<TabsTrigger
|
||||
value="logo"
|
||||
className="data-[state=active]:bg-white data-[state=active]:shadow-sm transition-all flex items-center space-x-2"
|
||||
>
|
||||
<StarIcon size={16} />
|
||||
<span>Logo</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="thumbnail"
|
||||
className="data-[state=active]:bg-white data-[state=active]:shadow-sm transition-all flex items-center space-x-2"
|
||||
>
|
||||
<ImageIcon size={16} />
|
||||
<span>Thumbnail</span>
|
||||
</TabsTrigger>
|
||||
<TabsTrigger
|
||||
value="previews"
|
||||
className="data-[state=active]:bg-white data-[state=active]:shadow-sm transition-all flex items-center space-x-2"
|
||||
>
|
||||
<Images size={16} />
|
||||
<span>Previews</span>
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
<TabsContent value="logo" className="mt-2">
|
||||
<div className="flex flex-col space-y-5 w-full">
|
||||
<div className="w-full bg-gradient-to-b from-gray-50 to-white rounded-xl transition-all duration-300 py-8">
|
||||
<div className="flex flex-col justify-center items-center space-y-8">
|
||||
<div className="relative group">
|
||||
<div
|
||||
className={cn(
|
||||
"w-[200px] sm:w-[250px] h-[100px] sm:h-[125px] bg-contain bg-no-repeat bg-center rounded-lg shadow-md bg-white",
|
||||
"border-2 border-gray-100 hover:border-blue-200 transition-all duration-300",
|
||||
isLogoUploading && "opacity-50"
|
||||
)}
|
||||
style={{ backgroundImage: `url(${localLogo || getOrgLogoMediaDirectory(org?.org_uuid, org?.logo_image)})` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
<input
|
||||
type="file"
|
||||
id="fileInput"
|
||||
accept={SUPPORTED_FILES}
|
||||
className="hidden"
|
||||
onChange={handleFileChange}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isLogoUploading}
|
||||
className={cn(
|
||||
"font-medium text-sm px-6 py-2.5 rounded-full",
|
||||
"bg-gradient-to-r from-blue-500 to-blue-600 text-white",
|
||||
"hover:from-blue-600 hover:to-blue-700",
|
||||
"shadow-sm hover:shadow transition-all duration-300",
|
||||
"flex items-center space-x-2",
|
||||
isLogoUploading && "opacity-75 cursor-not-allowed"
|
||||
)}
|
||||
onClick={handleImageButtonClick('fileInput')}
|
||||
>
|
||||
<UploadCloud size={18} className={cn("", isLogoUploading && "animate-bounce")} />
|
||||
<span>{isLogoUploading ? 'Uploading...' : 'Upload New Logo'}</span>
|
||||
</button>
|
||||
|
||||
<div className="flex flex-col text-xs space-y-2 items-center text-gray-500">
|
||||
<div className="flex items-center space-x-2 bg-blue-50 text-blue-700 px-3 py-1.5 rounded-full">
|
||||
<Info size={14} />
|
||||
<p className="font-medium">Accepts PNG, JPG (max 5MB)</p>
|
||||
</div>
|
||||
<p className="text-gray-400">Recommended size: 200x100 pixels</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="thumbnail" className="mt-2">
|
||||
<div className="flex flex-col space-y-5 w-full">
|
||||
<div className="w-full bg-gradient-to-b from-gray-50 to-white rounded-xl transition-all duration-300 py-8">
|
||||
<div className="flex flex-col justify-center items-center space-y-8">
|
||||
<div className="relative group">
|
||||
<div
|
||||
className={cn(
|
||||
"w-[200px] sm:w-[250px] h-[100px] sm:h-[125px] bg-contain bg-no-repeat bg-center rounded-lg shadow-md bg-white",
|
||||
"border-2 border-gray-100 hover:border-purple-200 transition-all duration-300",
|
||||
isThumbnailUploading && "opacity-50"
|
||||
)}
|
||||
style={{ backgroundImage: `url(${localThumbnail || getOrgThumbnailMediaDirectory(org?.org_uuid, org?.thumbnail_image)})` }}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center space-y-4">
|
||||
<input
|
||||
type="file"
|
||||
id="thumbnailInput"
|
||||
accept={SUPPORTED_FILES}
|
||||
className="hidden"
|
||||
onChange={handleThumbnailChange}
|
||||
/>
|
||||
<button
|
||||
type="button"
|
||||
disabled={isThumbnailUploading}
|
||||
className={cn(
|
||||
"font-medium text-sm px-6 py-2.5 rounded-full",
|
||||
"bg-gradient-to-r from-purple-500 to-purple-600 text-white",
|
||||
"hover:from-purple-600 hover:to-purple-700",
|
||||
"shadow-sm hover:shadow transition-all duration-300",
|
||||
"flex items-center space-x-2",
|
||||
isThumbnailUploading && "opacity-75 cursor-not-allowed"
|
||||
)}
|
||||
onClick={handleImageButtonClick('thumbnailInput')}
|
||||
>
|
||||
<UploadCloud size={18} className={cn("", isThumbnailUploading && "animate-bounce")} />
|
||||
<span>{isThumbnailUploading ? 'Uploading...' : 'Upload New Thumbnail'}</span>
|
||||
</button>
|
||||
|
||||
<div className="flex flex-col text-xs space-y-2 items-center text-gray-500">
|
||||
<div className="flex items-center space-x-2 bg-purple-50 text-purple-700 px-3 py-1.5 rounded-full">
|
||||
<Info size={14} />
|
||||
<p className="font-medium">Accepts PNG, JPG (max 5MB)</p>
|
||||
</div>
|
||||
<p className="text-gray-400">Recommended size: 200x100 pixels</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="previews" className="mt-4">
|
||||
<div className="flex flex-col space-y-5 w-full">
|
||||
<div className="w-full bg-gradient-to-b from-gray-50 to-white rounded-xl transition-all duration-300 py-6">
|
||||
<div className="flex flex-col justify-center items-center space-y-6">
|
||||
<DragDropContext onDragEnd={handleDragEnd}>
|
||||
<Droppable droppableId="previews" direction="horizontal">
|
||||
{(provided) => (
|
||||
<div
|
||||
className={cn(
|
||||
"flex gap-4 w-full max-w-5xl p-4 overflow-x-auto pb-6",
|
||||
previews.length === 0 && "justify-center"
|
||||
)}
|
||||
{...provided.droppableProps}
|
||||
ref={provided.innerRef}
|
||||
>
|
||||
{previews.map((preview, index) => (
|
||||
<Draggable
|
||||
key={preview.id}
|
||||
draggableId={preview.id}
|
||||
index={index}
|
||||
>
|
||||
{(provided, snapshot) => (
|
||||
<div
|
||||
ref={provided.innerRef}
|
||||
{...provided.draggableProps}
|
||||
className={cn(
|
||||
"relative group flex-shrink-0",
|
||||
"w-48",
|
||||
snapshot.isDragging ? "scale-105 z-50" : "hover:scale-102",
|
||||
)}
|
||||
>
|
||||
<button
|
||||
onClick={() => removePreview(preview.id)}
|
||||
className={cn(
|
||||
"absolute -top-2 -right-2 bg-red-500 hover:bg-red-600 text-white rounded-full p-1.5",
|
||||
"opacity-0 group-hover:opacity-100 z-10 shadow-sm",
|
||||
"transition-opacity duration-200"
|
||||
)}
|
||||
>
|
||||
<X size={14} />
|
||||
</button>
|
||||
<div
|
||||
{...provided.dragHandleProps}
|
||||
className={cn(
|
||||
"absolute -top-2 -left-2 bg-gray-600 hover:bg-gray-700 text-white rounded-full p-1.5",
|
||||
"opacity-0 group-hover:opacity-100 cursor-grab active:cursor-grabbing z-10 shadow-sm",
|
||||
"transition-opacity duration-200"
|
||||
)}
|
||||
>
|
||||
<GripVertical size={14} />
|
||||
</div>
|
||||
{preview.type === 'image' ? (
|
||||
<div
|
||||
className={cn(
|
||||
`w-full ${PREVIEW_HEIGHT} bg-contain bg-no-repeat bg-center rounded-xl bg-white`,
|
||||
"border border-gray-200 hover:border-gray-300",
|
||||
"transition-colors duration-200",
|
||||
snapshot.isDragging ? "shadow-lg" : "shadow-sm hover:shadow-md"
|
||||
)}
|
||||
style={{
|
||||
backgroundImage: `url(${getOrgPreviewMediaDirectory(org?.org_uuid, preview.id)})`,
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<div className={cn(
|
||||
`w-full ${PREVIEW_HEIGHT} relative rounded-xl overflow-hidden`,
|
||||
"border border-gray-200 hover:border-gray-300 transition-colors duration-200",
|
||||
snapshot.isDragging ? "shadow-lg" : "shadow-sm hover:shadow-md"
|
||||
)}>
|
||||
<div
|
||||
className="absolute inset-0 bg-cover bg-center"
|
||||
style={{ backgroundImage: `url(${preview.thumbnailUrl})` }}
|
||||
/>
|
||||
<div className="absolute inset-0 bg-black bg-opacity-40 backdrop-blur-[2px] flex items-center justify-center">
|
||||
{preview.type === 'youtube' ? (
|
||||
<SiYoutube className="w-10 h-10 text-red-500" />
|
||||
) : (
|
||||
<SiLoom className="w-10 h-10 text-blue-500" />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Draggable>
|
||||
))}
|
||||
{provided.placeholder}
|
||||
{previews.length < 4 && (
|
||||
<div className={cn(
|
||||
"flex-shrink-0 w-48",
|
||||
previews.length === 0 && "m-0"
|
||||
)}>
|
||||
<Dialog open={videoDialogOpen} onOpenChange={(open) => {
|
||||
setVideoDialogOpen(open);
|
||||
if (!open) resetVideoDialog();
|
||||
}}>
|
||||
<DialogTrigger asChild>
|
||||
<button
|
||||
className={cn(
|
||||
`w-full ${PREVIEW_HEIGHT}`,
|
||||
"border-2 border-dashed border-gray-200 rounded-xl",
|
||||
"hover:border-blue-300 hover:bg-blue-50/50 transition-all duration-200",
|
||||
"flex flex-col items-center justify-center space-y-2 group"
|
||||
)}
|
||||
>
|
||||
<div className="bg-blue-50 rounded-full p-2 group-hover:bg-blue-100 transition-colors duration-200">
|
||||
<Plus size={20} className="text-blue-500" />
|
||||
</div>
|
||||
<span className="text-sm font-medium text-gray-600">Add Preview</span>
|
||||
</button>
|
||||
</DialogTrigger>
|
||||
<DialogContent className="sm:max-w-[600px]">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Add Preview</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div className={cn(
|
||||
"p-6",
|
||||
selectedService ? "space-y-4" : "grid grid-cols-3 gap-6"
|
||||
)}>
|
||||
{!selectedService ? (
|
||||
<>
|
||||
{ADD_PREVIEW_OPTIONS.map((option) => (
|
||||
<button
|
||||
key={option.id}
|
||||
onClick={() => option.id === 'image'
|
||||
? option.onClick()
|
||||
: option.onClick(setSelectedService)
|
||||
}
|
||||
className={cn(
|
||||
"w-full aspect-square rounded-2xl border-2 border-dashed",
|
||||
`hover:border-${option.color}-300 hover:bg-${option.color}-50/50`,
|
||||
"transition-all duration-200",
|
||||
"flex flex-col items-center justify-center space-y-4",
|
||||
option.id === 'image' && isPreviewUploading && "opacity-50 cursor-not-allowed"
|
||||
)}
|
||||
>
|
||||
<div className={cn(
|
||||
DIALOG_ICON_SIZE,
|
||||
`rounded-full bg-${option.color}-50`,
|
||||
"flex items-center justify-center"
|
||||
)}>
|
||||
<option.icon className={`w-8 h-8 text-${option.color}-500`} />
|
||||
</div>
|
||||
<div className="text-center">
|
||||
<p className="font-medium text-gray-700">{option.title}</p>
|
||||
<p className="text-sm text-gray-500 mt-1">{option.description}</p>
|
||||
</div>
|
||||
</button>
|
||||
))}
|
||||
<input
|
||||
type="file"
|
||||
id="previewInput"
|
||||
accept={SUPPORTED_FILES}
|
||||
className="hidden"
|
||||
onChange={handlePreviewUpload}
|
||||
multiple
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
<div className="space-y-4">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center space-x-3">
|
||||
<div className={cn(
|
||||
"w-10 h-10 rounded-full flex items-center justify-center",
|
||||
selectedService === 'youtube' ? "bg-red-50" : "bg-blue-50"
|
||||
)}>
|
||||
{selectedService === 'youtube' ? (
|
||||
<SiYoutube className="w-5 h-5 text-red-500" />
|
||||
) : (
|
||||
<SiLoom className="w-5 h-5 text-blue-500" />
|
||||
)}
|
||||
</div>
|
||||
<div>
|
||||
<h3 className="font-medium text-gray-900">
|
||||
{selectedService === 'youtube' ? 'Add YouTube Video' : 'Add Loom Video'}
|
||||
</h3>
|
||||
<p className="text-sm text-gray-500">
|
||||
{selectedService === 'youtube'
|
||||
? 'Paste your YouTube video URL'
|
||||
: 'Paste your Loom video URL'}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<button
|
||||
onClick={() => setSelectedService(null)}
|
||||
className="text-gray-400 hover:text-gray-500 transition-colors"
|
||||
>
|
||||
<X size={20} />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="space-y-3">
|
||||
<Input
|
||||
id="videoUrlInput"
|
||||
placeholder={selectedService === 'youtube'
|
||||
? 'https://youtube.com/watch?v=...'
|
||||
: 'https://www.loom.com/share/...'}
|
||||
value={videoUrl}
|
||||
onChange={(e) => setVideoUrl(e.target.value)}
|
||||
className="w-full"
|
||||
autoFocus
|
||||
/>
|
||||
<Button
|
||||
onClick={() => handleVideoSubmit(selectedService)}
|
||||
className={cn(
|
||||
"w-full",
|
||||
selectedService === 'youtube'
|
||||
? "bg-red-500 hover:bg-red-600"
|
||||
: "bg-blue-500 hover:bg-blue-600"
|
||||
)}
|
||||
disabled={!videoUrl}
|
||||
>
|
||||
Add Video
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</Droppable>
|
||||
</DragDropContext>
|
||||
|
||||
<div className="flex items-center space-x-2 bg-gray-50 text-gray-600 px-4 py-2 rounded-full">
|
||||
<Info size={14} />
|
||||
<p className="text-sm">Drag to reorder • Maximum 4 previews • Supports images & videos</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
</Tabs>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue