- {spoilerButton}
-
- )}
+ {(!visible || uncached) &&
diff --git a/app/javascript/mastodon/components/spoiler_button.tsx b/app/javascript/mastodon/components/spoiler_button.tsx
new file mode 100644
index 0000000000..3ba2cbc5fa
--- /dev/null
+++ b/app/javascript/mastodon/components/spoiler_button.tsx
@@ -0,0 +1,73 @@
+import { FormattedMessage } from 'react-intl';
+
+import classNames from 'classnames';
+
+interface Props {
+ hidden?: boolean;
+ sensitive: boolean;
+ uncached?: boolean;
+ onClick: React.MouseEventHandler;
+}
+
+export const SpoilerButton: React.FC = ({
+ hidden = false,
+ sensitive,
+ uncached = false,
+ onClick,
+}) => {
+ let warning;
+ let action;
+
+ if (uncached) {
+ warning = (
+
+
+
+ );
+};
diff --git a/app/javascript/mastodon/features/audio/index.jsx b/app/javascript/mastodon/features/audio/index.jsx
index 56c0e524ad..2ce67a94ab 100644
--- a/app/javascript/mastodon/features/audio/index.jsx
+++ b/app/javascript/mastodon/features/audio/index.jsx
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
-import { defineMessages, FormattedMessage, injectIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
import classNames from 'classnames';
@@ -16,6 +16,7 @@ import VisibilityOffIcon from '@/material-icons/400-24px/visibility_off.svg?reac
import VolumeOffIcon from '@/material-icons/400-24px/volume_off-fill.svg?react';
import VolumeUpIcon from '@/material-icons/400-24px/volume_up-fill.svg?react';
import { Icon } from 'mastodon/components/icon';
+import { SpoilerButton } from 'mastodon/components/spoiler_button';
import { formatTime, getPointerPosition, fileNameFromURL } from 'mastodon/features/video';
import { Blurhash } from '../../components/blurhash';
@@ -476,14 +477,6 @@ class Audio extends PureComponent {
const progress = Math.min((currentTime / duration) * 100, 100);
const muted = this.state.muted || volume === 0;
- let warning;
-
- if (sensitive) {
- warning =
@@ -521,14 +514,7 @@ class Audio extends PureComponent {
lang={lang}
/>
- 
{
- this.setState({ loading: false, error: false });
- this.clearPreviewCanvas();
- })
- .catch(() => this.setState({ loading: false, error: true }));
- }
-
- loadPreviewCanvas = ({ previewSrc, width, height }) => new Promise((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, height);
- resolve();
- };
- image.addEventListener('error', handleError);
- image.addEventListener('load', handleLoad);
- image.src = previewSrc;
- this.removers.push(removeEventListeners);
- });
-
- clearPreviewCanvas () {
- const { width, height } = this.canvas;
- this.canvasContext.clearRect(0, 0, width, height);
- }
-
- loadOriginalImage = ({ src }) => new Promise((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 => {
- this.canvas = c;
- if (c) this.setState({ width: c.offsetWidth });
- };
-
- render () {
- const { alt, lang, src, width, height, onClick, zoomedIn } = this.props;
- const { loading } = this.state;
-
- const className = classNames('image-loader', {
- 'image-loader--loading': loading,
- 'image-loader--amorphous': !this.hasSize(),
- });
-
- return (
- = ({
+ alt = '',
+ lang = '',
+ src,
+ width,
+ height,
+ onClick,
+ onDoubleClick,
+ onClose,
+ onZoomChange,
+ zoomedIn,
+ blurhash,
+}) => {
+ useEffect(() => {
+ const handler = (e: Event) => {
+ e.preventDefault();
+ };
+
+ document.addEventListener('gesturestart', handler);
+ document.addEventListener('gesturechange', handler);
+ document.addEventListener('gestureend', handler);
+
+ return () => {
+ document.removeEventListener('gesturestart', handler);
+ document.removeEventListener('gesturechange', handler);
+ document.removeEventListener('gestureend', handler);
+ };
+ }, []);
+
+ const [dragging, setDragging] = useState(false);
+ const [loaded, setLoaded] = useState(false);
+ const [error, setError] = useState(false);
+
+ const containerRef = useRef(null);
+ const imageRef = useRef(null);
+ const doubleClickTimeoutRef = useRef | null>();
+ const zoomMatrixRef = useRef(null);
+
+ const [style, api] = useSpring(() => ({
+ x: 0,
+ y: 0,
+ scale: 1,
+ onRest: {
+ scale({ value }) {
+ if (!onZoomChange) {
+ return;
+ }
+ if (value === MIN_SCALE) {
+ onZoomChange(false);
+ } else {
+ onZoomChange(true);
+ }
+ },
+ },
+ }));
+
+ useGesture(
+ {
+ onDrag({
+ pinching,
+ cancel,
+ active,
+ last,
+ offset: [x, y],
+ velocity: [, vy],
+ direction: [, dy],
+ tap,
+ }) {
+ if (tap) {
+ if (!doubleClickTimeoutRef.current) {
+ doubleClickTimeoutRef.current = setTimeout(() => {
+ onClick?.();
+ doubleClickTimeoutRef.current = null;
+ }, DOUBLE_CLICK_THRESHOLD);
+ } else {
+ clearTimeout(doubleClickTimeoutRef.current);
+ doubleClickTimeoutRef.current = null;
+ onDoubleClick?.();
+ }
+
+ return;
+ }
+
+ if (!zoomedIn) {
+ // Swipe up/down to dismiss parent
+ if (last) {
+ if ((vy > 0.5 && dy !== 0) || Math.abs(y) > 150) {
+ onClose?.();
+ }
+
+ void api.start({ y: 0, config: config.wobbly });
+ return;
+ } else if (dy !== 0) {
+ void api.start({ y, immediate: true });
+ return;
+ }
+
+ cancel();
+ return;
+ }
+
+ if (pinching) {
+ cancel();
+ return;
+ }
+
+ if (active) {
+ setDragging(true);
+ } else {
+ setDragging(false);
+ }
+
+ void api.start({ x, y });
+ },
+
+ onPinch({ origin: [ox, oy], first, movement: [ms], offset: [s], memo }) {
+ if (!imageRef.current) {
+ return;
+ }
+
+ if (first) {
+ const { width, height, x, y } =
+ imageRef.current.getBoundingClientRect();
+ const tx = ox - (x + width / 2);
+ const ty = oy - (y + height / 2);
+
+ memo = [style.x.get(), style.y.get(), tx, ty];
+ }
+
+ const x = memo[0] - (ms - 1) * memo[2]; // eslint-disable-line @typescript-eslint/no-unsafe-member-access
+ const y = memo[1] - (ms - 1) * memo[3]; // eslint-disable-line @typescript-eslint/no-unsafe-member-access
+
+ void api.start({ scale: s, x, y });
+
+ return memo as [number, number, number, number];
+ },
+ },
+ {
+ target: imageRef,
+ drag: {
+ from: () => [style.x.get(), style.y.get()],
+ filterTaps: true,
+ bounds: () => getBounds(zoomMatrixRef.current, style.scale.get()),
+ rubberband: true,
+ },
+ pinch: {
+ scaleBounds: {
+ min: MIN_SCALE,
+ max: MAX_SCALE,
+ },
+ rubberband: true,
+ },
+ },
+ );
+
+ useEffect(() => {
+ if (!loaded || !containerRef.current || !imageRef.current) {
+ return;
+ }
+
+ zoomMatrixRef.current = createZoomMatrix(
+ containerRef.current,
+ imageRef.current,
+ width,
+ height,
+ );
+
+ if (!zoomedIn) {
+ void api.start({ scale: MIN_SCALE, x: 0, y: 0 });
+ } else if (style.scale.get() === MIN_SCALE) {
+ void api.start({ scale: zoomMatrixRef.current.initialScale, x: 0, y: 0 });
+ }
+ }, [api, style.scale, zoomedIn, width, height, loaded]);
+
+ const handleClick = useCallback((e: React.MouseEvent) => {
+ // This handler exists to cancel the onClick handler on the media modal which would
+ // otherwise close the modal. It cannot be used for actual click handling because
+ // we don't know if the user is about to pan the image or not.
+
+ e.preventDefault();
+ e.stopPropagation();
+ }, []);
+
+ const handleLoad = useCallback(() => {
+ setLoaded(true);
+ }, [setLoaded]);
+
+ const handleError = useCallback(() => {
+ setError(true);
+ }, [setError]);
+
+ return (
+
-
-
+
- {loading ? (
- <>
-
- );
- }
-
-}
diff --git a/app/javascript/mastodon/features/ui/components/image_modal.jsx b/app/javascript/mastodon/features/ui/components/image_modal.jsx
deleted file mode 100644
index f08ce15342..0000000000
--- a/app/javascript/mastodon/features/ui/components/image_modal.jsx
+++ /dev/null
@@ -1,65 +0,0 @@
-import PropTypes from 'prop-types';
-import { PureComponent } from 'react';
-
-import { defineMessages, injectIntl } from 'react-intl';
-
-import classNames from 'classnames';
-
-import CloseIcon from '@/material-icons/400-24px/close.svg?react';
-import { IconButton } from 'mastodon/components/icon_button';
-
-import ImageLoader from './image_loader';
-
-const messages = defineMessages({
- close: { id: 'lightbox.close', defaultMessage: 'Close' },
-});
-
-class ImageModal extends PureComponent {
-
- static propTypes = {
- src: PropTypes.string.isRequired,
- alt: PropTypes.string.isRequired,
- onClose: PropTypes.func.isRequired,
- intl: PropTypes.object.isRequired,
- };
-
- state = {
- navigationHidden: false,
- };
-
- toggleNavigation = () => {
- this.setState(prevState => ({
- navigationHidden: !prevState.navigationHidden,
- }));
- };
-
- render () {
- const { intl, src, alt, onClose } = this.props;
- const { navigationHidden } = this.state;
-
- const navigationClassName = classNames('media-modal__navigation', {
- 'media-modal__navigation--hidden': navigationHidden,
- });
-
- return (
-
-
-
-
-
- ) : (
-
-
- );
- }
-
-}
-
-export default injectIntl(ImageModal);
diff --git a/app/javascript/mastodon/features/ui/components/image_modal.tsx b/app/javascript/mastodon/features/ui/components/image_modal.tsx
new file mode 100644
index 0000000000..fa94cfcc3c
--- /dev/null
+++ b/app/javascript/mastodon/features/ui/components/image_modal.tsx
@@ -0,0 +1,61 @@
+import { useCallback, useState } from 'react';
+
+import { defineMessages, useIntl } from 'react-intl';
+
+import classNames from 'classnames';
+
+import CloseIcon from '@/material-icons/400-24px/close.svg?react';
+import { IconButton } from 'mastodon/components/icon_button';
+
+import { ZoomableImage } from './zoomable_image';
+
+const messages = defineMessages({
+ close: { id: 'lightbox.close', defaultMessage: 'Close' },
+});
+
+export const ImageModal: React.FC<{
+ src: string;
+ alt: string;
+ onClose: () => void;
+}> = ({ src, alt, onClose }) => {
+ const intl = useIntl();
+ const [navigationHidden, setNavigationHidden] = useState(false);
+
+ const toggleNavigation = useCallback(() => {
+ setNavigationHidden((prevState) => !prevState);
+ }, [setNavigationHidden]);
+
+ const navigationClassName = classNames('media-modal__navigation', {
+ 'media-modal__navigation--hidden': navigationHidden,
+ });
+
+ return (
+
-
-
-
-
-
+
+ );
+};
diff --git a/app/javascript/mastodon/features/ui/components/media_modal.jsx b/app/javascript/mastodon/features/ui/components/media_modal.jsx
index d69ceba539..9312805b5c 100644
--- a/app/javascript/mastodon/features/ui/components/media_modal.jsx
+++ b/app/javascript/mastodon/features/ui/components/media_modal.jsx
@@ -22,7 +22,7 @@ import Footer from 'mastodon/features/picture_in_picture/components/footer';
import Video from 'mastodon/features/video';
import { disableSwiping } from 'mastodon/initial_state';
-import ImageLoader from './image_loader';
+import { ZoomableImage } from './zoomable_image';
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
@@ -59,6 +59,12 @@ class MediaModal extends ImmutablePureComponent {
}));
};
+ handleZoomChange = (zoomedIn) => {
+ this.setState({
+ zoomedIn,
+ });
+ };
+
handleSwipe = (index) => {
this.setState({
index: index % this.props.media.size,
@@ -165,23 +171,26 @@ class MediaModal extends ImmutablePureComponent {
const leftNav = media.size > 1 && ;
const rightNav = media.size > 1 && ;
- const content = media.map((image) => {
+ const content = media.map((image, idx) => {
const width = image.getIn(['meta', 'original', 'width']) || null;
const height = image.getIn(['meta', 'original', 'height']) || null;
const description = image.getIn(['translation', 'description']) || image.get('description');
if (image.get('type') === 'image') {
return (
-
+
+
+
+
+
+
+
- 
-
- );
- }
-}
-
-export default ZoomableImage;
diff --git a/app/javascript/mastodon/features/ui/components/zoomable_image.tsx b/app/javascript/mastodon/features/ui/components/zoomable_image.tsx
new file mode 100644
index 0000000000..85e29e6aea
--- /dev/null
+++ b/app/javascript/mastodon/features/ui/components/zoomable_image.tsx
@@ -0,0 +1,319 @@
+import { useState, useCallback, useRef, useEffect } from 'react';
+
+import classNames from 'classnames';
+
+import { useSpring, animated, config } from '@react-spring/web';
+import { createUseGesture, dragAction, pinchAction } from '@use-gesture/react';
+
+import { Blurhash } from 'mastodon/components/blurhash';
+import { LoadingIndicator } from 'mastodon/components/loading_indicator';
+
+const MIN_SCALE = 1;
+const MAX_SCALE = 4;
+const DOUBLE_CLICK_THRESHOLD = 250;
+
+interface ZoomMatrix {
+ containerWidth: number;
+ containerHeight: number;
+ imageWidth: number;
+ imageHeight: number;
+ initialScale: number;
+}
+
+const createZoomMatrix = (
+ container: HTMLElement,
+ image: HTMLImageElement,
+ fullWidth: number,
+ fullHeight: number,
+): ZoomMatrix => {
+ const { clientWidth, clientHeight } = container;
+ const { offsetWidth, offsetHeight } = image;
+
+ const type =
+ fullWidth / fullHeight < clientWidth / clientHeight ? 'width' : 'height';
+
+ const initialScale =
+ type === 'width'
+ ? Math.min(clientWidth, fullWidth) / offsetWidth
+ : Math.min(clientHeight, fullHeight) / offsetHeight;
+
+ return {
+ containerWidth: clientWidth,
+ containerHeight: clientHeight,
+ imageWidth: offsetWidth,
+ imageHeight: offsetHeight,
+ initialScale,
+ };
+};
+
+const useGesture = createUseGesture([dragAction, pinchAction]);
+
+const getBounds = (zoomMatrix: ZoomMatrix | null, scale: number) => {
+ if (!zoomMatrix || scale === MIN_SCALE) {
+ return {
+ left: -Infinity,
+ right: Infinity,
+ top: -Infinity,
+ bottom: Infinity,
+ };
+ }
+
+ const { containerWidth, containerHeight, imageWidth, imageHeight } =
+ zoomMatrix;
+
+ const bounds = {
+ left: -Math.max(imageWidth * scale - containerWidth, 0) / 2,
+ right: Math.max(imageWidth * scale - containerWidth, 0) / 2,
+ top: -Math.max(imageHeight * scale - containerHeight, 0) / 2,
+ bottom: Math.max(imageHeight * scale - containerHeight, 0) / 2,
+ };
+
+ return bounds;
+};
+
+interface ZoomableImageProps {
+ alt?: string;
+ lang?: string;
+ src: string;
+ width: number;
+ height: number;
+ onClick?: () => void;
+ onDoubleClick?: () => void;
+ onClose?: () => void;
+ onZoomChange?: (zoomedIn: boolean) => void;
+ zoomedIn?: boolean;
+ blurhash?: string;
+}
+
+export const ZoomableImage: React.FC
+ {!loaded && blurhash && (
+
+ );
+};
diff --git a/app/javascript/mastodon/features/video/index.jsx b/app/javascript/mastodon/features/video/index.jsx
index 89a8ba560a..33194f0271 100644
--- a/app/javascript/mastodon/features/video/index.jsx
+++ b/app/javascript/mastodon/features/video/index.jsx
@@ -1,7 +1,7 @@
import PropTypes from 'prop-types';
import { PureComponent } from 'react';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
import classNames from 'classnames';
@@ -19,6 +19,7 @@ import VolumeOffIcon from '@/material-icons/400-24px/volume_off-fill.svg?react';
import VolumeUpIcon from '@/material-icons/400-24px/volume_up-fill.svg?react';
import { Blurhash } from 'mastodon/components/blurhash';
import { Icon } from 'mastodon/components/icon';
+import { SpoilerButton } from 'mastodon/components/spoiler_button';
import { playerSettings } from 'mastodon/settings';
import { displayMedia, useBlurhash } from '../../initial_state';
@@ -549,14 +550,6 @@ class Video extends PureComponent {
preload = 'none';
}
- let warning;
-
- if (sensitive) {
- warning =
+
+ )}
+
+
@@ -599,14 +592,7 @@ class Video extends PureComponent {
style={{ width: '100%' }}
/>}
-
-
-
+
diff --git a/app/javascript/mastodon/locales/nan.json b/app/javascript/mastodon/locales/nan.json
index 99b880c61f..57eef0a874 100644
--- a/app/javascript/mastodon/locales/nan.json
+++ b/app/javascript/mastodon/locales/nan.json
@@ -358,6 +358,7 @@
"follow_suggestions.hints.friends_of_friends": "Tsit ê個人資料tī lí跟tuè ê lâng之間真流行。",
"follow_suggestions.hints.most_followed": "Tsit ê個人資料是 {domain} 內，有足tsē跟tuè者ê其中tsit ê。",
"follow_suggestions.hints.most_interactions": "Tsit ê個人資料tsi̍t-tsām-á佇 {domain} 有得著真tsē關注。",
+ "follow_suggestions.hints.similar_to_recently_followed": "Tsit ê個人資料kap lí最近跟tuè ê口座相siâng。",
"follow_suggestions.personalized_suggestion": "個人化ê推薦",
"follow_suggestions.popular_suggestion": "流行ê推薦",
"follow_suggestions.popular_suggestion_longer": "佇{domain} 足有lâng緣",
@@ -391,6 +392,9 @@
"hashtag.follow": "跟tuè hashtag",
"hashtag.unfollow": "取消跟tuè hashtag",
"hashtags.and_other": "……kap 其他 {count, plural, other {# ê}}",
+ "hints.profiles.followers_may_be_missing": "Tsit ê個人資料ê跟tuè者資訊可能有落勾ê。",
+ "hints.profiles.follows_may_be_missing": "Tsit ê口座所跟tuè ê ê資訊可能有落勾ê。",
+ "hints.profiles.posts_may_be_missing": "Tsit ê口座ê tsi̍t kuá PO文可能有落勾ê。",
"hints.profiles.see_more_followers": "佇 {domain} 看koh khah tsē跟tuè lí ê",
"hints.profiles.see_more_follows": "佇 {domain} 看koh khah tsē lí跟tuè ê",
"hints.profiles.see_more_posts": "佇 {domain} 看koh khah tsē ê PO文",
@@ -403,6 +407,24 @@
"home.pending_critical_update.link": "看更新內容",
"home.pending_critical_update.title": "有重要ê安全更新！",
"home.show_announcements": "顯示公告",
+ "ignore_notifications_modal.disclaimer": "Lí所忽略in ê通知ê用者，Mastodonbē當kā lí通知。忽略通知bē當阻擋訊息ê寄送。",
+ "ignore_notifications_modal.filter_instead": "改做過濾",
+ "ignore_notifications_modal.filter_to_act_users": "Lí猶原ē當接受、拒絕猶是檢舉用者",
+ "ignore_notifications_modal.filter_to_avoid_confusion": "過濾ē當避免可能ê bē分明。",
+ "ignore_notifications_modal.filter_to_review_separately": "Lí ē當個別檢視所過濾ê通知",
+ "ignore_notifications_modal.ignore": "Kā通知忽略",
+ "ignore_notifications_modal.limited_accounts_title": "Kám beh忽略受限制ê口座送來ê通知？",
+ "ignore_notifications_modal.new_accounts_title": "Kám beh忽略新口座送來ê通知？",
+ "ignore_notifications_modal.not_followers_title": "Kám beh忽略無跟tuè lí ê口座送來ê通知？",
+ "ignore_notifications_modal.not_following_title": "Kám beh忽略lí 無跟tuè ê口座送來ê通知？",
+ "ignore_notifications_modal.private_mentions_title": "忽略ka-kī主動送ê私人提起ê通知？",
+ "info_button.label": "幫tsān",
+ "info_button.what_is_alt_text": "
Siánn物是替代文字？
替代文字kā視覺有障礙、網路速度khah慢，á是beh tshuē頂下文ê lâng，提供圖ê敘述。
Lí ē當通過寫明白、簡單kap客觀ê替代文字，替逐家改善容易使用性kap幫tsān理解。
- 掌握重要ê因素
- 替圖寫摘要ê文字
- 用規則ê語句結構
- 避免重複ê資訊
- 專注佇趨勢kap佇複雜視覺（比如圖表á是地圖）內底tshuē關鍵