= ({ status, expanded = false, onE
ref={node}
tabIndex={0}
key='content'
- className={classNames('status__content', {
- 'status__content--big': onlyEmoji,
+ className={classNames(baseClassName, 'status-content', {
+ 'leading-normal big-emoji': onlyEmoji,
})}
style={directionStyle}
dangerouslySetInnerHTML={content}
diff --git a/app/soapbox/components/statuses/__tests__/moderation-overlay.test.tsx b/app/soapbox/components/statuses/__tests__/moderation-overlay.test.tsx
new file mode 100644
index 000000000..a94923c55
--- /dev/null
+++ b/app/soapbox/components/statuses/__tests__/moderation-overlay.test.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { fireEvent, render, screen } from '../../../jest/test-helpers';
+import ModerationOverlay from '../moderation-overlay';
+
+describe('
', () => {
+ it('defaults to enabled', () => {
+ render(
);
+ expect(screen.getByTestId('moderation-overlay')).toHaveTextContent('Content Under Review');
+ });
+
+ it('can be toggled', () => {
+ render(
);
+
+ fireEvent.click(screen.getByTestId('button'));
+ expect(screen.getByTestId('moderation-overlay')).not.toHaveTextContent('Content Under Review');
+ expect(screen.getByTestId('moderation-overlay')).toHaveTextContent('Hide');
+ });
+});
diff --git a/app/soapbox/components/statuses/moderation-overlay.tsx b/app/soapbox/components/statuses/moderation-overlay.tsx
new file mode 100644
index 000000000..6d572eb3a
--- /dev/null
+++ b/app/soapbox/components/statuses/moderation-overlay.tsx
@@ -0,0 +1,93 @@
+import classNames from 'clsx';
+import React, { useState } from 'react';
+import { defineMessages, useIntl } from 'react-intl';
+
+import { useSoapboxConfig } from 'soapbox/hooks';
+
+import { Button, HStack, Text } from '../ui';
+
+const messages = defineMessages({
+ hide: { id: 'moderation_overlay.hide', defaultMessage: 'Hide' },
+ title: { id: 'moderation_overlay.title', defaultMessage: 'Content Under Review' },
+ subtitle: { id: 'moderation_overlay.subtitle', defaultMessage: 'This Post has been sent to Moderation for review and is only visible to you. If you believe this is an error please contact Support.' },
+ contact: { id: 'moderation_overlay.contact', defaultMessage: 'Contact' },
+ show: { id: 'moderation_overlay.show', defaultMessage: 'Show Content' },
+});
+
+const ModerationOverlay = () => {
+ const intl = useIntl();
+
+ const { links } = useSoapboxConfig();
+
+ const [visible, setVisible] = useState
(false);
+
+ const toggleVisibility = (event: React.MouseEvent) => {
+ event.stopPropagation();
+
+ setVisible((prevValue) => !prevValue);
+ };
+
+ return (
+
+ {visible ? (
+
+ ) : (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default FediverseStep;
diff --git a/app/soapbox/features/status/index.tsx b/app/soapbox/features/status/index.tsx
index 81cb0a152..c5130b759 100644
--- a/app/soapbox/features/status/index.tsx
+++ b/app/soapbox/features/status/index.tsx
@@ -29,6 +29,7 @@ import MissingIndicator from 'soapbox/components/missing_indicator';
import PullToRefresh from 'soapbox/components/pull-to-refresh';
import ScrollableList from 'soapbox/components/scrollable_list';
import StatusActionBar from 'soapbox/components/status-action-bar';
+import ModerationOverlay from 'soapbox/components/statuses/moderation-overlay';
import SubNavigation from 'soapbox/components/sub_navigation';
import Tombstone from 'soapbox/components/tombstone';
import { Column, Stack } from 'soapbox/components/ui';
@@ -134,6 +135,7 @@ const Thread: React.FC = (props) => {
const me = useAppSelector(state => state.me);
const status = useAppSelector(state => getStatus(state, { id: props.params.statusId }));
const displayMedia = settings.get('displayMedia') as DisplayMedia;
+ const inReview = status?.visibility === 'self';
const { ancestorsIds, descendantsIds } = useAppSelector(state => {
let ancestorsIds = ImmutableOrderedSet();
@@ -459,11 +461,19 @@ const Thread: React.FC = (props) => {
+ {inReview ? (
+
+ ) : null}
+
= ({ onClose }) => {
const { id: statusId, privacy, in_reply_to: inReplyTo, quote } = compose!;
- const hasComposeContent = checkComposeContent(compose);
-
const onClickClose = () => {
- if (hasComposeContent) {
+ if (checkComposeContent(compose)) {
dispatch(openModal('CONFIRM', {
icon: require('@tabler/icons/trash.svg'),
heading: statusId
diff --git a/app/soapbox/features/ui/components/who-to-follow-panel.tsx b/app/soapbox/features/ui/components/who-to-follow-panel.tsx
index 418d2143c..852abcdba 100644
--- a/app/soapbox/features/ui/components/who-to-follow-panel.tsx
+++ b/app/soapbox/features/ui/components/who-to-follow-panel.tsx
@@ -29,6 +29,10 @@ const WhoToFollowPanel = ({ limit }: IWhoToFollowPanel) => {
dismissSuggestion.mutate(account.id);
};
+ if (!isFetching && !suggestions.length) {
+ return null;
+ }
+
return (
}
diff --git a/app/soapbox/features/ui/util/fullscreen.js b/app/soapbox/features/ui/util/fullscreen.ts
similarity index 57%
rename from app/soapbox/features/ui/util/fullscreen.js
rename to app/soapbox/features/ui/util/fullscreen.ts
index cf5d0cf98..5e13d68cc 100644
--- a/app/soapbox/features/ui/util/fullscreen.js
+++ b/app/soapbox/features/ui/util/fullscreen.ts
@@ -1,31 +1,43 @@
// APIs for normalizing fullscreen operations. Note that Edge uses
// the WebKit-prefixed APIs currently (as of Edge 16).
-export const isFullscreen = () => document.fullscreenElement ||
- document.webkitFullscreenElement ||
- document.mozFullScreenElement;
+export const isFullscreen = (): boolean => {
+ return Boolean(
+ document.fullscreenElement ||
+ // @ts-ignore
+ document.webkitFullscreenElement ||
+ // @ts-ignore
+ document.mozFullScreenElement,
+ );
+};
-export const exitFullscreen = () => {
+export const exitFullscreen = (): void => {
if (document.exitFullscreen) {
document.exitFullscreen();
- } else if (document.webkitExitFullscreen) {
+ } else if ('webkitExitFullscreen' in document) {
+ // @ts-ignore
document.webkitExitFullscreen();
- } else if (document.mozCancelFullScreen) {
+ } else if ('mozCancelFullScreen' in document) {
+ // @ts-ignore
document.mozCancelFullScreen();
}
};
-export const requestFullscreen = el => {
+export const requestFullscreen = (el: Element): void => {
if (el.requestFullscreen) {
el.requestFullscreen();
- } else if (el.webkitRequestFullscreen) {
+ } else if ('webkitRequestFullscreen' in el) {
+ // @ts-ignore
el.webkitRequestFullscreen();
- } else if (el.mozRequestFullScreen) {
+ } else if ('mozRequestFullScreen' in el) {
+ // @ts-ignore
el.mozRequestFullScreen();
}
};
-export const attachFullscreenListener = (listener) => {
+type FullscreenListener = (this: Document, ev: Event) => void;
+
+export const attachFullscreenListener = (listener: FullscreenListener): void => {
if ('onfullscreenchange' in document) {
document.addEventListener('fullscreenchange', listener);
} else if ('onwebkitfullscreenchange' in document) {
@@ -35,7 +47,7 @@ export const attachFullscreenListener = (listener) => {
}
};
-export const detachFullscreenListener = (listener) => {
+export const detachFullscreenListener = (listener: FullscreenListener): void => {
if ('onfullscreenchange' in document) {
document.removeEventListener('fullscreenchange', listener);
} else if ('onwebkitfullscreenchange' in document) {
diff --git a/app/soapbox/features/video/index.js b/app/soapbox/features/video/index.js
deleted file mode 100644
index 1d6b55ff6..000000000
--- a/app/soapbox/features/video/index.js
+++ /dev/null
@@ -1,625 +0,0 @@
-import classNames from 'clsx';
-import { fromJS, is } from 'immutable';
-import debounce from 'lodash/debounce';
-import throttle from 'lodash/throttle';
-import PropTypes from 'prop-types';
-import React from 'react';
-import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
-import { connect } from 'react-redux';
-
-import { getSettings } from 'soapbox/actions/settings';
-import Blurhash from 'soapbox/components/blurhash';
-import Icon from 'soapbox/components/icon';
-import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from 'soapbox/utils/media_aspect_ratio';
-
-import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
-
-const DEFAULT_HEIGHT = 300;
-
-const messages = defineMessages({
- play: { id: 'video.play', defaultMessage: 'Play' },
- pause: { id: 'video.pause', defaultMessage: 'Pause' },
- mute: { id: 'video.mute', defaultMessage: 'Mute sound' },
- unmute: { id: 'video.unmute', defaultMessage: 'Unmute sound' },
- hide: { id: 'video.hide', defaultMessage: 'Hide video' },
- expand: { id: 'video.expand', defaultMessage: 'Expand video' },
- close: { id: 'video.close', defaultMessage: 'Close video' },
- fullscreen: { id: 'video.fullscreen', defaultMessage: 'Full screen' },
- exit_fullscreen: { id: 'video.exit_fullscreen', defaultMessage: 'Exit full screen' },
-});
-
-export const formatTime = secondsNum => {
- let hours = Math.floor(secondsNum / 3600);
- let minutes = Math.floor((secondsNum - (hours * 3600)) / 60);
- let seconds = secondsNum - (hours * 3600) - (minutes * 60);
-
- if (hours < 10) hours = '0' + hours;
- if (minutes < 10) minutes = '0' + minutes;
- if (seconds < 10) seconds = '0' + seconds;
-
- return (hours === '00' ? '' : `${hours}:`) + `${minutes}:${seconds}`;
-};
-
-export const findElementPosition = el => {
- let box;
-
- if (el.getBoundingClientRect && el.parentNode) {
- box = el.getBoundingClientRect();
- }
-
- if (!box) {
- return {
- left: 0,
- top: 0,
- };
- }
-
- const docEl = document.documentElement;
- const body = document.body;
-
- const clientLeft = docEl.clientLeft || body.clientLeft || 0;
- const scrollLeft = window.pageXOffset || body.scrollLeft;
- const left = (box.left + scrollLeft) - clientLeft;
-
- const clientTop = docEl.clientTop || body.clientTop || 0;
- const scrollTop = window.pageYOffset || body.scrollTop;
- const top = (box.top + scrollTop) - clientTop;
-
- return {
- left: Math.round(left),
- top: Math.round(top),
- };
-};
-
-export const getPointerPosition = (el, event) => {
- const position = {};
- const box = findElementPosition(el);
- const boxW = el.offsetWidth;
- const boxH = el.offsetHeight;
- const boxY = box.top;
- const boxX = box.left;
-
- let pageY = event.pageY;
- let pageX = event.pageX;
-
- if (event.changedTouches) {
- pageX = event.changedTouches[0].pageX;
- pageY = event.changedTouches[0].pageY;
- }
-
- position.y = Math.max(0, Math.min(1, (pageY - boxY) / boxH));
- position.x = Math.max(0, Math.min(1, (pageX - boxX) / boxW));
-
- return position;
-};
-
-export const fileNameFromURL = str => {
- const url = new URL(str);
- const pathname = url.pathname;
- const index = pathname.lastIndexOf('/');
-
- return pathname.substring(index + 1);
-};
-
-const mapStateToProps = state => ({
- displayMedia: getSettings(state).get('displayMedia'),
-});
-
-export default @connect(mapStateToProps)
-@injectIntl
-class Video extends React.PureComponent {
-
- static propTypes = {
- preview: PropTypes.string,
- src: PropTypes.string.isRequired,
- alt: PropTypes.string,
- width: PropTypes.number,
- height: PropTypes.number,
- sensitive: PropTypes.bool,
- startTime: PropTypes.number,
- onOpenVideo: PropTypes.func,
- onCloseVideo: PropTypes.func,
- detailed: PropTypes.bool,
- inline: PropTypes.bool,
- cacheWidth: PropTypes.func,
- visible: PropTypes.bool,
- onToggleVisibility: PropTypes.func,
- intl: PropTypes.object.isRequired,
- blurhash: PropTypes.string,
- link: PropTypes.node,
- aspectRatio: PropTypes.number,
- displayMedia: PropTypes.string,
- };
-
- state = {
- currentTime: 0,
- duration: 0,
- volume: 0.5,
- paused: true,
- dragging: false,
- containerWidth: this.props.width,
- fullscreen: false,
- hovered: false,
- muted: false,
- revealed: this.props.visible !== undefined ? this.props.visible : (this.props.displayMedia !== 'hide_all' && !this.props.sensitive || this.props.displayMedia === 'show_all'),
- };
-
- setPlayerRef = c => {
- this.player = c;
-
- if (this.player) {
- this._setDimensions();
- }
- }
-
- _setDimensions() {
- const width = this.player.offsetWidth;
-
- if (this.props.cacheWidth) {
- this.props.cacheWidth(width);
- }
-
- this.setState({
- containerWidth: width,
- });
- }
-
- setVideoRef = c => {
- this.video = c;
-
- if (this.video) {
- this.setState({ volume: this.video.volume, muted: this.video.muted });
- }
- }
-
- setSeekRef = c => {
- this.seek = c;
- }
-
- setVolumeRef = c => {
- this.volume = c;
- }
-
- handleClickRoot = e => e.stopPropagation();
-
- handlePlay = () => {
- this.setState({ paused: false });
- }
-
- handlePause = () => {
- this.setState({ paused: true });
- }
-
- handleTimeUpdate = () => {
- this.setState({
- currentTime: Math.floor(this.video.currentTime),
- duration: Math.floor(this.video.duration),
- });
- }
-
- handleVolumeMouseDown = e => {
- document.addEventListener('mousemove', this.handleMouseVolSlide, true);
- document.addEventListener('mouseup', this.handleVolumeMouseUp, true);
- document.addEventListener('touchmove', this.handleMouseVolSlide, true);
- document.addEventListener('touchend', this.handleVolumeMouseUp, true);
-
- this.handleMouseVolSlide(e);
-
- e.preventDefault();
- e.stopPropagation();
- }
-
- handleVolumeMouseUp = () => {
- document.removeEventListener('mousemove', this.handleMouseVolSlide, true);
- document.removeEventListener('mouseup', this.handleVolumeMouseUp, true);
- document.removeEventListener('touchmove', this.handleMouseVolSlide, true);
- document.removeEventListener('touchend', this.handleVolumeMouseUp, true);
- }
-
- handleMouseVolSlide = throttle(e => {
- const { x } = getPointerPosition(this.volume, e);
-
- if (!isNaN(x)) {
- let slideamt = x;
-
- if (x > 1) {
- slideamt = 1;
- } else if (x < 0) {
- slideamt = 0;
- }
-
- this.video.volume = slideamt;
- this.setState({ volume: slideamt });
- }
- }, 60);
-
- handleMouseDown = e => {
- document.addEventListener('mousemove', this.handleMouseMove, true);
- document.addEventListener('mouseup', this.handleMouseUp, true);
- document.addEventListener('touchmove', this.handleMouseMove, true);
- document.addEventListener('touchend', this.handleMouseUp, true);
-
- this.setState({ dragging: true });
- this.video.pause();
- this.handleMouseMove(e);
-
- e.preventDefault();
- e.stopPropagation();
- }
-
- handleMouseUp = () => {
- document.removeEventListener('mousemove', this.handleMouseMove, true);
- document.removeEventListener('mouseup', this.handleMouseUp, true);
- document.removeEventListener('touchmove', this.handleMouseMove, true);
- document.removeEventListener('touchend', this.handleMouseUp, true);
-
- this.setState({ dragging: false });
- this.video.play();
- }
-
- handleMouseMove = throttle(e => {
- const { x } = getPointerPosition(this.seek, e);
- const currentTime = Math.floor(this.video.duration * x);
-
- if (!isNaN(currentTime)) {
- this.video.currentTime = currentTime;
- this.setState({ currentTime });
- }
- }, 60);
-
- seekBy(time) {
- const currentTime = this.video.currentTime + time;
-
- if (!isNaN(currentTime)) {
- this.setState({ currentTime }, () => {
- this.video.currentTime = currentTime;
- });
- }
- }
-
- handleVideoKeyDown = e => {
- // On the video element or the seek bar, we can safely use the space bar
- // for playback control because there are no buttons to press
-
- if (e.key === ' ') {
- e.preventDefault();
- e.stopPropagation();
- this.togglePlay();
- }
- }
-
- handleKeyDown = e => {
- const frameTime = 1 / 25;
-
- switch (e.key) {
- case 'k':
- e.preventDefault();
- e.stopPropagation();
- this.togglePlay();
- break;
- case 'm':
- e.preventDefault();
- e.stopPropagation();
- this.toggleMute();
- break;
- case 'f':
- e.preventDefault();
- e.stopPropagation();
- this.toggleFullscreen();
- break;
- case 'j':
- e.preventDefault();
- e.stopPropagation();
- this.seekBy(-10);
- break;
- case 'l':
- e.preventDefault();
- e.stopPropagation();
- this.seekBy(10);
- break;
- case ',':
- e.preventDefault();
- e.stopPropagation();
- this.seekBy(-frameTime);
- break;
- case '.':
- e.preventDefault();
- e.stopPropagation();
- this.seekBy(frameTime);
- break;
- }
-
- // If we are in fullscreen mode, we don't want any hotkeys
- // interacting with the UI that's not visible
-
- if (this.state.fullscreen) {
- e.preventDefault();
- e.stopPropagation();
-
- if (e.key === 'Escape') {
- exitFullscreen();
- }
- }
- }
-
- togglePlay = (e) => {
- if (e) {
- e.stopPropagation();
- }
-
- if (this.state.paused) {
- this.setState({ paused: false }, () => this.video.play());
- } else {
- this.setState({ paused: true }, () => this.video.pause());
- }
- }
-
- toggleFullscreen = () => {
- if (isFullscreen()) {
- exitFullscreen();
- } else {
- requestFullscreen(this.player);
- }
- }
-
- componentDidMount() {
- document.addEventListener('fullscreenchange', this.handleFullscreenChange, true);
- document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange, true);
- document.addEventListener('mozfullscreenchange', this.handleFullscreenChange, true);
- document.addEventListener('MSFullscreenChange', this.handleFullscreenChange, true);
-
- window.addEventListener('scroll', this.handleScroll);
- window.addEventListener('resize', this.handleResize, { passive: true });
- }
-
- componentWillUnmount() {
- window.removeEventListener('scroll', this.handleScroll);
- window.removeEventListener('resize', this.handleResize);
-
- document.removeEventListener('fullscreenchange', this.handleFullscreenChange, true);
- document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange, true);
- document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange, true);
- document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange, true);
- }
-
- componentDidUpdate(prevProps, prevState) {
- const { visible } = this.props;
-
- if (!is(visible, prevProps.visible) && visible !== undefined) {
- this.setState({ revealed: visible });
- }
-
- if (prevState.revealed && !this.state.revealed && this.video) {
- this.video.pause();
- }
- }
-
- handleResize = debounce(() => {
- if (this.player) {
- this._setDimensions();
- }
- }, 250, {
- trailing: true,
- });
-
- handleScroll = throttle(() => {
- if (!this.video) {
- return;
- }
-
- const { top, height } = this.video.getBoundingClientRect();
- const inView = (top <= (window.innerHeight || document.documentElement.clientHeight)) && (top + height >= 0);
-
- if (!this.state.paused && !inView) {
- this.setState({ paused: true }, () => this.video.pause());
- }
- }, 150, { trailing: true })
-
- handleFullscreenChange = () => {
- this.setState({ fullscreen: isFullscreen() });
- }
-
- handleMouseEnter = () => {
- this.setState({ hovered: true });
- }
-
- handleMouseLeave = () => {
- this.setState({ hovered: false });
- }
-
- toggleMute = () => {
- const muted = !this.video.muted;
-
- this.setState({ muted }, () => {
- this.video.muted = muted;
- });
- }
-
- toggleReveal = (e) => {
- e.stopPropagation();
-
- if (this.props.onToggleVisibility) {
- this.props.onToggleVisibility();
- } else {
- this.setState({ revealed: !this.state.revealed });
- }
- }
-
- handleLoadedData = () => {
- if (this.props.startTime) {
- this.video.currentTime = this.props.startTime;
- this.video.play();
- }
- }
-
- handleProgress = () => {
- if (this.video.buffered.length > 0) {
- this.setState({ buffer: this.video.buffered.end(0) / this.video.duration * 100 });
- }
- }
-
- handleVolumeChange = () => {
- this.setState({ volume: this.video.volume, muted: this.video.muted });
- }
-
- handleOpenVideo = () => {
- const { src, preview, width, height, alt } = this.props;
-
- const media = fromJS({
- type: 'video',
- url: src,
- preview_url: preview,
- description: alt,
- width,
- height,
- });
-
- this.video.pause();
- this.props.onOpenVideo(media, this.video.currentTime);
- }
-
- handleCloseVideo = () => {
- this.video.pause();
- this.props.onCloseVideo();
- }
-
- getPreload = () => {
- const { startTime, detailed } = this.props;
- const { dragging, fullscreen } = this.state;
-
- if (startTime || fullscreen || dragging) {
- return 'auto';
- } else if (detailed) {
- return 'metadata';
- } else {
- return 'none';
- }
- }
-
- render() {
- const { src, inline, onCloseVideo, intl, alt, detailed, sensitive, link, aspectRatio, blurhash } = this.props;
- const { containerWidth, currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
- const progress = (currentTime / duration) * 100;
- const playerStyle = {};
-
- let { width, height } = this.props;
-
- if (inline && containerWidth) {
- width = containerWidth;
- const minSize = containerWidth / (16 / 9);
-
- if (isPanoramic(aspectRatio)) {
- height = Math.max(Math.floor(containerWidth / maximumAspectRatio), minSize);
- } else if (isPortrait(aspectRatio)) {
- height = Math.max(Math.floor(containerWidth / minimumAspectRatio), minSize);
- } else {
- height = Math.floor(containerWidth / aspectRatio);
- }
-
- playerStyle.height = height || DEFAULT_HEIGHT;
- }
-
- let warning;
-
- if (sensitive) {
- warning = ;
- } else {
- warning = ;
- }
-
- return (
-
-
-
- {revealed &&
}
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- {(detailed || fullscreen) && (
-
- {formatTime(currentTime)}
- /
- {formatTime(duration)}
-
- )}
-
- {link &&
{link}}
-
-
-
- {(sensitive && !onCloseVideo) && }
-
-
-
-
-
+
+
+ {revealed && (
+
+ )}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {(detailed || fullscreen) && (
+
+ {formatTime(currentTime)}
+ /
+ {formatTime(duration)}
+
+ )}
+
+ {link && (
+
{link}
+ )}
+
+
+
+ {(sensitive && !onCloseVideo) && (
+
+ )}
+
+
+
+
+
+