yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-09-25 16:29:34 +00:00
Code Issues Packages Projects Releases Wiki Activity

cleaned up AssetCard.js + simplified AudioPreview audio tag

Browse Source
This commit is contained in:
Michiel Sioen 2022-02-10 20:29:59 +01:00
parent 7292d2b2c9
commit ab02c6135e
3 changed files with 6 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
packages/core/upload/admin/src/components/AssetCard/AudioAssetCard.js
View File

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

9
packages/core/upload/admin/src/components/AssetCard/AudioPreview.js
View File

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

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

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