{"version":3,"file":"AssetPreview.mjs","sources":["../../../../../admin/src/components/EditAssetDialog/PreviewBox/AssetPreview.tsx"],"sourcesContent":["/* eslint-disable jsx-a11y/media-has-caption */\nimport * as React from 'react';\n\nimport MuxPlayer from '@mux/mux-player-react';\nimport { Box, Flex, Typography } from '@strapi/design-system';\nimport { useIntl } from 'react-intl';\nimport { styled, useTheme } from 'styled-components';\n\nimport { AssetType } from '../../../enums';\nimport { typeFromMime } from '../../../utils';\nimport { getFileIconComponent } from '../../../utils/icons';\n\nconst CardAsset = styled(Flex)`\n  min-height: 26.4rem;\n  border-radius: ${({ theme }) => theme.borderRadius} ${({ theme }) => theme.borderRadius} 0 0;\n  background: linear-gradient(\n    180deg,\n    ${({ theme }) => theme.colors.neutral0} 0%,\n    ${({ theme }) => theme.colors.neutral100} 121.48%\n  );\n`;\n\ninterface AssetPreviewProps extends React.HTMLAttributes<HTMLElement> {\n  mime: string;\n  name: string;\n  url: string;\n}\n\nexport const AssetPreview = React.forwardRef<\n  HTMLImageElement | HTMLVideoElement | HTMLAudioElement,\n  AssetPreviewProps\n>(({ mime, url, name, ...props }, ref) => {\n  const theme = useTheme();\n\n  const assetType = typeFromMime(mime);\n\n  const { formatMessage } = useIntl();\n\n  if (assetType === AssetType.Image) {\n    return (\n      <img\n        ref={ref as React.ForwardedRef<HTMLImageElement>}\n        src={url}\n        alt={name}\n        crossOrigin=\"anonymous\"\n        {...props}\n      />\n    );\n  }\n\n  if (assetType === AssetType.Video) {\n    return <MuxPlayer src={url} accentColor={theme.colors.primary500} />;\n  }\n\n  if (assetType === AssetType.Audio) {\n    return (\n      <Box margin=\"5\">\n        <audio controls src={url} ref={ref as React.ForwardedRef<HTMLAudioElement>} {...props}>\n          {name}\n        </audio>\n      </Box>\n    );\n  }\n\n  // getFileIconComponent will handle all other file types, eg. PDF, CSV, XLS, ZIP\n  // If the file type is not recognized, the default icon will be used\n  const IconComponent = getFileIconComponent(assetType);\n  return (\n    <CardAsset width=\"100%\" justifyContent=\"center\" {...props}>\n      <Flex gap={2} direction=\"column\" alignItems=\"center\">\n        <IconComponent aria-label={name} fill=\"neutral500\" width={24} height={24} />\n        <Typography textColor=\"neutral500\" variant=\"pi\">\n          {formatMessage({\n            id: 'noPreview',\n            defaultMessage: 'No preview available',\n          })}\n        </Typography>\n      </Flex>\n    </CardAsset>\n  );\n});\n\nAssetPreview.displayName = 'AssetPreview';\n"],"names":["CardAsset","styled","Flex","theme","borderRadius","colors","neutral0","neutral100","AssetPreview","React","forwardRef","mime","url","name","props","ref","useTheme","assetType","typeFromMime","formatMessage","useIntl","AssetType","Image","_jsx","img","src","alt","crossOrigin","Video","MuxPlayer","accentColor","primary500","Audio","Box","margin","audio","controls","IconComponent","getFileIconComponent","width","justifyContent","_jsxs","gap","direction","alignItems","aria-label","fill","height","Typography","textColor","variant","id","defaultMessage","displayName"],"mappings":";;;;;;;;;;;;;;AAYA,MAAMA,SAAAA,GAAYC,MAAAA,CAAOC,IAAAA,CAAK;;AAEb,iBAAA,EAAE,CAAC,EAAEC,KAAK,EAAE,GAAKA,MAAMC,YAAY,CAAC,CAAC,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAMC,YAAY,CAAC;;;IAGtF,EAAE,CAAC,EAAED,KAAK,EAAE,GAAKA,KAAAA,CAAME,MAAM,CAACC,QAAQ,CAAC;IACvC,EAAE,CAAC,EAAEH,KAAK,EAAE,GAAKA,KAAAA,CAAME,MAAM,CAACE,UAAU,CAAC;;AAE7C,CAAC;AAQM,MAAMC,YAAAA,iBAAeC,KAAAA,CAAMC,UAAU,CAG1C,CAAC,EAAEC,IAAI,EAAEC,GAAG,EAAEC,IAAI,EAAE,GAAGC,OAAO,EAAEC,GAAAA,GAAAA;AAChC,IAAA,MAAMZ,KAAAA,GAAQa,QAAAA,EAAAA;AAEd,IAAA,MAAMC,YAAYC,YAAAA,CAAaP,IAAAA,CAAAA;IAE/B,MAAM,EAAEQ,aAAa,EAAE,GAAGC,OAAAA,EAAAA;IAE1B,IAAIH,SAAAA,KAAcI,SAAAA,CAAUC,KAAK,EAAE;AACjC,QAAA,qBACEC,GAAA,CAACC,KAAAA,EAAAA;YACCT,GAAAA,EAAKA,GAAAA;YACLU,GAAAA,EAAKb,GAAAA;YACLc,GAAAA,EAAKb,IAAAA;YACLc,WAAAA,EAAY,WAAA;AACX,YAAA,GAAGb;;AAGV,IAAA;IAEA,IAAIG,SAAAA,KAAcI,SAAAA,CAAUO,KAAK,EAAE;AACjC,QAAA,qBAAOL,GAAA,CAACM,SAAAA,EAAAA;YAAUJ,GAAAA,EAAKb,GAAAA;YAAKkB,WAAAA,EAAa3B,KAAAA,CAAME,MAAM,CAAC0B;;AACxD,IAAA;IAEA,IAAId,SAAAA,KAAcI,SAAAA,CAAUW,KAAK,EAAE;AACjC,QAAA,qBACET,GAAA,CAACU,GAAAA,EAAAA;YAAIC,MAAAA,EAAO,GAAA;AACV,YAAA,QAAA,gBAAAX,GAAA,CAACY,OAAAA,EAAAA;gBAAMC,QAAQ,EAAA,IAAA;gBAACX,GAAAA,EAAKb,GAAAA;gBAAKG,GAAAA,EAAKA,GAAAA;AAA8C,gBAAA,GAAGD,KAAK;AAClFD,gBAAAA,QAAAA,EAAAA;;;AAIT,IAAA;;;AAIA,IAAA,MAAMwB,gBAAgBC,oBAAAA,CAAqBrB,SAAAA,CAAAA;AAC3C,IAAA,qBACEM,GAAA,CAACvB,SAAAA,EAAAA;QAAUuC,KAAAA,EAAM,MAAA;QAAOC,cAAAA,EAAe,QAAA;AAAU,QAAA,GAAG1B,KAAK;AACvD,QAAA,QAAA,gBAAA2B,IAAA,CAACvC,IAAAA,EAAAA;YAAKwC,GAAAA,EAAK,CAAA;YAAGC,SAAAA,EAAU,QAAA;YAASC,UAAAA,EAAW,QAAA;;8BAC1CrB,GAAA,CAACc,aAAAA,EAAAA;oBAAcQ,YAAAA,EAAYhC,IAAAA;oBAAMiC,IAAAA,EAAK,YAAA;oBAAaP,KAAAA,EAAO,EAAA;oBAAIQ,MAAAA,EAAQ;;8BACtExB,GAAA,CAACyB,UAAAA,EAAAA;oBAAWC,SAAAA,EAAU,YAAA;oBAAaC,OAAAA,EAAQ,IAAA;8BACxC/B,aAAAA,CAAc;wBACbgC,EAAAA,EAAI,WAAA;wBACJC,cAAAA,EAAgB;AAClB,qBAAA;;;;;AAKV,CAAA;AAEA5C,YAAAA,CAAa6C,WAAW,GAAG,cAAA;;;;"}