{"version":3,"file":"AssetPreview.mjs","sources":["../../../../../../../admin/src/future/pages/Assets/components/AssetDetails/AssetPreview.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { Box, Flex, Loader, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled } from 'styled-components';\n\nimport { AssetType } from '../../../../enums';\nimport { prefixFileUrlWithBackendUrl } from '../../../../utils/files';\nimport { getAssetIcon } from '../../../../utils/getAssetIcon';\nimport { getTranslationKey } from '../../../../utils/translations';\n\nimport type {\n  File,\n  AssetWithPopulatedCreatedBy,\n} from '../../../../../../../shared/contracts/files';\n\n/* -------------------------------------------------------------------------------------------------\n * Styled components\n * -----------------------------------------------------------------------------------------------*/\n\nconst PreviewContainer = styled(Box)`\n  position: relative;\n  width: 100%;\n  aspect-ratio: 16 / 9;\n  max-height: 24rem;\n  overflow: hidden;\n  border-radius: ${({ theme }) => theme.borderRadius};\n  padding: ${({ theme }) => theme.spaces[3]};\n  background: repeating-conic-gradient(\n      ${({ theme }) => theme.colors.neutral100} 0% 25%,\n      transparent 0% 50%\n    )\n    50% / 20px 20px;\n`;\n\nconst AssetContainer = styled(Flex)`\n  justify-content: center;\n  position: relative;\n  z-index: 2;\n  width: 100%;\n  height: 100%;\n`;\n\nconst StyledImage = styled.img`\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n`;\n\nconst StyledVideo = styled.video`\n  max-width: 100%;\n  max-height: 100%;\n  object-fit: contain;\n`;\n\nconst StyledAudio = styled.audio`\n  width: 100%;\n`;\n\nconst StyledPdfIframe = styled.iframe`\n  width: 100%;\n  height: 100%;\n  min-height: 200px;\n  border: none;\n`;\n\nconst IconFallback = styled(Flex)`\n  height: 100%;\n  aspect-ratio: 1;\n  width: auto;\n  max-width: 100%;\n  margin: 0 auto;\n  color: ${({ theme }) => theme.colors.neutral500};\n  background: ${({ theme }) => theme.colors.neutral150};\n`;\n\nconst LoaderOverlay = styled(Flex)`\n  position: absolute;\n  inset: 0;\n  z-index: 1;\n`;\n\n/* -------------------------------------------------------------------------------------------------\n * AssetLoader\n * -----------------------------------------------------------------------------------------------*/\n\nconst AssetLoader = () => {\n  const { formatMessage } = useIntl();\n  return (\n    <LoaderOverlay justifyContent=\"center\" alignItems=\"center\">\n      <Loader>{formatMessage({ id: 'app.loading', defaultMessage: 'Loading...' })}</Loader>\n    </LoaderOverlay>\n  );\n};\n\n/* -------------------------------------------------------------------------------------------------\n * AssetPreviewContent\n * -----------------------------------------------------------------------------------------------*/\n\ninterface AssetPreviewProps {\n  asset: File | AssetWithPopulatedCreatedBy;\n}\n\nexport const AssetPreview = ({ asset }: AssetPreviewProps) => {\n  const { formatMessage } = useIntl();\n  const { alternativeText, ext, mime, url } = asset;\n  const mediaUrl = prefixFileUrlWithBackendUrl(url);\n\n  const [isMediaLoaded, setIsMediaLoaded] = React.useState(false);\n  React.useEffect(() => {\n    setIsMediaLoaded(false);\n  }, [mediaUrl]);\n\n  if (mime?.includes(AssetType.Image)) {\n    const imageUrl = prefixFileUrlWithBackendUrl(url);\n\n    if (imageUrl) {\n      return (\n        <PreviewContainer>\n          {!isMediaLoaded && <AssetLoader />}\n          <AssetContainer>\n            <StyledImage\n              src={imageUrl}\n              alt={alternativeText || asset.name || ''}\n              onLoad={() => setIsMediaLoaded(true)}\n              onError={() => setIsMediaLoaded(true)}\n            />\n          </AssetContainer>\n        </PreviewContainer>\n      );\n    }\n  }\n\n  if (mime?.includes(AssetType.Video) && mediaUrl) {\n    return (\n      <PreviewContainer>\n        {!isMediaLoaded && <AssetLoader />}\n        <AssetContainer>\n          <StyledVideo\n            src={mediaUrl}\n            controls\n            title={asset.name}\n            onLoadedData={() => setIsMediaLoaded(true)}\n            onError={() => setIsMediaLoaded(true)}\n          >\n            {formatMessage({\n              id: getTranslationKey('asset-details.videoNotSupported'),\n              defaultMessage: 'Your browser does not support the video tag.',\n            })}\n          </StyledVideo>\n        </AssetContainer>\n      </PreviewContainer>\n    );\n  }\n\n  if (mime?.includes(AssetType.Audio) && mediaUrl) {\n    return (\n      <PreviewContainer>\n        {!isMediaLoaded && <AssetLoader />}\n        <AssetContainer>\n          <Flex\n            width=\"100%\"\n            padding={4}\n            justifyContent=\"center\"\n            alignItems=\"center\"\n            height=\"100%\"\n            minHeight=\"12rem\"\n          >\n            <StyledAudio\n              src={mediaUrl}\n              controls\n              onLoadedData={() => setIsMediaLoaded(true)}\n              onError={() => setIsMediaLoaded(true)}\n            />\n          </Flex>\n        </AssetContainer>\n      </PreviewContainer>\n    );\n  }\n\n  const isPdf =\n    ext?.toLowerCase() === 'pdf' || ext?.toLowerCase() === '.pdf' || mime === 'application/pdf';\n  if (isPdf && mediaUrl) {\n    return (\n      <PreviewContainer>\n        {!isMediaLoaded && <AssetLoader />}\n        <AssetContainer>\n          <StyledPdfIframe\n            src={`${mediaUrl}#toolbar=0`}\n            title={asset.name}\n            onLoad={() => setIsMediaLoaded(true)}\n          />\n        </AssetContainer>\n      </PreviewContainer>\n    );\n  }\n\n  const DocIcon = getAssetIcon(mime, ext);\n  return (\n    <PreviewContainer>\n      <IconFallback\n        justifyContent=\"center\"\n        alignItems=\"center\"\n        gap={1}\n        direction=\"column\"\n        hasRadius\n      >\n        <DocIcon width={24} height={24} />\n        <Typography variant=\"pi\">\n          {formatMessage({\n            id: getTranslationKey('asset-details.noPreview'),\n            defaultMessage: 'No preview available',\n          })}\n        </Typography>\n      </IconFallback>\n    </PreviewContainer>\n  );\n};\n"],"names":["PreviewContainer","styled","Box","theme","borderRadius","spaces","colors","neutral100","AssetContainer","Flex","StyledImage","img","StyledVideo","video","StyledAudio","audio","StyledPdfIframe","iframe","IconFallback","neutral500","neutral150","LoaderOverlay","AssetLoader","formatMessage","useIntl","_jsx","justifyContent","alignItems","Loader","id","defaultMessage","AssetPreview","asset","alternativeText","ext","mime","url","mediaUrl","prefixFileUrlWithBackendUrl","isMediaLoaded","setIsMediaLoaded","React","useState","useEffect","includes","AssetType","Image","imageUrl","_jsxs","src","alt","name","onLoad","onError","Video","controls","title","onLoadedData","getTranslationKey","Audio","width","padding","height","minHeight","isPdf","toLowerCase","DocIcon","getAssetIcon","gap","direction","hasRadius","Typography","variant"],"mappings":"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"}