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

add click to enlarge media on desktop

Browse Source
This commit is contained in:
plebeius.eth
2024-04-01 14:24:10 +02:00
parent 857e6850b6
commit 6cc9a6fa33
41 changed files with 197 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/media/index.ts
+1 -1
View File
@@ -1 +1 @@
export { Thumbnail, Media } from './media';
export { default } from './media';
src/components/media/media.module.css
+32
View File
@@ -3,6 +3,7 @@
width: var(--width);
height: var(--height);
margin: 3px 20px 5px 0;
float: left;
display: flex;
justify-content: center;
align-items: center;
@@ -13,6 +14,7 @@
width: var(--width);
height: var(--height);
margin: 3px 10px 5px 5px;
float: left;
display: flex;
justify-content: center;
align-items: center;
@@ -27,3 +29,33 @@
max-width: 125px;
max-height: 125px;
}
.hide {
display: none !important;
}
.thumbnail .show {
display: block;
}
.content img {
cursor: pointer;
max-width: 100%;
max-height: 100%;
}
.content iframe {
border: none;
}
@media (min-width: 640px) {
.media img, .media iframe, .media video, .media audio {
margin: 3px 20px 5px 0;
}
}
@media (max-width: 640px) {
.media img, .media iframe, .media video, .media audio {
margin: 3px 10px 5px 5px;
}
}
src/components/media/media.tsx
+37 -5
View File
@@ -1,14 +1,17 @@
import React from 'react';
import React, { useState } from 'react';
import styles from './media.module.css';
import { CommentMediaInfo } from '../../lib/utils/media-utils';
import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
import Embed from '../embed';
interface ThumbnailProps {
interface MediaProps {
commentMediaInfo?: CommentMediaInfo;
isMobile: boolean;
isReply: boolean;
linkHeight?: number;
linkWidth?: number;
showThumbnail: boolean;
setShowThumbnail: (showThumbnail: boolean) => void;
toggleExpanded?: () => void;
}
@@ -24,7 +27,7 @@ const ThumbnailSmall = ({ style, children }: { style: React.CSSProperties; child
</span>
);
export const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth }: ThumbnailProps) => {
const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth }: MediaProps) => {
let displayWidth, displayHeight;
const maxThumbnailSize = isMobile || isReply ? 125 : 250;
if (linkWidth && linkHeight) {
@@ -60,6 +63,35 @@ export const Thumbnail = ({ commentMediaInfo, isMobile, isReply, linkHeight, lin
);
};
export const Media = () => {
return <></>;
const Media = ({ commentMediaInfo, isMobile, isReply, linkHeight, linkWidth, showThumbnail, setShowThumbnail }: MediaProps) => {
return (
<span className={styles.content}>
<span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`} onClick={() => setShowThumbnail(false)}>
<Thumbnail
commentMediaInfo={commentMediaInfo}
isMobile={isMobile}
isReply={isReply}
linkHeight={linkHeight}
linkWidth={linkWidth}
showThumbnail={showThumbnail}
setShowThumbnail={setShowThumbnail}
/>
</span>
<span className={`${showThumbnail ? styles.hide : styles.show} ${styles.media}`}>
{commentMediaInfo?.type === 'iframe' ? (
<Embed url={commentMediaInfo.url} />
) : commentMediaInfo?.type === 'gif' ? (
<img src={commentMediaInfo.url} alt='' onClick={() => setShowThumbnail(true)} />
) : commentMediaInfo?.type === 'video' ? (
<video src={commentMediaInfo.url} controls autoPlay loop muted />
) : commentMediaInfo?.type === 'image' ? (
<img src={commentMediaInfo.url} alt='' onClick={() => setShowThumbnail(true)} />
) : commentMediaInfo?.type === 'webpage' ? (
<img src={commentMediaInfo.url} alt='' />
) : null}
</span>
</span>
);
};
export default Media;
src/components/post/post.module.css
+11 -8
View File
@@ -40,10 +40,6 @@
background-image: var(--post-unhide-button-background-image);
}
.postDesktop .fileThumb {
float: left;
}
.postDesktop .fileText a {
color: var(--post-link-text-color);
text-decoration: var(--post-link-text-decoration);
@@ -97,6 +93,17 @@
image-rendering: pixelated;
}
.postDesktop .closeMedia {
color: var(--button-desktop-text-color);
text-decoration: underline;
text-transform: capitalize;
}
.postDesktop .closeMedia:hover {
cursor: pointer;
color: var(--button-desktop-text-color-hover);
}
.postDesktop .replyButton {
padding-left: 10px;
}
@@ -210,10 +217,6 @@
text-align: right;
}
.postMobile .fileThumb {
float: left;
}
.postMobile .fileThumb .fileInfo {
padding-bottom: 5px;
text-align: center;
src/components/post/post.tsx
+37 -8
View File
@@ -1,3 +1,4 @@
import { useState } from 'react';
import { Link } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
import { Comment } from '@plebbit/plebbit-react-hooks';
@@ -6,7 +7,7 @@ import { getFormattedDate } from '../../lib/utils/time-utils';
import useReplies from '../../hooks/use-replies';
import styles from './post.module.css';
import Markdown from '../markdown';
import { Thumbnail } from '../media';
import Media from '../media';
import { countLinksInCommentReplies } from '../../lib/utils/comment-utils';
@@ -69,6 +70,8 @@ const PostDesktop = ({ post }: Comment) => {
const replies = useReplies(post);
const [showThumbnail, setShowThumbnail] = useState(true);
return (
<div className={styles.postDesktop}>
<div className={styles.hrWrapper}>
@@ -85,11 +88,27 @@ const PostDesktop = ({ post }: Comment) => {
{commentMediaInfo.url.length > 30 ? commentMediaInfo?.url.slice(0, 30) + '...' : commentMediaInfo?.url}
</a>{' '}
({commentMediaInfo?.type})
{!showThumbnail && (commentMediaInfo?.type === 'iframe' || commentMediaInfo?.type === 'video') && (
<span>
{' '}
[
<span className={styles.closeMedia} onClick={() => setShowThumbnail(true)}>
{t('close')}
</span>
]
</span>
)}
</div>
{hasThumbnail && (
<span className={styles.fileThumb}>
<Thumbnail commentMediaInfo={commentMediaInfo} isMobile={false} isReply={false} linkHeight={linkHeight} linkWidth={linkWidth} />
</span>
<Media
commentMediaInfo={commentMediaInfo}
isMobile={false}
isReply={false}
linkHeight={linkHeight}
linkWidth={linkWidth}
showThumbnail={showThumbnail}
setShowThumbnail={setShowThumbnail}
/>
)}
</div>
)}
@@ -128,7 +147,7 @@ const PostDesktop = ({ post }: Comment) => {
</span>
<span className={styles.postMenuBtn}>▶</span>
</div>
{!content && !link && <div className={styles.spacer} />}
{!content && <div className={styles.spacer} />}
{content && (
<blockquote className={styles.postMessage}>
<Markdown content={displayContent} />
@@ -190,6 +209,8 @@ const PostMobile = ({ post }: Comment) => {
const replies = useReplies(post);
const [showThumbnail, setShowThumbnail] = useState(true);
return (
<div className={styles.postMobile}>
<div className={styles.hrWrapper}>
@@ -218,10 +239,18 @@ const PostMobile = ({ post }: Comment) => {
</span>
</div>
{hasThumbnail && (
<span className={styles.fileThumb}>
<Thumbnail commentMediaInfo={commentMediaInfo} isMobile={true} isReply={false} linkHeight={linkHeight} linkWidth={linkWidth} />
<>
<Media
commentMediaInfo={commentMediaInfo}
isMobile={true}
isReply={false}
linkHeight={linkHeight}
linkWidth={linkWidth}
showThumbnail={showThumbnail}
setShowThumbnail={setShowThumbnail}
/>
{commentMediaInfo?.type && <div className={styles.fileInfo}>{commentMediaInfo.type}</div>}
</span>
</>
)}
{content && (
<blockquote className={`${styles.postMessage} ${styles.clampLines}`}>
src/views/subplebbit/subplebbit.tsx
+9 -9
View File
@@ -15,22 +15,17 @@ interface SubplebbitProps {
const Subplebbit = ({ subplebbits }: SubplebbitProps) => {
const { t } = useTranslation();
const { subplebbitAddress } = useParams<{ subplebbitAddress: string }>();
const subplebbit = subplebbits.find((s) => s?.address === subplebbitAddress);
const subplebbitAddresses = useMemo(() => [subplebbitAddress], [subplebbitAddress]) as string[];
const { shortAddress, state, title } = subplebbit || {};
const sortType = 'active';
const { feed, hasMore, loadMore } = useFeed({ subplebbitAddresses, sortType });
const subplebbit = subplebbits.find((s) => s?.address === subplebbitAddress);
const { shortAddress, state, title } = subplebbit || {};
const loadingStateString = useFeedStateString(subplebbitAddresses) || t('loading');
const loadingString = <div className={styles.stateString}>{state === 'failed' ? state : <LoadingEllipsis string={loadingStateString} />}</div>;
useEffect(() => {
document.title = title ? title : shortAddress;
}, [title, shortAddress]);
const Footer = () => {
let footerContent;
if (feed.length === 0) {
@@ -57,6 +52,11 @@ const Subplebbit = ({ subplebbits }: SubplebbitProps) => {
}, [subplebbitAddress, sortType]);
const lastVirtuosoState = lastVirtuosoStates?.[subplebbitAddress + sortType];
useEffect(() => {
document.title = title ? title : shortAddress;
}, [title, shortAddress]);
return (
<div className={styles.content}>
<Virtuoso