@imposium-hub/components 1.51.3 → 1.51.5

package/src/utils/assets.ts

@@ -0,0 +1,49 @@
+import { HEADER_HEIGHT, PREVIEW_MAX_HEIGHT, PREVIEW_MAX_WIDTH } from '../constants/assets';
+import { CSSProperties } from 'react';
+
+export const getMediaPreviewStyle = (
+    mediaWidth: number,
+    mediaHeight: number,
+    ref: any
+): CSSProperties => {
+    if (!ref.current) {
+        return;
+    }
+    if (!mediaWidth) {
+        mediaWidth = PREVIEW_MAX_WIDTH;
+    }
+    if (!mediaHeight) {
+        mediaHeight = PREVIEW_MAX_HEIGHT;
+    }
+    const icon = ref.current;
+    const iconRect = icon.getBoundingClientRect();
+    const aspect: number = mediaWidth / mediaHeight;
+    let width: number = PREVIEW_MAX_WIDTH;
+    let height: number = width / aspect;
+
+    if (height > PREVIEW_MAX_HEIGHT) {
+        height = PREVIEW_MAX_HEIGHT;
+        width = height * aspect;
+    }
+
+    // try top left
+    let left = iconRect.x + iconRect.width - width - 15;
+    let top = iconRect.y + iconRect.height - height - 20;
+    // if the preview is off on the left, switch to the right of the icon
+    if (left < 0) {
+        left = iconRect.x;
+    }
+    // if the preview is off on the top, switch to bottom of the icon
+    if (top < HEADER_HEIGHT) {
+        top = iconRect.y + 20;
+    }
+
+    return {
+        top,
+        left,
+        width,
+        height,
+        position: 'absolute',
+        zIndex: 9000
+    };
+};