@@ -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-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/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 (
<>
diff --git a/src/components/board-stats/board-stats.module.css b/src/components/board-stats/board-stats.module.css
index ed05ae50..3bbe422d 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;
@@ -12,7 +20,7 @@
}
.blotter tr {
- font-size: 11px;
+ font-size: var(--stats-font-size);
}
.blotter tfoot {
diff --git a/src/components/board-stats/board-stats.tsx b/src/components/board-stats/board-stats.tsx
index 61302d82..87b713c0 100644
--- a/src/components/board-stats/board-stats.tsx
+++ b/src/components/board-stats/board-stats.tsx
@@ -1,15 +1,26 @@
import { useState } from 'react';
-import { useSubplebbitStats } from '@plebbit/plebbit-react-hooks';
+import { useLocation, 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';
+import { isDescriptionView, isRulesView } from '../../lib/utils/view-utils';
-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 location = useLocation();
+ const params = useParams();
+ const isInDescriptionView = isDescriptionView(location.pathname, params);
+ const isInRulesView = isRulesView(location.pathname, params);
+
+ const comment = useComment({ commentCid });
+ const { deleted, locked, removed } = comment || {};
+ const hideStats = deleted || locked || removed || isInDescriptionView || isInRulesView;
+
const stats = useSubplebbitStats({ subplebbitAddress: address });
const [showStats, setShowStats] = useState(true);
@@ -22,7 +33,7 @@ const BoardStats = ({ address, createdAt }: BoardStatsProps) => {
};
return (
-
+
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 ? 
: ;
+ mediaComponent = commentMediaInfo.thumbnail ? (
+
+ ) : (
+