@strapi/upload 5.37.0 → 5.38.0

package/dist/admin/future/pages/Assets/components/AssetDetails/AssetDetailsDrawer.mjs

@@ -0,0 +1,384 @@
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import * as React from 'react';
+import { useQueryParams, getDisplayName } from '@strapi/admin/strapi-admin';
+import { VisuallyHidden, Flex, Loader, Alert, Typography, Box, Field, TextInput } from '@strapi/design-system';
+import { FileError, ArrowLineRight, WarningCircle } from '@strapi/icons';
+import { useIntl } from 'react-intl';
+import { styled } from 'styled-components';
+import { DRAWER_CLOSE_ANIMATION_MS, Drawer } from '../../../../components/Drawer.mjs';
+import { AssetType } from '../../../../enums.mjs';
+import { useGetAssetQuery } from '../../../../services/assets.mjs';
+import { formatBytes, getFileExtension } from '../../../../utils/files.mjs';
+import { getAssetIcon } from '../../../../utils/getAssetIcon.mjs';
+import { getTranslationKey } from '../../../../utils/translations.mjs';
+import { AssetPreview } from './AssetPreview.mjs';
+
+// Name of the parameter to look for in the URL to open the drawer
+const URL_PARAM = 'assetId';
+/* -------------------------------------------------------------------------------------------------
+ * useAssetDetailsParam - sync drawer visibility with URL ?{URL_PARAM}={id}
+ * -----------------------------------------------------------------------------------------------*/ const useAssetDetailsParam = ()=>{
+    const [{ query }, setQuery] = useQueryParams();
+    const detailsId = query?.[URL_PARAM];
+    const assetId = detailsId ? parseInt(detailsId, 10) : null;
+    const hasValidId = assetId !== null && !Number.isNaN(assetId);
+    const [isClosing, setIsClosing] = React.useState(false);
+    const displayAssetId = React.useRef(null);
+    const isVisible = hasValidId && !isClosing;
+    React.useEffect(()=>{
+        if (hasValidId) {
+            displayAssetId.current = assetId;
+        }
+    }, [
+        hasValidId,
+        assetId
+    ]);
+    const openDetails = React.useCallback((id)=>{
+        setIsClosing(false);
+        setQuery({
+            [URL_PARAM]: String(id)
+        });
+    }, [
+        setQuery
+    ]);
+    const closeDetails = React.useCallback(()=>{
+        if (!hasValidId) return;
+        setIsClosing(true);
+    }, [
+        hasValidId
+    ]);
+    React.useEffect(()=>{
+        if (!isClosing) return;
+        const timer = window.setTimeout(()=>{
+            setQuery({
+                [URL_PARAM]: undefined
+            }, 'remove');
+            setIsClosing(false);
+            displayAssetId.current = null;
+        }, DRAWER_CLOSE_ANIMATION_MS);
+        return ()=>window.clearTimeout(timer);
+    }, [
+        isClosing,
+        setQuery
+    ]);
+    const shouldRenderDrawer = hasValidId || isClosing;
+    const drawerAssetId = isClosing ? displayAssetId.current ?? assetId : assetId;
+    return {
+        assetId: drawerAssetId,
+        isVisible,
+        shouldRenderDrawer,
+        openDetails,
+        closeDetails
+    };
+};
+const DetailItemContainer = styled(Flex)`
+  flex: 0 0 calc(50% - ${({ theme })=>theme.spaces[2]});
+`;
+const DetailItem = ({ label, value })=>/*#__PURE__*/ jsxs(DetailItemContainer, {
+        direction: "column",
+        justifyContent: "flex-start",
+        alignItems: "flex-start",
+        gap: 1,
+        children: [
+            /*#__PURE__*/ jsx(Typography, {
+                variant: "sigma",
+                textColor: "neutral600",
+                fontWeight: "semiBold",
+                textTransform: "uppercase",
+                children: label
+            }),
+            /*#__PURE__*/ jsx(Typography, {
+                variant: "pi",
+                textColor: "neutral700",
+                children: value ?? '-'
+            })
+        ]
+    });
+/* -------------------------------------------------------------------------------------------------
+ * DetailField
+ * -----------------------------------------------------------------------------------------------*/ const StyledWarning = styled(WarningCircle)`
+  width: 1.6rem;
+  height: 1.6rem;
+
+  path {
+    fill: ${({ theme })=>theme.colors.warning500};
+  }
+`;
+const DetailField = ({ name, label, value, required })=>/*#__PURE__*/ jsxs(Field.Root, {
+        name: name,
+        required: required,
+        children: [
+            /*#__PURE__*/ jsx(Field.Label, {
+                children: label
+            }),
+            /*#__PURE__*/ jsx(TextInput, {
+                value: value ?? '',
+                // TODO: handle onChange
+                onChange: ()=>{},
+                endAction: !value ? /*#__PURE__*/ jsx(StyledWarning, {}) : undefined,
+                type: "text"
+            })
+        ]
+    });
+const AssetDetails = ({ asset })=>{
+    const { formatMessage, formatDate } = useIntl();
+    const isImage = asset.mime?.includes(AssetType.Image);
+    return /*#__PURE__*/ jsxs(Flex, {
+        direction: "column",
+        alignItems: "stretch",
+        gap: 4,
+        paddingTop: 4,
+        paddingBottom: 4,
+        paddingLeft: 5,
+        paddingRight: 5,
+        children: [
+            /*#__PURE__*/ jsx(Typography, {
+                variant: "beta",
+                fontWeight: "semiBold",
+                tag: "h3",
+                children: formatMessage({
+                    id: getTranslationKey('asset-details.fileInfo'),
+                    defaultMessage: 'File info'
+                })
+            }),
+            /*#__PURE__*/ jsxs(Flex, {
+                wrap: "wrap",
+                gap: 4,
+                background: "neutral100",
+                paddingTop: 4,
+                paddingBottom: 4,
+                paddingLeft: 6,
+                paddingRight: 6,
+                alignItems: "flex-start",
+                children: [
+                    /*#__PURE__*/ jsx(DetailItem, {
+                        label: formatMessage({
+                            id: getTranslationKey('asset-details.creationDate'),
+                            defaultMessage: 'Creation date'
+                        }),
+                        value: asset.createdAt ? formatDate(new Date(asset.createdAt), {
+                            dateStyle: 'long',
+                            timeStyle: 'short'
+                        }) : null
+                    }),
+                    /*#__PURE__*/ jsx(DetailItem, {
+                        label: formatMessage({
+                            id: getTranslationKey('asset-details.lastUpdated'),
+                            defaultMessage: 'Last updated'
+                        }),
+                        value: asset.updatedAt ? formatDate(new Date(asset.updatedAt), {
+                            dateStyle: 'long',
+                            timeStyle: 'short'
+                        }) : null
+                    }),
+                    /*#__PURE__*/ jsx(DetailItem, {
+                        label: formatMessage({
+                            id: getTranslationKey('asset-details.createdBy'),
+                            defaultMessage: 'Created by'
+                        }),
+                        value: asset.createdBy ? getDisplayName({
+                            firstname: asset.createdBy.firstname ?? undefined,
+                            lastname: asset.createdBy.lastname ?? undefined,
+                            username: asset.createdBy.username ?? undefined,
+                            email: asset.createdBy.email ?? undefined
+                        }) ?? '-' : null
+                    }),
+                    /*#__PURE__*/ jsx(DetailItem, {
+                        label: formatMessage({
+                            id: getTranslationKey('asset-details.size'),
+                            defaultMessage: 'Size'
+                        }),
+                        value: asset.size ? formatBytes(asset.size, 1) : null
+                    }),
+                    isImage && (asset.width != null || asset.height != null) && /*#__PURE__*/ jsx(DetailItem, {
+                        label: formatMessage({
+                            id: getTranslationKey('asset-details.dimensions'),
+                            defaultMessage: 'Dimensions'
+                        }),
+                        value: asset.width != null && asset.height != null ? `${asset.width} × ${asset.height}` : null
+                    }),
+                    /*#__PURE__*/ jsx(DetailItem, {
+                        label: formatMessage({
+                            id: getTranslationKey('asset-details.extension'),
+                            defaultMessage: 'Extension'
+                        }),
+                        value: getFileExtension(asset.ext)
+                    }),
+                    /*#__PURE__*/ jsx(DetailItem, {
+                        label: formatMessage({
+                            id: getTranslationKey('asset-details.assetId'),
+                            defaultMessage: 'Asset ID'
+                        }),
+                        value: String(asset.id)
+                    })
+                ]
+            }),
+            /*#__PURE__*/ jsx(DetailField, {
+                name: "fileName",
+                label: formatMessage({
+                    id: getTranslationKey('asset-details.fileName'),
+                    defaultMessage: 'File name'
+                }),
+                value: asset.name,
+                required: true
+            }),
+            isImage && /*#__PURE__*/ jsxs(Fragment, {
+                children: [
+                    /*#__PURE__*/ jsx(DetailField, {
+                        name: "caption",
+                        label: formatMessage({
+                            id: getTranslationKey('asset-details.caption'),
+                            defaultMessage: 'Caption'
+                        }),
+                        value: asset.caption
+                    }),
+                    /*#__PURE__*/ jsx(DetailField, {
+                        name: "alternativeText",
+                        label: formatMessage({
+                            id: getTranslationKey('asset-details.alternativeText'),
+                            defaultMessage: 'Alternative text'
+                        }),
+                        value: asset.alternativeText
+                    })
+                ]
+            })
+        ]
+    });
+};
+const DrawerHeader = ({ asset, closeDetails })=>{
+    const DocIcon = asset ? getAssetIcon(asset.mime, asset.ext) : FileError;
+    return /*#__PURE__*/ jsxs(Flex, {
+        gap: 2,
+        paddingLeft: 5,
+        paddingTop: 3,
+        paddingBottom: 3,
+        paddingRight: 3,
+        children: [
+            /*#__PURE__*/ jsx(DocIcon, {
+                width: 20,
+                height: 20
+            }),
+            /*#__PURE__*/ jsx(Drawer.Title, {
+                asChild: true,
+                children: /*#__PURE__*/ jsx(Typography, {
+                    variant: "omega",
+                    fontWeight: "semiBold",
+                    overflow: "hidden",
+                    ellipsis: true,
+                    tag: "h2",
+                    children: asset.name
+                })
+            }),
+            /*#__PURE__*/ jsx(Box, {
+                marginLeft: "auto",
+                children: /*#__PURE__*/ jsx(Drawer.CloseButton, {
+                    onClose: closeDetails,
+                    children: /*#__PURE__*/ jsx(ArrowLineRight, {})
+                })
+            })
+        ]
+    });
+};
+const DrawerContent = ({ assetId, closeDetails })=>{
+    const { formatMessage } = useIntl();
+    const { data: asset, isLoading, error } = useGetAssetQuery(assetId, {
+        refetchOnMountOrArgChange: false,
+        refetchOnReconnect: false,
+        refetchOnFocus: false
+    });
+    if (isLoading) {
+        return /*#__PURE__*/ jsx(Flex, {
+            justifyContent: "center",
+            padding: 8,
+            children: /*#__PURE__*/ jsx(Loader, {
+                children: formatMessage({
+                    id: 'app.loading',
+                    defaultMessage: 'Loading...'
+                })
+            })
+        });
+    }
+    if (error || !asset) {
+        return /*#__PURE__*/ jsx(Flex, {
+            direction: "column",
+            alignItems: "stretch",
+            gap: 4,
+            padding: 4,
+            children: /*#__PURE__*/ jsx(Alert, {
+                variant: "danger",
+                closeLabel: formatMessage({
+                    id: 'global.close',
+                    defaultMessage: 'Close'
+                }),
+                onClose: closeDetails,
+                children: formatMessage({
+                    id: getTranslationKey('asset-details.error'),
+                    defaultMessage: 'Failed to load file details.'
+                })
+            })
+        });
+    }
+    return /*#__PURE__*/ jsxs(Fragment, {
+        children: [
+            /*#__PURE__*/ jsx(DrawerHeader, {
+                asset: asset,
+                closeDetails: closeDetails
+            }),
+            /*#__PURE__*/ jsxs(Drawer.ScrollableContent, {
+                children: [
+                    /*#__PURE__*/ jsx(AssetPreview, {
+                        asset: asset
+                    }),
+                    /*#__PURE__*/ jsx(AssetDetails, {
+                        asset: asset
+                    })
+                ]
+            })
+        ]
+    });
+};
+/* -------------------------------------------------------------------------------------------------
+ * AssetDetailsDrawer
+ * -----------------------------------------------------------------------------------------------*/ const AssetDetailsDrawer = ()=>{
+    const { formatMessage } = useIntl();
+    const { assetId, isVisible, shouldRenderDrawer, closeDetails } = useAssetDetailsParam();
+    if (!shouldRenderDrawer || assetId === null) {
+        return null;
+    }
+    return /*#__PURE__*/ jsxs(Drawer.Root, {
+        isVisible: isVisible,
+        onClose: closeDetails,
+        children: [
+            /*#__PURE__*/ jsx("div", {
+                children: /*#__PURE__*/ jsxs(VisuallyHidden, {
+                    children: [
+                        /*#__PURE__*/ jsx(Drawer.Title, {
+                            children: formatMessage({
+                                id: getTranslationKey('asset-details.title'),
+                                defaultMessage: 'File details'
+                            })
+                        }),
+                        /*#__PURE__*/ jsx(Drawer.Description, {
+                            children: formatMessage({
+                                id: getTranslationKey('asset-details.description'),
+                                defaultMessage: 'Displays file information and metadata'
+                            })
+                        })
+                    ]
+                })
+            }),
+            /*#__PURE__*/ jsx(Drawer.Body, {
+                animationDirection: "left",
+                width: "41.6rem",
+                height: "100vh",
+                children: /*#__PURE__*/ jsx(DrawerContent, {
+                    assetId: assetId,
+                    closeDetails: closeDetails
+                })
+            })
+        ]
+    });
+};
+
+export { AssetDetailsDrawer, useAssetDetailsParam };
+//# sourceMappingURL=AssetDetailsDrawer.mjs.map

package/dist/admin/future/pages/Assets/components/AssetDetails/AssetDetailsDrawer.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"AssetDetailsDrawer.mjs","sources":["../../../../../../../admin/src/future/pages/Assets/components/AssetDetails/AssetDetailsDrawer.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { useQueryParams, getDisplayName } from '@strapi/admin/strapi-admin';\nimport {\n  Alert,\n  Box,\n  Field,\n  Flex,\n  Loader,\n  TextInput,\n  Typography,\n  VisuallyHidden,\n} from '@strapi/design-system';\nimport { ArrowLineRight, FileError, WarningCircle } from '@strapi/icons';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { Drawer, DRAWER_CLOSE_ANIMATION_MS } from '../../../../components/Drawer';\nimport { AssetType } from '../../../../enums';\nimport { useGetAssetQuery } from '../../../../services/assets';\nimport { formatBytes, getFileExtension } from '../../../../utils/files';\nimport { getAssetIcon } from '../../../../utils/getAssetIcon';\nimport { getTranslationKey } from '../../../../utils/translations';\n\nimport { AssetPreview } from './AssetPreview';\n\nimport type { AssetWithPopulatedCreatedBy } from '../../../../../../../shared/contracts/files';\n\n// Name of the parameter to look for in the URL to open the drawer\nconst URL_PARAM = 'assetId';\n\n/* -------------------------------------------------------------------------------------------------\n * useAssetDetailsParam - sync drawer visibility with URL ?{URL_PARAM}={id}\n * -----------------------------------------------------------------------------------------------*/\n\nexport const useAssetDetailsParam = () => {\n  const [{ query }, setQuery] = useQueryParams<{ [URL_PARAM]?: string }>();\n\n  const detailsId = query?.[URL_PARAM];\n  const assetId = detailsId ? parseInt(detailsId, 10) : null;\n  const hasValidId = assetId !== null && !Number.isNaN(assetId);\n\n  const [isClosing, setIsClosing] = React.useState(false);\n  const displayAssetId = React.useRef<number | null>(null);\n\n  const isVisible = hasValidId && !isClosing;\n\n  React.useEffect(() => {\n    if (hasValidId) {\n      displayAssetId.current = assetId;\n    }\n  }, [hasValidId, assetId]);\n\n  const openDetails = React.useCallback(\n    (id: number) => {\n      setIsClosing(false);\n      setQuery({ [URL_PARAM]: String(id) });\n    },\n    [setQuery]\n  );\n\n  const closeDetails = React.useCallback(() => {\n    if (!hasValidId) return;\n    setIsClosing(true);\n  }, [hasValidId]);\n\n  React.useEffect(() => {\n    if (!isClosing) return;\n    const timer = window.setTimeout(() => {\n      setQuery({ [URL_PARAM]: undefined }, 'remove');\n      setIsClosing(false);\n      displayAssetId.current = null;\n    }, DRAWER_CLOSE_ANIMATION_MS);\n    return () => window.clearTimeout(timer);\n  }, [isClosing, setQuery]);\n\n  const shouldRenderDrawer = hasValidId || isClosing;\n  const drawerAssetId = isClosing ? (displayAssetId.current ?? assetId) : assetId;\n\n  return {\n    assetId: drawerAssetId,\n    isVisible,\n    shouldRenderDrawer,\n    openDetails,\n    closeDetails,\n  };\n};\n\n/* -------------------------------------------------------------------------------------------------\n * DetailItem\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DetailItemProps {\n  label: string;\n  value: React.ReactNode;\n}\n\nconst DetailItemContainer = styled(Flex)`\n  flex: 0 0 calc(50% - ${({ theme }) => theme.spaces[2]});\n`;\n\nconst DetailItem = ({ label, value }: DetailItemProps) => (\n  <DetailItemContainer\n    direction=\"column\"\n    justifyContent=\"flex-start\"\n    alignItems=\"flex-start\"\n    gap={1}\n  >\n    <Typography\n      variant=\"sigma\"\n      textColor=\"neutral600\"\n      fontWeight=\"semiBold\"\n      textTransform=\"uppercase\"\n    >\n      {label}\n    </Typography>\n    <Typography variant=\"pi\" textColor=\"neutral700\">\n      {value ?? '-'}\n    </Typography>\n  </DetailItemContainer>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * DetailField\n * -----------------------------------------------------------------------------------------------*/\n\nconst StyledWarning = styled(WarningCircle)`\n  width: 1.6rem;\n  height: 1.6rem;\n\n  path {\n    fill: ${({ theme }) => theme.colors.warning500};\n  }\n`;\n\ninterface DetailFieldProps {\n  name: string;\n  label: string;\n  value: string | null | undefined;\n  required?: boolean;\n}\n\nconst DetailField = ({ name, label, value, required }: DetailFieldProps) => (\n  <Field.Root name={name} required={required}>\n    <Field.Label>{label}</Field.Label>\n    <TextInput\n      value={value ?? ''}\n      // TODO: handle onChange\n      onChange={() => {}}\n      endAction={!value ? <StyledWarning /> : undefined}\n      type=\"text\"\n    />\n  </Field.Root>\n);\n\n/* -------------------------------------------------------------------------------------------------\n * AssetDetails\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AssetDetailsProps {\n  asset: AssetWithPopulatedCreatedBy;\n}\n\nconst AssetDetails = ({ asset }: AssetDetailsProps) => {\n  const { formatMessage, formatDate } = useIntl();\n\n  const isImage = asset.mime?.includes(AssetType.Image);\n\n  return (\n    <Flex\n      direction=\"column\"\n      alignItems=\"stretch\"\n      gap={4}\n      paddingTop={4}\n      paddingBottom={4}\n      paddingLeft={5}\n      paddingRight={5}\n    >\n      <Typography variant=\"beta\" fontWeight=\"semiBold\" tag=\"h3\">\n        {formatMessage({\n          id: getTranslationKey('asset-details.fileInfo'),\n          defaultMessage: 'File info',\n        })}\n      </Typography>\n      <Flex\n        wrap=\"wrap\"\n        gap={4}\n        background=\"neutral100\"\n        paddingTop={4}\n        paddingBottom={4}\n        paddingLeft={6}\n        paddingRight={6}\n        alignItems=\"flex-start\"\n      >\n        <DetailItem\n          label={formatMessage({\n            id: getTranslationKey('asset-details.creationDate'),\n            defaultMessage: 'Creation date',\n          })}\n          value={\n            asset.createdAt\n              ? formatDate(new Date(asset.createdAt), { dateStyle: 'long', timeStyle: 'short' })\n              : null\n          }\n        />\n        <DetailItem\n          label={formatMessage({\n            id: getTranslationKey('asset-details.lastUpdated'),\n            defaultMessage: 'Last updated',\n          })}\n          value={\n            asset.updatedAt\n              ? formatDate(new Date(asset.updatedAt), { dateStyle: 'long', timeStyle: 'short' })\n              : null\n          }\n        />\n        <DetailItem\n          label={formatMessage({\n            id: getTranslationKey('asset-details.createdBy'),\n            defaultMessage: 'Created by',\n          })}\n          value={\n            asset.createdBy\n              ? (getDisplayName({\n                  firstname: asset.createdBy.firstname ?? undefined,\n                  lastname: asset.createdBy.lastname ?? undefined,\n                  username: asset.createdBy.username ?? undefined,\n                  email: asset.createdBy.email ?? undefined,\n                }) ?? '-')\n              : null\n          }\n        />\n        <DetailItem\n          label={formatMessage({\n            id: getTranslationKey('asset-details.size'),\n            defaultMessage: 'Size',\n          })}\n          value={asset.size ? formatBytes(asset.size, 1) : null}\n        />\n        {isImage && (asset.width != null || asset.height != null) && (\n          <DetailItem\n            label={formatMessage({\n              id: getTranslationKey('asset-details.dimensions'),\n              defaultMessage: 'Dimensions',\n            })}\n            value={\n              asset.width != null && asset.height != null\n                ? `${asset.width} × ${asset.height}`\n                : null\n            }\n          />\n        )}\n        <DetailItem\n          label={formatMessage({\n            id: getTranslationKey('asset-details.extension'),\n            defaultMessage: 'Extension',\n          })}\n          value={getFileExtension(asset.ext)}\n        />\n        <DetailItem\n          label={formatMessage({\n            id: getTranslationKey('asset-details.assetId'),\n            defaultMessage: 'Asset ID',\n          })}\n          value={String(asset.id)}\n        />\n      </Flex>\n      <DetailField\n        name=\"fileName\"\n        label={formatMessage({\n          id: getTranslationKey('asset-details.fileName'),\n          defaultMessage: 'File name',\n        })}\n        value={asset.name}\n        required\n      />\n      {isImage && (\n        <>\n          <DetailField\n            name=\"caption\"\n            label={formatMessage({\n              id: getTranslationKey('asset-details.caption'),\n              defaultMessage: 'Caption',\n            })}\n            value={asset.caption}\n          />\n          <DetailField\n            name=\"alternativeText\"\n            label={formatMessage({\n              id: getTranslationKey('asset-details.alternativeText'),\n              defaultMessage: 'Alternative text',\n            })}\n            value={asset.alternativeText}\n          />\n        </>\n      )}\n    </Flex>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * DrawerHeader\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerHeaderProps {\n  asset: AssetWithPopulatedCreatedBy;\n  closeDetails: () => void;\n}\n\nconst DrawerHeader = ({ asset, closeDetails }: DrawerHeaderProps) => {\n  const DocIcon = asset ? getAssetIcon(asset.mime, asset.ext) : FileError;\n  return (\n    <Flex gap={2} paddingLeft={5} paddingTop={3} paddingBottom={3} paddingRight={3}>\n      <DocIcon width={20} height={20} />\n      <Drawer.Title asChild>\n        <Typography variant=\"omega\" fontWeight=\"semiBold\" overflow=\"hidden\" ellipsis tag=\"h2\">\n          {asset.name}\n        </Typography>\n      </Drawer.Title>\n      <Box marginLeft=\"auto\">\n        <Drawer.CloseButton onClose={closeDetails}>\n          <ArrowLineRight />\n        </Drawer.CloseButton>\n      </Box>\n    </Flex>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * DrawerContent\n * -----------------------------------------------------------------------------------------------*/\n\ninterface DrawerContentProps {\n  assetId: number;\n  closeDetails: () => void;\n}\n\nconst DrawerContent = ({ assetId, closeDetails }: DrawerContentProps) => {\n  const { formatMessage } = useIntl();\n  const {\n    data: asset,\n    isLoading,\n    error,\n  } = useGetAssetQuery(assetId, {\n    refetchOnMountOrArgChange: false,\n    refetchOnReconnect: false,\n    refetchOnFocus: false,\n  });\n\n  if (isLoading) {\n    return (\n      <Flex justifyContent=\"center\" padding={8}>\n        <Loader>{formatMessage({ id: 'app.loading', defaultMessage: 'Loading...' })}</Loader>\n      </Flex>\n    );\n  }\n\n  if (error || !asset) {\n    return (\n      <Flex direction=\"column\" alignItems=\"stretch\" gap={4} padding={4}>\n        <Alert\n          variant=\"danger\"\n          closeLabel={formatMessage({ id: 'global.close', defaultMessage: 'Close' })}\n          onClose={closeDetails}\n        >\n          {formatMessage({\n            id: getTranslationKey('asset-details.error'),\n            defaultMessage: 'Failed to load file details.',\n          })}\n        </Alert>\n      </Flex>\n    );\n  }\n\n  return (\n    <>\n      <DrawerHeader asset={asset} closeDetails={closeDetails} />\n      <Drawer.ScrollableContent>\n        <AssetPreview asset={asset} />\n        <AssetDetails asset={asset} />\n      </Drawer.ScrollableContent>\n    </>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * AssetDetailsDrawer\n * -----------------------------------------------------------------------------------------------*/\n\nexport const AssetDetailsDrawer = () => {\n  const { formatMessage } = useIntl();\n  const { assetId, isVisible, shouldRenderDrawer, closeDetails } = useAssetDetailsParam();\n\n  if (!shouldRenderDrawer || assetId === null) {\n    return null;\n  }\n\n  return (\n    <Drawer.Root isVisible={isVisible} onClose={closeDetails}>\n      {/* Wrapper div required: Dialog.Portal uses asChild and merges ref onto each child.\n          VisuallyHidden does not forward refs, so we wrap it in a div that can receive the ref. */}\n      <div>\n        <VisuallyHidden>\n          <Drawer.Title>\n            {formatMessage({\n              id: getTranslationKey('asset-details.title'),\n              defaultMessage: 'File details',\n            })}\n          </Drawer.Title>\n          <Drawer.Description>\n            {formatMessage({\n              id: getTranslationKey('asset-details.description'),\n              defaultMessage: 'Displays file information and metadata',\n            })}\n          </Drawer.Description>\n        </VisuallyHidden>\n      </div>\n      <Drawer.Body animationDirection=\"left\" width=\"41.6rem\" height=\"100vh\">\n        <DrawerContent assetId={assetId} closeDetails={closeDetails} />\n      </Drawer.Body>\n    </Drawer.Root>\n  );\n};\n"],"names":["URL_PARAM","useAssetDetailsParam","query","setQuery","useQueryParams","detailsId","assetId","parseInt","hasValidId","Number","isNaN","isClosing","setIsClosing","React","useState","displayAssetId","useRef","isVisible","useEffect","current","openDetails","useCallback","id","String","closeDetails","timer","window","setTimeout","undefined","DRAWER_CLOSE_ANIMATION_MS","clearTimeout","shouldRenderDrawer","drawerAssetId","DetailItemContainer","styled","Flex","theme","spaces","DetailItem","label","value","_jsxs","direction","justifyContent","alignItems","gap","_jsx","Typography","variant","textColor","fontWeight","textTransform","StyledWarning","WarningCircle","colors","warning500","DetailField","name","required","Field","Root","Label","TextInput","onChange","endAction","type","AssetDetails","asset","formatMessage","formatDate","useIntl","isImage","mime","includes","AssetType","Image","paddingTop","paddingBottom","paddingLeft","paddingRight","tag","getTranslationKey","defaultMessage","wrap","background","createdAt","Date","dateStyle","timeStyle","updatedAt","createdBy","getDisplayName","firstname","lastname","username","email","size","formatBytes","width","height","getFileExtension","ext","_Fragment","caption","alternativeText","DrawerHeader","DocIcon","getAssetIcon","FileError","Drawer","Title","asChild","overflow","ellipsis","Box","marginLeft","CloseButton","onClose","ArrowLineRight","DrawerContent","data","isLoading","error","useGetAssetQuery","refetchOnMountOrArgChange","refetchOnReconnect","refetchOnFocus","padding","Loader","Alert","closeLabel","ScrollableContent","AssetPreview","AssetDetailsDrawer","div","VisuallyHidden","Description","Body","animationDirection"],"mappings":"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"}

package/dist/admin/future/pages/Assets/components/AssetDetails/AssetPreview.js

@@ -0,0 +1,215 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var designSystem = require('@strapi/design-system');
+var reactIntl = require('react-intl');
+var styledComponents = require('styled-components');
+var enums = require('../../../../enums.js');
+var files = require('../../../../utils/files.js');
+var getAssetIcon = require('../../../../utils/getAssetIcon.js');
+var translations = require('../../../../utils/translations.js');
+
+function _interopNamespaceDefault(e) {
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
+        });
+      }
+    });
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+/* -------------------------------------------------------------------------------------------------
+ * Styled components
+ * -----------------------------------------------------------------------------------------------*/ const PreviewContainer = styledComponents.styled(designSystem.Box)`
+  position: relative;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  max-height: 24rem;
+  overflow: hidden;
+  border-radius: ${({ theme })=>theme.borderRadius};
+  padding: ${({ theme })=>theme.spaces[3]};
+  background: repeating-conic-gradient(
+      ${({ theme })=>theme.colors.neutral100} 0% 25%,
+      transparent 0% 50%
+    )
+    50% / 20px 20px;
+`;
+const AssetContainer = styledComponents.styled(designSystem.Flex)`
+  justify-content: center;
+  position: relative;
+  z-index: 2;
+  width: 100%;
+  height: 100%;
+`;
+const StyledImage = styledComponents.styled.img`
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+`;
+const StyledVideo = styledComponents.styled.video`
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+`;
+const StyledAudio = styledComponents.styled.audio`
+  width: 100%;
+`;
+const StyledPdfIframe = styledComponents.styled.iframe`
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  border: none;
+`;
+const IconFallback = styledComponents.styled(designSystem.Flex)`
+  height: 100%;
+  aspect-ratio: 1;
+  width: auto;
+  max-width: 100%;
+  margin: 0 auto;
+  color: ${({ theme })=>theme.colors.neutral500};
+  background: ${({ theme })=>theme.colors.neutral150};
+`;
+const LoaderOverlay = styledComponents.styled(designSystem.Flex)`
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+`;
+/* -------------------------------------------------------------------------------------------------
+ * AssetLoader
+ * -----------------------------------------------------------------------------------------------*/ const AssetLoader = ()=>{
+    const { formatMessage } = reactIntl.useIntl();
+    return /*#__PURE__*/ jsxRuntime.jsx(LoaderOverlay, {
+        justifyContent: "center",
+        alignItems: "center",
+        children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Loader, {
+            children: formatMessage({
+                id: 'app.loading',
+                defaultMessage: 'Loading...'
+            })
+        })
+    });
+};
+const AssetPreview = ({ asset })=>{
+    const { formatMessage } = reactIntl.useIntl();
+    const { alternativeText, ext, mime, url } = asset;
+    const mediaUrl = files.prefixFileUrlWithBackendUrl(url);
+    const [isMediaLoaded, setIsMediaLoaded] = React__namespace.useState(false);
+    React__namespace.useEffect(()=>{
+        setIsMediaLoaded(false);
+    }, [
+        mediaUrl
+    ]);
+    if (mime?.includes(enums.AssetType.Image)) {
+        const imageUrl = files.prefixFileUrlWithBackendUrl(url);
+        if (imageUrl) {
+            return /*#__PURE__*/ jsxRuntime.jsxs(PreviewContainer, {
+                children: [
+                    !isMediaLoaded && /*#__PURE__*/ jsxRuntime.jsx(AssetLoader, {}),
+                    /*#__PURE__*/ jsxRuntime.jsx(AssetContainer, {
+                        children: /*#__PURE__*/ jsxRuntime.jsx(StyledImage, {
+                            src: imageUrl,
+                            alt: alternativeText || asset.name || '',
+                            onLoad: ()=>setIsMediaLoaded(true),
+                            onError: ()=>setIsMediaLoaded(true)
+                        })
+                    })
+                ]
+            });
+        }
+    }
+    if (mime?.includes(enums.AssetType.Video) && mediaUrl) {
+        return /*#__PURE__*/ jsxRuntime.jsxs(PreviewContainer, {
+            children: [
+                !isMediaLoaded && /*#__PURE__*/ jsxRuntime.jsx(AssetLoader, {}),
+                /*#__PURE__*/ jsxRuntime.jsx(AssetContainer, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(StyledVideo, {
+                        src: mediaUrl,
+                        controls: true,
+                        title: asset.name,
+                        onLoadedData: ()=>setIsMediaLoaded(true),
+                        onError: ()=>setIsMediaLoaded(true),
+                        children: formatMessage({
+                            id: translations.getTranslationKey('asset-details.videoNotSupported'),
+                            defaultMessage: 'Your browser does not support the video tag.'
+                        })
+                    })
+                })
+            ]
+        });
+    }
+    if (mime?.includes(enums.AssetType.Audio) && mediaUrl) {
+        return /*#__PURE__*/ jsxRuntime.jsxs(PreviewContainer, {
+            children: [
+                !isMediaLoaded && /*#__PURE__*/ jsxRuntime.jsx(AssetLoader, {}),
+                /*#__PURE__*/ jsxRuntime.jsx(AssetContainer, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(designSystem.Flex, {
+                        width: "100%",
+                        padding: 4,
+                        justifyContent: "center",
+                        alignItems: "center",
+                        height: "100%",
+                        minHeight: "12rem",
+                        children: /*#__PURE__*/ jsxRuntime.jsx(StyledAudio, {
+                            src: mediaUrl,
+                            controls: true,
+                            onLoadedData: ()=>setIsMediaLoaded(true),
+                            onError: ()=>setIsMediaLoaded(true)
+                        })
+                    })
+                })
+            ]
+        });
+    }
+    const isPdf = ext?.toLowerCase() === 'pdf' || ext?.toLowerCase() === '.pdf' || mime === 'application/pdf';
+    if (isPdf && mediaUrl) {
+        return /*#__PURE__*/ jsxRuntime.jsxs(PreviewContainer, {
+            children: [
+                !isMediaLoaded && /*#__PURE__*/ jsxRuntime.jsx(AssetLoader, {}),
+                /*#__PURE__*/ jsxRuntime.jsx(AssetContainer, {
+                    children: /*#__PURE__*/ jsxRuntime.jsx(StyledPdfIframe, {
+                        src: `${mediaUrl}#toolbar=0`,
+                        title: asset.name,
+                        onLoad: ()=>setIsMediaLoaded(true)
+                    })
+                })
+            ]
+        });
+    }
+    const DocIcon = getAssetIcon.getAssetIcon(mime, ext);
+    return /*#__PURE__*/ jsxRuntime.jsx(PreviewContainer, {
+        children: /*#__PURE__*/ jsxRuntime.jsxs(IconFallback, {
+            justifyContent: "center",
+            alignItems: "center",
+            gap: 1,
+            direction: "column",
+            hasRadius: true,
+            children: [
+                /*#__PURE__*/ jsxRuntime.jsx(DocIcon, {
+                    width: 24,
+                    height: 24
+                }),
+                /*#__PURE__*/ jsxRuntime.jsx(designSystem.Typography, {
+                    variant: "pi",
+                    children: formatMessage({
+                        id: translations.getTranslationKey('asset-details.noPreview'),
+                        defaultMessage: 'No preview available'
+                    })
+                })
+            ]
+        })
+    });
+};
+
+exports.AssetPreview = AssetPreview;
+//# sourceMappingURL=AssetPreview.js.map