From a8adb2a80ef93be39eaadbbf2feee337b265cd96 Mon Sep 17 00:00:00 2001 From: "plebeius.eth" Date: Fri, 29 Mar 2024 20:43:58 +0100 Subject: [PATCH] add media on mobile --- src/components/media/media.module.css | 29 ++++++++++------ src/components/media/media.tsx | 48 +++++++-------------------- src/components/post/post.tsx | 20 +++++------ src/themes.css | 6 ++++ src/views/subplebbit/subplebbit.tsx | 2 +- 5 files changed, 47 insertions(+), 58 deletions(-) diff --git a/src/components/media/media.module.css b/src/components/media/media.module.css index 0da43d01..b6393bea 100644 --- a/src/components/media/media.module.css +++ b/src/components/media/media.module.css @@ -1,23 +1,29 @@ -.thumbnail { +.thumbnailBig { + width: var(--width); + height: var(--height); float: left; padding: 3px 20px 5px 0; - width: var(--width, 250px); - height: var(--height, 250px); } -.thumbnailHidden { - display: none; +.thumbnailSmall { + width: var(--width); + height: var(--height); + float: left; + padding: 3px 10px 5px 5px; } -.thumbnailVisible { - display: block; -} - -.thumbnailWrapper { - background-color: var(--background-thumbnail); +.thumbnailWrapperBig { + background-color: var(--post-thumbnail-background-color); + display: inline-block; height: 250px; width: 250px; +} + +.thumbnailWrapperSmall { + background-color: var(--post-thumbnail-background-color); display: inline-block; + height: 150px; + width: 150px; } .transparentThumbnailWrapper { @@ -26,6 +32,7 @@ } .thumbnail img, .thumbnail video { + object-fit: contain; width: 100%; height: 100%; } diff --git a/src/components/media/media.tsx b/src/components/media/media.tsx index 7e4fff97..9e5f6ea7 100644 --- a/src/components/media/media.tsx +++ b/src/components/media/media.tsx @@ -1,48 +1,34 @@ import styles from './media.module.css'; -import { Link } from 'react-router-dom'; import { CommentMediaInfo } from '../../lib/utils/media-utils'; import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame'; interface ThumbnailProps { - cid?: string; commentMediaInfo?: CommentMediaInfo; - expanded?: boolean; + isMobile: boolean; isReply: boolean; - link: string; linkHeight?: number; linkWidth?: number; - subplebbitAddress?: string; toggleExpanded?: () => void; } -export const Thumbnail = ({ - cid, - commentMediaInfo, - expanded = false, - isReply = false, - link, - linkHeight, - linkWidth, - subplebbitAddress, - toggleExpanded, -}: ThumbnailProps) => { +export const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth }: ThumbnailProps) => { const iframeThumbnail = commentMediaInfo?.patternThumbnailUrl || commentMediaInfo?.thumbnail; let displayWidth, displayHeight, hasLinkDimensions; - const routeOrLink = isReply ? link : `/p/${subplebbitAddress}/c/${cid}`; - const thumbnailClass = expanded ? styles.thumbnailHidden : styles.thumbnailVisible; + const maxThumbnailSize = isMobile || isReply ? 125 : 250; if (linkWidth && linkHeight) { - let scale = Math.min(1, 250 / Math.max(linkWidth, linkHeight)); + hasLinkDimensions = true; + let scale = Math.min(1, maxThumbnailSize / Math.max(linkWidth, linkHeight)); displayWidth = `${linkWidth * scale}px`; displayHeight = `${linkHeight * scale}px`; - hasLinkDimensions = true; } else { - displayWidth = '250px'; - displayHeight = '250px'; hasLinkDimensions = false; + displayWidth = `${maxThumbnailSize}px`; + displayHeight = `${maxThumbnailSize}px`; } - const style = hasLinkDimensions ? ({ '--width': displayWidth, '--height': displayHeight } as React.CSSProperties) : {}; + const thumbnailStyle = hasLinkDimensions ? ({ '--width': displayWidth, '--height': displayHeight } as React.CSSProperties) : {}; + const thumbnailWrapperClass = hasLinkDimensions ? styles.transparentThumbnailWrapper : isMobile ? styles.thumbnailWrapperSmall : styles.thumbnailWrapperBig; let mediaComponent = null; const gifFrameUrl = useFetchGifFirstFrame(commentMediaInfo?.type === 'gif' ? commentMediaInfo.url : undefined); @@ -60,19 +46,9 @@ export const Thumbnail = ({ } return ( - - - { - if (e.button === 0 && isReply) { - e.preventDefault(); - toggleExpanded && toggleExpanded(); - } - }} - > - {mediaComponent} - + + + {mediaComponent} ); diff --git a/src/components/post/post.tsx b/src/components/post/post.tsx index 5136fa06..3dceec2f 100644 --- a/src/components/post/post.tsx +++ b/src/components/post/post.tsx @@ -40,15 +40,7 @@ const PostDesktop = ({ post }: Comment) => { {hasThumbnail && ( - + )} @@ -101,12 +93,15 @@ const PostDesktop = ({ post }: Comment) => { }; const PostMobile = ({ post }: Comment) => { - const { author, cid, content, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {}; + const { author, cid, content, link, linkHeight, linkWidth, replyCount, shortCid, subplebbitAddress, timestamp, title } = post || {}; const { address, displayName, shortAddress } = author || {}; const linkCount = countLinksInCommentReplies(post); const displayTitle = title && title.length > 30 ? title.slice(0, 30) + '(...)' : title; const displayContent = content && content.length > 1000 ? content.slice(0, 1000) : content; + const commentMediaInfo = getCommentMediaInfoMemoized(post); + const hasThumbnail = getHasThumbnail(commentMediaInfo, link); + return (
@@ -134,6 +129,11 @@ const PostMobile = ({ post }: Comment) => { {shortCid}
+ {hasThumbnail && ( + + + + )} {content && (
diff --git a/src/themes.css b/src/themes.css index 5fe43a15..926c9bbf 100644 --- a/src/themes.css +++ b/src/themes.css @@ -92,6 +92,7 @@ --post-mobile-abbr-text-color: #707070; --post-mobile-abbr-font-size: 10pt; --post-mobile-content-font-size: 11pt; + --post-thumbnail-background-color: rgba(0, 0, 0, 0.05); /* post form */ --post-form-toggle-font-size: 22px; @@ -193,6 +194,7 @@ --post-mobile-abbr-text-color: #707070; --post-mobile-abbr-font-size: 10pt; --post-mobile-content-font-size: 11pt; + --post-thumbnail-background-color: rgba(0, 0, 0, 0.05); /* post form */ --post-form-toggle-font-size: 22px; @@ -272,6 +274,7 @@ --post-mobile-abbr-text-color: #707070; --post-mobile-abbr-font-size: 12pt; --post-mobile-content-font-size: 13pt; + --post-thumbnail-background-color: rgba(0, 0, 0, 0.05); /* post form */ --post-form-toggle-font-size: 22px; @@ -350,6 +353,7 @@ --post-menu-button-color: #34345c; --post-menu-button-color-hover: #d00; --post-greentext-color: #789922; + --post-thumbnail-background-color: rgba(0, 0, 0, 0.05); /* post form */ --post-form-toggle-font-size: 22px; @@ -424,6 +428,7 @@ --post-menu-button-color: #5F89AC; --post-menu-button-color-hover: #81a2be; --post-greentext-color: #b5bd68; + --post-thumbnail-background-color: rgba(255, 255, 255, 0.01); /* post form */ --post-form-toggle-font-size: 22px; @@ -493,6 +498,7 @@ --post-menu-button-color: #FF6600; --post-menu-button-color-hover: #FF3300; --post-greentext-color: #789922; + --post-thumbnail-background-color: rgba(0, 0, 0, 0.05); /* post form */ --post-form-toggle-font-size: 22px; diff --git a/src/views/subplebbit/subplebbit.tsx b/src/views/subplebbit/subplebbit.tsx index eb72b819..33029a82 100644 --- a/src/views/subplebbit/subplebbit.tsx +++ b/src/views/subplebbit/subplebbit.tsx @@ -60,7 +60,7 @@ const Subplebbit = ({ subplebbits }: SubplebbitProps) => { return (
}