const fs = require('fs');
let tile = fs.readFileSync('src/components/MediaTile.tsx', 'utf8');

const oldRender = `{isVisible && (
        <>
          {/* eslint-disable-next-line @next/next/no-img-element */}
          <img 
            src={isVideo ? \`/api/media/\${item.relativePath}?type=poster\` : \`/api/media/\${item.relativePath}?type=thumb\`} 
            alt={item.filename} 
            loading="lazy"
            onLoad={(e) => {
              const target = e.target as HTMLImageElement;
              target.parentElement?.classList.remove('loading-skeleton');
            }}
          />
          {isVideo && (
            <div className="play-icon">`;

const newRender = `{isVisible && (
        <>
          {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 as HTMLVideoElement;
                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 as HTMLImageElement;
                target.parentElement?.classList.remove('loading-skeleton');
              }}
            />
          )}
          {isVideo && (
            <div className="play-icon">`;

tile = tile.replace(oldRender, newRender);
fs.writeFileSync('src/components/MediaTile.tsx', tile, 'utf8');