Remove obfuscation of reply count in web UI (#26768)
This commit is contained in:
		
							parent
							
								
									01e3a1f941
								
							
						
					
					
						commit
						2c5ba586ff
					
				
					 4 changed files with 6 additions and 27 deletions
				
			
		| 
						 | 
				
			
			@ -6,21 +6,10 @@ import { reduceMotion } from '../initial_state';
 | 
			
		|||
 | 
			
		||||
import { ShortNumber } from './short_number';
 | 
			
		||||
 | 
			
		||||
const obfuscatedCount = (count: number) => {
 | 
			
		||||
  if (count < 0) {
 | 
			
		||||
    return 0;
 | 
			
		||||
  } else if (count <= 1) {
 | 
			
		||||
    return count;
 | 
			
		||||
  } else {
 | 
			
		||||
    return '1+';
 | 
			
		||||
  }
 | 
			
		||||
};
 | 
			
		||||
 | 
			
		||||
interface Props {
 | 
			
		||||
  value: number;
 | 
			
		||||
  obfuscate?: boolean;
 | 
			
		||||
}
 | 
			
		||||
export const AnimatedNumber: React.FC<Props> = ({ value, obfuscate }) => {
 | 
			
		||||
export const AnimatedNumber: React.FC<Props> = ({ value }) => {
 | 
			
		||||
  const [previousValue, setPreviousValue] = useState(value);
 | 
			
		||||
  const [direction, setDirection] = useState<1 | -1>(1);
 | 
			
		||||
 | 
			
		||||
| 
						 | 
				
			
			@ -36,11 +25,7 @@ export const AnimatedNumber: React.FC<Props> = ({ value, obfuscate }) => {
 | 
			
		|||
  );
 | 
			
		||||
 | 
			
		||||
  if (reduceMotion) {
 | 
			
		||||
    return obfuscate ? (
 | 
			
		||||
      <>{obfuscatedCount(value)}</>
 | 
			
		||||
    ) : (
 | 
			
		||||
      <ShortNumber value={value} />
 | 
			
		||||
    );
 | 
			
		||||
    return <ShortNumber value={value} />;
 | 
			
		||||
  }
 | 
			
		||||
 | 
			
		||||
  const styles = [
 | 
			
		||||
| 
						 | 
				
			
			@ -67,11 +52,7 @@ export const AnimatedNumber: React.FC<Props> = ({ value, obfuscate }) => {
 | 
			
		|||
                transform: `translateY(${style.y * 100}%)`,
 | 
			
		||||
              }}
 | 
			
		||||
            >
 | 
			
		||||
              {obfuscate ? (
 | 
			
		||||
                obfuscatedCount(data as number)
 | 
			
		||||
              ) : (
 | 
			
		||||
                <ShortNumber value={data as number} />
 | 
			
		||||
              )}
 | 
			
		||||
              <ShortNumber value={data as number} />
 | 
			
		||||
            </span>
 | 
			
		||||
          ))}
 | 
			
		||||
        </span>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -24,7 +24,6 @@ interface Props {
 | 
			
		|||
  overlay: boolean;
 | 
			
		||||
  tabIndex: number;
 | 
			
		||||
  counter?: number;
 | 
			
		||||
  obfuscateCount?: boolean;
 | 
			
		||||
  href?: string;
 | 
			
		||||
  ariaHidden: boolean;
 | 
			
		||||
}
 | 
			
		||||
| 
						 | 
				
			
			@ -105,7 +104,6 @@ export class IconButton extends PureComponent<Props, States> {
 | 
			
		|||
      tabIndex,
 | 
			
		||||
      title,
 | 
			
		||||
      counter,
 | 
			
		||||
      obfuscateCount,
 | 
			
		||||
      href,
 | 
			
		||||
      ariaHidden,
 | 
			
		||||
    } = this.props;
 | 
			
		||||
| 
						 | 
				
			
			@ -131,7 +129,7 @@ export class IconButton extends PureComponent<Props, States> {
 | 
			
		|||
        <Icon id={icon} fixedWidth aria-hidden='true' />{' '}
 | 
			
		||||
        {typeof counter !== 'undefined' && (
 | 
			
		||||
          <span className='icon-button__counter'>
 | 
			
		||||
            <AnimatedNumber value={counter} obfuscate={obfuscateCount} />
 | 
			
		||||
            <AnimatedNumber value={counter} />
 | 
			
		||||
          </span>
 | 
			
		||||
        )}
 | 
			
		||||
      </>
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -362,7 +362,7 @@ class StatusActionBar extends ImmutablePureComponent {
 | 
			
		|||
 | 
			
		||||
    return (
 | 
			
		||||
      <div className='status__action-bar'>
 | 
			
		||||
        <IconButton className='status__action-bar__button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} obfuscateCount />
 | 
			
		||||
        <IconButton className='status__action-bar__button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} />
 | 
			
		||||
        <IconButton className={classNames('status__action-bar__button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate} active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} counter={withCounters ? status.get('reblogs_count') : undefined} />
 | 
			
		||||
        <IconButton className='status__action-bar__button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={withCounters ? status.get('favourites_count') : undefined} />
 | 
			
		||||
        <IconButton className='status__action-bar__button bookmark-icon' disabled={!signedIn} active={status.get('bookmarked')} title={intl.formatMessage(messages.bookmark)} icon='bookmark' onClick={this.handleBookmarkClick} />
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
| 
						 | 
				
			
			@ -194,7 +194,7 @@ class Footer extends ImmutablePureComponent {
 | 
			
		|||
 | 
			
		||||
    return (
 | 
			
		||||
      <div className='picture-in-picture__footer'>
 | 
			
		||||
        <IconButton className='status__action-bar-button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} obfuscateCount />
 | 
			
		||||
        <IconButton className='status__action-bar-button' title={replyTitle} icon={status.get('in_reply_to_account_id') === status.getIn(['account', 'id']) ? 'reply' : replyIcon} onClick={this.handleReplyClick} counter={status.get('replies_count')} />
 | 
			
		||||
        <IconButton className={classNames('status__action-bar-button', { reblogPrivate })} disabled={!publicStatus && !reblogPrivate}  active={status.get('reblogged')} title={reblogTitle} icon='retweet' onClick={this.handleReblogClick} counter={status.get('reblogs_count')} />
 | 
			
		||||
        <IconButton className='status__action-bar-button star-icon' animate active={status.get('favourited')} title={intl.formatMessage(messages.favourite)} icon='star' onClick={this.handleFavouriteClick} counter={status.get('favourites_count')} />
 | 
			
		||||
        {withOpenButton && <IconButton className='status__action-bar-button' title={intl.formatMessage(messages.open)} icon='external-link' onClick={this.handleOpenClick} href={`/@${status.getIn(['account', 'acct'])}/${status.get('id')}`} />}
 | 
			
		||||
| 
						 | 
				
			
			
 | 
			
		|||
		Loading…
	
		Reference in a new issue