Merge commit '5241f7b2fd' into kb_migration_development

app/javascript/mastodon/components/account.jsx

@@ -8,12 +8,12 @@ import { defineMessages, injectIntl } from 'react-intl';
 import ImmutablePureComponent from 'react-immutable-pure-component';
 import { me } from '../initial_state';
 import { RelativeTimestamp } from './relative_timestamp';
-import Skeleton from 'mastodon/components/skeleton';
 import { Link } from 'react-router-dom';
 import { counterRenderer } from 'mastodon/components/common_counter';
 import ShortNumber from 'mastodon/components/short_number';
 import classNames from 'classnames';
 import { VerifiedBadge } from 'mastodon/components/verified_badge';
+import { EmptyAccount } from 'mastodon/components/empty_account';
 
 const messages = defineMessages({
   follow: { id: 'account.follow', defaultMessage: 'Follow' },
@@ -78,20 +78,7 @@ class Account extends ImmutablePureComponent {
     const { account, intl, hidden, onActionClick, actionIcon, actionTitle, defaultAction, size, minimal, children } = this.props;
 
     if (!account) {
-      return (
-        <div className={classNames('account', { 'account--minimal': minimal })}>
-          <div className='account__wrapper'>
-            <div className='account__display-name'>
-              <div className='account__avatar-wrapper'><Skeleton width={size} height={size} /></div>
-
-              <div>
-                <DisplayName />
-                <Skeleton width='7ch' />
-              </div>
-            </div>
-          </div>
-        </div>
-      );
+      return <EmptyAccount size={size} minimal={minimal} />;
     }
 
     if (hidden) {

app/javascript/mastodon/components/animated_number.tsx

@@ -1,8 +1,11 @@
 import React, { useCallback, useState } from 'react';
-import ShortNumber from './short_number';
+
 import { TransitionMotion, spring } from 'react-motion';
+
 import { reduceMotion } from '../initial_state';
 
+import ShortNumber from './short_number';
+
 const obfuscatedCount = (count: number) => {
   if (count < 0) {
     return 0;
@@ -13,10 +16,10 @@ const obfuscatedCount = (count: number) => {
   }
 };
 
-type Props = {
+interface Props {
   value: number;
   obfuscate?: boolean;
-};
+}
 export const AnimatedNumber: React.FC<Props> = ({ value, obfuscate }) => {
   const [previousValue, setPreviousValue] = useState(value);
   const [direction, setDirection] = useState<1 | -1>(1);
@@ -64,7 +67,11 @@ export const AnimatedNumber: React.FC<Props> = ({ value, obfuscate }) => {
                 transform: `translateY(${style.y * 100}%)`,
               }}
             >
-              {obfuscate ? obfuscatedCount(data) : <ShortNumber value={data} />}
+              {obfuscate ? (
+                obfuscatedCount(data as number)
+              ) : (
+                <ShortNumber value={data as number} />
+              )}
             </span>
           ))}
         </span>

app/javascript/mastodon/components/avatar.tsx

@@ -1,16 +1,18 @@
 import * as React from 'react';
+
 import classNames from 'classnames';
-import { autoPlayGif } from '../initial_state';
+
 import { useHovering } from '../../hooks/useHovering';
 import type { Account } from '../../types/resources';
+import { autoPlayGif } from '../initial_state';
 
-type Props = {
+interface Props {
   account: Account;
   size: number;
   style?: React.CSSProperties;
   inline?: boolean;
   animate?: boolean;
-};
+}
 
 export const Avatar: React.FC<Props> = ({
   account,

app/javascript/mastodon/components/avatar_overlay.tsx

@@ -1,15 +1,16 @@
 import React from 'react';
-import type { Account } from '../../types/resources';
+
 import { useHovering } from '../../hooks/useHovering';
+import type { Account } from '../../types/resources';
 import { autoPlayGif } from '../initial_state';
 
-type Props = {
+interface Props {
   account: Account;
   friend: Account;
   size?: number;
   baseSize?: number;
   overlaySize?: number;
-};
+}
 
 export const AvatarOverlay: React.FC<Props> = ({
   account,

app/javascript/mastodon/components/blurhash.tsx

@@ -1,14 +1,14 @@
-import { decode } from 'blurhash';
 import React, { useRef, useEffect } from 'react';
 
-type Props = {
+import { decode } from 'blurhash';
+
+interface Props extends React.HTMLAttributes<HTMLCanvasElement> {
   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;
-};
+}
 const Blurhash: React.FC<Props> = ({
   hash,
   width = 32,
@@ -21,6 +21,7 @@ const Blurhash: React.FC<Props> = ({
   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
 

app/javascript/mastodon/components/display_name.tsx

@@ -1,14 +1,18 @@
 import React from 'react';
-import { autoPlayGif } from '..//initial_state';
-import Skeleton from './skeleton';
-import { Account } from '../../types/resources';
-import { List } from 'immutable';
 
-type Props = {
-  account: Account;
-  others: List<Account>;
-  localDomain: string;
-};
+import type { List } from 'immutable';
+
+import type { Account } from '../../types/resources';
+import { autoPlayGif } from '../initial_state';
+
+import Skeleton from './skeleton';
+
+interface Props {
+  account?: Account;
+  others?: List<Account>;
+  localDomain?: string;
+}
+
 export class DisplayName extends React.PureComponent<Props> {
   handleMouseEnter: React.ReactEventHandler<HTMLSpanElement> = ({
     currentTarget,
@@ -45,7 +49,15 @@ export class DisplayName extends React.PureComponent<Props> {
   render() {
     const { others, localDomain } = this.props;
 
-    let displayName: React.ReactNode, suffix: React.ReactNode, account: Account;
+    let displayName: React.ReactNode,
+      suffix: React.ReactNode,
+      account: Account | undefined;
+
+    if (others && others.size > 0) {
+      account = others.first();
+    } else if (this.props.account) {
+      account = this.props.account;
+    }
 
     if (others && others.size > 1) {
       displayName = others
@@ -63,13 +75,7 @@ export class DisplayName extends React.PureComponent<Props> {
       if (others.size - 2 > 0) {
         suffix = `+${others.size - 2}`;
       }
-    } else if ((others && others.size > 0) || this.props.account) {
-      if (others && others.size > 0) {
-        account = others.first();
-      } else {
-        account = this.props.account;
-      }
-
+    } else if (account) {
       let acct = account.get('acct');
 
       if (acct.indexOf('@') === -1 && localDomain) {

app/javascript/mastodon/components/domain.tsx

@@ -1,6 +1,9 @@
 import React, { useCallback } from 'react';
+
+import type { InjectedIntl } from 'react-intl';
+import { defineMessages, injectIntl } from 'react-intl';
+
 import { IconButton } from './icon_button';
-import { InjectedIntl, defineMessages, injectIntl } from 'react-intl';
 
 const messages = defineMessages({
   unblockDomain: {
@@ -9,11 +12,11 @@ const messages = defineMessages({
   },
 });
 
-type Props = {
+interface Props {
   domain: string;
   onUnblockDomain: (domain: string) => void;
   intl: InjectedIntl;
-};
+}
 const _Domain: React.FC<Props> = ({ domain, onUnblockDomain, intl }) => {
   const handleDomainUnblock = useCallback(() => {
     onUnblockDomain(domain);

app/javascript/mastodon/components/empty_account.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import classNames from 'classnames';
+
+import { DisplayName } from 'mastodon/components/display_name';
+import Skeleton from 'mastodon/components/skeleton';
+
+interface Props {
+  size?: number;
+  minimal?: boolean;
+}
+
+export const EmptyAccount: React.FC<Props> = ({
+  size = 46,
+  minimal = false,
+}) => {
+  return (
+    <div className={classNames('account', { 'account--minimal': minimal })}>
+      <div className='account__wrapper'>
+        <div className='account__display-name'>
+          <div className='account__avatar-wrapper'>
+            <Skeleton width={size} height={size} />
+          </div>
+
+          <div>
+            <DisplayName />
+            <Skeleton width='7ch' />
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};

app/javascript/mastodon/components/gifv.tsx

@@ -1,6 +1,6 @@
 import React, { useCallback, useState } from 'react';
 
-type Props = {
+interface Props {
   src: string;
   key: string;
   alt?: string;
@@ -8,7 +8,7 @@ type Props = {
   width: number;
   height: number;
   onClick?: () => void;
-};
+}
 
 export const GIFV: React.FC<Props> = ({
   src,

app/javascript/mastodon/components/icon.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
+
 import classNames from 'classnames';
 
-type Props = {
+interface Props extends React.HTMLAttributes<HTMLImageElement> {
   id: string;
   className?: string;
   fixedWidth?: boolean;
   children?: never;
-  [key: string]: any;
-};
+}
+
 export const Icon: React.FC<Props> = ({
   id,
   className,

app/javascript/mastodon/components/icon_button.tsx

@@ -1,9 +1,11 @@
 import React from 'react';
-import classNames from 'classnames';
-import { Icon } from './icon';
-import { AnimatedNumber } from './animated_number';
 
-type Props = {
+import classNames from 'classnames';
+
+import { AnimatedNumber } from './animated_number';
+import { Icon } from './icon';
+
+interface Props {
   className?: string;
   title: string;
   icon: string;
@@ -25,11 +27,11 @@ type Props = {
   obfuscateCount?: boolean;
   href?: string;
   ariaHidden: boolean;
-};
-type States = {
+}
+interface States {
   activate: boolean;
   deactivate: boolean;
-};
+}
 export class IconButton extends React.PureComponent<Props, States> {
   static defaultProps = {
     size: 18,

app/javascript/mastodon/components/icon_with_badge.tsx

@@ -1,14 +1,15 @@
 import React from 'react';
+
 import { Icon } from './icon';
 
 const formatNumber = (num: number): number | string => (num > 40 ? '40+' : num);
 
-type Props = {
+interface Props {
   id: string;
   count: number;
   issueBadge: boolean;
   className: string;
-};
+}
 export const IconWithBadge: React.FC<Props> = ({
   id,
   count,

app/javascript/mastodon/components/logo.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import logo from 'mastodon/../images/logo.svg';
 
 export const WordmarkLogo: React.FC = () => (

app/javascript/mastodon/components/media_gallery.jsx

@@ -266,7 +266,7 @@ class MediaGallery extends React.PureComponent {
   };
 
   handleClick = (index) => {
-    this.props.onOpenMedia(this.props.media, index);
+    this.props.onOpenMedia(this.props.media, index, this.props.lang);
   };
 
   handleRef = c => {

app/javascript/mastodon/components/not_signed_in_indicator.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { FormattedMessage } from 'react-intl';
 
 export const NotSignedInIndicator: React.FC = () => (
@@ -6,7 +7,7 @@ export const NotSignedInIndicator: React.FC = () => (
     <div className='empty-column-indicator'>
       <FormattedMessage
         id='not_signed_in_indicator.not_signed_in'
-        defaultMessage='You need to sign in to access this resource.'
+        defaultMessage='You need to login to access this resource.'
       />
     </div>
   </div>

app/javascript/mastodon/components/radio_button.tsx

@@ -1,13 +1,14 @@
 import React from 'react';
+
 import classNames from 'classnames';
 
-type Props = {
+interface Props {
   value: string;
   checked: boolean;
   name: string;
   onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   label: React.ReactNode;
-};
+}
 
 export const RadioButton: React.FC<Props> = ({
   name,

app/javascript/mastodon/components/relative_timestamp.tsx

@@ -1,5 +1,7 @@
 import React from 'react';
-import { injectIntl, defineMessages, InjectedIntl } from 'react-intl';
+
+import type { InjectedIntl } from 'react-intl';
+import { injectIntl, defineMessages } from 'react-intl';
 
 const messages = defineMessages({
   today: { id: 'relative_time.today', defaultMessage: 'today' },
@@ -187,16 +189,16 @@ const timeRemainingString = (
   return relativeTime;
 };
 
-type Props = {
+interface Props {
   intl: InjectedIntl;
   timestamp: string;
   year: number;
   futureDate?: boolean;
   short?: boolean;
-};
-type States = {
+}
+interface States {
   now: number;
-};
+}
 class RelativeTimestamp extends React.Component<Props, States> {
   state = {
     now: this.props.intl.now(),

app/javascript/mastodon/components/server_hero_image.tsx

@@ -1,13 +1,15 @@
 import React, { useCallback, useState } from 'react';
-import { Blurhash } from './blurhash';
+
 import classNames from 'classnames';
 
-type Props = {
+import { Blurhash } from './blurhash';
+
+interface Props {
   src: string;
   srcSet?: string;
   blurhash?: string;
   className?: string;
-};
+}
 
 export const ServerHeroImage: React.FC<Props> = ({
   src,

app/javascript/mastodon/components/status.jsx

@@ -199,11 +199,12 @@ class Status extends ImmutablePureComponent {
 
   handleOpenVideo = (options) => {
     const status = this._properStatus();
-    this.props.onOpenVideo(status.get('id'), status.getIn(['media_attachments', 0]), options);
+    this.props.onOpenVideo(status.get('id'), status.getIn(['media_attachments', 0]), status.get('language'), options);
   };
 
   handleOpenMedia = (media, index) => {
-    this.props.onOpenMedia(this._properStatus().get('id'), media, index);
+    const status = this._properStatus();
+    this.props.onOpenMedia(status.get('id'), media, index, status.get('language'));
   };
 
   handleHotkeyOpenMedia = e => {
@@ -213,10 +214,11 @@ class Status extends ImmutablePureComponent {
     e.preventDefault();
 
     if (status.get('media_attachments').size > 0) {
+      const lang = status.get('language');
       if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
-        onOpenVideo(status.get('id'), status.getIn(['media_attachments', 0]), { startTime: 0 });
+        onOpenVideo(status.get('id'), status.getIn(['media_attachments', 0]), lang, { startTime: 0 });
       } else {
-        onOpenMedia(status.get('id'), status.get('media_attachments'), 0);
+        onOpenMedia(status.get('id'), status.get('media_attachments'), 0, lang);
       }
     }
   };

app/javascript/mastodon/components/verified_badge.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
+
 import { Icon } from './icon';
 
-type Props = {
+interface Props {
   link: string;
-};
+}
 export const VerifiedBadge: React.FC<Props> = ({ link }) => (
   <span className='verified-badge'>
     <Icon id='check' className='verified-badge__mark' />