91 lines
2.8 KiB
TypeScript
91 lines
2.8 KiB
TypeScript
/**
|
|
* File: VideoCard.tsx
|
|
* Created by: AI Assistant
|
|
* Date: 2025-12-05
|
|
* Purpose: Video card component for kreatiVortex platform
|
|
* Part of: kreatiVortex - Platform Pembelajaran Tari Online
|
|
*/
|
|
|
|
'use client';
|
|
|
|
import { Eye, User, Calendar } from 'lucide-react';
|
|
import VideoThumbnail from './VideoThumbnail';
|
|
import VideoActions from './VideoActions';
|
|
|
|
interface VideoData extends Record<string, unknown> {
|
|
id: string;
|
|
title: string;
|
|
description: string;
|
|
videoType: 'YOUTUBE' | 'LOCAL';
|
|
videoUrl: string;
|
|
viewCount: number;
|
|
createdAt: string;
|
|
isPublic: boolean;
|
|
uploaderId: string;
|
|
uploader: {
|
|
user: {
|
|
name: string;
|
|
};
|
|
};
|
|
}
|
|
|
|
interface VideoCardProps {
|
|
video: VideoData;
|
|
userProfile: any;
|
|
onDelete: (videoId: string) => void;
|
|
}
|
|
|
|
function VideoCard({ video, userProfile, onDelete }: VideoCardProps) {
|
|
|
|
return (
|
|
<div className="bg-white/10 backdrop-blur-sm rounded-xl border border-white/20 overflow-hidden hover:bg-white/15 transition-all duration-300 group">
|
|
{/* Video Thumbnail */}
|
|
<VideoThumbnail video={video} />
|
|
|
|
{/* Video Info */}
|
|
<div className="p-4 sm:p-6">
|
|
<div className="flex justify-between items-start mb-3">
|
|
<h3 className="text-base sm:text-lg font-semibold text-white group-hover:text-gold-400 transition-colors line-clamp-2 flex-1 mr-2 sm:mr-3">
|
|
{video.title}
|
|
</h3>
|
|
<div className="flex items-center text-xs sm:text-sm text-gray-400 whitespace-nowrap">
|
|
<Eye className="w-3 h-3 sm:w-4 sm:h-4 mr-1" />
|
|
{video.viewCount || 0}
|
|
</div>
|
|
</div>
|
|
|
|
<p className="text-gray-300 text-xs sm:text-sm line-clamp-2 sm:line-clamp-3 mb-3 sm:mb-4">
|
|
{video.description}
|
|
</p>
|
|
|
|
{/* Video Metadata */}
|
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between text-xs sm:text-sm text-gray-400 mb-3 sm:mb-4 space-y-2 sm:space-y-0">
|
|
<div className="flex items-center">
|
|
<User className="w-3 h-3 sm:w-4 sm:h-4 mr-1 sm:mr-2" />
|
|
<span className="truncate max-w-[120px] sm:max-w-none">{video.uploader.user.name}</span>
|
|
</div>
|
|
<div className="flex items-center">
|
|
<Calendar className="w-3 h-3 sm:w-4 sm:h-4 mr-1" />
|
|
{new Date(video.createdAt).toLocaleDateString('id-ID', {
|
|
year: 'numeric',
|
|
month: 'short',
|
|
day: 'numeric'
|
|
})}
|
|
</div>
|
|
</div>
|
|
|
|
{/* Video Actions */}
|
|
<div className="pt-3 sm:pt-4 border-t border-gray-700">
|
|
<VideoActions
|
|
video={video}
|
|
userProfile={userProfile}
|
|
onDelete={onDelete}
|
|
variant="card"
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default VideoCard; |