cleaned up AssetCard.js + simplified AudioPreview audio tag

packages/core/upload/admin/src/components/AssetCard/AudioAssetCard.js

@@ -33,16 +33,7 @@ const AudioPreviewWrapper = styled(Box)`
   }
 `;
 
-export const AudioAssetCard = ({
-  name,
-  extension,
-  url,
-  mime,
-  selected,
-  onSelect,
-  onEdit,
-  size,
-}) => {
+export const AudioAssetCard = ({ name, extension, url, selected, onSelect, onEdit, size }) => {
   const { formatMessage } = useIntl();
 
   return (
@@ -50,7 +41,7 @@ export const AudioAssetCard = ({
       <CardHeader>
         <CardAsset size={size}>
           <AudioPreviewWrapper size={size}>
-            <AudioPreview url={url} mime={mime} alt={name} />
+            <AudioPreview url={url} alt={name} />
           </AudioPreviewWrapper>
         </CardAsset>
         {onSelect && <CardCheckbox value={selected} onValueChange={onSelect} />}
@@ -90,7 +81,6 @@ AudioAssetCard.defaultProps = {
 
 AudioAssetCard.propTypes = {
   extension: PropTypes.string.isRequired,
-  mime: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   onSelect: PropTypes.func,
   onEdit: PropTypes.func,

packages/core/upload/admin/src/components/AssetCard/AudioPreview.js

@@ -2,15 +2,13 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Box } from '@strapi/design-system/Box';
-import { VisuallyHidden } from '@strapi/design-system/VisuallyHidden';
 
-export const AudioPreview = ({ url, mime, alt }) => {
+export const AudioPreview = ({ url, alt }) => {
   return (
     <Box>
-      <audio controls>
-        <source src={url} type={mime} />
+      <audio controls src={url}>
+        {alt}
       </audio>
-      <VisuallyHidden as="figcaption">{alt}</VisuallyHidden>
     </Box>
   );
 };
@@ -20,5 +18,4 @@ AudioPreview.defaultProps = {};
 AudioPreview.propTypes = {
   alt: PropTypes.string.isRequired,
   url: PropTypes.string.isRequired,
-  mime: PropTypes.string.isRequired,
 };

packages/core/upload/admin/src/components/MediaLibraryInput/Carousel/CarouselAsset.js

@@ -44,11 +44,7 @@ export const CarouselAsset = ({ asset }) => {
   if (asset.mime.includes(AssetType.Audio)) {
     return (
       <AudioPreviewWrapper>
-        <AudioPreview
-          url={createAssetUrl(asset, true)}
-          mime={asset.mime}
-          alt={asset.alternativeText || asset.name}
-        />
+        <AudioPreview url={createAssetUrl(asset, true)} alt={asset.alternativeText || asset.name} />
       </AudioPreviewWrapper>
     );
   }