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

feat(post): add floating preview of media from link in post content

Browse Source
This commit is contained in:
Tom (plebeius.eth)
2024-06-08 16:41:05 +02:00
parent ddd063fdef
commit 39a48c9515
40 changed files with 192 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/catalog-row/catalog-row.tsx
+3 -4
View File
@@ -1,4 +1,5 @@
import { useEffect, useRef } from 'react';
import { useEffect, useRef, useState } from 'react';
import { createPortal } from 'react-dom';
import { useTranslation } from 'react-i18next';
import { Link, useLocation } from 'react-router-dom';
import { Comment, useComment } from '@plebbit/plebbit-react-hooks';
@@ -13,9 +14,6 @@ import PostMenuDesktop from '../post/post-desktop/post-menu-desktop/';
import styles from './catalog-row.module.css';
import _ from 'lodash';
import React, { useState } from 'react';
import { createPortal } from 'react-dom';
interface CatalogPostMediaProps {
commentMediaInfo: any;
isOutOfFeed?: boolean;
@@ -109,6 +107,7 @@ const CatalogPost = ({ post }: { post: Comment }) => {
const timeoutRef = useRef<NodeJS.Timeout | null>(null);
const { refs, floatingStyles, update } = useFloating({
open: showPortal,
placement: placementRef.current,
middleware: [
shift({ padding: 10 }),
src/components/comment-media/comment-media.module.css
+12 -2
View File
@@ -11,13 +11,16 @@
overflow: hidden;
}
.subplebbitAvatar {
.floatingEmbed, .subplebbitAvatar {
max-width: 250px;
max-height: 250px;
margin: 3px 20px 5px 0;
display: inline-block;
}
.subplebbitAvatar {
margin: 3px 20px 5px 0;
}
.spoiler {
display: inline-block;
margin: 3px 20px 5px 20px;
@@ -131,4 +134,11 @@
.fileDeleted {
image-rendering: pixelated;
}
@media (min-width: 640px) {
.thumbnail,
.content {
line-height: 0; /* Ensure no extra space due to line-height */
}
}
src/components/comment-media/comment-media.tsx
+7 -6
View File
@@ -11,6 +11,7 @@ import Embed, { canEmbed } from '../embed';
interface MediaProps {
commentMediaInfo?: CommentMediaInfo;
post?: Comment;
isFloatingEmbed?: boolean;
isReply?: boolean;
linkHeight?: number;
linkWidth?: number;
@@ -18,11 +19,11 @@ interface MediaProps {
setShowThumbnail: (showThumbnail: boolean) => void;
}
const Thumbnail = ({ commentMediaInfo, post, setShowThumbnail }: MediaProps) => {
const Thumbnail = ({ commentMediaInfo, isFloatingEmbed, 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 isOutOfFeed = isDescription || isRules || isFloatingEmbed; // virtuoso wrapper unneeded
const isReply = parentCid;
const isDeleted = deleted || removed;
@@ -84,7 +85,7 @@ const Thumbnail = ({ commentMediaInfo, post, setShowThumbnail }: MediaProps) =>
<span className={styles.spoilerText}>[{t('view_spoiler')}]</span>
</span>
) : isOutOfFeed ? (
<span className={styles.subplebbitAvatar}>{thumbnailComponent}</span>
<span className={`${isFloatingEmbed ? styles.floatingEmbed : styles.subplebbitAvatar}`}>{thumbnailComponent}</span>
) : isMobile || isReply ? (
<span className={`${styles.thumbnailSmall} ${thumbnailSmallPadding}`} style={thumbnailDimensions}>
{thumbnailComponent}
@@ -135,7 +136,7 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
)}
{isMobile && (type === 'iframe' || type === 'video' || type === 'audio') && (
<div className={styles.closeButton}>
<span className='button' onClick={() => setShowThumbnail(true)}>
<span className='button' onClick={() => setShowThumbnail(false)}>
{t('close')}
</span>
</div>
@@ -144,7 +145,7 @@ const Media = ({ commentMediaInfo, isReply, setShowThumbnail }: MediaProps) => {
);
};
const CommentMedia = ({ commentMediaInfo, post, showThumbnail, setShowThumbnail }: MediaProps) => {
const CommentMedia = ({ commentMediaInfo, isFloatingEmbed, post, showThumbnail, setShowThumbnail }: MediaProps) => {
const { t } = useTranslation();
const isMobile = useIsMobile();
const { type, url } = commentMediaInfo || {};
@@ -152,7 +153,7 @@ const CommentMedia = ({ commentMediaInfo, post, showThumbnail, setShowThumbnail
return (
<span className={styles.content}>
<span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`}>
{url && <Thumbnail commentMediaInfo={commentMediaInfo} post={post} setShowThumbnail={setShowThumbnail} />}
{url && <Thumbnail commentMediaInfo={commentMediaInfo} isFloatingEmbed={isFloatingEmbed} post={post} setShowThumbnail={setShowThumbnail} />}
{isMobile && type && <div className={styles.fileInfo}>{getDisplayMediaInfoType(type, t)}</div>}
</span>
{!showThumbnail && <Media commentMediaInfo={commentMediaInfo} isReply={post?.parentCid} setShowThumbnail={setShowThumbnail} />}
src/components/markdown/markdown.module.css
+6
View File
@@ -38,4 +38,10 @@
.spoiler:hover {
color: white;
}
.floatingEmbed {
background-color: #d6daf0;
border: 1px solid #b7c5d9;
padding: 2px;
}
src/components/markdown/markdown.tsx
+94 -27
View File
@@ -1,18 +1,100 @@
import React, { useMemo, useState } from 'react';
import React, { useEffect, useMemo, useRef, useState } from 'react';
import { useTranslation } from 'react-i18next';
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import supersub from 'remark-supersub';
import rehypeSanitize, { defaultSchema } from 'rehype-sanitize';
import styles from './markdown.module.css';
import { useTranslation } from 'react-i18next';
import { useDismiss, useFloating, useFocus, useHover, useInteractions, offset, shift, size, autoUpdate, Placement, FloatingPortal } from '@floating-ui/react';
import { getLinkMediaInfo, getHasThumbnail } from '../../lib/utils/media-utils';
import useIsMobile from '../../hooks/use-is-mobile';
import CommentMedia from '../comment-media';
import styles from './markdown.module.css';
interface MarkdownProps {
content: string;
spoiler?: boolean;
interface ContentLinkEmbedProps {
children: any;
href: string;
linkMediaInfo: any;
}
const ContentLinkEmbed = ({ children, href, linkMediaInfo }: ContentLinkEmbedProps) => {
const { t } = useTranslation();
const isMobile = useIsMobile();
const [isOpen, setIsOpen] = useState(false);
const [showMedia, setShowMedia] = useState(false);
const placementRef = useRef<Placement>('right');
const availableWidthRef = useRef<number>(0);
const { refs, floatingStyles, update, context } = useFloating({
open: isOpen,
onOpenChange: setIsOpen,
placement: placementRef.current,
middleware: [
shift({ padding: 10 }),
offset({ mainAxis: 5 }),
size({
apply({ availableWidth, elements }) {
availableWidthRef.current = availableWidth;
if (availableWidth >= 250) {
elements.floating.style.maxWidth = `${availableWidth - 12}px`;
} else if (placementRef.current === 'right') {
placementRef.current = 'left';
}
},
}),
],
whileElementsMounted: autoUpdate,
});
const hover = useHover(context, { move: false });
const focus = useFocus(context);
const dismiss = useDismiss(context);
const { getReferenceProps, getFloatingProps } = useInteractions([hover, focus, dismiss]);
useEffect(() => {
const handleResize = () => {
const availableWidth = availableWidthRef.current;
if (availableWidth >= 250) {
placementRef.current = 'right';
} else {
placementRef.current = 'left';
}
update();
};
window.addEventListener('resize', handleResize);
return () => {
window.removeEventListener('resize', handleResize);
};
}, [update]);
return (
<>
<a href={href} target='_blank' rel='noopener noreferrer'>
{children}
</a>{' '}
[
<span className={styles.embedButton} onClick={() => setShowMedia(!showMedia)} ref={refs.setReference} {...getReferenceProps()}>
{showMedia ? t('remove') : isMobile ? t('open') : t('embed')}
</span>
]
{showMedia && (
<>
<br />
<CommentMedia isReply={false} setShowThumbnail={setShowMedia} commentMediaInfo={linkMediaInfo} showThumbnail={false} />
</>
)}
<FloatingPortal>
{isOpen && !isMobile && (
<div className={styles.floatingEmbed} ref={refs.setFloating} style={floatingStyles} {...getFloatingProps()}>
<CommentMedia isReply={false} isFloatingEmbed={true} setShowThumbnail={setShowMedia} commentMediaInfo={linkMediaInfo} showThumbnail={true} />
</div>
)}
</FloatingPortal>
</>
);
};
const MAX_LENGTH_FOR_GFM = 10000; // remarkGfm lags with large content
const blockquoteToGreentext = () => (tree: any) => {
@@ -38,6 +120,11 @@ const blockquoteToGreentext = () => (tree: any) => {
});
};
interface MarkdownProps {
content: string;
spoiler?: boolean;
}
const Markdown = ({ content, spoiler }: MarkdownProps) => {
const remarkPlugins: any[] = [[supersub]];
@@ -59,9 +146,6 @@ const Markdown = ({ content, spoiler }: MarkdownProps) => {
remarkPlugins.push([blockquoteToGreentext]);
const { t } = useTranslation();
const [showMedia, setShowMedia] = useState(false);
return (
<span className={styles.markdown}>
<ReactMarkdown
@@ -83,24 +167,7 @@ const Markdown = ({ content, spoiler }: MarkdownProps) => {
if (href) {
const linkMediaInfo = getLinkMediaInfo(href);
if (getHasThumbnail(linkMediaInfo, href)) {
return (
<>
<a href={href} target='_blank' rel='noopener noreferrer'>
{children}
</a>{' '}
[
<span className={styles.embedButton} onClick={() => setShowMedia(!showMedia)}>
{showMedia ? t('remove') : t('embed')}
</span>
]
{showMedia && (
<>
<br />
<CommentMedia isReply={false} setShowThumbnail={setShowMedia} commentMediaInfo={linkMediaInfo} showThumbnail={false} />
</>
)}
</>
);
return <ContentLinkEmbed children={children} href={href} linkMediaInfo={linkMediaInfo} />;
} else {
return (
<a href={href} target='_blank' rel='noopener noreferrer'>