Skip to content

ref: Introduce a few style improvements #94904

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
+32 −41
Open

ref: Introduce a few style improvements #94904

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5250b6a
feat: Add more video types support
priscilawebdev Jul 4, 2025
48974df
ref: Introduce a few style improvements
priscilawebdev Jul 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 8 additions & 16 deletions static/app/components/events/attachmentViewers/imageViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,22 @@
import styled from '@emotion/styled';

import type {ViewerProps} from 'sentry/components/events/attachmentViewers/utils';
import {getAttachmentUrl} from 'sentry/components/events/attachmentViewers/utils';
import PanelItem from 'sentry/components/panels/panelItem';

type Props = Omit<ViewerProps, 'attachment'> & {
attachment: ViewerProps['attachment'];
onError?: React.ReactEventHandler<HTMLImageElement>;
onLoad?: React.ReactEventHandler<HTMLImageElement>;
};

function ImageViewer({className, onLoad, onError, ...props}: Props) {
function ImageViewer({onLoad, onError, className, ...props}: Props) {
return (
<Container className={className}>
<img
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because we use PanelItem here, in the modal, the image contains padding and it shouldn't. This component should contain img only element and no wrappers

data-test-id="image-viewer"
src={getAttachmentUrl(props, true)}
onLoad={onLoad}
onError={onError}
/>
</Container>
<img
className={className}
data-test-id="image-viewer"
src={getAttachmentUrl(props, true)}
onLoad={onLoad}
onError={onError}
/>
);
}

export default ImageViewer;

const Container = styled(PanelItem)`
justify-content: center;
`;
4 changes: 2 additions & 2 deletions static/app/components/events/attachmentViewers/previewAttachmentTypes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const jsonMimeTypes = [
'text/x-json',
];

export const webmMimeType = 'video/webm';
export const webmMimeTypes = ['video/webm', 'video/mp4', 'video/quicktime'];

type AttachmentRenderer =
| typeof ImageViewer
Expand All @@ -44,7 +44,7 @@ export const getImageAttachmentRenderer = (
if (imageMimeTypes.includes(attachment.mimetype)) {
return ImageViewer;
}
if (webmMimeType === attachment.mimetype) {
if (webmMimeTypes.includes(attachment.mimetype)) {
return VideoViewer;
}
return undefined;
Expand Down
31 changes: 14 additions & 17 deletions static/app/components/events/attachmentViewers/videoViewer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@ 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
Expand All @@ -18,21 +17,19 @@ export function VideoViewer({
...props
}: WebMViewerProps) {
return (
<PanelItem>
<video
onCanPlay={onCanPlay}
controls={controls}
css={css`
width: 100%;
max-width: 100%;
`}
>
<source
src={getAttachmentUrl({attachment, ...props}, true)}
type={attachment.mimetype}
/>
{t('Your browser does not support the video tag.')}
</video>
</PanelItem>
<video
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

same here.

onCanPlay={onCanPlay}
controls={controls}
css={css`
width: 100%;
max-width: 100%;
`}
>
<source
src={getAttachmentUrl({attachment, ...props}, true)}
type={attachment.mimetype}
/>
{t('Your browser does not support the video tag.')}
</video>
);
}
5 changes: 3 additions & 2 deletions static/app/components/events/eventTagsAndScreenshot/screenshot/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import ImageViewer from 'sentry/components/events/attachmentViewers/imageViewer'
import {
getImageAttachmentRenderer,
imageMimeTypes,
webmMimeType,
webmMimeTypes,
} from 'sentry/components/events/attachmentViewers/previewAttachmentTypes';
import LoadingIndicator from 'sentry/components/loadingIndicator';
import Panel from 'sentry/components/panels/panel';
Expand Down Expand Up @@ -56,7 +56,8 @@ function Screenshot({
openVisualizationModal,
}: Props) {
const [loadingImage, setLoadingImage] = useState(
imageMimeTypes.includes(screenshot.mimetype) || webmMimeType === screenshot.mimetype
imageMimeTypes.includes(screenshot.mimetype) ||
webmMimeTypes.includes(screenshot.mimetype)
);

const {hasRole} = useRole({role: 'attachmentsRole'});
Expand Down
3 changes: 2 additions & 1 deletion static/app/components/events/eventTagsAndScreenshot/screenshot/modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,9 +187,10 @@ const AttachmentComponentWrapper = styled('div')`
& > video {
max-width: 100%;
max-height: calc(100vh - 300px);
width: auto;
width: 100%;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

fixing this for videos

height: auto;
object-fit: contain;
border-radius: ${p => p.theme.borderRadius};
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it looks better with border-radius, aligning with the panel with data below it

}
`;

Expand Down
6 changes: 3 additions & 3 deletions static/app/views/issueDetails/groupEventAttachments/inlineEventAttachment.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import styled from '@emotion/styled';

import {getInlineAttachmentRenderer} from 'sentry/components/events/attachmentViewers/previewAttachmentTypes';
import PanelItem from 'sentry/components/panels/panelItem';
import type {Event} from 'sentry/types/event';
import type {IssueAttachment} from 'sentry/types/group';
import useOrganization from 'sentry/utils/useOrganization';
Expand Down Expand Up @@ -35,8 +36,7 @@ export function InlineEventAttachment({
);
}

const AttachmentPreviewWrapper = styled('div')`
const AttachmentPreviewWrapper = styled(PanelItem)`
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The PanelItem should instead be used here where we are using a Panel

grid-column: auto / span 3;
border: none;
padding: 0;
justify-content: center;
`;
Loading