NFT collection view: animation/image (#2202)

Fixes #2196

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':

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 }
     />
   );