@chayns-components/gallery
Version:
A set of beautiful React components for developing your own applications with chayns.
42 lines • 1.45 kB
JavaScript
import { Icon } from '@chayns-components/core';
import React from 'react';
import { StyledMediaItemImage, StyledMediaItemImageWrapper, StyledMediaItemPlayIcon, StyledMediaItemVideo, StyledMediaItemVideoWrapper, StyledMotionMediaItem } from './MediaItem.styles';
const MediaItem = ({
fileItem,
isEditMode,
openSelectedFile,
ratio
}) => /*#__PURE__*/React.createElement(StyledMotionMediaItem, {
animate: {
opacity: 1
},
initial: {
opacity: 0
},
exit: {
opacity: 0
},
transition: {
duration: 3.2
}
}, fileItem.uploadedFile && 'thumbnailUrl' in fileItem.uploadedFile ? /*#__PURE__*/React.createElement(StyledMediaItemVideoWrapper, {
onClick: () => openSelectedFile(fileItem),
$ratio: ratio
}, /*#__PURE__*/React.createElement(StyledMediaItemPlayIcon, null, /*#__PURE__*/React.createElement(Icon, {
size: isEditMode ? 30 : 50,
icons: ['fa fa-play']
})), /*#__PURE__*/React.createElement(StyledMediaItemVideo, {
poster: fileItem.uploadedFile.thumbnailUrl
}, /*#__PURE__*/React.createElement("source", {
src: fileItem.uploadedFile.url,
type: "video/mp4"
}))) : /*#__PURE__*/React.createElement(StyledMediaItemImageWrapper, {
onClick: () => openSelectedFile(fileItem),
$ratio: ratio
}, /*#__PURE__*/React.createElement(StyledMediaItemImage, {
draggable: false,
src: fileItem.uploadedFile?.url
})));
MediaItem.displayName = 'MediaItem';
export default MediaItem;
//# sourceMappingURL=MediaItem.js.map