feat(attachments): Add webm visualization support (#93207)

feat(attachments): Add webm visualization support

Author: priscilawebdev

static/app/components/events/attachmentViewers/previewAttachmentTypes.tsx

@@ -2,6 +2,7 @@ import ImageViewer from 'sentry/components/events/attachmentViewers/imageViewer'
 import JsonViewer from 'sentry/components/events/attachmentViewers/jsonViewer';
 import LogFileViewer from 'sentry/components/events/attachmentViewers/logFileViewer';
 import RRWebJsonViewer from 'sentry/components/events/attachmentViewers/rrwebJsonViewer';
+import {WebMViewer} from 'sentry/components/events/attachmentViewers/webmViewer';
 import type {IssueAttachment} from 'sentry/types/group';
 
 export const getInlineAttachmentRenderer = (
@@ -26,6 +27,8 @@ export const getInlineAttachmentRenderer = (
     case 'image/png':
     case 'image/gif':
       return ImageViewer;
+    case 'video/webm':
+      return WebMViewer;
     default:
       return undefined;
   }

static/app/components/events/attachmentViewers/webmViewer.tsx

@@ -0,0 +1,25 @@
+import {css} from '@emotion/react';
+
+import type {ViewerProps} from 'sentry/components/events/attachmentViewers/utils';
+import {getAttachmentUrl} from 'sentry/components/events/attachmentViewers/utils';
+import PanelItem from 'sentry/components/panels/panelItem';
+import {t} from 'sentry/locale';
+
+interface WebMViewerProps
+  extends Pick<ViewerProps, 'attachment' | 'eventId' | 'orgSlug' | 'projectSlug'> {}
+
+export function WebMViewer(props: WebMViewerProps) {
+  return (
+    <PanelItem>
+      <video
+        controls
+        css={css`
+          max-width: 100%;
+        `}
+      >
+        <source src={getAttachmentUrl(props, true)} type="video/webm" />
+        {t('Your browser does not support the video tag.')}
+      </video>
+    </PanelItem>
+  );
+}