77 lines
2.7 KiB
JavaScript
77 lines
2.7 KiB
JavaScript
const fs = require('fs');
|
|
let tile = fs.readFileSync('src/components/MediaTile.tsx', 'utf8');
|
|
|
|
const regex = /return\s*\(\s*<div[\s\S]*?<\/div>\s*\);/;
|
|
|
|
const newReturn = `return (
|
|
<div
|
|
className="media-tile loading-skeleton"
|
|
ref={tileRef}
|
|
style={style}
|
|
onClick={onClick}
|
|
data-index={index}
|
|
title={item.filename}
|
|
>
|
|
{isVisible && (
|
|
<>
|
|
{isAudio ? (
|
|
<div className="audio-tile-placeholder" onLoad={() => {
|
|
if (tileRef.current) tileRef.current.classList.remove('loading-skeleton');
|
|
}}>
|
|
<span className="audio-icon">
|
|
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
|
|
<path d="M9 18V5l12-2v13"></path>
|
|
<circle cx="6" cy="18" r="3"></circle>
|
|
<circle cx="18" cy="16" r="3"></circle>
|
|
</svg>
|
|
</span>
|
|
</div>
|
|
) : isVideo ? (
|
|
<video
|
|
src={\`/api/media/\${item.relativePath}?type=preview\`}
|
|
poster={\`/api/media/\${item.relativePath}?type=poster\`}
|
|
autoPlay
|
|
muted
|
|
loop
|
|
playsInline
|
|
onLoadedData={(e) => {
|
|
const target = e.target;
|
|
target.parentElement?.classList.remove('loading-skeleton');
|
|
}}
|
|
/>
|
|
) : (
|
|
/* eslint-disable-next-line @next/next/no-img-element */
|
|
<img
|
|
src={\`/api/media/\${item.relativePath}?type=thumb\`}
|
|
alt={item.filename}
|
|
loading="lazy"
|
|
onLoad={(e) => {
|
|
const target = e.target;
|
|
target.parentElement?.classList.remove('loading-skeleton');
|
|
}}
|
|
/>
|
|
)}
|
|
|
|
{(isVideo || isAudio) && (
|
|
<div className="play-icon">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" stroke="none">
|
|
<polygon points="5 3 19 12 5 21 5 3"></polygon>
|
|
</svg>
|
|
</div>
|
|
)}
|
|
{votingOpen && likesCount > 0 && (
|
|
<div className="badge">
|
|
<svg width="12" height="12" viewBox="0 0 24 24" fill="currentColor" stroke="none">
|
|
<path d="M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z"></path>
|
|
</svg>
|
|
<span>{likesCount}</span>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
);`;
|
|
|
|
tile = tile.replace(regex, newReturn);
|
|
fs.writeFileSync('src/components/MediaTile.tsx', tile, 'utf8');
|