diff --git a/packages/leemons/src/common/AssetPlayer/AssetPlayer.constants.js b/packages/leemons/src/common/AssetPlayer/AssetPlayer.constants.js index 9997927fb..78a637339 100644 --- a/packages/leemons/src/common/AssetPlayer/AssetPlayer.constants.js +++ b/packages/leemons/src/common/AssetPlayer/AssetPlayer.constants.js @@ -26,6 +26,8 @@ export const ASSET_PLAYER_DEFAULT_PROPS = { useSchema: true, viewPDF: true, compact: false, + useAspectRatio: true, + showPlayButton: true, }; export const ASSET_PLAYER_PROP_TYPES = { asset: ASSET_PROPS, @@ -53,4 +55,6 @@ export const ASSET_PLAYER_PROP_TYPES = { useSchema: PropTypes.bool, viewPDF: PropTypes.bool, compact: PropTypes.bool, + useAspectRatio: PropTypes.bool, + showPlayButton: PropTypes.bool, }; diff --git a/packages/leemons/src/common/AssetPlayer/AssetPlayer.js b/packages/leemons/src/common/AssetPlayer/AssetPlayer.js index bf7b0b501..efe2c7ab2 100644 --- a/packages/leemons/src/common/AssetPlayer/AssetPlayer.js +++ b/packages/leemons/src/common/AssetPlayer/AssetPlayer.js @@ -3,7 +3,6 @@ import React, { useEffect, useMemo, useRef, useState } from 'react'; import ReactPlayer from 'react-player/lazy'; import { isFunction, isNil } from 'lodash'; import { Box, ImageLoader, Text, COLORS, ModalZoom, TextClamp } from '@bubbles-ui/components'; -import { DownloadIcon } from '@bubbles-ui/icons/outline'; import { AssetPlayerStyles } from './AssetPlayer.styles'; import { ASSET_PLAYER_DEFAULT_PROPS, ASSET_PLAYER_PROP_TYPES } from './AssetPlayer.constants'; import { ProgressBar } from './components/ProgressBar'; @@ -53,6 +52,8 @@ const AssetPlayer = ({ useSchema, viewPDF, compact, + useAspectRatio, + showPlayButton, ...props }) => { const { @@ -246,6 +247,7 @@ const AssetPlayer = ({ showPlayer, useAudioCard, fullScreenMode, + useAspectRatio, framed, }, { name: 'AssetPlayer' }, @@ -334,15 +336,17 @@ const AssetPlayer = ({ )} {(!showPlayer || media.isAudio) && ( - { - e.stopPropagation(); - e.preventDefault(); - }} - > - - + {showPlayButton && ( + { + e.stopPropagation(); + e.preventDefault(); + }} + > + + + )} {cover && } )} @@ -352,9 +356,11 @@ const AssetPlayer = ({ <> {media.isImage && ( - - - + {showPlayButton && ( + + + + )} diff --git a/packages/leemons/src/common/AssetPlayer/AssetPlayer.styles.js b/packages/leemons/src/common/AssetPlayer/AssetPlayer.styles.js index 27e502ff2..b03c37917 100644 --- a/packages/leemons/src/common/AssetPlayer/AssetPlayer.styles.js +++ b/packages/leemons/src/common/AssetPlayer/AssetPlayer.styles.js @@ -11,6 +11,7 @@ const AssetPlayerStyles = createStyles( framed, viewPDF, mediaRatio, + useAspectRatio, showPlayer, canPlay, useAudioCard, @@ -26,25 +27,29 @@ const AssetPlayerStyles = createStyles( }; } - const useMediaRatio = false; - // !media.isURL && !media.isImage && !media.isPDF && !(media.isAudio && useAudioCard); + const useMediaRatio = + useAspectRatio && + !media.isURL && + !media.isImage && + !media.isPDF && + !(media.isAudio && useAudioCard); return { rootWrapper: { width, - height: media.isPDF && viewPDF ? '100%' : height, + height: media.isPDF && viewPDF ? '100%' : !useAspectRatio && height, overflow: 'hidden', }, root: { position: 'relative', - height: '100%', // media.isPDF && viewPDF ? '100%' : useMediaRatio && 0, + height: (media.isPDF && viewPDF) || !useAspectRatio ? '100%' : useMediaRatio && 0, width: '100%', paddingBottom: useMediaRatio && `${mediaRatio * 100}%`, // 16/9 aspect ratio ...styles, ...framedProps, }, coverWrapper: { - position: 'absolute', + position: useAspectRatio ? 'relative' : 'absolute', cursor: canPlay && 'pointer', top: 0, bottom: 0,