feat: add MediaBadge (#3103)

Author: MartinCupela

src/components/Badge/MediaBadge.tsx

@@ -0,0 +1,30 @@
+import { IconMicrophoneSolid, IconVideoFill } from '../Icons';
+import React, { type ComponentType } from 'react';
+import type { LocalAttachment } from 'stream-chat';
+import clsx from 'clsx';
+
+export type MediaBadgeVariant = 'video' | 'voice-recording' | string;
+
+export type MediaBadgeProps = {
+  attachment: LocalAttachment;
+  variant: 'video' | 'voice-recording' | string;
+};
+
+const MediaBadgeVariantToIcon: Record<MediaBadgeVariant, ComponentType> = {
+  video: IconVideoFill,
+  voiceRecording: IconMicrophoneSolid,
+};
+
+export const MediaBadge = ({ attachment, variant }: MediaBadgeProps) => {
+  const Icon = MediaBadgeVariantToIcon[variant];
+  return (
+    <div
+      className={clsx('str-chat__media-badge', {
+        [`str-chat__media-badge--${variant}`]: variant,
+      })}
+    >
+      {Icon && <Icon />}
+      {attachment.duration && <div>{attachment.duration}</div>}
+    </div>
+  );
+};

src/components/Badge/styling/MediaBadge.scss

@@ -0,0 +1,21 @@
+.str-chat__media-badge {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-xxs);
+  position: absolute;
+  bottom: var(--spacing-xs);
+  inset-inline-start: var(--spacing-xs);
+  padding: var(--spacing-xxs) var(--spacing-xs);
+  border-radius: var(--radius-max);
+  background: var(--badge-bg-inverse);
+  color: var(--badge-text-on-inverse);
+  font: var(--str-chat__numeric-md-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .str-chat__icon {
+    width: var(--icon-size-xs);
+    height: var(--icon-size-xs);
+    fill: currentColor;
+  }
+}

src/components/Badge/styling/index.scss

@@ -1 +1,2 @@
 @use 'Badge';
+@use 'MediaBadge';

src/components/Icons/icons.tsx

@@ -633,6 +633,14 @@ export const IconVoice = createIcon(
   />,
 );
 
+export const IconMicrophoneSolid = createIcon(
+  'IconMicrophoneSolid',
+  <path
+    d='M6.25 10V5C6.25 4.00544 6.64509 3.05161 7.34835 2.34835C8.05161 1.64509 9.00544 1.25 10 1.25C10.9946 1.25 11.9484 1.64509 12.6517 2.34835C13.3549 3.05161 13.75 4.00544 13.75 5V10C13.75 10.9946 13.3549 11.9484 12.6517 12.6517C11.9484 13.3549 10.9946 13.75 10 13.75C9.00544 13.75 8.05161 13.3549 7.34835 12.6517C6.64509 11.9484 6.25 10.9946 6.25 10ZM16.25 10C16.25 9.83424 16.1842 9.67527 16.0669 9.55806C15.9497 9.44085 15.7908 9.375 15.625 9.375C15.4592 9.375 15.3003 9.44085 15.1831 9.55806C15.0658 9.67527 15 9.83424 15 10C15 11.3261 14.4732 12.5979 13.5355 13.5355C12.5979 14.4732 11.3261 15 10 15C8.67392 15 7.40215 14.4732 6.46447 13.5355C5.52678 12.5979 5 11.3261 5 10C5 9.83424 4.93415 9.67527 4.81694 9.55806C4.69973 9.44085 4.54076 9.375 4.375 9.375C4.20924 9.375 4.05027 9.44085 3.93306 9.55806C3.81585 9.67527 3.75 9.83424 3.75 10C3.7519 11.5489 4.32806 13.042 5.36707 14.1907C6.40607 15.3393 7.83409 16.062 9.375 16.2188V18.75C9.375 18.9158 9.44085 19.0747 9.55806 19.1919C9.67527 19.3092 9.83424 19.375 10 19.375C10.1658 19.375 10.3247 19.3092 10.4419 19.1919C10.5592 19.0747 10.625 18.9158 10.625 18.75V16.2188C12.1659 16.062 13.5939 15.3393 14.6329 14.1907C15.6719 13.042 16.2481 11.5489 16.25 10Z'
+    fill='currentColor'
+  />,
+);
+
 export const IconMute = createIcon(
   'IconMute',
   <path

src/components/MessageComposer/AttachmentPreviewList/MediaAttachmentPreview.tsx

@@ -14,11 +14,12 @@ import React, {
   useState,
 } from 'react';
 import clsx from 'clsx';
-import { IconExclamationMark, IconRetry, IconVideoFill } from '../../Icons';
+import { IconExclamationMark, IconRetry } from '../../Icons';
 import { RemoveAttachmentPreviewButton } from '../RemoveAttachmentPreviewButton';
 import { Button } from '../../Button';
 import { UploadProgressIndicator } from '../../Loading/UploadProgressIndicator';
 import { AttachmentPreviewRoot } from './utils/AttachmentPreviewRoot';
+import { MediaBadge } from '../../Badge/MediaBadge';
 
 export type MediaAttachmentPreviewProps<CustomLocalMetadata = Record<string, unknown>> =
   UploadAttachmentPreviewProps<
@@ -99,10 +100,7 @@ export const MediaAttachmentPreview = ({
           {isVideoAttachment(attachment) &&
             !hasUploadError &&
             uploadState !== 'uploading' && (
-              <div className='str-chat__attachment-preview-media__video-indicator'>
-                <IconVideoFill />
-                {attachment.duration && <div>{attachment.duration}</div>}
-              </div>
+              <MediaBadge attachment={attachment} variant='video' />
             )}
 
           {hasFatalError && <IconExclamationMark />}

src/components/MessageComposer/styling/AttachmentPreview.scss

@@ -160,28 +160,6 @@
         object-fit: cover;
       }
     }
-
-    .str-chat__attachment-preview-media__video-indicator {
-      display: flex;
-      align-items: center;
-      gap: var(--spacing-xxs);
-      position: absolute;
-      bottom: var(--spacing-xs);
-      inset-inline-start: var(--spacing-xs);
-      padding: var(--spacing-xxs) var(--spacing-xs);
-      border-radius: var(--radius-max);
-      background: var(--badge-bg-inverse);
-      color: var(--badge-text-on-inverse);
-      font: var(--str-chat__numeric-md-text);
-      overflow: hidden;
-      text-overflow: ellipsis;
-
-      .str-chat__icon {
-        width: var(--icon-size-xs);
-        height: var(--icon-size-xs);
-        fill: currentColor;
-      }
-    }
   }
 
   .str-chat__attachment-preview-media__overlay {

src/components/VideoPlayer/styling/VideoThumbnail.scss

@@ -20,7 +20,7 @@
       height: $size;
       width: $size;
       border-radius: var(--radius-max);
-      background-color: var(--control-play-control-bg);
+      background-color: var(--control-play-button-bg);
       left: calc(50% - calc($size / 2));
       top: calc(50% - calc($size / 2));
 
@@ -29,7 +29,7 @@
         width: calc($size / 2);
 
         path {
-          fill: var(--control-play-control-icon);
+          fill: var(--control-play-button-icon);
         }
       }
     }

src/styling/variables-tokens.css

@@ -568,6 +568,8 @@
   --badge-text: var(--text-primary);
   --badge-bg-default: #ffffff;
   --badge-text-on-accent: #ffffff;
+  --badge-text-on-inverse: #ffffff;
+  --badge-bg-inverse: var(--chrome-1000);
 
   /* ─── Control (remove, progress bar, toggle, playback, checkbox, play button, thumb, radio) ─── */
   --control-remove-control-bg: #1a1b25;