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}`} key={`${item.url}-${index}`}
className={`group relative block cursor-pointer overflow-hidden border bg-white/20 transition ${selected[index] ? "border-foreground/35" : "border-border"}`} className={`group relative block cursor-pointer overflow-hidden border bg-white/20 transition ${selected[index] ? "border-foreground/35" : "border-border"}`}
> >
<img {item.type === "video" ? (
src={item.url} <video
alt={`preview ${index + 1}`} src={item.url}
loading="lazy" autoPlay
decoding="async" muted
className={`aspect-4/5 w-full object-cover transition ${selected[index] ? "opacity-100" : "opacity-35 grayscale-20"}`} loop
/> playsInline
{item.type === "video" && ( className={`aspect-4/5 w-full object-cover transition ${selected[index] ? "opacity-100" : "opacity-35 grayscale-20"}`}
<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" /> <img
</svg> src={item.url}
</div> 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"> <div className="absolute left-2 top-2 border border-border/60 bg-background/80 px-2 py-1 text-xs backdrop-blur">
<input <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" className="group relative block overflow-hidden image-scale"
title={`작가 ${photo.author}`} title={`작가 ${photo.author}`}
> >
<img {photo.mediaType === "video" ? (
src={photo.src} <video
alt={photo.alt} src={photo.src}
loading="lazy" poster={photo.thumbnailUrl}
decoding="async" autoPlay
className="block w-full" muted
/> loop
{photo.mediaType === "video" && ( playsInline
<div className="absolute right-2 top-2 rounded-full bg-black/40 p-1.5 text-white backdrop-blur-sm"> className="block w-full"
<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> <img
</div> 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"> <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 <button