chore: remove image thumbnails and disable video preload
This commit is contained in:
@@ -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
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -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}
|
||||||
/>
|
/>
|
||||||
|
|||||||
Reference in New Issue
Block a user