sd/chuckya-fe-standalone
2
0
Fork 0
Code Pull requests Activity

Merge remote-tracking branch 'catstodon/feature/emoji_reactions'

Browse source
This commit is contained in:
Essem 2023-05-09 22:37:07 -05:00
commit 2cf4b3a95b
No known key found for this signature in database
GPG key ID: 7D497397CC3A2A8C
686 changed files with 7624 additions and 5030 deletions
Download patch file Download diff file Expand all files Collapse all files

28
app/javascript/flavours/glitch/actions/accounts.js
View file

@ -81,7 +81,10 @@ export const PINNED_ACCOUNTS_FETCH_REQUEST = 'PINNED_ACCOUNTS_FETCH_REQUEST';
export const PINNED_ACCOUNTS_FETCH_SUCCESS = 'PINNED_ACCOUNTS_FETCH_SUCCESS';
export const PINNED_ACCOUNTS_FETCH_FAIL = 'PINNED_ACCOUNTS_FETCH_FAIL';
export const PINNED_ACCOUNTS_EDITOR_SUGGESTIONS_READY = 'PINNED_ACCOUNTS_EDITOR_SUGGESTIONS_READY';
export const PINNED_ACCOUNTS_SUGGESTIONS_FETCH_REQUEST = 'PINNED_ACCOUNTS_SUGGESTIONS_FETCH_REQUEST';
export const PINNED_ACCOUNTS_SUGGESTIONS_FETCH_SUCCESS = 'PINNED_ACCOUNTS_SUGGESTIONS_FETCH_SUCCESS';
export const PINNED_ACCOUNTS_SUGGESTIONS_FETCH_FAIL = 'PINNED_ACCOUNTS_SUGGESTIONS_FETCH_FAIL';
export const PINNED_ACCOUNTS_EDITOR_SUGGESTIONS_CLEAR = 'PINNED_ACCOUNTS_EDITOR_SUGGESTIONS_CLEAR';
export const PINNED_ACCOUNTS_EDITOR_SUGGESTIONS_CHANGE = 'PINNED_ACCOUNTS_EDITOR_SUGGESTIONS_CHANGE';
@ -841,6 +844,8 @@ export function fetchPinnedAccountsFail(error) {
export function fetchPinnedAccountsSuggestions(q) {
return (dispatch, getState) => {
dispatch(fetchPinnedAccountsSuggestionsRequest());
const params = {
q,
resolve: false,
@ -850,19 +855,32 @@ export function fetchPinnedAccountsSuggestions(q) {
api(getState).get('/api/v1/accounts/search', { params }).then(response => {
dispatch(importFetchedAccounts(response.data));
dispatch(fetchPinnedAccountsSuggestionsReady(q, response.data));
});
dispatch(fetchPinnedAccountsSuggestionsSuccess(q, response.data));
}).catch(err => dispatch(fetchPinnedAccountsSuggestionsFail(err)));
};
}
export function fetchPinnedAccountsSuggestionsReady(query, accounts) {
export function fetchPinnedAccountsSuggestionsRequest() {
return {
type: PINNED_ACCOUNTS_EDITOR_SUGGESTIONS_READY,
type: PINNED_ACCOUNTS_SUGGESTIONS_FETCH_REQUEST,
};
}
export function fetchPinnedAccountsSuggestionsSuccess(query, accounts) {
return {
type: PINNED_ACCOUNTS_SUGGESTIONS_FETCH_SUCCESS,
query,
accounts,
};
}
export function fetchPinnedAccountsSuggestionsFail(error) {
return {
type: PINNED_ACCOUNTS_SUGGESTIONS_FETCH_FAIL,
error,
};
}
export function clearPinnedAccountsSuggestions() {
return {
type: PINNED_ACCOUNTS_EDITOR_SUGGESTIONS_CLEAR,

6
app/javascript/flavours/glitch/actions/app.js
View file

@ -1,6 +0,0 @@
export const APP_LAYOUT_CHANGE = 'APP_LAYOUT_CHANGE';
export const changeLayout = layout => ({
type: APP_LAYOUT_CHANGE,
layout,
});

7
app/javascript/flavours/glitch/actions/app.ts Normal file
View file

@ -0,0 +1,7 @@
import { createAction } from '@reduxjs/toolkit';
type ChangeLayoutPayload = {
layout: 'mobile' | 'single-column' | 'multi-column';
};
export const changeLayout =
createAction<ChangeLayoutPayload>('APP_LAYOUT_CHANGE');

12
app/javascript/flavours/glitch/actions/compose.js
View file

@ -450,16 +450,12 @@ export function changeUploadCompose(id, params) {
// Editing already-attached media is deferred to editing the post itself.
// For simplicity's sake, fake an API reply.
if (media && !media.get('unattached')) {
let { description, focus } = params;
const data = media.toJS();
if (description) {
data.description = description;
}
const { focus, ...other } = params;
const data = { ...media.toJS(), ...other };
if (focus) {
focus = focus.split(',');
data.meta = { focus: { x: parseFloat(focus[0]), y: parseFloat(focus[1]) } };
const [x, y] = focus.split(',');
data.meta = { focus: { x: parseFloat(x), y: parseFloat(y) } };
}
dispatch(changeUploadComposeSuccess(data, true));

2
app/javascript/flavours/glitch/actions/picture_in_picture.js
View file

@ -20,7 +20,7 @@ export const PICTURE_IN_PICTURE_REMOVE = 'PICTURE_IN_PICTURE_REMOVE';
* @param {string} accountId
* @param {string} playerType
* @param {MediaProps} props
* @return {object}
* @returns {object}
*/
export const deployPictureInPicture = (statusId, accountId, playerType, props) => {
// @ts-expect-error

16
app/javascript/flavours/glitch/actions/streaming.js
View file

@ -27,7 +27,7 @@ const { messages } = getLocale();
/**
* @param {number} max
* @return {number}
* @returns {number}
*/
const randomUpTo = max =>
Math.floor(Math.random() * Math.floor(max));
@ -40,7 +40,7 @@ const randomUpTo = max =>
* @param {function(Function, Function): void} [options.fallback]
* @param {function(): void} [options.fillGaps]
* @param {function(object): boolean} [options.accept]
* @return {function(): void}
* @returns {function(): void}
*/
export const connectTimelineStream = (timelineId, channelName, params = {}, options = {}) =>
connectStream(channelName, params, (dispatch, getState) => {
@ -132,7 +132,7 @@ const refreshHomeTimelineAndNotification = (dispatch, done) => {
};
/**
* @return {function(): void}
* @returns {function(): void}
*/
export const connectUserStream = () =>
// @ts-expect-error
@ -141,7 +141,7 @@ export const connectUserStream = () =>
/**
* @param {Object} options
* @param {boolean} [options.onlyMedia]
* @return {function(): void}
* @returns {function(): void}
*/
export const connectCommunityStream = ({ onlyMedia } = {}) =>
connectTimelineStream(`community${onlyMedia ? ':media' : ''}`, `public:local${onlyMedia ? ':media' : ''}`, {}, { fillGaps: () => (fillCommunityTimelineGaps({ onlyMedia })) });
@ -151,7 +151,7 @@ export const connectCommunityStream = ({ onlyMedia } = {}) =>
* @param {boolean} [options.onlyMedia]
* @param {boolean} [options.onlyRemote]
* @param {boolean} [options.allowLocalOnly]
* @return {function(): void}
* @returns {function(): void}
*/
export const connectPublicStream = ({ onlyMedia, onlyRemote, allowLocalOnly } = {}) =>
connectTimelineStream(`public${onlyRemote ? ':remote' : (allowLocalOnly ? ':allow_local_only' : '')}${onlyMedia ? ':media' : ''}`, `public${onlyRemote ? ':remote' : (allowLocalOnly ? ':allow_local_only' : '')}${onlyMedia ? ':media' : ''}`, {}, { fillGaps: () => fillPublicTimelineGaps({ onlyMedia, onlyRemote, allowLocalOnly }) });
@ -161,20 +161,20 @@ export const connectPublicStream = ({ onlyMedia, onlyRemote, allowLocalOnly } =
* @param {string} tagName
* @param {boolean} onlyLocal
* @param {function(object): boolean} accept
* @return {function(): void}
* @returns {function(): void}
*/
export const connectHashtagStream = (columnId, tagName, onlyLocal, accept) =>
connectTimelineStream(`hashtag:${columnId}${onlyLocal ? ':local' : ''}`, `hashtag${onlyLocal ? ':local' : ''}`, { tag: tagName }, { accept });
/**
* @return {function(): void}
* @returns {function(): void}
*/
export const connectDirectStream = () =>
connectTimelineStream('direct', 'direct');
/**
* @param {string} listId
* @return {function(): void}
* @returns {function(): void}
*/
export const connectListStream = listId =>
connectTimelineStream(`list:${listId}`, 'list', { list: listId }, { fillGaps: () => fillListTimelineGaps(listId) });

6
app/javascript/flavours/glitch/blurhash.js → app/javascript/flavours/glitch/blurhash.ts
View file

@ -84,7 +84,7 @@ const DIGIT_CHARACTERS = [
'~',
];
export const decode83 = (str) => {
export const decode83 = (str: string) => {
let value = 0;
let c, digit;
@ -97,13 +97,13 @@ export const decode83 = (str) => {
return value;
};
export const intToRGB = int => ({
export const intToRGB = (int: number) => ({
r: Math.max(0, (int >> 16)),
g: Math.max(0, (int >> 8) & 255),
b: Math.max(0, (int & 255)),
});
export const getAverageFromBlurhash = blurhash => {
export const getAverageFromBlurhash = (blurhash: string) => {
if (!blurhash) {
return null;
}

2
app/javascript/mastodon/compare_id.js → app/javascript/flavours/glitch/compare_id.ts
View file

@ -1,4 +1,4 @@
export default function compareId (id1, id2) {
export default function compareId (id1: string, id2: string) {
if (id1 === id2) {
return 0;
}

2
app/javascript/flavours/glitch/components/avatar.tsx
View file

@ -2,7 +2,7 @@ import * as React from 'react';
import classNames from 'classnames';
import { autoPlayGif } from 'flavours/glitch/initial_state';
import { useHovering } from 'hooks/useHovering';
import type { Account } from 'types/resources';
import type { Account } from 'flavours/glitch/types/resources';
type Props = {
account: Account | undefined;

66
app/javascript/flavours/glitch/components/blurhash.jsx
View file

@ -1,66 +0,0 @@
// @ts-check
import { decode } from 'blurhash';
import React, { useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
/**
* @typedef BlurhashPropsBase
* @property {string?} hash Hash to render
* @property {number} width
* Width of the blurred region in pixels. Defaults to 32
* @property {number} [height]
* Height of the blurred region in pixels. Defaults to width
* @property {boolean} [dummy]
* Whether dummy mode is enabled. If enabled, nothing is rendered
* and canvas left untouched
*/
/** @typedef {JSX.IntrinsicElements['canvas'] & BlurhashPropsBase} BlurhashProps */
/**
* Component that is used to render blurred of blurhash string
*
* @param {BlurhashProps} param1 Props of the component
* @returns Canvas which will render blurred region element to embed
*/
function Blurhash({
hash,
width = 32,
height = width,
dummy = false,
...canvasProps
}) {
const canvasRef = /** @type {import('react').MutableRefObject<HTMLCanvasElement>} */ (useRef());
useEffect(() => {
const { current: canvas } = canvasRef;
canvas.width = canvas.width; // resets canvas
if (dummy || !hash) return;
try {
const pixels = decode(hash, width, height);
const ctx = canvas.getContext('2d');
const imageData = new ImageData(pixels, width, height);
// @ts-expect-error
ctx.putImageData(imageData, 0, 0);
} catch (err) {
console.error('Blurhash decoding failure', { err, hash });
}
}, [dummy, hash, width, height]);
return (
<canvas {...canvasProps} ref={canvasRef} width={width} height={height} />
);
}
Blurhash.propTypes = {
hash: PropTypes.string.isRequired,
width: PropTypes.number,
height: PropTypes.number,
dummy: PropTypes.bool,
};
export default React.memo(Blurhash);

45
app/javascript/flavours/glitch/components/blurhash.tsx Normal file
View file

@ -0,0 +1,45 @@
import { decode } from 'blurhash';
import React, { useRef, useEffect } from 'react';
type Props = {
hash: string;
width?: number;
height?: number;
dummy?: boolean; // Whether dummy mode is enabled. If enabled, nothing is rendered and canvas left untouched
children?: never;
[key: string]: any;
}
function Blurhash({
hash,
width = 32,
height = width,
dummy = false,
...canvasProps
}: Props) {
const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const canvas = canvasRef.current!;
// eslint-disable-next-line no-self-assign
canvas.width = canvas.width; // resets canvas
if (dummy || !hash) return;
try {
const pixels = decode(hash, width, height);
const ctx = canvas.getContext('2d');
const imageData = new ImageData(pixels, width, height);
ctx?.putImageData(imageData, 0, 0);
} catch (err) {
console.error('Blurhash decoding failure', { err, hash });
}
}, [dummy, hash, width, height]);
return (
<canvas {...canvasProps} ref={canvasRef} width={width} height={height} />
);
}
export default React.memo(Blurhash);

1
app/javascript/flavours/glitch/components/common_counter.jsx
View file

@ -4,7 +4,6 @@ import { FormattedMessage } from 'react-intl';
/**
* Returns custom renderer for one of the common counter types
*
* @param {"statuses" | "following" | "followers"} counterType
* Type of the counter
* @param {boolean} isBold Whether display number must be displayed in bold

1
app/javascript/flavours/glitch/components/hashtag.jsx
View file

@ -35,7 +35,6 @@ class SilentErrorBoundary extends React.Component {
/**
* Used to render counter of how much people are talking about hashtag
*
* @type {(displayNumber: JSX.Element, pluralReady: number) => JSX.Element}
*/
export const accountsCountRenderer = (displayNumber, pluralReady) => (

21
app/javascript/flavours/glitch/components/icon.jsx
View file

@ -1,21 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
export default class Icon extends React.PureComponent {
static propTypes = {
id: PropTypes.string.isRequired,
className: PropTypes.string,
fixedWidth: PropTypes.bool,
};
render () {
const { id, className, fixedWidth, ...other } = this.props;
return (
<i role='img' className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })} {...other} />
);
}
}

14
app/javascript/flavours/glitch/components/icon.tsx Normal file
View file

@ -0,0 +1,14 @@
import React from 'react';
import classNames from 'classnames';
type Props = {
id: string;
className?: string;
fixedWidth?: boolean;
children?: never;
[key: string]: any;
}
export const Icon: React.FC<Props> = ({ id, className, fixedWidth, ...other }) =>
<i className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })} {...other} />;
export default Icon;

76
app/javascript/flavours/glitch/components/icon_button.jsx → app/javascript/flavours/glitch/components/icon_button.tsx
View file

@ -1,35 +1,37 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Icon from 'flavours/glitch/components/icon';
import AnimatedNumber from 'flavours/glitch/components/animated_number';
import { Icon } from './icon';
import { AnimatedNumber } from './animated_number';
export default class IconButton extends React.PureComponent {
static propTypes = {
className: PropTypes.string,
title: PropTypes.string.isRequired,
icon: PropTypes.string.isRequired,
onClick: PropTypes.func,
onMouseDown: PropTypes.func,
onKeyDown: PropTypes.func,
onKeyPress: PropTypes.func,
size: PropTypes.number,
active: PropTypes.bool,
expanded: PropTypes.bool,
style: PropTypes.object,
activeStyle: PropTypes.object,
disabled: PropTypes.bool,
inverted: PropTypes.bool,
animate: PropTypes.bool,
overlay: PropTypes.bool,
tabIndex: PropTypes.number,
label: PropTypes.string,
counter: PropTypes.number,
obfuscateCount: PropTypes.bool,
href: PropTypes.string,
ariaHidden: PropTypes.bool,
};
type Props = {
className?: string;
title: string;
icon: string;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
onMouseDown?: React.MouseEventHandler<HTMLButtonElement>;
onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;
size: number;
active: boolean;
expanded?: boolean;
style?: React.CSSProperties;
activeStyle?: React.CSSProperties;
disabled: boolean;
inverted?: boolean;
animate: boolean;
overlay: boolean;
tabIndex: number;
label: string;
counter?: number;
obfuscateCount?: boolean;
href?: string;
ariaHidden: boolean;
}
type States = {
activate: boolean,
deactivate: boolean,
}
export default class IconButton extends React.PureComponent<Props, States> {
static defaultProps = {
size: 18,
@ -46,7 +48,7 @@ export default class IconButton extends React.PureComponent {
deactivate: false,
};
componentWillReceiveProps (nextProps) {
UNSAFE_componentWillReceiveProps (nextProps: Props) {
if (!nextProps.animate) return;
if (this.props.active && !nextProps.active) {
@ -56,27 +58,27 @@ export default class IconButton extends React.PureComponent {
}
}
handleClick = (e) => {
handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
e.preventDefault();
if (!this.props.disabled) {
if (!this.props.disabled && this.props.onClick != null) {
this.props.onClick(e);
}
};
handleKeyPress = (e) => {
handleKeyPress: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
if (this.props.onKeyPress && !this.props.disabled) {
this.props.onKeyPress(e);
}
};
handleMouseDown = (e) => {
handleMouseDown: React.MouseEventHandler<HTMLButtonElement> = (e) => {
if (!this.props.disabled && this.props.onMouseDown) {
this.props.onMouseDown(e);
}
};
handleKeyDown = (e) => {
handleKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
if (!this.props.disabled && this.props.onKeyDown) {
this.props.onKeyDown(e);
}
@ -89,7 +91,7 @@ export default class IconButton extends React.PureComponent {
containerSize = `${this.props.size * 1.28571429}px`;
}
let style = {
const style = {
fontSize: `${this.props.size}px`,
height: containerSize,
lineHeight: `${this.props.size}px`,
@ -144,7 +146,7 @@ export default class IconButton extends React.PureComponent {
</React.Fragment>
);
if (href && !this.prop) {
if (href != null) {
contents = (
<a href={href} target='_blank' rel='noopener noreferrer'>
{contents}

22
app/javascript/flavours/glitch/components/icon_with_badge.jsx
View file

@ -1,22 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import Icon from 'flavours/glitch/components/icon';
const formatNumber = num => num > 40 ? '40+' : num;
const IconWithBadge = ({ id, count, issueBadge, className }) => (
<i className='icon-with-badge'>
<Icon id={id} fixedWidth className={className} />
{count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>}
{issueBadge && <i className='icon-with-badge__issue-badge' />}
</i>
);
IconWithBadge.propTypes = {
id: PropTypes.string.isRequired,
count: PropTypes.number.isRequired,
issueBadge: PropTypes.bool,
className: PropTypes.string,
};
export default IconWithBadge;

20
app/javascript/flavours/glitch/components/icon_with_badge.tsx Normal file
View file

@ -0,0 +1,20 @@
import React from 'react';
import { Icon } from './icon';
const formatNumber = (num: number): number | string => num > 40 ? '40+' : num;
type Props = {
id: string;
count: number;
issueBadge: boolean;
className: string;
}
const IconWithBadge: React.FC<Props> = ({ id, count, issueBadge, className }) => (
<i className='icon-with-badge'>
<Icon id={id} fixedWidth className={className} />
{count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>}
{issueBadge && <i className='icon-with-badge__issue-badge' />}
</i>
);
export default IconWithBadge;

65
app/javascript/flavours/glitch/components/media_gallery.jsx
View file

@ -101,12 +101,10 @@ class Item extends React.PureComponent {
render () {
const { attachment, lang, index, size, standalone, letterbox, displayWidth, visible } = this.props;
let badges = [], thumbnail;
let width = 50;
let height = 100;
let top = 'auto';
let left = 'auto';
let bottom = 'auto';
let right = 'auto';
if (size === 1) {
width = 100;
@ -116,45 +114,13 @@ class Item extends React.PureComponent {
height = 50;
}
if (size === 2) {
if (index === 0) {
right = '2px';
} else {
left = '2px';
}
} else if (size === 3) {
if (index === 0) {
right = '2px';
} else if (index > 0) {
left = '2px';
}
if (index === 1) {
bottom = '2px';
} else if (index > 1) {
top = '2px';
}
} else if (size === 4) {
if (index === 0 || index === 2) {
right = '2px';
}
if (index === 1 || index === 3) {
left = '2px';
}
if (index < 2) {
bottom = '2px';
} else {
top = '2px';
}
if (attachment.get('description')?.length > 0) {
badges.push(<span key='alt' className='media-gallery__gifv__label'>ALT</span>);
}
let thumbnail = '';
if (attachment.get('type') === 'unknown') {
return (
<div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
<div className={classNames('media-gallery__item', { standalone, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')}>
<a className='media-gallery__item-thumbnail' href={attachment.get('remote_url') || attachment.get('url')} style={{ cursor: 'pointer' }} title={attachment.get('description')} lang={lang} target='_blank' rel='noopener noreferrer'>
<Blurhash
hash={attachment.get('blurhash')}
@ -205,6 +171,8 @@ class Item extends React.PureComponent {
} else if (attachment.get('type') === 'gifv') {
const autoPlay = this.getAutoPlay();
badges.push(<span key='gif' className='media-gallery__gifv__label'>GIF</span>);
thumbnail = (
<div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}>
<video
@ -222,14 +190,12 @@ class Item extends React.PureComponent {
loop
muted
/>
<span className='media-gallery__gifv__label'>GIF</span>
</div>
);
}
return (
<div className={classNames('media-gallery__item', { standalone, letterbox })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
<div className={classNames('media-gallery__item', { standalone, letterbox, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')}>
<Blurhash
hash={attachment.get('blurhash')}
dummy={!useBlurhash}
@ -237,7 +203,14 @@ class Item extends React.PureComponent {
'media-gallery__preview--hidden': visible && this.state.loaded,
})}
/>
{visible && thumbnail}
{badges && (
<div className='media-gallery__item__badges'>
{badges}
</div>
)}
</div>
);
}
@ -358,12 +331,10 @@ class MediaGallery extends React.PureComponent {
const computedClass = classNames('media-gallery', { 'full-width': fullwidth });
if (this.isStandaloneEligible() && width) {
style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']);
} else if (width) {
style.height = width / (16/9);
if (this.isStandaloneEligible()) { // TODO: cropImages setting
style.aspectRatio = `${this.props.media.getIn([0, 'meta', 'small', 'aspect'])}`;
} else {
return (<div className={computedClass} ref={this.handleRef} />);
style.aspectRatio = '16 / 9';
}
if (this.isStandaloneEligible()) {

42
app/javascript/flavours/glitch/components/picture_in_picture_placeholder.jsx
View file

@ -3,62 +3,22 @@ import PropTypes from 'prop-types';
import Icon from 'flavours/glitch/components/icon';
import { removePictureInPicture } from 'flavours/glitch/actions/picture_in_picture';
import { connect } from 'react-redux';
import { debounce } from 'lodash';
import { FormattedMessage } from 'react-intl';
class PictureInPicturePlaceholder extends React.PureComponent {
static propTypes = {
width: PropTypes.number,
dispatch: PropTypes.func.isRequired,
};
state = {
width: this.props.width,
height: this.props.width && (this.props.width / (16/9)),
};
handleClick = () => {
const { dispatch } = this.props;
dispatch(removePictureInPicture());
};
setRef = c => {
this.node = c;
if (this.node) {
this._setDimensions();
}
};
_setDimensions () {
const width = this.node.offsetWidth;
const height = width / (16/9);
this.setState({ width, height });
}
componentDidMount () {
window.addEventListener('resize', this.handleResize, { passive: true });
}
componentWillUnmount () {
window.removeEventListener('resize', this.handleResize);
}
handleResize = debounce(() => {
if (this.node) {
this._setDimensions();
}
}, 250, {
trailing: true,
});
render () {
const { height } = this.state;
return (
<div ref={this.setRef} className='picture-in-picture-placeholder' style={{ height }} role='button' tabIndex={0} onClick={this.handleClick}>
<div className='picture-in-picture-placeholder' role='button' tabIndex={0} onClick={this.handleClick}>
<Icon id='window-restore' />
<FormattedMessage id='picture_in_picture.restore' defaultMessage='Put it back' />
</div>

51
app/javascript/flavours/glitch/components/relative_timestamp.jsx → app/javascript/flavours/glitch/components/relative_timestamp.tsx
View file

@ -1,6 +1,5 @@
import React from 'react';
import { injectIntl, defineMessages } from 'react-intl';
import PropTypes from 'prop-types';
import { injectIntl, defineMessages, InjectedIntl } from 'react-intl';
const messages = defineMessages({
today: { id: 'relative_time.today', defaultMessage: 'today' },
@ -28,12 +27,12 @@ const dateFormatOptions = {
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
};
} as const;
const shortDateFormatOptions = {
month: 'short',
day: 'numeric',
};
} as const;
const SECOND = 1000;
const MINUTE = 1000 * 60;
@ -42,7 +41,7 @@ const DAY = 1000 * 60 * 60 * 24;
const MAX_DELAY = 2147483647;
const selectUnits = delta => {
const selectUnits = (delta: number) => {
const absDelta = Math.abs(delta);
if (absDelta < MINUTE) {
@ -56,7 +55,7 @@ const selectUnits = delta => {
return 'day';
};
const getUnitDelay = units => {
const getUnitDelay = (units: string) => {
switch (units) {
case 'second':
return SECOND;
@ -71,7 +70,7 @@ const getUnitDelay = units => {
}
};
export const timeAgoString = (intl, date, now, year, timeGiven, short) => {
export const timeAgoString = (intl: InjectedIntl, date: Date, now: number, year: number, timeGiven: boolean, short?: boolean) => {
const delta = now - date.getTime();
let relativeTime;
@ -99,7 +98,7 @@ export const timeAgoString = (intl, date, now, year, timeGiven, short) => {
return relativeTime;
};
const timeRemainingString = (intl, date, now, timeGiven = true) => {
const timeRemainingString = (intl: InjectedIntl, date: Date, now: number, timeGiven = true) => {
const delta = date.getTime() - now;
let relativeTime;
@ -121,15 +120,17 @@ const timeRemainingString = (intl, date, now, timeGiven = true) => {
return relativeTime;
};
class RelativeTimestamp extends React.Component {
static propTypes = {
intl: PropTypes.object.isRequired,
timestamp: PropTypes.string.isRequired,
year: PropTypes.number.isRequired,
futureDate: PropTypes.bool,
short: PropTypes.bool,
};
type Props = {
intl: InjectedIntl;
timestamp: string;
year: number;
futureDate?: boolean;
short?: boolean;
}
type States = {
now: number;
}
class RelativeTimestamp extends React.Component<Props, States> {
state = {
now: this.props.intl.now(),
@ -140,7 +141,9 @@ class RelativeTimestamp extends React.Component {
short: true,
};
shouldComponentUpdate (nextProps, nextState) {
_timer: number | undefined;
shouldComponentUpdate (nextProps: Props, nextState: States) {
// As of right now the locale doesn't change without a new page load,
// but we might as well check in case that ever changes.
return this.props.timestamp !== nextProps.timestamp ||
@ -148,7 +151,7 @@ class RelativeTimestamp extends React.Component {
this.state.now !== nextState.now;
}
componentWillReceiveProps (nextProps) {
UNSAFE_componentWillReceiveProps (nextProps: Props) {
if (this.props.timestamp !== nextProps.timestamp) {
this.setState({ now: this.props.intl.now() });
}
@ -158,16 +161,16 @@ class RelativeTimestamp extends React.Component {
this._scheduleNextUpdate(this.props, this.state);
}
componentWillUpdate (nextProps, nextState) {
UNSAFE_componentWillUpdate (nextProps: Props, nextState: States) {
this._scheduleNextUpdate(nextProps, nextState);
}
componentWillUnmount () {
clearTimeout(this._timer);
window.clearTimeout(this._timer);
}
_scheduleNextUpdate (props, state) {
clearTimeout(this._timer);
_scheduleNextUpdate (props: Props, state: States) {
window.clearTimeout(this._timer);
const { timestamp } = props;
const delta = (new Date(timestamp)).getTime() - state.now;
@ -176,7 +179,7 @@ class RelativeTimestamp extends React.Component {
const updateInterval = 1000 * 10;
const delay = delta < 0 ? Math.max(updateInterval, unitDelay - unitRemainder) : Math.max(updateInterval, unitRemainder);
this._timer = setTimeout(() => {
this._timer = window.setTimeout(() => {
this.setState({ now: this.props.intl.now() });
}, delay);
}

2
app/javascript/flavours/glitch/components/short_number.jsx
View file

@ -24,7 +24,6 @@ import { FormattedMessage, FormattedNumber } from 'react-intl';
/**
* Component that renders short big number to a shorter version
*
* @param {ShortNumberProps} param0 Props for the component
* @returns {JSX.Element} Rendered number
*/
@ -58,7 +57,6 @@ ShortNumber.propTypes = {
/**
* Renders short number into corresponding localizable react fragment
*
* @param {ShortNumberCounterProps} param0 Props for the component
* @returns {JSX.Element} FormattedMessage ready to be embedded in code
*/

6
app/javascript/flavours/glitch/components/status.jsx
View file

@ -628,7 +628,7 @@ class Status extends ImmutablePureComponent {
attachments = status.get('media_attachments');
if (pictureInPicture.get('inUse')) {
media.push(<PictureInPicturePlaceholder width={this.props.cachedMediaWidth} />);
media.push(<PictureInPicturePlaceholder />);
mediaIcons.push('video-camera');
} else if (attachments.size > 0) {
if (muted || attachments.some(item => item.get('type') === 'unknown')) {
@ -684,8 +684,6 @@ class Status extends ImmutablePureComponent {
fullwidth={!rootId && settings.getIn(['media', 'fullwidth'])}
preventPlayback={isCollapsed || !isExpanded}
onOpenVideo={this.handleOpenVideo}
width={this.props.cachedMediaWidth}
cacheWidth={this.props.cacheMediaWidth}
deployPictureInPicture={pictureInPicture.get('available') ? this.handleDeployPictureInPicture : undefined}
visible={this.state.showMedia}
onToggleVisibility={this.handleToggleMediaVisibility}
@ -725,8 +723,6 @@ class Status extends ImmutablePureComponent {
onOpenMedia={this.handleOpenMedia}
card={status.get('card')}
compact
cacheWidth={this.props.cacheMediaWidth}
defaultWidth={this.props.cachedMediaWidth}
sensitive={status.get('sensitive')}
/>,
);

4
app/javascript/flavours/glitch/containers/compose_container.jsx
View file

@ -1,7 +1,7 @@
import React from 'react';
import { Provider } from 'react-redux';
import PropTypes from 'prop-types';
import configureStore from 'flavours/glitch/store/configureStore';
import { store } from 'flavours/glitch/store/configureStore';
import { hydrateStore } from 'flavours/glitch/actions/store';
import { IntlProvider, addLocaleData } from 'react-intl';
import { getLocale } from 'mastodon/locales';
@ -12,8 +12,6 @@ import { fetchCustomEmojis } from 'flavours/glitch/actions/custom_emojis';
const { localeData, messages } = getLocale();
addLocaleData(localeData);
const store = configureStore();
if (initialState) {
store.dispatch(hydrateStore(initialState));
}

3
app/javascript/flavours/glitch/containers/mastodon.jsx
View file

@ -5,7 +5,7 @@ import { IntlProvider, addLocaleData } from 'react-intl';
import { Provider as ReduxProvider } from 'react-redux';
import { BrowserRouter, Route } from 'react-router-dom';
import { ScrollContext } from 'react-router-scroll-4';
import configureStore from 'flavours/glitch/store/configureStore';
import { store } from 'flavours/glitch/store/configureStore';
import UI from 'flavours/glitch/features/ui';
import { fetchCustomEmojis } from 'flavours/glitch/actions/custom_emojis';
import { hydrateStore } from 'flavours/glitch/actions/store';
@ -20,7 +20,6 @@ addLocaleData(localeData);
const title = process.env.NODE_ENV === 'production' ? siteTitle : `${siteTitle} (Dev)`;
export const store = configureStore();
const hydrateAction = hydrateStore(initialState);
store.dispatch(hydrateAction);

1
app/javascript/flavours/glitch/features/account/components/header.jsx
View file

@ -10,7 +10,6 @@ import Icon from 'flavours/glitch/components/icon';
import IconButton from 'flavours/glitch/components/icon_button';
import Avatar from 'flavours/glitch/components/avatar';
import Button from 'flavours/glitch/components/button';
import { NavLink } from 'react-router-dom';
import DropdownMenuContainer from 'flavours/glitch/containers/dropdown_menu_container';
import AccountNoteContainer from '../containers/account_note_container';
import FollowRequestNoteContainer from '../containers/follow_request_note_container';

19
app/javascript/flavours/glitch/features/audio/index.jsx
View file

@ -390,7 +390,7 @@ class Audio extends React.PureComponent {
}
_getRadius () {
return parseInt(((this.state.height || this.props.height) - (PADDING * this._getScaleCoefficient()) * 2) / 2);
return parseInt((this.state.height || this.props.height) / 2 - PADDING * this._getScaleCoefficient());
}
_getScaleCoefficient () {
@ -402,7 +402,7 @@ class Audio extends React.PureComponent {
}
_getCY() {
return Math.floor(this._getRadius() + (PADDING * this._getScaleCoefficient()));
return Math.floor((this.state.height || this.props.height) / 2);
}
_getAccentColor () {
@ -476,7 +476,7 @@ class Audio extends React.PureComponent {
}
return (
<div className={classNames('audio-player', { editable, inactive: !revealed })} ref={this.setPlayerRef} style={{ backgroundColor: this._getBackgroundColor(), color: this._getForegroundColor(), width: '100%', height: this.props.fullscreen ? '100%' : (this.state.height || this.props.height) }} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} tabIndex={0} onKeyDown={this.handleKeyDown}>
<div className={classNames('audio-player', { editable, inactive: !revealed })} ref={this.setPlayerRef} style={{ backgroundColor: this._getBackgroundColor(), color: this._getForegroundColor(), aspectRatio: '16 / 9' }} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} tabIndex={0} onKeyDown={this.handleKeyDown}>
<Blurhash
hash={blurhash}
@ -521,9 +521,16 @@ class Audio extends React.PureComponent {
{(revealed || editable) && <img
src={this.props.poster}
alt=''
width={(this._getRadius() - TICK_SIZE) * 2}
height={(this._getRadius() - TICK_SIZE) * 2}
style={{ position: 'absolute', left: this._getCX(), top: this._getCY(), transform: 'translate(-50%, -50%)', borderRadius: '50%', pointerEvents: 'none' }}
style={{
position: 'absolute',
left: '50%',
top: '50%',
height: `calc(${(100 - 2 * 100 * PADDING / 982)}% - ${TICK_SIZE * 2}px)`,
aspectRatio: '1',
transform: 'translate(-50%, -50%)',
borderRadius: '50%',
pointerEvents: 'none',
}}
/>}
<div className='video-player__seek' onMouseDown={this.handleMouseDown} ref={this.setSeekRef}>

15
app/javascript/flavours/glitch/features/compose/components/publisher.jsx
View file

@ -24,6 +24,10 @@ const messages = defineMessages({
id: 'compose_form.publish_loud',
},
saveChanges: { id: 'compose_form.save_changes', defaultMessage: 'Save changes' },
public: { id: 'privacy.public.short', defaultMessage: 'Public' },
unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
direct: { id: 'privacy.direct.short', defaultMessage: 'Mentioned people only' },
});
class Publisher extends ImmutablePureComponent {
@ -68,6 +72,13 @@ class Publisher extends ImmutablePureComponent {
publishText = privacy !== 'unlisted' ? intl.formatMessage(messages.publishLoud, { publish: intl.formatMessage(messages.publish) }) : intl.formatMessage(messages.publish);
}
const privacyNames = {
public: messages.public,
unlisted: messages.unlisted,
private: messages.private,
direct: messages.direct,
};
return (
<div className={computedClass}>
{sideArm && !isEditing && sideArm !== 'none' ? (
@ -78,7 +89,7 @@ class Publisher extends ImmutablePureComponent {
onClick={onSecondarySubmit}
style={{ padding: null }}
text={<Icon id={privacyIcons[sideArm]} />}
title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${sideArm}.short` })}`}
title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage(privacyNames[sideArm])}`}
/>
</div>
) : null}
@ -86,7 +97,7 @@ class Publisher extends ImmutablePureComponent {
<Button
className='primary'
text={publishText}
title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage({ id: `privacy.${privacy}.short` })}`}
title={`${intl.formatMessage(messages.publish)}: ${intl.formatMessage(privacyNames[privacy])}`}
onClick={this.handleSubmit}
disabled={disabled}
/>

4
app/javascript/flavours/glitch/features/compose/containers/warning_container.jsx
View file

@ -4,7 +4,7 @@ import Warning from '../components/warning';
import PropTypes from 'prop-types';
import { FormattedMessage } from 'react-intl';
import { me } from 'flavours/glitch/initial_state';
import { profileLink, termsLink } from 'flavours/glitch/utils/backend_links';
import { profileLink, privacyPolicyLink } from 'flavours/glitch/utils/backend_links';
const buildHashtagRE = () => {
try {
@ -49,7 +49,7 @@ const WarningWrapper = ({ needsLockWarning, hashtagWarning, directMessageWarning
if (directMessageWarning) {
const message = (
<span>
<FormattedMessage id='compose_form.encryption_warning' defaultMessage='Posts on Mastodon are not end-to-end encrypted. Do not share any dangerous information over Mastodon.' /> {!!termsLink && <a href={termsLink} target='_blank'><FormattedMessage id='compose_form.direct_message_warning_learn_more' defaultMessage='Learn more' /></a>}
<FormattedMessage id='compose_form.encryption_warning' defaultMessage='Posts on Mastodon are not end-to-end encrypted. Do not share any dangerous information over Mastodon.' /> {!!privacyPolicyLink && <a href={privacyPolicyLink} target='_blank'><FormattedMessage id='compose_form.direct_message_warning_learn_more' defaultMessage='Learn more' /></a>}
</span>
);

12
app/javascript/flavours/glitch/features/local_settings/page/index.jsx
View file

@ -29,6 +29,10 @@ const messages = defineMessages({
rewrite_mentions_username: { id: 'settings.rewrite_mentions_username', defaultMessage: 'Rewrite with username' },
pop_in_left: { id: 'settings.pop_in_left', defaultMessage: 'Left' },
pop_in_right: { id: 'settings.pop_in_right', defaultMessage: 'Right' },
public: { id: 'privacy.public.short', defaultMessage: 'Public' },
unlisted: { id: 'privacy.unlisted.short', defaultMessage: 'Unlisted' },
private: { id: 'privacy.private.short', defaultMessage: 'Followers-only' },
direct: { id: 'privacy.direct.short', defaultMessage: 'Mentioned people only' },
});
class LocalSettingsPage extends React.PureComponent {
@ -241,10 +245,10 @@ class LocalSettingsPage extends React.PureComponent {
id='mastodon-settings--side_arm'
options={[
{ value: 'none', message: intl.formatMessage(messages.side_arm_none) },
{ value: 'direct', message: intl.formatMessage({ id: 'privacy.direct.short' }) },
{ value: 'private', message: intl.formatMessage({ id: 'privacy.private.short' }) },
{ value: 'unlisted', message: intl.formatMessage({ id: 'privacy.unlisted.short' }) },
{ value: 'public', message: intl.formatMessage({ id: 'privacy.public.short' }) },
{ value: 'direct', message: intl.formatMessage(messages.direct) },
{ value: 'private', message: intl.formatMessage(messages.private) },
{ value: 'unlisted', message: intl.formatMessage(messages.unlisted) },
{ value: 'public', message: intl.formatMessage(messages.public) },
]}
onChange={onChange}
>

47
app/javascript/flavours/glitch/features/status/components/card.jsx
View file

@ -8,7 +8,6 @@ import { decode as decodeIDNA } from 'flavours/glitch/utils/idna';
import Icon from 'flavours/glitch/components/icon';
import { useBlurhash } from 'flavours/glitch/initial_state';
import Blurhash from 'flavours/glitch/components/blurhash';
import { debounce } from 'lodash';
const getHostname = url => {
const parser = document.createElement('a');
@ -45,8 +44,6 @@ export default class Card extends React.PureComponent {
card: ImmutablePropTypes.map,
onOpenMedia: PropTypes.func.isRequired,
compact: PropTypes.bool,
defaultWidth: PropTypes.number,
cacheWidth: PropTypes.func,
sensitive: PropTypes.bool,
};
@ -55,7 +52,6 @@ export default class Card extends React.PureComponent {
};
state = {
width: this.props.defaultWidth || 280,
previewLoaded: false,
embedded: false,
revealed: !this.props.sensitive,
@ -78,24 +74,6 @@ export default class Card extends React.PureComponent {
window.removeEventListener('resize', this.handleResize);
}
_setDimensions () {
const width = this.node.offsetWidth;
if (this.props.cacheWidth) {
this.props.cacheWidth(width);
}
this.setState({ width });
}
handleResize = debounce(() => {
if (this.node) {
this._setDimensions();
}
}, 250, {
trailing: true,
});
handlePhotoClick = () => {
const { card, onOpenMedia } = this.props;
@ -129,10 +107,6 @@ export default class Card extends React.PureComponent {
setRef = c => {
this.node = c;
if (this.node) {
this._setDimensions();
}
};
handleImageLoad = () => {
@ -148,36 +122,31 @@ export default class Card extends React.PureComponent {
renderVideo () {
const { card } = this.props;
const content = { __html: addAutoPlay(card.get('html')) };
const { width } = this.state;
const ratio = card.get('width') / card.get('height');
const height = width / ratio;
return (
<div
ref={this.setRef}
className='status-card__image status-card-video'
dangerouslySetInnerHTML={content}
style={{ height }}
style={{ aspectRatio: `${card.get('width')} / ${card.get('height')}` }}
/>
);
}
render () {
const { card, compact } = this.props;
const { width, embedded, revealed } = this.state;
const { embedded, revealed } = this.state;
if (card === null) {
return null;
}
const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name');
const horizontal = (!compact && card.get('width') > card.get('height') && (card.get('width') + 100 >= width)) || card.get('type') !== 'link' || embedded;
const horizontal = (!compact && card.get('width') > card.get('height')) || card.get('type') !== 'link' || embedded;
const interactive = card.get('type') !== 'link';
const className = classnames('status-card', { horizontal, compact, interactive });
const title = interactive ? <a className='status-card__title' href={card.get('url')} title={card.get('title')} rel='noopener noreferrer' target='_blank'><strong>{card.get('title')}</strong></a> : <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>;
const language = card.get('language') || '';
const ratio = card.get('width') / card.get('height');
const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio);
const description = (
<div className='status-card__content' lang={language}>
@ -187,6 +156,14 @@ export default class Card extends React.PureComponent {
</div>
);
const thumbnailStyle = {
visibility: revealed? null : 'hidden',
};
if (horizontal) {
thumbnailStyle.aspectRatio = (compact && !embedded) ? '16 / 9' : `${card.get('width')} / ${card.get('height')}`;
}
let embed = '';
let canvas = (
<Blurhash
@ -197,7 +174,7 @@ export default class Card extends React.PureComponent {
dummy={!useBlurhash}
/>
);
let thumbnail = <img src={card.get('image')} alt='' style={{ width: horizontal ? width : null, height: horizontal ? height : null, visibility: revealed ? null : 'hidden' }} onLoad={this.handleImageLoad} className='status-card__image-image' />;
let thumbnail = <img src={card.get('image')} alt='' style={thumbnailStyle} onLoad={this.handleImageLoad} className='status-card__image-image' />;
let spoilerButton = (
<button type='button' onClick={this.handleReveal} className='spoiler-button__overlay'>
<span className='spoiler-button__overlay__label'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>

1
app/javascript/flavours/glitch/features/ui/components/column_link.jsx
View file

@ -32,6 +32,7 @@ const ColumnLink = ({ icon, text, to, onClick, href, method, badge, transparent,
return onClick(e);
};
return (
// eslint-disable-next-line jsx-a11y/anchor-is-valid -- intentional to have the same look and feel as other menu items
<a href='#' onClick={onClick && handleOnClick} className={className} title={text} {...other} tabIndex={0}>
{iconElement}
<span>{text}</span>

30
app/javascript/flavours/glitch/features/ui/components/doodle_modal.jsx
View file

@ -125,9 +125,15 @@ const mapStateToProps = state => ({
});
const mapDispatchToProps = dispatch => ({
/** Set options in the redux store */
/**
* Set options in the redux store
* @param opts
*/
setOpt: (opts) => dispatch(doodleSet(opts)),
/** Submit doodle for upload */
/**
* Submit doodle for upload
* @param file
*/
submit: (file) => dispatch(uploadCompose([file])),
});
@ -230,7 +236,10 @@ class DoodleModal extends ImmutablePureComponent {
//endregion
/** Key up handler */
/**
* Key up handler
* @param e
*/
handleKeyUp = (e) => {
if (e.target.nodeName === 'INPUT') return;
@ -256,7 +265,10 @@ class DoodleModal extends ImmutablePureComponent {
}
};
/** Key down handler */
/**
* Key down handler
* @param e
*/
handleKeyDown = (e) => {
if (e.key === 'Control' || e.key === 'Meta') {
this.controlHeld = true;
@ -292,7 +304,6 @@ class DoodleModal extends ImmutablePureComponent {
/**
* Set reference to the canvas element.
* This is called during component init
*
* @param elem - canvas element
*/
setCanvasRef = (elem) => {
@ -334,7 +345,6 @@ class DoodleModal extends ImmutablePureComponent {
/**
* Set up the sketcher instance
*
* @param canvas - canvas element. Null if we're just resizing
*/
initSketcher (canvas = null) {
@ -433,7 +443,6 @@ class DoodleModal extends ImmutablePureComponent {
/**
* Palette left click.
* Selects Fg color (or Bg, if Control/Meta is held)
*
* @param e - event
*/
onPaletteClick = (e) => {
@ -452,7 +461,6 @@ class DoodleModal extends ImmutablePureComponent {
/**
* Palette right click.
* Selects Bg color
*
* @param e - event
*/
onPaletteRClick = (e) => {
@ -463,7 +471,6 @@ class DoodleModal extends ImmutablePureComponent {
/**
* Handle click on the Draw mode button
*
* @param e - event
*/
setModeDraw = (e) => {
@ -473,7 +480,6 @@ class DoodleModal extends ImmutablePureComponent {
/**
* Handle click on the Fill mode button
*
* @param e - event
*/
setModeFill = (e) => {
@ -483,7 +489,6 @@ class DoodleModal extends ImmutablePureComponent {
/**
* Handle click on Smooth checkbox
*
* @param e - event
*/
tglSmooth = (e) => {
@ -493,7 +498,6 @@ class DoodleModal extends ImmutablePureComponent {
/**
* Handle click on Adaptive checkbox
*
* @param e - event
*/
tglAdaptive = (e) => {
@ -503,7 +507,6 @@ class DoodleModal extends ImmutablePureComponent {
/**
* Handle change of the Weight input field
*
* @param e - event
*/
setWeight = (e) => {
@ -512,7 +515,6 @@ class DoodleModal extends ImmutablePureComponent {
/**
* Set size - clalback from the select box
*
* @param e - event
*/
changeSize = (e) => {

2
app/javascript/flavours/glitch/features/ui/index.jsx
View file

@ -378,7 +378,7 @@ class UI extends React.Component {
if (layout !== this.props.layout) {
this.handleLayoutChange.cancel();
this.props.dispatch(changeLayout(layout));
this.props.dispatch(changeLayout({ layout }));
} else {
this.handleLayoutChange();
}

72
app/javascript/flavours/glitch/features/video/index.jsx
View file

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { is } from 'immutable';
import { throttle, debounce } from 'lodash';
import { throttle } from 'lodash';
import classNames from 'classnames';
import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
import { displayMedia, useBlurhash } from 'flavours/glitch/initial_state';
@ -102,8 +102,6 @@ class Video extends React.PureComponent {
src: PropTypes.string.isRequired,
alt: PropTypes.string,
lang: PropTypes.string,
width: PropTypes.number,
height: PropTypes.number,
sensitive: PropTypes.bool,
currentTime: PropTypes.number,
onOpenVideo: PropTypes.func,
@ -112,7 +110,6 @@ class Video extends React.PureComponent {
inline: PropTypes.bool,
editable: PropTypes.bool,
alwaysVisible: PropTypes.bool,
cacheWidth: PropTypes.func,
visible: PropTypes.bool,
letterbox: PropTypes.bool,
fullwidth: PropTypes.bool,
@ -138,41 +135,16 @@ class Video extends React.PureComponent {
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 : (displayMedia !== 'hide_all' && !this.props.sensitive || displayMedia === 'show_all'),
};
componentWillReceiveProps (nextProps) {
if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
this.setState({ revealed: nextProps.visible });
}
}
setPlayerRef = c => {
this.player = c;
if (this.player) {
this._setDimensions();
}
};
_setDimensions () {
const width = this.player.offsetWidth;
if (width && width !== this.state.containerWidth) {
if (this.props.cacheWidth) {
this.props.cacheWidth(width);
}
this.setState({
containerWidth: width,
});
}
}
setVideoRef = c => {
this.video = c;
@ -381,12 +353,10 @@ class Video extends React.PureComponent {
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);
@ -403,26 +373,18 @@ class Video extends React.PureComponent {
}
}
componentDidUpdate (prevProps) {
if (this.player && this.player.offsetWidth && this.player.offsetWidth !== this.state.containerWidth && !this.state.fullscreen) {
if (this.props.cacheWidth) this.props.cacheWidth(this.player.offsetWidth);
this.setState({
containerWidth: this.player.offsetWidth,
});
componentWillReceiveProps (nextProps) {
if (!is(nextProps.visible, this.props.visible) && nextProps.visible !== undefined) {
this.setState({ revealed: nextProps.visible });
}
}
componentDidUpdate (prevProps) {
if (this.video && this.state.revealed && this.props.preventPlayback && !prevProps.preventPlayback) {
this.video.pause();
}
}
handleResize = debounce(() => {
if (this.player) {
this._setDimensions();
}
}, 250, {
trailing: true,
});
handleScroll = throttle(() => {
if (!this.video) {
return;
@ -540,21 +502,12 @@ class Video extends React.PureComponent {
render () {
const { preview, src, inline, onOpenVideo, onCloseVideo, intl, alt, lang, letterbox, fullwidth, detailed, sensitive, editable, blurhash, autoFocus } = this.props;
const { containerWidth, currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
const { currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
const progress = Math.min((currentTime / duration) * 100, 100);
const playerStyle = {};
const computedClass = classNames('video-player', { inactive: !revealed, detailed, inline: inline && !fullscreen, fullscreen, editable, letterbox, 'full-width': fullwidth });
let { width, height } = this.props;
if (inline && containerWidth) {
width = containerWidth;
height = containerWidth / (16/9);
playerStyle.height = height;
} else if (inline) {
return (<div className={computedClass} ref={this.setPlayerRef} tabIndex={0} />);
if (inline) {
playerStyle.aspectRatio = '16 / 9';
}
let preload;
@ -578,7 +531,7 @@ class Video extends React.PureComponent {
return (
<div
role='menuitem'
className={computedClass}
className={classNames('video-player', { inactive: !revealed, detailed, inline: inline && !fullscreen, fullscreen, editable, letterbox, 'full-width': fullwidth })}
style={playerStyle}
ref={this.setPlayerRef}
onMouseEnter={this.handleMouseEnter}
@ -605,8 +558,6 @@ class Video extends React.PureComponent {
aria-label={alt}
title={alt}
lang={lang}
width={width}
height={height}
volume={volume}
onClick={this.togglePlay}
onKeyDown={this.handleVideoKeyDown}
@ -615,6 +566,7 @@ class Video extends React.PureComponent {
onLoadedData={this.handleLoadedData}
onProgress={this.handleProgress}
onVolumeChange={this.handleVolumeChange}
style={{ ...playerStyle, width: '100%' }}
/>}
<div className={classNames('spoiler-button', { 'spoiler-button--hidden': revealed || editable })}>

1
app/javascript/flavours/glitch/initial_state.js
View file

@ -97,6 +97,7 @@
* @property {object} local_settings
* @property {number} max_toot_chars
* @property {number} poll_limits
* @property {number} max_reactions
*/
const element = document.getElementById('initial-state');

18
app/javascript/flavours/glitch/is_mobile.js → app/javascript/flavours/glitch/is_mobile.ts
View file

@ -1,21 +1,12 @@
// @ts-check
import { supportsPassiveEvents } from 'detect-passive-events';
import { forceSingleColumn } from 'flavours/glitch/initial_state';
const LAYOUT_BREAKPOINT = 630;
/**
* @param {number} width
* @returns {boolean}
*/
export const isMobile = width => width <= LAYOUT_BREAKPOINT;
export const isMobile = (width: number) => width <= LAYOUT_BREAKPOINT;
/**
* @param {string} layout_local_setting
* @returns {string}
*/
export const layoutFromWindow = (layout_local_setting) => {
export type LayoutType = 'mobile' | 'single-column' | 'multi-column';
export const layoutFromWindow = (layout_local_setting : string): LayoutType => {
switch (layout_local_setting) {
case 'multiple':
return 'multi-column';
@ -36,8 +27,9 @@ export const layoutFromWindow = (layout_local_setting) => {
}
};
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && window.MSStream != null;
const listenerOptions = supportsPassiveEvents ? { passive: true } : false;

3
app/javascript/flavours/glitch/main.jsx
View file

@ -1,7 +1,8 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { setupBrowserNotifications } from 'flavours/glitch/actions/notifications';
import Mastodon, { store } from 'flavours/glitch/containers/mastodon';
import Mastodon from 'flavours/glitch/containers/mastodon';
import { store } from 'flavours/glitch/store/configureStore';
import { me } from 'flavours/glitch/initial_state';
import ready from 'flavours/glitch/ready';

0
app/javascript/flavours/glitch/permissions.js → app/javascript/flavours/glitch/permissions.ts
View file

6
app/javascript/flavours/glitch/reducers/meta.js
View file

@ -1,5 +1,5 @@
import { STORE_HYDRATE } from 'flavours/glitch/actions/store';
import { APP_LAYOUT_CHANGE } from 'flavours/glitch/actions/app';
import { changeLayout } from 'flavours/glitch/actions/app';
import { Map as ImmutableMap } from 'immutable';
import { layoutFromWindow } from 'flavours/glitch/is_mobile';
@ -16,8 +16,8 @@ export default function meta(state = initialState, action) {
return state.merge(action.state.get('meta'))
.set('permissions', action.state.getIn(['role', 'permissions']))
.set('layout', layoutFromWindow(action.state.getIn(['local_settings', 'layout'])));
case APP_LAYOUT_CHANGE:
return state.set('layout', action.layout);
case changeLayout.type:
return state.set('layout', action.payload.layout);
default:
return state;
}

6
app/javascript/flavours/glitch/reducers/pinned_accounts_editor.js
View file

@ -4,7 +4,7 @@ import {
PINNED_ACCOUNTS_FETCH_REQUEST,
PINNED_ACCOUNTS_FETCH_SUCCESS,
PINNED_ACCOUNTS_FETCH_FAIL,
PINNED_ACCOUNTS_EDITOR_SUGGESTIONS_READY,
PINNED_ACCOUNTS_SUGGESTIONS_FETCH_SUCCESS,
PINNED_ACCOUNTS_EDITOR_SUGGESTIONS_CLEAR,
PINNED_ACCOUNTS_EDITOR_SUGGESTIONS_CHANGE,
ACCOUNT_PIN_SUCCESS,
@ -38,10 +38,10 @@ export default function listEditorReducer(state = initialState, action) {
map.set('loaded', true);
map.set('items', ImmutableList(action.accounts.map(item => item.id)));
}));
case PINNED_ACCOUNTS_SUGGESTIONS_FETCH_SUCCESS:
return state.setIn(['suggestions', 'items'], ImmutableList(action.accounts.map(item => item.id)));
case PINNED_ACCOUNTS_EDITOR_SUGGESTIONS_CHANGE:
return state.setIn(['suggestions', 'value'], action.value);
case PINNED_ACCOUNTS_EDITOR_SUGGESTIONS_READY:
return state.setIn(['suggestions', 'items'], ImmutableList(action.accounts.map(item => item.id)));
case PINNED_ACCOUNTS_EDITOR_SUGGESTIONS_CLEAR:
return state.update('suggestions', suggestions => suggestions.withMutations(map => {
map.set('items', ImmutableList());

9
app/javascript/flavours/glitch/scroll.js → app/javascript/flavours/glitch/scroll.ts
View file

@ -1,6 +1,5 @@
const easingOutQuint = (x, t, b, c, d) => c * ((t = t / d - 1) * t * t * t * t + 1) + b;
const scroll = (node, key, target) => {
const easingOutQuint = (x: number, t: number, b: number, c: number, d: number) => c * ((t = t / d - 1) * t * t * t * t + 1) + b;
const scroll = (node: Element, key: 'scrollTop' | 'scrollLeft', target: number) => {
const startTime = Date.now();
const offset = node[key];
const gap = target - offset;
@ -28,5 +27,5 @@ const scroll = (node, key, target) => {
const isScrollBehaviorSupported = 'scrollBehavior' in document.documentElement.style;
export const scrollRight = (node, position) => isScrollBehaviorSupported ? node.scrollTo({ left: position, behavior: 'smooth' }) : scroll(node, 'scrollLeft', position);
export const scrollTop = (node) => isScrollBehaviorSupported ? node.scrollTo({ top: 0, behavior: 'smooth' }) : scroll(node, 'scrollTop', 0);
export const scrollRight = (node: Element, position: number) => isScrollBehaviorSupported ? node.scrollTo({ left: position, behavior: 'smooth' }) : scroll(node, 'scrollLeft', position);
export const scrollTop = (node: Element) => isScrollBehaviorSupported ? node.scrollTo({ top: 0, behavior: 'smooth' }) : scroll(node, 'scrollTop', 0);

11
app/javascript/flavours/glitch/store/configureStore.js
View file

@ -1,15 +1,16 @@
import { createStore, applyMiddleware, compose } from 'redux';
import { configureStore } from '@reduxjs/toolkit';
import thunk from 'redux-thunk';
import appReducer from '../reducers';
import loadingBarMiddleware from '../middleware/loading_bar';
import errorsMiddleware from '../middleware/errors';
import soundsMiddleware from '../middleware/sounds';
export default function configureStore() {
return createStore(appReducer, compose(applyMiddleware(
export const store = configureStore({
reducer: appReducer,
middleware: [
thunk,
loadingBarMiddleware({ promiseTypeSuffixes: ['REQUEST', 'SUCCESS', 'FAIL'] }),
errorsMiddleware(),
soundsMiddleware(),
), window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : f => f));
}
],
});

14
app/javascript/flavours/glitch/stream.js
View file

@ -17,10 +17,10 @@ let sharedConnection;
*/
/**
* @typedef StreamEvent
* @property {string} event
* @property {object} payload
*/
* @typedef StreamEvent
* @property {string} event
* @property {object} payload
*/
/**
* @type {Array.<Subscription>}
@ -126,7 +126,7 @@ const sharedCallbacks = {
/**
* @param {string} channelName
* @param {Object.<string, string>} params
* @return {string}
* @returns {string}
*/
const channelNameWithInlineParams = (channelName, params) => {
if (Object.keys(params).length === 0) {
@ -140,7 +140,7 @@ const channelNameWithInlineParams = (channelName, params) => {
* @param {string} channelName
* @param {Object.<string, string>} params
* @param {function(Function, Function): { onConnect: (function(): void), onReceive: (function(StreamEvent): void), onDisconnect: (function(): void) }} callbacks
* @return {function(): void}
* @returns {function(): void}
*/
// @ts-expect-error
export const connectStream = (channelName, params, callbacks) => (dispatch, getState) => {
@ -227,7 +227,7 @@ const handleEventSourceMessage = (e, received) => {
* @param {string} accessToken
* @param {string} channelName
* @param {{ connected: Function, received: function(StreamEvent): void, disconnected: Function, reconnected: Function }} callbacks
* @return {WebSocketClient | EventSource}
* @returns {WebSocketClient | EventSource}
*/
const createConnection = (streamingAPIBaseURL, accessToken, channelName, { connected, received, disconnected, reconnected }) => {
const params = channelName.split('&');

1
app/javascript/flavours/glitch/styles/_mixins.scss
View file

@ -47,7 +47,6 @@
margin-right: -14px;
width: inherit;
max-width: none;
height: 250px;
border-radius: 0;
}
}

51
app/javascript/flavours/glitch/styles/components/media.scss
View file

@ -43,30 +43,25 @@
font-weight: 500;
}
.media-gallery__gifv__label {
display: block;
.media-gallery__item__badges {
position: absolute;
color: $primary-text-color;
background: rgba($base-overlay-background, 0.5);
bottom: 6px;
inset-inline-start: 6px;
padding: 2px 6px;
border-radius: 2px;
font-size: 11px;
font-weight: 600;
z-index: 1;
pointer-events: none;
opacity: 0.9;
transition: opacity 0.1s ease;
line-height: 18px;
display: flex;
gap: 2px;
}
.media-gallery__gifv {
&:hover {
.media-gallery__gifv__label {
opacity: 1;
}
}
.media-gallery__gifv__label {
display: block;
color: $white;
background: rgba($black, 0.65);
padding: 2px 6px;
border-radius: 4px;
font-size: 11px;
font-weight: 700;
z-index: 1;
pointer-events: none;
line-height: 18px;
}
.media-gallery {
@ -77,6 +72,10 @@
position: relative;
width: 100%;
min-height: 64px;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 50% 50%;
gap: 2px;
@include fullwidth-gallery;
}
@ -85,13 +84,16 @@
border: 0;
box-sizing: border-box;
display: block;
float: left;
position: relative;
border-radius: 4px;
overflow: hidden;
.full-width & {
border-radius: 0;
&--tall {
grid-row: span 2;
}
&--wide {
grid-column: span 2;
}
&.standalone {
@ -101,6 +103,10 @@
}
}
.full-width & {
border-radius: 0;
}
&.letterbox {
background: $base-shadow-color;
}
@ -381,6 +387,7 @@
background: darken($ui-base-color, 8%);
border-radius: 4px;
padding-bottom: 44px;
width: 100%;
&.editable {
border-radius: 0;

18
app/javascript/flavours/glitch/styles/components/status.scss
View file

@ -707,7 +707,6 @@ a.status__display-name,
margin-inline-end: 10px;
height: 48px;
width: 48px;
box-shadow: 0 0 0 2px $ui-base-color;
}
.muted {
@ -825,6 +824,10 @@ a.status-card {
}
.status-card-video {
// Firefox has a bug where frameborder=0 iframes add some extra blank space
// see https://bugzilla.mozilla.org/show_bug.cgi?id=155174
overflow: hidden;
iframe {
width: 100%;
height: 100%;
@ -1064,12 +1067,12 @@ a.status-card.compact:hover {
}
&__line {
height: 16px - 4px;
height: 10px - 4px;
border-inline-start: 2px solid lighten($ui-base-color, 8%);
width: 0;
position: absolute;
top: 0;
inset-inline-start: 16px + ((46px - 2px) * 0.5);
inset-inline-start: 14px + ((48px - 2px) * 0.5);
&--full {
top: 0;
@ -1079,8 +1082,8 @@ a.status-card.compact:hover {
content: '';
display: block;
position: absolute;
top: 16px - 4px;
height: 46px + 4px + 4px;
top: 10px - 4px;
height: 48px + 4px + 4px;
width: 2px;
background: $ui-base-color;
inset-inline-start: -2px;
@ -1088,8 +1091,8 @@ a.status-card.compact:hover {
}
&--first {
top: 16px + 46px + 4px;
height: calc(100% - (16px + 46px + 4px));
top: 10px + 48px + 4px;
height: calc(100% - (10px + 48px + 4px));
&::before {
display: none;
@ -1171,6 +1174,7 @@ a.status-card.compact:hover {
font-weight: 500;
cursor: pointer;
color: $darker-text-color;
aspect-ratio: 16 / 9;
i {
display: block;

10
app/javascript/flavours/glitch/types/resources.ts Normal file
View file

@ -0,0 +1,10 @@
import type { Record } from 'immutable';
type AccountValues = {
id: number;
avatar: string;
avatar_static: string;
[key: string]: any;
};
export type Account = Record<AccountValues>;

1
app/javascript/flavours/glitch/types/util.ts Normal file
View file

@ -0,0 +1 @@
export type ValueOf<T> = T[keyof T];

2
app/javascript/mastodon/utils/base64.js → app/javascript/flavours/glitch/utils/base64.ts
View file

@ -1,4 +1,4 @@
export const decode = base64 => {
export const decode = (base64: string): Uint8Array => {
const rawData = window.atob(base64);
const outputArray = new Uint8Array(rawData.length);

2
app/javascript/flavours/glitch/utils/filters.js → app/javascript/flavours/glitch/utils/filters.ts
View file

@ -1,4 +1,4 @@
export const toServerSideType = columnType => {
export const toServerSideType = (columnType: string) => {
switch (columnType) {
case 'home':
case 'notifications':

2
app/javascript/flavours/glitch/utils/hashtag.js
View file

@ -1,6 +1,6 @@
export function recoverHashtags (recognizedTags, text) {
return recognizedTags.map(tag => {
const re = new RegExp(`(?:^|[^/)\w])#(${tag.name})`, 'i');
const re = new RegExp(`(?:^|[^/)\\w])#(${tag.name})`, 'i');
const matched_hashtag = text.match(re);
return matched_hashtag ? matched_hashtag[1] : null;
},

31
app/javascript/mastodon/utils/numbers.js → app/javascript/flavours/glitch/utils/numbers.ts
View file

@ -1,23 +1,19 @@
// @ts-check
import type { ValueOf } from 'flavours/glitch/types/util';
export const DECIMAL_UNITS = Object.freeze({
ONE: 1,
TEN: 10,
HUNDRED: Math.pow(10, 2),
THOUSAND: Math.pow(10, 3),
MILLION: Math.pow(10, 6),
BILLION: Math.pow(10, 9),
TRILLION: Math.pow(10, 12),
HUNDRED: 100,
THOUSAND: 1_000,
MILLION: 1_000_000,
BILLION: 1_000_000_000,
TRILLION: 1_000_000_000_000,
});
export type DecimalUnits = ValueOf<typeof DECIMAL_UNITS>;
const TEN_THOUSAND = DECIMAL_UNITS.THOUSAND * 10;
const TEN_MILLIONS = DECIMAL_UNITS.MILLION * 10;
/**
* @typedef {[number, number, number]} ShortNumber
* Array of: shorten number, unit of shorten number and maximum fraction digits
*/
/**
* @param {number} sourceNumber Number to convert to short number
* @returns {ShortNumber} Calculated short number
@ -25,7 +21,8 @@ const TEN_MILLIONS = DECIMAL_UNITS.MILLION * 10;
* shortNumber(5936);
* // => [5.936, 1000, 1]
*/
export function toShortNumber(sourceNumber) {
export type ShortNumber = [number, DecimalUnits, 0 | 1] // Array of: shorten number, unit of shorten number and maximum fraction digits
export function toShortNumber(sourceNumber: number): ShortNumber {
if (sourceNumber < DECIMAL_UNITS.THOUSAND) {
return [sourceNumber, DECIMAL_UNITS.ONE, 0];
} else if (sourceNumber < DECIMAL_UNITS.MILLION) {
@ -59,20 +56,16 @@ export function toShortNumber(sourceNumber) {
* pluralReady(1793, DECIMAL_UNITS.THOUSAND)
* // => 1790
*/
export function pluralReady(sourceNumber, division) {
export function pluralReady(sourceNumber: number, division: DecimalUnits): number {
if (division == null || division < DECIMAL_UNITS.HUNDRED) {
return sourceNumber;
}
let closestScale = division / DECIMAL_UNITS.TEN;
const closestScale = division / DECIMAL_UNITS.TEN;
return Math.trunc(sourceNumber / closestScale) * closestScale;
}
/**
* @param {number} num
* @returns {number}
*/
export function roundTo10(num) {
export function roundTo10(num: number): number {
return Math.round(num * 0.1) / 0.1;
}

4
app/javascript/flavours/glitch/utils/scrollbar.js
View file

@ -2,7 +2,7 @@
let cachedScrollbarWidth = null;
/**
* @return {number}
* @returns {number}
*/
const getActualScrollbarWidth = () => {
const outer = document.createElement('div');
@ -20,7 +20,7 @@ const getActualScrollbarWidth = () => {
};
/**
* @return {number}
* @returns {number}
*/
export const getScrollbarWidth = () => {
if (cachedScrollbarWidth !== null) {

17
app/javascript/mastodon/actions/app.js
View file

@ -1,17 +0,0 @@
export const APP_FOCUS = 'APP_FOCUS';
export const APP_UNFOCUS = 'APP_UNFOCUS';
export const focusApp = () => ({
type: APP_FOCUS,
});
export const unfocusApp = () => ({
type: APP_UNFOCUS,
});
export const APP_LAYOUT_CHANGE = 'APP_LAYOUT_CHANGE';
export const changeLayout = layout => ({
type: APP_LAYOUT_CHANGE,
layout,
});

10
app/javascript/mastodon/actions/app.ts Normal file
View file

@ -0,0 +1,10 @@
import { createAction } from '@reduxjs/toolkit';
export const focusApp = createAction('APP_FOCUS');
export const unfocusApp = createAction('APP_UNFOCUS');
type ChangeLayoutPayload = {
layout: 'mobile' | 'single-column' | 'multi-column';
};
export const changeLayout =
createAction<ChangeLayoutPayload>('APP_LAYOUT_CHANGE');

12
app/javascript/mastodon/actions/compose.js
View file

@ -408,16 +408,12 @@ export function changeUploadCompose(id, params) {
// Editing already-attached media is deferred to editing the post itself.
// For simplicity's sake, fake an API reply.
if (media && !media.get('unattached')) {
let { description, focus } = params;
const data = media.toJS();
if (description) {
data.description = description;
}
const { focus, ...other } = params;
const data = { ...media.toJS(), ...other };
if (focus) {
focus = focus.split(',');
data.meta = { focus: { x: parseFloat(focus[0]), y: parseFloat(focus[1]) } };
const [x, y] = focus.split(',');
data.meta = { focus: { x: parseFloat(x), y: parseFloat(y) } };
}
dispatch(changeUploadComposeSuccess(data, true));

2
app/javascript/mastodon/actions/picture_in_picture.js
View file

@ -20,7 +20,7 @@ export const PICTURE_IN_PICTURE_REMOVE = 'PICTURE_IN_PICTURE_REMOVE';
* @param {string} accountId
* @param {string} playerType
* @param {MediaProps} props
* @return {object}
* @returns {object}
*/
export const deployPictureInPicture = (statusId, accountId, playerType, props) => {
// @ts-expect-error

16
app/javascript/mastodon/actions/streaming.js
View file

@ -27,7 +27,7 @@ const { messages } = getLocale();
/**
* @param {number} max
* @return {number}
* @returns {number}
*/
const randomUpTo = max =>
Math.floor(Math.random() * Math.floor(max));
@ -40,7 +40,7 @@ const randomUpTo = max =>
* @param {function(Function, Function): void} [options.fallback]
* @param {function(): void} [options.fillGaps]
* @param {function(object): boolean} [options.accept]
* @return {function(): void}
* @returns {function(): void}
*/
export const connectTimelineStream = (timelineId, channelName, params = {}, options = {}) =>
connectStream(channelName, params, (dispatch, getState) => {
@ -132,7 +132,7 @@ const refreshHomeTimelineAndNotification = (dispatch, done) => {
};
/**
* @return {function(): void}
* @returns {function(): void}
*/
export const connectUserStream = () =>
// @ts-expect-error
@ -141,7 +141,7 @@ export const connectUserStream = () =>
/**
* @param {Object} options
* @param {boolean} [options.onlyMedia]
* @return {function(): void}
* @returns {function(): void}
*/
export const connectCommunityStream = ({ onlyMedia } = {}) =>
connectTimelineStream(`community${onlyMedia ? ':media' : ''}`, `public:local${onlyMedia ? ':media' : ''}`, {}, { fillGaps: () => (fillCommunityTimelineGaps({ onlyMedia })) });
@ -150,7 +150,7 @@ export const connectCommunityStream = ({ onlyMedia } = {}) =>
* @param {Object} options
* @param {boolean} [options.onlyMedia]
* @param {boolean} [options.onlyRemote]
* @return {function(): void}
* @returns {function(): void}
*/
export const connectPublicStream = ({ onlyMedia, onlyRemote } = {}) =>
connectTimelineStream(`public${onlyRemote ? ':remote' : ''}${onlyMedia ? ':media' : ''}`, `public${onlyRemote ? ':remote' : ''}${onlyMedia ? ':media' : ''}`, {}, { fillGaps: () => fillPublicTimelineGaps({ onlyMedia, onlyRemote }) });
@ -160,20 +160,20 @@ export const connectPublicStream = ({ onlyMedia, onlyRemote } = {}) =>
* @param {string} tagName
* @param {boolean} onlyLocal
* @param {function(object): boolean} accept
* @return {function(): void}
* @returns {function(): void}
*/
export const connectHashtagStream = (columnId, tagName, onlyLocal, accept) =>
connectTimelineStream(`hashtag:${columnId}${onlyLocal ? ':local' : ''}`, `hashtag${onlyLocal ? ':local' : ''}`, { tag: tagName }, { accept });
/**
* @return {function(): void}
* @returns {function(): void}
*/
export const connectDirectStream = () =>
connectTimelineStream('direct', 'direct');
/**
* @param {string} listId
* @return {function(): void}
* @returns {function(): void}
*/
export const connectListStream = listId =>
connectTimelineStream(`list:${listId}`, 'list', { list: listId }, { fillGaps: () => fillListTimelineGaps(listId) });

6
app/javascript/mastodon/blurhash.js → app/javascript/mastodon/blurhash.ts
View file

@ -84,7 +84,7 @@ const DIGIT_CHARACTERS = [
'~',
];
export const decode83 = (str) => {
export const decode83 = (str: string) => {
let value = 0;
let c, digit;
@ -97,13 +97,13 @@ export const decode83 = (str) => {
return value;
};
export const intToRGB = int => ({
export const intToRGB = (int: number) => ({
r: Math.max(0, (int >> 16)),
g: Math.max(0, (int >> 8) & 255),
b: Math.max(0, (int & 255)),
});
export const getAverageFromBlurhash = blurhash => {
export const getAverageFromBlurhash = (blurhash: string) => {
if (!blurhash) {
return null;
}

2
app/javascript/flavours/glitch/compare_id.js → app/javascript/mastodon/compare_id.ts
View file

@ -1,4 +1,4 @@
export default function compareId (id1, id2) {
export default function compareId (id1: string, id2: string) {
if (id1 === id2) {
return 0;
}

66
app/javascript/mastodon/components/blurhash.jsx
View file

@ -1,66 +0,0 @@
// @ts-check
import { decode } from 'blurhash';
import React, { useRef, useEffect } from 'react';
import PropTypes from 'prop-types';
/**
* @typedef BlurhashPropsBase
* @property {string?} hash Hash to render
* @property {number} width
* Width of the blurred region in pixels. Defaults to 32
* @property {number} [height]
* Height of the blurred region in pixels. Defaults to width
* @property {boolean} [dummy]
* Whether dummy mode is enabled. If enabled, nothing is rendered
* and canvas left untouched
*/
/** @typedef {JSX.IntrinsicElements['canvas'] & BlurhashPropsBase} BlurhashProps */
/**
* Component that is used to render blurred of blurhash string
*
* @param {BlurhashProps} param1 Props of the component
* @returns Canvas which will render blurred region element to embed
*/
function Blurhash({
hash,
width = 32,
height = width,
dummy = false,
...canvasProps
}) {
const canvasRef = /** @type {import('react').MutableRefObject<HTMLCanvasElement>} */ (useRef());
useEffect(() => {
const { current: canvas } = canvasRef;
canvas.width = canvas.width; // resets canvas
if (dummy || !hash) return;
try {
const pixels = decode(hash, width, height);
const ctx = canvas.getContext('2d');
const imageData = new ImageData(pixels, width, height);
// @ts-expect-error
ctx.putImageData(imageData, 0, 0);
} catch (err) {
console.error('Blurhash decoding failure', { err, hash });
}
}, [dummy, hash, width, height]);
return (
<canvas {...canvasProps} ref={canvasRef} width={width} height={height} />
);
}
Blurhash.propTypes = {
hash: PropTypes.string.isRequired,
width: PropTypes.number,
height: PropTypes.number,
dummy: PropTypes.bool,
};
export default React.memo(Blurhash);

45
app/javascript/mastodon/components/blurhash.tsx Normal file
View file

@ -0,0 +1,45 @@
import { decode } from 'blurhash';
import React, { useRef, useEffect } from 'react';
type Props = {
hash: string;
width?: number;
height?: number;
dummy?: boolean; // Whether dummy mode is enabled. If enabled, nothing is rendered and canvas left untouched
children?: never;
[key: string]: any;
}
function Blurhash({
hash,
width = 32,
height = width,
dummy = false,
...canvasProps
}: Props) {
const canvasRef = useRef<HTMLCanvasElement>(null);
useEffect(() => {
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
const canvas = canvasRef.current!;
// eslint-disable-next-line no-self-assign
canvas.width = canvas.width; // resets canvas
if (dummy || !hash) return;
try {
const pixels = decode(hash, width, height);
const ctx = canvas.getContext('2d');
const imageData = new ImageData(pixels, width, height);
ctx?.putImageData(imageData, 0, 0);
} catch (err) {
console.error('Blurhash decoding failure', { err, hash });
}
}, [dummy, hash, width, height]);
return (
<canvas {...canvasProps} ref={canvasRef} width={width} height={height} />
);
}
export default React.memo(Blurhash);

4
app/javascript/mastodon/components/column_back_button.jsx
View file

@ -21,7 +21,9 @@ export default class ColumnBackButton extends React.PureComponent {
if (onClick) {
onClick();
} else if (window.history && window.history.state) {
// Check if there is a previous page in the app to go back to per https://stackoverflow.com/a/70532858/9703201
// When upgrading to V6, check `location.key !== 'default'` instead per https://github.com/remix-run/history/blob/main/docs/api-reference.md#location
} else if (router.route.location.key) {
router.history.goBack();
} else {
router.history.push('/');

1
app/javascript/mastodon/components/common_counter.jsx
View file

@ -4,7 +4,6 @@ import { FormattedMessage } from 'react-intl';
/**
* Returns custom renderer for one of the common counter types
*
* @param {"statuses" | "following" | "followers"} counterType
* Type of the counter
* @param {boolean} isBold Whether display number must be displayed in bold

1
app/javascript/mastodon/components/hashtag.jsx
View file

@ -37,7 +37,6 @@ class SilentErrorBoundary extends React.Component {
/**
* Used to render counter of how much people are talking about hashtag
*
* @type {(displayNumber: JSX.Element, pluralReady: number) => JSX.Element}
*/
export const accountsCountRenderer = (displayNumber, pluralReady) => (

21
app/javascript/mastodon/components/icon.jsx
View file

@ -1,21 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
export default class Icon extends React.PureComponent {
static propTypes = {
id: PropTypes.string.isRequired,
className: PropTypes.string,
fixedWidth: PropTypes.bool,
};
render () {
const { id, className, fixedWidth, ...other } = this.props;
return (
<i className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })} {...other} />
);
}
}

14
app/javascript/mastodon/components/icon.tsx Normal file
View file

@ -0,0 +1,14 @@
import React from 'react';
import classNames from 'classnames';
type Props = {
id: string;
className?: string;
fixedWidth?: boolean;
children?: never;
[key: string]: any;
}
export const Icon: React.FC<Props> = ({ id, className, fixedWidth, ...other }) =>
<i className={classNames('fa', `fa-${id}`, className, { 'fa-fw': fixedWidth })} {...other} />;
export default Icon;

72
app/javascript/mastodon/components/icon_button.jsx → app/javascript/mastodon/components/icon_button.tsx
View file

@ -1,34 +1,36 @@
import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import Icon from 'mastodon/components/icon';
import AnimatedNumber from 'mastodon/components/animated_number';
import { Icon } from './icon';
import { AnimatedNumber } from './animated_number';
export default class IconButton extends React.PureComponent {
static propTypes = {
className: PropTypes.string,
title: PropTypes.string.isRequired,
icon: PropTypes.string.isRequired,
onClick: PropTypes.func,
onMouseDown: PropTypes.func,
onKeyDown: PropTypes.func,
onKeyPress: PropTypes.func,
size: PropTypes.number,
active: PropTypes.bool,
expanded: PropTypes.bool,
style: PropTypes.object,
activeStyle: PropTypes.object,
disabled: PropTypes.bool,
inverted: PropTypes.bool,
animate: PropTypes.bool,
overlay: PropTypes.bool,
tabIndex: PropTypes.number,
counter: PropTypes.number,
obfuscateCount: PropTypes.bool,
href: PropTypes.string,
ariaHidden: PropTypes.bool,
};
type Props = {
className?: string;
title: string;
icon: string;
onClick?: React.MouseEventHandler<HTMLButtonElement>;
onMouseDown?: React.MouseEventHandler<HTMLButtonElement>;
onKeyDown?: React.KeyboardEventHandler<HTMLButtonElement>;
onKeyPress?: React.KeyboardEventHandler<HTMLButtonElement>;
size: number;
active: boolean;
expanded?: boolean;
style?: React.CSSProperties;
activeStyle?: React.CSSProperties;
disabled: boolean;
inverted?: boolean;
animate: boolean;
overlay: boolean;
tabIndex: number;
counter?: number;
obfuscateCount?: boolean;
href?: string;
ariaHidden: boolean;
}
type States = {
activate: boolean,
deactivate: boolean,
}
export default class IconButton extends React.PureComponent<Props, States> {
static defaultProps = {
size: 18,
@ -45,7 +47,7 @@ export default class IconButton extends React.PureComponent {
deactivate: false,
};
componentWillReceiveProps (nextProps) {
UNSAFE_componentWillReceiveProps (nextProps: Props) {
if (!nextProps.animate) return;
if (this.props.active && !nextProps.active) {
@ -55,27 +57,27 @@ export default class IconButton extends React.PureComponent {
}
}
handleClick = (e) => {
handleClick: React.MouseEventHandler<HTMLButtonElement> = (e) => {
e.preventDefault();
if (!this.props.disabled) {
if (!this.props.disabled && this.props.onClick != null) {
this.props.onClick(e);
}
};
handleKeyPress = (e) => {
handleKeyPress: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
if (this.props.onKeyPress && !this.props.disabled) {
this.props.onKeyPress(e);
}
};
handleMouseDown = (e) => {
handleMouseDown: React.MouseEventHandler<HTMLButtonElement> = (e) => {
if (!this.props.disabled && this.props.onMouseDown) {
this.props.onMouseDown(e);
}
};
handleKeyDown = (e) => {
handleKeyDown: React.KeyboardEventHandler<HTMLButtonElement> = (e) => {
if (!this.props.disabled && this.props.onKeyDown) {
this.props.onKeyDown(e);
}
@ -132,7 +134,7 @@ export default class IconButton extends React.PureComponent {
</React.Fragment>
);
if (href && !this.prop) {
if (href != null) {
contents = (
<a href={href} target='_blank' rel='noopener noreferrer'>
{contents}

22
app/javascript/mastodon/components/icon_with_badge.jsx
View file

@ -1,22 +0,0 @@
import React from 'react';
import PropTypes from 'prop-types';
import Icon from 'mastodon/components/icon';
const formatNumber = num => num > 40 ? '40+' : num;
const IconWithBadge = ({ id, count, issueBadge, className }) => (
<i className='icon-with-badge'>
<Icon id={id} fixedWidth className={className} />
{count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>}
{issueBadge && <i className='icon-with-badge__issue-badge' />}
</i>
);
IconWithBadge.propTypes = {
id: PropTypes.string.isRequired,
count: PropTypes.number.isRequired,
issueBadge: PropTypes.bool,
className: PropTypes.string,
};
export default IconWithBadge;

20
app/javascript/mastodon/components/icon_with_badge.tsx Normal file
View file

@ -0,0 +1,20 @@
import React from 'react';
import { Icon } from './icon';
const formatNumber = (num: number): number | string => num > 40 ? '40+' : num;
type Props = {
id: string;
count: number;
issueBadge: boolean;
className: string;
}
const IconWithBadge: React.FC<Props> = ({ id, count, issueBadge, className }) => (
<i className='icon-with-badge'>
<Icon id={id} fixedWidth className={className} />
{count > 0 && <i className='icon-with-badge__badge'>{formatNumber(count)}</i>}
{issueBadge && <i className='icon-with-badge__issue-badge' />}
</i>
);
export default IconWithBadge;

67
app/javascript/mastodon/components/media_gallery.jsx
View file

@ -81,12 +81,10 @@ class Item extends React.PureComponent {
render () {
const { attachment, lang, index, size, standalone, displayWidth, visible } = this.props;
let badges = [], thumbnail;
let width = 50;
let height = 100;
let top = 'auto';
let left = 'auto';
let bottom = 'auto';
let right = 'auto';
if (size === 1) {
width = 100;
@ -96,45 +94,13 @@ class Item extends React.PureComponent {
height = 50;
}
if (size === 2) {
if (index === 0) {
right = '2px';
} else {
left = '2px';
}
} else if (size === 3) {
if (index === 0) {
right = '2px';
} else if (index > 0) {
left = '2px';
}
if (index === 1) {
bottom = '2px';
} else if (index > 1) {
top = '2px';
}
} else if (size === 4) {
if (index === 0 || index === 2) {
right = '2px';
}
if (index === 1 || index === 3) {
left = '2px';
}
if (index < 2) {
bottom = '2px';
} else {
top = '2px';
}
if (attachment.get('description')?.length > 0) {
badges.push(<span key='alt' className='media-gallery__gifv__label'>ALT</span>);
}
let thumbnail = '';
if (attachment.get('type') === 'unknown') {
return (
<div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
<div className={classNames('media-gallery__item', { standalone, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')}>
<a className='media-gallery__item-thumbnail' href={attachment.get('remote_url') || attachment.get('url')} style={{ cursor: 'pointer' }} title={attachment.get('description')} lang={lang} target='_blank' rel='noopener noreferrer'>
<Blurhash
hash={attachment.get('blurhash')}
@ -184,6 +150,8 @@ class Item extends React.PureComponent {
} else if (attachment.get('type') === 'gifv') {
const autoPlay = this.getAutoPlay();
badges.push(<span key='gif' className='media-gallery__gifv__label'>GIF</span>);
thumbnail = (
<div className={classNames('media-gallery__gifv', { autoplay: autoPlay })}>
<video
@ -201,14 +169,12 @@ class Item extends React.PureComponent {
loop
muted
/>
<span className='media-gallery__gifv__label'>GIF</span>
</div>
);
}
return (
<div className={classNames('media-gallery__item', { standalone })} key={attachment.get('id')} style={{ left: left, top: top, right: right, bottom: bottom, width: `${width}%`, height: `${height}%` }}>
<div className={classNames('media-gallery__item', { standalone, 'media-gallery__item--tall': height === 100, 'media-gallery__item--wide': width === 100 })} key={attachment.get('id')}>
<Blurhash
hash={attachment.get('blurhash')}
dummy={!useBlurhash}
@ -216,7 +182,14 @@ class Item extends React.PureComponent {
'media-gallery__preview--hidden': visible && this.state.loaded,
})}
/>
{visible && thumbnail}
{badges && (
<div className='media-gallery__item__badges'>
{badges}
</div>
)}
</div>
);
}
@ -313,7 +286,7 @@ class MediaGallery extends React.PureComponent {
}
render () {
const { media, lang, intl, sensitive, height, defaultWidth, standalone, autoplay } = this.props;
const { media, lang, intl, sensitive, defaultWidth, standalone, autoplay } = this.props;
const { visible } = this.state;
const width = this.state.width || defaultWidth;
@ -322,13 +295,9 @@ class MediaGallery extends React.PureComponent {
const style = {};
if (this.isFullSizeEligible() && (standalone || !cropImages)) {
if (width) {
style.height = width / this.props.media.getIn([0, 'meta', 'small', 'aspect']);
}
} else if (width) {
style.height = width / (16/9);
style.aspectRatio = `${this.props.media.getIn([0, 'meta', 'small', 'aspect'])}`;
} else {
style.height = height;
style.aspectRatio = '16 / 9';
}
const size = media.take(4).size;

42
app/javascript/mastodon/components/picture_in_picture_placeholder.jsx
View file

@ -3,62 +3,22 @@ import PropTypes from 'prop-types';
import Icon from 'mastodon/components/icon';
import { removePictureInPicture } from 'mastodon/actions/picture_in_picture';
import { connect } from 'react-redux';
import { debounce } from 'lodash';
import { FormattedMessage } from 'react-intl';
class PictureInPicturePlaceholder extends React.PureComponent {
static propTypes = {
width: PropTypes.number,
dispatch: PropTypes.func.isRequired,
};
state = {
width: this.props.width,
height: this.props.width && (this.props.width / (16/9)),
};
handleClick = () => {
const { dispatch } = this.props;
dispatch(removePictureInPicture());
};
setRef = c => {
this.node = c;
if (this.node) {
this._setDimensions();
}
};
_setDimensions () {
const width = this.node.offsetWidth;
const height = width / (16/9);
this.setState({ width, height });
}
componentDidMount () {
window.addEventListener('resize', this.handleResize, { passive: true });
}
componentWillUnmount () {
window.removeEventListener('resize', this.handleResize);
}
handleResize = debounce(() => {
if (this.node) {
this._setDimensions();
}
}, 250, {
trailing: true,
});
render () {
const { height } = this.state;
return (
<div ref={this.setRef} className='picture-in-picture-placeholder' style={{ height }} role='button' tabIndex={0} onClick={this.handleClick}>
<div className='picture-in-picture-placeholder' role='button' tabIndex={0} onClick={this.handleClick}>
<Icon id='window-restore' />
<FormattedMessage id='picture_in_picture.restore' defaultMessage='Put it back' />
</div>

51
app/javascript/mastodon/components/relative_timestamp.jsx → app/javascript/mastodon/components/relative_timestamp.tsx
View file

@ -1,6 +1,5 @@
import React from 'react';
import { injectIntl, defineMessages } from 'react-intl';
import PropTypes from 'prop-types';
import { injectIntl, defineMessages, InjectedIntl } from 'react-intl';
const messages = defineMessages({
today: { id: 'relative_time.today', defaultMessage: 'today' },
@ -28,12 +27,12 @@ const dateFormatOptions = {
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
};
} as const;
const shortDateFormatOptions = {
month: 'short',
day: 'numeric',
};
} as const;
const SECOND = 1000;
const MINUTE = 1000 * 60;
@ -42,7 +41,7 @@ const DAY = 1000 * 60 * 60 * 24;
const MAX_DELAY = 2147483647;
const selectUnits = delta => {
const selectUnits = (delta: number) => {
const absDelta = Math.abs(delta);
if (absDelta < MINUTE) {
@ -56,7 +55,7 @@ const selectUnits = delta => {
return 'day';
};
const getUnitDelay = units => {
const getUnitDelay = (units: string) => {
switch (units) {
case 'second':
return SECOND;
@ -71,7 +70,7 @@ const getUnitDelay = units => {
}
};
export const timeAgoString = (intl, date, now, year, timeGiven, short) => {
export const timeAgoString = (intl: InjectedIntl, date: Date, now: number, year: number, timeGiven: boolean, short?: boolean) => {
const delta = now - date.getTime();
let relativeTime;
@ -99,7 +98,7 @@ export const timeAgoString = (intl, date, now, year, timeGiven, short) => {
return relativeTime;
};
const timeRemainingString = (intl, date, now, timeGiven = true) => {
const timeRemainingString = (intl: InjectedIntl, date: Date, now: number, timeGiven = true) => {
const delta = date.getTime() - now;
let relativeTime;
@ -121,15 +120,17 @@ const timeRemainingString = (intl, date, now, timeGiven = true) => {
return relativeTime;
};
class RelativeTimestamp extends React.Component {
static propTypes = {
intl: PropTypes.object.isRequired,
timestamp: PropTypes.string.isRequired,
year: PropTypes.number.isRequired,
futureDate: PropTypes.bool,
short: PropTypes.bool,
};
type Props = {
intl: InjectedIntl;
timestamp: string;
year: number;
futureDate?: boolean;
short?: boolean;
}
type States = {
now: number;
}
class RelativeTimestamp extends React.Component<Props, States> {
state = {
now: this.props.intl.now(),
@ -140,7 +141,9 @@ class RelativeTimestamp extends React.Component {
short: true,
};
shouldComponentUpdate (nextProps, nextState) {
_timer: number | undefined;
shouldComponentUpdate (nextProps: Props, nextState: States) {
// As of right now the locale doesn't change without a new page load,
// but we might as well check in case that ever changes.
return this.props.timestamp !== nextProps.timestamp ||
@ -148,7 +151,7 @@ class RelativeTimestamp extends React.Component {
this.state.now !== nextState.now;
}
componentWillReceiveProps (nextProps) {
UNSAFE_componentWillReceiveProps (nextProps: Props) {
if (this.props.timestamp !== nextProps.timestamp) {
this.setState({ now: this.props.intl.now() });
}
@ -158,16 +161,16 @@ class RelativeTimestamp extends React.Component {
this._scheduleNextUpdate(this.props, this.state);
}
componentWillUpdate (nextProps, nextState) {
UNSAFE_componentWillUpdate (nextProps: Props, nextState: States) {
this._scheduleNextUpdate(nextProps, nextState);
}
componentWillUnmount () {
clearTimeout(this._timer);
window.clearTimeout(this._timer);
}
_scheduleNextUpdate (props, state) {
clearTimeout(this._timer);
_scheduleNextUpdate (props: Props, state: States) {
window.clearTimeout(this._timer);
const { timestamp } = props;
const delta = (new Date(timestamp)).getTime() - state.now;
@ -176,7 +179,7 @@ class RelativeTimestamp extends React.Component {
const updateInterval = 1000 * 10;
const delay = delta < 0 ? Math.max(updateInterval, unitDelay - unitRemainder) : Math.max(updateInterval, unitRemainder);
this._timer = setTimeout(() => {
this._timer = window.setTimeout(() => {
this.setState({ now: this.props.intl.now() });
}, delay);
}

2
app/javascript/mastodon/components/short_number.jsx
View file

@ -24,7 +24,6 @@ import { FormattedMessage, FormattedNumber } from 'react-intl';
/**
* Component that renders short big number to a shorter version
*
* @param {ShortNumberProps} param0 Props for the component
* @returns {JSX.Element} Rendered number
*/
@ -58,7 +57,6 @@ ShortNumber.propTypes = {
/**
* Renders short number into corresponding localizable react fragment
*
* @param {ShortNumberCounterProps} param0 Props for the component
* @returns {JSX.Element} FormattedMessage ready to be embedded in code
*/

7
app/javascript/mastodon/components/status.jsx
View file

@ -416,7 +416,7 @@ class Status extends ImmutablePureComponent {
}
if (pictureInPicture.get('inUse')) {
media = <PictureInPicturePlaceholder width={this.props.cachedMediaWidth} />;
media = <PictureInPicturePlaceholder />;
} else if (status.get('media_attachments').size > 0) {
if (this.props.muted) {
media = (
@ -465,12 +465,9 @@ class Status extends ImmutablePureComponent {
src={attachment.get('url')}
alt={attachment.get('description')}
lang={status.get('language')}
width={this.props.cachedMediaWidth}
height={110}
inline
sensitive={status.get('sensitive')}
onOpenVideo={this.handleOpenVideo}
cacheWidth={this.props.cacheMediaWidth}
deployPictureInPicture={pictureInPicture.get('available') ? this.handleDeployPictureInPicture : undefined}
visible={this.state.showMedia}
onToggleVisibility={this.handleToggleMediaVisibility}
@ -503,8 +500,6 @@ class Status extends ImmutablePureComponent {
onOpenMedia={this.handleOpenMedia}
card={status.get('card')}
compact
cacheWidth={this.props.cacheMediaWidth}
defaultWidth={this.props.cachedMediaWidth}
sensitive={status.get('sensitive')}
/>
);

4
app/javascript/mastodon/containers/compose_container.jsx
View file

@ -1,7 +1,7 @@
import React from 'react';
import { Provider } from 'react-redux';
import PropTypes from 'prop-types';
import configureStore from '../store/configureStore';
import { store } from '../store/configureStore';
import { hydrateStore } from '../actions/store';
import { IntlProvider, addLocaleData } from 'react-intl';
import { getLocale } from '../locales';
@ -12,8 +12,6 @@ import { fetchCustomEmojis } from '../actions/custom_emojis';
const { localeData, messages } = getLocale();
addLocaleData(localeData);
const store = configureStore();
if (initialState) {
store.dispatch(hydrateStore(initialState));
}

3
app/javascript/mastodon/containers/mastodon.jsx
View file

@ -5,7 +5,7 @@ import { IntlProvider, addLocaleData } from 'react-intl';
import { Provider as ReduxProvider } from 'react-redux';
import { BrowserRouter, Route } from 'react-router-dom';
import { ScrollContext } from 'react-router-scroll-4';
import configureStore from 'mastodon/store/configureStore';
import { store } from 'mastodon/store/configureStore';
import UI from 'mastodon/features/ui';
import { fetchCustomEmojis } from 'mastodon/actions/custom_emojis';
import { hydrateStore } from 'mastodon/actions/store';
@ -19,7 +19,6 @@ addLocaleData(localeData);
const title = process.env.NODE_ENV === 'production' ? siteTitle : `${siteTitle} (Dev)`;
export const store = configureStore();
const hydrateAction = hydrateStore(initialState);
store.dispatch(hydrateAction);

19
app/javascript/mastodon/features/audio/index.jsx
View file

@ -384,7 +384,7 @@ class Audio extends React.PureComponent {
}
_getRadius () {
return parseInt(((this.state.height || this.props.height) - (PADDING * this._getScaleCoefficient()) * 2) / 2);
return parseInt((this.state.height || this.props.height) / 2 - PADDING * this._getScaleCoefficient());
}
_getScaleCoefficient () {
@ -396,7 +396,7 @@ class Audio extends React.PureComponent {
}
_getCY() {
return Math.floor(this._getRadius() + (PADDING * this._getScaleCoefficient()));
return Math.floor((this.state.height || this.props.height) / 2);
}
_getAccentColor () {
@ -470,7 +470,7 @@ class Audio extends React.PureComponent {
}
return (
<div className={classNames('audio-player', { editable, inactive: !revealed })} ref={this.setPlayerRef} style={{ backgroundColor: this._getBackgroundColor(), color: this._getForegroundColor(), width: '100%', height: this.props.fullscreen ? '100%' : (this.state.height || this.props.height) }} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} tabIndex={0} onKeyDown={this.handleKeyDown}>
<div className={classNames('audio-player', { editable, inactive: !revealed })} ref={this.setPlayerRef} style={{ backgroundColor: this._getBackgroundColor(), color: this._getForegroundColor(), aspectRatio: '16 / 9' }} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} tabIndex={0} onKeyDown={this.handleKeyDown}>
<Blurhash
hash={blurhash}
@ -515,9 +515,16 @@ class Audio extends React.PureComponent {
{(revealed || editable) && <img
src={this.props.poster}
alt=''
width={(this._getRadius() - TICK_SIZE) * 2}
height={(this._getRadius() - TICK_SIZE) * 2}
style={{ position: 'absolute', left: this._getCX(), top: this._getCY(), transform: 'translate(-50%, -50%)', borderRadius: '50%', pointerEvents: 'none' }}
style={{
position: 'absolute',
left: '50%',
top: '50%',
height: `calc(${(100 - 2 * 100 * PADDING / 982)}% - ${TICK_SIZE * 2}px)`,
aspectRatio: '1',
transform: 'translate(-50%, -50%)',
borderRadius: '50%',
pointerEvents: 'none',
}}
/>}
<div className='video-player__seek' onMouseDown={this.handleMouseDown} ref={this.setSeekRef}>

47
app/javascript/mastodon/features/status/components/card.jsx
View file

@ -8,7 +8,6 @@ import classnames from 'classnames';
import Icon from 'mastodon/components/icon';
import { useBlurhash } from 'mastodon/initial_state';
import Blurhash from 'mastodon/components/blurhash';
import { debounce } from 'lodash';
const IDNA_PREFIX = 'xn--';
@ -54,8 +53,6 @@ export default class Card extends React.PureComponent {
card: ImmutablePropTypes.map,
onOpenMedia: PropTypes.func.isRequired,
compact: PropTypes.bool,
defaultWidth: PropTypes.number,
cacheWidth: PropTypes.func,
sensitive: PropTypes.bool,
};
@ -64,7 +61,6 @@ export default class Card extends React.PureComponent {
};
state = {
width: this.props.defaultWidth || 280,
previewLoaded: false,
embedded: false,
revealed: !this.props.sensitive,
@ -87,24 +83,6 @@ export default class Card extends React.PureComponent {
window.removeEventListener('resize', this.handleResize);
}
_setDimensions () {
const width = this.node.offsetWidth;
if (this.props.cacheWidth) {
this.props.cacheWidth(width);
}
this.setState({ width });
}
handleResize = debounce(() => {
if (this.node) {
this._setDimensions();
}
}, 250, {
trailing: true,
});
handlePhotoClick = () => {
const { card, onOpenMedia } = this.props;
@ -138,10 +116,6 @@ export default class Card extends React.PureComponent {
setRef = c => {
this.node = c;
if (this.node) {
this._setDimensions();
}
};
handleImageLoad = () => {
@ -157,36 +131,31 @@ export default class Card extends React.PureComponent {
renderVideo () {
const { card } = this.props;
const content = { __html: addAutoPlay(card.get('html')) };
const { width } = this.state;
const ratio = card.get('width') / card.get('height');
const height = width / ratio;
return (
<div
ref={this.setRef}
className='status-card__image status-card-video'
dangerouslySetInnerHTML={content}
style={{ height }}
style={{ aspectRatio: `${card.get('width')} / ${card.get('height')}` }}
/>
);
}
render () {
const { card, compact } = this.props;
const { width, embedded, revealed } = this.state;
const { embedded, revealed } = this.state;
if (card === null) {
return null;
}
const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name');
const horizontal = (!compact && card.get('width') > card.get('height') && (card.get('width') + 100 >= width)) || card.get('type') !== 'link' || embedded;
const horizontal = (!compact && card.get('width') > card.get('height')) || card.get('type') !== 'link' || embedded;
const interactive = card.get('type') !== 'link';
const className = classnames('status-card', { horizontal, compact, interactive });
const title = interactive ? <a className='status-card__title' href={card.get('url')} title={card.get('title')} rel='noopener noreferrer' target='_blank'><strong>{card.get('title')}</strong></a> : <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>;
const language = card.get('language') || '';
const ratio = card.get('width') / card.get('height');
const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio);
const description = (
<div className='status-card__content' lang={language}>
@ -196,6 +165,14 @@ export default class Card extends React.PureComponent {
</div>
);
const thumbnailStyle = {
visibility: revealed? null : 'hidden',
};
if (horizontal) {
thumbnailStyle.aspectRatio = (compact && !embedded) ? '16 / 9' : `${card.get('width')} / ${card.get('height')}`;
}
let embed = '';
let canvas = (
<Blurhash
@ -206,7 +183,7 @@ export default class Card extends React.PureComponent {
dummy={!useBlurhash}
/>
);
let thumbnail = <img src={card.get('image')} alt='' style={{ width: horizontal ? width : null, height: horizontal ? height : null, visibility: revealed ? null : 'hidden' }} onLoad={this.handleImageLoad} className='status-card__image-image' />;
let thumbnail = <img src={card.get('image')} alt='' style={thumbnailStyle} onLoad={this.handleImageLoad} className='status-card__image-image' />;
let spoilerButton = (
<button type='button' onClick={this.handleReveal} className='spoiler-button__overlay'>
<span className='spoiler-button__overlay__label'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span>

4
app/javascript/mastodon/features/status/index.jsx
View file

@ -263,11 +263,11 @@ class Status extends ImmutablePureComponent {
if (signedIn) {
dispatch(addReaction(statusId, name, url));
}
}
};
handleReactionRemove = (statusId, name) => {
this.props.dispatch(removeReaction(statusId, name));
}
};
handlePin = (status) => {
if (status.get('pinned')) {

2
app/javascript/mastodon/features/ui/index.jsx
View file

@ -362,7 +362,7 @@ class UI extends React.PureComponent {
if (layout !== this.props.layout) {
this.handleLayoutChange.cancel();
this.props.dispatch(changeLayout(layout));
this.props.dispatch(changeLayout({ layout }));
} else {
this.handleLayoutChange();
}

46
app/javascript/mastodon/features/video/index.jsx
View file

@ -2,7 +2,7 @@ import React from 'react';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { is } from 'immutable';
import { throttle, debounce } from 'lodash';
import { throttle } from 'lodash';
import classNames from 'classnames';
import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
import { displayMedia, useBlurhash } from '../../initial_state';
@ -102,8 +102,6 @@ class Video extends React.PureComponent {
src: PropTypes.string.isRequired,
alt: PropTypes.string,
lang: PropTypes.string,
width: PropTypes.number,
height: PropTypes.number,
sensitive: PropTypes.bool,
currentTime: PropTypes.number,
onOpenVideo: PropTypes.func,
@ -112,7 +110,6 @@ class Video extends React.PureComponent {
inline: PropTypes.bool,
editable: PropTypes.bool,
alwaysVisible: PropTypes.bool,
cacheWidth: PropTypes.func,
visible: PropTypes.bool,
onToggleVisibility: PropTypes.func,
deployPictureInPicture: PropTypes.func,
@ -135,7 +132,6 @@ class Video extends React.PureComponent {
volume: 0.5,
paused: true,
dragging: false,
containerWidth: this.props.width,
fullscreen: false,
hovered: false,
muted: false,
@ -144,24 +140,8 @@ class Video extends React.PureComponent {
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;
@ -370,12 +350,10 @@ class Video extends React.PureComponent {
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);
@ -404,14 +382,6 @@ class Video extends React.PureComponent {
}
}
handleResize = debounce(() => {
if (this.player) {
this._setDimensions();
}
}, 250, {
trailing: true,
});
handleScroll = throttle(() => {
if (!this.video) {
return;
@ -525,17 +495,12 @@ class Video extends React.PureComponent {
render () {
const { preview, src, inline, onOpenVideo, onCloseVideo, intl, alt, lang, detailed, sensitive, editable, blurhash, autoFocus } = this.props;
const { containerWidth, currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
const { currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
const progress = Math.min((currentTime / duration) * 100, 100);
const playerStyle = {};
let { width, height } = this.props;
if (inline && containerWidth) {
width = containerWidth;
height = containerWidth / (16/9);
playerStyle.height = height;
if (inline) {
playerStyle.aspectRatio = '16 / 9';
}
let preload;
@ -586,8 +551,6 @@ class Video extends React.PureComponent {
aria-label={alt}
title={alt}
lang={lang}
width={width}
height={height}
volume={volume}
onClick={this.togglePlay}
onKeyDown={this.handleVideoKeyDown}
@ -596,6 +559,7 @@ class Video extends React.PureComponent {
onLoadedData={this.handleLoadedData}
onProgress={this.handleProgress}
onVolumeChange={this.handleVolumeChange}
style={{ ...playerStyle, width: '100%' }}
/>}
<div className={classNames('spoiler-button', { 'spoiler-button--hidden': revealed || editable })}>

1
app/javascript/mastodon/initial_state.js
View file

@ -90,6 +90,7 @@
* @property {InitialStateLanguage[]} languages
* @property {InitialStateMeta} meta
* @property {number} max_toot_chars
* @property {number} max_reactions
*/
const element = document.getElementById('initial-state');

20
app/javascript/mastodon/is_mobile.js → app/javascript/mastodon/is_mobile.ts
View file

@ -1,21 +1,12 @@
// @ts-check
import { supportsPassiveEvents } from 'detect-passive-events';
// @ts-expect-error
import { forceSingleColumn } from 'mastodon/initial_state';
import { forceSingleColumn } from './initial_state';
const LAYOUT_BREAKPOINT = 630;
/**
* @param {number} width
* @returns {boolean}
*/
export const isMobile = width => width <= LAYOUT_BREAKPOINT;
export const isMobile = (width: number) => width <= LAYOUT_BREAKPOINT;
/**
* @returns {string}
*/
export const layoutFromWindow = () => {
export type LayoutType = 'mobile' | 'single-column' | 'multi-column';
export const layoutFromWindow = (): LayoutType => {
if (isMobile(window.innerWidth)) {
return 'mobile';
} else if (forceSingleColumn) {
@ -25,8 +16,9 @@ export const layoutFromWindow = () => {
}
};
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-expect-error
const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
const iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && window.MSStream != null;
const listenerOptions = supportsPassiveEvents ? { passive: true } : false;

3
app/javascript/mastodon/locales/af.json
View file

@ -240,7 +240,7 @@
"errors.unexpected_crash.copy_stacktrace": "Copy stacktrace to clipboard",
"errors.unexpected_crash.report_issue": "Report issue",
"explore.search_results": "Soekresultate",
"explore.suggested_follows": "For you",
"explore.suggested_follows": "People",
"explore.title": "Explore",
"explore.trending_links": "News",
"explore.trending_statuses": "Posts",
@ -445,6 +445,7 @@
"onboarding.actions.close": "Don't show this screen again",
"onboarding.actions.go_to_explore": "See what's trending",
"onboarding.actions.go_to_home": "Go to your home feed",
"onboarding.compose.template": "Hello #Mastodon!",
"onboarding.follows.empty": "Unfortunately, no results can be shown right now. You can try using search or browsing the explore page to find people to follow, or try again later.",
"onboarding.follows.lead": "You curate your own home feed. The more people you follow, the more active and interesting it will be. These profiles may be a good starting point—you can always unfollow them later!",
"onboarding.follows.title": "Popular on Mastodon",

3
app/javascript/mastodon/locales/an.json
View file

@ -240,7 +240,7 @@
"errors.unexpected_crash.copy_stacktrace": "Copiar lo seguimiento de pila en o portafuellas",
"errors.unexpected_crash.report_issue": "Informar d'un problema/error",
"explore.search_results": "Resultaus de busqueda",
"explore.suggested_follows": "Pa tu",
"explore.suggested_follows": "People",
"explore.title": "Explorar",
"explore.trending_links": "Noticias",
"explore.trending_statuses": "Publicacions",
@ -445,6 +445,7 @@
"onboarding.actions.close": "Don't show this screen again",
"onboarding.actions.go_to_explore": "See what's trending",
"onboarding.actions.go_to_home": "Go to your home feed",
"onboarding.compose.template": "Hello #Mastodon!",
"onboarding.follows.empty": "Unfortunately, no results can be shown right now. You can try using search or browsing the explore page to find people to follow, or try again later.",
"onboarding.follows.lead": "You curate your own home feed. The more people you follow, the more active and interesting it will be. These profiles may be a good starting point—you can always unfollow them later!",
"onboarding.follows.title": "Popular on Mastodon",

3
app/javascript/mastodon/locales/ar.json
View file

@ -240,7 +240,7 @@
"errors.unexpected_crash.copy_stacktrace": "انسخ تتبع الارتباطات إلى الحافظة",
"errors.unexpected_crash.report_issue": "الإبلاغ عن خلل",
"explore.search_results": "نتائج البحث",
"explore.suggested_follows": "لك",
"explore.suggested_follows": "People",
"explore.title": "استكشف",
"explore.trending_links": "الأخبار",
"explore.trending_statuses": "المنشورات",
@ -445,6 +445,7 @@
"onboarding.actions.close": "Don't show this screen again",
"onboarding.actions.go_to_explore": "See what's trending",
"onboarding.actions.go_to_home": "Go to your home feed",
"onboarding.compose.template": "Hello #Mastodon!",
"onboarding.follows.empty": "Unfortunately, no results can be shown right now. You can try using search or browsing the explore page to find people to follow, or try again later.",
"onboarding.follows.lead": "You curate your own home feed. The more people you follow, the more active and interesting it will be. These profiles may be a good starting point—you can always unfollow them later!",
"onboarding.follows.title": "Popular on Mastodon",

3
app/javascript/mastodon/locales/ast.json
View file

@ -240,7 +240,7 @@
"errors.unexpected_crash.copy_stacktrace": "Copy stacktrace to clipboard",
"errors.unexpected_crash.report_issue": "Report issue",
"explore.search_results": "Resultaos de la busca",
"explore.suggested_follows": "Pa ti",
"explore.suggested_follows": "People",
"explore.title": "Esploración",
"explore.trending_links": "Noticies",
"explore.trending_statuses": "Artículos",
@ -445,6 +445,7 @@
"onboarding.actions.close": "Don't show this screen again",
"onboarding.actions.go_to_explore": "See what's trending",
"onboarding.actions.go_to_home": "Go to your home feed",
"onboarding.compose.template": "Hello #Mastodon!",
"onboarding.follows.empty": "Unfortunately, no results can be shown right now. You can try using search or browsing the explore page to find people to follow, or try again later.",
"onboarding.follows.lead": "You curate your own home feed. The more people you follow, the more active and interesting it will be. These profiles may be a good starting point—you can always unfollow them later!",
"onboarding.follows.title": "Popular en Mastodon",

31
app/javascript/mastodon/locales/be.json
View file

@ -182,7 +182,7 @@
"conversation.with": "З {names}",
"copypaste.copied": "Скапіравана",
"copypaste.copy": "Скапіраваць",
"copypaste.copy_to_clipboard": "Copy to clipboard",
"copypaste.copy_to_clipboard": "Капіраваць у буфер абмену",
"directory.federated": "З вядомага федэсвету",
"directory.local": "Толькі з {domain}",
"directory.new_arrivals": "Новыя карыстальнікі",
@ -240,7 +240,7 @@
"errors.unexpected_crash.copy_stacktrace": "Дадаць дыягнастычны стэк у буфер абмену",
"errors.unexpected_crash.report_issue": "Паведаміць аб праблеме",
"explore.search_results": "Вынікі пошуку",
"explore.suggested_follows": "Для вас",
"explore.suggested_follows": "People",
"explore.title": "Агляд",
"explore.trending_links": "Навіны",
"explore.trending_statuses": "Допісы",
@ -440,21 +440,22 @@
"notifications_permission_banner.enable": "Уключыць апавяшчэнні на працоўным стале",
"notifications_permission_banner.how_to_control": "Каб атрымліваць апавяшчэнні, калі Mastodon не адкрыты, уключыце апавяшчэнні працоўнага стала. Вы зможаце дакладна кантраляваць, якія падзеі будуць ствараць апавяшчэнні з дапамогай {icon} кнопкі, як толькі яны будуць уключаны.",
"notifications_permission_banner.title": "Не прапусціце нічога",
"onboarding.action.back": "Take me back",
"onboarding.actions.back": "Take me back",
"onboarding.actions.close": "Don't show this screen again",
"onboarding.actions.go_to_explore": "See what's trending",
"onboarding.actions.go_to_home": "Go to your home feed",
"onboarding.follows.empty": "Unfortunately, no results can be shown right now. You can try using search or browsing the explore page to find people to follow, or try again later.",
"onboarding.follows.lead": "You curate your own home feed. The more people you follow, the more active and interesting it will be. These profiles may be a good starting point—you can always unfollow them later!",
"onboarding.follows.title": "Popular on Mastodon",
"onboarding.share.lead": "Let people know how they can find you on Mastodon!",
"onboarding.share.message": "I'm {username} on #Mastodon! Come follow me at {url}",
"onboarding.share.next_steps": "Possible next steps:",
"onboarding.share.title": "Share your profile",
"onboarding.action.back": "Прыняць мяне назад",
"onboarding.actions.back": "Прыняць мяне назад",
"onboarding.actions.close": "Больш не паказваць гэты экран",
"onboarding.actions.go_to_explore": "Паглядзіце, што ў трэндзе",
"onboarding.actions.go_to_home": "Перайдзіце на свой хатні канал",
"onboarding.compose.template": "Hello #Mastodon!",
"onboarding.follows.empty": "На жаль, зараз немагчыма паказаць вынікі. Вы можаце паспрабаваць выкарыстоўваць пошук і праглядзець старонку агляду, каб знайсці людзей, на якіх можна падпісацца, або паўтарыце спробу пазней.",
"onboarding.follows.lead": "Вы самі ствараеце свой хатні канал. Чым больш людзей вы падпішаце, тым больш актыўна і цікавей гэта будзе. Гэтыя профілі могуць стаць добрай адпраўной кропкай — вы заўсёды можаце адмяніць падпіску на іх пазней!",
"onboarding.follows.title": "Папулярна на Mastodon",
"onboarding.share.lead": "Дайце людзям ведаць, як яны могуць знайсці вас на Mastodon!",
"onboarding.share.message": "Я {username} на #Mastodon! Сачыце за мной на {url}",
"onboarding.share.next_steps": "Магчымыя наступныя крокі:",
"onboarding.share.title": "Падзяліцеся сваім профілем",
"onboarding.start.lead": "Your new Mastodon account is ready to go. Here's how you can make the most of it:",
"onboarding.start.skip": "Want to skip right ahead?",
"onboarding.start.title": "You've made it!",
"onboarding.start.title": "Вы зрабілі гэта!",
"onboarding.steps.follow_people.body": "You curate your own feed. Lets fill it with interesting people.",
"onboarding.steps.follow_people.title": "Follow {count, plural, one {one person} other {# people}}",
"onboarding.steps.publish_status.body": "Say hello to the world.",

11
app/javascript/mastodon/locales/bg.json
View file

@ -240,7 +240,7 @@
"errors.unexpected_crash.copy_stacktrace": "Копиране на трасето на стека в буферната памет",
"errors.unexpected_crash.report_issue": "Сигнал за проблем",
"explore.search_results": "Резултати от търсенето",
"explore.suggested_follows": "За вас",
"explore.suggested_follows": "Хора",
"explore.title": "Разглеждане",
"explore.trending_links": "Новини",
"explore.trending_statuses": "Публикации",
@ -445,11 +445,12 @@
"onboarding.actions.close": "Без показване пак на този екран",
"onboarding.actions.go_to_explore": "Вижте какво изгрява",
"onboarding.actions.go_to_home": "Към началния ви инфоканал",
"onboarding.follows.empty": "Unfortunately, no results can be shown right now. You can try using search or browsing the explore page to find people to follow, or try again later.",
"onboarding.compose.template": "Здравейте, #Mastodon!",
"onboarding.follows.empty": "За съжаление, в момента не могат да се показват резултати. Може да опитате да употребявате търсене или да прегледате страницата за изследване, за да намерите страница за последване, или да опитате пак по-късно.",
"onboarding.follows.lead": "Може да бъдете куратор на началния си инфоканал. Последвайки повече хора, по-деен и по-интересен ще става. Тези профили може да са добра начална точка, от която винаги по-късно да спрете да следвате!",
"onboarding.follows.title": "Популярно в Mastodon",
"onboarding.share.lead": "Позволете на хората да знаят, че могат да ви намерят в Mastodon!",
"onboarding.share.message": "I'm {username} on #Mastodon! Come follow me at {url}",
"onboarding.share.message": "Аз съм {username} в #Mastodon! Елате да ме последвате при {url}",
"onboarding.share.next_steps": "Възможни следващи стъпки:",
"onboarding.share.title": "Споделяне на профила ви",
"onboarding.start.lead": "Вашият нов акаунт в Mastodon е готов за употреба. Ето как може да се възползвате по най-добрия начин от него:",
@ -463,9 +464,9 @@
"onboarding.steps.setup_profile.title": "Пригодете профила си",
"onboarding.steps.share_profile.body": "Позволете на приятелите си да знаят как да ви намират в Mastodon!",
"onboarding.steps.share_profile.title": "Споделяне на профила ви",
"onboarding.tips.2fa": "<strong>Did you know?</strong> You can secure your account by setting up two-factor authentication in your account settings. It works with any TOTP app of your choice, no phone number necessary!",
"onboarding.tips.2fa": "<strong>Знаете ли, че?</strong> Може да защитите акаунта си, настройвайки двуфакторното удостоверяване в настройките на акаунта си. То работи с всяко приложение TOTP по ваш избор, не е необходим номер телефона!",
"onboarding.tips.accounts_from_other_servers": "<strong>Знаете ли, че?</strong> Откак Mastodon е децентрализиран, някои профили, които срещате ще бъдат разположени на сървъри различен от вашия. И още може да взаимодействате с тях безпроблемно! Сървърът им е втората половина от потребителското им име!",
"onboarding.tips.migration": "<strong>Did you know?</strong> If you feel like {domain} is not a great server choice for you in the future, you can move to another Mastodon server without losing your followers. You can even host your own server!",
"onboarding.tips.migration": "<strong>Знаете ли, че?</strong> Ако се чувствате, че {domain} не е чудесен избор на сървър в бъдуще, може да се преместите на друг сървър на Mastodon без да загубите последователите си. Дори може да сте съдържатели на свой собствен сървър!",
"onboarding.tips.verification": "<strong>Did you know?</strong> You can verify your account by putting a link to your Mastodon profile on your own website and adding the website to your profile. No fees or documents necessary!",
"password_confirmation.exceeds_maxlength": "Потвърждаването на паролата превишава максимално допустимата дължина за парола",
"password_confirmation.mismatching": "Потвърждаването на паролата не съвпада",

3
app/javascript/mastodon/locales/bn.json
View file

@ -240,7 +240,7 @@
"errors.unexpected_crash.copy_stacktrace": "স্টেকট্রেস ক্লিপবোর্ডে কপি করুন",
"errors.unexpected_crash.report_issue": "সমস্যার প্রতিবেদন করুন",
"explore.search_results": "Search results",
"explore.suggested_follows": "For you",
"explore.suggested_follows": "People",
"explore.title": "Explore",
"explore.trending_links": "সংবাদ",
"explore.trending_statuses": "Posts",
@ -445,6 +445,7 @@
"onboarding.actions.close": "Don't show this screen again",
"onboarding.actions.go_to_explore": "See what's trending",
"onboarding.actions.go_to_home": "Go to your home feed",
"onboarding.compose.template": "Hello #Mastodon!",
"onboarding.follows.empty": "Unfortunately, no results can be shown right now. You can try using search or browsing the explore page to find people to follow, or try again later.",
"onboarding.follows.lead": "You curate your own home feed. The more people you follow, the more active and interesting it will be. These profiles may be a good starting point—you can always unfollow them later!",
"onboarding.follows.title": "Popular on Mastodon",

3
app/javascript/mastodon/locales/br.json
View file

@ -240,7 +240,7 @@
"errors.unexpected_crash.copy_stacktrace": "Eilañ ar roudoù diveugañ er golver",
"errors.unexpected_crash.report_issue": "Danevellañ ur fazi",
"explore.search_results": "Disoc'hoù an enklask",
"explore.suggested_follows": "For you",
"explore.suggested_follows": "People",
"explore.title": "Furchal",
"explore.trending_links": "News",
"explore.trending_statuses": "Posts",
@ -445,6 +445,7 @@
"onboarding.actions.close": "Don't show this screen again",
"onboarding.actions.go_to_explore": "See what's trending",
"onboarding.actions.go_to_home": "Go to your home feed",
"onboarding.compose.template": "Hello #Mastodon!",
"onboarding.follows.empty": "Unfortunately, no results can be shown right now. You can try using search or browsing the explore page to find people to follow, or try again later.",
"onboarding.follows.lead": "You curate your own home feed. The more people you follow, the more active and interesting it will be. These profiles may be a good starting point—you can always unfollow them later!",
"onboarding.follows.title": "Popular on Mastodon",

3
app/javascript/mastodon/locales/bs.json
View file

@ -240,7 +240,7 @@
"errors.unexpected_crash.copy_stacktrace": "Copy stacktrace to clipboard",
"errors.unexpected_crash.report_issue": "Report issue",
"explore.search_results": "Search results",
"explore.suggested_follows": "For you",
"explore.suggested_follows": "People",
"explore.title": "Explore",
"explore.trending_links": "News",
"explore.trending_statuses": "Posts",
@ -445,6 +445,7 @@
"onboarding.actions.close": "Don't show this screen again",
"onboarding.actions.go_to_explore": "See what's trending",
"onboarding.actions.go_to_home": "Go to your home feed",
"onboarding.compose.template": "Hello #Mastodon!",
"onboarding.follows.empty": "Unfortunately, no results can be shown right now. You can try using search or browsing the explore page to find people to follow, or try again later.",
"onboarding.follows.lead": "You curate your own home feed. The more people you follow, the more active and interesting it will be. These profiles may be a good starting point—you can always unfollow them later!",
"onboarding.follows.title": "Popular on Mastodon",

3
app/javascript/mastodon/locales/ca.json
View file

@ -240,7 +240,7 @@
"errors.unexpected_crash.copy_stacktrace": "Copia stacktrace al porta-retalls",
"errors.unexpected_crash.report_issue": "Informa d'un problema",
"explore.search_results": "Resultats de la cerca",
"explore.suggested_follows": "Per a tu",
"explore.suggested_follows": "Persones",
"explore.title": "Explora",
"explore.trending_links": "Notícies",
"explore.trending_statuses": "Tuts",
@ -445,6 +445,7 @@
"onboarding.actions.close": "No tornis a mostrar aquesta pantalla",
"onboarding.actions.go_to_explore": "Mira què és tendència",
"onboarding.actions.go_to_home": "Vés a la teva línia de temps inici",
"onboarding.compose.template": "Hello #Mastodon!",
"onboarding.follows.empty": "Malauradament, cap resultat pot ser mostrat ara mateix. Pots provar de fer servir la cerca o visitar la pàgina Explora per a trobar gent a qui seguir o provar-ho de nou més tard.",
"onboarding.follows.lead": "Tu tens cura de la teva línia de temps inici. Com més gent segueixis, més activa i interessant serà. Aquests perfils poden ser un bon punt d'inici—sempre pots acabar deixant-los de seguir!",
"onboarding.follows.title": "Popular a Mastodon",

3
app/javascript/mastodon/locales/ckb.json
View file

@ -240,7 +240,7 @@
"errors.unexpected_crash.copy_stacktrace": "کۆپیکردنی ستێکتراسی بۆ کلیپ بۆرد",
"errors.unexpected_crash.report_issue": "کێشەی گوزارشت",
"explore.search_results": "ئەنجامەکانی گەڕان",
"explore.suggested_follows": "بۆ تۆ",
"explore.suggested_follows": "People",
"explore.title": "گەڕان",
"explore.trending_links": "هەواڵەکان",
"explore.trending_statuses": "بڵاوکراوەکان",
@ -445,6 +445,7 @@
"onboarding.actions.close": "Don't show this screen again",
"onboarding.actions.go_to_explore": "See what's trending",
"onboarding.actions.go_to_home": "Go to your home feed",
"onboarding.compose.template": "Hello #Mastodon!",
"onboarding.follows.empty": "Unfortunately, no results can be shown right now. You can try using search or browsing the explore page to find people to follow, or try again later.",
"onboarding.follows.lead": "You curate your own home feed. The more people you follow, the more active and interesting it will be. These profiles may be a good starting point—you can always unfollow them later!",
"onboarding.follows.title": "Popular on Mastodon",

3
app/javascript/mastodon/locales/co.json
View file

@ -240,7 +240,7 @@
"errors.unexpected_crash.copy_stacktrace": "Cupià stacktrace nant'à u fermacarta",
"errors.unexpected_crash.report_issue": "Palisà prublemu",
"explore.search_results": "Search results",
"explore.suggested_follows": "For you",
"explore.suggested_follows": "People",
"explore.title": "Explore",
"explore.trending_links": "News",
"explore.trending_statuses": "Posts",
@ -445,6 +445,7 @@
"onboarding.actions.close": "Don't show this screen again",
"onboarding.actions.go_to_explore": "See what's trending",
"onboarding.actions.go_to_home": "Go to your home feed",
"onboarding.compose.template": "Hello #Mastodon!",
"onboarding.follows.empty": "Unfortunately, no results can be shown right now. You can try using search or browsing the explore page to find people to follow, or try again later.",
"onboarding.follows.lead": "You curate your own home feed. The more people you follow, the more active and interesting it will be. These profiles may be a good starting point—you can always unfollow them later!",
"onboarding.follows.title": "Popular on Mastodon",

3
app/javascript/mastodon/locales/cs.json
View file

@ -240,7 +240,7 @@
"errors.unexpected_crash.copy_stacktrace": "Zkopírovat stacktrace do schránky",
"errors.unexpected_crash.report_issue": "Nahlásit problém",
"explore.search_results": "Výsledky hledání",
"explore.suggested_follows": "Pro vás",
"explore.suggested_follows": "People",
"explore.title": "Objevit",
"explore.trending_links": "Zprávy",
"explore.trending_statuses": "Příspěvky",
@ -445,6 +445,7 @@
"onboarding.actions.close": "Příště nezobrazovat tuto obrazovku",
"onboarding.actions.go_to_explore": "Podívejte se, co je populární",
"onboarding.actions.go_to_home": "Přejít na svůj domovský feed",
"onboarding.compose.template": "Hello #Mastodon!",
"onboarding.follows.empty": "Unfortunately, no results can be shown right now. You can try using search or browsing the explore page to find people to follow, or try again later.",
"onboarding.follows.lead": "You curate your own home feed. The more people you follow, the more active and interesting it will be. These profiles may be a good starting point—you can always unfollow them later!",
"onboarding.follows.title": "Populární na Mastodonu",

59
app/javascript/mastodon/locales/cy.json
View file

@ -182,7 +182,7 @@
"conversation.with": "Gyda {names}",
"copypaste.copied": "Wedi ei gopïo",
"copypaste.copy": "Copïo",
"copypaste.copy_to_clipboard": "Copy to clipboard",
"copypaste.copy_to_clipboard": "Copïo i'r clipfwrdd",
"directory.federated": "O'r ffedysawd cyfan",
"directory.local": "O {domain} yn unig",
"directory.new_arrivals": "Defnyddwyr newydd",
@ -240,7 +240,7 @@
"errors.unexpected_crash.copy_stacktrace": "Copïo'r olrhain stac i'r clipfwrdd",
"errors.unexpected_crash.report_issue": "Rhoi gwybod am broblem",
"explore.search_results": "Canlyniadau chwilio",
"explore.suggested_follows": "I chi",
"explore.suggested_follows": "Pobl",
"explore.title": "Darganfod",
"explore.trending_links": "Newyddion",
"explore.trending_statuses": "Postiadau",
@ -440,33 +440,34 @@
"notifications_permission_banner.enable": "Galluogi hysbysiadau bwrdd gwaith",
"notifications_permission_banner.how_to_control": "I dderbyn hysbysiadau pan nad yw Mastodon ar agor, galluogwch hysbysiadau bwrdd gwaith. Gallwch reoli'n union pa fathau o ryngweithiadau sy'n cynhyrchu hysbysiadau bwrdd gwaith trwy'r botwm {icon} uchod unwaith y byddant wedi'u galluogi.",
"notifications_permission_banner.title": "Peidiwch colli dim",
"onboarding.action.back": "Take me back",
"onboarding.actions.back": "Take me back",
"onboarding.actions.close": "Don't show this screen again",
"onboarding.actions.go_to_explore": "See what's trending",
"onboarding.actions.go_to_home": "Go to your home feed",
"onboarding.follows.empty": "Unfortunately, no results can be shown right now. You can try using search or browsing the explore page to find people to follow, or try again later.",
"onboarding.follows.lead": "You curate your own home feed. The more people you follow, the more active and interesting it will be. These profiles may be a good starting point—you can always unfollow them later!",
"onboarding.follows.title": "Popular on Mastodon",
"onboarding.share.lead": "Let people know how they can find you on Mastodon!",
"onboarding.share.message": "I'm {username} on #Mastodon! Come follow me at {url}",
"onboarding.share.next_steps": "Possible next steps:",
"onboarding.share.title": "Share your profile",
"onboarding.start.lead": "Your new Mastodon account is ready to go. Here's how you can make the most of it:",
"onboarding.start.skip": "Want to skip right ahead?",
"onboarding.start.title": "You've made it!",
"onboarding.steps.follow_people.body": "You curate your own feed. Lets fill it with interesting people.",
"onboarding.steps.follow_people.title": "Follow {count, plural, one {one person} other {# people}}",
"onboarding.steps.publish_status.body": "Say hello to the world.",
"onboarding.steps.publish_status.title": "Make your first post",
"onboarding.steps.setup_profile.body": "Others are more likely to interact with you with a filled out profile.",
"onboarding.steps.setup_profile.title": "Customize your profile",
"onboarding.steps.share_profile.body": "Let your friends know how to find you on Mastodon!",
"onboarding.steps.share_profile.title": "Share your profile",
"onboarding.tips.2fa": "<strong>Did you know?</strong> You can secure your account by setting up two-factor authentication in your account settings. It works with any TOTP app of your choice, no phone number necessary!",
"onboarding.tips.accounts_from_other_servers": "<strong>Did you know?</strong> Since Mastodon is decentralized, some profiles you come across will be hosted on servers other than yours. And yet you can interact with them seamlessly! Their server is in the second half of their username!",
"onboarding.tips.migration": "<strong>Did you know?</strong> If you feel like {domain} is not a great server choice for you in the future, you can move to another Mastodon server without losing your followers. You can even host your own server!",
"onboarding.tips.verification": "<strong>Did you know?</strong> You can verify your account by putting a link to your Mastodon profile on your own website and adding the website to your profile. No fees or documents necessary!",
"onboarding.action.back": "Ewch â fi yn ôl",
"onboarding.actions.back": "Ewch â fi yn ôl",
"onboarding.actions.close": "Peidio â dangos y sgrin hon eto",
"onboarding.actions.go_to_explore": "Gweld beth yw'r tuedd",
"onboarding.actions.go_to_home": "Ewch i'ch ffrwd gartref",
"onboarding.compose.template": "Helo, #Mastodon!",
"onboarding.follows.empty": "Yn anffodus, nid oes modd dangos unrhyw ganlyniadau ar hyn o bryd. Gallwch geisio defnyddio chwilio neu bori'r dudalen archwilio i ddod o hyd i bobl i'w dilyn, neu ceisio eto yn nes ymlaen.",
"onboarding.follows.lead": "Rydych chi'n curadu eich ffrwd gartref eich hun. Po fwyaf o bobl y byddwch chi'n eu dilyn, y mwyaf egnïol a diddorol fydd hi. Gall y proffiliau hyn fod yn fan cychwyn da - gallwch chi bob amser eu dad-ddilyn yn nes ymlaen!",
"onboarding.follows.title": "Yn boblogaidd ar Mastodon",
"onboarding.share.lead": "Cofiwch ddweud wrth bobl sut y gallan nhw ddod o hyd i chi ar Mastodon!",
"onboarding.share.message": "Fi yw {username} ar #Mastodon! Dewch i'm dilyn i yn {url}",
"onboarding.share.next_steps": "Camau nesaf posib:",
"onboarding.share.title": "Rhannwch eich proffil",
"onboarding.start.lead": "Mae eich cyfrif Mastodon newydd yn barod! Dyma sut y gallwch chi wneud y gorau ohono:",
"onboarding.start.skip": "Eisiau mynd syth yn eich blaen?",
"onboarding.start.title": "Rydych chi wedi cyrraedd!",
"onboarding.steps.follow_people.body": "Rydych chi'n curadu eich ffrwd eich hun. Gadewch i ni ei lenwi â phobl ddiddorol.",
"onboarding.steps.follow_people.title": "Dilynwch {count, plural, one {one person} other {# people}}",
"onboarding.steps.publish_status.body": "Dywedwch helo wrth y byd.",
"onboarding.steps.publish_status.title": "Gwnewch eich postiad cyntaf",
"onboarding.steps.setup_profile.body": "Mae eraill yn fwy tebygol o ryngweithio â chi gyda phroffil wedi'i lenwi.",
"onboarding.steps.setup_profile.title": "Cyfaddaswch eich proffil",
"onboarding.steps.share_profile.body": "Gadewch i'ch ffrindiau wybod sut i ddod o hyd i chi ar Mastodon!",
"onboarding.steps.share_profile.title": "Rhannwch eich proffil",
"onboarding.tips.2fa": "<strong>Oeddech chi'n gwybod?</strong> Gallwch ddiogelu'ch cyfrif trwy osod dilysiad dau ffactor yng ngosodiadau eich cyfrif. Mae'n gweithio gydag unrhyw app TOTP o'ch dewis, nid oes angen rhif ffôn!",
"onboarding.tips.accounts_from_other_servers": "<strong>Oeddech chi'n gwybod?</strong> Gan fod Mastodon wedi'i ddatganoli, bydd rhai proffiliau y dewch ar eu traws yn cael eu cynnal ar weinyddion heblaw eich un chi. Ac eto gallwch chi ryngweithio â nhw yn hawdd! Mae eu gweinydd yn ail hanner eu henw defnyddiwr!",
"onboarding.tips.migration": "<strong>Oeddech chi'n gwybod?</strong> Os ydych chi'n teimlo nad yw {domain} yn ddewis gweinydd gwych i chi i'r dyfodol, gallwch chi symud i weinydd Mastodon arall heb golli'ch dilynwyr. Gallwch chi hyd yn oed gynnal eich gweinydd eich hun!",
"onboarding.tips.verification": "<strong>Oeddech chi'n gwybod?</strong> Gallwch wirio'ch cyfrif trwy roi dolen i'ch proffil Mastodon ar eich gwefan eich hun ac ychwanegu'r wefan at eich proffil. Nid oes angen ffioedd na dogfennau!",
"password_confirmation.exceeds_maxlength": "Mae'r cadarnhad cyfrinair yn fwy nag uchafswm hyd y cyfrinair",
"password_confirmation.mismatching": "Nid yw'r cadarnhad cyfrinair yn cyfateb",
"picture_in_picture.restore": "Rhowch ef yn ôl",

3
app/javascript/mastodon/locales/da.json
View file

@ -240,7 +240,7 @@
"errors.unexpected_crash.copy_stacktrace": "Kopiér stacktrace til udklipsholderen",
"errors.unexpected_crash.report_issue": "Anmeld problem",
"explore.search_results": "Søgeresultater",
"explore.suggested_follows": "Til dig",
"explore.suggested_follows": "People",
"explore.title": "Udforsk",
"explore.trending_links": "Nyheder",
"explore.trending_statuses": "Indlæg",
@ -445,6 +445,7 @@
"onboarding.actions.close": "Vis ikke denne skærm igen",
"onboarding.actions.go_to_explore": "Se, hvad som trender",
"onboarding.actions.go_to_home": "Gå til hjemme-feed'et",
"onboarding.compose.template": "Hello #Mastodon!",
"onboarding.follows.empty": "Ingen resultater tilgængelige pt. Prøv at bruge søgning eller gennemse siden for at finde personer at følge, eller forsøg igen senere.",
"onboarding.follows.lead": "Man kurerer sin eget hjemme-feed. Jo flere personer man følger, des mere aktiv og interessant vil det være. Disse profiler kan være et godt udgangspunkt – de kan altid fjernes senere!",
"onboarding.follows.title": "Populært på Mastodon",

Some files were not shown because too many files have changed in this diff Show more