From a2492b369b9b9a703d380c8c8eba32bd2a85c2da Mon Sep 17 00:00:00 2001 From: Alexander Zinchuk Date: Fri, 10 Dec 2021 18:32:49 +0100 Subject: [PATCH] Middle Column: Show "Join / Subscribe / Start" buttons on bottom (#1568) --- src/components/middle/MiddleColumn.scss | 8 +++ src/components/middle/MiddleColumn.tsx | 85 +++++++++++++++++++++++-- 2 files changed, 89 insertions(+), 4 deletions(-) diff --git a/src/components/middle/MiddleColumn.scss b/src/components/middle/MiddleColumn.scss index 19933b53f..aed04b0bb 100644 --- a/src/components/middle/MiddleColumn.scss +++ b/src/components/middle/MiddleColumn.scss @@ -286,6 +286,14 @@ background: linear-gradient(90deg, rgba(127, 127, 127, 0) 0%, rgba(127, 127, 127, 0.4) 2%, rgba(127, 127, 127, 0.4) 98%, rgba(127, 127, 127, 0) 100%); } } + + .join-subscribe-button { + margin-bottom: 0.5rem; + + @supports (padding-bottom: env(safe-area-inset-bottom)) { + margin-bottom: calc(0.5rem + env(safe-area-inset-bottom)); + } + } } /* Common styles for message list fade-out shadow */ diff --git a/src/components/middle/MiddleColumn.tsx b/src/components/middle/MiddleColumn.tsx index a6fe339a9..f45c7b212 100644 --- a/src/components/middle/MiddleColumn.tsx +++ b/src/components/middle/MiddleColumn.tsx @@ -29,15 +29,19 @@ import { import { DropAreaState } from './composer/DropArea'; import { selectChat, + selectChatBot, selectCurrentMessageList, selectCurrentTextSearch, selectIsChatBotNotStarted, selectIsInSelectMode, selectIsRightColumnShown, + selectIsUserBlocked, selectPinnedIds, selectTheme, } from '../../modules/selectors'; -import { getCanPostInChat, getMessageSendingRestrictionReason, isUserId } from '../../modules/helpers'; +import { + getCanPostInChat, getMessageSendingRestrictionReason, isChatChannel, isChatSuperGroup, isUserId, +} from '../../modules/helpers'; import captureEscKeyListener from '../../util/captureEscKeyListener'; import { pick } from '../../util/iteratees'; import buildClassName from '../../util/buildClassName'; @@ -90,11 +94,15 @@ type StateProps = { shouldSkipHistoryAnimations?: boolean; currentTransitionKey: number; messageLists?: GlobalMessageList[]; + isChannel?: boolean; + canSubscribe?: boolean; + canStartBot?: boolean; + canRestartBot?: boolean; }; type DispatchProps = Pick; const CLOSE_ANIMATION_DURATION = IS_SINGLE_COLUMN_LAYOUT ? 450 + ANIMATION_END_DELAY : undefined; @@ -129,6 +137,10 @@ const MiddleColumn: FC = ({ animationLevel, shouldSkipHistoryAnimations, currentTransitionKey, + isChannel, + canSubscribe, + canStartBot, + canRestartBot, openChat, unpinAllMessages, loadUser, @@ -136,6 +148,9 @@ const MiddleColumn: FC = ({ exitMessageSelectMode, closePaymentModal, clearReceipt, + joinChannel, + sendBotCommand, + restartBot, }) => { const { width: windowWidth } = useWindowSize(); @@ -163,6 +178,10 @@ const MiddleColumn: FC = ({ const renderingCanPost = usePrevDuringAnimation(canPost, CLOSE_ANIMATION_DURATION); const renderingHasTools = usePrevDuringAnimation(hasTools, CLOSE_ANIMATION_DURATION); const renderingIsFabShown = usePrevDuringAnimation(isFabShown, CLOSE_ANIMATION_DURATION); + const renderingIsChannel = usePrevDuringAnimation(isChannel, CLOSE_ANIMATION_DURATION); + const renderingCanSubscribe = usePrevDuringAnimation(canSubscribe, CLOSE_ANIMATION_DURATION); + const renderingCanStartBot = usePrevDuringAnimation(canStartBot, CLOSE_ANIMATION_DURATION); + const renderingCanRestartBot = usePrevDuringAnimation(canRestartBot, CLOSE_ANIMATION_DURATION); useEffect(() => { return chatId @@ -256,6 +275,18 @@ const MiddleColumn: FC = ({ openChat({ id: chatId }); }, [openChat, chatId]); + const handleSubscribeClick = useCallback(() => { + joinChannel({ chatId }); + }, [joinChannel, chatId]); + + const handleStartBot = useCallback(() => { + sendBotCommand({ command: '/start' }); + }, [sendBotCommand]); + + const handleRestartBot = useCallback(() => { + restartBot({ chatId }); + }, [chatId, restartBot]); + const customBackgroundValue = useCustomBackground(theme, customBackground); const className = buildClassName( @@ -303,6 +334,10 @@ const MiddleColumn: FC = ({ useHistoryBack(isSelectModeActive, exitMessageSelectMode); const isMessagingDisabled = Boolean(!isPinnedMessageList && !renderingCanPost && messageSendingRestrictionReason); + const withExtraShift = Boolean( + isMessagingDisabled || isSelectModeActive || isPinnedMessageList + || renderingCanSubscribe || renderingCanStartBot || renderingCanRestartBot, + ); return (
= ({
)} + {IS_SINGLE_COLUMN_LAYOUT && renderingCanSubscribe && ( + + )} + {IS_SINGLE_COLUMN_LAYOUT && renderingCanStartBot && ( + + )} + {IS_SINGLE_COLUMN_LAYOUT && renderingCanRestartBot && ( + + )} = ({ {IS_SINGLE_COLUMN_LAYOUT && } @@ -464,6 +529,7 @@ export default memo(withGlobal( const { chatId, threadId, type: messageListType } = currentMessageList; const chat = selectChat(global, chatId); + const bot = selectChatBot(global, chatId); const pinnedIds = selectPinnedIds(global, chatId); const { chatId: audioChatId, messageId: audioMessageId } = global.audioPlayer; @@ -471,6 +537,13 @@ export default memo(withGlobal( const isBotNotStarted = selectIsChatBotNotStarted(global, chatId); const isPinnedMessageList = messageListType === 'pinned'; const isScheduledMessageList = messageListType === 'scheduled'; + const isMainThread = messageListType === 'thread' && threadId === MAIN_THREAD_ID; + const isChannel = Boolean(chat && isChatChannel(chat)); + const canSubscribe = Boolean( + chat && isMainThread && (isChannel || isChatSuperGroup(chat)) && chat.isNotJoined, + ); + const canRestartBot = Boolean(bot && selectIsUserBlocked(global, bot.id)); + const canStartBot = !canRestartBot && isBotNotStarted; return { ...state, @@ -491,10 +564,14 @@ export default memo(withGlobal( pinnedMessagesCount: pinnedIds ? pinnedIds.length : 0, shouldSkipHistoryAnimations: global.shouldSkipHistoryAnimations, messageLists, + isChannel, + canSubscribe, + canStartBot, + canRestartBot, }; }, (setGlobal, actions): DispatchProps => pick(actions, [ 'openChat', 'unpinAllMessages', 'loadUser', 'closeLocalTextSearch', 'exitMessageSelectMode', - 'closePaymentModal', 'clearReceipt', + 'closePaymentModal', 'clearReceipt', 'joinChannel', 'sendBotCommand', 'restartBot', ]), )(MiddleColumn));