signal-desktop/ts/components/StoryViewer.tsx

// Copyright 2022 Signal Messenger, LLC
// SPDX-License-Identifier: AGPL-3.0-only

import FocusTrap from 'focus-trap-react';
import React, {
  useCallback,
  useEffect,
  useMemo,
  useRef,
  useState,
} from 'react';
import classNames from 'classnames';
import type { DraftBodyRangesType, LocalizerType } from '../types/Util';
import type { ContextMenuOptionType } from './ContextMenu';
import type {
  ConversationType,
  SaveAttachmentActionCreatorType,
} from '../state/ducks/conversations';
import type { EmojiPickDataType } from './emoji/EmojiPicker';
import type { PreferredBadgeSelectorType } from '../state/selectors/badges';
import type { RenderEmojiPickerProps } from './conversation/ReactionPicker';
import type { ReplyStateType, StoryViewType } from '../types/Stories';
import type { ShowToastActionCreatorType } from '../state/ducks/toast';
import type { ViewStoryActionCreatorType } from '../state/ducks/stories';
import * as log from '../logging/log';
import { AnimatedEmojiGalore } from './AnimatedEmojiGalore';
import { Avatar, AvatarSize } from './Avatar';
import { ConfirmationDialog } from './ConfirmationDialog';
import { ContextMenu } from './ContextMenu';
import { Emojify } from './conversation/Emojify';
import { Intl } from './Intl';
import { MessageTimestamp } from './conversation/MessageTimestamp';
import { SendStatus } from '../messages/MessageSendState';
import { Spinner } from './Spinner';
import { StoryDetailsModal } from './StoryDetailsModal';
import { StoryDistributionListName } from './StoryDistributionListName';
import { StoryImage } from './StoryImage';
import {
  ResolvedSendStatus,
  StoryViewDirectionType,
  StoryViewModeType,
  StoryViewTargetType,
} from '../types/Stories';
import { StoryViewsNRepliesModal } from './StoryViewsNRepliesModal';
import { Theme } from '../util/theme';
import { ToastType } from '../state/ducks/toast';
import { getAvatarColor } from '../types/Colors';
import { getStoryBackground } from '../util/getStoryBackground';
import { getStoryDuration } from '../util/getStoryDuration';
import { isVideoAttachment } from '../types/Attachment';
import { graphemeAndLinkAwareSlice } from '../util/graphemeAndLinkAwareSlice';
import { useEscapeHandling } from '../hooks/useEscapeHandling';
import { useRetryStorySend } from '../hooks/useRetryStorySend';
import { resolveStorySendStatus } from '../util/resolveStorySendStatus';
import { strictAssert } from '../util/assert';

export type PropsType = {
  currentIndex: number;
  deleteGroupStoryReply: (id: string) => void;
  deleteGroupStoryReplyForEveryone: (id: string) => void;
  deleteStoryForEveryone: (story: StoryViewType) => unknown;
  distributionList?: { id: string; name: string };
  getPreferredBadge: PreferredBadgeSelectorType;
  group?: Pick<
    ConversationType,
    | 'acceptedMessageRequest'
    | 'avatarPath'
    | 'color'
    | 'id'
    | 'name'
    | 'profileName'
    | 'sharedGroupNames'
    | 'sortedGroupMembers'
    | 'title'
    | 'left'
  >;
  hasActiveCall?: boolean;
  hasAllStoriesUnmuted: boolean;
  hasViewReceiptSetting: boolean;
  i18n: LocalizerType;
  isInternalUser?: boolean;
  isSignalConversation?: boolean;
  isWindowActive: boolean;
  loadStoryReplies: (conversationId: string, messageId: string) => unknown;
  markStoryRead: (mId: string) => unknown;
  numStories: number;
  onGoToConversation: (conversationId: string) => unknown;
  onHideStory: (conversationId: string) => unknown;
  onSetSkinTone: (tone: number) => unknown;
  onTextTooLong: () => unknown;
  onReactToStory: (emoji: string, story: StoryViewType) => unknown;
  onReplyToStory: (
    message: string,
    mentions: DraftBodyRangesType,
    timestamp: number,
    story: StoryViewType
  ) => unknown;
  onUseEmoji: (_: EmojiPickDataType) => unknown;
  preferredReactionEmoji: Array<string>;
  queueStoryDownload: (storyId: string) => unknown;
  recentEmojis?: Array<string>;
  renderEmojiPicker: (props: RenderEmojiPickerProps) => JSX.Element;
  replyState?: ReplyStateType;
  retrySend: (messageId: string) => unknown;
  saveAttachment: SaveAttachmentActionCreatorType;
  setHasAllStoriesUnmuted: (isUnmuted: boolean) => unknown;
  showToast: ShowToastActionCreatorType;
  skinTone?: number;
  story: StoryViewType;
  storyViewMode: StoryViewModeType;
  viewStory: ViewStoryActionCreatorType;
  viewTarget?: StoryViewTargetType;
};

const CAPTION_BUFFER = 20;
const CAPTION_INITIAL_LENGTH = 200;
const CAPTION_MAX_LENGTH = 700;
const MOUSE_IDLE_TIME = 3000;

enum Arrow {
  None,
  Left,
  Right,
}

export function StoryViewer({
  currentIndex,
  deleteGroupStoryReply,
  deleteGroupStoryReplyForEveryone,
  deleteStoryForEveryone,
  distributionList,
  getPreferredBadge,
  group,
  hasActiveCall,
  hasAllStoriesUnmuted,
  hasViewReceiptSetting,
  i18n,
  isInternalUser,
  isSignalConversation,
  isWindowActive,
  loadStoryReplies,
  markStoryRead,
  numStories,
  onGoToConversation,
  onHideStory,
  onReactToStory,
  onReplyToStory,
  onSetSkinTone,
  onTextTooLong,
  onUseEmoji,
  preferredReactionEmoji,
  queueStoryDownload,
  recentEmojis,
  renderEmojiPicker,
  replyState,
  retrySend,
  saveAttachment,
  setHasAllStoriesUnmuted,
  showToast,
  skinTone,
  story,
  storyViewMode,
  viewStory,
  viewTarget,
}: PropsType): JSX.Element {
  const [isShowingContextMenu, setIsShowingContextMenu] =
    useState<boolean>(false);
  const [storyDuration, setStoryDuration] = useState<number | undefined>();
  const [hasConfirmHideStory, setHasConfirmHideStory] = useState(false);
  const [reactionEmoji, setReactionEmoji] = useState<string | undefined>();
  const [confirmDeleteStory, setConfirmDeleteStory] = useState<
    StoryViewType | undefined
  >();

  const {
    attachment,
    canReply,
    isHidden,
    messageId,
    messageIdForLogging,
    sendState,
    timestamp,
  } = story;
  const {
    acceptedMessageRequest,
    avatarPath,
    color,
    isMe,
    firstName,
    profileName,
    sharedGroupNames,
    title,
  } = story.sender;

  const conversationId = group?.id || story.sender.id;

  const sendStatus = sendState ? resolveStorySendStatus(sendState) : undefined;
  const { renderAlert, setWasManuallyRetried, wasManuallyRetried } =
    useRetryStorySend(i18n, sendStatus);

  const [currentViewTarget, setCurrentViewTarget] = useState(
    viewTarget ?? null
  );

  useEffect(() => {
    setCurrentViewTarget(viewTarget ?? null);
  }, [viewTarget]);

  const onClose = useCallback(() => {
    viewStory({
      closeViewer: true,
    });
  }, [viewStory]);

  const onEscape = useCallback(() => {
    if (currentViewTarget != null) {
      setCurrentViewTarget(null);
    } else {
      onClose();
    }
  }, [currentViewTarget, onClose]);

  useEscapeHandling(onEscape);

  // Caption related hooks
  const [hasExpandedCaption, setHasExpandedCaption] = useState<boolean>(false);

  const caption = useMemo(() => {
    if (!attachment?.caption) {
      return;
    }

    return graphemeAndLinkAwareSlice(
      attachment.caption,
      hasExpandedCaption ? CAPTION_MAX_LENGTH : CAPTION_INITIAL_LENGTH,
      CAPTION_BUFFER
    );
  }, [attachment?.caption, hasExpandedCaption]);

  // Reset expansion if messageId changes
  useEffect(() => {
    setHasExpandedCaption(false);
  }, [messageId]);

  // messageId is set as a dependency so that we can reset the story duration
  // when a new story is selected in case the same story (and same attachment)
  // are sequentially posted.
  useEffect(() => {
    let shouldCancel = false;
    (async function hydrateStoryDuration() {
      if (!attachment) {
        return;
      }
      const duration = await getStoryDuration(attachment);
      if (shouldCancel) {
        return;
      }
      log.info('stories.setStoryDuration', {
        contentType: attachment.textAttachment
          ? 'text'
          : attachment.contentType,
        duration,
      });
      setStoryDuration(duration);
    })();

    return () => {
      shouldCancel = true;
    };
  }, [attachment, messageId]);

  const progressBarRef = useRef<HTMLDivElement>(null);
  const animationRef = useRef<Animation | null>(null);

  // Putting this in a ref allows us to call it from the useEffect below without
  // triggering the effect to re-run every time these values change.
  const onFinishRef = useRef<(() => void) | null>(null);
  useEffect(() => {
    onFinishRef.current = () => {
      viewStory({
        storyId: story.messageId,
        storyViewMode,
        viewDirection: StoryViewDirectionType.Next,
      });
    };
  }, [story.messageId, storyViewMode, viewStory]);

  // This guarantees that we'll have a valid ref to the animation when we need it
  strictAssert(currentIndex != null, "StoryViewer: currentIndex can't be null");

  // We need to be careful about this effect refreshing, it should only run
  // every time a story changes or its duration changes.
  useEffect(() => {
    if (!storyDuration) {
      return;
    }

    strictAssert(
      progressBarRef.current != null,
      "progressBarRef can't be null"
    );
    const target = progressBarRef.current;

    const animation = target.animate(
      [{ transform: 'translateX(-100%)' }, { transform: 'translateX(0%)' }],
      {
        id: 'story-progress-bar',
        duration: storyDuration,
        easing: 'linear',
        fill: 'forwards',
      }
    );

    animationRef.current = animation;

    function onFinish() {
      onFinishRef.current?.();
    }

    animation.addEventListener('finish', onFinish);

    // Reset the stuff that pauses a story when you switch story views
    setConfirmDeleteStory(undefined);
    setHasConfirmHideStory(false);
    setHasExpandedCaption(false);
    setIsShowingContextMenu(false);
    setPauseStory(false);

    return () => {
      animation.removeEventListener('finish', onFinish);
      animation.cancel();
    };
  }, [story.messageId, storyDuration]);

  const [pauseStory, setPauseStory] = useState(false);

  useEffect(() => {
    if (!isWindowActive) {
      setPauseStory(true);
    }
  }, [isWindowActive]);

  const alertElement = renderAlert();

  const shouldPauseViewing =
    Boolean(alertElement) ||
    Boolean(confirmDeleteStory) ||
    currentViewTarget != null ||
    hasActiveCall ||
    hasConfirmHideStory ||
    hasExpandedCaption ||
    isShowingContextMenu ||
    pauseStory ||
    Boolean(reactionEmoji);

  useEffect(() => {
    if (shouldPauseViewing) {
      animationRef.current?.pause();
    } else {
      animationRef.current?.play();
    }
  }, [shouldPauseViewing, story.messageId, storyDuration]);

  useEffect(() => {
    markStoryRead(messageId);
    log.info('stories.markStoryRead', { message: messageIdForLogging });
  }, [markStoryRead, messageId, messageIdForLogging]);

  const canFreelyNavigateStories =
    storyViewMode === StoryViewModeType.All ||
    storyViewMode === StoryViewModeType.Hidden ||
    storyViewMode === StoryViewModeType.MyStories ||
    storyViewMode === StoryViewModeType.Unread;

  const canNavigateLeft =
    (storyViewMode === StoryViewModeType.User && currentIndex > 0) ||
    canFreelyNavigateStories;

  const canNavigateRight =
    (storyViewMode === StoryViewModeType.User &&
      currentIndex < numStories - 1) ||
    canFreelyNavigateStories;

  const navigateStories = useCallback(
    (ev: KeyboardEvent) => {
      // the replies modal can consume arrow keys
      // we don't want to navigate while someone is typing a reply
      if (currentViewTarget != null) {
        return;
      }

      if (canNavigateRight && ev.key === 'ArrowRight') {
        viewStory({
          storyId: story.messageId,
          storyViewMode,
          viewDirection: StoryViewDirectionType.Next,
        });
        ev.preventDefault();
        ev.stopPropagation();
      } else if (canNavigateLeft && ev.key === 'ArrowLeft') {
        viewStory({
          storyId: story.messageId,
          storyViewMode,
          viewDirection: StoryViewDirectionType.Previous,
        });
        ev.preventDefault();
        ev.stopPropagation();
      }
    },
    [
      currentViewTarget,
      canNavigateLeft,
      canNavigateRight,
      story.messageId,
      storyViewMode,
      viewStory,
    ]
  );

  useEffect(() => {
    document.addEventListener('keydown', navigateStories);

    return () => {
      document.removeEventListener('keydown', navigateStories);
    };
  }, [navigateStories]);

  const groupId = group?.id;
  const isGroupStory = Boolean(groupId);
  useEffect(() => {
    if (!groupId) {
      return;
    }
    loadStoryReplies(groupId, messageId);
  }, [groupId, loadStoryReplies, messageId]);

  const [arrowToShow, setArrowToShow] = useState<Arrow>(Arrow.None);

  useEffect(() => {
    if (arrowToShow === Arrow.None) {
      return;
    }

    let mouseMoveExpiration: number | undefined;
    let timer: NodeJS.Timeout | undefined;

    function updateLastMouseMove() {
      mouseMoveExpiration = Date.now() + MOUSE_IDLE_TIME;

      if (timer === undefined) {
        checkMouseIdle();
      }
    }

    function checkMouseIdle() {
      timer = undefined;

      if (mouseMoveExpiration === undefined) {
        return;
      }

      const remaining = mouseMoveExpiration - Date.now();
      if (remaining <= 0) {
        setArrowToShow(Arrow.None);
        return;
      }

      timer = setTimeout(checkMouseIdle, remaining);
    }

    document.addEventListener('mousemove', updateLastMouseMove);

    return () => {
      if (timer !== undefined) {
        clearTimeout(timer);
      }
      mouseMoveExpiration = undefined;
      timer = undefined;
      document.removeEventListener('mousemove', updateLastMouseMove);
    };
  }, [arrowToShow]);

  const replies =
    replyState && replyState.messageId === messageId ? replyState.replies : [];
  const views = sendState
    ? sendState.filter(({ status }) => status === SendStatus.Viewed)
    : [];
  const replyCount = replies.length;
  const viewCount = views.length;

  const hasAudio = isVideoAttachment(attachment);
  const isStoryMuted = !hasAllStoriesUnmuted || !hasAudio;

  let muteClassName: string;
  let muteAriaLabel: string;
  if (hasAudio) {
    muteAriaLabel = hasAllStoriesUnmuted
      ? i18n('StoryViewer__mute')
      : i18n('StoryViewer__unmute');

    muteClassName = hasAllStoriesUnmuted
      ? 'StoryViewer__mute'
      : 'StoryViewer__unmute';
  } else {
    muteAriaLabel = i18n('Stories__toast--hasNoSound');
    muteClassName = 'StoryViewer__soundless';
  }

  const isSent = Boolean(sendState);

  let contextMenuOptions:
    | ReadonlyArray<ContextMenuOptionType<unknown>>
    | undefined;

  if (isSent) {
    contextMenuOptions = [
      {
        icon: 'StoryListItem__icon--info',
        label: i18n('StoryListItem__info'),
        onClick: () => setCurrentViewTarget(StoryViewTargetType.Details),
      },
      {
        icon: 'StoryListItem__icon--delete',
        label: i18n('StoryListItem__delete'),
        onClick: () => setConfirmDeleteStory(story),
      },
    ];
  } else if (!isSignalConversation) {
    contextMenuOptions = [
      {
        icon: 'StoryListItem__icon--info',
        label: i18n('StoryListItem__info'),
        onClick: () => setCurrentViewTarget(StoryViewTargetType.Details),
      },
      {
        icon: 'StoryListItem__icon--hide',
        label: isHidden
          ? i18n('StoryListItem__unhide')
          : i18n('StoryListItem__hide'),
        onClick: () => {
          if (isHidden) {
            onHideStory(conversationId);
          } else {
            setHasConfirmHideStory(true);
          }
        },
      },
      {
        icon: 'StoryListItem__icon--chat',
        label: i18n('StoryListItem__go-to-chat'),
        onClick: () => {
          onGoToConversation(conversationId);
        },
      },
    ];
  }

  function doRetrySend() {
    if (wasManuallyRetried) {
      return;
    }

    if (
      sendStatus !== ResolvedSendStatus.Failed &&
      sendStatus !== ResolvedSendStatus.PartiallySent
    ) {
      return;
    }

    setWasManuallyRetried(true);
    retrySend(messageId);
  }

  return (
    <FocusTrap focusTrapOptions={{ clickOutsideDeactivates: true }}>
      <div className="StoryViewer">
        {alertElement}
        <div
          className="StoryViewer__overlay"
          style={{ background: getStoryBackground(attachment) }}
        />
        <div className="StoryViewer__content">
          {canNavigateLeft && (
            <button
              aria-label={i18n('back')}
              className={classNames(
                'StoryViewer__arrow StoryViewer__arrow--left',
                {
                  'StoryViewer__arrow--visible': arrowToShow === Arrow.Left,
                }
              )}
              onClick={() =>
                viewStory({
                  storyId: story.messageId,
                  storyViewMode,
                  viewDirection: StoryViewDirectionType.Previous,
                })
              }
              onMouseMove={() => setArrowToShow(Arrow.Left)}
              type="button"
            />
          )}
          <div className="StoryViewer__protection StoryViewer__protection--top" />
          <div className="StoryViewer__container">
            <StoryImage
              attachment={attachment}
              firstName={firstName || title}
              isMe={isMe}
              i18n={i18n}
              isPaused={shouldPauseViewing}
              isMuted={isStoryMuted}
              label={i18n('lightboxImageAlt')}
              moduleClassName="StoryViewer__story"
              queueStoryDownload={queueStoryDownload}
              storyId={messageId}
            >
              {reactionEmoji && (
                <div className="StoryViewer__animated-emojis">
                  <AnimatedEmojiGalore
                    emoji={reactionEmoji}
                    onAnimationEnd={() => {
                      setReactionEmoji(undefined);
                    }}
                  />
                </div>
              )}
            </StoryImage>
            {hasExpandedCaption && (
              <button
                aria-label={i18n('close-popup')}
                className="StoryViewer__caption__overlay"
                onClick={() => setHasExpandedCaption(false)}
                type="button"
              />
            )}
          </div>

          <div className="StoryViewer__protection StoryViewer__protection--bottom" />

          {canNavigateRight && (
            <button
              aria-label={i18n('forward')}
              className={classNames(
                'StoryViewer__arrow StoryViewer__arrow--right',
                {
                  'StoryViewer__arrow--visible': arrowToShow === Arrow.Right,
                }
              )}
              onClick={() =>
                viewStory({
                  storyId: story.messageId,
                  storyViewMode,
                  viewDirection: StoryViewDirectionType.Next,
                })
              }
              onMouseMove={() => setArrowToShow(Arrow.Right)}
              type="button"
            />
          )}

          <div className="StoryViewer__meta">
            {caption && (
              <div className="StoryViewer__caption">
                <Emojify text={caption.text} />
                {caption.hasReadMore && !hasExpandedCaption && (
                  <button
                    className="MessageBody__read-more"
                    onClick={() => {
                      setHasExpandedCaption(true);
                    }}
                    onKeyDown={(ev: React.KeyboardEvent) => {
                      if (ev.key === 'Space' || ev.key === 'Enter') {
                        setHasExpandedCaption(true);
                      }
                    }}
                    type="button"
                  >
                    ...
                    {i18n('MessageBody--read-more')}
                  </button>
                )}
              </div>
            )}
            <div className="StoryViewer__meta__playback-bar">
              <div className="StoryViewer__meta__playback-bar__container">
                <Avatar
                  acceptedMessageRequest={acceptedMessageRequest}
                  avatarPath={avatarPath}
                  badge={undefined}
                  color={getAvatarColor(color)}
                  conversationType="direct"
                  i18n={i18n}
                  isMe={Boolean(isMe)}
                  profileName={profileName}
                  sharedGroupNames={sharedGroupNames}
                  size={AvatarSize.TWENTY_EIGHT}
                  title={title}
                />
                {group && (
                  <Avatar
                    acceptedMessageRequest={group.acceptedMessageRequest}
                    avatarPath={group.avatarPath}
                    badge={undefined}
                    className="StoryViewer__meta--group-avatar"
                    color={getAvatarColor(group.color)}
                    conversationType="group"
                    i18n={i18n}
                    isMe={false}
                    profileName={group.profileName}
                    sharedGroupNames={group.sharedGroupNames}
                    size={AvatarSize.TWENTY_EIGHT}
                    title={group.title}
                  />
                )}
                <div className="StoryViewer__meta--title-container">
                  <div className="StoryViewer__meta--title">
                    {(group &&
                      i18n('Stories__from-to-group', {
                        name: isMe ? i18n('you') : title,
                        group: group.title,
                      })) ||
                      (isMe ? i18n('you') : title)}
                  </div>
                  <MessageTimestamp
                    i18n={i18n}
                    isRelativeTime
                    module="StoryViewer__meta--timestamp"
                    timestamp={timestamp}
                  />
                  {distributionList && (
                    <div className="StoryViewer__meta__list">
                      <StoryDistributionListName
                        id={distributionList.id}
                        name={distributionList.name}
                        i18n={i18n}
                      />
                    </div>
                  )}
                </div>
              </div>
              <div className="StoryViewer__meta__playback-controls">
                <button
                  aria-label={
                    pauseStory
                      ? i18n('StoryViewer__play')
                      : i18n('StoryViewer__pause')
                  }
                  className={
                    pauseStory ? 'StoryViewer__play' : 'StoryViewer__pause'
                  }
                  onClick={() => setPauseStory(!pauseStory)}
                  type="button"
                />
                <button
                  aria-label={muteAriaLabel}
                  className={muteClassName}
                  onClick={
                    hasAudio
                      ? () => setHasAllStoriesUnmuted(!hasAllStoriesUnmuted)
                      : () => showToast(ToastType.StoryMuted)
                  }
                  type="button"
                />
                {contextMenuOptions && (
                  <ContextMenu
                    aria-label={i18n('MyStories__more')}
                    i18n={i18n}
                    menuOptions={contextMenuOptions}
                    moduleClassName="StoryViewer__more"
                    onMenuShowingChanged={setIsShowingContextMenu}
                    theme={Theme.Dark}
                  />
                )}
              </div>
            </div>
            <div className="StoryViewer__progress">
              {Array.from(Array(numStories), (_, index) => (
                <div className="StoryViewer__progress--container" key={index}>
                  {currentIndex === index ? (
                    <div
                      ref={progressBarRef}
                      className="StoryViewer__progress--bar"
                    />
                  ) : (
                    <div
                      className="StoryViewer__progress--bar"
                      style={
                        currentIndex < index
                          ? {}
                          : {
                              transform: 'translateX(0%)',
                            }
                      }
                    />
                  )}
                </div>
              ))}
            </div>
            <div className="StoryViewer__actions">
              {sendStatus === ResolvedSendStatus.Failed && !wasManuallyRetried && (
                <button
                  className="StoryViewer__actions__failed"
                  onClick={doRetrySend}
                  type="button"
                >
                  {i18n('StoryViewer__failed')}
                </button>
              )}
              {sendStatus === ResolvedSendStatus.PartiallySent &&
                !wasManuallyRetried && (
                  <button
                    className="StoryViewer__actions__failed"
                    onClick={doRetrySend}
                    type="button"
                  >
                    {i18n('StoryViewer__partial-fail')}
                  </button>
                )}
              {sendStatus === ResolvedSendStatus.Sending && (
                <div className="StoryViewer__sending">
                  <Spinner
                    moduleClassName="StoryViewer__sending__spinner"
                    svgSize="small"
                  />
                  {i18n('StoryViewer__sending')}
                </div>
              )}
              {(canReply ||
                (isSent && sendStatus === ResolvedSendStatus.Sent)) && (
                <button
                  className="StoryViewer__reply"
                  onClick={() =>
                    setCurrentViewTarget(StoryViewTargetType.Replies)
                  }
                  tabIndex={0}
                  type="button"
                >
                  {isSent || replyCount > 0 ? (
                    <span className="StoryViewer__reply__chevron">
                      {isSent && !hasViewReceiptSetting && !replyCount && (
                        <>{i18n('StoryViewer__views-off')}</>
                      )}
                      {isSent &&
                        hasViewReceiptSetting &&
                        (viewCount === 1 ? (
                          <Intl
                            i18n={i18n}
                            id="MyStories__views--singular"
                            components={[<strong>{viewCount}</strong>]}
                          />
                        ) : (
                          <Intl
                            i18n={i18n}
                            id="MyStories__views--plural"
                            components={[<strong>{viewCount}</strong>]}
                          />
                        ))}
                      {(isSent || viewCount > 0) && replyCount > 0 && ' '}
                      {replyCount > 0 &&
                        (replyCount === 1 ? (
                          <Intl
                            i18n={i18n}
                            id="MyStories__replies--singular"
                            components={[<strong>{replyCount}</strong>]}
                          />
                        ) : (
                          <Intl
                            i18n={i18n}
                            id="MyStories__replies--plural"
                            components={[<strong>{replyCount}</strong>]}
                          />
                        ))}
                    </span>
                  ) : null}
                  {!isSent && !replyCount && (
                    <span className="StoryViewer__reply__arrow">
                      {isGroupStory
                        ? i18n('StoryViewer__reply-group')
                        : i18n('StoryViewer__reply')}
                    </span>
                  )}
                </button>
              )}
            </div>
          </div>
          <button
            aria-label={i18n('close')}
            className="StoryViewer__close-button"
            onClick={onClose}
            tabIndex={0}
            type="button"
          />
        </div>
        {currentViewTarget === StoryViewTargetType.Details && (
          <StoryDetailsModal
            attachment={attachment}
            getPreferredBadge={getPreferredBadge}
            i18n={i18n}
            isInternalUser={isInternalUser}
            onClose={() => setCurrentViewTarget(null)}
            saveAttachment={saveAttachment}
            sender={story.sender}
            sendState={sendState}
            timestamp={timestamp}
            expirationTimestamp={story.expirationTimestamp}
          />
        )}
        {(currentViewTarget === StoryViewTargetType.Replies ||
          currentViewTarget === StoryViewTargetType.Views) && (
          <StoryViewsNRepliesModal
            conversationTitle={group?.title ?? title}
            authorTitle={firstName || title}
            canReply={Boolean(canReply)}
            getPreferredBadge={getPreferredBadge}
            hasViewReceiptSetting={hasViewReceiptSetting}
            hasViewsCapability={isSent}
            i18n={i18n}
            isInternalUser={isInternalUser}
            group={group}
            onClose={() => setCurrentViewTarget(null)}
            onReact={emoji => {
              onReactToStory(emoji, story);
              if (!isGroupStory) {
                setCurrentViewTarget(null);
                showToast(ToastType.StoryReact);
              }
              setReactionEmoji(emoji);
            }}
            onReply={(message, mentions, replyTimestamp) => {
              if (!isGroupStory) {
                setCurrentViewTarget(null);
                showToast(ToastType.StoryReply);
              }
              onReplyToStory(message, mentions, replyTimestamp, story);
            }}
            onSetSkinTone={onSetSkinTone}
            onTextTooLong={onTextTooLong}
            onUseEmoji={onUseEmoji}
            preferredReactionEmoji={preferredReactionEmoji}
            recentEmojis={recentEmojis}
            renderEmojiPicker={renderEmojiPicker}
            replies={replies}
            skinTone={skinTone}
            sortedGroupMembers={group?.sortedGroupMembers}
            storyPreviewAttachment={attachment}
            views={views}
            viewTarget={currentViewTarget}
            onChangeViewTarget={setCurrentViewTarget}
            deleteGroupStoryReply={deleteGroupStoryReply}
            deleteGroupStoryReplyForEveryone={deleteGroupStoryReplyForEveryone}
          />
        )}
        {hasConfirmHideStory && (
          <ConfirmationDialog
            dialogName="StoryViewer.confirmHideStory"
            actions={[
              {
                action: () => {
                  onHideStory(conversationId);
                  onClose();
                },
                style: 'affirmative',
                text: i18n('StoryListItem__hide-modal--confirm'),
              },
            ]}
            i18n={i18n}
            onClose={() => {
              setHasConfirmHideStory(false);
            }}
          >
            {i18n('StoryListItem__hide-modal--body', [String(firstName)])}
          </ConfirmationDialog>
        )}
        {confirmDeleteStory && (
          <ConfirmationDialog
            dialogName="StoryViewer.deleteStory"
            actions={[
              {
                text: i18n('delete'),
                action: () => deleteStoryForEveryone(confirmDeleteStory),
                style: 'negative',
              },
            ]}
            i18n={i18n}
            onClose={() => setConfirmDeleteStory(undefined)}
          >
            {i18n('MyStories__delete')}
          </ConfirmationDialog>
        )}
      </div>
    </FocusTrap>
  );
}