Round Video: Fix sound on deletion (#5730)

src/@types/global.d.ts

@@ -22,6 +22,7 @@ declare namespace React {
 
   interface VideoHTMLAttributes {
     srcObject?: MediaStream;
+    defaultMuted?: boolean;
   }
 
   interface MouseEvent {

src/components/common/Audio.scss

@@ -178,23 +178,19 @@
     color: var(--color-text-secondary);
     font-variant-numeric: tabular-nums;
     display: flex;
-    align-items: flex-end;
+    align-items: center;
 
     &.unread::after {
-      content: "•";
+      content: "";
-      font-size: 2rem;
+      display: inline-block;
-      line-height: 1.3125rem;
+      width: 0.5rem;
-      color: var(--accent-color);
+      height: 0.5rem;
+      background-color: var(--accent-color);
+      border-radius: 50%;
       margin-inline-start: 0.125rem;
     }
   }
 
-  body.is-ios & {
-    .voice-duration.unread::after {
-      margin-bottom: 0.4375rem;
-    }
-  }
-
   &:not(.own) .voice-duration span {
     color: var(--color-primary);
   }

src/components/middle/message/RoundVideo.scss

@@ -96,8 +96,12 @@
   }
 
   .unread::after {
-    content: "•";
+    content: "";
-    font-size: 2rem;
+    display: inline-block;
+    width: 0.5rem;
+    height: 0.5rem;
+    background-color: currentColor;
+    border-radius: 50%;
     margin-inline-start: 0.125rem;
   }
 }

src/components/middle/message/RoundVideo.tsx

@@ -287,6 +287,7 @@ const RoundVideo: FC<OwnProps> = ({
             autoPlay={!shouldRenderSpoiler}
             disablePictureInPicture
             muted={!isActivated}
+            defaultMuted
             loop={!isActivated}
             playsInline
             isPriority

src/components/middle/message/Video.tsx

@@ -252,6 +252,7 @@ const Video = <T,>({
           src={fullMediaData}
           className={buildClassName('full-media', withBlurredBackground && 'with-blurred-bg')}
           canPlay={isPlayAllowed && isIntersectingForPlaying && !isUnsupported}
+          defaultMuted
           muted
           loop
           playsInline