Middle Header: Fix missing pinned message when playing audio (#1534)

src/components/middle/AudioPlayer.scss

@@ -20,10 +20,6 @@
     --color-white: var(--color-background-own);
   }
 
-  .MiddleHeader & + .HeaderActions {
-    margin-left: 1.5rem;
-  }
-
   .player-button {
     &.smaller {
       width: 3rem;
@@ -76,7 +72,7 @@
 
     &:hover .volume-slider-spacer, .volume-slider-spacer:hover {
       visibility: visible;
-    } 
+    }
 
     .volume-slider {
       opacity: 0;
@@ -101,8 +97,8 @@
       }
     }
 
-    &:hover .volume-slider, 
+    &:hover .volume-slider,
-    .volume-slider:hover, 
+    .volume-slider:hover,
     .volume-slider-spacer:hover + .volume-slider {
       opacity: 1;
       visibility: visible;

src/components/middle/MiddleHeader.scss

@@ -8,7 +8,7 @@
     left: 0;
     right: 0;
     height: 2.875rem;
-    box-shadow: 0 2px 2px var(--color-light-shadow);
+    box-shadow: 0 .125rem .125rem var(--color-light-shadow);
 
     display: flex;
     flex-direction: row-reverse;
@@ -39,10 +39,9 @@
   }
 
   .AudioPlayer {
-    height: 3.25rem;
-
     flex-direction: row;
-    padding: 0.375rem 0.5rem;
+    margin-top: 0;
+    padding: 0.25rem 0.5rem;
 
     &-content {
       padding: 0 0.5rem;
@@ -50,7 +49,7 @@
     }
 
     > .Button {
-      margin: 0;
+      margin: -.0625rem 0 0;
     }
 
     > .player-close {
@@ -72,6 +71,10 @@
       max-width: none;
     }
   }
+
+  .HeaderPinnedMessage-wrapper.full-width {
+    display: none;
+  }
 }
 
 .MiddleHeader {
@@ -150,6 +153,10 @@
     overflow: hidden;
   }
 
+  body.animation-level-0 & .HeaderPinnedMessage-wrapper {
+    transition: none !important;
+  }
+
   .header-tools {
     display: flex;
     align-items: center;
@@ -159,7 +166,6 @@
 
     body.animation-level-0 & {
       &,
-      .HeaderPinnedMessage-wrapper,
       .AudioPlayer,
       .HeaderActions {
         transition: none !important;
@@ -193,39 +199,32 @@
   }
 
   @media (min-width: 1276px) and (max-width: 1439px) {
-    &:not(.tools-stacked) .header-tools {
+    &:not(.tools-stacked) .HeaderPinnedMessage-wrapper,
-      .HeaderPinnedMessage-wrapper,
+    &:not(.tools-stacked) .AudioPlayer {
-      .AudioPlayer {
+      opacity: 1;
-        opacity: 1;
 
-        #Main.right-column-open & {
+      #Main.right-column-open & {
-          opacity: 0;
+        opacity: 0;
-        }
       }
     }
   }
 
-  &.tools-stacked .header-tools {
+  &.tools-stacked .AudioPlayer {
     @include mobile-header-styles();
 
     @media (min-width: 1150px) {
       #Main.right-column-open & {
-        .HeaderPinnedMessage-wrapper,
+        padding-right: calc(0.5rem + var(--right-column-width));
-        .AudioPlayer {
-          padding-right: calc(0.5rem + var(--right-column-width));
-        }
       }
     }
   }
 
-  &.tools-stacked.animated .header-tools {
+  &.tools-stacked.animated .HeaderPinnedMessage-wrapper,
-    .HeaderPinnedMessage-wrapper,
+  &.tools-stacked.animated .AudioPlayer {
-    .AudioPlayer {
+    animation: fade-in var(--layer-transition) forwards;
-      animation: fade-in var(--layer-transition) forwards;
 
-      body.animation-level-0 & {
+    body.animation-level-0 & {
-        animation: none;
+      animation: none;
-      }
     }
   }
 
@@ -329,6 +328,7 @@
     margin-left: auto;
     cursor: default;
     flex-direction: row-reverse;
+    background: var(--color-background);
 
     body.animation-level-1 & {
       .ripple-container {
@@ -336,6 +336,16 @@
       }
     }
 
+    @media (min-width: 1276px) {
+      transform: translate3d(0, 0, 0);
+      transition: transform var(--layer-transition);
+
+      #Main.right-column-open & {
+        transform: translate3d(calc(var(--right-column-width) * -1), 0, 0);
+      }
+    }
+
+
     .HeaderPinnedMessage {
       min-width: 16rem;
     }
@@ -343,6 +353,48 @@
     > .Button {
       flex-shrink: 0;
     }
+
+    &.full-width {
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 100%;
+      background: var(--color-background);
+      padding: .25rem .8125rem .25rem 1rem;
+      box-shadow: 0 .125rem .125rem var(--color-light-shadow);
+      transform: translate3d(0, 0, 0);
+      transition: transform var(--layer-transition);
+
+      &::before {
+        content: "";
+        display: block;
+        position: absolute;
+        top: -.1875rem;
+        left: 0;
+        right: 0;
+        height: .125rem;
+        box-shadow: 0 .125rem .125rem var(--color-light-shadow);
+      }
+
+      .HeaderPinnedMessage {
+        margin-top: 0;
+        margin-bottom: 0;
+        flex: 1;
+
+        .message-text {
+          max-width: none;
+        }
+      }
+
+      @media (min-width: 1276px) {
+        transform: translate3d(0, 0, 0);
+        transition: transform var(--layer-transition);
+
+        #Main.right-column-open & {
+            padding-left: calc(var(--right-column-width) + 1rem);
+        }
+      }
+    }
   }
 
   .HeaderPinnedMessage {
@@ -483,13 +535,6 @@
   @media (max-width: 600px) {
     @include mobile-header-styles();
   }
-
-  @media (min-width: 925px) and (max-width: 1149.9px) {
-    .HeaderPinnedMessage-wrapper,
-    .AudioPlayer {
-      position: absolute;
-    }
-  }
 }
 
 @keyframes fade-in {

src/components/middle/MiddleHeader.tsx

@@ -261,7 +261,7 @@ const MiddleHeader: FC<OwnProps & StateProps & DispatchProps> = ({
   const {
     shouldRender: shouldRenderPinnedMessage,
     transitionClassNames: pinnedMessageClassNames,
-  } = useShowTransition(pinnedMessage && !shouldRenderAudioPlayer);
+  } = useShowTransition(Boolean(pinnedMessage));
 
   const renderingPinnedMessage = useCurrentOrPrev(pinnedMessage, true);
   const renderingPinnedMessagesCount = useCurrentOrPrev(pinnedMessagesCount, true);
@@ -380,7 +380,7 @@ const MiddleHeader: FC<OwnProps & StateProps & DispatchProps> = ({
           size="smaller"
           color="translucent"
           onClick={handleBackClick}
-          ariaLabel={asClose ? 'Close' : 'Back'}
+          ariaLabel={lang(asClose ? 'Close' : 'Back')}
         >
           <div className={buildClassName('animated-close-icon', !asClose && 'state-back')} />
         </Button>
@@ -393,6 +393,8 @@ const MiddleHeader: FC<OwnProps & StateProps & DispatchProps> = ({
     );
   }
 
+  const isAudioPlayerRendered = Boolean(shouldRenderAudioPlayer && renderingAudioMessage);
+
   return (
     <div className="MiddleHeader" ref={componentRef}>
       <Transition
@@ -402,23 +404,23 @@ const MiddleHeader: FC<OwnProps & StateProps & DispatchProps> = ({
         {renderInfo}
       </Transition>
 
+      {shouldRenderPinnedMessage && renderingPinnedMessage && (
+        <HeaderPinnedMessage
+          key={chatId}
+          message={renderingPinnedMessage}
+          count={renderingPinnedMessagesCount || 0}
+          index={pinnedMessageIndex}
+          customTitle={renderingPinnedMessageTitle}
+          className={buildClassName(pinnedMessageClassNames, isAudioPlayerRendered && 'full-width')}
+          onUnpinMessage={renderingCanUnpin ? handleUnpinMessage : undefined}
+          onClick={handlePinnedMessageClick}
+          onAllPinnedClick={handleAllPinnedClick}
+        />
+      )}
       <div className="header-tools">
-        {shouldRenderPinnedMessage && renderingPinnedMessage && !shouldRenderAudioPlayer && (
+        {isAudioPlayerRendered && (
-          <HeaderPinnedMessage
-            key={chatId}
-            message={renderingPinnedMessage}
-            count={renderingPinnedMessagesCount || 0}
-            index={pinnedMessageIndex}
-            customTitle={renderingPinnedMessageTitle}
-            className={pinnedMessageClassNames}
-            onUnpinMessage={renderingCanUnpin ? handleUnpinMessage : undefined}
-            onClick={handlePinnedMessageClick}
-            onAllPinnedClick={handleAllPinnedClick}
-          />
-        )}
-        {shouldRenderAudioPlayer && renderingAudioMessage && (
           <AudioPlayer
-            key={getMessageKey(renderingAudioMessage)}
+            key={getMessageKey(renderingAudioMessage!)}
             message={renderingAudioMessage!}
             className={audioPlayerClassNames}
           />