mirror of
https://github.com/bitsocialnet/5chan.git
synced 2026-08-03 07:41:04 +02:00
507 lines
19 KiB
TypeScript
507 lines
19 KiB
TypeScript
import React, { memo, useState } from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { CommentMediaInfo, getDisplayMediaInfoType, getHasThumbnail, getMediaDimensions } from '../../lib/utils/media-utils';
|
|
import { getHostname, parseHttpUrl } from '../../lib/utils/url-utils';
|
|
import useExpandedMediaStore from '../../stores/use-expanded-media-store';
|
|
import useFetchGifFirstFrame from '../../hooks/use-fetch-gif-first-frame';
|
|
import useIsMobile from '../../hooks/use-is-mobile';
|
|
import styles from './comment-media.module.css';
|
|
import Embed, { canEmbed } from '../embed';
|
|
import RufflePlayer from './ruffle-player';
|
|
|
|
interface MediaProps {
|
|
commentMediaInfo?: CommentMediaInfo;
|
|
deleted?: boolean;
|
|
disableToggle?: boolean;
|
|
displayHeight?: string;
|
|
displayWidth?: string;
|
|
isFloatingEmbed?: boolean;
|
|
isOutOfFeed?: boolean;
|
|
isReply?: boolean;
|
|
linkHeight?: number;
|
|
linkWidth?: number;
|
|
parentCid?: string;
|
|
purged?: boolean;
|
|
removed?: boolean;
|
|
spoiler?: boolean;
|
|
showThumbnail?: boolean;
|
|
setShowThumbnail: (showThumbnail: boolean) => void;
|
|
onMediaLoadFailureChange?: (url: string | undefined) => void;
|
|
}
|
|
|
|
type GifFrameState = ReturnType<typeof useFetchGifFirstFrame>;
|
|
|
|
const getMediaLoadFailureLabels = (url: string | undefined, t: ReturnType<typeof useTranslation>['t']) => {
|
|
const hostname = url ? getHostname(url) : undefined;
|
|
const label = t('media_failed_to_load');
|
|
const source = hostname ? t('media_failed_to_load_source', { host: hostname }) : t('media_failed_to_load_source_unknown');
|
|
const hint = t('media_failed_to_load_hint');
|
|
const openSourceLabel = t('media_failed_to_load_open_source');
|
|
const inline = hostname ? t('media_failed_to_load_inline', { host: hostname }) : t('media_failed_to_load_inline_unknown');
|
|
const statusLabel = url ? `${label}. ${source}. ${hint}. ${openSourceLabel}.` : `${label}. ${source}. ${hint}.`;
|
|
|
|
return { inline, openSourceLabel, statusLabel };
|
|
};
|
|
|
|
const MediaLoadFailure = ({ compact = false, url }: { compact?: boolean; url?: string }) => {
|
|
const { t } = useTranslation();
|
|
const { inline, openSourceLabel, statusLabel } = getMediaLoadFailureLabels(url, t);
|
|
|
|
if (compact) {
|
|
return (
|
|
<>
|
|
<img className={styles.fileDeleted} src='assets/filedeleted-res.gif' alt='' aria-hidden='true' />
|
|
<output className={styles.mediaLoadFailureStatus} aria-label={statusLabel} title={statusLabel} />
|
|
</>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<output className={styles.mediaLoadFailure} aria-label={statusLabel} title={statusLabel}>
|
|
<img className={styles.fileDeleted} src='assets/filedeleted-res.gif' alt='' aria-hidden='true' />
|
|
<span className={styles.mediaLoadFailureSource}>{inline}</span>
|
|
{url && (
|
|
<a className={styles.mediaLoadFailureLink} href={url} target='_blank' rel='noopener noreferrer'>
|
|
{openSourceLabel}
|
|
</a>
|
|
)}
|
|
</output>
|
|
);
|
|
};
|
|
|
|
export const MediaLoadFailureInfo = ({ url }: { url?: string }) => {
|
|
const { t } = useTranslation();
|
|
const { inline, openSourceLabel, statusLabel } = getMediaLoadFailureLabels(url, t);
|
|
|
|
return (
|
|
<div className={styles.mediaLoadFailureInfo} title={statusLabel}>
|
|
{inline}
|
|
{url && (
|
|
<>
|
|
{' '}
|
|
<a href={url} target='_blank' rel='noopener noreferrer'>
|
|
{openSourceLabel}
|
|
</a>
|
|
</>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
const Thumbnail = ({
|
|
commentMediaInfo,
|
|
deleted,
|
|
displayHeight,
|
|
gifFrameState,
|
|
displayWidth,
|
|
isFloatingEmbed,
|
|
isOutOfFeed,
|
|
isReply,
|
|
purged,
|
|
removed,
|
|
spoiler,
|
|
setShowThumbnail,
|
|
}: MediaProps & { gifFrameState: GifFrameState }) => {
|
|
const isMobile = useIsMobile();
|
|
const { patternThumbnailUrl, thumbnail, type, url } = commentMediaInfo || {};
|
|
|
|
let thumbnailComponent: React.ReactNode = null;
|
|
const thumbnailDimensions = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties;
|
|
const iframeThumbnail = patternThumbnailUrl || thumbnail;
|
|
const { frameUrl: gifFrameUrl, status: gifFrameStatus } = gifFrameState;
|
|
const hasThumbnail = getHasThumbnail(commentMediaInfo, url);
|
|
const handleOpenMedia = () => setShowThumbnail(false);
|
|
|
|
if (type === 'gif') {
|
|
thumbnailComponent =
|
|
gifFrameStatus === 'loading' ? (
|
|
<button type='button' className={`${styles.gifPlaceholder} ${styles.mediaToggleButton}`} aria-label='Loading GIF thumbnail' onClick={handleOpenMedia} />
|
|
) : (
|
|
<button type='button' className={styles.mediaToggleButton} aria-label='Open GIF' onClick={handleOpenMedia}>
|
|
<img src={gifFrameUrl || url} alt='' />
|
|
</button>
|
|
);
|
|
} else if (type === 'video') {
|
|
thumbnailComponent = thumbnail ? (
|
|
<img src={thumbnail} alt='Video thumbnail' />
|
|
) : (
|
|
// show first frame of the video, as a workaround for Safari not loading thumbnails
|
|
<button type='button' className={styles.mediaToggleButton} aria-label='Open video' onClick={handleOpenMedia}>
|
|
<video src={`${url}#t=0.001`} aria-label='Video thumbnail' />
|
|
</button>
|
|
);
|
|
} else if (type === 'webpage') {
|
|
thumbnailComponent = (
|
|
<button type='button' className={styles.mediaToggleButton} aria-label='Open webpage preview' onClick={handleOpenMedia}>
|
|
<img src={thumbnail} alt='' />
|
|
</button>
|
|
);
|
|
} else if (type === 'iframe') {
|
|
thumbnailComponent = iframeThumbnail ? (
|
|
<button type='button' className={styles.mediaToggleButton} aria-label='Open embedded media preview' onClick={handleOpenMedia}>
|
|
<img src={iframeThumbnail} alt='' />
|
|
</button>
|
|
) : null;
|
|
} else if (type === 'audio') {
|
|
thumbnailComponent = <audio src={url} aria-label='Audio preview' controls />;
|
|
} else if (type === 'swf') {
|
|
thumbnailComponent = (
|
|
<button type='button' className={styles.swfPlaceholder} onClick={() => setShowThumbnail(false)}>
|
|
[SWF]
|
|
</button>
|
|
);
|
|
}
|
|
|
|
const thumbnailSmallPadding = isMobile ? styles.thumbnailMobile : styles.thumbnailReplyDesktop;
|
|
|
|
const linkWithoutThumbnail = url ? parseHttpUrl(url) : null;
|
|
const fallbackLinkLabel = url ? getHostname(url) || (url.length > 30 ? `${url.slice(0, 30)}...` : url) : '';
|
|
const noThumbnailLink =
|
|
!hasThumbnail && linkWithoutThumbnail ? (
|
|
canEmbed(linkWithoutThumbnail) ? (
|
|
<button
|
|
type='button'
|
|
className={styles.noThumbnailButton}
|
|
tabIndex={0}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
setShowThumbnail(false);
|
|
}
|
|
}}
|
|
onClick={() => setShowThumbnail(false)}
|
|
>
|
|
{fallbackLinkLabel}
|
|
</button>
|
|
) : (
|
|
<a href={url} target='_blank' rel='noopener noreferrer'>
|
|
{fallbackLinkLabel}
|
|
</a>
|
|
)
|
|
) : null;
|
|
|
|
return deleted || removed || purged ? (
|
|
<img className={styles.fileDeleted} src='assets/filedeleted-res.gif' alt='File deleted' />
|
|
) : spoiler ? (
|
|
<button type='button' className={styles.mediaToggleButton} aria-label='Open spoiler media' onClick={handleOpenMedia}>
|
|
<img className={styles.spoiler} src='assets/spoiler.png' alt='' />
|
|
</button>
|
|
) : isOutOfFeed ? (
|
|
<span className={`${isFloatingEmbed ? styles.floatingEmbed : styles.communityAvatar}`}>{thumbnailComponent}</span>
|
|
) : isMobile || isReply ? (
|
|
<span className={`${styles.thumbnailSmall} ${thumbnailSmallPadding}`} style={thumbnailDimensions}>
|
|
{thumbnailComponent}
|
|
{noThumbnailLink}
|
|
</span>
|
|
) : (
|
|
<span className={styles.thumbnailBig} style={thumbnailDimensions}>
|
|
{thumbnailComponent}
|
|
{noThumbnailLink}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
const Media = ({ commentMediaInfo, disableToggle, isReply, setShowThumbnail }: MediaProps) => {
|
|
const { t } = useTranslation();
|
|
const { thumbnail, type, url } = commentMediaInfo || {};
|
|
const isMobile = useIsMobile();
|
|
const fitExpandedImagesToScreen = useExpandedMediaStore((s) => s.fitExpandedImagesToScreen);
|
|
const unmuteExpandedVideoSound = useExpandedMediaStore((s) => s.unmuteExpandedVideoSound);
|
|
const mediaClass = `${isMobile ? styles.mediaMobile : isReply ? styles.mediaDesktopReply : styles.mediaDesktopOp} ${
|
|
fitExpandedImagesToScreen ? styles.fitToScreen : ''
|
|
}`;
|
|
const mediaDimensions = getMediaDimensions(commentMediaInfo);
|
|
|
|
return (
|
|
<span className={mediaClass} data-expanded-media='true'>
|
|
{type === 'iframe' && url ? (
|
|
<Embed url={url} />
|
|
) : type === 'gif' ? (
|
|
disableToggle ? (
|
|
<img src={url} alt='' />
|
|
) : (
|
|
<button type='button' className={styles.mediaToggleButton} aria-label='Collapse GIF' onClick={() => setShowThumbnail(true)}>
|
|
<img src={url} alt='' />
|
|
</button>
|
|
)
|
|
) : type === 'video' ? (
|
|
<video src={url} aria-label={t('video')} controls autoPlay loop muted={!unmuteExpandedVideoSound} />
|
|
) : type === 'swf' && url ? (
|
|
<RufflePlayer url={url} />
|
|
) : type === 'webpage' ? (
|
|
disableToggle ? (
|
|
<img src={thumbnail} alt='' />
|
|
) : (
|
|
<button type='button' className={styles.mediaToggleButton} aria-label='Collapse webpage preview' onClick={() => setShowThumbnail(true)}>
|
|
<img src={thumbnail} alt='' />
|
|
</button>
|
|
)
|
|
) : null}
|
|
{isMobile && type && (
|
|
<div className={styles.fileInfo}>
|
|
<a href={url} target='_blank' rel='noopener noreferrer'>
|
|
{url && url.length > 30 ? url.slice(0, 30) + '...' : url}
|
|
</a>{' '}
|
|
({getDisplayMediaInfoType(type, t)}
|
|
{mediaDimensions && `, ${mediaDimensions}`})
|
|
</div>
|
|
)}
|
|
{isMobile && (type === 'iframe' || type === 'video' || type === 'audio' || type === 'swf') && (
|
|
<div className={styles.closeButton}>
|
|
<button
|
|
type='button'
|
|
className='button'
|
|
tabIndex={0}
|
|
onKeyDown={(e) => {
|
|
if (e.key === 'Enter' || e.key === ' ') {
|
|
e.preventDefault();
|
|
setShowThumbnail(true);
|
|
}
|
|
}}
|
|
onClick={() => setShowThumbnail(true)}
|
|
>
|
|
{t('close')}
|
|
</button>
|
|
</div>
|
|
)}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
interface ImageProps {
|
|
commentMediaInfo: CommentMediaInfo;
|
|
disableToggle?: boolean;
|
|
displayHeight: string;
|
|
displayWidth: string;
|
|
initialExpanded?: boolean;
|
|
isOutOfFeed: boolean;
|
|
onMediaLoadFailureChange?: (url: string | undefined) => void;
|
|
parentCid?: string;
|
|
spoiler?: boolean;
|
|
}
|
|
|
|
const Image = ({
|
|
commentMediaInfo,
|
|
disableToggle = false,
|
|
displayHeight,
|
|
displayWidth,
|
|
initialExpanded = false,
|
|
isOutOfFeed,
|
|
onMediaLoadFailureChange,
|
|
parentCid,
|
|
spoiler,
|
|
}: ImageProps) => {
|
|
const { t } = useTranslation();
|
|
const { type, url } = commentMediaInfo || {};
|
|
const isReply = parentCid;
|
|
const isMobile = useIsMobile();
|
|
const [isImageExpanded, setIsImageExpanded] = useState(initialExpanded);
|
|
const fitExpandedImagesToScreen = useExpandedMediaStore((s) => s.fitExpandedImagesToScreen);
|
|
const mediaDimensions = getMediaDimensions(commentMediaInfo);
|
|
const mediaClass = `${isMobile ? styles.mediaMobile : isReply ? styles.mediaDesktopReply : styles.mediaDesktopOp} ${
|
|
fitExpandedImagesToScreen ? styles.fitToScreen : ''
|
|
}`;
|
|
const thumbnailSmallPadding = isMobile ? styles.thumbnailMobile : styles.thumbnailReplyDesktop;
|
|
const thumbnailDimensions = { '--width': displayWidth, '--height': displayHeight } as React.CSSProperties;
|
|
const expandedMediaAttribute = isImageExpanded ? 'true' : undefined;
|
|
const imageMediaStyle = isImageExpanded ? undefined : thumbnailDimensions;
|
|
|
|
const [failedUrl, setFailedUrl] = useState<string | undefined>();
|
|
const hasError = failedUrl === url;
|
|
const handleError = () => {
|
|
setFailedUrl(url);
|
|
onMediaLoadFailureChange?.(url);
|
|
};
|
|
const handleLoad = () => {
|
|
setFailedUrl((currentFailedUrl) => (currentFailedUrl === url ? undefined : currentFailedUrl));
|
|
onMediaLoadFailureChange?.(undefined);
|
|
};
|
|
|
|
if (spoiler && !isImageExpanded) {
|
|
const spoilerDimensions = { '--width': '150px', '--height': '150px' } as React.CSSProperties;
|
|
return (
|
|
<span
|
|
className={`${isOutOfFeed ? styles.communityAvatar : styles.thumbnailBig} ${styles.thumbnail} ${isImageExpanded && isMobile ? styles.removeFloat : ''}`}
|
|
style={spoilerDimensions}
|
|
>
|
|
<button type='button' className={styles.mediaToggleButton} aria-label='Open spoiler media' onClick={() => setIsImageExpanded(true)}>
|
|
<img className={styles.spoiler} src='assets/spoiler.png' alt='' />
|
|
</button>
|
|
</span>
|
|
);
|
|
}
|
|
|
|
return isMobile ? (
|
|
<span className={`${styles.thumbnail} ${isImageExpanded && isMobile ? styles.removeFloat : ''}`}>
|
|
<span
|
|
className={isImageExpanded ? mediaClass : `${isOutOfFeed ? styles.communityAvatar : styles.thumbnailSmall} ${thumbnailSmallPadding}`}
|
|
data-expanded-media={expandedMediaAttribute}
|
|
style={imageMediaStyle}
|
|
>
|
|
{hasError ? (
|
|
<MediaLoadFailure compact url={url} />
|
|
) : disableToggle ? (
|
|
<img src={url} onError={handleError} onLoad={handleLoad} alt='' />
|
|
) : (
|
|
<button
|
|
type='button'
|
|
className={styles.mediaToggleButton}
|
|
aria-label={isImageExpanded ? 'Collapse image' : 'Expand image'}
|
|
onClick={() => setIsImageExpanded(!isImageExpanded)}
|
|
>
|
|
<img src={url} onError={handleError} onLoad={handleLoad} alt='' />
|
|
</button>
|
|
)}
|
|
</span>
|
|
{isImageExpanded && type && (
|
|
<div className={styles.fileInfo}>
|
|
<a href={url} target='_blank' rel='noopener noreferrer'>
|
|
{url && url.length > 30 ? url.slice(0, 30) + '...' : url}
|
|
</a>{' '}
|
|
({getDisplayMediaInfoType(type, t)}
|
|
{mediaDimensions && `, ${mediaDimensions}`})
|
|
</div>
|
|
)}
|
|
{type && !isImageExpanded && <div className={styles.fileInfo}>{`${spoiler ? `${t('spoiler')} - ` : ''} ${getDisplayMediaInfoType(type, t)}`}</div>}
|
|
</span>
|
|
) : (
|
|
<span
|
|
className={isImageExpanded ? mediaClass : `${isOutOfFeed ? styles.communityAvatar : styles.thumbnailBig} ${styles.thumbnail}`}
|
|
data-expanded-media={expandedMediaAttribute}
|
|
style={imageMediaStyle}
|
|
>
|
|
{hasError ? (
|
|
<MediaLoadFailure url={url} />
|
|
) : disableToggle ? (
|
|
<img src={url} onError={handleError} onLoad={handleLoad} alt='' />
|
|
) : (
|
|
<button
|
|
type='button'
|
|
className={styles.mediaToggleButton}
|
|
aria-label={isImageExpanded ? 'Collapse image' : 'Expand image'}
|
|
onClick={() => setIsImageExpanded(!isImageExpanded)}
|
|
>
|
|
<img src={url} onError={handleError} onLoad={handleLoad} alt='' />
|
|
</button>
|
|
)}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
const CommentMedia = ({
|
|
commentMediaInfo,
|
|
deleted,
|
|
disableToggle,
|
|
isFloatingEmbed,
|
|
linkHeight,
|
|
linkWidth,
|
|
parentCid,
|
|
purged,
|
|
removed,
|
|
showThumbnail,
|
|
setShowThumbnail,
|
|
spoiler,
|
|
onMediaLoadFailureChange,
|
|
}: MediaProps) => {
|
|
const isReply = parentCid;
|
|
const { t } = useTranslation();
|
|
const isMobile = useIsMobile();
|
|
const { thumbnailHeight, thumbnailWidth, url } = commentMediaInfo || {};
|
|
const gifFrameState = useFetchGifFirstFrame(commentMediaInfo?.type === 'gif' ? url : undefined);
|
|
let type = commentMediaInfo?.type;
|
|
const { status: gifFrameStatus } = gifFrameState;
|
|
|
|
if (type === 'gif' && gifFrameStatus === 'ready') {
|
|
type = 'animated gif';
|
|
} else if (type === 'gif' && gifFrameStatus === 'failed') {
|
|
type = 'static gif';
|
|
}
|
|
|
|
let displayWidth, displayHeight;
|
|
const maxThumbnailSize = isMobile || isReply ? 125 : 250;
|
|
|
|
if (linkWidth && linkHeight) {
|
|
// use the dimensions from the pkc-js API
|
|
let scale = Math.min(1, maxThumbnailSize / Math.max(linkWidth, linkHeight));
|
|
displayWidth = `${linkWidth * scale}px`;
|
|
displayHeight = `${linkHeight * scale}px`;
|
|
} else if (thumbnailHeight && thumbnailWidth) {
|
|
// use the dimensions from the thumbnail fetched by useCommentMediaInfo
|
|
let scale = Math.min(1, maxThumbnailSize / Math.max(thumbnailWidth, thumbnailHeight));
|
|
displayWidth = `${thumbnailWidth * scale}px`;
|
|
displayHeight = `${thumbnailHeight * scale}px`;
|
|
} else {
|
|
// use the default size
|
|
displayWidth = `${maxThumbnailSize}px`;
|
|
displayHeight = `${maxThumbnailSize}px`;
|
|
}
|
|
|
|
if (type === 'audio') {
|
|
displayWidth = '100%';
|
|
displayHeight = '100%';
|
|
}
|
|
const isOutOfFeed = isFloatingEmbed || spoiler || false; // virtuoso wrapper unneeded
|
|
|
|
return (
|
|
<span className={styles.content}>
|
|
{commentMediaInfo?.type === 'image' ? (
|
|
// images just enlarge when clicked, so they don't need two separate components
|
|
// when showThumbnail is explicitly false (e.g., from embed button), start expanded
|
|
<Image
|
|
commentMediaInfo={commentMediaInfo}
|
|
disableToggle={disableToggle}
|
|
displayHeight={displayHeight}
|
|
displayWidth={displayWidth}
|
|
initialExpanded={showThumbnail === false}
|
|
isOutOfFeed={isOutOfFeed}
|
|
onMediaLoadFailureChange={onMediaLoadFailureChange}
|
|
parentCid={parentCid}
|
|
spoiler={spoiler}
|
|
/>
|
|
) : (
|
|
<>
|
|
<span className={`${showThumbnail ? styles.show : styles.hide} ${styles.thumbnail}`}>
|
|
{url && (
|
|
<Thumbnail
|
|
commentMediaInfo={commentMediaInfo}
|
|
displayHeight={displayHeight}
|
|
gifFrameState={gifFrameState}
|
|
displayWidth={displayWidth}
|
|
isFloatingEmbed={isFloatingEmbed}
|
|
isOutOfFeed={isOutOfFeed}
|
|
deleted={deleted}
|
|
purged={purged}
|
|
removed={removed}
|
|
spoiler={spoiler}
|
|
setShowThumbnail={setShowThumbnail}
|
|
/>
|
|
)}
|
|
{isMobile && type && <div className={styles.fileInfo}>{`${spoiler ? `${t('spoiler')} - ` : ''} ${getDisplayMediaInfoType(type, t)}`}</div>}
|
|
</span>
|
|
{!showThumbnail && <Media commentMediaInfo={commentMediaInfo} disableToggle={disableToggle} isReply={!!parentCid} setShowThumbnail={setShowThumbnail} />}
|
|
</>
|
|
)}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
export default memo(CommentMedia, (prev, next) => {
|
|
return (
|
|
prev.commentMediaInfo === next.commentMediaInfo &&
|
|
prev.deleted === next.deleted &&
|
|
prev.disableToggle === next.disableToggle &&
|
|
prev.isFloatingEmbed === next.isFloatingEmbed &&
|
|
prev.isOutOfFeed === next.isOutOfFeed &&
|
|
prev.isReply === next.isReply &&
|
|
prev.linkHeight === next.linkHeight &&
|
|
prev.linkWidth === next.linkWidth &&
|
|
prev.onMediaLoadFailureChange === next.onMediaLoadFailureChange &&
|
|
prev.parentCid === next.parentCid &&
|
|
prev.purged === next.purged &&
|
|
prev.removed === next.removed &&
|
|
prev.showThumbnail === next.showThumbnail &&
|
|
prev.setShowThumbnail === next.setShowThumbnail &&
|
|
prev.spoiler === next.spoiler
|
|
);
|
|
});
|