From fc1deedef24f05b9d2e74d416ec38fd92773f6ef Mon Sep 17 00:00:00 2001
From: tom goriunov <tom@ohhhh.me>
Date: Fri, 6 Sep 2024 14:20:03 +0400
Subject: [PATCH] NFT collection view: animation/image (#2202)

Fixes #2196
---
 ui/shared/nft/NftMedia.tsx |  2 +-
 ui/shared/nft/NftVideo.tsx | 17 ++++++++++++++++-
 2 files changed, 17 insertions(+), 2 deletions(-)

diff --git a/ui/shared/nft/NftMedia.tsx b/ui/shared/nft/NftMedia.tsx
index a67bdf7231..cc572fce4e 100644
--- a/ui/shared/nft/NftMedia.tsx
+++ b/ui/shared/nft/NftMedia.tsx
@@ -72,7 +72,7 @@ const NftMedia = ({ imageUrl, animationUrl, className, isLoading, withFullscreen
 
     switch (type) {
       case 'video':
-        return <NftVideo { ...props } autoPlay={ autoplayVideo }/>;
+        return <NftVideo { ...props } autoPlay={ autoplayVideo } poster={ imageUrl || undefined }/>;
       case 'html':
         return <NftHtml { ...props }/>;
       case 'image':
diff --git a/ui/shared/nft/NftVideo.tsx b/ui/shared/nft/NftVideo.tsx
index 3ffc51c27b..6a3a710dfa 100644
--- a/ui/shared/nft/NftVideo.tsx
+++ b/ui/shared/nft/NftVideo.tsx
@@ -5,22 +5,37 @@ import { mediaStyleProps, videoPlayProps } from './utils';
 
 interface Props {
   src: string;
+  poster?: string;
   autoPlay?: boolean;
   onLoad: () => void;
   onError: () => void;
   onClick?: () => void;
 }
 
-const NftVideo = ({ src, autoPlay = true, onLoad, onError, onClick }: Props) => {
+const NftVideo = ({ src, poster, autoPlay = true, onLoad, onError, onClick }: Props) => {
+  const ref = React.useRef<HTMLVideoElement>(null);
+
+  const handleMouseEnter = React.useCallback(() => {
+    !autoPlay && ref.current?.play();
+  }, [ autoPlay ]);
+
+  const handleMouseLeave = React.useCallback(() => {
+    !autoPlay && ref.current?.pause();
+  }, [ autoPlay ]);
+
   return (
     <chakra.video
+      ref={ ref }
       { ...videoPlayProps }
       autoPlay={ autoPlay }
+      poster={ poster }
       src={ src }
       onCanPlayThrough={ onLoad }
       onError={ onError }
       borderRadius="md"
       onClick={ onClick }
+      onMouseEnter={ handleMouseEnter }
+      onMouseLeave={ handleMouseLeave }
       { ...mediaStyleProps }
     />
   );