feat: replace video placeholder icons with interactive video elements in preview components

This commit is contained in:
암냥 2026-04-23 19:23:01 +09:00
commit 3519e1307b
No known key found for this signature in database
2 changed files with 35 additions and 26 deletions

View file

@ -549,19 +549,24 @@ export default function App() {
className="group relative block overflow-hidden image-scale"
title={`작가 ${photo.author}`}
>
<img
src={photo.src}
alt={photo.alt}
loading="lazy"
decoding="async"
className="block w-full"
/>
{photo.mediaType === "video" && (
<div className="absolute right-2 top-2 rounded-full bg-black/40 p-1.5 text-white backdrop-blur-sm">
<svg className="h-3.5 w-3.5" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM9.555 7.168A1 1 0 008 8v4a1 1 0 001.555.832l3-2a1 1 0 000-1.664l-3-2z" clipRule="evenodd" />
</svg>
</div>
{photo.mediaType === "video" ? (
<video
src={photo.src}
poster={photo.thumbnailUrl}
autoPlay
muted
loop
playsInline
className="block w-full"
/>
) : (
<img
src={photo.src}
alt={photo.alt}
loading="lazy"
decoding="async"
className="block w-full"
/>
)}
<div className="absolute inset-x-3 bottom-3 translate-y-3 opacity-0 transition-all duration-200 group-hover:translate-y-0 group-hover:opacity-100">
<button