Merge remote-tracking branch 'parent/main' into upstream-20240824

2024-08-24 09:39:11 +09:00 · 2024-08-24 09:39:11 +09:00 · a5bbc3f93b
commit a5bbc3f93b
parent a41946d11a 97f6baf977
164 changed files with 1913 additions and 1534 deletions
--- a/app/javascript/mastodon/components/status.jsx
+++ b/app/javascript/mastodon/components/status.jsx
@ -18,6 +18,8 @@ import ReplyIcon from '@/material-icons/400-24px/reply.svg?react';
 import LimitedIcon from '@/material-icons/400-24px/shield.svg?react';
 import TimerIcon from '@/material-icons/400-24px/timer.svg?react';
 import AttachmentList from 'mastodon/components/attachment_list';
+import { ContentWarning } from 'mastodon/components/content_warning';
+import { FilterWarning } from 'mastodon/components/filter_warning';
 import { Icon }  from 'mastodon/components/icon';
 import PictureInPicturePlaceholder from 'mastodon/components/picture_in_picture_placeholder';
 import { withOptionalRouter, WithOptionalRouterPropTypes } from 'mastodon/utils/react_router';
@ -150,7 +152,7 @@ class Status extends ImmutablePureComponent {

  state = {
    showMedia: defaultMediaVisibility(this.props.status) && !(this.context?.hideMediaByDefault),
-    forceFilter: undefined,
+    showDespiteFilter: undefined,
  };

  componentDidUpdate (prevProps) {
@ -162,7 +164,7 @@ class Status extends ImmutablePureComponent {
    if (this.props.status?.get('id') !== prevProps.status?.get('id')) {
      this.setState({
        showMedia: defaultMediaVisibility(this.props.status) && !(this.context?.hideMediaByDefault),
-        forceFilter: undefined,
+        showDespiteFilter: undefined,
      });
    }
  }
@ -335,20 +337,32 @@ class Status extends ImmutablePureComponent {
  };

  handleHotkeyToggleHidden = () => {
-    this.props.onToggleHidden(this._properStatus());
+    const { onToggleHidden } = this.props;
+    const status = this._properStatus();
+
+    if (status.get('matched_filters')) {
+      const expandedBecauseOfCW = !status.get('hidden') || status.get('spoiler_text').length === 0;
+      const expandedBecauseOfFilter = this.state.showDespiteFilter;
+
+      if (expandedBecauseOfFilter && !expandedBecauseOfCW) {
+        onToggleHidden(status);
+      } else if (expandedBecauseOfFilter && expandedBecauseOfCW) {
+        onToggleHidden(status);
+        this.handleFilterToggle();
+      } else  {
+        this.handleFilterToggle();
+      }
+    } else {
+      onToggleHidden(status);
+    }
  };

  handleHotkeyToggleSensitive = () => {
    this.handleToggleMediaVisibility();
  };

-  handleUnfilterClick = e => {
-    this.setState({ forceFilter: false });
-    e.preventDefault();
-  };
-
-  handleFilterClick = () => {
-    this.setState({ forceFilter: true });
+  handleFilterToggle = () => {
+    this.setState(state => ({ ...state, showDespiteFilter: !state.showDespiteFilter }));
  };

  _properStatus () {
@ -390,7 +404,7 @@ class Status extends ImmutablePureComponent {
      openMedia: this.handleHotkeyOpenMedia,
    };

-    let media, isCardMediaWithSensitive, statusAvatar, prepend, rebloggedByText;
+    let media, statusAvatar, prepend, rebloggedByText;

    if (hidden) {
      return (
@ -410,25 +424,6 @@ class Status extends ImmutablePureComponent {

    let visibilityName = status.get('limited_scope') || status.get('visibility_ex') || status.get('visibility');

-    if (this.state.forceFilter === undefined ? matchedFilters : this.state.forceFilter) {
-      const minHandlers = this.props.muted ? {} : {
-        moveUp: this.handleHotkeyMoveUp,
-        moveDown: this.handleHotkeyMoveDown,
-      };
-
-      return (
-        <HotKeys handlers={minHandlers} tabIndex={unfocusable ? null : -1}>
-          <div className='status__wrapper status__wrapper--filtered focusable' tabIndex={unfocusable ? null : 0} ref={this.handleRef}>
-            <FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {matchedFilters.join(', ')}.
-            {' '}
-            <button className='status__wrapper--filtered__button' onClick={this.handleUnfilterClick}>
-              <FormattedMessage id='status.show_filter_reason' defaultMessage='Show anyway' />
-            </button>
-          </div>
-        </HotKeys>
-      );
-    }
-
    if (featured) {
      prepend = (
        <div className='status__prepend'>
@ -475,59 +470,6 @@ class Status extends ImmutablePureComponent {
      statusAvatar = <AvatarOverlay account={status.get('account')} friend={account} />;
    }

-    if (this.state.forceFilter === undefined ? matchedFilters : this.state.forceFilter) {
-      const minHandlers = this.props.muted ? {} : {
-        moveUp: this.handleHotkeyMoveUp,
-        moveDown: this.handleHotkeyMoveDown,
-      };
-
-      if (status.get('filter_action_ex') === 'half_warn') {
-        return (
-          <HotKeys handlers={minHandlers}>
-            <div className='status__wrapper status__wrapper--filtered focusable' tabIndex={0} ref={this.handleRef}>
-              {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-              <div onClick={this.handleClick} className='status__info'>
-                <a href={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
-                  <span className='status__visibility-icon'><VisibilityIcon visibility={visibilityName} /></span>
-                  <RelativeTimestamp timestamp={status.get('created_at')} />{status.get('edited_at') && <abbr title={intl.formatMessage(messages.edited, { date: intl.formatDate(status.get('edited_at'), { hour12: false, year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) })}> *</abbr>}
-                </a>
-
-                <a onClick={this.handleAccountClick} href={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} className='status__display-name' target='_blank' rel='noopener noreferrer'>
-                  <div className='status__avatar'>
-                    {statusAvatar}
-                  </div>
-
-                  <DisplayName account={status.get('account')} />
-                </a>
-              </div>
-
-              <div >
-                <FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {matchedFilters.join(', ')}.
-                {' '}
-                <button className='status__wrapper--filtered__button' onClick={this.handleUnfilterClick}>
-                  <FormattedMessage id='status.show_filter_reason' defaultMessage='Show anyway' />
-                </button>
-              </div>
-            </div>
-          </HotKeys>
-        );
-      }
-
-      return (
-        <HotKeys handlers={minHandlers}>
-          <div className='status__wrapper status__wrapper--filtered focusable' tabIndex={0} ref={this.handleRef}>
-            <FormattedMessage id='status.filtered' defaultMessage='Filtered' />: {matchedFilters.join(', ')}.
-            {' '}
-            <button className='status__wrapper--filtered__button' onClick={this.handleUnfilterClick}>
-              <FormattedMessage id='status.show_filter_reason' defaultMessage='Show anyway' />
-            </button>
-          </div>
-        </HotKeys>
-      );
-    }
-
-    isCardMediaWithSensitive = false;
-
    if (pictureInPicture.get('inUse')) {
      media = <PictureInPicturePlaceholder aspectRatio={this.getAttachmentAspectRatio()} />;
    } else if (status.get('media_attachments').size > 0) {
@ -620,7 +562,6 @@ class Status extends ImmutablePureComponent {
          sensitive={status.get('sensitive') && !status.get('spoiler_text')}
        />
      );
-      isCardMediaWithSensitive = status.get('spoiler_text').length > 0;
    }

    visibilityName = status.get('limited_scope') || status.get('visibility_ex') || status.get('visibility');
@ -642,7 +583,7 @@ class Status extends ImmutablePureComponent {
    }

    const {statusContentProps, hashtagBar} = getHashtagBarForStatus(status);
-    const expanded = !status.get('hidden') || status.get('spoiler_text').length === 0;
+    const expanded = (!matchedFilters || this.state.showDespiteFilter) && (!status.get('hidden') || status.get('spoiler_text').length === 0);

    const withLimited = status.get('visibility_ex') === 'limited' && status.get('limited_scope') ? <span className='status__visibility-icon'><Icon id='get-pocket' icon={LimitedIcon} title={intl.formatMessage(messages.limited_short)} /></span> : null;
    const withQuote = status.get('quote_id') ? <span className='status__visibility-icon'><Icon id='quote-right' icon={QuoteIcon} title='Quote' /></span> : null;
@ -657,48 +598,56 @@ class Status extends ImmutablePureComponent {
          {!skipPrepend && prepend}

          <div className={classNames('status', `status-${status.get('visibility_ex')}`, { 'status-reply': !!status.get('in_reply_to_id'), 'status--in-thread': !!rootId, 'status--first-in-thread': previousId && (!connectUp || connectToRoot), muted: this.props.muted })} data-id={status.get('id')}>
-            {(connectReply || connectUp || connectToRoot) && <div className={classNames('status__line', { 'status__line--full': connectReply, 'status__line--first': !status.get('in_reply_to_id') && !connectToRoot })} />}

-            {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
-            <div onClick={this.handleClick} className='status__info'>
-              <a href={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
-                {withQuote}
-                {withReference}
-                {withExpiration}
-                {withLimited}
-                <span className='status__visibility-icon'><VisibilityIcon visibility={visibilityName} /></span>
-                <RelativeTimestamp timestamp={status.get('created_at')} />{status.get('edited_at') && <abbr title={intl.formatMessage(messages.edited, { date: intl.formatDate(status.get('edited_at'), { year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) })}> *</abbr>}
-              </a>
+            {(!matchedFilters || this.state.showDespiteFilter || status.get('filter_action_ex') === 'half_warn') && (
+              <>
+                {(connectReply || connectUp || connectToRoot) && <div className={classNames('status__line', { 'status__line--full': connectReply, 'status__line--first': !status.get('in_reply_to_id') && !connectToRoot })} />}

-              <a onClick={this.handleAccountClick} href={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} data-hover-card-account={status.getIn(['account', 'id'])} className='status__display-name' target='_blank' rel='noopener noreferrer'>
-                <div className='status__avatar'>
-                  {statusAvatar}
+                {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions */}
+                <div onClick={this.handleClick} className='status__info'>
+                  <a href={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`} className='status__relative-time' target='_blank' rel='noopener noreferrer'>
+                    {withQuote}
+                    {withReference}
+                    {withExpiration}
+                    {withLimited}
+                    <span className='status__visibility-icon'><VisibilityIcon visibility={visibilityName} /></span>
+                    <RelativeTimestamp timestamp={status.get('created_at')} />{status.get('edited_at') && <abbr title={intl.formatMessage(messages.edited, { date: intl.formatDate(status.get('edited_at'), { year: 'numeric', month: 'short', day: '2-digit', hour: '2-digit', minute: '2-digit' }) })}> *</abbr>}
+                  </a>
+
+                  <a onClick={this.handleAccountClick} href={`/@${status.getIn(['account', 'acct'])}`} title={status.getIn(['account', 'acct'])} data-hover-card-account={status.getIn(['account', 'id'])} className='status__display-name' target='_blank' rel='noopener noreferrer'>
+                    <div className='status__avatar'>
+                      {statusAvatar}
+                    </div>
+
+                    <DisplayName account={status.get('account')} />
+                  </a>
                </div>
+              </>
+            )}

-                <DisplayName account={status.get('account')} />
-              </a>
-            </div>
+            {matchedFilters && <FilterWarning title={matchedFilters.join(', ')} expanded={this.state.showDespiteFilter} onClick={this.handleFilterToggle} />}

-            <StatusContent
-              status={status}
-              onClick={this.handleClick}
-              expanded={expanded}
-              onExpandedToggle={this.handleExpandedToggle}
-              onTranslate={this.handleTranslate}
-              collapsible
-              onCollapsedToggle={this.handleCollapsedToggle}
-              {...statusContentProps}
-            />
+            {(status.get('spoiler_text').length > 0 && (!matchedFilters || this.state.showDespiteFilter)) && <ContentWarning text={status.getIn(['translation', 'spoilerHtml']) || status.get('spoilerHtml')} expanded={expanded} onClick={this.handleExpandedToggle} />}

-            {(!isCardMediaWithSensitive || !status.get('hidden')) && media}
+            {expanded && (
+              <>
+                <StatusContent
+                  status={status}
+                  onClick={this.handleClick}
+                  onTranslate={this.handleTranslate}
+                  collapsible
+                  onCollapsedToggle={this.handleCollapsedToggle}
+                  {...statusContentProps}
+                />

-            {(!status.get('spoiler_text') || expanded) && hashtagBar}
+                {media}
+                {hashtagBar}
+                {quote}
+                {emojiReactionsBar}
+              </>
+            )}

-            {(!status.get('spoiler_text') || expanded) && quote}
-
-            {emojiReactionsBar}
-
-            <StatusActionBar scrollKey={scrollKey} status={status} account={account} onFilter={matchedFilters ? this.handleFilterClick : null} {...other} />
+            {(!matchedFilters || this.state.showDespiteFilter) && <StatusActionBar scrollKey={scrollKey} status={status} account={account}  {...other} />}
          </div>
        </div>
      </HotKeys>