From c6f773eb34bb686e7dcbc4ec3dee34d7470a2a86 Mon Sep 17 00:00:00 2001
From: r41ph <ralph.galan@regen.network>
Date: Tue, 10 Sep 2024 09:45:57 +0100
Subject: [PATCH] feat: APP-313 add video controls (#2461)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Ralph <“ralph.galan@regen.network>
---
 tailwind.common.js                            |  3 ++
 .../atoms/PlayButton/PlayButton.stories.tsx   | 15 ------
 .../atoms/PlayButton/PlayButton.tsx           | 16 ------
 .../PlayPauseButton.stories.tsx               | 26 ++++++++++
 .../PlayPauseButton.styles.ts}                |  4 +-
 .../atoms/PlayPauseButton/PlayPauseButton.tsx | 32 ++++++++++++
 .../cards/ArticleCard/ArticleCard.tsx         |  4 +-
 .../src/components/icons/PauseIcon.tsx        | 21 ++++++++
 .../src/components/icons/icons.stories.tsx    |  4 +-
 .../inputs/new/FileDrop/FileDrop.File.tsx     |  4 +-
 .../components/organisms/Gallery/Gallery.tsx  | 15 ++----
 .../organisms/PostFiles/PostFiles.Drawer.tsx  |  4 +-
 .../PostFiles/components/FilePreview.tsx      | 17 ++-----
 .../PostFiles/components/VideoPreview.tsx     | 50 +++++++++++++++++++
 14 files changed, 149 insertions(+), 66 deletions(-)
 delete mode 100644 web-components/src/components/atoms/PlayButton/PlayButton.stories.tsx
 delete mode 100644 web-components/src/components/atoms/PlayButton/PlayButton.tsx
 create mode 100644 web-components/src/components/atoms/PlayPauseButton/PlayPauseButton.stories.tsx
 rename web-components/src/components/atoms/{PlayButton/PlayButton.styles.ts => PlayPauseButton/PlayPauseButton.styles.ts} (84%)
 create mode 100644 web-components/src/components/atoms/PlayPauseButton/PlayPauseButton.tsx
 create mode 100644 web-components/src/components/icons/PauseIcon.tsx
 create mode 100644 web-components/src/components/organisms/PostFiles/components/VideoPreview.tsx

diff --git a/tailwind.common.js b/tailwind.common.js
index 48d75b22ec..b1f8e93dac 100644
--- a/tailwind.common.js
+++ b/tailwind.common.js
@@ -85,6 +85,9 @@ module.exports = {
       fontWeight: {
         inherit: "inherit",
       },
+      backgroundColor: {
+        transparent: 'transparent',
+      },
     },
   },
   plugins: [],
diff --git a/web-components/src/components/atoms/PlayButton/PlayButton.stories.tsx b/web-components/src/components/atoms/PlayButton/PlayButton.stories.tsx
deleted file mode 100644
index 808958bf8a..0000000000
--- a/web-components/src/components/atoms/PlayButton/PlayButton.stories.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meta, StoryObj } from '@storybook/react';
-
-import { PlayButton } from './PlayButton';
-
-export default {
-  title: 'atoms/PlayButton',
-  component: PlayButton,
-} as Meta<typeof PlayButton>;
-
-type Story = StoryObj<typeof PlayButton>;
-export const Basic: Story = {
-  render: args => <PlayButton {...args} />,
-};
-
-Basic.args = {};
diff --git a/web-components/src/components/atoms/PlayButton/PlayButton.tsx b/web-components/src/components/atoms/PlayButton/PlayButton.tsx
deleted file mode 100644
index a0a0835a71..0000000000
--- a/web-components/src/components/atoms/PlayButton/PlayButton.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { cn } from '../../../utils/styles/cn';
-import PlayIcon from '../../icons/PlayIcon';
-import { usePlayButtonStyles } from './PlayButton.styles';
-
-type Props = { className?: string };
-
-const PlayButton = ({ className }: Props) => {
-  const { classes: styles } = usePlayButtonStyles();
-  return (
-    <div className={cn(styles.play, className)}>
-      <PlayIcon width="50%" height="50%" />
-    </div>
-  );
-};
-
-export { PlayButton };
diff --git a/web-components/src/components/atoms/PlayPauseButton/PlayPauseButton.stories.tsx b/web-components/src/components/atoms/PlayPauseButton/PlayPauseButton.stories.tsx
new file mode 100644
index 0000000000..c9fa480af9
--- /dev/null
+++ b/web-components/src/components/atoms/PlayPauseButton/PlayPauseButton.stories.tsx
@@ -0,0 +1,26 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { PlayPauseButton } from './PlayPauseButton';
+
+export default {
+  title: 'atoms/PlayPauseButton',
+  component: PlayPauseButton,
+} as Meta<typeof PlayPauseButton>;
+
+type Story = StoryObj<typeof PlayPauseButton>;
+
+export const Play: Story = {
+  render: args => <PlayPauseButton {...args} />,
+};
+
+Play.args = {
+  playing: false,
+};
+
+export const Pause: Story = {
+  render: args => <PlayPauseButton {...args} />,
+};
+
+Pause.args = {
+  playing: true,
+};
diff --git a/web-components/src/components/atoms/PlayButton/PlayButton.styles.ts b/web-components/src/components/atoms/PlayPauseButton/PlayPauseButton.styles.ts
similarity index 84%
rename from web-components/src/components/atoms/PlayButton/PlayButton.styles.ts
rename to web-components/src/components/atoms/PlayPauseButton/PlayPauseButton.styles.ts
index 72f8dc1825..c9f973f765 100644
--- a/web-components/src/components/atoms/PlayButton/PlayButton.styles.ts
+++ b/web-components/src/components/atoms/PlayPauseButton/PlayPauseButton.styles.ts
@@ -1,8 +1,8 @@
 import { Theme } from '@mui/material/styles';
 import { makeStyles } from 'tss-react/mui';
 
-export const usePlayButtonStyles = makeStyles()((theme: Theme) => ({
-  play: {
+export const usePlayPauseButtonStyles = makeStyles()((theme: Theme) => ({
+  button: {
     background: theme.palette.primary.main,
     borderRadius: '50%',
     width: theme.spacing(17.5),
diff --git a/web-components/src/components/atoms/PlayPauseButton/PlayPauseButton.tsx b/web-components/src/components/atoms/PlayPauseButton/PlayPauseButton.tsx
new file mode 100644
index 0000000000..55fae99108
--- /dev/null
+++ b/web-components/src/components/atoms/PlayPauseButton/PlayPauseButton.tsx
@@ -0,0 +1,32 @@
+import { cn } from '../../../utils/styles/cn';
+import { PauseIcon } from '../../icons/PauseIcon';
+import PlayIcon from '../../icons/PlayIcon';
+import { usePlayPauseButtonStyles } from './PlayPauseButton.styles';
+
+type Props = {
+  className?: string;
+  playing?: boolean;
+  handlePlayPause?: () => void;
+};
+
+export const PlayPauseButton = ({
+  className,
+  playing = false,
+  handlePlayPause,
+}: Props) => {
+  const { classes: styles } = usePlayPauseButtonStyles();
+  return (
+    <button
+      onClick={handlePlayPause ? handlePlayPause : undefined}
+      className="outline-none cursor-pointer bg-transparent border-none"
+    >
+      <div className={cn(styles.button, className)}>
+        {playing ? (
+          <PauseIcon width="100%" height="100%" />
+        ) : (
+          <PlayIcon width="50%" height="50%" />
+        )}
+      </div>
+    </button>
+  );
+};
diff --git a/web-components/src/components/cards/ArticleCard/ArticleCard.tsx b/web-components/src/components/cards/ArticleCard/ArticleCard.tsx
index 4fdf95c34c..200edc8f03 100644
--- a/web-components/src/components/cards/ArticleCard/ArticleCard.tsx
+++ b/web-components/src/components/cards/ArticleCard/ArticleCard.tsx
@@ -1,6 +1,6 @@
 import { Box } from '@mui/material';
 
-import { PlayButton } from '../../atoms/PlayButton/PlayButton';
+import { PlayPauseButton } from '../../atoms/PlayPauseButton/PlayPauseButton';
 import OutlinedButton from '../../buttons/OutlinedButton';
 import { Body } from '../../typography';
 import MediaCard from '../MediaCard/MediaCard';
@@ -56,7 +56,7 @@ export default function ArticleCard({
       elevation={1}
       draftText={draftText}
     >
-      {play && <PlayButton />}
+      {play && <PlayPauseButton />}
       <Body size="sm" sx={{ flex: '1 0 auto', py: [2.5, 2], px: [4, 5] }}>
         <Box component="span" sx={{ fontWeight: 'bold' }}>
           {author}
diff --git a/web-components/src/components/icons/PauseIcon.tsx b/web-components/src/components/icons/PauseIcon.tsx
new file mode 100644
index 0000000000..12ad4c5bb5
--- /dev/null
+++ b/web-components/src/components/icons/PauseIcon.tsx
@@ -0,0 +1,21 @@
+export const PauseIcon = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg viewBox="0 0 70 70" {...props}>
+    <g id="Pause icon">
+      <circle
+        id="Ellipse 3"
+        cx="35"
+        cy="35"
+        r="35"
+        fill="white"
+        fill-opacity="0.9"
+      />
+      <path
+        id="Union"
+        fill-rule="evenodd"
+        clip-rule="evenodd"
+        d="M32 20H25V50H32V20ZM45 20H38V50H45V20Z"
+        fill="#4FB573"
+      />
+    </g>
+  </svg>
+);
diff --git a/web-components/src/components/icons/icons.stories.tsx b/web-components/src/components/icons/icons.stories.tsx
index 076cf42369..91b6f7211f 100644
--- a/web-components/src/components/icons/icons.stories.tsx
+++ b/web-components/src/components/icons/icons.stories.tsx
@@ -68,6 +68,7 @@ import { OpenInNewIcon } from './OpenInNewIcon';
 import OrganizationIcon from './OrganizationIcon';
 import { OtherDocumentsIcon } from './OtherDocumentsIcon';
 import OutlinedCheckIcon from './OutlinedCheckIcon';
+import { PauseIcon } from './PauseIcon';
 import { PdfFileIcon } from './PdfFileIcon';
 import PendingIcon from './PendingIcon';
 import PhoneIcon from './PhoneIcon';
@@ -132,9 +133,9 @@ import VerifiedIcon from './VerifiedIcon';
 import { VideoIcon } from './VideoIcon';
 import WalletErrorIcon from './WalletErrorIcon';
 import { WalletIcon } from './WalletIcon';
+import WarningIcon from './WarningIcon';
 import WhitepaperIcon from './WhitepaperIcon';
 import ZoomIcon from './ZoomIcon';
-import WarningIcon from './WarningIcon';
 
 export default {
   title: 'Icons',
@@ -306,6 +307,7 @@ export const allIcons = (): JSX.Element => (
     />
     <LabeledIcon icon={<PinIcon fontSize="small" />} label="PinIcon" />
     <LabeledIcon icon={<PlayIcon height={'20px'} />} label="PlayIcon" />
+    <LabeledIcon icon={<PauseIcon height={'50px'} />} label="PauseIcon" />
     <LabeledIcon icon={<PlusIcon />} label="PlusIcon" />
     <LabeledIcon icon={<PointerIcon />} label="PointerIcon" />
     <LabeledIcon icon={<PrefinanceIcon />} label="PrefinanceIcon" />
diff --git a/web-components/src/components/inputs/new/FileDrop/FileDrop.File.tsx b/web-components/src/components/inputs/new/FileDrop/FileDrop.File.tsx
index 69661f9a0c..badd3d1503 100644
--- a/web-components/src/components/inputs/new/FileDrop/FileDrop.File.tsx
+++ b/web-components/src/components/inputs/new/FileDrop/FileDrop.File.tsx
@@ -9,9 +9,9 @@ import {
   useTheme,
 } from '@mui/material';
 import { Feature } from 'geojson';
+import { PlayPauseButton } from 'web-components/src/components/atoms/PlayPauseButton/PlayPauseButton';
 
 import { cn } from '../../../../utils/styles/cn';
-import { PlayButton } from '../../../atoms/PlayButton/PlayButton';
 import ArrowDownIcon from '../../../icons/ArrowDownIcon';
 import { DragIcon } from '../../../icons/DragIcon';
 import EditIcon from '../../../icons/EditIcon';
@@ -124,7 +124,7 @@ export const FileDropFile = ({
               'absolute top-0 left-0 bg-grey-700 rounded-[5px] overflow-hidden',
             )}
           />
-          <PlayButton />
+          <PlayPauseButton />
         </>
       ) : isPdf(mimeType) ? (
         <PdfPreview
diff --git a/web-components/src/components/organisms/Gallery/Gallery.tsx b/web-components/src/components/organisms/Gallery/Gallery.tsx
index c3c153bfef..0b2ad31524 100644
--- a/web-components/src/components/organisms/Gallery/Gallery.tsx
+++ b/web-components/src/components/organisms/Gallery/Gallery.tsx
@@ -1,12 +1,10 @@
 import { useState } from 'react';
-import ReactPlayer from 'react-player/es6';
 import { Box, SxProps, useTheme } from '@mui/material';
 import { AnimatePresence, motion, PanInfo } from 'framer-motion';
 import { wrap } from 'popmotion';
 
 import { Theme } from '../../../theme/muiTheme';
 import { sxToArray } from '../../../utils/mui/sxToArray';
-import { PlayButton } from '../../atoms/PlayButton/PlayButton';
 import { OpenInNewIcon } from '../../icons/OpenInNewIcon';
 import {
   isAudio,
@@ -20,6 +18,7 @@ import {
 } from '../../inputs/new/FileDrop/FileDrop.utils';
 import { PdfPreview } from '../PostFiles/components/PdfPreview';
 import { TextOrIconFilePreview } from '../PostFiles/components/TextOrIconFilePreview';
+import { VideoPreview } from '../PostFiles/components/VideoPreview';
 import { FilesPreviews } from '../PostFiles/PostFiles.types';
 import { getColors } from '../PostFiles/PostFiles.utils';
 import { GalleryBottomBar } from './Gallery.BottomBar';
@@ -122,17 +121,9 @@ const Gallery = ({
         <AnimatePresence initial={false} custom={direction}>
           {allImages || isImage(item?.mimeType) ? (
             <motion.img key={page} src={item?.url} {...motionSettings} />
-          ) : isVideo(item?.mimeType) ? (
+          ) : isVideo(item?.mimeType) && item?.url ? (
             <motion.div key={page} {...motionSettings}>
-              <ReactPlayer url={item?.url} width="100%" height="100%" />
-              <a
-                target="_blank"
-                rel="noopener noreferrer"
-                href={item?.url}
-                className="outline-none cursor-pointer"
-              >
-                <PlayButton className="w-100 h-100 sm:top-[33%]" />
-              </a>
+              <VideoPreview url={item?.url} buttonClassName="lg:top-[42%]" />
             </motion.div>
           ) : (
             <motion.div key={page} {...motionSettings}>
diff --git a/web-components/src/components/organisms/PostFiles/PostFiles.Drawer.tsx b/web-components/src/components/organisms/PostFiles/PostFiles.Drawer.tsx
index 3be02181a5..e344536c7c 100644
--- a/web-components/src/components/organisms/PostFiles/PostFiles.Drawer.tsx
+++ b/web-components/src/components/organisms/PostFiles/PostFiles.Drawer.tsx
@@ -2,10 +2,10 @@ import { useEffect, useRef, useState } from 'react';
 import ReactPlayer from 'react-player/es6';
 import { Slide } from '@mui/material';
 import { Point } from 'geojson';
+import { PlayPauseButton } from 'web-components/src/components/atoms/PlayPauseButton/PlayPauseButton';
 
 import { UseStateSetter } from '../../../types/react/useState';
 import { cn } from '../../../utils/styles/cn';
-import { PlayButton } from '../../atoms/PlayButton/PlayButton';
 import BreadcrumbIcon from '../../icons/BreadcrumbIcon';
 import { Image } from '../../image';
 import {
@@ -113,7 +113,7 @@ const PostFilesDrawer = ({
                           width="100%"
                           height="100%"
                         />
-                        <PlayButton className="w-[28px] h-[28px]" />
+                        <PlayPauseButton className="w-[28px] h-[28px] top-[40%]" />
                       </div>
                     )}
                     <FileBody file={file} />
diff --git a/web-components/src/components/organisms/PostFiles/components/FilePreview.tsx b/web-components/src/components/organisms/PostFiles/components/FilePreview.tsx
index 5f42009d1c..777edb9d1a 100644
--- a/web-components/src/components/organisms/PostFiles/components/FilePreview.tsx
+++ b/web-components/src/components/organisms/PostFiles/components/FilePreview.tsx
@@ -1,8 +1,6 @@
-import ReactPlayer from 'react-player/es6';
 import { Box } from '@mui/material';
 
 import { cn } from '../../../../utils/styles/cn';
-import { PlayButton } from '../../../atoms/PlayButton/PlayButton';
 import {
   isAudio,
   isCsv,
@@ -18,6 +16,7 @@ import { PostFile } from '../PostFiles';
 import { getColors } from '../PostFiles.utils';
 import { PdfPreview } from './PdfPreview';
 import { TextOrIconFilePreview } from './TextOrIconFilePreview';
+import { VideoPreview } from './VideoPreview';
 
 export type FileToPreview = Pick<PostFile, 'mimeType' | 'url' | 'name'>;
 type Props = {
@@ -66,18 +65,8 @@ const FilePreview = ({
           linearGradientClassName,
         )}
       />
-      {video ? (
-        <>
-          <ReactPlayer url={url} width="100%" height="100%" />
-          <a
-            target="_blank"
-            rel="noopener noreferrer"
-            href={url}
-            className="outline-none cursor-pointer"
-          >
-            <PlayButton className="w-50 h-50" />
-          </a>
-        </>
+      {video && url ? (
+        <VideoPreview url={url} />
       ) : isPdf(mimeType) ? (
         <PdfPreview
           file={url}
diff --git a/web-components/src/components/organisms/PostFiles/components/VideoPreview.tsx b/web-components/src/components/organisms/PostFiles/components/VideoPreview.tsx
new file mode 100644
index 0000000000..2e33facc01
--- /dev/null
+++ b/web-components/src/components/organisms/PostFiles/components/VideoPreview.tsx
@@ -0,0 +1,50 @@
+import { useState } from 'react';
+import ReactPlayer from 'react-player/es6';
+import { PlayPauseButton } from 'web-components/src/components/atoms/PlayPauseButton/PlayPauseButton';
+
+export const VideoPreview = ({
+  url,
+  buttonClassName = '',
+}: {
+  url: string;
+  buttonClassName?: string;
+}) => {
+  const [playing, setPlaying] = useState(false);
+  const [hovered, setHovered] = useState(false);
+
+  const handlePlayPause = () => {
+    setPlaying(!playing);
+  };
+  const handleMouseEnter = () => {
+    setHovered(true);
+  };
+  const handleMouseLeave = () => {
+    setHovered(false);
+  };
+
+  return (
+    <div className="relative h-full">
+      <ReactPlayer
+        url={url}
+        width="100%"
+        height="100%"
+        playing={playing}
+        controls={false}
+        onEnded={() => setPlaying(false)}
+      />
+      <div
+        className={`z-50 absolute top-0 left-0 w-full h-full flex justify-center items-center ${
+          playing ? 'transition-opacity duration-500 opacity-0' : ''
+        } ${playing && hovered ? 'hover:opacity-100' : ''}`}
+        onMouseEnter={playing ? handleMouseEnter : undefined}
+        onMouseLeave={playing ? handleMouseLeave : undefined}
+      >
+        <PlayPauseButton
+          playing={playing}
+          handlePlayPause={handlePlayPause}
+          className={buttonClassName}
+        />
+      </div>
+    </div>
+  );
+};