feat: add image gallery
All checks were successful
Release to Staging / build_and_release (push) Successful in 46s
All checks were successful
Release to Staging / build_and_release (push) Successful in 46s
This commit is contained in:
parent
e1da323c2f
commit
0b2e5c29d5
21
package-lock.json
generated
21
package-lock.json
generated
@ -21,6 +21,7 @@
|
|||||||
"date-fns": "3.6.0",
|
"date-fns": "3.6.0",
|
||||||
"dompurify": "3.1.6",
|
"dompurify": "3.1.6",
|
||||||
"file-saver": "2.0.5",
|
"file-saver": "2.0.5",
|
||||||
|
"fslightbox-react": "1.7.6",
|
||||||
"lodash": "4.17.21",
|
"lodash": "4.17.21",
|
||||||
"nostr-login": "1.5.2",
|
"nostr-login": "1.5.2",
|
||||||
"nostr-tools": "2.7.1",
|
"nostr-tools": "2.7.1",
|
||||||
@ -39,6 +40,7 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/dompurify": "3.0.5",
|
"@types/dompurify": "3.0.5",
|
||||||
"@types/file-saver": "2.0.7",
|
"@types/file-saver": "2.0.7",
|
||||||
|
"@types/fslightbox-react": "1.7.7",
|
||||||
"@types/lodash": "4.17.7",
|
"@types/lodash": "4.17.7",
|
||||||
"@types/papaparse": "5.3.14",
|
"@types/papaparse": "5.3.14",
|
||||||
"@types/react": "^18.3.3",
|
"@types/react": "^18.3.3",
|
||||||
@ -1929,6 +1931,15 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@types/filewriter/-/filewriter-0.0.33.tgz",
|
"resolved": "https://registry.npmjs.org/@types/filewriter/-/filewriter-0.0.33.tgz",
|
||||||
"integrity": "sha512-xFU8ZXTw4gd358lb2jw25nxY9QAgqn2+bKKjKOYfNCzN4DKCFetK7sPtrlpg66Ywe3vWY9FNxprZawAh9wfJ3g=="
|
"integrity": "sha512-xFU8ZXTw4gd358lb2jw25nxY9QAgqn2+bKKjKOYfNCzN4DKCFetK7sPtrlpg66Ywe3vWY9FNxprZawAh9wfJ3g=="
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/fslightbox-react": {
|
||||||
|
"version": "1.7.7",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/fslightbox-react/-/fslightbox-react-1.7.7.tgz",
|
||||||
|
"integrity": "sha512-pp9Y7/+L4NFlMp+PdESx66EG0/m70aqg81FNlLP08dGWvRRSvNJFv08Jc91IEQkbh/C1PpokCekNCWZqpWxiyQ==",
|
||||||
|
"dev": true,
|
||||||
|
"dependencies": {
|
||||||
|
"@types/react": "*"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/@types/lodash": {
|
"node_modules/@types/lodash": {
|
||||||
"version": "4.17.7",
|
"version": "4.17.7",
|
||||||
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz",
|
"resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.17.7.tgz",
|
||||||
@ -3352,6 +3363,16 @@
|
|||||||
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
"node": "^8.16.0 || ^10.6.0 || >=11.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/fslightbox-react": {
|
||||||
|
"version": "1.7.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/fslightbox-react/-/fslightbox-react-1.7.6.tgz",
|
||||||
|
"integrity": "sha512-7LN2GZRLHo2vZGKdH+BZDJUoUDkCRCLlZ5hOwtLtZplmGZQ9nqzpG54cTax7XNjbYGTWLT6BHdMiL5zOEhiRlA==",
|
||||||
|
"peerDependencies": {
|
||||||
|
"prop-types": ">=15.6.2",
|
||||||
|
"react": ">=16.8.0",
|
||||||
|
"react-dom": ">=16.8.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"node_modules/gensync": {
|
"node_modules/gensync": {
|
||||||
"version": "1.0.0-beta.2",
|
"version": "1.0.0-beta.2",
|
||||||
"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
|
"resolved": "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz",
|
||||||
|
@ -23,6 +23,7 @@
|
|||||||
"date-fns": "3.6.0",
|
"date-fns": "3.6.0",
|
||||||
"dompurify": "3.1.6",
|
"dompurify": "3.1.6",
|
||||||
"file-saver": "2.0.5",
|
"file-saver": "2.0.5",
|
||||||
|
"fslightbox-react": "1.7.6",
|
||||||
"lodash": "4.17.21",
|
"lodash": "4.17.21",
|
||||||
"nostr-login": "1.5.2",
|
"nostr-login": "1.5.2",
|
||||||
"nostr-tools": "2.7.1",
|
"nostr-tools": "2.7.1",
|
||||||
@ -41,6 +42,7 @@
|
|||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/dompurify": "3.0.5",
|
"@types/dompurify": "3.0.5",
|
||||||
"@types/file-saver": "2.0.7",
|
"@types/file-saver": "2.0.7",
|
||||||
|
"@types/fslightbox-react": "1.7.7",
|
||||||
"@types/lodash": "4.17.7",
|
"@types/lodash": "4.17.7",
|
||||||
"@types/papaparse": "5.3.14",
|
"@types/papaparse": "5.3.14",
|
||||||
"@types/react": "^18.3.3",
|
"@types/react": "^18.3.3",
|
||||||
|
@ -51,6 +51,7 @@ import {
|
|||||||
unformatNumber,
|
unformatNumber,
|
||||||
signAndPublish
|
signAndPublish
|
||||||
} from '../utils'
|
} from '../utils'
|
||||||
|
import FsLightbox from 'fslightbox-react'
|
||||||
|
|
||||||
export const InnerModPage = () => {
|
export const InnerModPage = () => {
|
||||||
const { naddr } = useParams()
|
const { naddr } = useParams()
|
||||||
@ -935,6 +936,18 @@ const Body = ({
|
|||||||
const postBodyRef = useRef<HTMLDivElement>(null)
|
const postBodyRef = useRef<HTMLDivElement>(null)
|
||||||
const viewFullPostBtnRef = useRef<HTMLDivElement>(null)
|
const viewFullPostBtnRef = useRef<HTMLDivElement>(null)
|
||||||
|
|
||||||
|
const [lightBoxController, setLightBoxController] = useState({
|
||||||
|
toggler: false,
|
||||||
|
slide: 1
|
||||||
|
})
|
||||||
|
|
||||||
|
const openLightBoxOnSlide = (slide: number) => {
|
||||||
|
setLightBoxController((prev) => ({
|
||||||
|
toggler: !prev.toggler,
|
||||||
|
slide
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
|
||||||
const viewFullPost = () => {
|
const viewFullPost = () => {
|
||||||
if (postBodyRef.current && viewFullPostBtnRef.current) {
|
if (postBodyRef.current && viewFullPostBtnRef.current) {
|
||||||
postBodyRef.current.style.maxHeight = 'unset'
|
postBodyRef.current.style.maxHeight = 'unset'
|
||||||
@ -950,52 +963,60 @@ const Body = ({
|
|||||||
})
|
})
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className='IBMSMSMBSSPost'>
|
<>
|
||||||
<div
|
<div className='IBMSMSMBSSPost'>
|
||||||
className='IBMSMSMBSSPostPicture'
|
|
||||||
style={{
|
|
||||||
background: `url(${featuredImageUrl}) center / cover no-repeat`
|
|
||||||
}}
|
|
||||||
></div>
|
|
||||||
<div className='IBMSMSMBSSPostInside'>
|
|
||||||
<div className='IBMSMSMBSSPostTitle'>
|
|
||||||
<h1 className='IBMSMSMBSSPostTitleHeading'>{title}</h1>
|
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
ref={postBodyRef}
|
className='IBMSMSMBSSPostPicture'
|
||||||
className='IBMSMSMBSSPostBody'
|
style={{
|
||||||
style={{ maxHeight: '250px', padding: '0 10px' }}
|
background: `url(${featuredImageUrl}) center / cover no-repeat`
|
||||||
>
|
}}
|
||||||
<EditorContent editor={editor} />
|
></div>
|
||||||
<div ref={viewFullPostBtnRef} className='IBMSMSMBSSPostBodyHide'>
|
<div className='IBMSMSMBSSPostInside'>
|
||||||
<p onClick={viewFullPost}>View</p>
|
<div className='IBMSMSMBSSPostTitle'>
|
||||||
|
<h1 className='IBMSMSMBSSPostTitleHeading'>{title}</h1>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
ref={postBodyRef}
|
||||||
|
className='IBMSMSMBSSPostBody'
|
||||||
|
style={{ maxHeight: '250px', padding: '0 10px' }}
|
||||||
|
>
|
||||||
|
<EditorContent editor={editor} />
|
||||||
|
<div ref={viewFullPostBtnRef} className='IBMSMSMBSSPostBodyHide'>
|
||||||
|
<p onClick={viewFullPost}>View</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSMBSSShots'>
|
||||||
|
{screenshotsUrls.map((url, index) => (
|
||||||
|
<img
|
||||||
|
className='IBMSMSMBSSShotsImg'
|
||||||
|
src={url}
|
||||||
|
alt={`ScreenShot-${index}`}
|
||||||
|
key={url}
|
||||||
|
onClick={() => openLightBoxOnSlide(index + 1)}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<div className='IBMSMSMBSSTags'>
|
||||||
|
{nsfw && (
|
||||||
|
<div className='IBMSMSMBSSTagsTag IBMSMSMBSSTagsTagNSFW'>
|
||||||
|
<p>NSFW</p>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{tags.map((tag, index) => (
|
||||||
|
<a className='IBMSMSMBSSTagsTag' href='#' key={`tag-${index}`}>
|
||||||
|
{tag}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className='IBMSMSMBSSShots'>
|
|
||||||
{screenshotsUrls.map((url, index) => (
|
|
||||||
<img
|
|
||||||
className='IBMSMSMBSSShotsImg'
|
|
||||||
src={url}
|
|
||||||
alt={`ScreenShot-${index}`}
|
|
||||||
key={`ScreenShot-${index}`}
|
|
||||||
/>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
<div className='IBMSMSMBSSTags'>
|
|
||||||
{nsfw && (
|
|
||||||
<div className='IBMSMSMBSSTagsTag IBMSMSMBSSTagsTagNSFW'>
|
|
||||||
<p>NSFW</p>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{tags.map((tag, index) => (
|
|
||||||
<a className='IBMSMSMBSSTagsTag' href='#' key={`tag-${index}`}>
|
|
||||||
{tag}
|
|
||||||
</a>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<FsLightbox
|
||||||
|
toggler={lightBoxController.toggler}
|
||||||
|
sources={screenshotsUrls}
|
||||||
|
slide={lightBoxController.slide}
|
||||||
|
/>
|
||||||
|
</>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user