File size: 2,069 Bytes
a8aec61 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
'use client'
import { memo } from 'react'
import { toast } from 'sonner'
import { type VideoData } from '@/types/playground'
import Icon from '@/components/ui/icon'
const VideoItem = memo(({ video }: { video: VideoData }) => {
const videoUrl = video.url
const handleDownload = async () => {
try {
toast.loading('Downloading video...')
const response = await fetch(videoUrl)
if (!response.ok) throw new Error('Network response was not ok')
const blob = await response.blob()
const fileExtension = videoUrl.split('.').pop() ?? 'mp4'
const fileName = `video-${Date.now()}.${fileExtension}`
const url = window.URL.createObjectURL(blob)
const a = document.createElement('a')
a.href = url
a.download = fileName
document.body.appendChild(a)
a.click()
window.URL.revokeObjectURL(url)
document.body.removeChild(a)
toast.dismiss()
toast.success('Video downloaded successfully')
} catch {
toast.dismiss()
toast.error('Failed to download video')
}
}
return (
<div>
<div className="group relative w-full max-w-xl">
{}
<video
src={videoUrl}
autoPlay
muted
loop
controls
className="w-full rounded-lg"
style={{ aspectRatio: '16 / 9' }}
/>
<button
type="button"
onClick={handleDownload}
className="absolute right-2 top-2 flex items-center justify-center rounded-sm bg-secondary/80 p-1.5 opacity-0 transition-opacity duration-200 hover:bg-secondary group-hover:opacity-100"
aria-label="Download GIF"
>
<Icon type="download" size="xs" />
</button>
</div>
</div>
)
})
VideoItem.displayName = 'VideoItem'
const Videos = memo(({ videos }: { videos: VideoData[] }) => (
<div className="flex flex-col gap-4">
{videos.map((video) => (
<VideoItem key={video.id} video={video} />
))}
</div>
))
Videos.displayName = 'Videos'
export default Videos
|