External/5chan
1
0
Fork 0
mirror of https://github.com/bitsocialnet/5chan.git synced 2026-08-03 07:41:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

Update media.tsx

Browse Source
This commit is contained in:
plebeius.eth
2024-03-30 16:44:37 +01:00
parent 761431e084
commit 296cc622dd
1 changed files with 23 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/media/media.tsx
+23 -17
View File
@@ -1,3 +1,4 @@
import React from 'react';
import styles from './media.module.css'; import styles from './media.module.css';
import { CommentMediaInfo } from '../../lib/utils/media-utils'; import { CommentMediaInfo } from '../../lib/utils/media-utils';
import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame'; import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
@@ -11,28 +12,33 @@ interface ThumbnailProps {
toggleExpanded?: () => void; toggleExpanded?: () => void;
} }
export const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth }: ThumbnailProps) => { const ThumbnailBig = ({ style, children }: { style: React.CSSProperties; children: React.ReactNode }) => (
const iframeThumbnail = commentMediaInfo?.patternThumbnailUrl || commentMediaInfo?.thumbnail; <span className={styles.thumbnailBig} style={style}>
let displayWidth, displayHeight, hasLinkDimensions; {children}
const maxThumbnailSize = isMobile || isReply ? 125 : 250; </span>
);
const ThumbnailSmall = ({ style, children }: { style: React.CSSProperties; children: React.ReactNode }) => (
<span className={styles.thumbnailSmall} style={style}>
{children}
</span>
);
export const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth }: ThumbnailProps) => {
let displayWidth, displayHeight;
const maxThumbnailSize = isMobile || isReply ? 125 : 250;
if (linkWidth && linkHeight) { if (linkWidth && linkHeight) {
hasLinkDimensions = true;
let scale = Math.min(1, maxThumbnailSize / Math.max(linkWidth, linkHeight)); let scale = Math.min(1, maxThumbnailSize / Math.max(linkWidth, linkHeight));
displayWidth = `${linkWidth * scale}px`; displayWidth = `${linkWidth * scale}px`;
displayHeight = `${linkHeight * scale}px`; displayHeight = `${linkHeight * scale}px`;
} else { } else {
hasLinkDimensions = false;
displayWidth = `${maxThumbnailSize}px`; displayWidth = `${maxThumbnailSize}px`;
displayHeight = `${maxThumbnailSize}px`; displayHeight = `${maxThumbnailSize}px`;
} }
const thumbnailStyle = hasLinkDimensions ? ({ '--width': displayWidth, '--height': displayHeight } as React.CSSProperties) : {}; let mediaComponent: React.ReactNode = null;
const thumbnailWrapperClass = hasLinkDimensions ? styles.transparentThumbnailWrapper : isMobile ? styles.thumbnailWrapperSmall : styles.thumbnailWrapperBig; const iframeThumbnail = commentMediaInfo?.patternThumbnailUrl || commentMediaInfo?.thumbnail;
let mediaComponent = null;
const gifFrameUrl = useFetchGifFirstFrame(commentMediaInfo?.type === 'gif' ? commentMediaInfo.url : undefined); const gifFrameUrl = useFetchGifFirstFrame(commentMediaInfo?.type === 'gif' ? commentMediaInfo.url : undefined);
if (commentMediaInfo?.type === 'image') { if (commentMediaInfo?.type === 'image') {
mediaComponent = <img src={commentMediaInfo.url} alt='' />; mediaComponent = <img src={commentMediaInfo.url} alt='' />;
} else if (commentMediaInfo?.type === 'video') { } else if (commentMediaInfo?.type === 'video') {
@@ -45,12 +51,12 @@ export const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, lin
mediaComponent = <img src={gifFrameUrl} alt='' />; mediaComponent = <img src={gifFrameUrl} alt='' />;
} }
return ( const thumbnailStyle = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties;
<span className={styles.thumbnail} style={thumbnailStyle}>
<span className={isMobile || isReply ? styles.thumbnailSmall : styles.thumbnailBig}> return isMobile || isReply ? (
<span className={thumbnailWrapperClass}>{mediaComponent}</span> <ThumbnailSmall style={thumbnailStyle}>{mediaComponent}</ThumbnailSmall>
</span> ) : (
</span> <ThumbnailBig style={thumbnailStyle}>{mediaComponent}</ThumbnailBig>
); );
}; };