fix: make screenshots without width and height work (#2863)

tolgee · Jan 23, 2025 · f207a0d · f207a0d
1 parent e501446
commit f207a0d
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 7 deletions.
diff --git a/webapp/src/component/ScreenshotWithLabels.tsx b/webapp/src/component/ScreenshotWithLabels.tsx
@@ -1,5 +1,5 @@
 import { Tooltip, useTheme } from '@mui/material';
-import { CSSProperties } from 'react';
+import { CSSProperties, useEffect, useState } from 'react';
 
 import { components } from 'tg.service/apiSchema.generated';
 
@@ -38,12 +38,32 @@ export const ScreenshotWithLabels: React.FC<Props> = ({
   const strokeWidth = STROKE_WIDTH * scaleHighlight;
   const theme = useTheme();
 
+  const [size, setSize] = useState({ width: 0, height: 0 });
+
+  useEffect(() => {
+    if (!screenshot.width || !screenshot.height) {
+      let mounted = true;
+      const img = new Image();
+      img.src = screenshot.src;
+      img.onload = () => {
+        if (mounted) {
+          setSize({ width: img.naturalWidth, height: img.naturalHeight });
+        }
+      };
+      return () => {
+        mounted = false;
+      };
+    }
+  }, [screenshot.src]);
+
   return (
     <svg
-      viewBox={`0 0 ${screenshot.width} ${screenshot.height}`}
+      viewBox={`0 0 ${screenshot.width || size.width} ${
+        screenshot.height || size.height
+      }`}
       className={className}
       style={{
-        width: screenshot.width,
+        width: screenshot.width || size.width,
         maxWidth: '100%',
         ...style,
       }}
@@ -52,8 +72,8 @@ export const ScreenshotWithLabels: React.FC<Props> = ({
     >
       <image
         href={screenshot.src}
-        width={screenshot.width}
-        height={screenshot.height}
+        width={screenshot.width || size.width}
+        height={screenshot.height || size.height}
       />
       {screenshot.keyReferences
         ?.filter(

diff --git a/webapp/src/views/projects/translations/CellKey.tsx b/webapp/src/views/projects/translations/CellKey.tsx
@@ -109,7 +109,7 @@ const StyledDropzone = styled('div')`
   grid-column: 1 / -1;
   position: relative;
   padding: 0px 12px 12px 0px;
-  z-index: 2;
+  z-index: ${({ theme }) => theme.zIndex.tooltip};
 `;
 
 const StyledScreenshots = styled('div')`

diff --git a/webapp/src/views/projects/translations/Screenshots/ScreenshotsList.tsx b/webapp/src/views/projects/translations/Screenshots/ScreenshotsList.tsx
@@ -39,7 +39,12 @@ export const ScreenshotsList = ({
   }
   const { updateScreenshots } = useTranslationsActions();
 
-  const oneOnly = screenshots.length === 1 && boundedSize && oneBig;
+  const oneOnly = Boolean(
+    screenshots.length === 1 &&
+      boundedSize &&
+      oneBig &&
+      screenshots.every((sc) => sc.width && sc.height)
+  );
 
   const deleteLoadable = useApiMutation({
     url: '/v2/projects/{projectId}/keys/{keyId}/screenshots/{ids}',