[B2BP-841] - VideoImage "stop" feature (#382)

* implement "stop" function * commit changeset * commit review changes * commit change names * commit review changes
pagopa · Jul 30, 2024 · e220164 · e220164
1 parent 545232b
commit e220164
Show file tree

Hide file tree

Showing 6 changed files with 38 additions and 12 deletions.
diff --git a/.changeset/fresh-cars-type.md b/.changeset/fresh-cars-type.md
@@ -0,0 +1,5 @@
+---
+"nextjs-website": minor
+---
+
+Implement "stop" video function
diff --git a/apps/nextjs-website/react-components/components/VideoImage/VideoImage.helpers.tsx b/apps/nextjs-website/react-components/components/VideoImage/VideoImage.helpers.tsx
@@ -20,6 +20,7 @@ export const renderVideo = ({
   loop,
   autoplay,
   fallback,
+  onClick,
   onVideoEnd,
 }: RenderVideoProps) => {
   // Determine the type based on the structure of src
@@ -46,6 +47,7 @@ export const renderVideo = ({
       loop={loop}
       autoPlay={autoplay}
       onEnded={onVideoEnd}
+      onClick={onClick}
       style={{
         overflow: 'hidden',
         width: '100%',

diff --git a/apps/nextjs-website/react-components/components/VideoImage/VideoImage.tsx b/apps/nextjs-website/react-components/components/VideoImage/VideoImage.tsx
@@ -23,12 +23,13 @@ const VideoImage = (props: VideoImageProps) => {
     theme,
     fallback,
     playButtonLabel,
+    pausedplayButtonLabel,
     isCentered = false,
   } = props;
   const videoRef = useRef<HTMLVideoElement>(null);
   const isVisible = useIsVisible(videoRef);
   const [error, setError] = useState(false);
-  const [isPlaying, setIsPlaying] = useState(false);
+  const [videoState, setVideoState] = useState<'playing' | 'paused' | 'stopped'>('stopped');
 
   const textColor = TextColor(theme);
 
@@ -41,15 +42,25 @@ const VideoImage = (props: VideoImageProps) => {
   }, [isVisible]);
 
   const play = (e?: React.MouseEvent) => {
-    try {
-      e?.preventDefault();
-      videoRef.current?.play();
-      setIsPlaying(true);
-    } catch (error) {}
+    e?.preventDefault();
+    if (videoRef.current) {
+      videoRef.current.play().then(() => {
+        setVideoState('playing');
+      }).catch(() => {
+        // Handle play error
+      });
+    }
   };
 
   const handleVideoEnd = () => {
-    setIsPlaying(false);
+    setVideoState('stopped');
+  };
+
+  const pause = () => {
+    if (videoRef.current) {
+      videoRef.current.pause();
+      setVideoState('paused');
+    }
   };
 
   const isImage = (src: string) => {
@@ -67,7 +78,7 @@ const VideoImage = (props: VideoImageProps) => {
       <div
         style={{ maxHeight: '600px', position: 'relative', overflow: 'hidden' }}
       >
-        {!full && !isPlaying && (
+        {!full && videoState !== 'playing' && (
           <div
             style={{
               position: 'absolute',
@@ -97,7 +108,9 @@ const VideoImage = (props: VideoImageProps) => {
                 zIndex: 50,
               }}
             >
-              <VideoText title={title} subtitle={subtitle} theme={theme} />
+              {videoState === 'stopped' && (
+                <VideoText title={title} subtitle={subtitle} theme={theme} />
+              )}
               {typeof src === 'string'
                 ? !isImage(src) &&
                   isVideo(src) && (
@@ -124,7 +137,7 @@ const VideoImage = (props: VideoImageProps) => {
                           alignSelf: 'flex-start',
                         }}
                       >
-                        {playButtonLabel}
+                        {videoState === 'paused' ? pausedplayButtonLabel : playButtonLabel}
                       </p>
                       <PlayArrowIcon
                         sx={{
@@ -160,7 +173,7 @@ const VideoImage = (props: VideoImageProps) => {
                           alignSelf: 'flex-start',
                         }}
                       >
-                        {playButtonLabel}
+                        {videoState === 'paused' ? pausedplayButtonLabel : playButtonLabel}
                       </p>
                       <PlayArrowIcon
                         sx={{
@@ -189,6 +202,7 @@ const VideoImage = (props: VideoImageProps) => {
                 autoplay,
                 fallback,
                 onVideoEnd: handleVideoEnd,
+                onClick: pause,
               })
           : isImage(src.url)
             ? renderImage({
@@ -204,6 +218,7 @@ const VideoImage = (props: VideoImageProps) => {
                 autoplay,
                 fallback,
                 onVideoEnd: handleVideoEnd,
+                onClick: pause,
               })}
       </div>
       {caption && (
@@ -217,4 +232,4 @@ const VideoImage = (props: VideoImageProps) => {
   );
 };
 
-export default VideoImage;
+export default VideoImage;
diff --git a/apps/nextjs-website/react-components/types/VideoImage/VideoImage.types.ts b/apps/nextjs-website/react-components/types/VideoImage/VideoImage.types.ts
@@ -12,6 +12,7 @@ export interface VideoImageProps extends CommonProps {
   reverse?: boolean;
   fallback?: string;
   playButtonLabel?: string;
+  pausedplayButtonLabel?: string;
   isCentered: boolean;
 }
 
@@ -34,6 +35,7 @@ export interface RenderVideoProps {
   autoplay: boolean;  
   onVideoEnd: () => void;
   fallback: React.ReactNode;
+  onClick?: () => void;
 }
 
 // Define TypeScript types for ImageProps

diff --git a/apps/nextjs-website/src/lib/fetch/types/PageSection.ts b/apps/nextjs-website/src/lib/fetch/types/PageSection.ts
@@ -254,6 +254,7 @@ const VideoImageSectionCodec = t.strict({
   theme: t.union([t.literal('light'), t.literal('dark')]),
   fallback: t.string,
   playButtonLabel: t.string,
+  pausedplayButtonLabel: t.string,
   sectionID: t.union([t.string, t.null]),
   isCentered: t.boolean,
 });

diff --git a/apps/nextjs-website/stories/VideoImage/videoImageCommons.tsx b/apps/nextjs-website/stories/VideoImage/videoImageCommons.tsx
@@ -13,6 +13,7 @@ const createVideoImageDefaults = (theme: 'dark' | 'light') => ({
   theme,
   fallback: 'Ops! Something went wrong... Please try again later.',
   playButtonLabel: 'Watch the video',
+  pausedplayButtonLabel: 'Resume video',
 });
 
 // Usage example