pl-fe: port some MediaModal changes from Mastodon
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
@ -1,160 +0,0 @@
|
||||
import clsx from 'clsx';
|
||||
import React from 'react';
|
||||
|
||||
import ZoomableImage from './zoomable-image';
|
||||
|
||||
type EventRemover = () => void;
|
||||
|
||||
interface IImageLoader {
|
||||
alt?: string;
|
||||
src: string;
|
||||
previewSrc?: string;
|
||||
width?: number;
|
||||
height?: number;
|
||||
onClick?: () => void;
|
||||
}
|
||||
|
||||
class ImageLoader extends React.PureComponent<IImageLoader> {
|
||||
|
||||
static defaultProps = {
|
||||
alt: '',
|
||||
width: null,
|
||||
height: null,
|
||||
};
|
||||
|
||||
state = {
|
||||
loading: true,
|
||||
error: false,
|
||||
width: null,
|
||||
};
|
||||
|
||||
removers: EventRemover[] = [];
|
||||
canvas: HTMLCanvasElement | null = null;
|
||||
_canvasContext: CanvasRenderingContext2D | null = null;
|
||||
|
||||
get canvasContext() {
|
||||
if (!this.canvas) {
|
||||
return null;
|
||||
}
|
||||
this._canvasContext = this._canvasContext || this.canvas.getContext('2d');
|
||||
return this._canvasContext;
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this.loadImage(this.props);
|
||||
}
|
||||
|
||||
componentDidUpdate(prevProps: IImageLoader) {
|
||||
if (prevProps.src !== this.props.src) {
|
||||
this.loadImage(this.props);
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this.removeEventListeners();
|
||||
}
|
||||
|
||||
loadImage(props: IImageLoader) {
|
||||
this.removeEventListeners();
|
||||
this.setState({ loading: true, error: false });
|
||||
Promise.all([
|
||||
props.previewSrc && this.loadPreviewCanvas(props),
|
||||
this.hasSize() && this.loadOriginalImage(props),
|
||||
].filter(Boolean))
|
||||
.then(() => {
|
||||
this.setState({ loading: false, error: false });
|
||||
this.clearPreviewCanvas();
|
||||
})
|
||||
.catch(() => this.setState({ loading: false, error: true }));
|
||||
}
|
||||
|
||||
loadPreviewCanvas = ({ previewSrc, width, height }: IImageLoader) => new Promise<void>((resolve, reject) => {
|
||||
const image = new Image();
|
||||
const removeEventListeners = () => {
|
||||
image.removeEventListener('error', handleError);
|
||||
image.removeEventListener('load', handleLoad);
|
||||
};
|
||||
const handleError = () => {
|
||||
removeEventListeners();
|
||||
reject();
|
||||
};
|
||||
const handleLoad = () => {
|
||||
removeEventListeners();
|
||||
this.canvasContext?.drawImage(image, 0, 0, width || 0, height || 0);
|
||||
resolve();
|
||||
};
|
||||
image.addEventListener('error', handleError);
|
||||
image.addEventListener('load', handleLoad);
|
||||
image.src = previewSrc || '';
|
||||
this.removers.push(removeEventListeners);
|
||||
});
|
||||
|
||||
clearPreviewCanvas() {
|
||||
if (this.canvas && this.canvasContext) {
|
||||
const { width, height } = this.canvas;
|
||||
this.canvasContext.clearRect(0, 0, width, height);
|
||||
}
|
||||
}
|
||||
|
||||
loadOriginalImage = ({ src }: IImageLoader) => new Promise<void>((resolve, reject) => {
|
||||
const image = new Image();
|
||||
const removeEventListeners = () => {
|
||||
image.removeEventListener('error', handleError);
|
||||
image.removeEventListener('load', handleLoad);
|
||||
};
|
||||
const handleError = () => {
|
||||
removeEventListeners();
|
||||
reject();
|
||||
};
|
||||
const handleLoad = () => {
|
||||
removeEventListeners();
|
||||
resolve();
|
||||
};
|
||||
image.addEventListener('error', handleError);
|
||||
image.addEventListener('load', handleLoad);
|
||||
image.src = src;
|
||||
this.removers.push(removeEventListeners);
|
||||
});
|
||||
|
||||
removeEventListeners() {
|
||||
this.removers.forEach(listeners => listeners());
|
||||
this.removers = [];
|
||||
}
|
||||
|
||||
hasSize() {
|
||||
const { width, height } = this.props;
|
||||
return typeof width === 'number' && typeof height === 'number';
|
||||
}
|
||||
|
||||
setCanvasRef = (c: HTMLCanvasElement) => {
|
||||
this.canvas = c;
|
||||
if (c) this.setState({ width: c.offsetWidth });
|
||||
};
|
||||
|
||||
render() {
|
||||
const { alt, src, width, height, onClick } = this.props;
|
||||
const { loading } = this.state;
|
||||
|
||||
return (
|
||||
<div className='relative flex size-full flex-col items-center justify-center'>
|
||||
{loading ? (
|
||||
<canvas
|
||||
className={clsx({ 'hidden': !this.hasSize() })}
|
||||
ref={this.setCanvasRef}
|
||||
width={width}
|
||||
height={height}
|
||||
/>
|
||||
) : (
|
||||
<ZoomableImage
|
||||
alt={alt}
|
||||
src={src}
|
||||
onClick={onClick}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export { ImageLoader as default };
|
||||
@ -1,6 +1,6 @@
|
||||
import { Link } from '@tanstack/react-router';
|
||||
import clsx from 'clsx';
|
||||
import React, { useCallback, useEffect, useState } from 'react';
|
||||
import React, { type RefCallback, useCallback, useEffect, useState } from 'react';
|
||||
import { defineMessages, useIntl, FormattedMessage } from 'react-intl';
|
||||
import ReactSwipeableViews from 'react-swipeable-views';
|
||||
|
||||
@ -15,7 +15,7 @@ import Stack from 'pl-fe/components/ui/stack';
|
||||
import Audio from 'pl-fe/features/audio';
|
||||
import PlaceholderStatus from 'pl-fe/features/placeholder/components/placeholder-status';
|
||||
import Thread from 'pl-fe/features/status/components/thread';
|
||||
import ImageLoader from 'pl-fe/features/ui/components/image-loader';
|
||||
import ZoomableImage from 'pl-fe/features/ui/components/zoomable-image';
|
||||
import Video from 'pl-fe/features/video';
|
||||
import { useAppDispatch } from 'pl-fe/hooks/use-app-dispatch';
|
||||
import { useAppSelector } from 'pl-fe/hooks/use-app-selector';
|
||||
@ -31,6 +31,8 @@ const messages = defineMessages({
|
||||
minimize: { id: 'lightbox.minimize', defaultMessage: 'Minimize' },
|
||||
next: { id: 'lightbox.next', defaultMessage: 'Next' },
|
||||
previous: { id: 'lightbox.previous', defaultMessage: 'Previous' },
|
||||
zoomIn: { id: 'lightbox.zoom_in', defaultMessage: 'Zoom to actual size' },
|
||||
zoomOut: { id: 'lightbox.zoom_out', defaultMessage: 'Zoom to fit' },
|
||||
});
|
||||
|
||||
// you can't use 100vh, because the viewport height is taller
|
||||
@ -51,6 +53,7 @@ interface MediaModalProps {
|
||||
statusId?: string;
|
||||
index: number;
|
||||
time?: number;
|
||||
lang?: string;
|
||||
}
|
||||
|
||||
const MediaModal: React.FC<MediaModalProps & BaseModalProps> = (props) => {
|
||||
@ -68,15 +71,30 @@ const MediaModal: React.FC<MediaModalProps & BaseModalProps> = (props) => {
|
||||
const media = status?.media_attachments || props.media || [];
|
||||
|
||||
const [isLoaded, setIsLoaded] = useState<boolean>(!!status);
|
||||
const [index, setIndex] = useState<number | null>(null);
|
||||
const [index, setIndex] = useState<number>(props.index || 0);
|
||||
const [zoomedIn, setZoomedIn] = useState(false);
|
||||
const [navigationHidden, setNavigationHidden] = useState(false);
|
||||
const [isFullScreen, setIsFullScreen] = useState(!status);
|
||||
|
||||
const [viewportDimensions, setViewportDimensions] = useState<{
|
||||
width: number;
|
||||
height: number;
|
||||
}>({ width: 0, height: 0 });
|
||||
|
||||
const handleRef: RefCallback<HTMLDivElement> = useCallback((ele) => {
|
||||
if (ele?.clientWidth && ele.clientHeight) {
|
||||
setViewportDimensions({
|
||||
width: ele.clientWidth,
|
||||
height: ele.clientHeight,
|
||||
});
|
||||
}
|
||||
}, []);
|
||||
|
||||
const hasMultipleImages = media.length > 1;
|
||||
|
||||
const handleSwipe = (index: number) => setIndex(index % media.length);
|
||||
const handleNextClick = () => setIndex((getIndex() + 1) % media.length);
|
||||
const handlePrevClick = () => setIndex((media.length + getIndex() - 1) % media.length);
|
||||
const handleNextClick = () => setIndex((index + 1) % media.length);
|
||||
const handlePrevClick = () => setIndex((media.length + index - 1) % media.length);
|
||||
|
||||
const navigationHiddenClassName = navigationHidden ? 'pointer-events-none opacity-0' : '';
|
||||
|
||||
@ -100,12 +118,20 @@ const MediaModal: React.FC<MediaModalProps & BaseModalProps> = (props) => {
|
||||
window.open(mediaItem?.url);
|
||||
};
|
||||
|
||||
const getIndex = () => index !== null ? index : props.index;
|
||||
|
||||
const toggleNavigation = () => {
|
||||
setNavigationHidden(value => !value && userTouching.matches);
|
||||
};
|
||||
|
||||
const currentMedia = media[index];
|
||||
|
||||
const zoomable =
|
||||
currentMedia.type === 'image' && currentMedia.meta.original &&
|
||||
(currentMedia.meta.original.width > viewportDimensions.width || currentMedia.meta.original.height > viewportDimensions.height);
|
||||
|
||||
const handleZoomClick = useCallback(() => {
|
||||
setZoomedIn((prev) => !prev);
|
||||
}, []);
|
||||
|
||||
const content = media.map((attachment, i) => {
|
||||
let width: number | undefined, height: number | undefined;
|
||||
if (attachment.type === 'image' || attachment.type === 'gifv' || attachment.type === 'video') {
|
||||
@ -121,14 +147,19 @@ const MediaModal: React.FC<MediaModalProps & BaseModalProps> = (props) => {
|
||||
|
||||
if (attachment.type === 'image') {
|
||||
return (
|
||||
<ImageLoader
|
||||
previewSrc={attachment.preview_url}
|
||||
<ZoomableImage
|
||||
blurhash={attachment.blurhash || undefined}
|
||||
src={attachment.url}
|
||||
width={width}
|
||||
height={height}
|
||||
width={width!}
|
||||
height={height!}
|
||||
alt={attachment.description}
|
||||
key={attachment.url}
|
||||
lang={props.lang}
|
||||
onClick={toggleNavigation}
|
||||
onDoubleClick={handleZoomClick}
|
||||
onClose={onClose}
|
||||
onZoomChange={setZoomedIn}
|
||||
zoomedIn={zoomedIn && i === index}
|
||||
/>
|
||||
);
|
||||
} else if (attachment.type === 'video') {
|
||||
@ -141,7 +172,7 @@ const MediaModal: React.FC<MediaModalProps & BaseModalProps> = (props) => {
|
||||
height={height}
|
||||
startTime={time}
|
||||
detailed
|
||||
autoFocus={i === getIndex()}
|
||||
autoFocus={i === index}
|
||||
link={link}
|
||||
alt={attachment.description}
|
||||
key={attachment.url}
|
||||
@ -229,6 +260,7 @@ const MediaModal: React.FC<MediaModalProps & BaseModalProps> = (props) => {
|
||||
})
|
||||
}
|
||||
justifyContent='between'
|
||||
ref={handleRef}
|
||||
>
|
||||
<HStack
|
||||
alignItems='center'
|
||||
@ -245,6 +277,17 @@ const MediaModal: React.FC<MediaModalProps & BaseModalProps> = (props) => {
|
||||
/>
|
||||
|
||||
<HStack alignItems='center' space={2}>
|
||||
{zoomable && (
|
||||
<IconButton
|
||||
title={intl.formatMessage(zoomedIn ? messages.zoomOut : messages.zoomIn)}
|
||||
src={zoomedIn ? require('@phosphor-icons/core/regular/magnifying-glass-minus.svg') : require('@phosphor-icons/core/regular/magnifying-glass-plus.svg')}
|
||||
theme='dark'
|
||||
className='!p-1.5 hover:scale-105 hover:bg-gray-900'
|
||||
iconClassName='h-5 w-5'
|
||||
onClick={handleZoomClick}
|
||||
/>
|
||||
)}
|
||||
|
||||
<IconButton
|
||||
src={require('@phosphor-icons/core/regular/download-simple.svg')}
|
||||
theme='dark'
|
||||
@ -287,7 +330,7 @@ const MediaModal: React.FC<MediaModalProps & BaseModalProps> = (props) => {
|
||||
style={swipeableViewsStyle}
|
||||
containerStyle={containerStyle}
|
||||
onChangeIndex={handleSwipe}
|
||||
index={getIndex()}
|
||||
index={index}
|
||||
>
|
||||
{content}
|
||||
</ReactSwipeableViews>
|
||||
|
||||
Reference in New Issue
Block a user