diff --git a/src/components/expand-button/expand-button.module.css b/src/components/expand-button/expand-button.module.css new file mode 100644 index 00000000..307d2383 --- /dev/null +++ b/src/components/expand-button/expand-button.module.css @@ -0,0 +1,36 @@ +.buttonWrapper { + padding: 2px 5px 2px 0; + float: left; + cursor: pointer; +} + +.buttonCommon { + background-size: cover; + height: 23px; + width: 23px; + display: block; +} + +.textButton { + background-image: var(--text-button); +} + +.textButton:hover { + background-image: var(--text-button-hover); +} + +.playButton { + background-image: var(--play-button); +} + +.playButton:hover { + background-image: var(--play-button-hover); +} + +.closeButton { + background-image: var(--close-button); +} + +.closeButton:hover { + background-image: var(--close-button-hover); +} \ No newline at end of file diff --git a/src/components/expand-button/expand-button.tsx b/src/components/expand-button/expand-button.tsx new file mode 100644 index 00000000..6e73e2fc --- /dev/null +++ b/src/components/expand-button/expand-button.tsx @@ -0,0 +1,31 @@ +import { FC } from 'react'; +import { useComment } from '@plebbit/plebbit-react-hooks'; +import styles from './expand-button.module.css'; +import utils from '../../lib/utils'; + +interface ExpandButtonProps { + commentCid: string; + expanded: boolean; + hasThumbnail: boolean; + toggleExpanded: () => void; +} + +const ExpandButton: FC = ({ commentCid, expanded, hasThumbnail, toggleExpanded }) => { + const comment = useComment({ commentCid }); + const { content, link } = comment || {}; + const commentMediaInfo = utils.getCommentMediaInfoMemoized(comment); + + const initialButtonType = hasThumbnail || commentMediaInfo?.type === 'audio' || commentMediaInfo?.type === 'iframe' ? 'playButton' : 'textButton'; + + const buttonType = expanded ? 'closeButton' : initialButtonType; + + return ( + ((content && !link) || link) && ( +
+
+
+ ) + ); +}; + +export default ExpandButton; diff --git a/src/components/expand-button/index.ts b/src/components/expand-button/index.ts new file mode 100644 index 00000000..4169bf0a --- /dev/null +++ b/src/components/expand-button/index.ts @@ -0,0 +1 @@ +export {default} from './expand-button'; \ No newline at end of file diff --git a/src/components/expando/expando.module.css b/src/components/expando/expando.module.css new file mode 100644 index 00000000..06e5e3b5 --- /dev/null +++ b/src/components/expando/expando.module.css @@ -0,0 +1,44 @@ +.expandoHidden { + display: none; +} + +.expando { + display: block; + padding: 5px 0 5px 0; + clear: left; + position: relative; +} + +.usertext { + unicode-bidi: isolate; + font-size: small; +} + +.markdown { + background-color: var(--background-markdown); + border: 1px solid var(--text-primary); + border-radius: 7px; + padding: 5px 10px; + font-weight: 400; + color: var(--text-markdown); + max-width: 60em; + word-wrap: break-word; + font-size: 1em; +} + +.mediaPreview { + max-width: 354px; + overflow: auto; + position: relative; +} + +.mediaPreview img, .mediaPreview video { + width: 100%; + height: auto; +} + +.mediaPreview iframe { + width: 100%; + height: 100%; + border: none; +} \ No newline at end of file diff --git a/src/components/expando/expando.tsx b/src/components/expando/expando.tsx new file mode 100644 index 00000000..2ac276c8 --- /dev/null +++ b/src/components/expando/expando.tsx @@ -0,0 +1,67 @@ +import { FC } from 'react'; +import { useComment } from '@plebbit/plebbit-react-hooks'; +import utils from '../../lib/utils'; +import { Link } from 'react-router-dom'; +import styles from './expando.module.css'; +import Embed from '../embed'; + +interface ExpandoProps { + commentCid: string; + expanded: boolean; +} + +const Expando: FC = ({ commentCid, expanded }) => { + const comment = useComment({ commentCid }); + const { cid, content, link, subplebbitAddress } = comment || {}; + const commentMediaInfo = utils.getCommentMediaInfoMemoized(comment); + + return ( +
+ {link && ( +
+ e.preventDefault()}> + {commentMediaInfo?.type === 'image' && ( + thumbnail { + e.currentTarget.alt = ''; + }} + /> + )} + {commentMediaInfo?.type === 'video' && + (commentMediaInfo.thumbnail ? ( + thumbnail { + e.currentTarget.alt = ''; + }} + /> + ) : ( +
+ )} + {content && ( +
+
{content}
+
+ )} +
+ ); +}; + +export default Expando; diff --git a/src/components/expando/index.ts b/src/components/expando/index.ts new file mode 100644 index 00000000..716485d9 --- /dev/null +++ b/src/components/expando/index.ts @@ -0,0 +1 @@ +export {default} from './expando'; \ No newline at end of file diff --git a/src/components/feed-post/feed-post.module.css b/src/components/feed-post/feed-post.module.css index a162032d..444ab487 100644 --- a/src/components/feed-post/feed-post.module.css +++ b/src/components/feed-post/feed-post.module.css @@ -91,87 +91,4 @@ .tagline .subplebbit:hover { text-decoration: underline; -} - -.buttonWrapper { - padding: 2px 5px 2px 0; - float: left; - cursor: pointer; -} - -.buttonCommon { - background-size: cover; - height: 23px; - width: 23px; - display: block; -} - -.textButton { - background-image: var(--text-button); -} - -.textButton:hover { - background-image: var(--text-button-hover); -} - -.playButton { - background-image: var(--play-button); -} - -.playButton:hover { - background-image: var(--play-button-hover); -} - -.closeButton { - background-image: var(--close-button); -} - -.closeButton:hover { - background-image: var(--close-button-hover); -} - - -.expandoHidden { - display: none; -} - -.expando { - display: block; - padding: 5px 0 5px 0; - clear: left; - position: relative; -} - -.usertext { - unicode-bidi: isolate; - font-size: small; -} - -.markdown { - background-color: var(--background-markdown); - border: 1px solid var(--text-primary); - border-radius: 7px; - padding: 5px 10px; - font-weight: 400; - color: var(--text-markdown); - max-width: 60em; - word-wrap: break-word; - font-size: 1em; -} - -.mediaPreview { - max-width: 354px; - overflow: auto; - position: relative; -} - -.mediaPreview img, .mediaPreview video { - width: 100%; - height: auto; -} - -.mediaPreview iframe { - width: 100%; - height: 100%; - border: none; } \ No newline at end of file diff --git a/src/components/feed-post/feed-post.tsx b/src/components/feed-post/feed-post.tsx index 6c5670ff..8890cafe 100644 --- a/src/components/feed-post/feed-post.tsx +++ b/src/components/feed-post/feed-post.tsx @@ -4,7 +4,8 @@ import { Link } from 'react-router-dom'; import utils from '../../lib/utils'; import { Comment, useSubplebbit } from '@plebbit/plebbit-react-hooks'; import { useTranslation } from 'react-i18next'; -import Embed from '../embed'; +import ExpandButton from '../expand-button'; +import Expando from '../expando'; import Flair from '../flair'; import PostTools from '../post-tools'; import Thumbnail from '../thumbnail'; @@ -16,26 +17,15 @@ interface FeedPostProps { const FeedPost: FC = ({ post, index }) => { const { author, cid, content, downvoteCount, flair, link, subplebbitAddress, timestamp, title, upvoteCount } = post || {}; - const { t } = useTranslation(); - const [expandoVisible, setExpandoVisible] = useState(false); const subplebbit = useSubplebbit({ subplebbitAddress }); - const commentMediaInfo = utils.getCommentMediaInfoMemo(post); - const iframeThumbnail = commentMediaInfo?.patternThumbnailUrl || commentMediaInfo?.thumbnail; - const hasThumbnail = - link && - commentMediaInfo && - (commentMediaInfo.type === 'image' || - commentMediaInfo.type === 'video' || - (commentMediaInfo.type === 'webpage' && commentMediaInfo.thumbnail) || - (commentMediaInfo.type === 'iframe' && iframeThumbnail)) - ? true - : false; - const initialButtonType = hasThumbnail || commentMediaInfo?.type === 'audio' || commentMediaInfo?.type === 'iframe' ? 'playButton' : 'textButton'; - const [buttonType, setButtonType] = useState<'textButton' | 'playButton' | 'closeButton'>(initialButtonType); - const toggleExpando = () => { - setExpandoVisible(!expandoVisible); - setButtonType(buttonType === 'closeButton' ? 'textButton' : 'closeButton'); - }; + const { t } = useTranslation(); + const [expanded, setExpanded] = useState(false); + const toggleExpanded = () => setExpanded(!expanded); + const postTitleOrContent = (title?.length > 90 ? title?.slice(0, 90) + '...' : title) || (content?.length > 90 ? content?.slice(0, 90) + '...' : content); + const commentMediaInfo = utils.getCommentMediaInfoMemoized(content); + const hasThumbnail = utils.hasThumbnail(commentMediaInfo, link); + + // TEMPORARY: e.preventDefault() in Link elements because routes aren't implemented yet return (
@@ -53,7 +43,7 @@ const FeedPost: FC = ({ post, index }) => {

e.preventDefault()}> - {(title?.length > 90 ? title?.slice(0, 90) + '...' : title) || (content?.length > 90 ? content?.slice(0, 90) + '...' : content)} + {postTitleOrContent} {flair && ( <> @@ -72,16 +62,7 @@ const FeedPost: FC = ({ post, index }) => { )}

- {content && !link && ( -
-
-
- )} - {link && ( -
-
-
- )} +

{t('feed_post_submitted')} {utils.getFormattedTime(timestamp)} {t('feed_post_by')}  e.preventDefault()}> @@ -94,51 +75,7 @@ const FeedPost: FC = ({ post, index }) => {

-
- {link && ( -
- e.preventDefault()}> - {commentMediaInfo?.type === 'image' && ( - thumbnail { - e.currentTarget.alt = ''; - }} - /> - )} - {commentMediaInfo?.type === 'video' && - (commentMediaInfo.thumbnail ? ( - thumbnail { - e.currentTarget.alt = ''; - }} - /> - ) : ( -
- )} - {content && ( -
-
{content}
-
- )} -
+
); diff --git a/src/components/thumbnail/thumbnail.tsx b/src/components/thumbnail/thumbnail.tsx index 8e156325..1350c939 100644 --- a/src/components/thumbnail/thumbnail.tsx +++ b/src/components/thumbnail/thumbnail.tsx @@ -12,7 +12,7 @@ const Thumbnail: FC = ({ commentCid }) => { const comment = useComment({ commentCid }); const subplebbitAddress = comment.subplebbitAddress; const { cid, linkHeight, linkWidth } = comment; - const commentMediaInfo = utils.getCommentMediaInfoMemo(comment); + const commentMediaInfo = utils.getCommentMediaInfoMemoized(comment); const iframeThumbnail = commentMediaInfo?.patternThumbnailUrl || commentMediaInfo?.thumbnail; let displayWidth, displayHeight, hasLinkDimensions; diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 7065cbe8..fd431636 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -4,6 +4,13 @@ import extName from 'ext-name'; import { Comment } from '@plebbit/plebbit-react-hooks'; import { canEmbed } from '../components/embed/embed'; +interface CommentMediaInfo { + url: string; + type: string; + thumbnail?: string; + patternThumbnailUrl?: string; +} + const getCommentMediaInfo = (comment: Comment) => { if (!comment?.thumbnailUrl && !comment?.link) { return; @@ -58,7 +65,7 @@ const getCommentMediaInfo = (comment: Comment) => { } }; -const getCommentMediaInfoMemo = memoize(getCommentMediaInfo, { max: 1000 }); +const getCommentMediaInfoMemoized = memoize(getCommentMediaInfo, { max: 1000 }); const getFormattedTime = (unixTimestamp: number): string => { const currentTime = Date.now() / 1000; @@ -104,10 +111,23 @@ const getHostname = (url: string) => { } }; +const hasThumbnail = (commentMediaInfo: CommentMediaInfo | undefined, link: string | undefined): boolean => { + const iframeThumbnail = commentMediaInfo?.patternThumbnailUrl || commentMediaInfo?.thumbnail; + return link && + commentMediaInfo && + (commentMediaInfo.type === 'image' || + commentMediaInfo.type === 'video' || + (commentMediaInfo.type === 'webpage' && commentMediaInfo.thumbnail) || + (commentMediaInfo.type === 'iframe' && iframeThumbnail)) + ? true + : false; +}; + const utils = { - getCommentMediaInfoMemo, + getCommentMediaInfoMemoized, getFormattedTime, getHostname, + hasThumbnail, }; export default utils;