External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

update mobile post menu, rules and description

Browse Source
This commit is contained in:
plebeius.eth
2023-09-14 17:35:28 +02:00
parent cc98926fa6
commit ab371789e9
8 changed files with 613 additions and 184 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/BoardAvatar.jsx
+1 -1
View File
@@ -8,7 +8,7 @@ const BoardAvatar = ({ address }) => {
useEffect(() => { useEffect(() => {
if (subplebbit.suggested?.avatarUrl) { if (subplebbit.suggested?.avatarUrl) {
setAvatarUrl(subplebbit.suggested.avatarUrl); setAvatarUrl(subplebbit.suggested?.avatarUrl);
} }
}, [subplebbit.suggested?.avatarUrl, subplebbit]); }, [subplebbit.suggested?.avatarUrl, subplebbit]);
src/components/views/All.jsx
+43 -37
View File
@@ -1842,24 +1842,27 @@ const All = () => {
(commentMediaInfo.type === 'webpage' && (commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? ( commentMediaInfo.thumbnail))) ? (
<> <>
<li onClick={() => handleMobileOptionClick(thread.cid)}> <a style={{color: 'inherit', textDecoration: 'none'}}
<a style={{color: 'inherit', textDecoration: 'none'}} href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`} target="_blank" rel="noreferrer">
target="_blank" rel="noreferrer" <li onClick={() => handleMobileOptionClick(thread.cid)}>
>Search image on Google</a> Search image on Google
</li> </li>
<li onClick={() => handleMobileOptionClick(thread.cid)}> </a>
<a style={{color: 'inherit', textDecoration: 'none'}} <a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`} href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer" target="_blank" rel="noreferrer">
>Search image on Yandex</a> <li onClick={() => handleMobileOptionClick(thread.cid)}>
</li> Search image on Yandex
<li onClick={() => handleMobileOptionClick(thread.cid)}> </li>
<a style={{color: 'inherit', textDecoration: 'none'}} </a>
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`} <a style={{color: 'inherit', textDecoration: 'none'}}
target="_blank" rel="noreferrer" href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
>Search image on SauceNAO</a> target="_blank" rel="noreferrer">
</li> <li onClick={() => handleMobileOptionClick(thread.cid)}>
Search image on SauceNAO
</li>
</a>
</> </>
) : null ) : null
} }
@@ -2164,28 +2167,31 @@ const All = () => {
</> </>
)}</VerifiedAuthor> )}</VerifiedAuthor>
{(replyMediaInfo && ( {(replyMediaInfo && (
replyMediaInfo.type === 'image' || replyMediaInfo.type === 'image' ||
(replyMediaInfo.type === 'webpage' && (replyMediaInfo.type === 'webpage' &&
replyMediaInfo.thumbnail))) ? ( replyMediaInfo.thumbnail))) ? (
<> <>
<li onClick={() => handleMobileOptionClick(reply.cid)}> <a style={{color: 'inherit', textDecoration: 'none'}}
<a style={{color: 'inherit', textDecoration: 'none'}} href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`}
href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`} target="_blank" rel="noreferrer">
target="_blank" rel="noreferrer" <li onClick={() => handleMobileOptionClick(reply.cid)}>
>Search image on Google</a> Search image on Google
</li> </li>
<li onClick={() => handleMobileOptionClick(reply.cid)}> </a>
<a style={{color: 'inherit', textDecoration: 'none'}} <a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?img_url=${replyMediaInfo.url}&rpt=imageview`} href={`https://yandex.com/images/search?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer" target="_blank" rel="noreferrer">
>Search image on Yandex</a> <li onClick={() => handleMobileOptionClick(reply.cid)}>
</li> Search image on Yandex
<li onClick={() => handleMobileOptionClick(reply.cid)}> </li>
<a style={{color: 'inherit', textDecoration: 'none'}} </a>
href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`} <a style={{color: 'inherit', textDecoration: 'none'}}
target="_blank" rel="noreferrer" href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`}
>Search image on SauceNAO</a> target="_blank" rel="noreferrer">
</li> <li onClick={() => handleMobileOptionClick(reply.cid)}>
Search image on SauceNAO
</li>
</a>
</> </>
) : null ) : null
} }
src/components/views/Board.jsx
+227 -49
View File
@@ -1041,6 +1041,32 @@ const Board = () => {
change rules change rules
</> </>
) : null} */} ) : null} */}
<li
onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
View on »
<ul className="dropdown-menu post-menu-catalog"
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
<li onClick={() => handleOptionClick("rules")}>
<a
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Plebbit</a>
</li>
{/* <li onClick={() => handleOptionClick("rules")}>
<a
href={`https://seedit.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Seedit</a>
</li> */}
<li onClick={() => handleOptionClick("rules")}>
<a
href={`https://plebones.netlify.app/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Plebones</a>
</li>
</ul>
</li>
</ul> </ul>
</div> </div>
</PostMenuCatalog>, document.body </PostMenuCatalog>, document.body
@@ -1089,6 +1115,20 @@ const Board = () => {
handleMobileOptionClick("rules"); handleMobileOptionClick("rules");
handleShareClick(selectedAddress, "rules") handleShareClick(selectedAddress, "rules")
}}>Share board</li> }}>Share board</li>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleOptionClick("rules")}>
View on plebbit
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://plebones.netlify.app/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleOptionClick("rules")}>
View on plebones
</li>
</a>
</ul> </ul>
</PostMenuMobile>, document.body </PostMenuMobile>, document.body
)} )}
@@ -1200,6 +1240,32 @@ const Board = () => {
change rules change rules
</> </>
) : null} */} ) : null} */}
<li
onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
View on »
<ul className="dropdown-menu post-menu-catalog"
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
<li onClick={() => handleOptionClick("rules")}>
<a
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Plebbit</a>
</li>
{/* <li onClick={() => handleOptionClick("rules")}>
<a
href={`https://seedit.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Seedit</a>
</li> */}
<li onClick={() => handleOptionClick("rules")}>
<a
href={`https://plebones.netlify.app/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Plebones</a>
</li>
</ul>
</li>
</ul> </ul>
</div> </div>
</PostMenuCatalog>, document.body </PostMenuCatalog>, document.body
@@ -1248,6 +1314,20 @@ const Board = () => {
handleMobileOptionClick("rules"); handleMobileOptionClick("rules");
handleShareClick(selectedAddress, "rules") handleShareClick(selectedAddress, "rules")
}}>Share board</li> }}>Share board</li>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleOptionClick("rules")}>
View on plebbit
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://plebones.netlify.app/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleOptionClick("rules")}>
View on plebones
</li>
</a>
</ul> </ul>
</PostMenuMobile>, document.body </PostMenuMobile>, document.body
)} )}
@@ -1381,6 +1461,60 @@ const Board = () => {
change description change description
</> </>
) : null} */} ) : null} */}
{subplebbit.suggested?.avatarUrl ? (
<li
onMouseOver={() => {setIsImageSearchOpen(true)}}
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
Image search »
<ul className="dropdown-menu post-menu-catalog"
style={{display: isImageSearchOpen ? 'block': 'none'}}>
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
>Google</a>
</li>
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://yandex.com/images/search?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
>Yandex</a>
</li>
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://saucenao.com/search.php?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
>SauceNAO</a>
</li>
</ul>
</li>
) : null}
<li
onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
View on »
<ul className="dropdown-menu post-menu-catalog"
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Plebbit</a>
</li>
{/* <li onClick={() => handleOptionClick("description")}>
<a
href={`https://seedit.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Seedit</a>
</li> */}
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://plebones.netlify.app/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Plebones</a>
</li>
</ul>
</li>
</ul> </ul>
</div> </div>
</PostMenuCatalog>, document.body </PostMenuCatalog>, document.body
@@ -1403,17 +1537,18 @@ const Board = () => {
<div className="op-container"> <div className="op-container">
<div className="post op op-mobile"> <div className="post op op-mobile">
<div className="post-info-mobile"> <div className="post-info-mobile">
<button className="post-menu-button-mobile" <button key={`mob-pb-`} className="post-menu-button-mobile"
ref={el => { ref={el => {
threadMenuRefsMobile.current["description"] = el; threadMenuRefsMobile.current["description"] = el;
}} }}
onClick={(event) => { onClick={(event) => {
event.stopPropagation(); event.stopPropagation();
const rect = threadMenuRefsMobile.current["description"].getBoundingClientRect(); const rect = threadMenuRefsMobile.current["description"].getBoundingClientRect();
setMobileMenuPosition({top: rect.top + window.scrollY, left: rect.left}); setMobileMenuPosition({top: rect.top + window.scrollY, left: rect.left});
setOpenMobileMenuCid(prevCid => (prevCid === "description" ? null : "description")); setOpenMobileMenuCid(prevCid => (prevCid === "description" ? null : "description"));
}} }}
style={{ all: 'unset', cursor: 'pointer' }}>...</button> style={{ all: 'unset', cursor: 'pointer' }}
>...</button>
{createPortal( {createPortal(
<PostMenuMobile selectedStyle={selectedStyle} <PostMenuMobile selectedStyle={selectedStyle}
ref={el => {postMenuMobileRef.current = el}} ref={el => {postMenuMobileRef.current = el}}
@@ -1422,11 +1557,48 @@ const Board = () => {
display: openMobileMenuCid === "description" ? "block" : "none", display: openMobileMenuCid === "description" ? "block" : "none",
top: mobileMenuPosition.top + 20, top: mobileMenuPosition.top + 20,
left: mobileMenuPosition.left}}> left: mobileMenuPosition.left}}>
<ul className={`post-menu-mobile-thread-${"description"}`}> <ul className={`post-menu-mobile-thread-description`}>
<li onClick={() => { <li onClick={() => {
handleMobileOptionClick("description"); handleMobileOptionClick("description");
handleShareClick(selectedAddress, "description") handleShareClick(selectedAddress, "description")
}}>Share board</li> }}>Share board</li>
{subplebbit.suggested?.avatarUrl ? (
<>
<a style={{ color: 'inherit', textDecoration: 'none' }}
href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
onClick={() => handleMobileOptionClick("description")}>
<li>Search image on Google</li>
</a>
<a style={{ color: 'inherit', textDecoration: 'none' }}
href={`https://yandex.com/images/search?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
onClick={() => handleMobileOptionClick("description")}>
<li>Search image on Yandex</li>
</a>
<a style={{ color: 'inherit', textDecoration: 'none' }}
href={`https://saucenao.com/search.php?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
onClick={() => handleMobileOptionClick("description")}>
<li>Search image on SauceNAO</li>
</a>
</>
) : null
}
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleOptionClick("description")}>
View on plebbit
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://plebones.netlify.app/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleOptionClick("description")}>
View on plebones
</li>
</a>
</ul> </ul>
</PostMenuMobile>, document.body </PostMenuMobile>, document.body
)} )}
@@ -1459,7 +1631,7 @@ const Board = () => {
<div className="file-mobile"> <div className="file-mobile">
<div className="img-container"> <div className="img-container">
<span className="file-thumb-mobile"> <span className="file-thumb-mobile">
<img src={subplebbit.suggested.avatarUrl} alt="board avatar" <img src={subplebbit.suggested?.avatarUrl} alt="board avatar"
onClick={handleImageClick} onClick={handleImageClick}
style={{cursor: "pointer"}} /> style={{cursor: "pointer"}} />
<div className="file-info-mobile">image</div> <div className="file-info-mobile">image</div>
@@ -2608,24 +2780,27 @@ const Board = () => {
(commentMediaInfo.type === 'webpage' && (commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? ( commentMediaInfo.thumbnail))) ? (
<> <>
<li onClick={() => handleMobileOptionClick(thread.cid)}> <a style={{color: 'inherit', textDecoration: 'none'}}
<a style={{color: 'inherit', textDecoration: 'none'}} href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`} target="_blank" rel="noreferrer">
target="_blank" rel="noreferrer" <li onClick={() => handleMobileOptionClick(thread.cid)}>
>Search image on Google</a> Search image on Google
</li> </li>
<li onClick={() => handleMobileOptionClick(thread.cid)}> </a>
<a style={{color: 'inherit', textDecoration: 'none'}} <a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`} href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer" target="_blank" rel="noreferrer">
>Search image on Yandex</a> <li onClick={() => handleMobileOptionClick(thread.cid)}>
</li> Search image on Yandex
<li onClick={() => handleMobileOptionClick(thread.cid)}> </li>
<a style={{color: 'inherit', textDecoration: 'none'}} </a>
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`} <a style={{color: 'inherit', textDecoration: 'none'}}
target="_blank" rel="noreferrer" href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
>Search image on SauceNAO</a> target="_blank" rel="noreferrer">
</li> <li onClick={() => handleMobileOptionClick(thread.cid)}>
Search image on SauceNAO
</li>
</a>
</> </>
) : null ) : null
} }
@@ -2935,24 +3110,27 @@ const Board = () => {
(replyMediaInfo.type === 'webpage' && (replyMediaInfo.type === 'webpage' &&
replyMediaInfo.thumbnail))) ? ( replyMediaInfo.thumbnail))) ? (
<> <>
<li onClick={() => handleMobileOptionClick(reply.cid)}> <a style={{color: 'inherit', textDecoration: 'none'}}
<a style={{color: 'inherit', textDecoration: 'none'}} href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`}
href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`} target="_blank" rel="noreferrer">
target="_blank" rel="noreferrer" <li onClick={() => handleMobileOptionClick(reply.cid)}>
>Search image on Google</a> Search image on Google
</li> </li>
<li onClick={() => handleMobileOptionClick(reply.cid)}> </a>
<a style={{color: 'inherit', textDecoration: 'none'}} <a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?img_url=${replyMediaInfo.url}&rpt=imageview`} href={`https://yandex.com/images/search?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer" target="_blank" rel="noreferrer">
>Search image on Yandex</a> <li onClick={() => handleMobileOptionClick(reply.cid)}>
</li> Search image on Yandex
<li onClick={() => handleMobileOptionClick(reply.cid)}> </li>
<a style={{color: 'inherit', textDecoration: 'none'}} </a>
href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`} <a style={{color: 'inherit', textDecoration: 'none'}}
target="_blank" rel="noreferrer" href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`}
>Search image on SauceNAO</a> target="_blank" rel="noreferrer">
</li> <li onClick={() => handleMobileOptionClick(reply.cid)}>
Search image on SauceNAO
</li>
</a>
</> </>
) : null ) : null
} }
src/components/views/Catalog.jsx
+25 -17
View File
@@ -24,7 +24,6 @@ import VerifiedAuthor from '../VerifiedAuthor';
import countLinks from '../../utils/countLinks'; import countLinks from '../../utils/countLinks';
import getCommentMediaInfo from '../../utils/getCommentMediaInfo'; import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
import getFormattedTime from '../../utils/getFormattedTime'; import getFormattedTime from '../../utils/getFormattedTime';
import handleShareClick from '../../utils/handleShareClick';
import handleStyleChange from '../../utils/handleStyleChange'; import handleStyleChange from '../../utils/handleStyleChange';
import useAnonModeRef from '../../hooks/useAnonModeRef'; import useAnonModeRef from '../../hooks/useAnonModeRef';
import useClickForm from '../../hooks/useClickForm'; import useClickForm from '../../hooks/useClickForm';
@@ -433,10 +432,13 @@ const CatalogPost = ({post}) => {
style={{ display: openMenuCid === "rules" ? 'block' : 'none' }} style={{ display: openMenuCid === "rules" ? 'block' : 'none' }}
> >
<ul className="post-menu-catalog"> <ul className="post-menu-catalog">
<li onClick={() => { <a target="_blank" rel="noreferrer"
handleOptionClick("rules"); style={{color: 'inherit', textDecoration: 'none'}}
handleShareClick(selectedAddress, "rules"); href={`https://pleb.bz/p/${selectedAddress}/?redirect=plebchan.eth.limo`}>
}}>Share board</li> <li onClick={() => {
handleOptionClick("rules");
}}>Share board</li>
</a>
{/* {isModerator ? ( {/* {isModerator ? (
<> <>
change rules change rules
@@ -512,7 +514,7 @@ const CatalogPost = ({post}) => {
setPopupPosition({top: rect.top + window.scrollY, left: rect.left}); setPopupPosition({top: rect.top + window.scrollY, left: rect.left});
}} }}
onMouseLeave={() => setIsHoveringForMenu(false)} onMouseLeave={() => setIsHoveringForMenu(false)}
src={subplebbit.suggested.avatarUrl} alt="board avatar" /> src={subplebbit.suggested?.avatarUrl} alt="board avatar" />
) : null} ) : null}
</Link> </Link>
{subplebbit.suggested?.avatarUrl ? ( {subplebbit.suggested?.avatarUrl ? (
@@ -577,10 +579,13 @@ const CatalogPost = ({post}) => {
style={{ display: openMenuCid === "description" ? 'block' : 'none' }} style={{ display: openMenuCid === "description" ? 'block' : 'none' }}
> >
<ul className="post-menu-catalog"> <ul className="post-menu-catalog">
<li onClick={() => { <a target="_blank" rel="noreferrer"
handleOptionClick("description"); style={{color: 'inherit', textDecoration: 'none'}}
handleShareClick(selectedAddress, "description"); href={`https://pleb.bz/p/${selectedAddress}/?redirect=plebchan.eth.limo`}>
}}>Share board</li> <li onClick={() => {
handleOptionClick("description");
}}>Share board</li>
</a>
{/* {isModerator ? ( {/* {isModerator ? (
<> <>
change description change description
@@ -595,19 +600,19 @@ const CatalogPost = ({post}) => {
style={{display: isImageSearchOpen ? 'block': 'none'}}> style={{display: isImageSearchOpen ? 'block': 'none'}}>
<li onClick={() => handleOptionClick("description")}> <li onClick={() => handleOptionClick("description")}>
<a <a
href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested.avatarUrl}`} href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer" target="_blank" rel="noreferrer"
>Google</a> >Google</a>
</li> </li>
<li onClick={() => handleOptionClick("description")}> <li onClick={() => handleOptionClick("description")}>
<a <a
href={`https://yandex.com/images/search?url=${subplebbit.suggested.avatarUrl}`} href={`https://yandex.com/images/search?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer" target="_blank" rel="noreferrer"
>Yandex</a> >Yandex</a>
</li> </li>
<li onClick={() => handleOptionClick("description")}> <li onClick={() => handleOptionClick("description")}>
<a <a
href={`https://saucenao.com/search.php?url=${subplebbit.suggested.avatarUrl}`} href={`https://saucenao.com/search.php?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer" target="_blank" rel="noreferrer"
>SauceNAO</a> >SauceNAO</a>
</li> </li>
@@ -818,10 +823,13 @@ const CatalogPost = ({post}) => {
style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }} style={{ display: openMenuCid === thread.cid ? 'block' : 'none' }}
> >
<ul className="post-menu-catalog"> <ul className="post-menu-catalog">
<li onClick={() => { <a target="_blank" rel="noreferrer"
handleOptionClick(thread.cid); style={{color: 'inherit', textDecoration: 'none'}}
handleShareClick(selectedAddress, thread.cid); href={`https://pleb.bz/p/${selectedAddress}/c/${thread.cid}?redirect=plebchan.eth.limo`}>
}}>Share thread</li> <li onClick={() => {
handleOptionClick(thread.cid);
}}>Share thread</li>
</a>
<VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => ( <VerifiedAuthor commentCid={thread.cid}>{({ authorAddress }) => (
<> <>
{authorAddress === account?.author.address || {authorAddress === account?.author.address ||
src/components/views/Description.jsx
+139 -7
View File
@@ -5,7 +5,7 @@ import { Link, useNavigate, useParams } from 'react-router-dom';
import { Tooltip } from 'react-tooltip'; import { Tooltip } from 'react-tooltip';
import { useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostMenu, PostForm } from '../styled/views/Board.styled'; import { Container, NavBar, Header, Break, PostMenu, PostForm, PostMenuMobile } from '../styled/views/Board.styled';
import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled'; import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled';
import { PostMenuCatalog } from '../styled/views/Catalog.styled'; import { PostMenuCatalog } from '../styled/views/Catalog.styled';
import BoardStats from '../BoardStats'; import BoardStats from '../BoardStats';
@@ -37,15 +37,20 @@ const Description = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const threadMenuRefs = useRef({}); const threadMenuRefs = useRef({});
const postMenuRef = useRef(null); const threadMenuRefsMobile = useRef({});
const postMenuMobileRef = useRef(null);
const postMenuCatalogRef = useRef(null); const postMenuCatalogRef = useRef(null);
const [isAdminListOpen, setIsAdminListOpen] = useState(false); const [isAdminListOpen, setIsAdminListOpen] = useState(false);
const [prevScrollPos, setPrevScrollPos] = useState(0); const [prevScrollPos, setPrevScrollPos] = useState(0);
const [visible, setVisible] = useState(true); const [visible, setVisible] = useState(true);
const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
const [mobileMenuPosition, setMobileMenuPosition] = useState({top: 0, left: 0});
const [openMenuCid, setOpenMenuCid] = useState(null); const [openMenuCid, setOpenMenuCid] = useState(null);
const [openMobileMenuCid, setOpenMobileMenuCid] = useState(null);
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
const [isImageSearchOpen, setIsImageSearchOpen] = useState(false);
const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
const { subplebbitAddress } = useParams(); const { subplebbitAddress } = useParams();
const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress}); const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
@@ -55,12 +60,23 @@ const Description = () => {
setOpenMenuCid(null); setOpenMenuCid(null);
}; };
const handleMobileOptionClick = () => {
setOpenMobileMenuCid(null);
};
const handleOutsideClick = useCallback((e) => { const handleOutsideClick = useCallback((e) => {
if (openMenuCid !== null && !postMenuRef.current.contains(e.target) && !postMenuCatalogRef.current.contains(e.target)) { if (openMenuCid !== null && !postMenuCatalogRef.current.contains(e.target)) {
setOpenMenuCid(null); setOpenMenuCid(null);
} }
}, [openMenuCid, postMenuRef, postMenuCatalogRef]); }, [openMenuCid, postMenuCatalogRef]);
const handleMobileOutsideClick = useCallback((e) => {
if (openMobileMenuCid !== null && !postMenuMobileRef.current.contains(e.target)) {
setOpenMobileMenuCid(null);
}
}, [openMobileMenuCid, postMenuMobileRef]);
useEffect(() => { useEffect(() => {
if (openMenuCid !== null) { if (openMenuCid !== null) {
@@ -74,6 +90,19 @@ const Description = () => {
}; };
}, [openMenuCid, handleOutsideClick]); }, [openMenuCid, handleOutsideClick]);
useEffect(() => {
if (openMobileMenuCid !== null) {
document.addEventListener('click', handleMobileOutsideClick);
} else {
document.removeEventListener('click', handleMobileOutsideClick);
}
return () => {
document.removeEventListener('click', handleMobileOutsideClick);
};
}, [openMobileMenuCid, handleMobileOutsideClick]);
useEffect(() => { useEffect(() => {
window.scrollTo(0, 0); window.scrollTo(0, 0);
@@ -376,6 +405,60 @@ const Description = () => {
change description change description
</> </>
) : null} */} ) : null} */}
{subplebbit.suggested?.avatarUrl ? (
<li
onMouseOver={() => {setIsImageSearchOpen(true)}}
onMouseLeave={() => {setIsImageSearchOpen(false)}}>
Image search »
<ul className="dropdown-menu post-menu-catalog"
style={{display: isImageSearchOpen ? 'block': 'none'}}>
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
>Google</a>
</li>
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://yandex.com/images/search?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
>Yandex</a>
</li>
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://saucenao.com/search.php?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
>SauceNAO</a>
</li>
</ul>
</li>
) : null}
<li
onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
View on »
<ul className="dropdown-menu post-menu-catalog"
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Plebbit</a>
</li>
{/* <li onClick={() => handleOptionClick("description")}>
<a
href={`https://seedit.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Seedit</a>
</li> */}
<li onClick={() => handleOptionClick("description")}>
<a
href={`https://plebones.netlify.app/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Plebones</a>
</li>
</ul>
</li>
</ul> </ul>
</div> </div>
</PostMenuCatalog>, document.body </PostMenuCatalog>, document.body
@@ -395,8 +478,57 @@ const Description = () => {
<div className="op-container"> <div className="op-container">
<div className="post op op-mobile"> <div className="post op op-mobile">
<div className="post-info-mobile"> <div className="post-info-mobile">
<button className="post-menu-button-mobile" <button key={`mob-pb-`} className="post-menu-button-mobile"
style={{ all: 'unset', cursor: 'pointer' }}>...</button> ref={el => {
threadMenuRefsMobile.current["description"] = el;
}}
onClick={(event) => {
event.stopPropagation();
const rect = threadMenuRefsMobile.current["description"].getBoundingClientRect();
setMobileMenuPosition({top: rect.top + window.scrollY, left: rect.left});
setOpenMobileMenuCid(prevCid => (prevCid === "description" ? null : "description"));
}}
style={{ all: 'unset', cursor: 'pointer' }}
>...</button>
{createPortal(
<PostMenuMobile selectedStyle={selectedStyle}
ref={el => {postMenuMobileRef.current = el}}
onClick={(event) => event.stopPropagation()}
style={{position: "absolute",
display: openMobileMenuCid === "description" ? "block" : "none",
top: mobileMenuPosition.top + 20,
left: mobileMenuPosition.left}}>
<ul className={`post-menu-mobile-thread-description`}>
<li onClick={() => {
handleMobileOptionClick("description");
handleShareClick(selectedAddress, "description")
}}>Share board</li>
{subplebbit.suggested?.avatarUrl ? (
<>
<li onClick={() => handleMobileOptionClick("description")}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://lens.google.com/uploadbyurl?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
>Search image on Google</a>
</li>
<li onClick={() => handleMobileOptionClick("description")}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
>Search image on Yandex</a>
</li>
<li onClick={() => handleMobileOptionClick("description")}>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://saucenao.com/search.php?url=${subplebbit.suggested?.avatarUrl}`}
target="_blank" rel="noreferrer"
>Search image on SauceNAO</a>
</li>
</>
) : null
}
</ul>
</PostMenuMobile>, document.body
)}
<span className="name-block-mobile"> <span className="name-block-mobile">
<span className="name-mobile capcode" <span className="name-mobile capcode"
style={{cursor: 'pointer'}} style={{cursor: 'pointer'}}
@@ -421,7 +553,7 @@ const Description = () => {
<div className="file-mobile"> <div className="file-mobile">
<div className="img-container"> <div className="img-container">
<span className="file-thumb-mobile"> <span className="file-thumb-mobile">
<img src={subplebbit.suggested.avatarUrl} alt="board avatar" <img src={subplebbit.suggested?.avatarUrl} alt="board avatar"
onClick={handleImageClick} onClick={handleImageClick}
style={{cursor: "pointer"}} /> style={{cursor: "pointer"}} />
<div className="file-info-mobile">image</div> <div className="file-info-mobile">image</div>
src/components/views/Rules.jsx
+100 -7
View File
@@ -5,7 +5,7 @@ import { Link, useNavigate, useParams } from 'react-router-dom';
import { Tooltip } from 'react-tooltip'; import { Tooltip } from 'react-tooltip';
import { useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { useSubplebbit } from '@plebbit/plebbit-react-hooks';
import { debounce } from 'lodash'; import { debounce } from 'lodash';
import { Container, NavBar, Header, Break, PostMenu, PostForm } from '../styled/views/Board.styled'; import { Container, NavBar, Header, Break, PostMenu, PostForm, PostMenuMobile } from '../styled/views/Board.styled';
import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled'; import { TopBar, BoardForm, Footer, ReplyFormLink} from '../styled/views/Thread.styled';
import { PostMenuCatalog } from '../styled/views/Catalog.styled'; import { PostMenuCatalog } from '../styled/views/Catalog.styled';
import BoardStats from '../BoardStats'; import BoardStats from '../BoardStats';
@@ -42,15 +42,19 @@ const Rules = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const threadMenuRefs = useRef({}); const threadMenuRefs = useRef({});
const postMenuRef = useRef(null); const threadMenuRefsMobile = useRef({});
const postMenuMobileRef = useRef(null);
const postMenuCatalogRef = useRef(null); const postMenuCatalogRef = useRef(null);
const [isAdminListOpen, setIsAdminListOpen] = useState(false); const [isAdminListOpen, setIsAdminListOpen] = useState(false);
const [prevScrollPos, setPrevScrollPos] = useState(0); const [prevScrollPos, setPrevScrollPos] = useState(0);
const [visible, setVisible] = useState(true); const [visible, setVisible] = useState(true);
const [menuPosition, setMenuPosition] = useState({top: 0, left: 0}); const [menuPosition, setMenuPosition] = useState({top: 0, left: 0});
const [mobileMenuPosition, setMobileMenuPosition] = useState({top: 0, left: 0});
const [openMenuCid, setOpenMenuCid] = useState(null); const [openMenuCid, setOpenMenuCid] = useState(null);
const [openMobileMenuCid, setOpenMobileMenuCid] = useState(null);
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false); const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
const [isClientRedirectMenuOpen, setIsClientRedirectMenuOpen] = useState(false);
const { subplebbitAddress } = useParams(); const { subplebbitAddress } = useParams();
const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress}); const subplebbit = useSubplebbit({subplebbitAddress: selectedAddress});
@@ -60,12 +64,23 @@ const Rules = () => {
setOpenMenuCid(null); setOpenMenuCid(null);
}; };
const handleMobileOptionClick = () => {
setOpenMobileMenuCid(null);
};
const handleOutsideClick = useCallback((e) => { const handleOutsideClick = useCallback((e) => {
if (openMenuCid !== null && !postMenuRef.current.contains(e.target) && !postMenuCatalogRef.current.contains(e.target)) { if (openMenuCid !== null && !postMenuCatalogRef.current.contains(e.target)) {
setOpenMenuCid(null); setOpenMenuCid(null);
} }
}, [openMenuCid, postMenuRef, postMenuCatalogRef]); }, [openMenuCid, postMenuCatalogRef]);
const handleMobileOutsideClick = useCallback((e) => {
if (openMobileMenuCid !== null && !postMenuMobileRef.current.contains(e.target)) {
setOpenMobileMenuCid(null);
}
}, [openMobileMenuCid, postMenuMobileRef]);
useEffect(() => { useEffect(() => {
if (openMenuCid !== null) { if (openMenuCid !== null) {
@@ -79,13 +94,25 @@ const Rules = () => {
}; };
}, [openMenuCid, handleOutsideClick]); }, [openMenuCid, handleOutsideClick]);
useEffect(() => {
if (openMobileMenuCid !== null) {
document.addEventListener('click', handleMobileOutsideClick);
} else {
document.removeEventListener('click', handleMobileOutsideClick);
}
return () => {
document.removeEventListener('click', handleMobileOutsideClick);
};
}, [openMobileMenuCid, handleMobileOutsideClick]);
useEffect(() => { useEffect(() => {
window.scrollTo(0, 0); window.scrollTo(0, 0);
}, []); }, []);
useEffect(() => { useEffect(() => {
const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress); const selectedSubplebbit = defaultSubplebbits.find((subplebbit) => subplebbit.address === subplebbitAddress);
if (subplebbitAddress) { if (subplebbitAddress) {
@@ -358,6 +385,32 @@ const Rules = () => {
change rules change rules
</> </>
) : null} */} ) : null} */}
<li
onMouseOver={() => {setIsClientRedirectMenuOpen(true)}}
onMouseLeave={() => {setIsClientRedirectMenuOpen(false)}}>
View on »
<ul className="dropdown-menu post-menu-catalog"
style={{display: isClientRedirectMenuOpen ? 'block': 'none'}}>
<li onClick={() => handleOptionClick("rules")}>
<a
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Plebbit</a>
</li>
{/* <li onClick={() => handleOptionClick("rules")}>
<a
href={`https://seedit.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Seedit</a>
</li> */}
<li onClick={() => handleOptionClick("rules")}>
<a
href={`https://plebones.netlify.app/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer"
>Plebones</a>
</li>
</ul>
</li>
</ul> </ul>
</div> </div>
</PostMenuCatalog>, document.body </PostMenuCatalog>, document.body
@@ -391,8 +444,48 @@ const Rules = () => {
<div className="op-container"> <div className="op-container">
<div className="post op op-mobile"> <div className="post op op-mobile">
<div className="post-info-mobile"> <div className="post-info-mobile">
<button className="post-menu-button-mobile" <button key={`mob-pb-`} className="post-menu-button-mobile"
style={{ all: 'unset', cursor: 'pointer' }}>...</button> ref={el => {
threadMenuRefsMobile.current["rules"] = el;
}}
onClick={(event) => {
event.stopPropagation();
const rect = threadMenuRefsMobile.current["rules"].getBoundingClientRect();
setMobileMenuPosition({top: rect.top + window.scrollY, left: rect.left});
setOpenMobileMenuCid(prevCid => (prevCid === "rules" ? null : "rules"));
}}
style={{ all: 'unset', cursor: 'pointer' }}
>...</button>
{createPortal(
<PostMenuMobile selectedStyle={selectedStyle}
ref={el => {postMenuMobileRef.current = el}}
onClick={(event) => event.stopPropagation()}
style={{position: "absolute",
display: openMobileMenuCid === "rules" ? "block" : "none",
top: mobileMenuPosition.top + 20,
left: mobileMenuPosition.left}}>
<ul className={`post-menu-mobile-thread-description`}>
<li onClick={() => {
handleMobileOptionClick("rules");
handleShareClick(selectedAddress, "rules")
}}>Share board</li>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://plebbitapp.eth.limo/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleOptionClick("rules")}>
View on plebbit
</li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://plebones.netlify.app/#/p/${selectedAddress}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleOptionClick("rules")}>
View on plebones
</li>
</a>
</ul>
</PostMenuMobile>, document.body
)}
<span className="name-block-mobile"> <span className="name-block-mobile">
<span className="name-mobile capcode" <span className="name-mobile capcode"
style={{cursor: 'pointer'}} style={{cursor: 'pointer'}}
src/components/views/Subscriptions.jsx
+42 -36
View File
@@ -1850,24 +1850,27 @@ const Subscriptions = () => {
(commentMediaInfo.type === 'webpage' && (commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? ( commentMediaInfo.thumbnail))) ? (
<> <>
<li onClick={() => handleMobileOptionClick(thread.cid)}> <a style={{color: 'inherit', textDecoration: 'none'}}
<a style={{color: 'inherit', textDecoration: 'none'}} href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`} target="_blank" rel="noreferrer">
target="_blank" rel="noreferrer" <li onClick={() => handleMobileOptionClick(thread.cid)}>
>Search image on Google</a> Search image on Google
</li> </li>
<li onClick={() => handleMobileOptionClick(thread.cid)}> </a>
<a style={{color: 'inherit', textDecoration: 'none'}} <a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`} href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer" target="_blank" rel="noreferrer">
>Search image on Yandex</a> <li onClick={() => handleMobileOptionClick(thread.cid)}>
</li> Search image on Yandex
<li onClick={() => handleMobileOptionClick(thread.cid)}> </li>
<a style={{color: 'inherit', textDecoration: 'none'}} </a>
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`} <a style={{color: 'inherit', textDecoration: 'none'}}
target="_blank" rel="noreferrer" href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
>Search image on SauceNAO</a> target="_blank" rel="noreferrer">
</li> <li onClick={() => handleMobileOptionClick(thread.cid)}>
Search image on SauceNAO
</li>
</a>
</> </>
) : null ) : null
} }
@@ -2176,24 +2179,27 @@ const Subscriptions = () => {
(replyMediaInfo.type === 'webpage' && (replyMediaInfo.type === 'webpage' &&
replyMediaInfo.thumbnail))) ? ( replyMediaInfo.thumbnail))) ? (
<> <>
<li onClick={() => handleMobileOptionClick(reply.cid)}> <a style={{color: 'inherit', textDecoration: 'none'}}
<a style={{color: 'inherit', textDecoration: 'none'}} href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`}
href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`} target="_blank" rel="noreferrer">
target="_blank" rel="noreferrer" <li onClick={() => handleMobileOptionClick(reply.cid)}>
>Search image on Google</a> Search image on Google
</li> </li>
<li onClick={() => handleMobileOptionClick(reply.cid)}> </a>
<a style={{color: 'inherit', textDecoration: 'none'}} <a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?img_url=${replyMediaInfo.url}&rpt=imageview`} href={`https://yandex.com/images/search?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer" target="_blank" rel="noreferrer">
>Search image on Yandex</a> <li onClick={() => handleMobileOptionClick(reply.cid)}>
</li> Search image on Yandex
<li onClick={() => handleMobileOptionClick(reply.cid)}> </li>
<a style={{color: 'inherit', textDecoration: 'none'}} </a>
href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`} <a style={{color: 'inherit', textDecoration: 'none'}}
target="_blank" rel="noreferrer" href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`}
>Search image on SauceNAO</a> target="_blank" rel="noreferrer">
</li> <li onClick={() => handleMobileOptionClick(reply.cid)}>
Search image on SauceNAO
</li>
</a>
</> </>
) : null ) : null
} }
src/components/views/Thread.jsx
+36 -30
View File
@@ -1832,24 +1832,27 @@ const Thread = () => {
(commentMediaInfo.type === 'webpage' && (commentMediaInfo.type === 'webpage' &&
commentMediaInfo.thumbnail))) ? ( commentMediaInfo.thumbnail))) ? (
<> <>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(comment.cid)}> <li onClick={() => handleMobileOptionClick(comment.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}} Search image on Google
href={`https://lens.google.com/uploadbyurl?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Search image on Google</a>
</li> </li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(comment.cid)}> <li onClick={() => handleMobileOptionClick(comment.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}} Search image on Yandex
href={`https://yandex.com/images/search?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Search image on Yandex</a>
</li> </li>
</a>
<a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer">
<li onClick={() => handleMobileOptionClick(comment.cid)}> <li onClick={() => handleMobileOptionClick(comment.cid)}>
<a style={{color: 'inherit', textDecoration: 'none'}} Search image on SauceNAO
href={`https://saucenao.com/search.php?url=${commentMediaInfo.url}`}
target="_blank" rel="noreferrer"
>Search image on SauceNAO</a>
</li> </li>
</a>
</> </>
) : null ) : null
} }
@@ -2124,24 +2127,27 @@ const Thread = () => {
(replyMediaInfo.type === 'webpage' && (replyMediaInfo.type === 'webpage' &&
replyMediaInfo.thumbnail))) ? ( replyMediaInfo.thumbnail))) ? (
<> <>
<li onClick={() => handleMobileOptionClick(reply.cid)}> <a style={{color: 'inherit', textDecoration: 'none'}}
<a style={{color: 'inherit', textDecoration: 'none'}} href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`}
href={`https://lens.google.com/uploadbyurl?url=${replyMediaInfo.url}`} target="_blank" rel="noreferrer">
target="_blank" rel="noreferrer" <li onClick={() => handleMobileOptionClick(reply.cid)}>
>Search image on Google</a> Search image on Google
</li> </li>
<li onClick={() => handleMobileOptionClick(reply.cid)}> </a>
<a style={{color: 'inherit', textDecoration: 'none'}} <a style={{color: 'inherit', textDecoration: 'none'}}
href={`https://yandex.com/images/search?img_url=${replyMediaInfo.url}&rpt=imageview`} href={`https://yandex.com/images/search?url=${replyMediaInfo.url}`}
target="_blank" rel="noreferrer" target="_blank" rel="noreferrer">
>Search image on Yandex</a> <li onClick={() => handleMobileOptionClick(reply.cid)}>
</li> Search image on Yandex
<li onClick={() => handleMobileOptionClick(reply.cid)}> </li>
<a style={{color: 'inherit', textDecoration: 'none'}} </a>
href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`} <a style={{color: 'inherit', textDecoration: 'none'}}
target="_blank" rel="noreferrer" href={`https://saucenao.com/search.php?url=${replyMediaInfo.url}`}
>Search image on SauceNAO</a> target="_blank" rel="noreferrer">
</li> <li onClick={() => handleMobileOptionClick(reply.cid)}>
Search image on SauceNAO
</li>
</a>
</> </>
) : null ) : null
} }