imnyang/akiyama.mizuki.guru
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

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

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

30
apps/frontend/src/app/add/page.tsx
View file

@ -466,19 +466,23 @@ export default function AddPage() {
key={`${item.url}-${index}`}
className={`group relative block cursor-pointer overflow-hidden border bg-white/20 transition ${selected[index] ? "border-foreground/35" : "border-border"}`}
>
<img
src={item.url}
alt={`preview ${index + 1}`}
loading="lazy"
decoding="async"
className={`aspect-4/5 w-full object-cover transition ${selected[index] ? "opacity-100" : "opacity-35 grayscale-20"}`}
/>
{item.type === "video" && (
<div className="absolute inset-0 flex items-center justify-center bg-black/10">
<svg className="h-10 w-10 text-white/80 drop-shadow-md" 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>
{item.type === "video" ? (
<video
src={item.url}
autoPlay
muted
loop
playsInline
className={`aspect-4/5 w-full object-cover transition ${selected[index] ? "opacity-100" : "opacity-35 grayscale-20"}`}
/>
) : (
<img
src={item.url}
alt={`preview ${index + 1}`}
loading="lazy"
decoding="async"
className={`aspect-4/5 w-full object-cover transition ${selected[index] ? "opacity-100" : "opacity-35 grayscale-20"}`}
/>
)}
<div className="absolute left-2 top-2 border border-border/60 bg-background/80 px-2 py-1 text-xs backdrop-blur">
<input

31
apps/frontend/src/app/page.tsx
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