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 pull request #231 from plebbit/development

Browse Source 
Development
This commit is contained in:
plebeius.eth
2023-09-10 14:52:02 +02:00
committed by GitHub
parent b08f63f141 d9f62a346e
commit df40643c27
18 changed files with 760 additions and 549 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.js
+30 -2
View File
@@ -22,8 +22,9 @@ import CaptchaModal from './components/modals/CaptchaModal';
import { importAll } from './components/ImageBanner'; import { importAll } from './components/ImageBanner';
import preloadImages from './utils/preloadImages'; import preloadImages from './utils/preloadImages';
import useError from "./hooks/useError"; import useError from "./hooks/useError";
import useInfo from "./hooks/useInfo";
import useSuccess from "./hooks/useSuccess"; import useSuccess from "./hooks/useSuccess";
import packageJson from '../package.json';
export default function App() { export default function App() {
const { const {
@@ -41,21 +42,48 @@ export default function App() {
const [, setNewErrorMessage] = useError(); const [, setNewErrorMessage] = useError();
const [, setNewSuccessMessage] = useSuccess(); const [, setNewSuccessMessage] = useSuccess();
const [, setNewInfoMessage] = useInfo();
useEffect(() => { useEffect(() => {
const successToast = localStorage.getItem("successToast"); const successToast = localStorage.getItem("successToast");
const errorToast = localStorage.getItem("errorToast"); const errorToast = localStorage.getItem("errorToast");
const infoToast = localStorage.getItem("infoToast");
if (successToast) { if (successToast) {
setNewSuccessMessage(successToast); setNewSuccessMessage(successToast);
localStorage.removeItem("successToast"); localStorage.removeItem("successToast");
} else if (errorToast) { } else if (errorToast) {
setNewErrorMessage(errorToast); setNewErrorMessage(errorToast);
localStorage.removeItem("errorToast"); localStorage.removeItem("errorToast");
} else if (infoToast) {
setNewInfoMessage(infoToast);
localStorage.removeItem("infoToast");
} else { } else {
return; return;
} }
}, [setNewErrorMessage, setNewSuccessMessage]); }, [setNewErrorMessage, setNewSuccessMessage, setNewInfoMessage]);
// check for new version
useEffect(() => {
const fetchVersionInfo = async () => {
try {
const packageRes = await fetch('https://raw.githubusercontent.com/plebbit/plebchan/master/package.json', { cache: 'no-cache' });
const packageData = await packageRes.json();
if (packageJson.version !== packageData.version) {
const newVersionInfo = `New version available, plebchan v${packageData.version}. Refresh the page to update.`;
localStorage.setItem('infoToast', newVersionInfo);;
}
} catch (error) {
console.error('Failed to fetch latest version info:', error);
}
};
fetchVersionInfo();
}, [setNewInfoMessage]);
// preload banners // preload banners
useEffect(() => { useEffect(() => {
src/components/BoardStats.jsx
+3 -3
View File
@@ -33,13 +33,13 @@ const BoardStats = ({ subplebbitAddress }) => {
{showStats && ( {showStats && (
<tbody id="blotter-msgs"> <tbody id="blotter-msgs">
<tr> <tr>
<td>In the past hour, <span id="stat-number">{stats.hourActiveUserCount}</span> {pluralize(stats.hourActiveUserCount, 'user', 'users')} made <span id="stat-number">{stats.hourPostCount}</span> {pluralize(stats.hourPostCount, 'post', 'posts')} — in the past day, <span id="stat-number">{stats.dayActiveUserCount}</span> {pluralize(stats.dayActiveUserCount, 'user', 'users')} made <span id="stat-number">{stats.dayPostCount}</span> {pluralize(stats.dayPostCount, 'post', 'posts')}</td> <td>In the past hour, <span id="stat-number">{stats.hourActiveUserCount}</span> {pluralize(stats.hourActiveUserCount, 'user', 'users')} made <span id="stat-number">{stats.hourPostCount}</span> {pluralize(stats.hourPostCount, 'post', 'posts')} / in the past day, <span id="stat-number">{stats.dayActiveUserCount}</span> {pluralize(stats.dayActiveUserCount, 'user', 'users')} made <span id="stat-number">{stats.dayPostCount}</span> {pluralize(stats.dayPostCount, 'post', 'posts')}</td>
</tr> </tr>
<tr> <tr>
<td>In the past week, <span id="stat-number">{stats.weekActiveUserCount}</span> {pluralize(stats.weekActiveUserCount, 'user', 'users')} made <span id="stat-number">{stats.weekPostCount}</span> {pluralize(stats.weekPostCount, 'post', 'posts')} — in the past month, <span id="stat-number">{stats.monthActiveUserCount}</span> {pluralize(stats.monthActiveUserCount, 'user', 'users')} made <span id="stat-number">{stats.monthPostCount}</span> {pluralize(stats.monthPostCount, 'post', 'posts')}</td> <td>In the past week, <span id="stat-number">{stats.weekActiveUserCount}</span> {pluralize(stats.weekActiveUserCount, 'user', 'users')} made <span id="stat-number">{stats.weekPostCount}</span> {pluralize(stats.weekPostCount, 'post', 'posts')} / in the past month, <span id="stat-number">{stats.monthActiveUserCount}</span> {pluralize(stats.monthActiveUserCount, 'user', 'users')} made <span id="stat-number">{stats.monthPostCount}</span> {pluralize(stats.monthPostCount, 'post', 'posts')}</td>
</tr> </tr>
<tr> <tr>
<td>{unixToMMDDYYYY(subplebbit.createdAt)} board created — since then, <span id="stat-number">{stats.allActiveUserCount}</span> {pluralize(stats.allActiveUserCount, 'user', 'users')} have made <span id="stat-number">{stats.allPostCount}</span> {pluralize(stats.allPostCount, 'post', 'posts')}</td> <td>{unixToMMDDYYYY(subplebbit.createdAt)} board created / since then, <span id="stat-number">{stats.allActiveUserCount}</span> {pluralize(stats.allActiveUserCount, 'user', 'users')} have made <span id="stat-number">{stats.allPostCount}</span> {pluralize(stats.allPostCount, 'post', 'posts')}</td>
</tr> </tr>
</tbody> </tbody>
)} )}
src/components/modals/CaptchaModal.jsx
+4 -2
View File
@@ -37,7 +37,6 @@ const CaptchaModal = () => {
}, [isCaptchaOpen, setIsAuthorDelete, setIsAuthorEdit, setIsModEdit]); }, [isCaptchaOpen, setIsAuthorDelete, setIsAuthorEdit, setIsModEdit]);
useEffect(() => { useEffect(() => {
const handleResize = () => setIsMobile(window.innerWidth <= 480); const handleResize = () => setIsMobile(window.innerWidth <= 480);
window.addEventListener('resize', handleResize); window.addEventListener('resize', handleResize);
@@ -71,7 +70,10 @@ const CaptchaModal = () => {
const handleKeyDown = (event) => { const handleKeyDown = (event) => {
if (event.key === "Enter") { if (event.key === "Enter") {
event.preventDefault(); event.preventDefault();
submitCaptcha(); submitCaptcha((response) => {
setCaptchaResponse(response);
resolveCaptchaPromise(response);
});
} }
}; };
src/components/modals/SettingsModal.jsx
+10 -2
View File
@@ -10,6 +10,7 @@ import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import useGeneralStore from '../../hooks/stores/useGeneralStore'; import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json'; 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 SettingsModal = ({ isOpen, closeModal }) => { const SettingsModal = ({ isOpen, closeModal }) => {
@@ -28,7 +29,14 @@ const SettingsModal = ({ isOpen, closeModal }) => {
const account = useAccount(); const account = useAccount();
const { accounts } = useAccounts(); const { accounts } = useAccounts();
const accountJson = useMemo(() => stringify({...account}), [account])
const accountJson = useMemo(() => {
if (account) {
const { plebbit, karma, unreadNotificationCount, ...restOfAccount } = account;
return stringify({ account: restOfAccount });
}
}, [account]);
const [editedAccountJson, setEditedAccountJson] = useState(accountJson); const [editedAccountJson, setEditedAccountJson] = useState(accountJson);
useEffect(() => { setEditedAccountJson(accountJson)}, [accountJson]) useEffect(() => { setEditedAccountJson(accountJson)}, [accountJson])
@@ -416,7 +424,7 @@ const SettingsModal = ({ isOpen, closeModal }) => {
<div className="panel"> <div className="panel">
<div className="panel-header"> <div className="panel-header">
<span id="version"> <span id="version">
v{version} -&nbsp; v{version}{commitRef} -&nbsp;
{window.electron && window.electron.isElectron ? ( {window.electron && window.electron.isElectron ? (
<Link className="all-button" id="node-stats" to="http://localhost:5001/webui/" target="_blank" rel="noreferrer"> <Link className="all-button" id="node-stats" to="http://localhost:5001/webui/" target="_blank" rel="noreferrer">
full node full node
src/components/styled/GlobalStyle.styled.jsx
+1 -1
View File
@@ -81,7 +81,7 @@ export const GlobalStyle = createGlobalStyle`
.reddit-embed { .reddit-embed {
width: 500px; width: 500px;
height: 260px; height: 520px;
} }
} }
src/components/views/All.jsx
+131 -70
View File
@@ -16,6 +16,7 @@ import EditModal from '../modals/EditModal';
import EditLabel from '../EditLabel'; import EditLabel from '../EditLabel';
import ImageBanner from '../ImageBanner'; import ImageBanner from '../ImageBanner';
import ModerationModal from '../modals/ModerationModal'; import ModerationModal from '../modals/ModerationModal';
import Embed from '../Embed';
import OfflineIndicator from '../OfflineIndicator'; import OfflineIndicator from '../OfflineIndicator';
import PendingLabel from '../PendingLabel'; import PendingLabel from '../PendingLabel';
import Post from '../Post'; import Post from '../Post';
@@ -46,6 +47,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json'; import packageJson from '../../../package.json';
const {version} = packageJson; const {version} = packageJson;
let lastVirtuosoStates = {}; let lastVirtuosoStates = {};
const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
const All = () => { const All = () => {
@@ -717,33 +719,29 @@ const All = () => {
commentMediaInfo?.url.length > 30 ? commentMediaInfo?.url.length > 30 ?
commentMediaInfo?.url.slice(0, 30) + "(...)" : commentMediaInfo?.url.slice(0, 30) + "(...)" :
commentMediaInfo?.url commentMediaInfo?.url
}</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type}) }</a>&nbsp;{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`}
{isThreadThumbnailClicked[index] && commentMediaInfo.type !== "image" ? ( {((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
<span> <span>
-[ [
<span className='reply-link' <span className='reply-link'
style={{textDecoration: 'underline', cursor: 'pointer'}} style={{textDecoration: 'underline', cursor: 'pointer'}}
onClick={() => {handleThumbnailClick(index, 'thread')}}>Close</span> onClick={() => {handleThumbnailClick(index, 'thread')}}>
{isThreadThumbnailClicked[index] ? 'Close' : 'Embed'}
</span>
] ]
</span> </span>
) : null} )}
</div> </div>
{commentMediaInfo?.type === 'iframe' && ( {commentMediaInfo?.type === 'iframe' && (
<div key={`enlarge-${index}`} <div key={`enlarge-${index}`}
className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}> className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}> <span key={`fta-${index}`} className="file-thumb" style={
{(isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? ( isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail ?
<iframe {} : {width: displayWidth, height: displayHeight
className='enlarged' }}>
key={`fti-${index}`} {isThreadThumbnailClicked[index] && commentMediaInfo.url ? (
src={commentMediaInfo.embedUrl} <Embed url={commentMediaInfo.url} key={`fti-${index}`} />
width={commentMediaInfo.thumbnail ? "560" : "250"} ) : commentMediaInfo.thumbnail ? (
height="315"
style={{border: "none"}}
title="Embedded content"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen />
) : (
<img <img
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.thumbnail} src={commentMediaInfo.thumbnail}
@@ -751,7 +749,7 @@ const All = () => {
onClick={() => {handleThumbnailClick(index, 'thread')}} onClick={() => {handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
)} ) : null}
</span> </span>
</div> </div>
)} )}
@@ -805,7 +803,7 @@ const All = () => {
</div> </div>
) : null} ) : null}
{commentMediaInfo?.type === "audio" ? ( {commentMediaInfo?.type === "audio" ? (
<span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}> <span key={`fta-${index}`} className="file-thumb">
<audio controls key={`fti-${index}`} <audio controls key={`fti-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
@@ -846,9 +844,9 @@ const All = () => {
(u/ (u/
<span key={`pa-${index}`} className="poster-address address-desktop" <span key={`pa-${index}`} className="poster-address address-desktop"
id="reply-button" style={{cursor: "pointer"}} id="reply-button" style={{cursor: "pointer"}}
onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)} onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
> >
{<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>} {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>}
</span>) </span>)
&nbsp; &nbsp;
<span key={`dt-${index}`} <span key={`dt-${index}`}
@@ -1163,7 +1161,7 @@ const All = () => {
&nbsp; &nbsp;
<span key={`pa-${index}`} className="poster-address address-desktop" <span key={`pa-${index}`} className="poster-address address-desktop"
id="reply-button" style={{cursor: "pointer"}} id="reply-button" style={{cursor: "pointer"}}
onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)} onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
> >
(u/ (u/
{reply.author?.shortAddress ? {reply.author?.shortAddress ?
@@ -1420,30 +1418,50 @@ const All = () => {
</div> </div>
</div> </div>
{replyMediaInfo?.url ? ( {replyMediaInfo?.url ? (
<div key={`f-${index}`} className="file" <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
style={{marginBottom: "5px"}}> <div key={`ft-${index}`} className="file-text">
<div key={`ft-${index}`} className="reply-file-text">
Link:&nbsp; Link:&nbsp;
<a key={`fa-${index}`} href={replyMediaInfo.url} target="_blank" <a key={`fa-${index}`} href={replyMediaInfo.url} target="_blank"
rel="noopener noreferrer">{ rel="noopener noreferrer">{
replyMediaInfo?.url.length > 30 ? replyMediaInfo?.url.length > 30 ?
replyMediaInfo?.url.slice(0, 30) + "(...)" : replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type}) }</a>&nbsp;{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`}
{replyMediaInfo?.type === "video" || replyMediaInfo?.type === "iframe" ? ( { ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
isReplyThumbnailClicked[index] ? (
<span> <span>
-[ [
<span className='reply-link' <span className='reply-link'
style={{textDecoration: 'underline', cursor: 'pointer'}} style={{textDecoration: 'underline', cursor: 'pointer'}}
onClick={() => {handleThumbnailClick(index, 'reply')}}>Close</span> onClick={() => {handleThumbnailClick(index, 'reply')}}>
{isReplyThumbnailClicked[index] ? 'Close' : 'Embed'}
</span>
] ]
</span>) </span>
: null) )}
: null}
</div> </div>
{replyMediaInfo?.type === "webpage" ? ( {replyMediaInfo?.type === 'iframe' && (
<div key={`enlarge-reply-${index}`} className="img-container"> <div key={`enlarge-${index}`}
className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb-reply" style={
isReplyThumbnailClicked[index] || !replyMediaInfo.thumbnail ?
{} : {width: replyDisplayWidth, height: replyDisplayHeight
}}>
{isReplyThumbnailClicked[index] && replyMediaInfo.url ? (
<Embed url={replyMediaInfo.url} key={`fti-${index}`} />
) : replyMediaInfo.thumbnail ? (
<img
key={`fti-${index}`}
src={replyMediaInfo.thumbnail}
alt="thumbnail"
onClick={() => {handleThumbnailClick(index, 'reply')}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
</span>
</div>
)}
{replyMediaInfo?.type === "webpage" && (
<div key={`enlarge-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}> <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
{reply.thumbnailUrl ? ( {reply.thumbnailUrl ? (
<img key={`fti-${index}`} <img key={`fti-${index}`}
@@ -1454,9 +1472,9 @@ const All = () => {
) : null} ) : null}
</span> </span>
</div> </div>
) : null} )}
{replyMediaInfo?.type === "image" ? ( {replyMediaInfo?.type === "image" && (
<div key={`enlarge-reply-${index}`} className="img-container"> <div key={`enlarge-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}> <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
@@ -1465,16 +1483,16 @@ const All = () => {
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
</div> </div>
) : null} )}
{replyMediaInfo?.type === "video" ? ( {replyMediaInfo?.type === "video" && (
<div key={`enlarge-reply-${index}`} className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}> <div key={`enlarge-${index}`} className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}> <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
{isReplyThumbnailClicked[index] ? ( {isReplyThumbnailClicked[index] ? (
<video controls <video
className='enlarged' className='enlarged'
key={`fti-${index}`} key={`fti-${index}`}
src={replyMediaInfo.url} src={replyMediaInfo.url}
alt={replyMediaInfo.type} controls
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} onError={(e) => e.target.src = fallbackImgUrl}
/> />
@@ -1490,15 +1508,14 @@ const All = () => {
)} )}
</span> </span>
</div> </div>
) : null} )}
{replyMediaInfo?.type === "audio" ? ( {replyMediaInfo?.type === "audio" && (
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}> <span key={`fta-${index}`} className="file-thumb-reply">
<audio controls <audio controls key={`fti-${index}`}
key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
) : null} )}
</div> </div>
) : null} ) : null}
{reply.content ? ( {reply.content ? (
@@ -1747,11 +1764,11 @@ const All = () => {
&nbsp; &nbsp;
<span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile" <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
id="reply-button" style={{cursor: "pointer"}} id="reply-button" style={{cursor: "pointer"}}
onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)} onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
> >
(u/ (u/
<span key={`mob-ha-${index}`} className="highlight-address-mobile"> <span key={`mob-ha-${index}`} className="highlight-address-mobile">
{<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>} {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>}
</span> </span>
)&nbsp; )&nbsp;
</span> </span>
@@ -1823,17 +1840,11 @@ const All = () => {
{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" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}> <span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
{(isMobileThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? ( {(isMobileThreadThumbnailClicked[index] && commentMediaInfo.url ? (
<div style={{width: "92vw"}}> <div style={{width: "92vw"}}>
<iframe <Embed url={commentMediaInfo.url} key={`fti-mobile-${index}`} />
key={`mob-fti-${index}`}
src={commentMediaInfo.embedUrl}
style={{border: "none", height: "250px"}}
title="Embedded content"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen />
</div> </div>
) : ( ) : commentMediaInfo.thumbnail ? (
<img <img
key={`mob-fti-${index}`} key={`mob-fti-${index}`}
src={commentMediaInfo.thumbnail} src={commentMediaInfo.thumbnail}
@@ -1841,7 +1852,7 @@ const All = () => {
onClick={() => {handleThumbnailClick(index, 'mobileThread')}} onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
)} ) : <span onClick={() => {handleThumbnailClick(index, 'mobileThread')}}>Embed</span>)}
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? ( {commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[index] ? ( isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}> <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
@@ -1850,8 +1861,8 @@ const All = () => {
>Close</span> >Close</span>
</div> </div>
) : ( ) : (
<div key={`mob-fi-${index}`} className="file-info-mobile">video</div> <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>
)) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>} )) : <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>}
</span> </span>
</div> </div>
)} )}
@@ -1990,7 +2001,7 @@ const All = () => {
&nbsp; &nbsp;
<span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile" <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
id="reply-button" style={{cursor: "pointer"}} id="reply-button" style={{cursor: "pointer"}}
onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)} onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
> >
(u/ (u/
{reply.author?.shortAddress ? {reply.author?.shortAddress ?
@@ -2065,7 +2076,35 @@ const All = () => {
{reply.link ? ( {reply.link ? (
<div key={`mob-f-${index}`} className="file-mobile"> <div key={`mob-f-${index}`} className="file-mobile">
{replyMediaInfo?.url ? ( {replyMediaInfo?.url ? (
replyMediaInfo.type === "webpage" ? ( replyMediaInfo.type === "iframe" ? (
<div key={`enlarge-mob-${index}`} className="img-container">
<span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
{(isMobileReplyThumbnailClicked[index] && replyMediaInfo.url ? (
<div style={{width: "92vw"}}>
<Embed url={replyMediaInfo.url} key={`fti-mobile-reply-${index}`} />
</div>
) : replyMediaInfo.thumbnail ? (
<img
key={`mob-fti-${index}`}
src={replyMediaInfo.thumbnail}
alt="thumbnail"
onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : <span onClick={() => {handleThumbnailClick(index, 'mobileReply')}}>Embed</span>)}
{replyMediaInfo?.type === "video" || replyMediaInfo?.type === "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">webpage</div>
)) : <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>}
</span>
</div>
) : replyMediaInfo.type === "webpage" ? (
<div key={`enlarge-mob-reply-${index}`} className="img-container"> <div key={`enlarge-mob-reply-${index}`} className="img-container">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: displayWidthMobile, height: displayHeightMobile}}> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
{reply.thumbnailUrl ? ( {reply.thumbnailUrl ? (
@@ -2090,12 +2129,34 @@ const All = () => {
</span> </span>
</div> </div>
) : replyMediaInfo.type === "video" ? ( ) : replyMediaInfo.type === "video" ? (
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
{isMobileReplyThumbnailClicked[index] ? (
<video key={`fti-${index}`} <video key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
style={{ pointerEvents: "none" }} controls
style={{ all: 'unset', width: '100%', height: '100%', cursor: 'pointer'}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div> ) : (
<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" || replyMediaInfo?.type === "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> </span>
) : replyMediaInfo.type === "audio" ? ( ) : replyMediaInfo.type === "audio" ? (
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
@@ -2480,7 +2541,7 @@ const All = () => {
</> </>
</NavBar> </NavBar>
<div id="version"> <div id="version">
plebchan v{version}. GPL-2.0 plebchan v{version}{commitRef}. GPL-2.0
</div> </div>
<div className="footer-links" <div className="footer-links"
style={{ style={{
src/components/views/AllCatalog.jsx
+2 -1
View File
@@ -33,6 +33,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json'; import packageJson from '../../../package.json';
const {version} = packageJson; const {version} = packageJson;
let lastVirtuosoStates = {}; let lastVirtuosoStates = {};
const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
const CatalogPost = ({post}) => { const CatalogPost = ({post}) => {
@@ -972,7 +973,7 @@ const AllCatalog = () => {
</> </>
</NavBar> </NavBar>
<div id="version"> <div id="version">
plebchan v{version}. GPL-2.0 plebchan v{version}{commitRef}. GPL-2.0
</div> </div>
<div className="footer-links" <div className="footer-links"
style={{ style={{
src/components/views/Board.jsx
+10 -9
View File
@@ -51,6 +51,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json'; import packageJson from '../../../package.json';
const {version} = packageJson; const {version} = packageJson;
let lastVirtuosoStates = {}; let lastVirtuosoStates = {};
const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
const Board = () => { const Board = () => {
@@ -1415,7 +1416,7 @@ const Board = () => {
commentMediaInfo?.url.slice(0, 30) + "(...)" : commentMediaInfo?.url.slice(0, 30) + "(...)" :
commentMediaInfo?.url commentMediaInfo?.url
}</a>&nbsp;{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`} }</a>&nbsp;{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`}
{ (isThreadThumbnailClicked[index] || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && ( {((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
<span> <span>
[ [
<span className='reply-link' <span className='reply-link'
@@ -1539,9 +1540,9 @@ const Board = () => {
(u/ (u/
<span key={`pa-${index}`} className="poster-address address-desktop" <span key={`pa-${index}`} className="poster-address address-desktop"
id="reply-button" style={{cursor: "pointer"}} id="reply-button" style={{cursor: "pointer"}}
onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)} onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
> >
<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor> <VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>
</span>) </span>)
&nbsp; &nbsp;
<span key={`dt-${index}`} className="date-time" <span key={`dt-${index}`} className="date-time"
@@ -1870,7 +1871,7 @@ const Board = () => {
&nbsp; &nbsp;
<span key={`pa-${index}`} className="poster-address address-desktop" <span key={`pa-${index}`} className="poster-address address-desktop"
id="reply-button" style={{cursor: "pointer"}} id="reply-button" style={{cursor: "pointer"}}
onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)} onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
> >
(u/ (u/
{reply.author?.shortAddress ? {reply.author?.shortAddress ?
@@ -2119,7 +2120,7 @@ const Board = () => {
replyMediaInfo?.url.slice(0, 30) + "(...)" : replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url replyMediaInfo?.url
}</a>&nbsp;{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`} }</a>&nbsp;{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`}
{ (isReplyThumbnailClicked[index] || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && ( { ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
<span> <span>
[ [
<span className='reply-link' <span className='reply-link'
@@ -2457,11 +2458,11 @@ const Board = () => {
&nbsp; &nbsp;
<span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile" <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
id="reply-button" style={{cursor: "pointer"}} id="reply-button" style={{cursor: "pointer"}}
onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)} onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
> >
(u/ (u/
<span key={`mob-ha-${index}`} className="highlight-address-mobile"> <span key={`mob-ha-${index}`} className="highlight-address-mobile">
{<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>} {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>}
</span> </span>
)&nbsp; )&nbsp;
</span> </span>
@@ -2695,7 +2696,7 @@ const Board = () => {
&nbsp; &nbsp;
<span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile" <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
id="reply-button" style={{cursor: "pointer"}} id="reply-button" style={{cursor: "pointer"}}
onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)} onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
> >
(u/ (u/
{reply.author?.shortAddress ? {reply.author?.shortAddress ?
@@ -3219,7 +3220,7 @@ const Board = () => {
</> </>
</NavBar> </NavBar>
<div id="version"> <div id="version">
plebchan v{version}. GPL-2.0 plebchan v{version}{commitRef}. GPL-2.0
</div> </div>
<div className="footer-links" <div className="footer-links"
style={{ style={{
src/components/views/Catalog.jsx
+2 -1
View File
@@ -38,6 +38,7 @@ import useWindowWidth from '../../hooks/useWindowWidth';
import packageJson from '../../../package.json'; import packageJson from '../../../package.json';
const {version} = packageJson; const {version} = packageJson;
let lastVirtuosoStates = {}; let lastVirtuosoStates = {};
const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
const CatalogPost = ({post}) => { const CatalogPost = ({post}) => {
@@ -1630,7 +1631,7 @@ const Catalog = () => {
</> </>
</NavBar> </NavBar>
<div id="version"> <div id="version">
plebchan v{version}. GPL-2.0 plebchan v{version}{commitRef}. GPL-2.0
</div> </div>
<div className="footer-links" <div className="footer-links"
style={{ style={{
src/components/views/Description.jsx
+2 -1
View File
@@ -22,6 +22,7 @@ import handleStyleChange from '../../utils/handleStyleChange';
import useGeneralStore from '../../hooks/stores/useGeneralStore'; import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json'; 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 Description = () => { const Description = () => {
@@ -511,7 +512,7 @@ const Description = () => {
</> </>
</NavBar> </NavBar>
<div id="version"> <div id="version">
plebchan v{version}. GPL-2.0 plebchan v{version}{commitRef}. GPL-2.0
</div> </div>
<div className="footer-links" <div className="footer-links"
style={{ style={{
src/components/views/Home.jsx
+1 -2
View File
@@ -10,8 +10,7 @@ import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json'; import packageJson from '../../../package.json';
import { Tooltip } from 'react-tooltip'; import { Tooltip } from 'react-tooltip';
const {version} = packageJson; const {version} = packageJson;
// show commit ref on netlify to know which commit is being served for debugging 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 Home = () => { const Home = () => {
src/components/views/NotFound.jsx
+2 -1
View File
@@ -4,6 +4,7 @@ import { Link } from "react-router-dom";
import { Container, Header, Logo, Page, Boards, BoardsTitle } from '../styled/views/Home.styled'; import { Container, Header, Logo, Page, Boards, BoardsTitle } from '../styled/views/Home.styled';
import packageJson from '../../../package.json'; 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 NotFound = () => { const NotFound = () => {
@@ -61,7 +62,7 @@ const NotFound = () => {
fontSize: "11px", fontSize: "11px",
marginTop: "2em", marginTop: "2em",
}}> }}>
plebchan v{version}. GPL-2.0 plebchan v{version}{commitRef}. GPL-2.0
</div> </div>
</Container> </Container>
</> </>
src/components/views/Pending.jsx
+2 -1
View File
@@ -21,6 +21,7 @@ import useError from '../../hooks/useError';
import useStateString from '../../hooks/useStateString'; import useStateString from '../../hooks/useStateString';
import packageJson from '../../../package.json'; 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 Pending = () => { const Pending = () => {
@@ -601,7 +602,7 @@ const Pending = () => {
marginTop: "2em", marginTop: "2em",
marginBottom: "2em", marginBottom: "2em",
}}> }}>
plebchan v{version}. GPL-2.0 plebchan v{version}{commitRef}. GPL-2.0
</div> </div>
</Container> </Container>
</> </>
src/components/views/Rules.jsx
+2 -1
View File
@@ -20,6 +20,7 @@ import handleStyleChange from '../../utils/handleStyleChange';
import useGeneralStore from '../../hooks/stores/useGeneralStore'; import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json'; 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 Rules = () => { const Rules = () => {
@@ -509,7 +510,7 @@ const Rules = () => {
</> </>
</NavBar> </NavBar>
<div id="version"> <div id="version">
plebchan v{version}. GPL-2.0 plebchan v{version}{commitRef}. GPL-2.0
</div> </div>
<div className="footer-links" <div className="footer-links"
style={{ style={{
src/components/views/Subscriptions.jsx
+131 -70
View File
@@ -17,6 +17,7 @@ import EditModal from '../modals/EditModal';
import EditLabel from '../EditLabel'; import EditLabel from '../EditLabel';
import ImageBanner from '../ImageBanner'; import ImageBanner from '../ImageBanner';
import ModerationModal from '../modals/ModerationModal'; import ModerationModal from '../modals/ModerationModal';
import Embed from '../Embed';
import OfflineIndicator from '../OfflineIndicator'; import OfflineIndicator from '../OfflineIndicator';
import PendingLabel from '../PendingLabel'; import PendingLabel from '../PendingLabel';
import Post from '../Post'; import Post from '../Post';
@@ -46,6 +47,7 @@ import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import packageJson from '../../../package.json'; import packageJson from '../../../package.json';
const {version} = packageJson; const {version} = packageJson;
let lastVirtuosoStates = {}; let lastVirtuosoStates = {};
const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
const Subscriptions = () => { const Subscriptions = () => {
@@ -728,33 +730,29 @@ const Subscriptions = () => {
commentMediaInfo?.url.length > 30 ? commentMediaInfo?.url.length > 30 ?
commentMediaInfo?.url.slice(0, 30) + "(...)" : commentMediaInfo?.url.slice(0, 30) + "(...)" :
commentMediaInfo?.url commentMediaInfo?.url
}</a>&nbsp;({commentMediaInfo?.type === "iframe" ? "video" : commentMediaInfo?.type}) }</a>&nbsp;{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`}
{isThreadThumbnailClicked[index] && commentMediaInfo.type !== "image" ? ( {((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
<span> <span>
-[ [
<span className='reply-link' <span className='reply-link'
style={{textDecoration: 'underline', cursor: 'pointer'}} style={{textDecoration: 'underline', cursor: 'pointer'}}
onClick={() => {handleThumbnailClick(index, 'thread')}}>Close</span> onClick={() => {handleThumbnailClick(index, 'thread')}}>
{isThreadThumbnailClicked[index] ? 'Close' : 'Embed'}
</span>
] ]
</span> </span>
) : null} )}
</div> </div>
{commentMediaInfo?.type === 'iframe' && ( {commentMediaInfo?.type === 'iframe' && (
<div key={`enlarge-${index}`} <div key={`enlarge-${index}`}
className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}> className={`img-container ${isThreadThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}> <span key={`fta-${index}`} className="file-thumb" style={
{(isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? ( isThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail ?
<iframe {} : {width: displayWidth, height: displayHeight
className='enlarged' }}>
key={`fti-${index}`} {isThreadThumbnailClicked[index] && commentMediaInfo.url ? (
src={commentMediaInfo.embedUrl} <Embed url={commentMediaInfo.url} key={`fti-${index}`} />
width={commentMediaInfo.thumbnail ? "560" : "250"} ) : commentMediaInfo.thumbnail ? (
height="315"
style={{border: "none"}}
title="Embedded content"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen />
) : (
<img <img
key={`fti-${index}`} key={`fti-${index}`}
src={commentMediaInfo.thumbnail} src={commentMediaInfo.thumbnail}
@@ -762,7 +760,7 @@ const Subscriptions = () => {
onClick={() => {handleThumbnailClick(index, 'thread')}} onClick={() => {handleThumbnailClick(index, 'thread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
)} ) : null}
</span> </span>
</div> </div>
)} )}
@@ -816,7 +814,7 @@ const Subscriptions = () => {
</div> </div>
) : null} ) : null}
{commentMediaInfo?.type === "audio" ? ( {commentMediaInfo?.type === "audio" ? (
<span key={`fta-${index}`} className="file-thumb" style={isThreadThumbnailClicked[index] ? {} : {width: displayWidth, height: displayHeight}}> <span key={`fta-${index}`} className="file-thumb">
<audio controls key={`fti-${index}`} <audio controls key={`fti-${index}`}
src={commentMediaInfo.url} alt={commentMediaInfo.type} src={commentMediaInfo.url} alt={commentMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
@@ -857,9 +855,9 @@ const Subscriptions = () => {
(u/ (u/
<span key={`pa-${index}`} className="poster-address address-desktop" <span key={`pa-${index}`} className="poster-address address-desktop"
id="reply-button" style={{cursor: "pointer"}} id="reply-button" style={{cursor: "pointer"}}
onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)} onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
> >
{<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>} {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>}
</span>) </span>)
&nbsp; &nbsp;
<span key={`dt-${index}`} className="date-time" <span key={`dt-${index}`} className="date-time"
@@ -1174,7 +1172,7 @@ const Subscriptions = () => {
&nbsp; &nbsp;
<span key={`pa-${index}`} className="poster-address address-desktop" <span key={`pa-${index}`} className="poster-address address-desktop"
id="reply-button" style={{cursor: "pointer"}} id="reply-button" style={{cursor: "pointer"}}
onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)} onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
> >
(u/ (u/
{reply.author?.shortAddress ? {reply.author?.shortAddress ?
@@ -1431,30 +1429,50 @@ const Subscriptions = () => {
</div> </div>
</div> </div>
{replyMediaInfo?.url ? ( {replyMediaInfo?.url ? (
<div key={`f-${index}`} className="file" <div key={`f-${index}`} className="file" style={{marginBottom: "5px"}}>
style={{marginBottom: "5px"}}> <div key={`ft-${index}`} className="file-text">
<div key={`ft-${index}`} className="reply-file-text">
Link:&nbsp; Link:&nbsp;
<a key={`fa-${index}`} href={replyMediaInfo.url} target="_blank" <a key={`fa-${index}`} href={replyMediaInfo.url} target="_blank"
rel="noopener noreferrer">{ rel="noopener noreferrer">{
replyMediaInfo?.url.length > 30 ? replyMediaInfo?.url.length > 30 ?
replyMediaInfo?.url.slice(0, 30) + "(...)" : replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url replyMediaInfo?.url
}</a>&nbsp;({replyMediaInfo?.type}) }</a>&nbsp;{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`}
{replyMediaInfo?.type === "video" || replyMediaInfo?.type === "iframe" ? ( { ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
isReplyThumbnailClicked[index] ? (
<span> <span>
-[ [
<span className='reply-link' <span className='reply-link'
style={{textDecoration: 'underline', cursor: 'pointer'}} style={{textDecoration: 'underline', cursor: 'pointer'}}
onClick={() => {handleThumbnailClick(index, 'reply')}}>Close</span> onClick={() => {handleThumbnailClick(index, 'reply')}}>
{isReplyThumbnailClicked[index] ? 'Close' : 'Embed'}
</span>
] ]
</span>) </span>
: null) )}
: null}
</div> </div>
{replyMediaInfo?.type === "webpage" ? ( {replyMediaInfo?.type === 'iframe' && (
<div key={`enlarge-reply-${index}`} className="img-container"> <div key={`enlarge-${index}`}
className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb-reply" style={
isReplyThumbnailClicked[index] || !replyMediaInfo.thumbnail ?
{} : {width: replyDisplayWidth, height: replyDisplayHeight
}}>
{isReplyThumbnailClicked[index] && replyMediaInfo.url ? (
<Embed url={replyMediaInfo.url} key={`fti-${index}`} />
) : replyMediaInfo.thumbnail ? (
<img
key={`fti-${index}`}
src={replyMediaInfo.thumbnail}
alt="thumbnail"
onClick={() => {handleThumbnailClick(index, 'reply')}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : null}
</span>
</div>
)}
{replyMediaInfo?.type === "webpage" && (
<div key={`enlarge-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}> <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
{reply.thumbnailUrl ? ( {reply.thumbnailUrl ? (
<img key={`fti-${index}`} <img key={`fti-${index}`}
@@ -1465,9 +1483,9 @@ const Subscriptions = () => {
) : null} ) : null}
</span> </span>
</div> </div>
) : null} )}
{replyMediaInfo?.type === "image" ? ( {replyMediaInfo?.type === "image" && (
<div key={`enlarge-reply-${index}`} className="img-container"> <div key={`enlarge-${index}`} className="img-container">
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}> <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
<img key={`fti-${index}`} <img key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
@@ -1476,16 +1494,16 @@ const Subscriptions = () => {
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
</div> </div>
) : null} )}
{replyMediaInfo?.type === "video" ? ( {replyMediaInfo?.type === "video" && (
<div key={`enlarge-reply-${index}`} className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}> <div key={`enlarge-${index}`} className={`img-container ${isReplyThumbnailClicked[index] ? 'expanded-container' : ''}`}>
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}> <span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}>
{isReplyThumbnailClicked[index] ? ( {isReplyThumbnailClicked[index] ? (
<video controls <video
className='enlarged' className='enlarged'
key={`fti-${index}`} key={`fti-${index}`}
src={replyMediaInfo.url} src={replyMediaInfo.url}
alt={replyMediaInfo.type} controls
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} onError={(e) => e.target.src = fallbackImgUrl}
/> />
@@ -1501,15 +1519,14 @@ const Subscriptions = () => {
)} )}
</span> </span>
</div> </div>
) : null} )}
{replyMediaInfo?.type === "audio" ? ( {replyMediaInfo?.type === "audio" && (
<span key={`fta-${index}`} className="file-thumb-reply" style={isReplyThumbnailClicked[index] ? {} : {width: replyDisplayWidth, height: replyDisplayHeight}}> <span key={`fta-${index}`} className="file-thumb-reply">
<audio controls <audio controls key={`fti-${index}`}
key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
</span> </span>
) : null} )}
</div> </div>
) : null} ) : null}
{reply.content ? ( {reply.content ? (
@@ -1758,11 +1775,11 @@ const Subscriptions = () => {
&nbsp; &nbsp;
<span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile" <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
id="reply-button" style={{cursor: "pointer"}} id="reply-button" style={{cursor: "pointer"}}
onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)} onClick={() => handleAddressClick(<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
> >
(u/ (u/
<span key={`mob-ha-${index}`} className="highlight-address-mobile"> <span key={`mob-ha-${index}`} className="highlight-address-mobile">
{<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>} {<VerifiedAuthor commentCid={thread.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>}
</span> </span>
)&nbsp; )&nbsp;
</span> </span>
@@ -1834,17 +1851,11 @@ const Subscriptions = () => {
{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" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}> <span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileThreadThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
{(isMobileThreadThumbnailClicked[index] || !commentMediaInfo.thumbnail) && commentMediaInfo.embedUrl ? ( {(isMobileThreadThumbnailClicked[index] && commentMediaInfo.url ? (
<div style={{width: "92vw"}}> <div style={{width: "92vw"}}>
<iframe <Embed url={commentMediaInfo.url} key={`fti-mobile-${index}`} />
key={`mob-fti-${index}`}
src={commentMediaInfo.embedUrl}
style={{border: "none", height: "250px"}}
title="Embedded content"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen />
</div> </div>
) : ( ) : commentMediaInfo.thumbnail ? (
<img <img
key={`mob-fti-${index}`} key={`mob-fti-${index}`}
src={commentMediaInfo.thumbnail} src={commentMediaInfo.thumbnail}
@@ -1852,7 +1863,7 @@ const Subscriptions = () => {
onClick={() => {handleThumbnailClick(index, 'mobileThread')}} onClick={() => {handleThumbnailClick(index, 'mobileThread')}}
style={{cursor: "pointer"}} style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
)} ) : <span onClick={() => {handleThumbnailClick(index, 'mobileThread')}}>Embed</span>)}
{commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? ( {commentMediaInfo?.type === "video" || commentMediaInfo?.type === "iframe" ? (
isMobileThreadThumbnailClicked[index] ? ( isMobileThreadThumbnailClicked[index] ? (
<div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}> <div style={{textAlign: "center", marginTop: "15px", marginBottom: "15px"}}>
@@ -1861,8 +1872,8 @@ const Subscriptions = () => {
>Close</span> >Close</span>
</div> </div>
) : ( ) : (
<div key={`mob-fi-${index}`} className="file-info-mobile">video</div> <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>
)) : <div key={`mob-fi-${index}`} className="file-info-mobile">video</div>} )) : <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>}
</span> </span>
</div> </div>
)} )}
@@ -2001,7 +2012,7 @@ const Subscriptions = () => {
&nbsp; &nbsp;
<span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile" <span key={`mob-pa-${index}`} className="poster-address-mobile address-mobile"
id="reply-button" style={{cursor: "pointer"}} id="reply-button" style={{cursor: "pointer"}}
onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)} onClick={() => handleAddressClick(<VerifiedAuthor commentCid={reply.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
> >
(u/ (u/
{reply.author?.shortAddress ? {reply.author?.shortAddress ?
@@ -2076,7 +2087,35 @@ const Subscriptions = () => {
{reply.link ? ( {reply.link ? (
<div key={`mob-f-${index}`} className="file-mobile"> <div key={`mob-f-${index}`} className="file-mobile">
{replyMediaInfo?.url ? ( {replyMediaInfo?.url ? (
replyMediaInfo.type === "webpage" ? ( replyMediaInfo.type === "iframe" ? (
<div key={`enlarge-mob-${index}`} className="img-container">
<span key={`mob-fta-${index}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
{(isMobileReplyThumbnailClicked[index] && replyMediaInfo.url ? (
<div style={{width: "92vw"}}>
<Embed url={replyMediaInfo.url} key={`fti-mobile-reply-${index}`} />
</div>
) : replyMediaInfo.thumbnail ? (
<img
key={`mob-fti-${index}`}
src={replyMediaInfo.thumbnail}
alt="thumbnail"
onClick={() => {handleThumbnailClick(index, 'mobileReply')}}
style={{cursor: "pointer"}}
onError={(e) => e.target.src = fallbackImgUrl} />
) : <span onClick={() => {handleThumbnailClick(index, 'mobileReply')}}>Embed</span>)}
{replyMediaInfo?.type === "video" || replyMediaInfo?.type === "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">webpage</div>
)) : <div key={`mob-fi-${index}`} className="file-info-mobile">webpage</div>}
</span>
</div>
) : replyMediaInfo.type === "webpage" ? (
<div key={`enlarge-mob-reply-${index}`} className="img-container"> <div key={`enlarge-mob-reply-${index}`} className="img-container">
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: displayWidthMobile, height: displayHeightMobile}}> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] || !reply.thumbnailUrl ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
{reply.thumbnailUrl ? ( {reply.thumbnailUrl ? (
@@ -2101,12 +2140,34 @@ const Subscriptions = () => {
</span> </span>
</div> </div>
) : replyMediaInfo.type === "video" ? ( ) : replyMediaInfo.type === "video" ? (
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {marginBottom: '25px'}}>
{isMobileReplyThumbnailClicked[index] ? (
<video key={`fti-${index}`} <video key={`fti-${index}`}
src={replyMediaInfo.url} alt={replyMediaInfo.type} src={replyMediaInfo.url} alt={replyMediaInfo.type}
style={{ pointerEvents: "none" }} controls
style={{ all: 'unset', width: '100%', height: '100%', cursor: 'pointer'}}
onError={(e) => e.target.src = fallbackImgUrl} /> onError={(e) => e.target.src = fallbackImgUrl} />
<div key={`mob-fi-${index}`} className="file-info-mobile">{replyMediaInfo.type}</div> ) : (
<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" || replyMediaInfo?.type === "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> </span>
) : replyMediaInfo.type === "audio" ? ( ) : replyMediaInfo.type === "audio" ? (
<span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}> <span key={`mob-ft${reply.cid}`} className="file-thumb-mobile" style={isMobileReplyThumbnailClicked[index] ? {} : {width: displayWidthMobile, height: displayHeightMobile}}>
@@ -2487,7 +2548,7 @@ const Subscriptions = () => {
</> </>
</NavBar> </NavBar>
<div id="version"> <div id="version">
plebchan v{version}. GPL-2.0 plebchan v{version}{commitRef}. GPL-2.0
</div> </div>
<div className="footer-links" <div className="footer-links"
style={{ style={{
src/components/views/SubscriptionsCatalog.jsx
+2 -1
View File
@@ -33,6 +33,7 @@ import useWindowWidth from '../../hooks/useWindowWidth';
import packageJson from '../../../package.json'; import packageJson from '../../../package.json';
const {version} = packageJson; const {version} = packageJson;
let lastVirtuosoStates = {}; let lastVirtuosoStates = {};
const commitRef = process?.env?.REACT_APP_COMMIT_REF ? ` ${process.env.REACT_APP_COMMIT_REF.slice(0, 7)}` : '';
const CatalogPost = ({post}) => { const CatalogPost = ({post}) => {
@@ -982,7 +983,7 @@ const SubscriptionsCatalog = () => {
</> </>
</NavBar> </NavBar>
<div id="version"> <div id="version">
plebchan v{version}. GPL-2.0 plebchan v{version}{commitRef}. GPL-2.0
</div> </div>
<div className="footer-links" <div className="footer-links"
style={{ style={{
src/components/views/Thread.jsx
+8 -7
View File
@@ -47,6 +47,7 @@ import useAnonModeStore from '../../hooks/stores/useAnonModeStore';
import useGeneralStore from '../../hooks/stores/useGeneralStore'; import useGeneralStore from '../../hooks/stores/useGeneralStore';
import packageJson from '../../../package.json'; 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 Thread = () => { const Thread = () => {
@@ -871,7 +872,7 @@ const Thread = () => {
commentMediaInfo?.url.slice(0, 30) + "(...)" : commentMediaInfo?.url.slice(0, 30) + "(...)" :
commentMediaInfo?.url commentMediaInfo?.url
}</a>&nbsp;{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`} }</a>&nbsp;{commentMediaInfo?.type === "iframe" ? null : `(${commentMediaInfo?.type})`}
{ (isThreadThumbnailClicked[index] || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && ( {((isThreadThumbnailClicked[index] && (commentMediaInfo.type === 'iframe' || commentMediaInfo.type === 'video')) || (commentMediaInfo.type === 'iframe' && !commentMediaInfo.thumbnail)) && (
<span> <span>
[ [
<span className='reply-link' <span className='reply-link'
@@ -993,10 +994,10 @@ const Thread = () => {
&nbsp; &nbsp;
<span className="poster-address address-desktop" <span className="poster-address address-desktop"
id="reply-button" style={{cursor: "pointer"}} id="reply-button" style={{cursor: "pointer"}}
onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)}> onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}>
(u/ (u/
<span key={`pa-${comment.cid}`} className="poster-address"> <span key={`pa-${comment.cid}`} className="poster-address">
{<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>} {<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>}
</span>) </span>)
</span> </span>
&nbsp; &nbsp;
@@ -1531,7 +1532,7 @@ const Thread = () => {
replyMediaInfo?.url.slice(0, 30) + "(...)" : replyMediaInfo?.url.slice(0, 30) + "(...)" :
replyMediaInfo?.url replyMediaInfo?.url
}</a>&nbsp;{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`} }</a>&nbsp;{replyMediaInfo?.type === "iframe" ? null : `(${replyMediaInfo?.type})`}
{ (isReplyThumbnailClicked[index] || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && ( { ((isReplyThumbnailClicked[index] && (replyMediaInfo.type === 'iframe' || replyMediaInfo.type === 'video')) || (replyMediaInfo.type === 'iframe' && !replyMediaInfo.thumbnail)) && (
<span> <span>
[ [
<span className='reply-link' <span className='reply-link'
@@ -1755,11 +1756,11 @@ const Thread = () => {
&nbsp; &nbsp;
<span key={`mob-pa-${comment.cid}`} className="poster-address-mobile address-mobile" <span key={`mob-pa-${comment.cid}`} className="poster-address-mobile address-mobile"
id="reply-button" style={{cursor: "pointer"}} id="reply-button" style={{cursor: "pointer"}}
onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>)} onClick={() => handleAddressClick(<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>)}
> >
(u/ (u/
<span key={`mob-ha-${comment.cid}`} className="highlight-address-mobile"> <span key={`mob-ha-${comment.cid}`} className="highlight-address-mobile">
{<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress)}</VerifiedAuthor>} {<VerifiedAuthor commentCid={comment.cid}>{({ shortAuthorAddress }) => (shortAuthorAddress || "aPL4c3H0Ld3r")}</VerifiedAuthor>}
</span> </span>
)&nbsp; )&nbsp;
</span> </span>
@@ -2459,7 +2460,7 @@ const Thread = () => {
</> </>
</NavBar> </NavBar>
<div id="version"> <div id="version">
plebchan v{version}. GPL-2.0 plebchan v{version}{commitRef}. GPL-2.0
</div> </div>
<div className="footer-links" <div className="footer-links"
style={{ style={{
src/hooks/useInfo.js
+43
View File
@@ -0,0 +1,43 @@
import { useEffect, useState } from "react";
import { toast } from "react-toastify";
const useInfo = () => {
const [infoMessage, setInfoMessage] = useState('');
const [renderCount, setRenderCount] = useState(0);
useEffect(() => {
if (infoMessage && infoMessage.length > 0) {
const showInfoToast = () => {
const toastId = toast.info(infoMessage.toString(), {
position: "top-right",
autoClose: false,
hideProgressBar: false,
closeOnClick: false,
pauseOnHover: false,
draggable: false,
progress: undefined,
theme: "dark",
});
return () => {
toast.dismiss(toastId);
};
};
const timeoutId = setTimeout(showInfoToast, 500);
return () => {
clearTimeout(timeoutId);
};
}
}, [infoMessage, renderCount]);
const setNewInfoMessage = (message) => {
setInfoMessage(message);
setRenderCount(prevCount => prevCount + 1);
};
return [infoMessage, setNewInfoMessage];
};
export default useInfo;