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,