feat(AssetPlayer): Added useAspectRatio prop in order to keep media s…

…izes
leemonade · Jan 19, 2024 · a62c605 · a62c605
1 parent 56f76c4
commit a62c605
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 18 deletions.
diff --git 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
@@ -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) && (
                 <Box className={classes.coverWrapper} onClick={handleInitPlay}>
-                  <Box
-                    className={classes.buttonIcon}
-                    onClick={(e) => {
-                      e.stopPropagation();
-                      e.preventDefault();
-                    }}
-                  >
-                    <ButtonIcon fileType={'video'} />
-                  </Box>
+                  {showPlayButton && (
+                    <Box
+                      className={classes.buttonIcon}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        e.preventDefault();
+                      }}
+                    >
+                      <ButtonIcon fileType={'video'} />
+                    </Box>
+                  )}
                   {cover && <ImageLoader height="100%" src={cover} alt={name} />}
                 </Box>
               )}
@@ -352,9 +356,11 @@ const AssetPlayer = ({
           <>
             {media.isImage && (
               <Box className={classes.coverWrapper}>
-                <Box className={classes.buttonIcon}>
-                  <ButtonIcon fileType={'image'} />
-                </Box>
+                {showPlayButton && (
+                  <Box className={classes.buttonIcon}>
+                    <ButtonIcon fileType={'image'} />
+                  </Box>
+                )}
                 <ModalZoom canPlay={canPlay}>
                   <ImageLoader height="100%" src={cover} alt={name} />
                 </ModalZoom>

diff --git 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,