576 lines
16 KiB
TypeScript
576 lines
16 KiB
TypeScript
|
"use client";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* UnifiedMedia
|
||
|
|
*
|
||
|
|
* 통합 미디어 컴포넌트
|
||
|
|
* - file: 파일 업로드
|
||
|
|
* - image: 이미지 업로드/표시
|
||
|
|
* - video: 비디오
|
||
|
|
* - audio: 오디오
|
||
|
|
*/
|
||
|
|
|
||
|
|
import React, { forwardRef, useCallback, useRef, useState } from "react";
|
||
|
|
import { Label } from "@/components/ui/label";
|
||
|
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { cn } from "@/lib/utils";
|
||
|
|
import { UnifiedMediaProps } from "@/types/unified-components";
|
||
|
|
import { Upload, X, File, Image as ImageIcon, Video, Music, Eye, Download, Trash2 } from "lucide-react";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 파일 크기 포맷팅
|
||
|
|
*/
|
||
|
|
function formatFileSize(bytes: number): string {
|
||
|
|
if (bytes === 0) return "0 Bytes";
|
||
|
|
const k = 1024;
|
||
|
|
const sizes = ["Bytes", "KB", "MB", "GB"];
|
||
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
||
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + " " + sizes[i];
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 파일 타입 아이콘 가져오기
|
||
|
|
*/
|
||
|
|
function getFileIcon(type: string) {
|
||
|
|
if (type.startsWith("image/")) return ImageIcon;
|
||
|
|
if (type.startsWith("video/")) return Video;
|
||
|
|
if (type.startsWith("audio/")) return Music;
|
||
|
|
return File;
|
||
|
|
}
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 파일 업로드 컴포넌트
|
||
|
|
*/
|
||
|
|
const FileUploader = forwardRef<HTMLDivElement, {
|
||
|
|
value?: string | string[];
|
||
|
|
onChange?: (value: string | string[]) => void;
|
||
|
|
multiple?: boolean;
|
||
|
|
accept?: string;
|
||
|
|
maxSize?: number;
|
||
|
|
disabled?: boolean;
|
||
|
|
uploadEndpoint?: string;
|
||
|
|
className?: string;
|
||
|
|
}>(({
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
multiple = false,
|
||
|
|
accept = "*",
|
||
|
|
maxSize = 10485760, // 10MB
|
||
|
|
disabled,
|
||
|
|
uploadEndpoint = "/api/upload",
|
||
|
|
className
|
||
|
|
}, ref) => {
|
||
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
||
|
|
const [isDragging, setIsDragging] = useState(false);
|
||
|
|
const [isUploading, setIsUploading] = useState(false);
|
||
|
|
const [error, setError] = useState<string | null>(null);
|
||
|
|
|
||
|
|
const files = Array.isArray(value) ? value : value ? [value] : [];
|
||
|
|
|
||
|
|
// 파일 선택 핸들러
|
||
|
|
const handleFileSelect = useCallback(async (selectedFiles: FileList | null) => {
|
||
|
|
if (!selectedFiles || selectedFiles.length === 0) return;
|
||
|
|
|
||
|
|
setError(null);
|
||
|
|
const fileArray = Array.from(selectedFiles);
|
||
|
|
|
||
|
|
// 크기 검증
|
||
|
|
for (const file of fileArray) {
|
||
|
|
if (file.size > maxSize) {
|
||
|
|
setError(`파일 크기가 ${formatFileSize(maxSize)}를 초과합니다: ${file.name}`);
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
setIsUploading(true);
|
||
|
|
|
||
|
|
try {
|
||
|
|
const uploadedUrls: string[] = [];
|
||
|
|
|
||
|
|
for (const file of fileArray) {
|
||
|
|
const formData = new FormData();
|
||
|
|
formData.append("file", file);
|
||
|
|
|
||
|
|
const response = await fetch(uploadEndpoint, {
|
||
|
|
method: "POST",
|
||
|
|
body: formData,
|
||
|
|
});
|
||
|
|
|
||
|
|
if (!response.ok) {
|
||
|
|
throw new Error(`업로드 실패: ${file.name}`);
|
||
|
|
}
|
||
|
|
|
||
|
|
const data = await response.json();
|
||
|
|
if (data.success && data.url) {
|
||
|
|
uploadedUrls.push(data.url);
|
||
|
|
} else if (data.filePath) {
|
||
|
|
uploadedUrls.push(data.filePath);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (multiple) {
|
||
|
|
onChange?.([...files, ...uploadedUrls]);
|
||
|
|
} else {
|
||
|
|
onChange?.(uploadedUrls[0] || "");
|
||
|
|
}
|
||
|
|
} catch (err) {
|
||
|
|
setError(err instanceof Error ? err.message : "업로드 중 오류가 발생했습니다");
|
||
|
|
} finally {
|
||
|
|
setIsUploading(false);
|
||
|
|
}
|
||
|
|
}, [files, multiple, maxSize, uploadEndpoint, onChange]);
|
||
|
|
|
||
|
|
// 드래그 앤 드롭 핸들러
|
||
|
|
const handleDragOver = useCallback((e: React.DragEvent) => {
|
||
|
|
e.preventDefault();
|
||
|
|
setIsDragging(true);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const handleDragLeave = useCallback((e: React.DragEvent) => {
|
||
|
|
e.preventDefault();
|
||
|
|
setIsDragging(false);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
const handleDrop = useCallback((e: React.DragEvent) => {
|
||
|
|
e.preventDefault();
|
||
|
|
setIsDragging(false);
|
||
|
|
handleFileSelect(e.dataTransfer.files);
|
||
|
|
}, [handleFileSelect]);
|
||
|
|
|
||
|
|
// 파일 삭제 핸들러
|
||
|
|
const handleRemove = useCallback((index: number) => {
|
||
|
|
const newFiles = files.filter((_, i) => i !== index);
|
||
|
|
onChange?.(multiple ? newFiles : "");
|
||
|
|
}, [files, multiple, onChange]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div ref={ref} className={cn("space-y-3", className)}>
|
||
|
|
{/* 업로드 영역 */}
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
"border-2 border-dashed rounded-lg p-6 text-center transition-colors",
|
||
|
|
isDragging && "border-primary bg-primary/5",
|
||
|
|
disabled && "opacity-50 cursor-not-allowed",
|
||
|
|
!disabled && "cursor-pointer hover:border-primary/50"
|
||
|
|
)}
|
||
|
|
onClick={() => !disabled && inputRef.current?.click()}
|
||
|
|
onDragOver={handleDragOver}
|
||
|
|
onDragLeave={handleDragLeave}
|
||
|
|
onDrop={handleDrop}
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
ref={inputRef}
|
||
|
|
type="file"
|
||
|
|
accept={accept}
|
||
|
|
multiple={multiple}
|
||
|
|
disabled={disabled}
|
||
|
|
onChange={(e) => handleFileSelect(e.target.files)}
|
||
|
|
className="hidden"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{isUploading ? (
|
||
|
|
<div className="flex flex-col items-center gap-2">
|
||
|
|
<div className="animate-spin h-8 w-8 border-2 border-primary border-t-transparent rounded-full" />
|
||
|
|
<span className="text-sm text-muted-foreground">업로드 중...</span>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="flex flex-col items-center gap-2">
|
||
|
|
<Upload className="h-8 w-8 text-muted-foreground" />
|
||
|
|
<div className="text-sm">
|
||
|
|
<span className="font-medium text-primary">클릭</span>
|
||
|
|
<span className="text-muted-foreground"> 또는 파일을 드래그하세요</span>
|
||
|
|
</div>
|
||
|
|
<div className="text-xs text-muted-foreground">
|
||
|
|
최대 {formatFileSize(maxSize)}
|
||
|
|
{accept !== "*" && ` (${accept})`}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
|
||
|
|
{/* 에러 메시지 */}
|
||
|
|
{error && (
|
||
|
|
<div className="text-sm text-destructive">{error}</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 업로드된 파일 목록 */}
|
||
|
|
{files.length > 0 && (
|
||
|
|
<div className="space-y-2">
|
||
|
|
{files.map((file, index) => (
|
||
|
|
<div
|
||
|
|
key={index}
|
||
|
|
className="flex items-center gap-2 p-2 bg-muted/50 rounded-md"
|
||
|
|
>
|
||
|
|
<File className="h-4 w-4 text-muted-foreground" />
|
||
|
|
<span className="flex-1 text-sm truncate">{file.split("/").pop()}</span>
|
||
|
|
<Button
|
||
|
|
variant="ghost"
|
||
|
|
size="icon"
|
||
|
|
className="h-6 w-6"
|
||
|
|
onClick={() => handleRemove(index)}
|
||
|
|
>
|
||
|
|
<X className="h-3 w-3" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
FileUploader.displayName = "FileUploader";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 이미지 업로드/표시 컴포넌트
|
||
|
|
*/
|
||
|
|
const ImageUploader = forwardRef<HTMLDivElement, {
|
||
|
|
value?: string | string[];
|
||
|
|
onChange?: (value: string | string[]) => void;
|
||
|
|
multiple?: boolean;
|
||
|
|
accept?: string;
|
||
|
|
maxSize?: number;
|
||
|
|
preview?: boolean;
|
||
|
|
disabled?: boolean;
|
||
|
|
uploadEndpoint?: string;
|
||
|
|
className?: string;
|
||
|
|
}>(({
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
multiple = false,
|
||
|
|
accept = "image/*",
|
||
|
|
maxSize = 10485760,
|
||
|
|
preview = true,
|
||
|
|
disabled,
|
||
|
|
uploadEndpoint = "/api/upload",
|
||
|
|
className
|
||
|
|
}, ref) => {
|
||
|
|
const inputRef = useRef<HTMLInputElement>(null);
|
||
|
|
const [isDragging, setIsDragging] = useState(false);
|
||
|
|
const [isUploading, setIsUploading] = useState(false);
|
||
|
|
const [previewUrl, setPreviewUrl] = useState<string | null>(null);
|
||
|
|
|
||
|
|
const images = Array.isArray(value) ? value : value ? [value] : [];
|
||
|
|
|
||
|
|
// 파일 선택 핸들러
|
||
|
|
const handleFileSelect = useCallback(async (selectedFiles: FileList | null) => {
|
||
|
|
if (!selectedFiles || selectedFiles.length === 0) return;
|
||
|
|
|
||
|
|
setIsUploading(true);
|
||
|
|
|
||
|
|
try {
|
||
|
|
const fileArray = Array.from(selectedFiles);
|
||
|
|
const uploadedUrls: string[] = [];
|
||
|
|
|
||
|
|
for (const file of fileArray) {
|
||
|
|
// 미리보기 생성
|
||
|
|
if (preview) {
|
||
|
|
const reader = new FileReader();
|
||
|
|
reader.onload = () => setPreviewUrl(reader.result as string);
|
||
|
|
reader.readAsDataURL(file);
|
||
|
|
}
|
||
|
|
|
||
|
|
const formData = new FormData();
|
||
|
|
formData.append("file", file);
|
||
|
|
|
||
|
|
const response = await fetch(uploadEndpoint, {
|
||
|
|
method: "POST",
|
||
|
|
body: formData,
|
||
|
|
});
|
||
|
|
|
||
|
|
if (response.ok) {
|
||
|
|
const data = await response.json();
|
||
|
|
if (data.success && data.url) {
|
||
|
|
uploadedUrls.push(data.url);
|
||
|
|
} else if (data.filePath) {
|
||
|
|
uploadedUrls.push(data.filePath);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
if (multiple) {
|
||
|
|
onChange?.([...images, ...uploadedUrls]);
|
||
|
|
} else {
|
||
|
|
onChange?.(uploadedUrls[0] || "");
|
||
|
|
}
|
||
|
|
} finally {
|
||
|
|
setIsUploading(false);
|
||
|
|
setPreviewUrl(null);
|
||
|
|
}
|
||
|
|
}, [images, multiple, preview, uploadEndpoint, onChange]);
|
||
|
|
|
||
|
|
// 이미지 삭제 핸들러
|
||
|
|
const handleRemove = useCallback((index: number) => {
|
||
|
|
const newImages = images.filter((_, i) => i !== index);
|
||
|
|
onChange?.(multiple ? newImages : "");
|
||
|
|
}, [images, multiple, onChange]);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div ref={ref} className={cn("space-y-3", className)}>
|
||
|
|
{/* 이미지 미리보기 */}
|
||
|
|
{preview && images.length > 0 && (
|
||
|
|
<div className={cn(
|
||
|
|
"grid gap-2",
|
||
|
|
multiple ? "grid-cols-2 sm:grid-cols-3 lg:grid-cols-4" : "grid-cols-1"
|
||
|
|
)}>
|
||
|
|
{images.map((src, index) => (
|
||
|
|
<div key={index} className="relative group aspect-square rounded-lg overflow-hidden border">
|
||
|
|
<img
|
||
|
|
src={src}
|
||
|
|
alt={`이미지 ${index + 1}`}
|
||
|
|
className="w-full h-full object-cover"
|
||
|
|
/>
|
||
|
|
<div className="absolute inset-0 bg-black/50 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center gap-2">
|
||
|
|
<Button
|
||
|
|
variant="secondary"
|
||
|
|
size="icon"
|
||
|
|
className="h-8 w-8"
|
||
|
|
onClick={() => window.open(src, "_blank")}
|
||
|
|
>
|
||
|
|
<Eye className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
<Button
|
||
|
|
variant="destructive"
|
||
|
|
size="icon"
|
||
|
|
className="h-8 w-8"
|
||
|
|
onClick={() => handleRemove(index)}
|
||
|
|
disabled={disabled}
|
||
|
|
>
|
||
|
|
<Trash2 className="h-4 w-4" />
|
||
|
|
</Button>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{/* 업로드 버튼 */}
|
||
|
|
{(!images.length || multiple) && (
|
||
|
|
<div
|
||
|
|
className={cn(
|
||
|
|
"border-2 border-dashed rounded-lg p-4 text-center transition-colors",
|
||
|
|
isDragging && "border-primary bg-primary/5",
|
||
|
|
disabled && "opacity-50 cursor-not-allowed",
|
||
|
|
!disabled && "cursor-pointer hover:border-primary/50"
|
||
|
|
)}
|
||
|
|
onClick={() => !disabled && inputRef.current?.click()}
|
||
|
|
onDragOver={(e) => { e.preventDefault(); setIsDragging(true); }}
|
||
|
|
onDragLeave={(e) => { e.preventDefault(); setIsDragging(false); }}
|
||
|
|
onDrop={(e) => { e.preventDefault(); setIsDragging(false); handleFileSelect(e.dataTransfer.files); }}
|
||
|
|
>
|
||
|
|
<input
|
||
|
|
ref={inputRef}
|
||
|
|
type="file"
|
||
|
|
accept={accept}
|
||
|
|
multiple={multiple}
|
||
|
|
disabled={disabled}
|
||
|
|
onChange={(e) => handleFileSelect(e.target.files)}
|
||
|
|
className="hidden"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{isUploading ? (
|
||
|
|
<div className="flex items-center justify-center gap-2">
|
||
|
|
<div className="animate-spin h-5 w-5 border-2 border-primary border-t-transparent rounded-full" />
|
||
|
|
<span className="text-sm text-muted-foreground">업로드 중...</span>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="flex items-center justify-center gap-2">
|
||
|
|
<ImageIcon className="h-5 w-5 text-muted-foreground" />
|
||
|
|
<span className="text-sm text-muted-foreground">
|
||
|
|
이미지 {multiple ? "추가" : "선택"}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
ImageUploader.displayName = "ImageUploader";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 비디오 컴포넌트
|
||
|
|
*/
|
||
|
|
const VideoPlayer = forwardRef<HTMLDivElement, {
|
||
|
|
value?: string;
|
||
|
|
className?: string;
|
||
|
|
}>(({ value, className }, ref) => {
|
||
|
|
if (!value) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
ref={ref}
|
||
|
|
className={cn(
|
||
|
|
"aspect-video flex items-center justify-center border rounded-lg bg-muted/50",
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Video className="h-8 w-8 text-muted-foreground" />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div ref={ref} className={cn("aspect-video rounded-lg overflow-hidden", className)}>
|
||
|
|
<video
|
||
|
|
src={value}
|
||
|
|
controls
|
||
|
|
className="w-full h-full object-cover"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
VideoPlayer.displayName = "VideoPlayer";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 오디오 컴포넌트
|
||
|
|
*/
|
||
|
|
const AudioPlayer = forwardRef<HTMLDivElement, {
|
||
|
|
value?: string;
|
||
|
|
className?: string;
|
||
|
|
}>(({ value, className }, ref) => {
|
||
|
|
if (!value) {
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
ref={ref}
|
||
|
|
className={cn(
|
||
|
|
"h-12 flex items-center justify-center border rounded-lg bg-muted/50",
|
||
|
|
className
|
||
|
|
)}
|
||
|
|
>
|
||
|
|
<Music className="h-5 w-5 text-muted-foreground" />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div ref={ref} className={cn("", className)}>
|
||
|
|
<audio
|
||
|
|
src={value}
|
||
|
|
controls
|
||
|
|
className="w-full"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
AudioPlayer.displayName = "AudioPlayer";
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 메인 UnifiedMedia 컴포넌트
|
||
|
|
*/
|
||
|
|
export const UnifiedMedia = forwardRef<HTMLDivElement, UnifiedMediaProps>(
|
||
|
|
(props, ref) => {
|
||
|
|
const {
|
||
|
|
id,
|
||
|
|
label,
|
||
|
|
required,
|
||
|
|
readonly,
|
||
|
|
disabled,
|
||
|
|
style,
|
||
|
|
size,
|
||
|
|
config: configProp,
|
||
|
|
value,
|
||
|
|
onChange,
|
||
|
|
} = props;
|
||
|
|
|
||
|
|
// config가 없으면 기본값 사용
|
||
|
|
const config = configProp || { type: "image" as const };
|
||
|
|
|
||
|
|
// 타입별 미디어 컴포넌트 렌더링
|
||
|
|
const renderMedia = () => {
|
||
|
|
const isDisabled = disabled || readonly;
|
||
|
|
const mediaType = config.type || "image";
|
||
|
|
|
||
|
|
switch (mediaType) {
|
||
|
|
case "file":
|
||
|
|
return (
|
||
|
|
<FileUploader
|
||
|
|
value={value}
|
||
|
|
onChange={onChange}
|
||
|
|
multiple={config.multiple}
|
||
|
|
accept={config.accept}
|
||
|
|
maxSize={config.maxSize}
|
||
|
|
disabled={isDisabled}
|
||
|
|
uploadEndpoint={config.uploadEndpoint}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
case "image":
|
||
|
|
return (
|
||
|
|
<ImageUploader
|
||
|
|
value={value}
|
||
|
|
onChange={onChange}
|
||
|
|
multiple={config.multiple}
|
||
|
|
accept={config.accept || "image/*"}
|
||
|
|
maxSize={config.maxSize}
|
||
|
|
preview={config.preview}
|
||
|
|
disabled={isDisabled}
|
||
|
|
uploadEndpoint={config.uploadEndpoint}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
case "video":
|
||
|
|
return (
|
||
|
|
<VideoPlayer
|
||
|
|
value={typeof value === "string" ? value : value?.[0]}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
case "audio":
|
||
|
|
return (
|
||
|
|
<AudioPlayer
|
||
|
|
value={typeof value === "string" ? value : value?.[0]}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
|
||
|
|
default:
|
||
|
|
return (
|
||
|
|
<FileUploader
|
||
|
|
value={value}
|
||
|
|
onChange={onChange}
|
||
|
|
disabled={isDisabled}
|
||
|
|
/>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const showLabel = label && style?.labelDisplay !== false;
|
||
|
|
const componentWidth = size?.width || style?.width;
|
||
|
|
const componentHeight = size?.height || style?.height;
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div
|
||
|
|
ref={ref}
|
||
|
|
id={id}
|
||
|
|
className="flex flex-col"
|
||
|
|
style={{
|
||
|
|
width: componentWidth,
|
||
|
|
height: componentHeight,
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{showLabel && (
|
||
|
|
<Label
|
||
|
|
htmlFor={id}
|
||
|
|
style={{
|
||
|
|
fontSize: style?.labelFontSize,
|
||
|
|
color: style?.labelColor,
|
||
|
|
fontWeight: style?.labelFontWeight,
|
||
|
|
marginBottom: style?.labelMarginBottom,
|
||
|
|
}}
|
||
|
|
className="text-sm font-medium flex-shrink-0"
|
||
|
|
>
|
||
|
|
{label}
|
||
|
|
{required && <span className="text-orange-500 ml-0.5">*</span>}
|
||
|
|
</Label>
|
||
|
|
)}
|
||
|
|
<div className="flex-1 min-h-0">
|
||
|
|
{renderMedia()}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
|
||
|
|
UnifiedMedia.displayName = "UnifiedMedia";
|
||
|
|
|
||
|
|
export default UnifiedMedia;
|
||
|
|
|