From 9319a260bb6419880c9370c0f2cb43011e1f5d4a Mon Sep 17 00:00:00 2001
From: Alexander Zinchuk <alx.zinchuk@gmail.com>
Date: Wed, 10 Nov 2021 23:13:22 +0300
Subject: [PATCH] Middle Header: Hide big buttons when playing audio (#1541)

---
 src/components/middle/HeaderActions.tsx       | 11 +++++++----
 src/components/middle/HeaderMenuContainer.tsx | 10 ++++++----
 src/components/middle/MiddleHeader.tsx        |  1 +
 3 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/src/components/middle/HeaderActions.tsx b/src/components/middle/HeaderActions.tsx
index 8f1fea7d0..7c9812855 100644
--- a/src/components/middle/HeaderActions.tsx
+++ b/src/components/middle/HeaderActions.tsx
@@ -32,6 +32,7 @@ interface OwnProps {
   chatId: string;
   threadId: number;
   messageListType: MessageListType;
+  canExpandActions: boolean;
 }
 
 interface StateProps {
@@ -63,6 +64,7 @@ const HeaderActions: FC<OwnProps & StateProps & DispatchProps> = ({
   canMute,
   canLeave,
   isRightColumnShown,
+  canExpandActions,
   joinChannel,
   sendBotCommand,
   openLocalTextSearch,
@@ -120,17 +122,17 @@ const HeaderActions: FC<OwnProps & StateProps & DispatchProps> = ({
 
   return (
     <div className="HeaderActions">
-      {!IS_SINGLE_COLUMN_LAYOUT && canSubscribe && (
+      {!IS_SINGLE_COLUMN_LAYOUT && canExpandActions && canSubscribe && (
         <Button
           size="tiny"
           ripple
           fluid
           onClick={handleSubscribeClick}
         >
-          {lang(isChannel ? 'Subscribe' : 'Join Group')}
+          {lang(isChannel ? 'ProfileJoinChannel' : 'ProfileJoinGroup')}
         </Button>
       )}
-      {!IS_SINGLE_COLUMN_LAYOUT && canStartBot && (
+      {!IS_SINGLE_COLUMN_LAYOUT && canExpandActions && canStartBot && (
         <Button
           size="tiny"
           ripple
@@ -140,7 +142,7 @@ const HeaderActions: FC<OwnProps & StateProps & DispatchProps> = ({
           {lang('BotStart')}
         </Button>
       )}
-      {!IS_SINGLE_COLUMN_LAYOUT && canRestartBot && (
+      {!IS_SINGLE_COLUMN_LAYOUT && canExpandActions && canRestartBot && (
         <Button
           size="tiny"
           ripple
@@ -181,6 +183,7 @@ const HeaderActions: FC<OwnProps & StateProps & DispatchProps> = ({
           threadId={threadId}
           isOpen={isMenuOpen}
           anchor={menuPosition}
+          withExtraActions={IS_SINGLE_COLUMN_LAYOUT || !canExpandActions}
           isChannel={isChannel}
           canStartBot={canStartBot}
           canRestartBot={canRestartBot}
diff --git a/src/components/middle/HeaderMenuContainer.tsx b/src/components/middle/HeaderMenuContainer.tsx
index 3b9303868..84d6c812e 100644
--- a/src/components/middle/HeaderMenuContainer.tsx
+++ b/src/components/middle/HeaderMenuContainer.tsx
@@ -34,6 +34,7 @@ export type OwnProps = {
   chatId: string;
   threadId: number;
   isOpen: boolean;
+  withExtraActions: boolean;
   anchor: IAnchorPosition;
   isChannel?: boolean;
   canStartBot?: boolean;
@@ -60,6 +61,7 @@ type StateProps = {
 const HeaderMenuContainer: FC<OwnProps & StateProps & DispatchProps> = ({
   chatId,
   isOpen,
+  withExtraActions,
   anchor,
   isChannel,
   canStartBot,
@@ -161,7 +163,7 @@ const HeaderMenuContainer: FC<OwnProps & StateProps & DispatchProps> = ({
           style={`left: ${x}px;top: ${y}px;`}
           onClose={closeMenu}
         >
-          {IS_SINGLE_COLUMN_LAYOUT && canStartBot && (
+          {withExtraActions && canStartBot && (
             <MenuItem
               icon="bots"
               onClick={handleStartBot}
@@ -169,7 +171,7 @@ const HeaderMenuContainer: FC<OwnProps & StateProps & DispatchProps> = ({
               {lang('BotStart')}
             </MenuItem>
           )}
-          {IS_SINGLE_COLUMN_LAYOUT && canRestartBot && (
+          {withExtraActions && canRestartBot && (
             <MenuItem
               icon="bots"
               onClick={handleRestartBot}
@@ -177,12 +179,12 @@ const HeaderMenuContainer: FC<OwnProps & StateProps & DispatchProps> = ({
               {lang('BotRestart')}
             </MenuItem>
           )}
-          {IS_SINGLE_COLUMN_LAYOUT && canSubscribe && (
+          {withExtraActions && canSubscribe && (
             <MenuItem
               icon={isChannel ? 'channel' : 'group'}
               onClick={handleSubscribe}
             >
-              {lang(isChannel ? 'Subscribe' : 'Join Group')}
+              {lang(isChannel ? 'ProfileJoinChannel' : 'ProfileJoinGroup')}
             </MenuItem>
           )}
           {canAddContact && (
diff --git a/src/components/middle/MiddleHeader.tsx b/src/components/middle/MiddleHeader.tsx
index 1c08033f9..8842f412f 100644
--- a/src/components/middle/MiddleHeader.tsx
+++ b/src/components/middle/MiddleHeader.tsx
@@ -429,6 +429,7 @@ const MiddleHeader: FC<OwnProps & StateProps & DispatchProps> = ({
           chatId={chatId}
           threadId={threadId}
           messageListType={messageListType}
+          canExpandActions={!isAudioPlayerRendered}
         />
       </div>
     </div>