diff --git a/src/components/comment-media/comment-media.module.css b/src/components/comment-media/comment-media.module.css
index be69e7cf..dc952788 100644
--- a/src/components/comment-media/comment-media.module.css
+++ b/src/components/comment-media/comment-media.module.css
@@ -18,6 +18,17 @@
display: inline-block;
}
+.spoiler {
+ display: inline-block;
+ margin: 3px 20px 5px 20px;
+ background-color: black;
+ color: white;
+ display: flex;
+ cursor: pointer;
+ justify-content: center;
+ align-items: center;
+}
+
@media (max-width: 640px) {
.subplebbitAvatar {
max-width: 125px;
@@ -52,6 +63,10 @@
float: left;
}
+.thumbnail video {
+ cursor: pointer;
+}
+
.hide {
display: none !important;
}
diff --git a/src/components/comment-media/comment-media.tsx b/src/components/comment-media/comment-media.tsx
index 031b7074..caa8715b 100644
--- a/src/components/comment-media/comment-media.tsx
+++ b/src/components/comment-media/comment-media.tsx
@@ -1,5 +1,6 @@
import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
+import { Comment } from '@plebbit/plebbit-react-hooks';
import styles from './comment-media.module.css';
import { CommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail } from '../../lib/utils/media-utils';
import { getHostname } from '../../lib/utils/url-utils';
@@ -9,16 +10,22 @@ import Embed, { canEmbed } from '../embed';
interface MediaProps {
commentMediaInfo?: CommentMediaInfo;
- isDeleted?: boolean;
- isOutOfFeed?: boolean; // virtuoso wrapper unneeded
- isReply: boolean;
+ post?: Comment;
+ isReply?: boolean;
linkHeight?: number;
linkWidth?: number;
showThumbnail?: boolean;
setShowThumbnail: (showThumbnail: boolean) => void;
}
-const Thumbnail = ({ commentMediaInfo, isDeleted, isOutOfFeed, isReply, linkHeight, linkWidth, setShowThumbnail }: MediaProps) => {
+const Thumbnail = ({ commentMediaInfo, post, setShowThumbnail }: MediaProps) => {
+ const { t } = useTranslation();
+ const { deleted, linkHeight, linkWidth, parentCid, removed, spoiler } = post || {};
+ const { isDescription, isRules } = post || {}; // custom properties, not from api
+ const isOutOfFeed = isDescription || isRules; // virtuoso wrapper unneeded
+ const isReply = parentCid;
+ const isDeleted = deleted || removed;
+
const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {};
const [hasError, setHasError] = useState(false);
const handleError = () => setHasError(true);
@@ -72,6 +79,10 @@ const Thumbnail = ({ commentMediaInfo, isDeleted, isOutOfFeed, isReply, linkHeig
return hasError || isDeleted ? (
+ ) : spoiler ? (
+ setShowThumbnail(false)}>
+ [{t('view_spoiler')}]
+
) : isOutOfFeed ? (
{thumbnailComponent}
) : isMobile || isReply ? (
@@ -133,7 +144,7 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
);
};
-const CommentMedia = ({ commentMediaInfo, isDeleted, isOutOfFeed, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => {
+const CommentMedia = ({ commentMediaInfo, post, showThumbnail, setShowThumbnail }: MediaProps) => {
const { t } = useTranslation();
const isMobile = useIsMobile();
const { type, url } = commentMediaInfo || {};
@@ -141,21 +152,10 @@ const CommentMedia = ({ commentMediaInfo, isDeleted, isOutOfFeed, isReply, linkH
return (
- {url && (
-