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

Merge branch 'master' of github.com:plebbit/plebchan

Browse Source
This commit is contained in:
Esteban Abaroa
2023-07-31 16:48:24 +00:00
parent 76846f5469 2b8a2ff88b
commit 6cb4f80c5c
8 changed files with 472 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/modals/CreateBoardModal.jsx
+115 -14
View File
@@ -1,22 +1,34 @@
import React, { useRef, useState } from 'react';
import React, { useEffect, useRef, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { useAccount, useCreateSubplebbit,
// useSubplebbits, useAccountSubplebbits
} from '@plebbit/plebbit-react-hooks';
import { StyledModal } from '../styled/modals/CreateBoardModal.styled';
import useGeneralStore from '../../hooks/stores/useGeneralStore';
import Modal from 'react-modal';
import useError from '../../hooks/useError';
import useSuccess from '../../hooks/useSuccess';
const CreateBoardModal = ({ isOpen, closeModal }) => {
const { selectedStyle } = useGeneralStore(state => state);
const nodeRef = useRef(null);
const account = useAccount();
const navigate = useNavigate();
const [boardTitle, setBoardTitle] = useState('');
const nodeRef = useRef(null);
const ruleInputRef = useRef(null);
const [, setNewErrorMessage] = useError();
const [, setNewSuccessMessage] = useSuccess();
const [title, setTitle] = useState('');
const [description, setDescription] = useState('');
const [avatar, setAvatar] = useState('');
const [moderators, setModerators] = useState('');
const [rule, setRule] = useState('');
const [rules, setRules] = useState([]);
const [editIndex, setEditIndex] = useState(-1);
const [, setNewErrorMessage] = useError();
const handleAddRule = () => {
if (rule.trim() === '') {
@@ -39,6 +51,13 @@ const CreateBoardModal = ({ isOpen, closeModal }) => {
}
useEffect(() => {
if (ruleInputRef.current) {
ruleInputRef.current.focus();
}
}, [rules]);
const handleKeyDown = (e) => {
if (e.key === 'Enter') {
handleAddRule();
@@ -49,6 +68,7 @@ const CreateBoardModal = ({ isOpen, closeModal }) => {
const handleEditRule = (index) => {
setRule(rules[index]);
setEditIndex(index);
ruleInputRef.current.focus();
}
@@ -58,8 +78,88 @@ const CreateBoardModal = ({ isOpen, closeModal }) => {
}
setRules(rules.filter((_, i) => i !== index));
}
const createSubplebbitOptions = {
title: title || undefined,
description: description || undefined,
suggested: {
avatarUrl : avatar || undefined,
},
roles: moderators || undefined,
rules: rules || undefined,
}
const resetFields = () => {
setTitle('');
setDescription('');
setAvatar('');
setModerators('');
setRule('');
setRules([]);
}
const { createdSubplebbit, createSubplebbit } = useCreateSubplebbit(createSubplebbitOptions);
const handleCreateBoard = async () => {
let moderatorAddresses = moderators.trim() ? moderators.split(',').map(addr => addr.trim()) : [];
let invalidAddresses = moderatorAddresses.filter(addr => !(addr.endsWith('.eth') || (addr.startsWith('12D3KooW') && addr.length === 52)));
if (invalidAddresses.length > 0) {
setNewErrorMessage("Invalid moderator addresses: " + invalidAddresses.join(", "));
return;
}
const roles = {};
moderatorAddresses.forEach(addr => {
roles[addr] = { role: 'moderator' };
});
roles[account.author.address] = { role: 'admin' };
let createSubplebbitOptions = {
roles: roles,
};
if (title) {
createSubplebbitOptions.title = title;
}
if (description) {
createSubplebbitOptions.description = description;
}
if (avatar) {
createSubplebbitOptions.suggested = {
avatarUrl : avatar,
};
}
if (rules.length > 0) {
createSubplebbitOptions.rules = rules;
}
try {
await createSubplebbit(createSubplebbitOptions);
} catch (error) {
setNewErrorMessage(error.message);
}
if (createdSubplebbit) {
resetFields();
closeModal();
setNewSuccessMessage('Board created successfully, address: ' + createdSubplebbit.address);
navigate(`/p/${createdSubplebbit.address}`);
}
}
// remove after testing:
// const {accountSubplebbits} = useAccountSubplebbits()
// const ownerSubplebbitAddresses = Object.keys(accountSubplebbits).map(subplebbitAddress => accountSubplebbits[subplebbitAddress].role === 'owner')
// const subplebbits = useSubplebbits({subplebbitAddresses: ownerSubplebbitAddresses})
// console.log(subplebbits);
return (
<StyledModal
@@ -86,8 +186,8 @@ const CreateBoardModal = ({ isOpen, closeModal }) => {
<input
id="name"
type="text"
value={boardTitle}
onChange={(e) => setBoardTitle(e.target.value)}
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="Board Title"
/>
</div>
@@ -116,8 +216,8 @@ const CreateBoardModal = ({ isOpen, closeModal }) => {
<input
id="name"
type="text"
value={boardTitle}
onChange={(e) => setBoardTitle(e.target.value)}
value={avatar}
onChange={(e) => setAvatar(e.target.value)}
placeholder="https://example.com/image.png"
/>
</div>
@@ -128,11 +228,11 @@ const CreateBoardModal = ({ isOpen, closeModal }) => {
Optional, let other users help you moderate your board.
</div>
<div className='settings-input'>
<input
<textarea
id="name"
type="text"
value={boardTitle}
onChange={(e) => setBoardTitle(e.target.value)}
value={moderators}
onChange={(e) => setModerators(e.target.value)}
placeholder='username.eth, 12D3KooW..., username2.eth'
/>
</div>
@@ -144,6 +244,7 @@ const CreateBoardModal = ({ isOpen, closeModal }) => {
</div>
<div className='settings-input'>
<input
ref={ruleInputRef}
id="rule"
type="text"
value={rule}
@@ -171,7 +272,7 @@ const CreateBoardModal = ({ isOpen, closeModal }) => {
))}
</fieldset>
)}
<button id="create-board-btn">Create Board</button>
<button onClick={handleCreateBoard} id="create-board-btn">Create Board</button>
</ul>
</div>
</StyledModal>
@@ -180,4 +281,4 @@ const CreateBoardModal = ({ isOpen, closeModal }) => {
Modal.setAppElement('#root');
export default CreateBoardModal;
export default CreateBoardModal;
src/components/modals/SettingsModal.jsx
+138 -23
View File
@@ -1,7 +1,7 @@
import React, { useState, useEffect, useRef } from "react";
import { Link, useLocation, useNavigate } from "react-router-dom";
import Modal from "react-modal";
import { deleteCaches, exportAccount, importAccount, setAccount, setActiveAccount, useAccount, useAccounts } from "@plebbit/plebbit-react-hooks";
import { deleteCaches, exportAccount, importAccount, setAccount, setActiveAccount, useAccount, useAccounts, useResolvedAuthorAddress } from "@plebbit/plebbit-react-hooks";
import { StyledModal } from "../styled/modals/SettingsModal.styled";
import useError from "../../hooks/useError";
import useSuccess from "../../hooks/useSuccess";
@@ -22,6 +22,9 @@ const SettingsModal = ({ isOpen, closeModal }) => {
const location = useLocation();
const [expanded, setExpanded] = useState([]);
const [accountJson, setAccountJson] = useState(null);
const [copyStatus, setCopyStatus] = useState(false);
const [ensName, setEnsName] = useState('');
const [checkedENS, setCheckedENS] = useState(false);
const [, setNewErrorMessage] = useError();
const [, setNewSuccessMessage] = useSuccess();
@@ -37,6 +40,52 @@ const SettingsModal = ({ isOpen, closeModal }) => {
const dataPathRef = useRef();
const importRef = useRef();
const nameRef = useRef();
const ensRef = useRef();
const author = {...account?.author, address: ensName};
const { resolvedAddress, state } = useResolvedAuthorAddress({ author, cache: false });
useEffect(() => {
if (checkedENS && resolvedAddress && state === 'succeeded') {
setCheckedENS(false);
}
}, [checkedENS, state, resolvedAddress]);
const handleENSChange = () => {
const newEnsName = ensRef.current.value;
setEnsName(newEnsName);
};
const handleENSCheck = () => {
const newEnsName = ensRef.current.value;
setEnsName(newEnsName);
setCheckedENS(true);
};
const handleENSSave = async () => {
if (resolvedAddress === account?.signer?.address) {
try {
await setAccount({
...account,
author: {
...account?.author,
address: ensName,
},
});
setNewSuccessMessage("ENS Name Saved");
} catch (error) {
setNewErrorMessage(error.message);
console.log(error);
}
} else if (resolvedAddress !== account?.signer?.address) {
setNewErrorMessage(`Failed resolving address, ${ensName}`);
}
};
const defaultGatewayUrls = [
'https://ipfs.io',
@@ -60,6 +109,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
'https://polygon-rpc.com',
];
const isValidURL = (url) => {
try {
new URL(url);
@@ -70,6 +120,32 @@ const SettingsModal = ({ isOpen, closeModal }) => {
};
const handleCopyAddress = async () => {
try {
await navigator.clipboard.writeText(account?.author.address);
setCopyStatus(true);
} catch (err) {
console.error('Failed to copy text: ', err);
}
};
useEffect(() => {
let copyStatusTimeoutId;
let checkedENSTimeoutId;
if (copyStatus) {
copyStatusTimeoutId = setTimeout(() => setCopyStatus(false), 3000);
}
if (checkedENS) {
checkedENSTimeoutId = setTimeout(() => setCheckedENS(false), 5000);
}
return () => {
clearTimeout(copyStatusTimeoutId);
clearTimeout(checkedENSTimeoutId);
};
}, [copyStatus, checkedENS]);
const handleSavePlebbitOptions = async () => {
let gatewayUrls = gatewayRef.current.value.split('\n').filter(url => url.trim());
let ipfsClientsOptions = ipfsRef.current.value.split('\n').filter(url => url.trim());
@@ -151,7 +227,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
await setAccount({
...account,
plebbitOptions: {
...account.plebbitOptions,
...account?.plebbitOptions,
chainProviders,
},
});
@@ -211,7 +287,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
await setAccount({
...account,
plebbitOptions: {
...account.plebbitOptions,
...account?.plebbitOptions,
chainProviders,
},
});
@@ -297,9 +373,9 @@ const SettingsModal = ({ isOpen, closeModal }) => {
try {
await setAccount({
...account,
name: name || account.name,
name: name || account?.name,
author: {
...account.author,
...account?.author,
displayName: name,
}});
setNewSuccessMessage("Account Name Saved");
@@ -353,6 +429,11 @@ const SettingsModal = ({ isOpen, closeModal }) => {
<div className="plebbit-options-buttons"
style={{ display: expanded.includes(1) ? 'block' : 'none' }}
>
<button className="save-button"
onClick={handleExport}>Export</button>
<button className="reset-button"
onClick={handleImport}
>Import</button>
</div>
</li>
<ul className="settings-cat" style={{ display: expanded.includes(1) ? 'block' : 'none' }}>
@@ -366,7 +447,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
checked={anonymousMode}
onChange={() => {setAnonymousMode(!anonymousMode)}}
/>
&nbsp;Anon mode
&nbsp;Anon Mode
</label>
</li>
<li className="settings-tip anon-tip">
@@ -375,13 +456,6 @@ const SettingsModal = ({ isOpen, closeModal }) => {
<li className="settings-option disc">
Account Data
</li>
<div className="plebbit-options-buttons">
<button className="save-button"
onClick={handleExport}>Export</button>
<button className="reset-button"
onClick={handleImport}
>Import</button>
</div>
<li className="settings-tip">
To export, click "Export", then save your account data displayed below in a safe place. To import, paste your account data into the box below, then click "Import".
</li>
@@ -392,7 +466,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
<textarea ref={importRef} />
)}
</div>
<li className="settings-option disc" style={{marginTop: '15px'}}>
<li className="settings-option disc">
Account Address: u/{account?.author.shortAddress}
</li>
<li className="settings-tip">
@@ -410,9 +484,49 @@ const SettingsModal = ({ isOpen, closeModal }) => {
</option>
))}
</select>
{account?.author.address.endsWith(".eth") ? null : (
<button style={{marginLeft: '35px'}} className="save-button" id="save-name" onClick={handleCopyAddress}>
{copyStatus ? "Copied!" : "Copy Full Address"}
</button>
)}
</div>
</li>
<li className="settings-option disc" style={{marginTop: '15px'}}>
<li className="settings-option disc">
Crypto Address
</li>
<li className="settings-tip">
{account?.author.address.endsWith(".eth") ? "Your account address is already an ENS name." : (
'Change your account address to an ENS name you own: in your ENS name page on ens.domains, click on "Records", "Edit Records", "Add record", add "plebbit-author-address" as record name, add your full address as value (copy it with the button above) and save.'
)}
</li>
<div className="settings-input">
<input
className="settings-input"
style={{marginLeft: '20px'}}
placeholder="address.eth"
ref={ensRef}
value={ensName}
onChange={handleENSChange}
disabled={checkedENS}
/>
<button className="save-button" id="save-name" onClick={handleENSSave}>
Save
</button>
<button className="save-button check-button" id="save-name" onClick={handleENSCheck}>
Check
</button>
</div>
{checkedENS && ensName === account?.signer?.address && (
<li className="settings-tip" style={{marginTop: '10px', color: 'green'}}>
{ensName} has been acquired by you correctly.
</li>
)}
{checkedENS && ensName !== account?.signer?.address && (
<li className="settings-tip" style={{marginTop: '10px', color: 'red'}}>
{ensName} has not been acquired by you yet.
</li>
)}
<li className="settings-option disc">
Account Name
</li>
<li className="settings-tip">
@@ -424,8 +538,9 @@ const SettingsModal = ({ isOpen, closeModal }) => {
type="text" ref={nameRef} defaultValue={account?.author.displayName}
placeholder="Anonymous"
/>
<button className="save-button" id="save-name"
onClick={handleDisplayName}>Save</button>
<button className="save-button" id="save-name" onClick={handleDisplayName}>
Save
</button>
</div>
</li>
</ul>
@@ -447,7 +562,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
onClick={handleResetPlebbitOptions}>Reset</button>
</div>
</li>
<ul className="settings-cat" style={{ display: expanded.includes(2) ? 'block' : 'none' }}>
<ul className="settings-cat" style={{ display: expanded.includes(2) ? 'block' : 'none', marginTop: '-10px' }}>
<li className="settings-option disc">
IPFS Gateway URLs
</li>
@@ -509,23 +624,23 @@ const SettingsModal = ({ isOpen, closeModal }) => {
<button className="save-button" onClick={handleResetChainProviders}>Reset</button>
</div>
</li>
<ul className="settings-cat" style={{ display: expanded.includes(3) ? 'block' : 'none' }}>
<ul className="settings-cat" style={{ display: expanded.includes(3) ? 'block' : 'none', marginTop: '-10px'}}>
<li className="settings-option disc">Ethereum RPC</li>
<li className="settings-tip">Needed for .eth addresses</li>
<li className="settings-tip">Needed for .eth addresses.</li>
<div className="settings-input">
<textarea placeholder="Ethereum RPC URLs"
defaultValue={account?.plebbitOptions?.chainProviders?.['eth']?.urls.join("\n")}
ref={ethereumRpcRef}
/>
</div>
<li className="settings-option disc">Polygon RPC</li>
<li className="settings-tip">Needed for XPLEB NFTs</li>
{/* <li className="settings-option disc">Polygon RPC</li>
<li className="settings-tip">Needed for XPLEB NFTs.</li>
<div className="settings-input">
<textarea placeholder="Polygon RPC URLs"
defaultValue={account?.plebbitOptions?.chainProviders?.['matic']?.urls.join("\n")}
ref={polygonRpcRef}
/>
</div>
</div> */}
</ul>
</ul>
<div>
src/components/styled/modals/CreateBoardModal.styled.jsx
+7 -6
View File
@@ -3,14 +3,15 @@ import Modal from "react-modal";
export const StyledModal = styled(Modal)`
.modal-content {
top: 25%;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 450px;
max-height: 650px;
left: calc(50% - 50px);
height: auto;
max-height: calc(100vh - 2*50px);
overflow-y: auto;
margin-left: -178px;
position: absolute;
padding: 5px 5px 5px;
padding: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, .25);
}
src/components/styled/modals/SettingsModal.styled.jsx
+7 -9
View File
@@ -114,6 +114,10 @@ export const StyledModal = styled(Modal)`
position: absolute;
}
.check-button {
margin-left: 58px !important;
}
.cache-button {
margin: auto;
margin-bottom: 10px;
@@ -122,9 +126,10 @@ export const StyledModal = styled(Modal)`
}
.settings-option {
margin: 5px 0 5px 0;
margin: 15px 0 5px 0 !important;
padding-left: 23px;
display: inline-block;
position: relative;
}
.settings-tip {
@@ -145,13 +150,6 @@ export const StyledModal = styled(Modal)`
margin-top: 6px;
}
.settings-option {
margin: 5px 0 5px 0;
padding-left: 23px;
display: inline-block;
position: relative;
}
.settings-input {
position: relative;
padding-left: 23px;
@@ -195,7 +193,7 @@ export const StyledModal = styled(Modal)`
}
.anon-tip {
margin-bottom: 10px;
margin-bottom: 0px;
}
.anon-tip::before {
src/components/styled/views/Board.styled.jsx
+18 -1
View File
@@ -1905,7 +1905,7 @@ export const BoardForm = styled.div`
.file-thumb {
float: left;
margin: 3px 20px 5px 20px;
background-color: rgba(0, 0, 0, 0.1);
background-color: rgba(0, 0, 0, 0.05);
}
.reply-file-text {
@@ -2070,6 +2070,19 @@ export const BoardForm = styled.div`
margin: 7px 2px 0;
padding-left: 0;
.button-mobile {
float: right;
border-radius: 3px;
padding: 6px 10px 5px;
user-select: none;
text-decoration: none;
}
video {
width: 100%;
height: auto;
}
.post-reply {
margin-top: 0 !important;
width: 100%;
@@ -2849,6 +2862,10 @@ export const BoardForm = styled.div`
clear: both;
}
.file-thumb {
background-color: rgba(255, 255, 255, 0.01) !important;
}
.op-container {
display: grid;
}
src/components/views/Board.jsx
+60 -11
View File
@@ -2017,6 +2017,16 @@ const Board = () => {
replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type})
{replyMediaInfo?.type === "video" || "iframe" ? (
isReplyThumbnailClicked[index] ? (
<span>
-[
<span className='reply-link'
style={{textDecoration: 'underline', cursor: 'pointer'}}
onClick={() => {handleThumbnailClick(index, 'reply')}}>Close</span>
]
</span>) : null)
: null}
</div>
{replyMediaInfo?.type === "webpage" ? (
<div key={`enlarge-reply-${index}`} className="img-container">
@@ -2043,12 +2053,29 @@ const Board = () => {
</div>
) : null}
{replyMediaInfo?.type === "video" ? (
<div key={`enlarge-reply-${index}`} className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
<video controls
key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
{isReplyThumbnailClicked[index] ? (
<video controls
className='enlarged'
key={`fti-${index}`}
src={replyMediaInfo.url}
alt={replyMediaInfo.type}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl}
/>
) : (
<video
key={`fti-${index}`}
src={replyMediaInfo.url}
alt="thumbnail"
onClick={() => {handleThumbnailClick(index, 'reply')}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl}
/>
)}
</span>
</div>
) : null}
{replyMediaInfo?.type === "audio" ? (
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
@@ -2625,13 +2652,35 @@ const Board = () => {
</span>
</div>
) : replyMediaInfo.type === "video" ? (
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
<video key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type}
style={{ pointerEvents: "none" }}
onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div>
</span>
<span key={`mob-ft${thread.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
{isMobileReplyThumbnailClicked[index] ? (
<video key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type}
controls
style={{ all: 'unset', width: '100%', height: '100%', cursor: 'pointer'}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : (
<video
key={`fti-${index}`}
src={replyMediaInfo.url}
alt="thumbnail"
onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
style={{cursor: "pointer"}}
id="video-thumbnail-mobile"
onError={(e) => e.target.src = fallbackImgUrl}
/>
)}
{replyMediaInfo?.type === "video" || "iframe" ? (
isMobileReplyThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}
onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
>Close</span>
</div>
) : (
<div key={`mob-fi-${index}`} className="file-info-mobile">video</div>
)) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>}
</span>
) : replyMediaInfo.type === "audio" ? (
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
<audio key={`mob-img-${index}`}
src/components/views/Thread.jsx
+126 -76
View File
@@ -113,8 +113,9 @@ const Thread = () => {
const [postOnHoverHeight, setPostOnHoverHeight] = useState(0);
const [executeAnonMode, setExecuteAnonMode] = useState(false);
const [cidTracker, setCidTracker] = useState({});
const [isThumbnailClicked, setIsThumbnailClicked] = useState({});
const [isMobileThumbnailClicked, setIsMobileThumbnailClicked] = useState({});
const [isThreadThumbnailClicked, setIsThreadThumbnailClicked] = useState({});
const [isReplyThumbnailClicked, setIsReplyThumbnailClicked] = useState({});
const [isMobileThreadThumbnailClicked, setIsMobileThreadThumbnailClicked] = useState({});
const [isCreateBoardOpen, setIsCreateBoardOpen] = useState(false);
@@ -131,17 +132,28 @@ const Thread = () => {
const fallbackImgUrl = "assets/filedeleted-res.gif";
const handleThumbnailClick = (index, isMobile=false) => {
if (isMobile) {
setIsMobileThumbnailClicked(prevState => ({
...prevState,
[index]: !prevState[index],
}));
} else {
setIsThumbnailClicked(prevState => ({
...prevState,
[index]: !prevState[index],
}));
const handleThumbnailClick = (index, type) => {
switch(type) {
case 'thread':
setIsThreadThumbnailClicked(prevState => ({
...prevState,
[index]: !prevState[index],
}));
break;
case 'reply':
setIsReplyThumbnailClicked(prevState => ({
...prevState,
[index]: !prevState[index],
}));
break;
case 'mobileThread':
setIsMobileThreadThumbnailClicked(prevState => ({
...prevState,
[index]: !prevState[index],
}));
break;
default:
break;
}
};
@@ -844,21 +856,21 @@ const Thread = () => {
commentMediaInfo?.url.slice(0, 30) + "(...)" :
commentMediaInfo?.url
}</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
{isThumbnailClicked[index] ? (
{isThreadThumbnailClicked[index] ? (
<span>
-[
<span className='reply-link'
style={{textDecoration: 'underline', cursor: 'pointer'}}
onClick={() => {handleThumbnailClick(index)}}>Close</span>
onClick={() => {handleThumbnailClick(index, 'thread')}}>Close</span>
]
</span>
) : null}
</div>
{commentMediaInfo?.type === 'iframe' && (
<div key={`enlarge-${index}`}
className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}>
className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb">
{(isThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
{(isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
<iframe
className='enlarged'
key={`fti-${index}`}
@@ -874,7 +886,7 @@ const Thread = () => {
key={`fti-${index}`}
src={commentMediaInfo.thumbnail}
alt="thumbnail"
onClick={() => {handleThumbnailClick(index)}}
onClick={() => {handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
)}
@@ -887,7 +899,7 @@ const Thread = () => {
{comment.thumbnailUrl ? (
<img key={`fti-${index}`}
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type}
onClick={handleImageClick}
onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
@@ -899,16 +911,16 @@ const Thread = () => {
<span key={`fta-${index}`} className="file-thumb">
<img key={`fti-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onClick={handleImageClick}
onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
</div>
) : null}
{commentMediaInfo?.type === "video" ? (
<div key={`enlarge-${index}`} className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<div key={`enlarge-${index}`} className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb">
{isThumbnailClicked[index] ? (
{isThreadThumbnailClicked[index] ? (
<video
className='enlarged'
key={`fti-${index}`}
@@ -922,7 +934,7 @@ const Thread = () => {
key={`fti-${index}`}
src={commentMediaInfo.url}
alt="thumbnail"
onClick={() => {handleThumbnailClick(index)}}
onClick={() => {handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl}
/>
@@ -1193,6 +1205,15 @@ const Thread = () => {
if (storedSigners[selectedThread]) {
signerAddress = storedSigners[selectedThread].address;
}
let replyDisplayWidth, replyDisplayHeight;
if (reply.linkWidth && reply.linkHeight) {
const scale = Math.min(1, 125 / Math.max(reply.linkWidth, reply.linkHeight));
replyDisplayWidth = `${reply.linkWidth * scale}px`;
replyDisplayHeight = `${reply.linkHeight * scale}px`;
} else {
replyDisplayWidth = '125px';
replyDisplayHeight = '125px';
}
return (
<div key={`pc-${index}`} className="reply-container">
<div key={`sa-${index}`} className="side-arrows">{'>>'}</div>
@@ -1424,57 +1445,86 @@ const Thread = () => {
</div>
</div>
{replyMediaInfo?.url ? (
<div key={`f-${index}`} className="file"
style={{marginBottom: "5px"}}>
<div key={`ft-${index}`} className="reply-file-text">
Link:&nbsp;
<a key={`fa-${index}`} href={replyMediaInfo.url}
target="_blank" rel="noreferrer">{
replyMediaInfo?.url.length > 30 ?
replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type})
</div>
{replyMediaInfo?.type === "webpage" ? (
<div key="enlarge-reply" className="img-container">
<span key={`fta-${index}`} className="file-thumb-reply">
{reply.thumbnailUrl ? (
<img key={`fti-${index}`}
src={replyMediaInfo.thumbnail} alt="thumbnail"
onClick={handleImageClick}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
</span>
</div>
) : null}
{replyMediaInfo?.type === "image" ? (
<div key="enlarge-reply" className="img-container">
<span key={`fta-${index}`} className="file-thumb-reply">
<div key={`f-${index}`} className="file"
style={{marginBottom: "5px"}}>
<div key={`ft-${index}`} className="reply-file-text">
Link:&nbsp;
<a key={`fa-${index}`} href={replyMediaInfo.url} target="_blank"
rel="noopener noreferrer">{
replyMediaInfo?.url.length > 30 ?
replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type})
{replyMediaInfo?.type === "video" || "iframe" ? (
isReplyThumbnailClicked[index] ? (
<span>
-[
<span className='reply-link'
style={{textDecoration: 'underline', cursor: 'pointer'}}
onClick={() => {handleThumbnailClick(index, 'reply')}}>Close</span>
]
</span>) : null)
: null}
</div>
{replyMediaInfo?.type === "webpage" ? (
<div key={`enlarge-reply-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
{reply.thumbnailUrl ? (
<img key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type}
onClick={handleImageClick}
src={replyMediaInfo.thumbnail} alt={replyMediaInfo.type}
onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'reply')}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
</span>
</div>
) : null}
{replyMediaInfo?.type === "video" ? (
<span key={`fta-${index}`} className="file-thumb-reply">
<video controls key={`fti-${index}`}
) : null}
{replyMediaInfo?.type === "image" ? (
<div key={`enlarge-reply-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
<img key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type}
onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'reply')}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
{replyMediaInfo?.type === "audio" ? (
<span key={`fta-${index}`} className="file-thumb-reply">
<audio controls key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
</div>
) : null}
{replyMediaInfo?.type === "video" ? (
<div key={`enlarge-reply-${index}`} className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
{isReplyThumbnailClicked[index] ? (
<video controls
className='enlarged'
key={`fti-${index}`}
src={replyMediaInfo.url}
alt={replyMediaInfo.type}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl}
/>
) : (
<video
key={`fti-${index}`}
src={replyMediaInfo.url}
alt="thumbnail"
onClick={() => {handleThumbnailClick(index, 'reply')}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl}
/>
)}
</span>
</div>
) : null}
) : null}
{replyMediaInfo?.type === "audio" ? (
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
<audio controls
key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} />
</span>
) : null}
</div>
) : null}
<blockquote key={`pm-${index}`} className="post-message">
<Link to={() => {}} key={`r-pm-${index}`} className="quotelink"
ref={el => {
@@ -1666,7 +1716,7 @@ const Thread = () => {
{commentMediaInfo?.type === 'iframe' && (
<div key={`enlarge-mob-${index}`} className="img-container">
<span key={`mob-fta-${index}`} className="file-thumb-mobile">
{(isMobileThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
{(isMobileThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
<div style={{width: "92vw"}}>
<iframe
key={`mob-fti-${index}`}
@@ -1681,15 +1731,15 @@ const Thread = () => {
key={`mob-fti-${index}`}
src={commentMediaInfo.thumbnail}
alt="thumbnail"
onClick={() => {handleThumbnailClick(index, true)}}
onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
)}
{commentMediaInfo?.type === "video" || "iframe" ? (
isMobileThumbnailClicked[index] ? (
isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}
onClick={() => {handleThumbnailClick(index, true)}}
onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
>Close</span>
</div>
) : (
@@ -1705,7 +1755,7 @@ const Thread = () => {
{comment.thumbnailUrl ? (
<img key={`mob-img-${index}`}
src={commentMediaInfo.thumbnail} alt="thumbnail"
onClick={handleImageClick}
onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
@@ -1717,7 +1767,7 @@ const Thread = () => {
<span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
<img key={`mob-img-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
onClick={handleImageClick}
onClick={(e) => {handleImageClick(e); handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div>
@@ -1725,7 +1775,7 @@ const Thread = () => {
</div>
) : commentMediaInfo.type === "video" ? (
<span key={`mob-ft${comment.cid}`} className="file-thumb-mobile">
{isMobileThumbnailClicked[index] ? (
{isMobileThreadThumbnailClicked[index] ? (
<video key={`fti-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type}
controls
@@ -1736,17 +1786,17 @@ const Thread = () => {
key={`fti-${index}`}
src={commentMediaInfo.url}
alt="thumbnail"
onClick={() => {handleThumbnailClick(index, true)}}
onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}}
id="video-thumbnail-mobile"
onError={(e) => e.target.src = fallbackImgUrl}
/>
)}
{commentMediaInfo?.type === "video" || "iframe" ? (
isMobileThumbnailClicked[index] ? (
isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}}
onClick={() => {handleThumbnailClick(index, true)}}
onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
>Close</span>
</div>
) : (
src/utils/getCommentMediaInfo.js
+1 -1
View File
@@ -55,7 +55,7 @@ const getCommentMediaInfo = (comment) => {
};
}
const mime = extName(url.pathname.replace('/', ''))[0]?.mime;
const mime = extName(url.pathname.toLowerCase().replace('/', ''))[0]?.mime;
if (mime?.startsWith('image')) {
return {