Fixed playback-speed button bug and updated layout

stylesheets/_variables.scss

@@ -29,6 +29,7 @@ $color-gray-95: #121212;
 $color-black: #000000;
 
 $color-white-alpha-06: rgba($color-white, 0.06);
+$color-white-alpha-08: rgba($color-white, 0.08);
 $color-white-alpha-12: rgba($color-white, 0.12);
 $color-white-alpha-20: rgba($color-white, 0.2);
 $color-white-alpha-40: rgba($color-white, 0.4);

stylesheets/components/MessageAudio.scss

@@ -46,20 +46,80 @@ $audio-attachment-button-margin-small: 4px;
 .module-message__audio-attachment__controls {
   display: flex;
   flex: 1;
-  justify-content: right;
+  margin-right: 4px;
-  padding: 0 4px;
+}
+
+.module-message__audio-attachment__dot {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  transition: width 100ms ease-out;
+
+  &:before {
+    content: '';
+    display: block;
+    width: 6px;
+    height: 6px;
+    border-radius: 100%;
+    transition: background 100ms ease-out;
+  }
+
+  &--unplayed {
+    width: 14px;
+  }
+  &--played {
+    width: 0px;
+  }
+  .module-message__audio-attachment--incoming & {
+    &--unplayed:before {
+      @include light-theme {
+        background: $color-gray-60;
+      }
+      @include dark-theme {
+        background: $color-gray-25;
+      }
+    }
+  }
+  .module-message__audio-attachment--outgoing & {
+    &--unplayed:before {
+      background: $color-white-alpha-80;
+    }
+  }
+  &--played:before {
+    background: transparent;
+  }
 }
 
 .module-message__audio-attachment__playback-rate-button {
   @include button-reset;
   @include font-body-2-bold;
 
+  width: 38px;
+  height: 18px;
+  text-align: center;
+  font-weight: 700;
   border-radius: 4px;
-  font-size: 12px; /* tiny override */
+  font-size: 11px;
-  padding: 1px 7px;
+  padding: 1px 2px;
-  margin: -1px 4px;
+  margin: -2px 0;
-  background: $color-white-alpha-20;
   line-height: 16px;
+  letter-spacing: 0.05px;
+  user-select: none;
+
+  .module-message__audio-attachment--incoming & {
+    @include light-theme {
+      color: $color-gray-60;
+      background: $color-black-alpha-08;
+    }
+    @include dark-theme {
+      color: $color-gray-25;
+      background: $color-white-alpha-08;
+    }
+  }
+  .module-message__audio-attachment--outgoing & {
+    color: $color-white-alpha-80;
+    background: $color-white-alpha-20;
+  }
 }
 
 .module-message__audio-attachment__button,
@@ -197,8 +257,6 @@ $audio-attachment-button-margin-small: 4px;
   flex-direction: row;
   justify-content: space-between;
   align-items: center;
-  margin-left: $audio-attachment-button-size +
-    $audio-attachment-button-margin-big;
 
   @media (min-width: 0px) and (max-width: 799px) {
     margin-left: $audio-attachment-button-size +
@@ -208,24 +266,11 @@ $audio-attachment-button-margin-small: 4px;
 
 .module-message__audio-attachment__countdown {
   @include font-caption;
-  align-items: center;
+  width: $audio-attachment-button-size;
-  display: flex;
-  flex-shrink: 1;
   user-select: none;
-
+  text-align: center;
-  &:after {
+  white-space: nowrap;
-    content: '';
+  margin-right: 12px;
-    display: block;
-    width: 6px;
-    height: 6px;
-    margin-left: 6px;
-    border-radius: 100%;
-    transition: background 100ms ease-out;
-  }
-
-  &--played:after {
-    background: transparent;
-  }
 
   .module-message__audio-attachment--incoming & {
     @include light-theme {

ts/components/conversation/MessageAudio.tsx

@@ -633,39 +633,46 @@ export const MessageAudio: React.FC<Props> = (props: Props) => {
       >
         {timeToText(countDown)}
       </div>
+
+      <div className={`${CSS_BASE}__controls`}>
+        <div
+          aria-hidden="true"
+          className={classNames(
+            `${CSS_BASE}__dot`,
+            `${CSS_BASE}__dot--${played ? 'played' : 'unplayed'}`
+          )}
+        />
+        {isPlaying && (
+          <button
+            type="button"
+            className={classNames(`${CSS_BASE}__playback-rate-button`)}
+            onClick={ev => {
+              ev.stopPropagation();
+              setPlaybackRate(nextPlaybackRate(playbackRate));
+            }}
+            tabIndex={0}
+          >
+            {playbackRateLabels[playbackRate]}
+          </button>
+        )}
+      </div>
+
       {!withContentBelow && !collapseMetadata && (
-        <>
+        <MessageMetadata
-          <div className={`${CSS_BASE}__controls`}>
+          direction={direction}
-            {isPlaying && (
+          expirationLength={expirationLength}
-              <button
+          expirationTimestamp={expirationTimestamp}
-                type="button"
+          hasText={withContentBelow}
-                className={classNames(`${CSS_BASE}__playback-rate-button`)}
+          i18n={i18n}
-                onClick={ev => {
+          id={id}
-                  ev.stopPropagation();
+          isShowingImage={false}
-                  setPlaybackRate(nextPlaybackRate(playbackRate));
+          isSticker={false}
-                }}
+          isTapToViewExpired={false}
-                tabIndex={0}
+          showMessageDetail={showMessageDetail}
-              >
+          status={status}
-                {playbackRateLabels[playbackRate]}
+          textPending={textPending}
-              </button>
+          timestamp={timestamp}
-            )}
+        />
-          </div>
-          <MessageMetadata
-            direction={direction}
-            expirationLength={expirationLength}
-            expirationTimestamp={expirationTimestamp}
-            hasText={withContentBelow}
-            i18n={i18n}
-            id={id}
-            isShowingImage={false}
-            isSticker={false}
-            isTapToViewExpired={false}
-            showMessageDetail={showMessageDetail}
-            status={status}
-            textPending={textPending}
-            timestamp={timestamp}
-          />
-        </>
       )}
     </div>
   );