chore: remove image thumbnails and disable video preload

This commit is contained in:
codytseng
2024-11-11 18:26:05 +08:00
parent 268a160f17
commit d5b941535f
2 changed files with 5 additions and 21 deletions

View File

@@ -17,7 +17,6 @@ export default function ImageGallery({
size?: 'normal' | 'small' size?: 'normal' | 'small'
}) { }) {
const [index, setIndex] = useState(-1) const [index, setIndex] = useState(-1)
const [thumbs, setThumbs] = useState<string[]>(images.map(getThumbUrl))
const handlePhotoClick = (event: React.MouseEvent, current: number) => { const handlePhotoClick = (event: React.MouseEvent, current: number) => {
event.preventDefault() event.preventDefault()
@@ -26,12 +25,12 @@ export default function ImageGallery({
return ( return (
<div className={cn('relative', className)} onClick={(e) => e.stopPropagation()}> <div className={cn('relative', className)} onClick={(e) => e.stopPropagation()}>
<ScrollArea className="w-fit"> <ScrollArea className="w-full">
<div className="flex w-fit space-x-2"> <div className="flex space-x-2">
{thumbs.map((src, index) => { {images.map((src, index) => {
return ( return (
<img <img
className={`rounded-lg max-w-full cursor-pointer ${size === 'small' ? 'max-h-[15vh]' : 'max-h-[30vh]'}`} className={`rounded-lg h-fit w-fit cursor-pointer ${size === 'small' ? 'max-h-[15vh]' : 'max-h-[30vh]'}`}
key={index} key={index}
src={src} src={src}
onClick={(e) => handlePhotoClick(e, index)} onClick={(e) => handlePhotoClick(e, index)}
@@ -49,24 +48,8 @@ export default function ImageGallery({
close={() => setIndex(-1)} close={() => setIndex(-1)}
controller={{ closeOnBackdropClick: true, closeOnPullUp: true, closeOnPullDown: true }} controller={{ closeOnBackdropClick: true, closeOnPullUp: true, closeOnPullDown: true }}
styles={{ toolbar: { paddingTop: '2.25rem' } }} styles={{ toolbar: { paddingTop: '2.25rem' } }}
on={{
view: ({ index }) => {
setThumbs((pre) => pre.map((src, i) => (i === index ? images[i] : src)))
setIndex(index)
}
}}
/> />
{isNsfw && <NsfwOverlay className="rounded-lg" />} {isNsfw && <NsfwOverlay className="rounded-lg" />}
</div> </div>
) )
} }
function getThumbUrl(url: string) {
if (url.startsWith('https://image.nostr.build/')) {
return url.replace('https://image.nostr.build/', 'https://image.nostr.build/thumb/')
}
if (url.startsWith('https://i.nostr.build/')) {
return url.replace('https://i.nostr.build/', 'https://i.nostr.build/thumb/')
}
return url
}

View File

@@ -16,6 +16,7 @@ export default function VideoPlayer({
<div className="relative"> <div className="relative">
<video <video
controls controls
preload="none"
className={cn('rounded-lg', size === 'small' ? 'max-h-[20vh]' : 'max-h-[50vh]', className)} className={cn('rounded-lg', size === 'small' ? 'max-h-[20vh]' : 'max-h-[50vh]', className)}
src={src} src={src}
/> />