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

add enlarge image effect to desktop views

Browse Source
This commit is contained in:
Tom
2023-04-29 17:44:27 +02:00
parent 2764a8ae87
commit 756a53dd29
4 changed files with 70 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+7
View File
@@ -54,6 +54,13 @@ const GlobalStyle = createGlobalStyle`
margin: 0; margin: 0;
padding: 0; padding: 0;
} }
.enlarged {
max-width: none !important;
max-height: none !important;
width: auto !important;
height: auto !important;
}
`; `;
const StyledContainer = styled(ToastContainer)` const StyledContainer = styled(ToastContainer)`
src/components/views/Board.jsx
+33 -13
View File
@@ -18,6 +18,7 @@ import findShortParentCid from '../../utils/findShortParentCid';
import getCommentMediaInfo from '../../utils/getCommentMediaInfo'; import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
import getDate from '../../utils/getDate'; import getDate from '../../utils/getDate';
import handleAddressClick from '../../utils/handleAddressClick'; import handleAddressClick from '../../utils/handleAddressClick';
import handleImageClick from '../../utils/handleImageClick';
import handleQuoteClick from '../../utils/handleQuoteClick'; import handleQuoteClick from '../../utils/handleQuoteClick';
import handleStyleChange from '../../utils/handleStyleChange'; import handleStyleChange from '../../utils/handleStyleChange';
import useClickForm from '../../hooks/useClickForm'; import useClickForm from '../../hooks/useClickForm';
@@ -486,23 +487,35 @@ const Board = () => {
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.type === "webpage" ? (
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb">
{thread.thumbnailUrl ? ( {thread.thumbnailUrl ? (
<img key={`fti-${index}`} src={thread.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} /> <img key={`fti-${index}`}
src={thread.thumbnailUrl} alt={commentMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null} ) : null}
</span> </span>
) : null} ) : null}
{commentMediaInfo?.type === "image" ? ( {commentMediaInfo?.type === "image" ? (
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb">
<img key={`fti-${index}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> <img key={`fti-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
) : null} ) : null}
{commentMediaInfo?.type === "video" ? ( {commentMediaInfo?.type === "video" ? (
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb">
<video controls width="" key={`fti-${index}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> <video controls width="" key={`fti-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
) : null} ) : null}
{commentMediaInfo?.type === "audio" ? ( {commentMediaInfo?.type === "audio" ? (
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className="file-thumb">
<audio controls key={`fti-${index}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> <audio controls key={`fti-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
) : null} ) : null}
</div> </div>
@@ -707,8 +720,9 @@ const Board = () => {
<span key={`fta-${index}`} className="file-thumb-reply"> <span key={`fta-${index}`} className="file-thumb-reply">
{reply.thumbnailUrl ? ( {reply.thumbnailUrl ? (
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={reply.thumbnailUrl} src={reply.thumbnailUrl} alt={replyMediaInfo.type}
alt="thumbnail" onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} ) : null}
</span> </span>
@@ -716,8 +730,9 @@ const Board = () => {
{replyMediaInfo?.type === "image" ? ( {replyMediaInfo?.type === "image" ? (
<span key={`fta-${index}`} className="file-thumb-reply"> <span key={`fta-${index}`} className="file-thumb-reply">
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={replyMediaInfo.url} src={replyMediaInfo.url} alt={replyMediaInfo.type}
alt={replyMediaInfo.type} onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
) : null} ) : null}
@@ -837,27 +852,32 @@ const Board = () => {
commentMediaInfo.type === "webpage" ? ( commentMediaInfo.type === "webpage" ? (
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
{thread.thumbnailUrl ? ( {thread.thumbnailUrl ? (
<img key={`mob-img-${index}`} src={thread.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} /> <img key={`mob-img-${index}`}
src={thread.thumbnailUrl} alt="thumbnail"
onError={(e) => e.target.src = fallbackImgUrl} />
) : null} ) : null}
<div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div> <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
</span> </span>
) : commentMediaInfo.type === "image" ? ( ) : commentMediaInfo.type === "image" ? (
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
<img key={`mob-img-${index}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> <img key={`mob-img-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div> <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
</span> </span>
) : commentMediaInfo.type === "video" ? ( ) : commentMediaInfo.type === "video" ? (
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
<video key={`fti-${index}`} <video key={`fti-${index}`}
src={commentMediaInfo.url} src={commentMediaInfo.url} alt={commentMediaInfo.type}
alt={commentMediaInfo.type}
style={{ pointerEvents: "none" }} style={{ pointerEvents: "none" }}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div> <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
</span> </span>
) : commentMediaInfo.type === "audio" ? ( ) : commentMediaInfo.type === "audio" ? (
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${thread.cid}`} className="file-thumb-mobile">
<audio key={`mob-img-${index}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> <audio key={`mob-img-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div> <div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
</span> </span>
) : null ) : null
src/components/views/Thread.jsx
+25 -12
View File
@@ -18,6 +18,7 @@ import formatState from '../../utils/formatState';
import getCommentMediaInfo from '../../utils/getCommentMediaInfo'; import getCommentMediaInfo from '../../utils/getCommentMediaInfo';
import getDate from '../../utils/getDate'; import getDate from '../../utils/getDate';
import handleAddressClick from '../../utils/handleAddressClick'; import handleAddressClick from '../../utils/handleAddressClick';
import handleImageClick from '../../utils/handleImageClick';
import handleQuoteClick from '../../utils/handleQuoteClick'; import handleQuoteClick from '../../utils/handleQuoteClick';
import handleStyleChange from '../../utils/handleStyleChange'; import handleStyleChange from '../../utils/handleStyleChange';
import useClickForm from '../../hooks/useClickForm'; import useClickForm from '../../hooks/useClickForm';
@@ -466,23 +467,35 @@ const Thread = () => {
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.type === "webpage" ? (
<span key={`fta-${comment.cid}`} className="file-thumb"> <span key={`fta-${comment.cid}`} className="file-thumb">
{comment.thumbnailUrl ? ( {comment.thumbnailUrl ? (
<img key={`fti-${index}`} src={comment.thumbnailUrl} alt="thumbnail" onError={(e) => e.target.src = fallbackImgUrl} /> <img key={`fti-${index}`}
src={comment.thumbnailUrl} alt={commentMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null} ) : null}
</span> </span>
) : null} ) : null}
{commentMediaInfo?.type === "image" ? ( {commentMediaInfo?.type === "image" ? (
<span key={`fta-${comment.cid}`} className="file-thumb"> <span key={`fta-${comment.cid}`} className="file-thumb">
<img key={`fti-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> <img key={`fti-${comment.cid}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
) : null} ) : null}
{commentMediaInfo?.type === "video" ? ( {commentMediaInfo?.type === "video" ? (
<span key={`fta-${comment.cid}`} className="file-thumb"> <span key={`fta-${comment.cid}`} className="file-thumb">
<video controls key={`fti-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> <video controls key={`fti-${comment.cid}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
) : null} ) : null}
{commentMediaInfo?.type === "audio" ? ( {commentMediaInfo?.type === "audio" ? (
<span key={`fta-${comment.cid}`} className="file-thumb"> <span key={`fta-${comment.cid}`} className="file-thumb">
<audio controls key={`fti-${comment.cid}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => e.target.src = fallbackImgUrl} /> <audio controls key={`fti-${comment.cid}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
) : null} ) : null}
</div> </div>
@@ -653,8 +666,9 @@ const Thread = () => {
<span key={`fta-${index}`} className="file-thumb-reply"> <span key={`fta-${index}`} className="file-thumb-reply">
{reply.thumbnailUrl ? ( {reply.thumbnailUrl ? (
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={reply.thumbnailUrl} src={reply.thumbnailUrl} alt="thumbnail"
alt="thumbnail" onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
) : null} ) : null}
</span> </span>
@@ -662,23 +676,22 @@ const Thread = () => {
{replyMediaInfo?.type === "image" ? ( {replyMediaInfo?.type === "image" ? (
<span key={`fta-${index}`} className="file-thumb-reply"> <span key={`fta-${index}`} className="file-thumb-reply">
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={replyMediaInfo.url} src={replyMediaInfo.url} alt={replyMediaInfo.type}
alt={replyMediaInfo.type} onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
) : null} ) : null}
{replyMediaInfo?.type === "video" ? ( {replyMediaInfo?.type === "video" ? (
<span key={`fta-${index}`} className="file-thumb-reply"> <span key={`fta-${index}`} className="file-thumb-reply">
<video controls <video controls key={`fti-${index}`}
key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
) : null} ) : null}
{replyMediaInfo?.type === "audio" ? ( {replyMediaInfo?.type === "audio" ? (
<span key={`fta-${index}`} className="file-thumb-reply"> <span key={`fta-${index}`} className="file-thumb-reply">
<audio controls <audio controls key={`fti-${index}`}
key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
src/utils/handleImageClick.js
+5
View File
@@ -0,0 +1,5 @@
const handleImageClick = (e) => {
e.target.classList.toggle('enlarged');
};
export default handleImageClick;