From 832bfcd05232ce32e38306cb9f6c0e6845b067a5 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Tue, 10 Jun 2025 10:04:28 +0200
Subject: [PATCH 1/4] feat(attachments): Add webm visualiation support

---
 .../previewAttachmentTypes.tsx                |  3 +++
 .../events/attachmentViewers/webmViewer.tsx   | 25 +++++++++++++++++++
 2 files changed, 28 insertions(+)
 create mode 100644 static/app/components/events/attachmentViewers/webmViewer.tsx

diff --git a/static/app/components/events/attachmentViewers/previewAttachmentTypes.tsx b/static/app/components/events/attachmentViewers/previewAttachmentTypes.tsx
index b271a675116aed..9f84b1c3352249 100644
--- a/static/app/components/events/attachmentViewers/previewAttachmentTypes.tsx
+++ b/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;
   }
diff --git a/static/app/components/events/attachmentViewers/webmViewer.tsx b/static/app/components/events/attachmentViewers/webmViewer.tsx
new file mode 100644
index 00000000000000..74ca07a6b05073
--- /dev/null
+++ b/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>
+  );
+}

From 875fad393a4c0e0995cef62a5747335995773d11 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Tue, 10 Jun 2025 11:58:01 +0200
Subject: [PATCH 2/4] feat(screenshots): Update logic to render all files if
 name contains screenshot

---
 .../previewAttachmentTypes.tsx                |  7 ++-
 .../events/attachmentViewers/webmViewer.tsx   | 11 ++--
 .../events/eventTagsAndScreenshot/index.tsx   |  7 +--
 .../screenshot/index.tsx                      | 52 ++++++++++++-------
 .../screenshot/modal.tsx                      | 30 ++++++-----
 .../screenshot/screenshotDataSection.tsx      | 11 +---
 6 files changed, 68 insertions(+), 50 deletions(-)

diff --git a/static/app/components/events/attachmentViewers/previewAttachmentTypes.tsx b/static/app/components/events/attachmentViewers/previewAttachmentTypes.tsx
index 9f84b1c3352249..08782e1336bd76 100644
--- a/static/app/components/events/attachmentViewers/previewAttachmentTypes.tsx
+++ b/static/app/components/events/attachmentViewers/previewAttachmentTypes.tsx
@@ -7,7 +7,12 @@ import type {IssueAttachment} from 'sentry/types/group';
 
 export const getInlineAttachmentRenderer = (
   attachment: IssueAttachment
-): typeof ImageViewer | typeof LogFileViewer | typeof RRWebJsonViewer | undefined => {
+):
+  | typeof ImageViewer
+  | typeof LogFileViewer
+  | typeof RRWebJsonViewer
+  | typeof WebMViewer
+  | undefined => {
   switch (attachment.mimetype) {
     case 'text/css':
     case 'text/csv':
diff --git a/static/app/components/events/attachmentViewers/webmViewer.tsx b/static/app/components/events/attachmentViewers/webmViewer.tsx
index 74ca07a6b05073..511b19e0132d56 100644
--- a/static/app/components/events/attachmentViewers/webmViewer.tsx
+++ b/static/app/components/events/attachmentViewers/webmViewer.tsx
@@ -6,14 +6,19 @@ import PanelItem from 'sentry/components/panels/panelItem';
 import {t} from 'sentry/locale';
 
 interface WebMViewerProps
-  extends Pick<ViewerProps, 'attachment' | 'eventId' | 'orgSlug' | 'projectSlug'> {}
+  extends Pick<ViewerProps, 'attachment' | 'eventId' | 'orgSlug' | 'projectSlug'>,
+    Partial<Pick<HTMLVideoElement, 'controls'>> {
+  onCanPlay?: React.ReactEventHandler<HTMLVideoElement>;
+}
 
-export function WebMViewer(props: WebMViewerProps) {
+export function WebMViewer({controls = true, onCanPlay, ...props}: WebMViewerProps) {
   return (
     <PanelItem>
       <video
-        controls
+        onCanPlay={onCanPlay}
+        controls={controls}
         css={css`
+          width: 100%;
           max-width: 100%;
         `}
       >
diff --git a/static/app/components/events/eventTagsAndScreenshot/index.tsx b/static/app/components/events/eventTagsAndScreenshot/index.tsx
index 4c83754eb8f3b3..984df72ab2fcd9 100644
--- a/static/app/components/events/eventTagsAndScreenshot/index.tsx
+++ b/static/app/components/events/eventTagsAndScreenshot/index.tsx
@@ -22,11 +22,8 @@ export function EventTagsAndScreenshot({projectSlug, event, isShare = false}: Pr
     },
     {enabled: !isShare}
   );
-  const screenshots =
-    attachments?.filter(
-      ({name}) =>
-        name.includes('screenshot') && (name.endsWith('.jpg') || name.endsWith('.png'))
-    ) ?? [];
+
+  const screenshots = attachments?.filter(({name}) => name.includes('screenshot')) ?? [];
 
   if (!tags.length && (isShare || !screenshots.length)) {
     return null;
diff --git a/static/app/components/events/eventTagsAndScreenshot/screenshot/index.tsx b/static/app/components/events/eventTagsAndScreenshot/screenshot/index.tsx
index f1c3133f97d0d6..86c6792f7687e8 100644
--- a/static/app/components/events/eventTagsAndScreenshot/screenshot/index.tsx
+++ b/static/app/components/events/eventTagsAndScreenshot/screenshot/index.tsx
@@ -8,6 +8,7 @@ import {openConfirmModal} from 'sentry/components/confirm';
 import {Button} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import {DropdownMenu} from 'sentry/components/dropdownMenu';
+import {getInlineAttachmentRenderer} from 'sentry/components/events/attachmentViewers/previewAttachmentTypes';
 import LoadingIndicator from 'sentry/components/loadingIndicator';
 import Panel from 'sentry/components/panels/panel';
 import PanelBody from 'sentry/components/panels/panelBody';
@@ -22,8 +23,6 @@ import type {Organization} from 'sentry/types/organization';
 import type {Project} from 'sentry/types/project';
 import {trackAnalytics} from 'sentry/utils/analytics';
 
-import ImageVisualization from './imageVisualization';
-
 type Props = {
   eventId: Event['id'];
   onDelete: (attachmentId: EventAttachment['id']) => void;
@@ -38,6 +37,14 @@ type Props = {
   onlyRenderScreenshot?: boolean;
 };
 
+const loadingMimeTypes = [
+  'image/jpeg',
+  'image/png',
+  'image/gif',
+  'image/webp',
+  'video/webm',
+];
+
 function Screenshot({
   eventId,
   organization,
@@ -51,8 +58,9 @@ function Screenshot({
   onDelete,
   openVisualizationModal,
 }: Props) {
-  const orgSlug = organization.slug;
-  const [loadingImage, setLoadingImage] = useState(true);
+  const [loadingImage, setLoadingImage] = useState(
+    loadingMimeTypes.includes(screenshot.mimetype)
+  );
   const {hasRole} = useRole({role: 'attachmentsRole'});
 
   function handleDelete(screenshotAttachmentId: string) {
@@ -62,8 +70,14 @@ function Screenshot({
     onDelete(screenshotAttachmentId);
   }
 
+  if (!hasRole) {
+    return null;
+  }
+
   function renderContent(screenshotAttachment: EventAttachment) {
-    const downloadUrl = `/api/0/projects/${organization.slug}/${projectSlug}/events/${eventId}/attachments/${screenshotAttachment.id}/`;
+    const AttachmentComponent = getInlineAttachmentRenderer(screenshotAttachment)!;
+
+    const downloadUrl = `/api/0/projects/${organization.slug}/${projectSlug}/events/${eventId}/attachments/${screenshot.id}/`;
 
     return (
       <Fragment>
@@ -95,20 +109,22 @@ function Screenshot({
               <LoadingIndicator mini />
             </StyledLoadingIndicator>
           )}
-          <StyledImageWrapper
+          <AttachmentComponentWrapper
             onClick={() =>
-              openVisualizationModal(screenshotAttachment, `${downloadUrl}?download=1`)
+              openVisualizationModal(screenshot, `${downloadUrl}?download=1`)
             }
           >
-            <StyledImageVisualization
-              attachment={screenshotAttachment}
-              orgSlug={orgSlug}
+            <AttachmentComponent
+              orgSlug={organization.slug}
               projectSlug={projectSlug}
               eventId={eventId}
+              attachment={screenshot}
               onLoad={() => setLoadingImage(false)}
               onError={() => setLoadingImage(false)}
+              controls={false}
+              onCanPlay={() => setLoadingImage(false)}
             />
-          </StyledImageWrapper>
+          </AttachmentComponentWrapper>
         </StyledPanelBody>
         {!onlyRenderScreenshot && (
           <StyledPanelFooter>
@@ -240,14 +256,14 @@ const StyledLoadingIndicator = styled('div')`
   height: 100%;
 `;
 
-const StyledImageWrapper = styled('div')`
+const AttachmentComponentWrapper = styled('div')`
   :hover {
     cursor: pointer;
   }
-`;
-
-const StyledImageVisualization = styled(ImageVisualization)`
-  width: 100%;
-  z-index: 1;
-  border: 0;
+  && > * {
+    width: 100%;
+    z-index: 1;
+    border: 0;
+    padding: 0;
+  }
 `;
diff --git a/static/app/components/events/eventTagsAndScreenshot/screenshot/modal.tsx b/static/app/components/events/eventTagsAndScreenshot/screenshot/modal.tsx
index fe0e3d3132d2ff..6a4c5a67eb3989 100644
--- a/static/app/components/events/eventTagsAndScreenshot/screenshot/modal.tsx
+++ b/static/app/components/events/eventTagsAndScreenshot/screenshot/modal.tsx
@@ -10,6 +10,7 @@ import {Button} from 'sentry/components/core/button';
 import {ButtonBar} from 'sentry/components/core/button/buttonBar';
 import {LinkButton} from 'sentry/components/core/button/linkButton';
 import {DateTime} from 'sentry/components/dateTime';
+import {getInlineAttachmentRenderer} from 'sentry/components/events/attachmentViewers/previewAttachmentTypes';
 import {KeyValueData} from 'sentry/components/keyValueData';
 import {t, tct} from 'sentry/locale';
 import {space} from 'sentry/styles/space';
@@ -20,7 +21,6 @@ import {formatBytesBase2} from 'sentry/utils/bytes/formatBytesBase2';
 import {useHotkeys} from 'sentry/utils/useHotkeys';
 import useOrganization from 'sentry/utils/useOrganization';
 
-import ImageVisualization from './imageVisualization';
 import ScreenshotPagination from './screenshotPagination';
 
 interface ScreenshotModalProps extends ModalRenderProps {
@@ -58,9 +58,7 @@ export default function ScreenshotModal({
 }: ScreenshotModalProps) {
   const organization = useOrganization();
 
-  const screenshots = attachments.filter(
-    ({name, mimetype}) => name.includes('screenshot') && mimetype.startsWith('image')
-  );
+  const screenshots = attachments.filter(({name}) => name.includes('screenshot'));
 
   const [currentEventAttachment, setCurrentAttachment] =
     useState<EventAttachment>(eventAttachment);
@@ -108,6 +106,8 @@ export default function ScreenshotModal({
     };
   }
 
+  const AttachmentComponent = getInlineAttachmentRenderer(currentEventAttachment)!;
+
   return (
     <Fragment>
       <Header closeButton>
@@ -116,12 +116,14 @@ export default function ScreenshotModal({
       <Body>
         <Flex column gap={space(1.5)}>
           {defined(paginationProps) && <ScreenshotPagination {...paginationProps} />}
-          <StyledImageVisualization
-            attachment={currentEventAttachment}
-            orgSlug={organization.slug}
-            projectSlug={projectSlug}
-            eventId={currentEventAttachment.event_id}
-          />
+          <AttachmentComponentWrapper>
+            <AttachmentComponent
+              attachment={currentEventAttachment}
+              orgSlug={organization.slug}
+              projectSlug={projectSlug}
+              eventId={currentEventAttachment.event_id}
+            />
+          </AttachmentComponentWrapper>
           <KeyValueData.Card
             title={currentEventAttachment.name}
             contentItems={[
@@ -179,10 +181,12 @@ export default function ScreenshotModal({
   );
 }
 
-const StyledImageVisualization = styled(ImageVisualization)`
-  border-bottom: 0;
-  img {
+const AttachmentComponentWrapper = styled('div')`
+  & > * {
+    padding: 0;
+    border: none;
     max-height: calc(100vh - 300px);
+    box-sizing: border-box;
   }
 `;
 
diff --git a/static/app/components/events/eventTagsAndScreenshot/screenshot/screenshotDataSection.tsx b/static/app/components/events/eventTagsAndScreenshot/screenshot/screenshotDataSection.tsx
index 827c8182cb6443..c5fe9976e15dbd 100644
--- a/static/app/components/events/eventTagsAndScreenshot/screenshot/screenshotDataSection.tsx
+++ b/static/app/components/events/eventTagsAndScreenshot/screenshot/screenshotDataSection.tsx
@@ -24,15 +24,6 @@ import {InterimSection} from 'sentry/views/issueDetails/streamline/interimSectio
 import {Tab, TabPaths} from 'sentry/views/issueDetails/types';
 import {useHasStreamlinedUI} from 'sentry/views/issueDetails/utils';
 
-const SCREENSHOT_NAMES = [
-  'screenshot.jpg',
-  'screenshot.png',
-  'screenshot-1.jpg',
-  'screenshot-1.png',
-  'screenshot-2.jpg',
-  'screenshot-2.png',
-];
-
 interface ScreenshotDataSectionProps {
   event: Event;
   projectSlug: Project['slug'];
@@ -58,7 +49,7 @@ export function ScreenshotDataSection({
   );
   const {mutate: deleteAttachment} = useDeleteEventAttachmentOptimistic();
   const screenshots =
-    attachments?.filter(({name}) => SCREENSHOT_NAMES.includes(name)) ?? [];
+    attachments?.filter(({name}) => name.includes('eboot.bin-crash-video.webm')) ?? [];
 
   const [screenshotInFocus, setScreenshotInFocus] = useState<number>(0);
 

From 24e20b236a1a85a2e9f396e280ef6d5114d570f3 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Tue, 10 Jun 2025 12:08:42 +0200
Subject: [PATCH 3/4] correct name

---
 .../screenshot/screenshotDataSection.tsx                       | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/static/app/components/events/eventTagsAndScreenshot/screenshot/screenshotDataSection.tsx b/static/app/components/events/eventTagsAndScreenshot/screenshot/screenshotDataSection.tsx
index c5fe9976e15dbd..d0d23a7d2a8d54 100644
--- a/static/app/components/events/eventTagsAndScreenshot/screenshot/screenshotDataSection.tsx
+++ b/static/app/components/events/eventTagsAndScreenshot/screenshot/screenshotDataSection.tsx
@@ -48,8 +48,7 @@ export function ScreenshotDataSection({
     {enabled: !isShare}
   );
   const {mutate: deleteAttachment} = useDeleteEventAttachmentOptimistic();
-  const screenshots =
-    attachments?.filter(({name}) => name.includes('eboot.bin-crash-video.webm')) ?? [];
+  const screenshots = attachments?.filter(({name}) => name.includes('screenshot')) ?? [];
 
   const [screenshotInFocus, setScreenshotInFocus] = useState<number>(0);
 

From 2b79434d84b5b3f803aa4bded9c603c48cfb6fb7 Mon Sep 17 00:00:00 2001
From: Priscila Oliveira <priscila.oliveira@sentry.io>
Date: Tue, 10 Jun 2025 12:50:51 +0200
Subject: [PATCH 4/4] add important

---
 .../events/eventTagsAndScreenshot/screenshot/index.tsx        | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/static/app/components/events/eventTagsAndScreenshot/screenshot/index.tsx b/static/app/components/events/eventTagsAndScreenshot/screenshot/index.tsx
index 86c6792f7687e8..f4dee0b6662750 100644
--- a/static/app/components/events/eventTagsAndScreenshot/screenshot/index.tsx
+++ b/static/app/components/events/eventTagsAndScreenshot/screenshot/index.tsx
@@ -260,10 +260,10 @@ const AttachmentComponentWrapper = styled('div')`
   :hover {
     cursor: pointer;
   }
-  && > * {
+  & > * {
     width: 100%;
     z-index: 1;
     border: 0;
-    padding: 0;
+    padding: 0 !important;
   }
 `;