From aa6eeee26f82fb52f9f2596422016c130f80cdfd Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Sun, 7 Apr 2024 19:05:17 +0200 Subject: [PATCH 01/16] style: decrease brightness of inputs on dark themes --- src/app.module.css | 4 ++++ src/themes.css | 3 +++ 2 files changed, 7 insertions(+) diff --git a/src/app.module.css b/src/app.module.css index 6c9bae3a..1273ee9f 100644 --- a/src/app.module.css +++ b/src/app.module.css @@ -14,4 +14,8 @@ .app { padding: 5px; } +} + +select, button, input, textarea { + filter: var(--filter80); } \ No newline at end of file diff --git a/src/themes.css b/src/themes.css index daefcc52..7ec6214b 100644 --- a/src/themes.css +++ b/src/themes.css @@ -478,6 +478,9 @@ --button-desktop-text-color: #81a2be; --button-desktop-text-color-hover: #5f89ac; + /* filter for inputs */ + --filter80: brightness(85%); + /* mobile buttons */ --button-font-size-mobile: 10pt; --button-font-weight-mobile: 700; From dcf0dd98e4b4857a0bba33a23c2b33ef4fec3e60 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Mon, 8 Apr 2024 12:33:59 +0200 Subject: [PATCH 02/16] feat(feed): add description and rules --- src/components/post/post.module.css | 4 ++ src/components/post/post.tsx | 52 +++++++++++++--------- src/themes.css | 18 ++++++++ src/views/subplebbit/subplebbit.module.css | 14 +----- src/views/subplebbit/subplebbit.tsx | 37 ++++++++++++++- 5 files changed, 90 insertions(+), 35 deletions(-) diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css index be105169..7c32e27c 100644 --- a/src/components/post/post.module.css +++ b/src/components/post/post.module.css @@ -368,6 +368,10 @@ text-align: right; } +.capcodeMod { + color: var(--post-capcode-mod-text-color) !important; +} + @media (max-width: 640px) { .postDesktop { display: none; diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index 30c2c673..d16e8a74 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -1,7 +1,6 @@ import { useState } from 'react'; import { Link, useLocation, useParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; -import { Comment } from '@plebbit/plebbit-react-hooks'; import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js'; import { getCommentMediaInfoMemoized, getHasThumbnail } from '../../lib/utils/media-utils'; import { getFormattedDate } from '../../lib/utils/time-utils'; @@ -12,7 +11,7 @@ import styles from './post.module.css'; import Markdown from '../markdown'; import Media from '../media'; -const ReplyDesktop = ({ reply }: Comment) => { +const ReplyDesktop = ({ reply }: any) => { const { t } = useTranslation(); const { author, content, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, subplebbitAddress, timestamp } = reply || {}; const { displayName, shortAddress } = author || {}; @@ -102,10 +101,11 @@ const ReplyDesktop = ({ reply }: Comment) => { ); }; -const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies: boolean }) => { +const PostDesktop = ({ post, showAllReplies }: PostProps) => { const { t } = useTranslation(); const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {}; const { displayName, shortAddress } = author || {}; + const { isDescription, isRules } = post || {}; // custom properties, not from api const isInPostPage = isPostPageView(useLocation().pathname, useParams()); @@ -170,19 +170,21 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies: {title && {displayTitle} } - {displayName || 'Anonymous'} - (u/{shortAddress}) + {displayName || 'Anonymous'} + {!(isDescription || isRules) && (u/{shortAddress}) } {getFormattedDate(timestamp)} - - - c/ - - - {shortCid} + {!(isDescription || isRules) && ( + + + c/ + + + {shortCid} + - + )} {pinned && ( @@ -194,7 +196,7 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies: )} - [{t('reply')}] + [{t('reply')}] ▶ @@ -211,7 +213,7 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies: )} )} - {(replies.length > 5 || pinned) && !isInPostPage && ( + {(replies.length > 5 || (pinned && replies.length > 0)) && !isInPostPage && ( @@ -233,7 +235,7 @@ const PostDesktop = ({ post, showAllReplies }: { post: Comment; showAllReplies: ); }; -const ReplyMobile = ({ reply }: Comment) => { +const ReplyMobile = ({ reply }: any) => { const { author, content, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, subplebbitAddress, timestamp } = reply || {}; const { displayName, shortAddress } = author || {}; @@ -288,10 +290,11 @@ const ReplyMobile = ({ reply }: Comment) => { ); }; -const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: boolean }) => { +const PostMobile = ({ post, showAllReplies }: PostProps) => { const { t } = useTranslation(); const { author, cid, content, link, linkHeight, linkWidth, pinned, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {}; const { address, displayName, shortAddress } = author || {}; + const { isDescription, isRules } = post || {}; // custom properties, not from api const linkCount = useCountLinksInReplies(post); const isInPostPage = isPostPageView(useLocation().pathname, useParams()); @@ -317,8 +320,8 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b ... - {displayName || 'Anonymous'} - (u/{shortAddress || address?.slice(0, 12) + '...'}) + {displayName || 'Anonymous'} + {!(isDescription || isRules) && (u/{shortAddress || address?.slice(0, 12) + '...'})} {title && ( <>
@@ -327,8 +330,13 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b )} - {getFormattedDate(timestamp)} c/ - {shortCid} + {getFormattedDate(timestamp)}{' '} + {!(isDescription || isRules) && ( + <> + c/ + {shortCid} + + )} {hasThumbnail && ( @@ -357,7 +365,7 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b {!isInPostPage && (
- {replyCount} Replies + {replyCount > 0 && `${replyCount} Replies`} {linkCount > 0 && ` / ${linkCount} Links`} @@ -380,7 +388,7 @@ const PostMobile = ({ post, showAllReplies }: { post: Comment; showAllReplies: b interface PostProps { index?: number; - post: Comment; + post: any; showAllReplies?: boolean; } diff --git a/src/themes.css b/src/themes.css index 7ec6214b..057b3e43 100644 --- a/src/themes.css +++ b/src/themes.css @@ -100,6 +100,9 @@ --post-mobile-file-info-text-color: #707070; --post-mobile-content-font-size: 11pt; + /* post capcodes */ + --post-capcode-mod-text-color: purple; + /* quotelink */ --post-quotelink-text-color: navy; --post-quotelink-text-color-hover: red; @@ -218,6 +221,9 @@ --post-mobile-abbr-font-size: 10pt; --post-mobile-content-font-size: 11pt; + /* post capcodes */ + --post-capcode-mod-text-color: purple; + /* quotelink */ --post-quotelink-text-color: #d00; --post-quotelink-text-color-hover: #d00; @@ -314,6 +320,9 @@ --post-mobile-abbr-font-size: 12pt; --post-mobile-content-font-size: 13pt; + /* post capcodes */ + --post-capcode-mod-text-color: purple; + /* quotelink */ --post-quotelink-text-color: navy; --post-quotelink-text-color-hover: red; @@ -423,6 +432,9 @@ --post-mobile-abbr-font-size: 12pt; --post-mobile-content-font-size: 13pt; + /* post capcodes */ + --post-capcode-mod-text-color: purple; + /* quotelink */ --post-quotelink-text-color: #d00; --post-quotelink-text-color-hover: #d00; @@ -532,6 +544,9 @@ --post-mobile-abbr-font-size: 10pt; --post-mobile-content-font-size: 11pt; + /* post capcodes */ + --post-capcode-mod-text-color: #81a2be; + /* quotelink */ --post-quotelink-text-color: #5f89ac; --post-quotelink-text-color-hover: #81a2be; @@ -635,6 +650,9 @@ --post-mobile-content-font-size: 11pt; --post-mobile-border-bottom: 1px solid #ccc; + /* post capcodes */ + --post-capcode-mod-text-color: #f60; + /* quotelink */ --post-quotelink-text-color: #f60; --post-quotelink-text-color-hover: #f30; diff --git a/src/views/subplebbit/subplebbit.module.css b/src/views/subplebbit/subplebbit.module.css index 3374e37a..bfa36082 100644 --- a/src/views/subplebbit/subplebbit.module.css +++ b/src/views/subplebbit/subplebbit.module.css @@ -1,13 +1,3 @@ -.debug { - position: fixed; - top: 50px; - right: 0; - padding: 0.5em; -} - -.debug select { - margin: 2px; - border: var(--select-border); - background-color: var(--select-background-color); - color: var(--select-color); +.footer { + padding-top: 10px; } diff --git a/src/views/subplebbit/subplebbit.tsx b/src/views/subplebbit/subplebbit.tsx index bf3b00ed..3abba748 100644 --- a/src/views/subplebbit/subplebbit.tsx +++ b/src/views/subplebbit/subplebbit.tsx @@ -18,7 +18,36 @@ const Subplebbit = () => { const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType }); const subplebbit = useSubplebbit({ subplebbitAddress }); - const { shortAddress, state, title } = subplebbit || {}; + const { createdAt, description, rules, shortAddress, state, suggested, title } = subplebbit || {}; + + const descriptionPost = useMemo( + () => ({ + isDescription: true, + subplebbitAddress, + timestamp: createdAt, + author: { displayName: '## Board Mods' }, + content: description, + link: suggested?.avatarUrl, + title: 'Welcome to ' + (title || `p/${shortAddress}`) + '!', + pinned: true, + locked: true, + }), + [subplebbitAddress, createdAt, description, suggested?.avatarUrl, title, shortAddress], + ); + + const rulesPost = useMemo( + () => ({ + isRules: true, + subplebbitAddress, + timestamp: createdAt, + author: { displayName: '## Board Mods' }, + content: rules && rules.map((rule: string, index: number) => `${index + 1}. ${rule}`).join('\n'), + title: 'Rules', + pinned: true, + locked: true, + }), + [subplebbitAddress, createdAt, rules], + ); const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading'); const loadingString =
{state === 'failed' ? state : }
; @@ -56,6 +85,12 @@ const Subplebbit = () => { return (
+ {createdAt && ( + <> + {rules && rules.length > 0 && } + {description && description.length > 0 && } + + )} Date: Mon, 8 Apr 2024 12:37:44 +0200 Subject: [PATCH 03/16] Update post.tsx --- src/components/post/post.tsx | 254 +++++++++++++++++------------------ 1 file changed, 127 insertions(+), 127 deletions(-) diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index d16e8a74..8465a43d 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -11,96 +11,6 @@ import styles from './post.module.css'; import Markdown from '../markdown'; import Media from '../media'; -const ReplyDesktop = ({ reply }: any) => { - const { t } = useTranslation(); - const { author, content, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, subplebbitAddress, timestamp } = reply || {}; - const { displayName, shortAddress } = author || {}; - - const commentMediaInfo = getCommentMediaInfoMemoized(reply); - const hasThumbnail = getHasThumbnail(commentMediaInfo, link); - const [showThumbnail, setShowThumbnail] = useState(true); - - const isReplyingToReply = postCid !== parentCid; - - return ( -
-
{'>>'}
-
-
- - - - - {displayName || 'Anonymous'} - (u/{shortAddress}) - - {getFormattedDate(timestamp)} - - - - c/ - - - {shortCid} - - - {pinned && ( - - - - )} - - ▶ -
- {link && ( -
-
- {t('link')}:{' '} - - {link.length > 30 ? link?.slice(0, 30) + '...' : link} - - {!showThumbnail && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video') && ( - - {' '} - [ - setShowThumbnail(true)}> - {t('close')} - - ] - - )} -
- {hasThumbnail && ( - - )} -
- )} - {content && ( -
- {isReplyingToReply && ( - <> - - {`c/${Plebbit.getShortCid(parentCid)}`} - -
- - )} - -
- )} -
-
- ); -}; - const PostDesktop = ({ post, showAllReplies }: PostProps) => { const { t } = useTranslation(); const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {}; @@ -235,7 +145,8 @@ const PostDesktop = ({ post, showAllReplies }: PostProps) => { ); }; -const ReplyMobile = ({ reply }: any) => { +const ReplyDesktop = ({ reply }: any) => { + const { t } = useTranslation(); const { author, content, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, subplebbitAddress, timestamp } = reply || {}; const { displayName, shortAddress } = author || {}; @@ -246,45 +157,79 @@ const ReplyMobile = ({ reply }: any) => { const isReplyingToReply = postCid !== parentCid; return ( -
+
+
{'>>'}
-
-
- ... - - {displayName || 'Anonymous'} - (u/{shortAddress}) +
+ + + + + {displayName || 'Anonymous'} + (u/{shortAddress}) + + {getFormattedDate(timestamp)} + + + + c/ + + + {shortCid} + - - {getFormattedDate(timestamp)} c/ - {shortCid} - -
- {hasThumbnail && ( - - )} - {content && ( -
- {isReplyingToReply && ( - <> - - {`c/${Plebbit.getShortCid(parentCid)}`} - -
- - )} - -
- )} + {pinned && ( + + + + )} + + ▶
+ {link && ( +
+
+ {t('link')}:{' '} + + {link.length > 30 ? link?.slice(0, 30) + '...' : link} + + {!showThumbnail && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video') && ( + + {' '} + [ + setShowThumbnail(true)}> + {t('close')} + + ] + + )} +
+ {hasThumbnail && ( + + )} +
+ )} + {content && ( +
+ {isReplyingToReply && ( + <> + + {`c/${Plebbit.getShortCid(parentCid)}`} + +
+ + )} + +
+ )}
); @@ -386,6 +331,61 @@ const PostMobile = ({ post, showAllReplies }: PostProps) => { ); }; +const ReplyMobile = ({ reply }: any) => { + const { author, content, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, subplebbitAddress, timestamp } = reply || {}; + const { displayName, shortAddress } = author || {}; + + const commentMediaInfo = getCommentMediaInfoMemoized(reply); + const hasThumbnail = getHasThumbnail(commentMediaInfo, link); + const [showThumbnail, setShowThumbnail] = useState(true); + + const isReplyingToReply = postCid !== parentCid; + + return ( +
+
+
+
+ ... + + {displayName || 'Anonymous'} + (u/{shortAddress}) + + + {getFormattedDate(timestamp)} c/ + {shortCid} + +
+ {hasThumbnail && ( + + )} + {content && ( +
+ {isReplyingToReply && ( + <> + + {`c/${Plebbit.getShortCid(parentCid)}`} + +
+ + )} + +
+ )} +
+
+
+ ); +}; + interface PostProps { index?: number; post: any; From ebf1e426f596dc6a4004c73982a8fe444fab6d91 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Mon, 8 Apr 2024 16:03:32 +0200 Subject: [PATCH 04/16] feat(post): add mod role to display name --- src/components/post/post.module.css | 1 + src/components/post/post.tsx | 64 +++++++++++++++++++---------- 2 files changed, 44 insertions(+), 21 deletions(-) diff --git a/src/components/post/post.module.css b/src/components/post/post.module.css index 7c32e27c..ca9a6103 100644 --- a/src/components/post/post.module.css +++ b/src/components/post/post.module.css @@ -370,6 +370,7 @@ .capcodeMod { color: var(--post-capcode-mod-text-color) !important; + text-transform: capitalize; } @media (max-width: 640px) { diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index 8465a43d..22fe5da4 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -1,6 +1,7 @@ import { useState } from 'react'; import { Link, useLocation, useParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; +import { Role, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import Plebbit from '@plebbit/plebbit-js/dist/browser/index.js'; import { getCommentMediaInfoMemoized, getHasThumbnail } from '../../lib/utils/media-utils'; import { getFormattedDate } from '../../lib/utils/time-utils'; @@ -11,10 +12,20 @@ import styles from './post.module.css'; import Markdown from '../markdown'; import Media from '../media'; -const PostDesktop = ({ post, showAllReplies }: PostProps) => { +interface PostProps { + index?: number; + post?: any; + reply?: any; + roles?: Role[]; + showAllReplies?: boolean; +} + +const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => { const { t } = useTranslation(); const { author, cid, content, link, linkHeight, linkWidth, locked, pinned, postCid, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {}; - const { displayName, shortAddress } = author || {}; + const { address, displayName, shortAddress } = author || {}; + const authorRole = roles?.[address]?.role; + const { isDescription, isRules } = post || {}; // custom properties, not from api const isInPostPage = isPostPageView(useLocation().pathname, useParams()); @@ -80,7 +91,10 @@ const PostDesktop = ({ post, showAllReplies }: PostProps) => { {title && {displayTitle} } - {displayName || 'Anonymous'} + + {displayName || 'Anonymous'} + {authorRole && ` ## Board ${authorRole}`}{' '} + {!(isDescription || isRules) && (u/{shortAddress}) } {getFormattedDate(timestamp)} @@ -138,17 +152,18 @@ const PostDesktop = ({ post, showAllReplies }: PostProps) => { replies && replies.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => (
- +
))}
); }; -const ReplyDesktop = ({ reply }: any) => { +const ReplyDesktop = ({ reply, roles }: PostProps) => { const { t } = useTranslation(); const { author, content, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, subplebbitAddress, timestamp } = reply || {}; - const { displayName, shortAddress } = author || {}; + const { address, displayName, shortAddress } = author || {}; + const authorRole = roles?.[address]?.role; const commentMediaInfo = getCommentMediaInfoMemoized(reply); const hasThumbnail = getHasThumbnail(commentMediaInfo, link); @@ -165,7 +180,10 @@ const ReplyDesktop = ({ reply }: any) => { - {displayName || 'Anonymous'} + + {displayName || 'Anonymous'} + {authorRole && ` ## Board ${authorRole}`}{' '} + (u/{shortAddress}) {getFormattedDate(timestamp)} @@ -235,10 +253,12 @@ const ReplyDesktop = ({ reply }: any) => { ); }; -const PostMobile = ({ post, showAllReplies }: PostProps) => { +const PostMobile = ({ post, roles, showAllReplies }: PostProps) => { const { t } = useTranslation(); const { author, cid, content, link, linkHeight, linkWidth, pinned, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {}; const { address, displayName, shortAddress } = author || {}; + const authorRole = roles?.[address]?.role; + const { isDescription, isRules } = post || {}; // custom properties, not from api const linkCount = useCountLinksInReplies(post); @@ -265,7 +285,10 @@ const PostMobile = ({ post, showAllReplies }: PostProps) => { ... - {displayName || 'Anonymous'} + + {displayName || 'Anonymous'} + {authorRole && ` ## Board ${authorRole}`}{' '} + {!(isDescription || isRules) && (u/{shortAddress || address?.slice(0, 12) + '...'})} {title && ( <> @@ -323,7 +346,7 @@ const PostMobile = ({ post, showAllReplies }: PostProps) => { replies && replies.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => (
- +
))}
@@ -331,9 +354,10 @@ const PostMobile = ({ post, showAllReplies }: PostProps) => { ); }; -const ReplyMobile = ({ reply }: any) => { +const ReplyMobile = ({ reply, roles }: PostProps) => { const { author, content, link, linkHeight, linkWidth, parentCid, pinned, postCid, shortCid, subplebbitAddress, timestamp } = reply || {}; - const { displayName, shortAddress } = author || {}; + const { address, displayName, shortAddress } = author || {}; + const authorRole = roles?.[address]?.role; const commentMediaInfo = getCommentMediaInfoMemoized(reply); const hasThumbnail = getHasThumbnail(commentMediaInfo, link); @@ -348,7 +372,10 @@ const ReplyMobile = ({ reply }: any) => {
... - {displayName || 'Anonymous'} + + {displayName || 'Anonymous'} + {authorRole && ` ## Board ${authorRole}`}{' '} + (u/{shortAddress}) @@ -386,18 +413,13 @@ const ReplyMobile = ({ reply }: any) => { ); }; -interface PostProps { - index?: number; - post: any; - showAllReplies?: boolean; -} - const Post = ({ post, showAllReplies = false }: PostProps) => { + const subplebbit = useSubplebbit({ subplebbitAddress: post?.subplebbitAddress }); return (
- - + +
); From 608aa632d4c6ac19b4065b18e2215b07ff5e9984 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Mon, 8 Apr 2024 16:08:58 +0200 Subject: [PATCH 05/16] fix(feed): show last 5 replies of thread in feed, not first 5 replies --- src/components/post/post.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index 22fe5da4..3037f775 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -150,7 +150,7 @@ const PostDesktop = ({ post, roles, showAllReplies }: PostProps) => { )} {!(pinned && !isInPostPage) && replies && - replies.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => ( + (showAllReplies ? replies : replies.slice(-5)).map((reply, index) => (
@@ -344,7 +344,7 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => {
{!(pinned && !isInPostPage) && replies && - replies.slice(0, showAllReplies ? replies.length : 5).map((reply, index) => ( + (showAllReplies ? replies : replies.slice(-5)).map((reply, index) => (
From f13b49665229d0cd76940626926e869426398b4d Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Mon, 8 Apr 2024 17:13:02 +0200 Subject: [PATCH 06/16] update app layout, add 'thread closed' banner --- src/app.tsx | 46 +++++++------------ src/components/board-banner/board-banner.tsx | 13 +++--- .../board-buttons/board-buttons.tsx | 8 ++-- .../board-stats/board-stats.module.css | 8 ++++ src/components/board-stats/board-stats.tsx | 21 +++++---- src/components/post-form/post-form.module.css | 9 ++++ src/components/post-form/post-form.tsx | 37 ++++++++++----- 7 files changed, 83 insertions(+), 59 deletions(-) diff --git a/src/app.tsx b/src/app.tsx index 292844ed..f0050708 100644 --- a/src/app.tsx +++ b/src/app.tsx @@ -1,7 +1,7 @@ -import React, { useEffect } from 'react'; -import { Outlet, Route, Routes, useLocation, useParams } from 'react-router-dom'; +import { useEffect } from 'react'; +import { Outlet, Route, Routes, useLocation } from 'react-router-dom'; import { isHomeView } from './lib/utils/view-utils'; -import { Subplebbit as SubplebbitType, useSubplebbit, useSubplebbits } from '@plebbit/plebbit-react-hooks'; +import { useSubplebbits } from '@plebbit/plebbit-react-hooks'; import { useDefaultSubplebbitAddresses } from './hooks/use-default-subplebbits'; import useTheme from './hooks/use-theme'; import styles from './app.module.css'; @@ -16,32 +16,6 @@ import { MobileBoardButtons } from './components/board-buttons'; import BoardStats from './components/board-stats'; import PostForm from './components/post-form'; -interface BoardLayoutProps { - subplebbits: (SubplebbitType | undefined)[]; -} - -const BoardLayout = React.memo(({ subplebbits }: BoardLayoutProps) => { - const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>(); - const subplebbit = useSubplebbit({ subplebbitAddress }); - const { address, createdAt, title } = subplebbit || {}; - - return ( - <> - {address && ( - <> - - - - - - - - )} - - - ); -}); - const App = () => { const [theme] = useTheme(); const location = useLocation(); @@ -62,11 +36,23 @@ const App = () => { // // ); + const boardLayout = ( + <> + + + + + + + + + ); + return (
} /> - }> + } /> } /> diff --git a/src/components/board-banner/board-banner.tsx b/src/components/board-banner/board-banner.tsx index 7887a67e..b7563e28 100644 --- a/src/components/board-banner/board-banner.tsx +++ b/src/components/board-banner/board-banner.tsx @@ -1,3 +1,5 @@ +import { useParams } from 'react-router-dom'; +import { useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { useState } from 'react'; import styles from './board-banner.module.css'; @@ -12,13 +14,12 @@ const ImageBanner = () => { return banner; }; -interface BoardBannerProps { - title: string | undefined; - address: string | undefined; -} - -const BoardBanner = ({ address, title }: BoardBannerProps) => { +const BoardBanner = () => { + const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>(); + const subplebbit = useSubplebbit({ subplebbitAddress }); + const { address, title } = subplebbit || {}; const displayAddress = address && address.length > 10 && !address.includes('.') ? address.slice(0, 13).concat('...') : address; + return (
diff --git a/src/components/board-buttons/board-buttons.tsx b/src/components/board-buttons/board-buttons.tsx index 6d5f1b0f..c9b188c6 100644 --- a/src/components/board-buttons/board-buttons.tsx +++ b/src/components/board-buttons/board-buttons.tsx @@ -5,7 +5,7 @@ import styles from './board-buttons.module.css'; import { isPostPageView } from '../../lib/utils/view-utils'; interface BoardButtonsProps { - address: string; + address: string | undefined; } const OptionsButton = () => { @@ -51,7 +51,8 @@ const BottomButton = () => { ); }; -export const MobileBoardButtons = ({ address }: BoardButtonsProps) => { +export const MobileBoardButtons = () => { + const { subplebbitAddress: address } = useParams<{ subplebbitAddress: string }>(); const isInPostPage = isPostPageView(useLocation().pathname, useParams()); return (
@@ -76,7 +77,8 @@ export const MobileBoardButtons = ({ address }: BoardButtonsProps) => { ); }; -export const DesktopBoardButtons = ({ address }: BoardButtonsProps) => { +export const DesktopBoardButtons = () => { + const { subplebbitAddress: address } = useParams<{ subplebbitAddress: string }>(); const isInPostPage = isPostPageView(useLocation().pathname, useParams()); return (
diff --git a/src/components/board-stats/board-stats.module.css b/src/components/board-stats/board-stats.module.css index ed05ae50..3b2c8cbd 100644 --- a/src/components/board-stats/board-stats.module.css +++ b/src/components/board-stats/board-stats.module.css @@ -1,3 +1,11 @@ +.hide { + display: none; +} + +.show { + display: block; +} + .content hr { min-width: 468px; margin-left: -4px; diff --git a/src/components/board-stats/board-stats.tsx b/src/components/board-stats/board-stats.tsx index 61302d82..7b8186d7 100644 --- a/src/components/board-stats/board-stats.tsx +++ b/src/components/board-stats/board-stats.tsx @@ -1,15 +1,20 @@ import { useState } from 'react'; -import { useSubplebbitStats } from '@plebbit/plebbit-react-hooks'; +import { useParams } from 'react-router-dom'; +import { useComment, useSubplebbit, useSubplebbitStats } from '@plebbit/plebbit-react-hooks'; import styles from './board-stats.module.css'; import { Trans, useTranslation } from 'react-i18next'; -export interface BoardStatsProps { - address: string | undefined; - createdAt: number | undefined; -} - -const BoardStats = ({ address, createdAt }: BoardStatsProps) => { +const BoardStats = () => { const { t } = useTranslation(); + const { commentCid, subplebbitAddress } = useParams<{ subplebbitAddress: string; commentCid: string }>(); + + const subplebbit = useSubplebbit({ subplebbitAddress }); + const { address, createdAt } = subplebbit || {}; + + const comment = useComment({ commentCid }); + const { deleted, locked, removed } = comment || {}; + const hideStats = deleted || locked || removed; + const stats = useSubplebbitStats({ subplebbitAddress: address }); const [showStats, setShowStats] = useState(true); @@ -22,7 +27,7 @@ const BoardStats = ({ address, createdAt }: BoardStatsProps) => { }; return ( -
+
diff --git a/src/components/post-form/post-form.module.css b/src/components/post-form/post-form.module.css index f524da91..fee60e0f 100644 --- a/src/components/post-form/post-form.module.css +++ b/src/components/post-form/post-form.module.css @@ -10,6 +10,15 @@ padding-bottom: 0.5em; } +.closed { + font-size: x-large; + text-align: center; + color: red; + font-weight: 700; + padding-top: 100px; + padding-bottom: 100px; +} + @media (max-width: 640px) { .postFormButtonDesktop { display: none; diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx index c2494a9e..2cf4c739 100644 --- a/src/components/post-form/post-form.tsx +++ b/src/components/post-form/post-form.tsx @@ -1,26 +1,39 @@ import { useState } from 'react'; import { useTranslation } from 'react-i18next'; -import styles from './post-form.module.css'; -import { isPostPageView } from '../../lib/utils/view-utils'; import { useLocation, useParams } from 'react-router-dom'; +import { useComment } from '@plebbit/plebbit-react-hooks'; +import { isPostPageView } from '../../lib/utils/view-utils'; +import styles from './post-form.module.css'; -export interface PostFormProps { - address: string | undefined; -} - -const PostForm = ({ address }: PostFormProps) => { +const PostForm = () => { const { t } = useTranslation(); + const { subplebbitAddress, commentCid } = useParams<{ subplebbitAddress: string; commentCid: string }>(); + + const comment = useComment({ commentCid }); + const { deleted, locked, removed } = comment || {}; + const isThreadClosed = deleted || locked || removed; + const [showForm, setShowForm] = useState(false); const isInPostPage = isPostPageView(useLocation().pathname, useParams()); return ( <>
- [ - - ] + {isThreadClosed ? ( +
+ Thread closed. +
+ You may not reply at this time. +
+ ) : ( +
+ [ + + ] +
+ )}
+ {isThreadClosed ? ( +
+ Thread closed. +
+ You may not reply at this time. +
+ ) : ( + + )}
); diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index 3037f775..8c59eeac 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -336,7 +336,7 @@ const PostMobile = ({ post, roles, showAllReplies }: PostProps) => { {replyCount > 0 && `${replyCount} Replies`} {linkCount > 0 && ` / ${linkCount} Links`} - + {t('view_thread')} From 3fe6582d9be326576238c56018721fb6af774f05 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Mon, 8 Apr 2024 18:09:25 +0200 Subject: [PATCH 09/16] Update board-nav.tsx --- src/components/board-nav/board-nav.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/board-nav/board-nav.tsx b/src/components/board-nav/board-nav.tsx index 3c7dd92f..1add82aa 100644 --- a/src/components/board-nav/board-nav.tsx +++ b/src/components/board-nav/board-nav.tsx @@ -1,10 +1,9 @@ -import { Link, useNavigate } from 'react-router-dom'; +import { Link, useNavigate, useParams } from 'react-router-dom'; import { useTranslation } from 'react-i18next'; import { Subplebbit } from '@plebbit/plebbit-react-hooks'; import styles from './board-nav.module.css'; interface BoardNavProps { - address?: string | undefined; subplebbits: (Subplebbit | undefined)[]; currentSubplebbit?: string | undefined; } @@ -77,7 +76,8 @@ const BoardNavMobile = ({ subplebbits, currentSubplebbit }: BoardNavProps) => { ); }; -const BoardNav = ({ address, subplebbits }: BoardNavProps) => { +const BoardNav = ({ subplebbits }: BoardNavProps) => { + const { subplebbitAddress: address } = useParams(); return ( <> From 242b5faba332d96a8dc5dbe0ace69a0109fdcaa0 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Mon, 8 Apr 2024 18:17:20 +0200 Subject: [PATCH 10/16] add padding to mobile footer --- src/views/subplebbit/subplebbit.module.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/views/subplebbit/subplebbit.module.css b/src/views/subplebbit/subplebbit.module.css index bfa36082..438b3325 100644 --- a/src/views/subplebbit/subplebbit.module.css +++ b/src/views/subplebbit/subplebbit.module.css @@ -1,3 +1,9 @@ .footer { padding-top: 10px; } + +@media (max-width: 768px) { + .footer { + padding-left: 5px; + } +} \ No newline at end of file From 5838fa73885009fff518c26afc4f9f62b2ade750 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Mon, 8 Apr 2024 18:21:42 +0200 Subject: [PATCH 11/16] style: remove hover to mobile buttons --- src/components/board-nav/board-nav.module.css | 5 ----- src/index.css | 5 ----- src/themes.css | 4 ---- 3 files changed, 14 deletions(-) diff --git a/src/components/board-nav/board-nav.module.css b/src/components/board-nav/board-nav.module.css index a44ffacf..dfce3483 100644 --- a/src/components/board-nav/board-nav.module.css +++ b/src/components/board-nav/board-nav.module.css @@ -33,11 +33,6 @@ text-decoration: var(--button-text-decoration-mobile); } -.boardNavMobile .pageJump a:hover { - color: var(--button-text-color-hover-mobile); - text-decoration: var(--button-text-decoration-hover-mobile); -} - .boardNavMobile strong { text-transform: capitalize; padding-right: 5px; diff --git a/src/index.css b/src/index.css index cf18ea6e..6bac7beb 100644 --- a/src/index.css +++ b/src/index.css @@ -38,11 +38,6 @@ hr { user-select: none; display: inline-block; } - - .button:hover { - color: var(--button-text-color-hover-mobile); - cursor: pointer; - } } @media (min-width: 640px) { diff --git a/src/themes.css b/src/themes.css index 057b3e43..4060e757 100644 --- a/src/themes.css +++ b/src/themes.css @@ -277,8 +277,6 @@ --button-background-color-mobile: none; --button-border-mobile: none; --button-text-decoration-mobile: underline; - --button-text-color-hover-mobile: red; - --button-text-decoration-hover-mobile: underline; /* footer */ --footer-item-background-color-desktop: #fed; @@ -389,8 +387,6 @@ --button-background-image-mobile: url("/public/assets/buttons/button-fade-blue.png"); --button-background-color-mobile: #d6daf0; --button-border-mobile: 1px solid #b7c5d9; - --button-text-color-hover-mobile: red; - --button-text-decoration-hover-mobile: underline; /* footer */ --footer-item-background-color-desktop: #eef2ff; From cd49f22a5b32e8c2da4fac7ee8cd58c7d96fbdf4 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Mon, 8 Apr 2024 18:26:16 +0200 Subject: [PATCH 12/16] style: update futaba mobile buttons --- src/themes.css | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/src/themes.css b/src/themes.css index 4060e757..979a7391 100644 --- a/src/themes.css +++ b/src/themes.css @@ -270,13 +270,12 @@ --button-text-decoration: underline; /* mobile buttons */ - --button-font-size-mobile: 12pt; - --button-font-weight-mobile: unset; - --button-text-color-mobile: #00e; - --button-background-image-mobile: none; - --button-background-color-mobile: none; - --button-border-mobile: none; - --button-text-decoration-mobile: underline; + --button-font-size-mobile: 11pt; + --button-font-weight-mobile: 700; + --button-text-color-mobile: #800; + --button-background-image-mobile: url("/public/assets/buttons/button-fade.png"); + --button-background-color-mobile: #f0e0d6; + --button-border-mobile: 1px solid #c0a69d; /* footer */ --footer-item-background-color-desktop: #fed; From abe667b8f14fb977c2f8909c8226f0170ca9e0e9 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Mon, 8 Apr 2024 18:30:17 +0200 Subject: [PATCH 13/16] style(board stats): adjust font size for each theme --- .../board-stats/board-stats.module.css | 2 +- src/themes.css | 50 +++++++++++++------ 2 files changed, 35 insertions(+), 17 deletions(-) diff --git a/src/components/board-stats/board-stats.module.css b/src/components/board-stats/board-stats.module.css index 3b2c8cbd..3bbe422d 100644 --- a/src/components/board-stats/board-stats.module.css +++ b/src/components/board-stats/board-stats.module.css @@ -20,7 +20,7 @@ } .blotter tr { - font-size: 11px; + font-size: var(--stats-font-size); } .blotter tfoot { diff --git a/src/themes.css b/src/themes.css index 979a7391..9267c7ac 100644 --- a/src/themes.css +++ b/src/themes.css @@ -103,6 +103,10 @@ /* post capcodes */ --post-capcode-mod-text-color: purple; + /* post form */ + --post-form-toggle-font-size: 22px; + --post-form-toggle-font-weight: 700; + /* quotelink */ --post-quotelink-text-color: navy; --post-quotelink-text-color-hover: red; @@ -114,9 +118,8 @@ --reply-desktop-background-color: #f0e0d6; --reply-desktop-border: 1px solid #d9bfb7; - /* post form */ - --post-form-toggle-font-size: 22px; - --post-form-toggle-font-weight: 700; + /* stats */ + --stats-font-size: 11px; } :root .yotsuba-b { @@ -224,6 +227,10 @@ /* post capcodes */ --post-capcode-mod-text-color: purple; + /* post form */ + --post-form-toggle-font-size: 22px; + --post-form-toggle-font-weight: 700; + /* quotelink */ --post-quotelink-text-color: #d00; --post-quotelink-text-color-hover: #d00; @@ -235,9 +242,8 @@ --reply-desktop-background-color: #d6daf0; --reply-desktop-border: 1px solid #b7c5d9; - /* post form */ - --post-form-toggle-font-size: 22px; - --post-form-toggle-font-weight: 700; + /* stats */ + --stats-font-size: 11px; } :root .futaba { @@ -320,6 +326,10 @@ /* post capcodes */ --post-capcode-mod-text-color: purple; + /* post form */ + --post-form-toggle-font-size: 22px; + --post-form-toggle-font-weight: 700; + /* quotelink */ --post-quotelink-text-color: navy; --post-quotelink-text-color-hover: red; @@ -331,9 +341,8 @@ --reply-desktop-background-color: #f0e0d6; --reply-desktop-border: 1px solid #d9bfb7; - /* post form */ - --post-form-toggle-font-size: 22px; - --post-form-toggle-font-weight: 700; + /* stats */ + --stats-font-size: 10pt; } :root .burichan { @@ -429,6 +438,10 @@ /* post capcodes */ --post-capcode-mod-text-color: purple; + + /* post form */ + --post-form-toggle-font-size: 22px; + --post-form-toggle-font-weight: 700; /* quotelink */ --post-quotelink-text-color: #d00; @@ -440,10 +453,9 @@ --side-arrows-color: #b7c5d9; --reply-desktop-background-color: #d6daf0; --reply-desktop-border: 1px solid #b7c5d9; - - /* post form */ - --post-form-toggle-font-size: 22px; - --post-form-toggle-font-weight: 700; + + /* stats */ + --stats-font-size: 10pt; } :root .tomorrow { @@ -561,6 +573,9 @@ --select-border: 1px solid #575a60; --select-background-color: #282a2e; --select-color: #c5c8c6; + + /* stats */ + --stats-font-size: 11px; } :root .photon { @@ -648,6 +663,10 @@ /* post capcodes */ --post-capcode-mod-text-color: #f60; + /* post form */ + --post-form-toggle-font-size: 22px; + --post-form-toggle-font-weight: 700; + /* quotelink */ --post-quotelink-text-color: #f60; --post-quotelink-text-color-hover: #f30; @@ -659,7 +678,6 @@ --reply-desktop-background-color: #ddd; --reply-desktop-border: 1px solid #ccc; - /* post form */ - --post-form-toggle-font-size: 22px; - --post-form-toggle-font-weight: 700; + /* stats */ + --stats-font-size: 11px; } From 7ab2ffc3c2065c6211230fc8ee9f3814cd158368 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Mon, 8 Apr 2024 18:36:51 +0200 Subject: [PATCH 14/16] chore(translations): thread closed, may not reply --- public/translations/ar/default.json | 4 +++- public/translations/bn/default.json | 4 +++- public/translations/cs/default.json | 4 +++- public/translations/da/default.json | 4 +++- public/translations/de/default.json | 4 +++- public/translations/el/default.json | 4 +++- public/translations/en/default.json | 4 +++- public/translations/es/default.json | 4 +++- public/translations/fa/default.json | 4 +++- public/translations/fi/default.json | 4 +++- public/translations/fil/default.json | 4 +++- public/translations/fr/default.json | 4 +++- public/translations/he/default.json | 4 +++- public/translations/hi/default.json | 4 +++- public/translations/hu/default.json | 4 +++- public/translations/id/default.json | 4 +++- public/translations/it/default.json | 4 +++- public/translations/ja/default.json | 4 +++- public/translations/ko/default.json | 4 +++- public/translations/mr/default.json | 4 +++- public/translations/nl/default.json | 4 +++- public/translations/no/default.json | 4 +++- public/translations/pl/default.json | 4 +++- public/translations/pt/default.json | 4 +++- public/translations/ro/default.json | 4 +++- public/translations/ru/default.json | 4 +++- public/translations/sq/default.json | 4 +++- public/translations/sv/default.json | 4 +++- public/translations/te/default.json | 4 +++- public/translations/th/default.json | 4 +++- public/translations/tr/default.json | 4 +++- public/translations/uk/default.json | 4 +++- public/translations/ur/default.json | 4 +++- public/translations/vi/default.json | 4 +++- public/translations/zh/default.json | 4 +++- src/components/post-form/post-form.tsx | 4 ++-- 36 files changed, 107 insertions(+), 37 deletions(-) diff --git a/public/translations/ar/default.json b/public/translations/ar/default.json index e657ac86..225b392c 100644 --- a/public/translations/ar/default.json +++ b/public/translations/ar/default.json @@ -41,5 +41,7 @@ "view_thread": "عرض الموضوع", "return": "العودة", "bottom": "القاع", - "top": "أعلى" + "top": "أعلى", + "thread_closed": "تم إغلاق الموضوع.", + "may_not_reply": "قد لا تتم الرد في هذا الوقت." } \ No newline at end of file diff --git a/public/translations/bn/default.json b/public/translations/bn/default.json index 6049073d..2c536702 100644 --- a/public/translations/bn/default.json +++ b/public/translations/bn/default.json @@ -41,5 +41,7 @@ "view_thread": "থ্রেড দেখুন", "return": "ফিরে যাও", "bottom": "নীচে", - "top": "শীর্ষ" + "top": "শীর্ষ", + "thread_closed": "থ্রেড বন্ধ হয়েছে।", + "may_not_reply": "এই সময়ে আপনি প্রতিক্রিয়া দিতে পারবেন না।" } \ No newline at end of file diff --git a/public/translations/cs/default.json b/public/translations/cs/default.json index bff7b61e..aa4aba26 100644 --- a/public/translations/cs/default.json +++ b/public/translations/cs/default.json @@ -41,5 +41,7 @@ "view_thread": "Zobrazit Vlákno", "return": "Návrat", "bottom": "Dno", - "top": "Nahoře" + "top": "Nahoře", + "thread_closed": "Vlákno uzavřeno.", + "may_not_reply": "V tuto chvíli nemůžete odpovědět." } \ No newline at end of file diff --git a/public/translations/da/default.json b/public/translations/da/default.json index e7bed500..d938740e 100644 --- a/public/translations/da/default.json +++ b/public/translations/da/default.json @@ -41,5 +41,7 @@ "view_thread": "Vis Tråd", "return": "Vende tilbage", "bottom": "Bund", - "top": "Top" + "top": "Top", + "thread_closed": "Tråd lukket.", + "may_not_reply": "Du kan muligvis ikke svare på dette tidspunkt." } \ No newline at end of file diff --git a/public/translations/de/default.json b/public/translations/de/default.json index bc4d8b25..758da2a8 100644 --- a/public/translations/de/default.json +++ b/public/translations/de/default.json @@ -41,5 +41,7 @@ "view_thread": "Thread Anzeigen", "return": "Zurück", "bottom": "Unten", - "top": "Oben" + "top": "Oben", + "thread_closed": "Thread geschlossen.", + "may_not_reply": "Sie können möglicherweise zu diesem Zeitpunkt nicht antworten." } \ No newline at end of file diff --git a/public/translations/el/default.json b/public/translations/el/default.json index 29f4b050..c12d8315 100644 --- a/public/translations/el/default.json +++ b/public/translations/el/default.json @@ -41,5 +41,7 @@ "view_thread": "Προβολή Νήματος", "return": "Επιστροφή", "bottom": "Κάτω", - "top": "Κορυφή" + "top": "Κορυφή", + "thread_closed": "Το νήμα έκλεισε.", + "may_not_reply": "Μπορεί να μην μπορείτε να απαντήσετε αυτή τη στιγμή." } \ No newline at end of file diff --git a/public/translations/en/default.json b/public/translations/en/default.json index fa77a86f..aa86c8e3 100644 --- a/public/translations/en/default.json +++ b/public/translations/en/default.json @@ -41,5 +41,7 @@ "view_thread": "View Thread", "return": "Return", "bottom": "Bottom", - "top": "Top" + "top": "Top", + "thread_closed": "Thread closed.", + "may_not_reply": "You may not reply at this time." } \ No newline at end of file diff --git a/public/translations/es/default.json b/public/translations/es/default.json index c61c2e18..f7194152 100644 --- a/public/translations/es/default.json +++ b/public/translations/es/default.json @@ -41,5 +41,7 @@ "view_thread": "Ver Hilo", "return": "Regresar", "bottom": "Fondo", - "top": "Arriba" + "top": "Arriba", + "thread_closed": "Hilo cerrado.", + "may_not_reply": "Es posible que no puedas responder en este momento." } \ No newline at end of file diff --git a/public/translations/fa/default.json b/public/translations/fa/default.json index 5a3b2a27..bee44ae5 100644 --- a/public/translations/fa/default.json +++ b/public/translations/fa/default.json @@ -41,5 +41,7 @@ "view_thread": "مشاهده نخ", "return": "برگشت", "bottom": "پایین", - "top": "بالا" + "top": "بالا", + "thread_closed": "موضوع بسته شده است.", + "may_not_reply": "شما ممکن است در این زمان پاسخ ندهید." } \ No newline at end of file diff --git a/public/translations/fi/default.json b/public/translations/fi/default.json index 6bb570f7..325d2bcf 100644 --- a/public/translations/fi/default.json +++ b/public/translations/fi/default.json @@ -41,5 +41,7 @@ "view_thread": "Näytä Ketju", "return": "Palata", "bottom": "Pohja", - "top": "Ylös" + "top": "Ylös", + "thread_closed": "Keskustelu suljettu.", + "may_not_reply": "Et ehkä voi vastata tällä hetkellä." } \ No newline at end of file diff --git a/public/translations/fil/default.json b/public/translations/fil/default.json index cf601990..c66a66ab 100644 --- a/public/translations/fil/default.json +++ b/public/translations/fil/default.json @@ -41,5 +41,7 @@ "view_thread": "Tingnan ang Thread", "return": "Bumalik", "bottom": "Ilalim", - "top": "Itaas" + "top": "Itaas", + "thread_closed": "Thread na isara.", + "may_not_reply": "Hindi ka maaaring mag-reply sa oras na ito." } \ No newline at end of file diff --git a/public/translations/fr/default.json b/public/translations/fr/default.json index 623d33ab..3fe4af87 100644 --- a/public/translations/fr/default.json +++ b/public/translations/fr/default.json @@ -41,5 +41,7 @@ "view_thread": "Voir le Fil", "return": "Retour", "bottom": "Bas", - "top": "Haut" + "top": "Haut", + "thread_closed": "Fil fermé.", + "may_not_reply": "Vous ne pouvez peut-être pas répondre en ce moment." } \ No newline at end of file diff --git a/public/translations/he/default.json b/public/translations/he/default.json index 1e332521..3a47a2bb 100644 --- a/public/translations/he/default.json +++ b/public/translations/he/default.json @@ -41,5 +41,7 @@ "view_thread": "הצג אשכול", "return": "חזור", "bottom": "תחתית", - "top": "עליון" + "top": "עליון", + "thread_closed": "השרשור נסגר.", + "may_not_reply": "אולי אינך יכול להגיב כרגע." } \ No newline at end of file diff --git a/public/translations/hi/default.json b/public/translations/hi/default.json index fd03763d..6605f58a 100644 --- a/public/translations/hi/default.json +++ b/public/translations/hi/default.json @@ -41,5 +41,7 @@ "view_thread": "थ्रेड देखें", "return": "वापस", "bottom": "नीचे", - "top": "ऊपर" + "top": "ऊपर", + "thread_closed": "थ्रेड बंद हो गया।", + "may_not_reply": "इस समय आप जवाब नहीं दे सकते।" } \ No newline at end of file diff --git a/public/translations/hu/default.json b/public/translations/hu/default.json index f7c557eb..f7efcbf8 100644 --- a/public/translations/hu/default.json +++ b/public/translations/hu/default.json @@ -41,5 +41,7 @@ "view_thread": "Téma Megtekintése", "return": "Visszatérés", "bottom": "Alja", - "top": "Felső" + "top": "Felső", + "thread_closed": "A téma lezárult.", + "may_not_reply": "Jelenleg nem válaszolhatsz erre." } \ No newline at end of file diff --git a/public/translations/id/default.json b/public/translations/id/default.json index 3303e68e..bca2be74 100644 --- a/public/translations/id/default.json +++ b/public/translations/id/default.json @@ -41,5 +41,7 @@ "view_thread": "Lihat Thread", "return": "Kembali", "bottom": "Bawah", - "top": "Atas" + "top": "Atas", + "thread_closed": "Benang ditutup.", + "may_not_reply": "Anda mungkin tidak bisa membalas pada saat ini." } \ No newline at end of file diff --git a/public/translations/it/default.json b/public/translations/it/default.json index d0ac4034..25ce98a1 100644 --- a/public/translations/it/default.json +++ b/public/translations/it/default.json @@ -41,5 +41,7 @@ "view_thread": "Visualizza Thread", "return": "Indietro", "bottom": "Vai sotto", - "top": "Vai sopra" + "top": "Vai sopra", + "thread_closed": "Thread chiuso.", + "may_not_reply": "Non puoi rispondere in questo momento." } \ No newline at end of file diff --git a/public/translations/ja/default.json b/public/translations/ja/default.json index 4b57976e..7ebf272c 100644 --- a/public/translations/ja/default.json +++ b/public/translations/ja/default.json @@ -41,5 +41,7 @@ "view_thread": "スレッドを見る", "return": "戻る", "bottom": "下へ", - "top": "上へ" + "top": "上へ", + "thread_closed": "スレッドが閉じられました。", + "may_not_reply": "現在、返信することはできません。" } \ No newline at end of file diff --git a/public/translations/ko/default.json b/public/translations/ko/default.json index c949a246..98f8d959 100644 --- a/public/translations/ko/default.json +++ b/public/translations/ko/default.json @@ -41,5 +41,7 @@ "view_thread": "스레드 보기", "return": "돌아 가기", "bottom": "하단", - "top": "맨 위로" + "top": "맨 위로", + "thread_closed": "스레드가 닫혔습니다.", + "may_not_reply": "현재 시간에는 답글을 달 수 없습니다." } \ No newline at end of file diff --git a/public/translations/mr/default.json b/public/translations/mr/default.json index 0fdd4dfb..ae2f7099 100644 --- a/public/translations/mr/default.json +++ b/public/translations/mr/default.json @@ -41,5 +41,7 @@ "view_thread": "थ्रेड पहा", "return": "परत जा", "bottom": "खाली", - "top": "वर" + "top": "वर", + "thread_closed": "सूत्र बंद झाला.", + "may_not_reply": "हा वेळ उत्तर देण्यास शक्य नाही." } \ No newline at end of file diff --git a/public/translations/nl/default.json b/public/translations/nl/default.json index fac554be..964b59a0 100644 --- a/public/translations/nl/default.json +++ b/public/translations/nl/default.json @@ -41,5 +41,7 @@ "view_thread": "Bekijk Thread", "return": "Terugkeer", "bottom": "Onderkant", - "top": "Boven" + "top": "Boven", + "thread_closed": "Thread gesloten.", + "may_not_reply": "U kunt op dit moment mogelijk niet antwoorden." } \ No newline at end of file diff --git a/public/translations/no/default.json b/public/translations/no/default.json index f2e8eb45..7caec07a 100644 --- a/public/translations/no/default.json +++ b/public/translations/no/default.json @@ -41,5 +41,7 @@ "view_thread": "Vis Tråd", "return": "Retur", "bottom": "Bunnen", - "top": "Topp" + "top": "Topp", + "thread_closed": "Tråd stengt.", + "may_not_reply": "Du kan kanskje ikke svare på dette tidspunktet." } \ No newline at end of file diff --git a/public/translations/pl/default.json b/public/translations/pl/default.json index 426226ba..98331749 100644 --- a/public/translations/pl/default.json +++ b/public/translations/pl/default.json @@ -41,5 +41,7 @@ "view_thread": "Zobacz Wątek", "return": "Powrót", "bottom": "Dół", - "top": "Góra" + "top": "Góra", + "thread_closed": "Wątek zamknięty.", + "may_not_reply": "Może nie możesz teraz odpowiedzieć." } \ No newline at end of file diff --git a/public/translations/pt/default.json b/public/translations/pt/default.json index 21440f40..59ad1933 100644 --- a/public/translations/pt/default.json +++ b/public/translations/pt/default.json @@ -41,5 +41,7 @@ "view_thread": "Ver Tópico", "return": "Retorno", "bottom": "Fundo", - "top": "Topo" + "top": "Topo", + "thread_closed": "Tópico fechado.", + "may_not_reply": "Você pode não conseguir responder neste momento." } \ No newline at end of file diff --git a/public/translations/ro/default.json b/public/translations/ro/default.json index 7ab0c092..794ac3b4 100644 --- a/public/translations/ro/default.json +++ b/public/translations/ro/default.json @@ -41,5 +41,7 @@ "view_thread": "Vizualizați Firul", "return": "Întoarcere", "bottom": "Partea de jos", - "top": "Sus" + "top": "Sus", + "thread_closed": "Thread închis.", + "may_not_reply": "Poate că nu puteți răspunde în acest moment." } \ No newline at end of file diff --git a/public/translations/ru/default.json b/public/translations/ru/default.json index c9895b2b..8d08b070 100644 --- a/public/translations/ru/default.json +++ b/public/translations/ru/default.json @@ -41,5 +41,7 @@ "view_thread": "Посмотреть Тему", "return": "Возвращение", "bottom": "Низ", - "top": "Верх" + "top": "Верх", + "thread_closed": "Тема закрыта.", + "may_not_reply": "Вы можете не ответить в это время." } \ No newline at end of file diff --git a/public/translations/sq/default.json b/public/translations/sq/default.json index a77aa0e2..e4040e8f 100644 --- a/public/translations/sq/default.json +++ b/public/translations/sq/default.json @@ -41,5 +41,7 @@ "view_thread": "Shiko Thread", "return": "Kthimi", "bottom": "Fund", - "top": "Sipër" + "top": "Sipër", + "thread_closed": "Fjala është e mbyllur.", + "may_not_reply": "Nuk mund të përgjigjeni në këtë kohë." } \ No newline at end of file diff --git a/public/translations/sv/default.json b/public/translations/sv/default.json index 8448bffb..cfb8bea0 100644 --- a/public/translations/sv/default.json +++ b/public/translations/sv/default.json @@ -41,5 +41,7 @@ "view_thread": "Visa Tråd", "return": "Återgång", "bottom": "Botten", - "top": "Topp" + "top": "Topp", + "thread_closed": "Tråd stängd.", + "may_not_reply": "Du kanske inte kan svara vid den här tiden." } \ No newline at end of file diff --git a/public/translations/te/default.json b/public/translations/te/default.json index 5b8478dd..de863122 100644 --- a/public/translations/te/default.json +++ b/public/translations/te/default.json @@ -41,5 +41,7 @@ "view_thread": "థ్రెడ్‌ను చూడండి", "return": "రిటర్న్", "bottom": "కిందకు", - "top": "మేలే" + "top": "మేలే", + "thread_closed": "థ్రెడ్ మూసివేయబడింది.", + "may_not_reply": "ఈ సమయంలో మీరు ప్రతిసారం ఇవ్వలేరు." } \ No newline at end of file diff --git a/public/translations/th/default.json b/public/translations/th/default.json index 0ea95319..a90cb086 100644 --- a/public/translations/th/default.json +++ b/public/translations/th/default.json @@ -41,5 +41,7 @@ "view_thread": "ดูกระทู้", "return": "กลับ", "bottom": "ด้านล่าง", - "top": "ด้านบน" + "top": "ด้านบน", + "thread_closed": "เธรดถูกปิด", + "may_not_reply": "คุณอาจไม่สามารถตอบกลับได้ในขณะนี้" } \ No newline at end of file diff --git a/public/translations/tr/default.json b/public/translations/tr/default.json index 08f99d53..660c1ac5 100644 --- a/public/translations/tr/default.json +++ b/public/translations/tr/default.json @@ -41,5 +41,7 @@ "view_thread": "Konuyu Görüntüle", "return": "Dönüş", "bottom": "Alt", - "top": "Üst" + "top": "Üst", + "thread_closed": "Konu kapatıldı.", + "may_not_reply": "Şu anda cevap veremeyebilirsiniz." } \ No newline at end of file diff --git a/public/translations/uk/default.json b/public/translations/uk/default.json index 554cb5bb..c296514f 100644 --- a/public/translations/uk/default.json +++ b/public/translations/uk/default.json @@ -41,5 +41,7 @@ "view_thread": "Переглянути Тему", "return": "Повернення", "bottom": "Низ", - "top": "Верхній" + "top": "Верхній", + "thread_closed": "Тема закрита.", + "may_not_reply": "Можливо, ви не зможете відповісти зараз." } \ No newline at end of file diff --git a/public/translations/ur/default.json b/public/translations/ur/default.json index c689bac9..59de43bc 100644 --- a/public/translations/ur/default.json +++ b/public/translations/ur/default.json @@ -41,5 +41,7 @@ "view_thread": "تھریڈ دیکھیں", "return": "واپس", "bottom": "نیچے", - "top": "اوپر" + "top": "اوپر", + "thread_closed": "موضوع بند کر دیا گیا ہے۔", + "may_not_reply": "آپ اس وقت جواب نہیں دے سکتے۔" } \ No newline at end of file diff --git a/public/translations/vi/default.json b/public/translations/vi/default.json index 663747fd..96a15bc4 100644 --- a/public/translations/vi/default.json +++ b/public/translations/vi/default.json @@ -41,5 +41,7 @@ "view_thread": "Xem Chủ Đề", "return": "Trở lại", "bottom": "Đáy", - "top": "Đầu" + "top": "Đầu", + "thread_closed": "Chủ đề đã đóng.", + "may_not_reply": "Bạn có thể không thể trả lời vào thời điểm này." } \ No newline at end of file diff --git a/public/translations/zh/default.json b/public/translations/zh/default.json index 940df1d9..0aa3a114 100644 --- a/public/translations/zh/default.json +++ b/public/translations/zh/default.json @@ -41,5 +41,7 @@ "view_thread": "查看线程", "return": "返回", "bottom": "底部", - "top": "顶部" + "top": "顶部", + "thread_closed": "主题已关闭。", + "may_not_reply": "您现在可能无法回复。" } \ No newline at end of file diff --git a/src/components/post-form/post-form.tsx b/src/components/post-form/post-form.tsx index f8e55ab3..841d8f07 100644 --- a/src/components/post-form/post-form.tsx +++ b/src/components/post-form/post-form.tsx @@ -27,9 +27,9 @@ const PostForm = () => {
{isThreadClosed ? (
- Thread closed. + {t('thread_closed')}
- You may not reply at this time. + {t('may_not_reply')}
) : (
From 0a52944a07d0dff523f4e35704e4bd235e284e73 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Mon, 8 Apr 2024 19:34:09 +0200 Subject: [PATCH 15/16] feat(media): add support for audio links --- src/components/media/media.tsx | 29 ++++++++++++++++++++--------- src/components/post/post.tsx | 4 ++-- src/lib/utils/media-utils.ts | 1 + 3 files changed, 23 insertions(+), 11 deletions(-) diff --git a/src/components/media/media.tsx b/src/components/media/media.tsx index cdffeb1a..79fbb8fc 100644 --- a/src/components/media/media.tsx +++ b/src/components/media/media.tsx @@ -1,4 +1,4 @@ -import React, { useState } from 'react'; +import React from 'react'; import styles from './media.module.css'; import { CommentMediaInfo } from '../../lib/utils/media-utils'; import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame'; @@ -34,7 +34,7 @@ const ThumbnailSmall = ({ style, children, thumbnailSmallPadding }: ThumbnailPro ); -const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth }: MediaProps) => { +const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth, setShowThumbnail }: MediaProps) => { let displayWidth, displayHeight; const maxThumbnailSize = isMobile || isReply ? 125 : 250; if (linkWidth && linkHeight) { @@ -46,19 +46,30 @@ const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth displayHeight = `${maxThumbnailSize}px`; } + if (commentMediaInfo?.type === 'audio') { + displayWidth = '250px'; + displayHeight = '75px'; + } + let mediaComponent: React.ReactNode = null; const iframeThumbnail = commentMediaInfo?.patternThumbnailUrl || commentMediaInfo?.thumbnail; const gifFrameUrl = useFetchGifFirstFrame(commentMediaInfo?.type === 'gif' ? commentMediaInfo.url : undefined); if (commentMediaInfo?.type === 'image') { - mediaComponent = ; + mediaComponent = setShowThumbnail(false)} />; } else if (commentMediaInfo?.type === 'video') { - mediaComponent = commentMediaInfo.thumbnail ? :