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

style(views): rename various UI elements for better accuracy, add steps on how to create a board to related button

Browse Source
This commit is contained in:
plebeius.eth
2023-10-01 18:28:00 +02:00
parent 8e6ad3d55d
commit 8ca19c9cda
12 changed files with 829 additions and 704 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/modals/ReplyModal.jsx
+1 -1
View File
@@ -294,7 +294,7 @@ const ReplyModal = ({ isOpen, closeModal }) => {
)} )}
</div> </div>
<div> <div>
<input id='name' type='text' placeholder='Embed link' ref={linkRef} /> <input id='name' type='text' placeholder='Link' ref={linkRef} />
</div> </div>
<div className='textarea-wrapper'> <div className='textarea-wrapper'>
<span className='fixed-text'>{`c/${selectedShortCid}`}</span> <span className='fixed-text'>{`c/${selectedShortCid}`}</span>
src/components/views/All.jsx
+3 -3
View File
@@ -607,7 +607,7 @@ const All = () => {
window.electron && window.electron.isElectron window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true) ? setIsCreateBoardOpen(true)
: alert( : alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
); );
}} }}
> >
@@ -639,7 +639,7 @@ const All = () => {
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => onClick={() =>
alert( alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
) )
} }
> >
@@ -3318,7 +3318,7 @@ const All = () => {
window.electron && window.electron.isElectron window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true) ? setIsCreateBoardOpen(true)
: alert( : alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
); );
}} }}
> >
src/components/views/AllCatalog.jsx
+3 -3
View File
@@ -849,7 +849,7 @@ const AllCatalog = () => {
window.electron && window.electron.isElectron window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true) ? setIsCreateBoardOpen(true)
: alert( : alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
); );
}} }}
> >
@@ -881,7 +881,7 @@ const AllCatalog = () => {
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => onClick={() =>
alert( alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
) )
} }
> >
@@ -1037,7 +1037,7 @@ const AllCatalog = () => {
window.electron && window.electron.isElectron window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true) ? setIsCreateBoardOpen(true)
: alert( : alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
); );
}} }}
> >
src/components/views/Board.jsx
+4 -4
View File
@@ -765,7 +765,7 @@ const Board = () => {
window.electron && window.electron.isElectron window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true) ? setIsCreateBoardOpen(true)
: alert( : alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
); );
}} }}
> >
@@ -800,7 +800,7 @@ const Board = () => {
window.electron && window.electron.isElectron window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true) ? setIsCreateBoardOpen(true)
: alert( : alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
); );
}} }}
> >
@@ -884,7 +884,7 @@ const Board = () => {
</td> </td>
</tr> </tr>
<tr data-type='File'> <tr data-type='File'>
<td>Embed File</td> <td>Link</td>
<td> <td>
<input name='embed' type='text' tabIndex={7} placeholder='Paste link' ref={linkRef} /> <input name='embed' type='text' tabIndex={7} placeholder='Paste link' ref={linkRef} />
<button <button
@@ -4370,7 +4370,7 @@ const Board = () => {
window.electron && window.electron.isElectron window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true) ? setIsCreateBoardOpen(true)
: alert( : alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
); );
}} }}
> >
src/components/views/Catalog.jsx
+4 -4
View File
@@ -1534,7 +1534,7 @@ const Catalog = () => {
window.electron && window.electron.isElectron window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true) ? setIsCreateBoardOpen(true)
: alert( : alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
); );
}} }}
> >
@@ -1567,7 +1567,7 @@ const Catalog = () => {
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => onClick={() =>
alert( alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
) )
} }
> >
@@ -1653,7 +1653,7 @@ const Catalog = () => {
</td> </td>
</tr> </tr>
<tr data-type='File'> <tr data-type='File'>
<td>Embed File</td> <td>Link</td>
<td> <td>
<input name='embed' type='text' tabIndex={7} placeholder='Paste link' ref={linkRef} /> <input name='embed' type='text' tabIndex={7} placeholder='Paste link' ref={linkRef} />
<button <button
@@ -1828,7 +1828,7 @@ const Catalog = () => {
window.electron && window.electron.isElectron window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true) ? setIsCreateBoardOpen(true)
: alert( : alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
); );
}} }}
> >
src/components/views/Description.jsx
+3 -3
View File
@@ -196,7 +196,7 @@ const Description = () => {
window.electron && window.electron.isElectron window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true) ? setIsCreateBoardOpen(true)
: alert( : alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
); );
}} }}
> >
@@ -229,7 +229,7 @@ const Description = () => {
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => onClick={() =>
alert( alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
) )
} }
> >
@@ -719,7 +719,7 @@ const Description = () => {
window.electron && window.electron.isElectron window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true) ? setIsCreateBoardOpen(true)
: alert( : alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
); );
}} }}
> >
src/components/views/Pending.jsx
+427 -287
View File
@@ -23,16 +23,9 @@ import packageJson from '../../../package.json';
const { version } = packageJson; const { version } = packageJson;
const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : ''; const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
const Pending = () => { const Pending = () => {
const { const { defaultSubplebbits, isSettingsOpen, setIsSettingsOpen, selectedAddress, setSelectedAddress, selectedStyle, setSelectedTitle, showPostFormLink } =
defaultSubplebbits, useGeneralStore((state) => state);
isSettingsOpen, setIsSettingsOpen,
selectedAddress, setSelectedAddress,
selectedStyle,
setSelectedTitle,
showPostFormLink
} = useGeneralStore(state => state);
const { index } = useParams(); const { index } = useParams();
@@ -45,17 +38,17 @@ const Pending = () => {
const subplebbitAddress = comment?.subplebbitAddress; const subplebbitAddress = comment?.subplebbitAddress;
const subplebbit = useSubplebbit({subplebbitAddress}) const subplebbit = useSubplebbit({ subplebbitAddress });
const selectedTitle = subplebbit?.title; const selectedTitle = subplebbit?.title;
const handleThumbnailClick = (index, isMobile = false) => { const handleThumbnailClick = (index, isMobile = false) => {
if (isMobile) { if (isMobile) {
setIsMobileThumbnailClicked(prevState => ({ setIsMobileThumbnailClicked((prevState) => ({
...prevState, ...prevState,
[index]: !prevState[index], [index]: !prevState[index],
})); }));
} else { } else {
setIsThumbnailClicked(prevState => ({ setIsThumbnailClicked((prevState) => ({
...prevState, ...prevState,
[index]: !prevState[index], [index]: !prevState[index],
})); }));
@@ -66,17 +59,17 @@ const Pending = () => {
setSelectedAddress(comment?.subplebbitAddress); setSelectedAddress(comment?.subplebbitAddress);
}, [comment, setSelectedAddress]); }, [comment, setSelectedAddress]);
const stateString = useStateString(comment) const stateString = useStateString(comment);
const errorString = useMemo(() => { const errorString = useMemo(() => {
if (comment?.state === 'failed') { if (comment?.state === 'failed') {
let errorString = 'Failed fetching pending thread. Pending index: ' + index; let errorString = 'Failed fetching pending thread. Pending index: ' + index;
if (comment.error) { if (comment.error) {
errorString += `: ${comment.error.toString().slice(0, 300)}` errorString += `: ${comment.error.toString().slice(0, 300)}`;
} }
return errorString return errorString;
} }
}, [comment?.state, comment?.error, index]) }, [comment?.state, comment?.error, index]);
useEffect(() => { useEffect(() => {
if (errorString) { if (errorString) {
@@ -88,7 +81,7 @@ const Pending = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const [commentMediaInfo, setCommentMediaInfo] = useState(null); const [commentMediaInfo, setCommentMediaInfo] = useState(null);
const fallbackImgUrl = "assets/filedeleted-res.gif"; const fallbackImgUrl = 'assets/filedeleted-res.gif';
// mobile navbar board select functionality // mobile navbar board select functionality
const handleSelectChange = (event) => { const handleSelectChange = (event) => {
@@ -116,118 +109,150 @@ const Pending = () => {
} }
}, [comment]); }, [comment]);
return ( return (
<> <>
<Helmet> <Helmet>
<title>{`plebchan - Pending Thread #${parseInt(index) + 1}`}</title> <title>{`plebchan - Pending Thread #${parseInt(index) + 1}`}</title>
</Helmet> </Helmet>
<Container> <Container>
<CreateBoardModal <CreateBoardModal selectedStyle={selectedStyle} isOpen={isCreateBoardOpen} closeModal={() => setIsCreateBoardOpen(false)} />
selectedStyle={selectedStyle} <SettingsModal selectedStyle={selectedStyle} isOpen={isSettingsOpen} closeModal={() => setIsSettingsOpen(false)} />
isOpen={isCreateBoardOpen}
closeModal={() => setIsCreateBoardOpen(false)} />
<SettingsModal
selectedStyle={selectedStyle}
isOpen={isSettingsOpen}
closeModal={() => setIsSettingsOpen(false)} />
<NavBar selectedStyle={selectedStyle}> <NavBar selectedStyle={selectedStyle}>
<> <>
<span className="boardList"> <span className='boardList'>
[ [
<Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>All</Link> <Link to={`/p/all`} onClick={() => window.scrollTo(0, 0)}>
All
</Link>
 /   / 
<Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>Subscriptions</Link> <Link to={`/p/subscriptions`} onClick={() => window.scrollTo(0, 0)}>
Subscriptions
</Link>
]&nbsp;[ ]&nbsp;[
{defaultSubplebbits.map((subplebbit, index) => ( {defaultSubplebbits.map((subplebbit, index) => (
<span className="boardList" key={`span-${subplebbit.address}`}> <span className='boardList' key={`span-${subplebbit.address}`}>
{index === 0 ? null : "\u00a0"} {index === 0 ? null : '\u00a0'}
<Link to={`/p/${subplebbit.address}`} key={`a-${subplebbit.address}`} onClick={() => { <Link
to={`/p/${subplebbit.address}`}
key={`a-${subplebbit.address}`}
onClick={() => {
setSelectedTitle(subplebbit.title); setSelectedTitle(subplebbit.title);
setSelectedAddress(subplebbit.address); setSelectedAddress(subplebbit.address);
}} }}
>{subplebbit.title ? subplebbit.title : subplebbit.address}</Link> >
{index !== defaultSubplebbits.length - 1 ? " /" : null} {subplebbit.title ? subplebbit.title : subplebbit.address}
</Link>
{index !== defaultSubplebbits.length - 1 ? ' /' : null}
</span> </span>
))} ))}
] ]
</span> </span>
<span className="nav"> <span className='nav'>
[ [
<span id="button-span" style={{cursor: 'pointer'}} onClick={ <span
() => { id='button-span'
window.electron && window.electron.isElectron ? ( style={{ cursor: 'pointer' }}
setIsCreateBoardOpen(true) onClick={() => {
) : ( window.electron && window.electron.isElectron
alert( ? setIsCreateBoardOpen(true)
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n' : alert(
) 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
) );
} }}
}>Create Board</span> >
] Create Board
[
<Link to={`/profile/c/${index}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link>
]
[
<Link to="/">Home</Link>
]
</span> </span>
<div id="board-nav-mobile" style={{ top: visible ? 0 : '-23px' }}> ] [
<div className="nav-container"> <Link to={`/profile/c/${index}/settings`} onClick={() => setIsSettingsOpen(true)}>
<div className="board-select"> Settings
</Link>
] [<Link to='/'>Home</Link>]
</span>
<div id='board-nav-mobile' style={{ top: visible ? 0 : '-23px' }}>
<div className='nav-container'>
<div className='board-select'>
<strong>Board</strong> <strong>Board</strong>
&nbsp; &nbsp;
<select id="board-select-mobile" value={selectedAddress} onChange={handleSelectChange}> <select id='board-select-mobile' value={selectedAddress} onChange={handleSelectChange}>
<option value="all">All</option> <option value='all'>All</option>
<option value="subscriptions">Subscriptions</option> <option value='subscriptions'>Subscriptions</option>
{!defaultSubplebbits.some(subplebbit => subplebbit.address === selectedAddress) && ( {!defaultSubplebbits.some((subplebbit) => subplebbit.address === selectedAddress) && <option value={selectedAddress}>{selectedAddress}</option>}
<option value={selectedAddress}>{selectedAddress}</option> {defaultSubplebbits.map((subplebbit) => (
)} <option key={`option-${subplebbit.address}`} value={subplebbit.address}>
{defaultSubplebbits.map(subplebbit => ( {subplebbit.title ? subplebbit.title : subplebbit.address}
<option key={`option-${subplebbit.address}`} value={subplebbit.address} </option>
>{subplebbit.title ? subplebbit.title : subplebbit.address}</option>
))} ))}
</select>  </select>
<span id="button-span" style={{cursor: 'pointer'}} onClick={  
() => alert( <span
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n' id='button-span'
style={{ cursor: 'pointer' }}
onClick={() =>
alert(
'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
) )
}>Create Board</span> }
>
Create Board
</span>
</div> </div>
<div className="page-jump"> <div className='page-jump'>
<Link to={`/p/${selectedAddress}/settings`} onClick={() => setIsSettingsOpen(true)}>Settings</Link> <Link to={`/p/${selectedAddress}/settings`} onClick={() => setIsSettingsOpen(true)}>
Settings
</Link>
&nbsp; &nbsp;
<Link to="/" onClick={() => {handleStyleChange({target: {value: "Yotsuba"}}); window.scrollTo(0, 0);}}>Home</Link> <Link
to='/'
onClick={() => {
handleStyleChange({ target: { value: 'Yotsuba' } });
window.scrollTo(0, 0);
}}
>
Home
</Link>
</div> </div>
</div> </div>
</div> </div>
<div id="separator-mobile">&nbsp;</div> <div id='separator-mobile'>&nbsp;</div>
<div id="separator-mobile">&nbsp;</div> <div id='separator-mobile'>&nbsp;</div>
</> </>
</NavBar> </NavBar>
<Header selectedStyle={selectedStyle}> <Header selectedStyle={selectedStyle}>
<> <>
<div className="banner"> <div className='banner'>
<ImageBanner /> <ImageBanner />
</div> </div>
<> <>
<div className="board-title">{selectedTitle ?? null}</div> <div className='board-title'>{selectedTitle ?? null}</div>
<div className="board-address">{selectedAddress ? ("p/" + selectedAddress) : null}</div> <div className='board-address'>{selectedAddress ? 'p/' + selectedAddress : null}</div>
</> </>
</> </>
</Header> </Header>
<Break selectedStyle={selectedStyle} /> <Break selectedStyle={selectedStyle} />
<PostForm selectedStyle={selectedStyle} name="post" action="" method="post" enctype="multipart/form-data"> <PostForm selectedStyle={selectedStyle} name='post' action='' method='post' enctype='multipart/form-data'>
<ReplyFormLink id="post-form-link" showReplyFormLink={showPostFormLink} selectedStyle={selectedStyle} > <ReplyFormLink id='post-form-link' showReplyFormLink={showPostFormLink} selectedStyle={selectedStyle}>
<div id="return-button-mobile"> <div id='return-button-mobile'>
<span className="btn-wrap"> <span className='btn-wrap'>
<Link to={`/p/${selectedAddress}`} onClick={()=> {window.scrollTo(0, 0)}}>Return</Link> <Link
to={`/p/${selectedAddress}`}
onClick={() => {
window.scrollTo(0, 0);
}}
>
Return
</Link>
</span> </span>
</div> </div>
<div id="catalog-button-mobile"> <div id='catalog-button-mobile'>
<span className="btn-wrap"> <span className='btn-wrap'>
<Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link> <Link
to={`/p/${selectedAddress}/catalog`}
onClick={() => {
window.scrollTo(0, 0);
}}
>
Catalog
</Link>
</span> </span>
</div> </div>
<div>&nbsp;</div> <div>&nbsp;</div>
@@ -236,350 +261,462 @@ const Pending = () => {
<BoardStats subplebbitAddress={subplebbitAddress} /> <BoardStats subplebbitAddress={subplebbitAddress} />
<TopBar selectedStyle={selectedStyle}> <TopBar selectedStyle={selectedStyle}>
<hr /> <hr />
<span className="style-changer"> <span className='style-changer'>
Style: Style:  
  <select id='style-selector' onChange={handleStyleChange} value={selectedStyle}>
<select id="style-selector" onChange={handleStyleChange} value={selectedStyle}> <option value='Yotsuba'>Yotsuba</option>
<option value="Yotsuba">Yotsuba</option> <option value='Yotsuba-B'>Yotsuba B</option>
<option value="Yotsuba-B">Yotsuba B</option> <option value='Futaba'>Futaba</option>
<option value="Futaba">Futaba</option> <option value='Burichan'>Burichan</option>
<option value="Burichan">Burichan</option> <option value='Tomorrow'>Tomorrow</option>
<option value="Tomorrow">Tomorrow</option> <option value='Photon'>Photon</option>
<option value="Photon">Photon</option>
</select> </select>
</span> </span>
<span className="return-button" id="return-button-desktop"> <span className='return-button' id='return-button-desktop'>
[ [
<Link to={`/p/${selectedAddress}`} onClick={()=> {window.scrollTo(0, 0)}}>Return</Link> <Link
to={`/p/${selectedAddress}`}
onClick={() => {
window.scrollTo(0, 0);
}}
>
Return
</Link>
] ]
</span> </span>
<span className="return-button catalog-button" id="catalog-button-desktop"> <span className='return-button catalog-button' id='catalog-button-desktop'>
[ [
<Link to={`/p/${selectedAddress}/catalog`} onClick={()=> {window.scrollTo(0, 0)}}>Catalog</Link> <Link
to={`/p/${selectedAddress}/catalog`}
onClick={() => {
window.scrollTo(0, 0);
}}
>
Catalog
</Link>
] ]
</span> </span>
<span className={stateString ? "reply-stat ellipsis" : ""}>{stateString}</span> <span className={stateString ? 'reply-stat ellipsis' : ''}>{stateString}</span>
<hr /> <hr />
</TopBar> </TopBar>
<Tooltip id="tooltip" className="tooltip" /> <Tooltip id='tooltip' className='tooltip' />
<BoardForm selectedStyle={selectedStyle}> <BoardForm selectedStyle={selectedStyle}>
{comment !== undefined ? ( {comment !== undefined ? (
<> <>
<div className="thread"> <div className='thread'>
<div className="op-container"> <div className='op-container'>
<div className="post op"> <div className='post op'>
<div className="post-info"> <div className='post-info'>
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
<div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}> <div key={`f-${index}`} className='file' style={{ marginBottom: '5px' }}>
<div key={`ft-${index}`} className="file-text"> <div key={`ft-${index}`} className='file-text'>
Link:&nbsp; Link:&nbsp;
<a key={`fa-${index}`} href={commentMediaInfo.url} target="_blank" <a key={`fa-${index}`} href={commentMediaInfo.url} target='_blank' rel='noopener noreferrer'>
rel="noopener noreferrer">{ {commentMediaInfo?.url.length > 30 ? commentMediaInfo?.url.slice(0, 30) + '(...)' : commentMediaInfo?.url}
commentMediaInfo?.url.length > 30 ? </a>
commentMediaInfo?.url.slice(0, 30) + "(...)" : &nbsp;({commentMediaInfo?.type === 'iframe' ? 'video' : commentMediaInfo?.type})
commentMediaInfo?.url
}</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type})
{isThumbnailClicked[index] ? ( {isThumbnailClicked[index] ? (
<span> <span>
-[ -[
<span className='reply-link' <span
className='reply-link'
style={{ textDecoration: 'underline', cursor: 'pointer' }} style={{ textDecoration: 'underline', cursor: 'pointer' }}
onClick={() => {handleThumbnailClick(index)}}>Close</span> onClick={() => {
handleThumbnailClick(index);
}}
>
Close
</span>
] ]
</span> </span>
) : null} ) : null}
</div> </div>
{commentMediaInfo?.type === 'iframe' && ( {commentMediaInfo?.type === 'iframe' && (
<div key={`enlarge-${index}`} <div key={`enlarge-${index}`} className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}>
className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}> <span key={`fta-${index}`} className='file-thumb'>
<span key={`fta-${index}`} className="file-thumb">
{(isThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? ( {(isThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
<iframe <iframe
className='enlarged' className='enlarged'
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.embedUrl} src={commentMediaInfo.embedUrl}
width={commentMediaInfo.thumbnail ? "560" : "250"} width={commentMediaInfo.thumbnail ? '560' : '250'}
height="315" height='315'
style={{border: "none"}} style={{ border: 'none' }}
title="Embedded content" title='Embedded content'
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
allowFullScreen /> allowFullScreen
/>
) : ( ) : (
<img <img
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.thumbnail} src={commentMediaInfo.thumbnail}
alt="thumbnail" alt='thumbnail'
onClick={() => {handleThumbnailClick(index)}} onClick={() => {
style={{cursor: "pointer"}} handleThumbnailClick(index);
onError={(e) => e.target.src = fallbackImgUrl} /> }}
style={{ cursor: 'pointer' }}
onError={(e) => (e.target.src = fallbackImgUrl)}
/>
)} )}
</span> </span>
</div> </div>
)} )}
{commentMediaInfo?.type === "webpage" ? ( {commentMediaInfo?.type === 'webpage' ? (
<div key={`enlarge-${index}`} className="img-container"> <div key={`enlarge-${index}`} className='img-container'>
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className='file-thumb'>
{comment.thumbnailUrl ? ( {comment.thumbnailUrl ? (
<img key={`fti-${index}`} <img
src={commentMediaInfo.thumbnail} alt={commentMediaInfo.type} key={`fti-${index}`}
src={commentMediaInfo.thumbnail}
alt={commentMediaInfo.type}
onClick={handleImageClick} onClick={handleImageClick}
style={{cursor: "pointer"}} style={{ cursor: 'pointer' }}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => (e.target.src = fallbackImgUrl)}
/>
) : null} ) : null}
</span> </span>
</div> </div>
) : null} ) : null}
{commentMediaInfo?.type === "image" ? ( {commentMediaInfo?.type === 'image' ? (
<div key={`enlarge-${index}`} className="img-container"> <div key={`enlarge-${index}`} className='img-container'>
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className='file-thumb'>
<img key={`fti-${index}`} <img
src={commentMediaInfo.url} alt={commentMediaInfo.type} key={`fti-${index}`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
onClick={handleImageClick} onClick={handleImageClick}
style={{cursor: "pointer"}} style={{ cursor: 'pointer' }}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => (e.target.src = fallbackImgUrl)}
/>
</span> </span>
</div> </div>
) : null} ) : null}
{commentMediaInfo?.type === "video" ? ( {commentMediaInfo?.type === 'video' ? (
<div key={`enlarge-${index}`} className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}> <div key={`enlarge-${index}`} className={`img-container ${isThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb"> <span key={`fta-${index}`} className='file-thumb'>
{isThumbnailClicked[index] ? ( {isThumbnailClicked[index] ? (
<video <video
className='enlarged' className='enlarged'
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.url} src={commentMediaInfo.url}
controls controls
style={{cursor: "pointer"}} style={{ cursor: 'pointer' }}
onError={(e) => e.target.src = fallbackImgUrl} onError={(e) => (e.target.src = fallbackImgUrl)}
/> />
) : ( ) : (
<video <video
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.url} src={commentMediaInfo.url}
alt="thumbnail" alt='thumbnail'
onClick={() => {handleThumbnailClick(index)}} onClick={() => {
style={{cursor: "pointer"}} handleThumbnailClick(index);
onError={(e) => e.target.src = fallbackImgUrl} }}
style={{ cursor: 'pointer' }}
onError={(e) => (e.target.src = fallbackImgUrl)}
/> />
)} )}
</span> </span>
</div> </div>
) : 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}`} <audio
src={commentMediaInfo.url} alt={commentMediaInfo.type} controls
onError={(e) => e.target.src = fallbackImgUrl} /> key={`fti-${index}`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
onError={(e) => (e.target.src = fallbackImgUrl)}
/>
</span> </span>
) : null} ) : null}
</div> </div>
) : null} ) : null}
<span className="name-block"> <span className='name-block'>
{comment.title ? ( {comment.title ? (
comment.title.length > 75 ? comment.title.length > 75 ? (
<> <>
<span key={`q-${"pending"}`} className="title" <span key={`q-${'pending'}`} className='title' data-tooltip-id='tooltip' data-tooltip-content={comment.title} data-tooltip-place='top'>
data-tooltip-id="tooltip" {comment.title.slice(0, 75) + ' (...)'}
data-tooltip-content={comment.title}
data-tooltip-place="top">
{comment.title.slice(0, 75) + " (...)"}
</span> </span>
</> </>
: <span key={`q-${"pending"}`} className="title"> ) : (
<span key={`q-${'pending'}`} className='title'>
{comment.title} {comment.title}
</span>) </span>
: null} )
) : null}
&nbsp; &nbsp;
{comment.author?.displayName {comment.author?.displayName ? (
? comment.author?.displayName.length > 20 comment.author?.displayName.length > 20 ? (
? <> <>
<span key={`n-${"pending"}`} className="name" <span
data-tooltip-id="tooltip" key={`n-${'pending'}`}
className='name'
data-tooltip-id='tooltip'
data-tooltip-content={comment.author?.displayName} data-tooltip-content={comment.author?.displayName}
data-tooltip-place="top"> data-tooltip-place='top'
{comment.author?.displayName.slice(0, 20) + " (...)"} >
{comment.author?.displayName.slice(0, 20) + ' (...)'}
</span> </span>
</> </>
: <span key={`n-${"pending"}`} className="name"> ) : (
{comment.author?.displayName}</span> <span key={`n-${'pending'}`} className='name'>
: <span key={`n-${"pending"}`} className="name"> {comment.author?.displayName}
Anonymous</span>} </span>
)
) : (
<span key={`n-${'pending'}`} className='name'>
Anonymous
</span>
)}
&nbsp; &nbsp;
<span className='poster-address'>(u/{account?.author?.shortAddress})</span>
&nbsp; &nbsp;
&nbsp; <span className='date-time' data-utc='data'>
<span className="poster-address"> {getDate(comment?.timestamp)}
(u/{account?.author?.shortAddress})
</span> </span>
&nbsp; &nbsp;
<span className="date-time" data-utc="data">{getDate(comment?.timestamp)}</span> <span className='post-number'>
&nbsp; <Link to='' title='Link to this post'>
<span className="post-number"> c/
<Link to="" title="Link to this post">c/</Link> </Link>
<span key="pending" style={{color: 'red', fontWeight: '700'}}>Pending</span> <span key='pending' style={{ color: 'red', fontWeight: '700' }}>
</span>&nbsp;&nbsp; Pending
<button key={`pmb-${"pending"}`} className="post-menu-button" title="Post menu" style={{ all: 'unset', cursor: 'pointer' }}>▶</button>
</span> </span>
<blockquote key={`blockquote-${"pending"}`}> </span>
<Post content={comment.content} comment={comment} handleQuoteClick={handleQuoteClick} key={`post-${"pending"}`} /> &nbsp;&nbsp;
<button key={`pmb-${'pending'}`} className='post-menu-button' title='Post menu' style={{ all: 'unset', cursor: 'pointer' }}>
▶
</button>
</span>
<blockquote key={`blockquote-${'pending'}`}>
<Post content={comment.content} comment={comment} handleQuoteClick={handleQuoteClick} key={`post-${'pending'}`} />
</blockquote> </blockquote>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div className="thread-mobile" key="thread-mobile"> <div className='thread-mobile' key='thread-mobile'>
<hr /> <hr />
<div className="op-container" key="op-container"> <div className='op-container' key='op-container'>
<div key={`mob-po-${"pending"}`} className="post op"> <div key={`mob-po-${'pending'}`} className='post op'>
<div key={`mob-pi-${"pending"}`} className="post-info-mobile"> <div key={`mob-pi-${'pending'}`} className='post-info-mobile'>
<button style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pb-${"pending"}`} className="post-menu-button-mobile" onClick={() => {}}>...</button> <button style={{ all: 'unset', cursor: 'pointer' }} key={`mob-pb-${'pending'}`} className='post-menu-button-mobile' onClick={() => {}}>
<span className="name-block-mobile"> ...
{comment.author?.displayName </button>
? comment.author?.displayName.length > 15 <span className='name-block-mobile'>
? <> {comment.author?.displayName ? (
<span key={`mob-n-${"pending"}`} className="name-mobile" comment.author?.displayName.length > 15 ? (
data-tooltip-id="tooltip" <>
<span
key={`mob-n-${'pending'}`}
className='name-mobile'
data-tooltip-id='tooltip'
data-tooltip-content={comment.author?.displayName} data-tooltip-content={comment.author?.displayName}
data-tooltip-place="top"> data-tooltip-place='top'
{comment.author?.displayName.slice(0, 15) + " (...)"} >
{comment.author?.displayName.slice(0, 15) + ' (...)'}
</span> </span>
</> </>
: <span key={`mob-n-${"pending"}`} className="name-mobile"> ) : (
{comment.author?.displayName}</span> <span key={`mob-n-${'pending'}`} className='name-mobile'>
: <span key={`mob-n-${"pending"}`} className="name-mobile"> {comment.author?.displayName}
Anonymous</span>} </span>
)
) : (
<span key={`mob-n-${'pending'}`} className='name-mobile'>
Anonymous
</span>
)}
&nbsp; &nbsp;
<span key={`mob-pa-${"pending"}`} className="poster-address-mobile"> <span key={`mob-pa-${'pending'}`} className='poster-address-mobile'>
(u/{account?.author?.shortAddress})&nbsp; (u/{account?.author?.shortAddress})&nbsp;
</span> </span>
<br key={`mob-br1-${"pending"}`} /> <br key={`mob-br1-${'pending'}`} />
{comment.title ? ( {comment.title ? (
comment.title.length > 30 ? comment.title.length > 30 ? (
<> <>
<span key={`mob-t-${"pending"}`} className="subject-mobile" <span
data-tooltip-id="tooltip" key={`mob-t-${'pending'}`}
className='subject-mobile'
data-tooltip-id='tooltip'
data-tooltip-content={comment.title} data-tooltip-content={comment.title}
data-tooltip-place="top"> data-tooltip-place='top'
{comment.title.slice(0, 30) + " (...)"} >
{comment.title.slice(0, 30) + ' (...)'}
</span> </span>
</> </>
: <span key={`mob-t-${"pending"}`} className="subject-mobile"> ) : (
<span key={`mob-t-${'pending'}`} className='subject-mobile'>
{comment.title} {comment.title}
</span>) : null}
</span> </span>
<span key={`mob-dt-${"pending"}`} className="date-time-mobile"> )
) : null}
</span>
<span key={`mob-dt-${'pending'}`} className='date-time-mobile'>
{getDate(comment?.timestamp)} {getDate(comment?.timestamp)}
&nbsp; &nbsp;
<button id="reply-button" style={{ all: 'unset' }} key={`mob-no-${"pending"}`}>c/</button> <button id='reply-button' style={{ all: 'unset' }} key={`mob-no-${'pending'}`}>
c/
</button>
&nbsp; &nbsp;
<span key="pending-mob" style={{color: 'red', fontWeight: '700'}}>Pending</span> <span key='pending-mob' style={{ color: 'red', fontWeight: '700' }}>
Pending
</span>
</span> </span>
</div> </div>
{comment.link ? ( {comment.link ? (
<div key={`mob-f-${index}`} className="file-mobile"> <div key={`mob-f-${index}`} className='file-mobile'>
{commentMediaInfo?.type === 'iframe' && ( {commentMediaInfo?.type === 'iframe' && (
<div key={`enlarge-mob-${index}`} className="img-container"> <div key={`enlarge-mob-${index}`} className='img-container'>
<span key={`mob-fta-${index}`} className="file-thumb-mobile"> <span key={`mob-fta-${index}`} className='file-thumb-mobile'>
{(isMobileThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? ( {(isMobileThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? (
<div style={{width: "92vw"}}> <div style={{ width: '92vw' }}>
<iframe <iframe
key={`mob-fti-${index}`} key={`mob-fti-${index}`}
src={commentMediaInfo.embedUrl} src={commentMediaInfo.embedUrl}
style={{border: "none", height: "250px"}} style={{ border: 'none', height: '250px' }}
title="Embedded content" title='Embedded content'
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allow='accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture'
allowFullScreen /> allowFullScreen
/>
</div> </div>
) : ( ) : (
<img <img
key={`mob-fti-${index}`} key={`mob-fti-${index}`}
src={commentMediaInfo.thumbnail} src={commentMediaInfo.thumbnail}
alt="thumbnail" alt='thumbnail'
onClick={() => {handleThumbnailClick(index, true)}} onClick={() => {
style={{cursor: "pointer"}} handleThumbnailClick(index, true);
onError={(e) => e.target.src = fallbackImgUrl} /> }}
style={{ cursor: 'pointer' }}
onError={(e) => (e.target.src = fallbackImgUrl)}
/>
)} )}
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? ( {commentMediaInfo?.type === 'video' || commentMediaInfo?.type === 'iframe' ? (
isMobileThumbnailClicked[index] ? ( isMobileThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}> <div style={{ textAlign: 'center', marginTop: '15px', marginBottom: '15px' }}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}} <span
onClick={() => {handleThumbnailClick(index, true)}} className='button-mobile'
>Close</span> style={{ float: 'none', cursor: 'pointer' }}
onClick={() => {
handleThumbnailClick(index, true);
}}
>
Close
</span>
</div> </div>
) : ( ) : (
<div key={`mob-fi-${index}`} className="file-info-mobile">video</div> <div key={`mob-fi-${index}`} className='file-info-mobile'>
)) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>} video
</div>
)
) : (
<div key={`mob-fi-${index}`} className='file-info-mobile'>
video
</div>
)}
</span> </span>
</div> </div>
)} )}
{commentMediaInfo?.url ? ( {commentMediaInfo?.url ? (
commentMediaInfo.type === "webpage" ? ( commentMediaInfo.type === 'webpage' ? (
<div key={`enlarge-mob-${index}`} className="img-container"> <div key={`enlarge-mob-${index}`} className='img-container'>
<span key={`mob-ft${comment.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${comment.cid}`} className='file-thumb-mobile'>
{comment.thumbnailUrl ? ( {comment.thumbnailUrl ? (
<img key={`mob-img-${index}`} <img
src={commentMediaInfo.thumbnail} alt="thumbnail" key={`mob-img-${index}`}
src={commentMediaInfo.thumbnail}
alt='thumbnail'
onClick={handleImageClick} onClick={handleImageClick}
style={{cursor: "pointer"}} style={{ cursor: 'pointer' }}
onError={(e) => e.target.src = fallbackImgUrl} /> 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>
</div> </div>
) : commentMediaInfo.type === "image" ? ( ) : commentMediaInfo.type === 'image' ? (
<div key={`enlarge-mob-${index}`} className="img-container"> <div key={`enlarge-mob-${index}`} className='img-container'>
<span key={`mob-ft${comment.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${comment.cid}`} className='file-thumb-mobile'>
<img key={`mob-img-${index}`} <img
src={commentMediaInfo.url} alt={commentMediaInfo.type} key={`mob-img-${index}`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
onClick={handleImageClick} onClick={handleImageClick}
style={{cursor: "pointer"}} style={{ cursor: 'pointer' }}
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>
</div> </div>
) : commentMediaInfo.type === "video" ? ( ) : commentMediaInfo.type === 'video' ? (
<span key={`mob-ft${comment.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${comment.cid}`} className='file-thumb-mobile'>
{isMobileThumbnailClicked[index] ? ( {isMobileThumbnailClicked[index] ? (
<video key={`fti-${index}`} <video
src={commentMediaInfo.url} alt={commentMediaInfo.type} key={`fti-${index}`}
src={commentMediaInfo.url}
alt={commentMediaInfo.type}
controls controls
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => (e.target.src = fallbackImgUrl)}
/>
) : ( ) : (
<video <video
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.url} src={commentMediaInfo.url}
alt="thumbnail" alt='thumbnail'
onClick={() => {handleThumbnailClick(index, true)}} onClick={() => {
style={{cursor: "pointer"}} handleThumbnailClick(index, true);
id="video-thumbnail-mobile" }}
onError={(e) => e.target.src = fallbackImgUrl} style={{ cursor: 'pointer' }}
id='video-thumbnail-mobile'
onError={(e) => (e.target.src = fallbackImgUrl)}
/> />
)} )}
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? ( {commentMediaInfo?.type === 'video' || commentMediaInfo?.type === 'iframe' ? (
isMobileThumbnailClicked[index] ? ( isMobileThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}> <div style={{ textAlign: 'center', marginTop: '15px', marginBottom: '15px' }}>
<span className='button-mobile' style={{float: "none", cursor: "pointer"}} <span
onClick={() => {handleThumbnailClick(index, true)}} className='button-mobile'
>Close</span> style={{ float: 'none', cursor: 'pointer' }}
onClick={() => {
handleThumbnailClick(index, true);
}}
>
Close
</span>
</div> </div>
) : ( ) : (
<div key={`mob-fi-${index}`} className="file-info-mobile">video</div> <div key={`mob-fi-${index}`} className='file-info-mobile'>
)) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>} video
</div>
)
) : (
<div key={`mob-fi-${index}`} className='file-info-mobile'>
video
</div>
)}
</span> </span>
) : commentMediaInfo.type === "audio" ? ( ) : commentMediaInfo.type === 'audio' ? (
<span key={`mob-ft${comment.cid}`} className="file-thumb-mobile"> <span key={`mob-ft${comment.cid}`} className='file-thumb-mobile'>
<audio key={`mob-img-${index}`} <audio key={`mob-img-${index}`} src={commentMediaInfo.url} alt={commentMediaInfo.type} onError={(e) => (e.target.src = fallbackImgUrl)} />
src={commentMediaInfo.url} alt={commentMediaInfo.type} <div key={`mob-fi-${index}`} className='file-info-mobile'>
onError={(e) => e.target.src = fallbackImgUrl} /> {commentMediaInfo?.type}
<div key={`mob-fi-${index}`} className="file-info-mobile">{commentMediaInfo?.type}</div> </div>
</span> </span>
) : null ) : null
) : null} ) : null}
</div> </div>
) : null} ) : null}
<blockquote key={`mob-bq-${"pending"}`} className="post-message-mobile"> <blockquote key={`mob-bq-${'pending'}`} className='post-message-mobile'>
{comment.content ? ( {comment.content ? (
<> <>
<Post content={comment.content} handleQuoteClick={handleQuoteClick} comment={comment} key={`post-mobile-${"pending"}`} /> <Post content={comment.content} handleQuoteClick={handleQuoteClick} comment={comment} key={`post-mobile-${'pending'}`} />
</> </>
) : null} ) : null}
</blockquote> </blockquote>
@@ -587,7 +724,7 @@ const Pending = () => {
</div> </div>
</div> </div>
<BottomBar selectedStyle={selectedStyle}> <BottomBar selectedStyle={selectedStyle}>
<div id="bottombar-desktop"> <div id='bottombar-desktop'>
<hr /> <hr />
</div> </div>
</BottomBar> </BottomBar>
@@ -596,17 +733,20 @@ const Pending = () => {
<PostLoader /> <PostLoader />
)} )}
</BoardForm> </BoardForm>
<div style={{ <div
textAlign: "center", style={{
fontSize: "11px", textAlign: 'center',
marginTop: "2em", fontSize: '11px',
marginBottom: "2em", marginTop: '2em',
}}> marginBottom: '2em',
plebchan v{version}{commitRef}. GPL-2.0 }}
>
plebchan v{version}
{commitRef}. GPL-2.0
</div> </div>
</Container> </Container>
</> </>
); );
} };
export default Pending; export default Pending;
src/components/views/Rules.jsx
+3 -3
View File
@@ -206,7 +206,7 @@ const Rules = () => {
window.electron && window.electron.isElectron window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true) ? setIsCreateBoardOpen(true)
: alert( : alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
); );
}} }}
> >
@@ -239,7 +239,7 @@ const Rules = () => {
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => onClick={() =>
alert( alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
) )
} }
> >
@@ -655,7 +655,7 @@ const Rules = () => {
window.electron && window.electron.isElectron window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true) ? setIsCreateBoardOpen(true)
: alert( : alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
); );
}} }}
> >
src/components/views/Subscriptions.jsx
+3 -3
View File
@@ -606,7 +606,7 @@ const Subscriptions = () => {
window.electron && window.electron.isElectron window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true) ? setIsCreateBoardOpen(true)
: alert( : alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
); );
}} }}
> >
@@ -638,7 +638,7 @@ const Subscriptions = () => {
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => onClick={() =>
alert( alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
) )
} }
> >
@@ -3322,7 +3322,7 @@ const Subscriptions = () => {
window.electron && window.electron.isElectron window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true) ? setIsCreateBoardOpen(true)
: alert( : alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
); );
}} }}
> >
src/components/views/SubscriptionsCatalog.jsx
+3 -3
View File
@@ -849,7 +849,7 @@ const SubscriptionsCatalog = () => {
window.electron && window.electron.isElectron window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true) ? setIsCreateBoardOpen(true)
: alert( : alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
); );
}} }}
> >
@@ -881,7 +881,7 @@ const SubscriptionsCatalog = () => {
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => onClick={() =>
alert( alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
) )
} }
> >
@@ -1040,7 +1040,7 @@ const SubscriptionsCatalog = () => {
window.electron && window.electron.isElectron window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true) ? setIsCreateBoardOpen(true)
: alert( : alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
); );
}} }}
> >
src/components/views/Thread.jsx
+4 -4
View File
@@ -700,7 +700,7 @@ const Thread = () => {
window.electron && window.electron.isElectron window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true) ? setIsCreateBoardOpen(true)
: alert( : alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
); );
}} }}
> >
@@ -733,7 +733,7 @@ const Thread = () => {
style={{ cursor: 'pointer' }} style={{ cursor: 'pointer' }}
onClick={() => onClick={() =>
alert( alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
) )
} }
> >
@@ -860,7 +860,7 @@ const Thread = () => {
</td> </td>
</tr> </tr>
<tr data-type='File'> <tr data-type='File'>
<td>Embed File</td> <td>Link</td>
<td> <td>
<input name='embed' type='text' tabIndex={7} placeholder='Paste link' ref={linkRef} /> <input name='embed' type='text' tabIndex={7} placeholder='Paste link' ref={linkRef} />
<button <button
@@ -3159,7 +3159,7 @@ const Thread = () => {
window.electron && window.electron.isElectron window.electron && window.electron.isElectron
? setIsCreateBoardOpen(true) ? setIsCreateBoardOpen(true)
: alert( : alert(
'You can create a board with the desktop version of plebchan:\nhttps://github.com/plebbit/plebchan/releases/latest\n\nIf you are comfortable with the command line, use plebbit-cli:\nhttps://github.com/plebbit/plebbit-cli\n\n', 'HOW TO CREATE A BOARD (currently via CLI only):\n\n(1) have a computer you can use as server, because users will connect to your board peer-to-peer;\n\n(2) go to https://github.com/plebbit/plebbit-cli#install and follow the instructions to run your daemon, create a subplebbit (board) and edit its settings;\n\n(3) users can always connect to your board via its address, but it can be added below by submitting a pull request here: https://github.com/plebbit/temporary-default-subplebbits. This will be automated with a plebbit DAO using the plebbit token.',
); );
}} }}
> >
yarn.lock
-15
View File
@@ -2817,21 +2817,6 @@
dependencies: dependencies:
debug "4.3.3" debug "4.3.3"
"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#0024401c390929e47b44331a8dadd61ba212b871":
version "0.0.1"
resolved "https://github.com/plebbit/plebbit-react-hooks.git#0024401c390929e47b44331a8dadd61ba212b871"
dependencies:
"@plebbit/plebbit-js" "https://github.com/plebbit/plebbit-js.git#6985b2a4194328752c6d76e80470c8079c562869"
"@plebbit/plebbit-logger" "https://github.com/plebbit/plebbit-logger.git"
assert "2.0.0"
ethers "5.6.9"
localforage "1.10.0"
lodash.isequal "4.5.0"
memoizee "0.4.15"
quick-lru "5.1.1"
uuid "8.3.2"
zustand "4.0.0"
"@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#b6477148191a501aa0b0c11acfc4761aca0dcc1e": "@plebbit/plebbit-react-hooks@https://github.com/plebbit/plebbit-react-hooks.git#b6477148191a501aa0b0c11acfc4761aca0dcc1e":
version "0.0.1" version "0.0.1"
resolved "https://github.com/plebbit/plebbit-react-hooks.git#b6477148191a501aa0b0c11acfc4761aca0dcc1e" resolved "https://github.com/plebbit/plebbit-react-hooks.git#b6477148191a501aa0b0c11acfc4761aca0dcc1e"