= ({ 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/features/landing_page/index.tsx b/app/soapbox/features/landing_page/index.tsx
index 76e77bcfa..937e599c8 100644
--- a/app/soapbox/features/landing_page/index.tsx
+++ b/app/soapbox/features/landing_page/index.tsx
@@ -8,6 +8,8 @@ import RegistrationForm from 'soapbox/features/auth_login/components/registratio
import { useAppDispatch, useAppSelector, useFeatures, useSoapboxConfig } from 'soapbox/hooks';
import { capitalize } from 'soapbox/utils/strings';
+import './instance-description.css';
+
const LandingPage = () => {
const dispatch = useAppDispatch();
const features = useFeatures();
diff --git a/app/soapbox/features/landing_page/instance-description.css b/app/soapbox/features/landing_page/instance-description.css
new file mode 100644
index 000000000..f67097de0
--- /dev/null
+++ b/app/soapbox/features/landing_page/instance-description.css
@@ -0,0 +1,14 @@
+/* Instance HTML from the API. */
+.instance-description a {
+ @apply underline;
+}
+
+.instance-description b,
+.instance-description strong {
+ @apply font-bold;
+}
+
+.instance-description i,
+.instance-description em {
+ @apply italic;
+}
diff --git a/app/soapbox/features/onboarding/onboarding-wizard.tsx b/app/soapbox/features/onboarding/onboarding-wizard.tsx
index 7b82e8862..ae3c3c74c 100644
--- a/app/soapbox/features/onboarding/onboarding-wizard.tsx
+++ b/app/soapbox/features/onboarding/onboarding-wizard.tsx
@@ -6,16 +6,19 @@ import ReactSwipeableViews from 'react-swipeable-views';
import { endOnboarding } from 'soapbox/actions/onboarding';
import LandingGradient from 'soapbox/components/landing-gradient';
import { HStack } from 'soapbox/components/ui';
+import { useFeatures } from 'soapbox/hooks';
import AvatarSelectionStep from './steps/avatar-selection-step';
import BioStep from './steps/bio-step';
import CompletedStep from './steps/completed-step';
import CoverPhotoSelectionStep from './steps/cover-photo-selection-step';
import DisplayNameStep from './steps/display-name-step';
+import FediverseStep from './steps/fediverse-step';
import SuggestedAccountsStep from './steps/suggested-accounts-step';
const OnboardingWizard = () => {
const dispatch = useDispatch();
+ const features = useFeatures();
const [currentStep, setCurrentStep] = React.useState
(0);
@@ -41,9 +44,14 @@ const OnboardingWizard = () => {
,
,
,
- ,
];
+ if (features.federating){
+ steps.push();
+ }
+
+ steps.push();
+
const handleKeyUp = ({ key }: KeyboardEvent): void => {
switch (key) {
case 'ArrowLeft':
diff --git a/app/soapbox/features/onboarding/steps/fediverse-step.tsx b/app/soapbox/features/onboarding/steps/fediverse-step.tsx
new file mode 100644
index 000000000..6dbb26620
--- /dev/null
+++ b/app/soapbox/features/onboarding/steps/fediverse-step.tsx
@@ -0,0 +1,88 @@
+import * as React from 'react';
+import { FormattedMessage } from 'react-intl';
+
+import Account from 'soapbox/components/account';
+import { Button, Card, CardBody, Icon, Stack, Text } from 'soapbox/components/ui';
+import { useAppSelector, useOwnAccount } from 'soapbox/hooks';
+
+import type { Account as AccountEntity } from 'soapbox/types/entities';
+
+const FediverseStep = ({ onNext }: { onNext: () => void }) => {
+ const siteTitle = useAppSelector((state) => state.instance.title);
+ const account = useOwnAccount() as AccountEntity;
+
+ return (
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ );
+};
+
+export default FediverseStep;
diff --git a/app/soapbox/features/ui/components/compose_modal.tsx b/app/soapbox/features/ui/components/compose_modal.tsx
index 119bcd05f..5dc86766b 100644
--- a/app/soapbox/features/ui/components/compose_modal.tsx
+++ b/app/soapbox/features/ui/components/compose_modal.tsx
@@ -27,10 +27,8 @@ const ComposeModal: React.FC = ({ 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/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) && (
+
+ )}
+
+
+
+
+
+