feat(AssetPlayer): Refactor to new design of rebranding (LibraryDetail)

leemonade · Jan 18, 2024 · 1c54630 · 1c54630
1 parent c600232
commit 1c54630
Show file tree

Hide file tree

Showing 20 changed files with 160 additions and 36 deletions.
diff --git a/packages/icons/outline/esm/index.d.ts b/packages/icons/outline/esm/index.d.ts
@@ -163,6 +163,7 @@ export { default as RemoveIcon } from './RemoveIcon'
 export { default as SchoolBuildingIcon } from './SchoolBuildingIcon'
 export { default as SchoolTeacherFemaleIcon } from './SchoolTeacherFemaleIcon'
 export { default as SchoolTeacherMaleIcon } from './SchoolTeacherMaleIcon'
+export { default as SearchPlusIcon } from './SearchPlusIcon'
 export { default as SearchIcon } from './SearchIcon'
 export { default as SendEmailEnvelopeIcon } from './SendEmailEnvelopeIcon'
 export { default as SendMessageIcon } from './SendMessageIcon'

diff --git a/packages/icons/outline/esm/index.js b/packages/icons/outline/esm/index.js
@@ -163,6 +163,7 @@ export { default as RemoveIcon } from './RemoveIcon.js'
 export { default as SchoolBuildingIcon } from './SchoolBuildingIcon.js'
 export { default as SchoolTeacherFemaleIcon } from './SchoolTeacherFemaleIcon.js'
 export { default as SchoolTeacherMaleIcon } from './SchoolTeacherMaleIcon.js'
+export { default as SearchPlusIcon } from './SearchPlusIcon.js'
 export { default as SearchIcon } from './SearchIcon.js'
 export { default as SendEmailEnvelopeIcon } from './SendEmailEnvelopeIcon.js'
 export { default as SendMessageIcon } from './SendMessageIcon.js'

diff --git a/packages/icons/outline/index.d.ts b/packages/icons/outline/index.d.ts
@@ -163,6 +163,7 @@ export { default as RemoveIcon } from './RemoveIcon'
 export { default as SchoolBuildingIcon } from './SchoolBuildingIcon'
 export { default as SchoolTeacherFemaleIcon } from './SchoolTeacherFemaleIcon'
 export { default as SchoolTeacherMaleIcon } from './SchoolTeacherMaleIcon'
+export { default as SearchPlusIcon } from './SearchPlusIcon'
 export { default as SearchIcon } from './SearchIcon'
 export { default as SendEmailEnvelopeIcon } from './SendEmailEnvelopeIcon'
 export { default as SendMessageIcon } from './SendMessageIcon'

diff --git a/packages/icons/outline/index.js b/packages/icons/outline/index.js
@@ -163,6 +163,7 @@ module.exports.RemoveIcon = require("./RemoveIcon.js")
 module.exports.SchoolBuildingIcon = require("./SchoolBuildingIcon.js")
 module.exports.SchoolTeacherFemaleIcon = require("./SchoolTeacherFemaleIcon.js")
 module.exports.SchoolTeacherMaleIcon = require("./SchoolTeacherMaleIcon.js")
+module.exports.SearchPlusIcon = require("./SearchPlusIcon.js")
 module.exports.SearchIcon = require("./SearchIcon.js")
 module.exports.SendEmailEnvelopeIcon = require("./SendEmailEnvelopeIcon.js")
 module.exports.SendMessageIcon = require("./SendMessageIcon.js")

diff --git a/packages/icons/solid/esm/index.d.ts b/packages/icons/solid/esm/index.d.ts
@@ -76,6 +76,7 @@ export { default as ElectionDebateIcon } from './ElectionDebateIcon'
 export { default as ExclamationIcon } from './ExclamationIcon'
 export { default as ExcludeIcon } from './ExcludeIcon'
 export { default as ExpandFullIcon } from './ExpandFullIcon'
+export { default as ExpandIcon } from './ExpandIcon'
 export { default as FacebookIcon } from './FacebookIcon'
 export { default as FavoriteHeartIcon } from './FavoriteHeartIcon'
 export { default as FlagIcon } from './FlagIcon'

diff --git a/packages/icons/solid/esm/index.js b/packages/icons/solid/esm/index.js
@@ -76,6 +76,7 @@ export { default as ElectionDebateIcon } from './ElectionDebateIcon.js'
 export { default as ExclamationIcon } from './ExclamationIcon.js'
 export { default as ExcludeIcon } from './ExcludeIcon.js'
 export { default as ExpandFullIcon } from './ExpandFullIcon.js'
+export { default as ExpandIcon } from './ExpandIcon.js'
 export { default as FacebookIcon } from './FacebookIcon.js'
 export { default as FavoriteHeartIcon } from './FavoriteHeartIcon.js'
 export { default as FlagIcon } from './FlagIcon.js'

diff --git a/packages/icons/solid/index.d.ts b/packages/icons/solid/index.d.ts
@@ -76,6 +76,7 @@ export { default as ElectionDebateIcon } from './ElectionDebateIcon'
 export { default as ExclamationIcon } from './ExclamationIcon'
 export { default as ExcludeIcon } from './ExcludeIcon'
 export { default as ExpandFullIcon } from './ExpandFullIcon'
+export { default as ExpandIcon } from './ExpandIcon'
 export { default as FacebookIcon } from './FacebookIcon'
 export { default as FavoriteHeartIcon } from './FavoriteHeartIcon'
 export { default as FlagIcon } from './FlagIcon'

diff --git a/packages/icons/solid/index.js b/packages/icons/solid/index.js
@@ -76,6 +76,7 @@ module.exports.ElectionDebateIcon = require("./ElectionDebateIcon.js")
 module.exports.ExclamationIcon = require("./ExclamationIcon.js")
 module.exports.ExcludeIcon = require("./ExcludeIcon.js")
 module.exports.ExpandFullIcon = require("./ExpandFullIcon.js")
+module.exports.ExpandIcon = require("./ExpandIcon.js")
 module.exports.FacebookIcon = require("./FacebookIcon.js")
 module.exports.FavoriteHeartIcon = require("./FavoriteHeartIcon.js")
 module.exports.FlagIcon = require("./FlagIcon.js")

diff --git a/packages/icons/src/outline/search-plus.svg b/packages/icons/src/outline/search-plus.svg
diff --git a/packages/icons/src/solid/expand.svg b/packages/icons/src/solid/expand.svg
diff --git a/packages/leemons/src/common/AssetPlayer/AssetPlayer.js b/packages/leemons/src/common/AssetPlayer/AssetPlayer.js
@@ -1,15 +1,16 @@
+/* eslint-disable no-nested-ternary */
 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 { ControlsPlayIcon } from '@bubbles-ui/icons/solid';
 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';
 import { AudioCardPlayer } from './components/AudioCardPlayer';
 import { PDFPlayer } from './components/PDFPlayer';
 import { Aframe } from './components/Aframe';
+import { ButtonIcon } from './components/ButtonIcon';
 
 const format = (seconds) => {
   const date = new Date(seconds * 1000);
@@ -333,8 +334,14 @@ const AssetPlayer = ({
               )}
               {(!showPlayer || media.isAudio) && (
                 <Box className={classes.coverWrapper} onClick={handleInitPlay}>
-                  <Box className={classes.coverShadow}>
-                    <ControlsPlayIcon height={32} width={32} className={classes.playIcon} />
+                  <Box
+                    className={classes.buttonIcon}
+                    onClick={(e) => {
+                      e.stopPropagation();
+                      e.preventDefault();
+                    }}
+                  >
+                    <ButtonIcon fileType={'video'} />
                   </Box>
                   {cover && <ImageLoader height="100%" src={cover} alt={name} />}
                 </Box>
@@ -345,6 +352,9 @@ const AssetPlayer = ({
           <>
             {media.isImage && (
               <Box className={classes.coverWrapper}>
+                <Box className={classes.buttonIcon}>
+                  <ButtonIcon fileType={'image'} />
+                </Box>
                 <ModalZoom canPlay={canPlay}>
                   <ImageLoader height="100%" src={cover} alt={name} />
                 </ModalZoom>
@@ -362,6 +372,9 @@ const AssetPlayer = ({
                   pointerEvents: !canPlay && 'none',
                 }}
               >
+                <Box className={classes.buttonIcon}>
+                  <ButtonIcon fileType={'document'} />
+                </Box>
                 <ImageLoader height="auto" src={cover} alt={name} />
                 {!hideURLInfo && (
                   <Box style={{ padding: 8 }}>
@@ -394,13 +407,17 @@ const AssetPlayer = ({
                 <PDFPlayer pdf={url} labels={pdfLabels} useSchema={useSchema} />
               ) : (
                 <Box className={classes.pdfCover}>
+                  <Box className={classes.buttonIcon} onClick={openPdfHandler}>
+                    <ButtonIcon fileType={'document'} />
+                  </Box>
                   <ImageLoader height="auto" src={cover} alt={name} />
-                  <DownloadIcon className={classes.pdfDownloadIcon} onClick={openPdfHandler} />
                 </Box>
               )
             ) : null}
             {!media.isImage && !media.isURL && !media.isPDF && !media.isAFrame3D && (
-              <Box className={classes.fileIcon}>{icon}</Box>
+              <Box className={classes.buttonIcon}>
+                <ButtonIcon fileType={'file'} />
+              </Box>
             )}
           </>
         )}

diff --git a/packages/leemons/src/common/AssetPlayer/AssetPlayer.stories.js b/packages/leemons/src/common/AssetPlayer/AssetPlayer.stories.js
@@ -90,6 +90,8 @@ export const Playground = Template.bind({});
 Playground.args = {
   ...ASSET_PLAYER_DEFAULT_PROPS,
   test_asset: 'video',
+  height: 200,
+  width: 496,
   pdfLabels: {
     pageLabel: 'Página',
     paginatorLabel: 'de',

diff --git a/packages/leemons/src/common/AssetPlayer/AssetPlayer.styles.js b/packages/leemons/src/common/AssetPlayer/AssetPlayer.styles.js
@@ -53,6 +53,17 @@ const AssetPlayerStyles = createStyles(
         pointerEvents: showPlayer && 'none',
         userSelect: 'none',
       },
+      reactPlayer: {
+        backgroundColor: 'black',
+      },
+      buttonIcon: {
+        position: 'absolute',
+        zIndex: 10,
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+        pointerEvents: 'none',
+      },
       coverShadow: {
         position: 'absolute',
         height: '100%',

diff --git a/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.constants.js b/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.constants.js
@@ -0,0 +1,9 @@
+import propTypes from 'prop-types';
+
+export const BUTTONICON_DEFAULT_PROPS = {
+  fileType: '',
+};
+
+export const BUTTONICON_PROP_TYPES = {
+  fileType: propTypes.string,
+};
diff --git a/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.js b/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.js
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Box } from '@bubbles-ui/components';
+import { DownloadIcon, OpenIcon, SearchPlusIcon } from '@bubbles-ui/icons/outline';
+import { ControlsPlayIcon } from '@bubbles-ui/icons/solid';
+
+import { ButtonIconStyles } from './ButtonIcon.styles';
+import { BUTTONICON_DEFAULT_PROPS, BUTTONICON_PROP_TYPES } from './ButtonIcon.constants';
+
+const ButtonIcon = ({ fileType }) => {
+  const { classes } = ButtonIconStyles({});
+  const fileTypeIcon = {
+    image: (
+      <SearchPlusIcon
+        color={'white'}
+        width={24}
+        height={24}
+        style={{ marginTop: 8, marginLeft: 6 }}
+      />
+    ),
+    file: <DownloadIcon color={'white'} />,
+    document: <OpenIcon color={'white'} width={18} height={18} />,
+    video: <ControlsPlayIcon color={'white'} />,
+  };
+
+  return (
+    <Box
+      className={classes.root}
+      onClick={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+      }}
+    >
+      <Box>{fileType && fileTypeIcon[fileType]}</Box>
+    </Box>
+  );
+};
+
+ButtonIcon.popTypes = BUTTONICON_PROP_TYPES;
+ButtonIcon.defaultProps = BUTTONICON_DEFAULT_PROPS;
+ButtonIcon.displayName = 'ButtonIcon';
+
+export { ButtonIcon };
diff --git a/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.styles.js b/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/ButtonIcon.styles.js
@@ -0,0 +1,19 @@
+import { createStyles } from '@bubbles-ui/components';
+
+const ButtonIconStyles = createStyles((theme) => ({
+  root: {
+    display: 'flex',
+    width: '40px',
+    maxHeight: '40px',
+    padding: '12px 16px 8px 16px',
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: '4px',
+    backgroundColor: theme.other.buttonIconCard.background.color.primary.default,
+    '&:hover': {
+      backgroundColor: theme.other.buttonIconCard.background.color.primary.hover,
+    },
+  },
+}));
+
+export { ButtonIconStyles };
diff --git a/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/index.js b/packages/leemons/src/common/AssetPlayer/components/ButtonIcon/index.js
@@ -0,0 +1 @@
+export * from './ButtonIcon';
diff --git a/packages/leemons/src/common/AssetPlayer/components/ProgressBar/ProgressBar.js b/packages/leemons/src/common/AssetPlayer/components/ProgressBar/ProgressBar.js
@@ -1,15 +1,15 @@
 import React, { useEffect } from 'react';
-import { PROGRESS_BAR_DEFAULT_PROPS, PROGRESS_BAR_PROP_TYPES } from './ProgressBar.constants';
-import { ProgressBarStyles } from './ProgressBar.styles';
 import { Box, Text } from '@bubbles-ui/components';
 import {
-  ExpandFullIcon,
+  ExpandIcon,
   ControlsPlayIcon,
   ControlsPauseIcon,
   VolumeControlLowIcon,
   VolumeControlOffIcon,
 } from '@bubbles-ui/icons/solid';
 import { ShrinkIcon } from '@bubbles-ui/icons/outline';
+import { ProgressBarStyles } from './ProgressBar.styles';
+import { PROGRESS_BAR_DEFAULT_PROPS, PROGRESS_BAR_PROP_TYPES } from './ProgressBar.constants';
 
 const ProgressBar = ({
   seekValue,
@@ -47,25 +47,6 @@ const ProgressBar = ({
   const { classes } = ProgressBarStyles({}, { name: 'ProgressBar' });
   return (
     <Box className={classes.progressBarWrapper}>
-      <Box className={classes.progressBar}>
-        <Box
-          className={classes.progressBarValue}
-          style={{
-            width: `${playedPercentage}%`,
-          }}
-        />
-        <input
-          className={classes.progressBarSeekSlider}
-          type={'range'}
-          min={0}
-          max={0.999999}
-          step={'any'}
-          value={seekValue}
-          onChange={handleSeekChange}
-          onMouseDown={handleSeekMouseDown}
-          onMouseUp={handleSeekMouseUp}
-        />
-      </Box>
       <Box className={classes.controlBar}>
         <Box onClick={() => setIsPlaying(!isPlaying)} className={classes.iconWrapper}>
           {isPlaying ? (
@@ -94,10 +75,29 @@ const ProgressBar = ({
           style={{ flex: 1, justifyContent: 'right', marginRight: 2 }}
           onClick={handleFullscreenChange}
         >
+          <Box className={classes.progressBar}>
+            <Box
+              className={classes.progressBarValue}
+              style={{
+                width: `${playedPercentage}%`,
+              }}
+            />
+            <input
+              className={classes.progressBarSeekSlider}
+              type={'range'}
+              min={0}
+              max={0.999999}
+              step={'any'}
+              value={seekValue}
+              onChange={handleSeekChange}
+              onMouseDown={handleSeekMouseDown}
+              onMouseUp={handleSeekMouseUp}
+            />
+          </Box>
           {fullScreenMode ? (
             <ShrinkIcon height={20} width={20} className={classes.whiteIcon} />
           ) : (
-            <ExpandFullIcon height={20} width={20} className={classes.whiteIcon} />
+            <ExpandIcon height={20} width={20} className={classes.whiteIcon} />
           )}
         </Box>
       </Box>

diff --git a/packages/leemons/src/common/AssetPlayer/components/ProgressBar/ProgressBar.styles.js b/packages/leemons/src/common/AssetPlayer/components/ProgressBar/ProgressBar.styles.js
@@ -1,6 +1,6 @@
 import { createStyles, pxToRem } from '@bubbles-ui/components';
 
-export const ProgressBarStyles = createStyles((theme, {}) => {
+const ProgressBarStyles = createStyles((theme, {}) => {
   const globalTheme = theme.other.global;
 
   return {
@@ -10,12 +10,15 @@ export const ProgressBarStyles = createStyles((theme, {}) => {
       flexDirection: 'column',
       gap: globalTheme.spacing.gap.lg,
       padding: globalTheme.spacing.padding.md,
-      left: 0,
-      right: 0,
-      bottom: 0,
+      left: 16,
+      right: 16,
+      bottom: 5,
       zIndex: 2,
-      background:
-        'linear-gradient(180deg, rgba(50, 50, 50, 0) 13.54%, rgba(54, 54, 54, 0.609375) 73.44%, #383838 100%)',
+      borderRadius: 4,
+      backgroundColor: theme.other.buttonIconCard.background.color.primary.default,
+      '&:hover': {
+        backgroundColor: theme.other.buttonIconCard.background.color.primary.hover,
+      },
     },
     progressBar: {
       WebkitAppearance: 'none',
@@ -25,6 +28,7 @@ export const ProgressBarStyles = createStyles((theme, {}) => {
       borderRadius: 4,
       overflow: 'hidden',
       position: 'relative',
+      marginRight: 14,
     },
     progressBarValue: {
       height: '100%',
@@ -86,3 +90,5 @@ export const ProgressBarStyles = createStyles((theme, {}) => {
     },
   };
 });
+
+export { ProgressBarStyles };
diff --git a/packages/leemons/src/library/LibraryCard/mock/data.js b/packages/leemons/src/library/LibraryCard/mock/data.js
@@ -55,9 +55,8 @@ export const VIDEO_ASSET = {
   tags: ['Rome', 'Docu'],
   cover:
     'https://images.unsplash.com/photo-1627552245715-77d79bbf6fe2?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=640&q=80',
-  url: 'https://test-videos.co.uk/vids/bigbuckbunny/mp4/h264/360/Big_Buck_Bunny_360_10s_1MB.mp4',
+  url: 'https://www.rickydelgado.es/wp-content/uploads/2020/01/Ricky-Delgado-Felicitación-navideña-Olipes-2018.mp4',
 };
-
 export const IMAGE_ASSET = {
   color: '#DC5571',
   name: 'El ritmo de la guerra',