fixes

alchemy-fr · Sep 25, 2024 · 559871b · 559871b
1 parent bd1ee9c
commit 559871b
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 10 deletions.
diff --git a/databox/client/src/components/AssetList/PreviewPopover.tsx b/databox/client/src/components/AssetList/PreviewPopover.tsx
@@ -6,6 +6,7 @@ import {getRelativeViewHeight, getRelativeViewWidth} from '../../lib/style';
 import Attributes, {attributesSx} from '../Media/Asset/Attribute/Attributes';
 import {DisplayContext} from '../Media/DisplayContext';
 import {ZIndex} from '../../themes/zIndex.ts';
+import {getMediaBackgroundColor} from "../../themes/base.ts";
 
 type Props = {
     anchorEl: HTMLElement | undefined;
@@ -75,14 +76,22 @@ export default function PreviewPopover({
                 >
                     <Stack
                         direction={'row'}
-                        spacing={1}
-                        sx={theme => ({
-                            maxHeight: `calc(${height}px - ${theme.spacing(
-                                2
-                            )})`,
-                        })}
+                        spacing={2}
+                        sx={theme => {
+                            const spacingInt = parseInt(theme.spacing(2));
+                            return {
+                                maxHeight: height - spacingInt,
+                                '.media': {
+                                    display: 'flex',
+                                    justifyContent: 'center',
+                                    backgroundColor: getMediaBackgroundColor(theme),
+                                },
+                            }
+                        }}
                     >
-                        <div>
+                        <div
+                            className={'media'}
+                        >
                             <FilePlayer
                                 key={asset.id}
                                 file={asset.preview!.file!}

diff --git a/databox/client/src/components/Media/Asset/AssetView.tsx b/databox/client/src/components/Media/Asset/AssetView.tsx
@@ -22,6 +22,7 @@ import AssetViewActions from './Actions/AssetViewActions.tsx';
 import {Trans} from 'react-i18next';
 import {useQuery} from '@tanstack/react-query';
 import axios from 'axios';
+import {getMediaBackgroundColor} from "../../../themes/base.ts";
 
 export type IntegrationOverlayCommonProps = {
     dimensions: Dimensions;
@@ -170,17 +171,23 @@ export default function AssetView({modalIndex}: Props) {
                         }}
                     >
                         <Box
-                            sx={{
+                            sx={theme => ({
+                                display: 'flex',
+                                flexDirection: 'column',
+                                alignItems: 'center',
+                                justifyContent: 'center',
                                 overflowY: 'auto',
                                 height: dimensions.height,
                                 width: dimensions.width + scrollbarWidth,
                                 maxWidth: dimensions.width + scrollbarWidth,
-                            }}
+                                backgroundColor: getMediaBackgroundColor(theme),
+                            })}
                         >
                             <div
                                 style={{
                                     position: 'relative',
                                     width: 'fit-content',
+                                    maxHeight: dimensions.height,
                                 }}
                             >
                                 {annotations && !integrationOverlay ? (

diff --git a/databox/client/src/themes/base.ts b/databox/client/src/themes/base.ts
@@ -1,4 +1,4 @@
-import {ThemeOptions} from '@mui/material';
+import {Theme, ThemeOptions} from '@mui/material';
 
 const baseTheme: ThemeOptions = {
     typography: {
@@ -21,3 +21,7 @@ const baseTheme: ThemeOptions = {
 export default baseTheme;
 
 export const leftPanelWidth = 360;
+
+export function getMediaBackgroundColor(theme: Theme): string {
+    return theme.palette.grey[200];
+}