Emoji Status: Open sticker set when clicked in channels (#4141)

src/components/common/GroupChatInfo.tsx

@@ -59,6 +59,7 @@ type OwnProps = {
   withStory?: boolean;
   storyViewerOrigin?: StoryViewerOrigin;
   onClick?: VoidFunction;
+  onEmojiStatusClick?: NoneToVoidFunction;
 };
 
 type StateProps =
@@ -97,6 +98,7 @@ const GroupChatInfo: FC<OwnProps & StateProps> = ({
   noEmojiStatus,
   emojiStatusSize,
   onClick,
+  onEmojiStatusClick,
 }) => {
   const {
     loadFullChat,
@@ -217,7 +219,14 @@ const GroupChatInfo: FC<OwnProps & StateProps> = ({
       <div className="info">
         {topic
           ? <h3 dir="auto" className="fullName">{renderText(topic.title)}</h3>
-          : <FullNameTitle peer={chat} emojiStatusSize={emojiStatusSize} withEmojiStatus={!noEmojiStatus} />}
+          : (
+            <FullNameTitle
+              peer={chat}
+              emojiStatusSize={emojiStatusSize}
+              withEmojiStatus={!noEmojiStatus}
+              onEmojiStatusClick={onEmojiStatusClick}
+            />
+          )}
         {!noStatusOrTyping && renderStatusOrTyping()}
       </div>
     </div>

src/components/common/ProfileInfo.tsx

@@ -3,7 +3,7 @@ import React, { memo, useEffect, useState } from '../../lib/teact/teact';
 import { getActions, withGlobal } from '../../global';
 
 import type {
-  ApiChat, ApiPhoto, ApiTopic, ApiUser, ApiUserStatus,
+  ApiChat, ApiPhoto, ApiSticker, ApiTopic, ApiUser, ApiUserStatus,
 } from '../../api/types';
 import type { GlobalState } from '../../global/types';
 import { MediaViewerOrigin } from '../../types';
@@ -62,6 +62,7 @@ type StateProps =
     userProfilePhoto?: ApiPhoto;
     userFallbackPhoto?: ApiPhoto;
     chatProfilePhoto?: ApiPhoto;
+    emojiStatusSticker?: ApiSticker;
   }
   & Pick<GlobalState, 'connectionState'>;
 
@@ -84,11 +85,13 @@ const ProfileInfo: FC<OwnProps & StateProps> = ({
   userProfilePhoto,
   userFallbackPhoto,
   chatProfilePhoto,
+  emojiStatusSticker,
 }) => {
   const {
     loadFullUser,
     openMediaViewer,
     openPremiumModal,
+    openStickerSet,
   } = getActions();
 
   const lang = useLang();
@@ -146,7 +149,12 @@ const ProfileInfo: FC<OwnProps & StateProps> = ({
   });
 
   const handleStatusClick = useLastCallback(() => {
-    if (!userId) return;
+    if (!userId) {
+      openStickerSet({
+        stickerSetInfo: emojiStatusSticker!.stickerSetInfo,
+      });
+      return;
+    }
 
     openPremiumModal({ fromUserId: userId });
   });
@@ -367,6 +375,9 @@ export default memo(withGlobal<OwnProps>(
     const userFullInfo = isPrivate ? selectUserFullInfo(global, userId) : undefined;
     const chatFullInfo = !isPrivate ? selectChatFullInfo(global, userId) : undefined;
 
+    const emojiStatus = (user || chat)?.emojiStatus;
+    const emojiStatusSticker = emojiStatus ? global.customEmojis.byId[emojiStatus.documentId] : undefined;
+
     return {
       connectionState,
       user,
@@ -379,6 +390,7 @@ export default memo(withGlobal<OwnProps>(
       isSavedMessages,
       mediaId,
       avatarOwnerId,
+      emojiStatusSticker,
       ...(topic && {
         topic,
         messagesCount: selectThreadMessagesCount(global, userId, currentTopicId!),

src/components/middle/MiddleHeader.tsx

@@ -5,7 +5,7 @@ import React, {
 import { getActions, withGlobal } from '../../global';
 
 import type {
-  ApiChat, ApiMessage, ApiPeer, ApiTypingStatus,
+  ApiChat, ApiMessage, ApiPeer, ApiSticker, ApiTypingStatus,
 } from '../../api/types';
 import type { GlobalState, MessageListType } from '../../global/types';
 import type { Signal } from '../../util/signals';
@@ -113,6 +113,7 @@ type StateProps = {
   isSyncing?: boolean;
   isSynced?: boolean;
   isFetchingDifference?: boolean;
+  emojiStatusSticker?: ApiSticker;
 };
 
 const MiddleHeader: FC<OwnProps & StateProps> = ({
@@ -143,6 +144,7 @@ const MiddleHeader: FC<OwnProps & StateProps> = ({
   isFetchingDifference,
   getCurrentPinnedIndexes,
   getLoadingPinnedId,
+  emojiStatusSticker,
   onFocusPinnedMessage,
 }) => {
   const {
@@ -156,6 +158,7 @@ const MiddleHeader: FC<OwnProps & StateProps> = ({
     exitMessageSelectMode,
     openPremiumModal,
     openThread,
+    openStickerSet,
   } = getActions();
 
   const lang = useLang();
@@ -226,10 +229,16 @@ const MiddleHeader: FC<OwnProps & StateProps> = ({
     }, BACK_BUTTON_INACTIVE_TIME);
   });
 
-  const handleStatusClick = useLastCallback(() => {
+  const handleUserStatusClick = useLastCallback(() => {
     openPremiumModal({ fromUserId: chatId });
   });
 
+  const handleChannelStatusClick = useLastCallback(() => {
+    openStickerSet({
+      stickerSetInfo: emojiStatusSticker!.stickerSetInfo,
+    });
+  });
+
   const handleBackClick = useLastCallback((e: React.MouseEvent<HTMLElement, MouseEvent>) => {
     if (!isBackButtonActive.current) return;
 
@@ -390,7 +399,7 @@ const MiddleHeader: FC<OwnProps & StateProps> = ({
               storyViewerOrigin={StoryViewerOrigin.MiddleHeaderAvatar}
               emojiStatusSize={EMOJI_STATUS_SIZE}
               noRtl
-              onEmojiStatusClick={handleStatusClick}
+              onEmojiStatusClick={handleUserStatusClick}
             />
           ) : (
             <GroupChatInfo
@@ -406,6 +415,7 @@ const MiddleHeader: FC<OwnProps & StateProps> = ({
               withStory
               storyViewerOrigin={StoryViewerOrigin.MiddleHeaderAvatar}
               emojiStatusSize={EMOJI_STATUS_SIZE}
+              onEmojiStatusClick={handleChannelStatusClick}
               noRtl
             />
           )}
@@ -539,6 +549,9 @@ export default memo(withGlobal<OwnProps>(
     const shouldSendJoinRequest = Boolean(chat?.isNotJoined && chat.isJoinRequest);
     const typingStatus = selectThreadParam(global, chatId, threadId, 'typingStatus');
 
+    const emojiStatus = chat?.emojiStatus;
+    const emojiStatusSticker = emojiStatus && global.customEmojis.byId[emojiStatus.documentId];
+
     const state: StateProps = {
       typingStatus,
       isLeftColumnShown,
@@ -554,6 +567,7 @@ export default memo(withGlobal<OwnProps>(
       isSyncing: global.isSyncing,
       isSynced: global.isSynced,
       isFetchingDifference: global.isFetchingDifference,
+      emojiStatusSticker,
       hasButtonInHeader: canStartBot || canRestartBot || canSubscribe || shouldSendJoinRequest,
     };