From 4cc4e43bff73b9093ea33198b26b09175c9c3d82 Mon Sep 17 00:00:00 2001
From: isstuev <isstuev@gmail.com>
Date: Tue, 7 May 2024 14:54:03 +0200
Subject: [PATCH] remove video autoplay from lists

---
 ui/address/tokens/NFTItem.tsx        | 1 +
 ui/shared/nft/NftMedia.tsx           | 5 +++--
 ui/shared/nft/NftVideo.tsx           | 4 +++-
 ui/shared/nft/NftVideoFullscreen.tsx | 1 +
 ui/shared/nft/utils.ts               | 1 -
 ui/token/TokenInventoryItem.tsx      | 1 +
 6 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/ui/address/tokens/NFTItem.tsx b/ui/address/tokens/NFTItem.tsx
index 9ed44b2248..6b15e9ab1b 100644
--- a/ui/address/tokens/NFTItem.tsx
+++ b/ui/address/tokens/NFTItem.tsx
@@ -31,6 +31,7 @@ const NFTItem = ({ token, value, isLoading, withTokenLink, ...tokenInstance }: P
           animationUrl={ tokenInstance?.animation_url ?? null }
           imageUrl={ tokenInstance?.image_url ?? null }
           isLoading={ isLoading }
+          autoplayVideo={ false }
         />
       </Link>
       <Flex justifyContent="space-between" w="100%" flexWrap="wrap">
diff --git a/ui/shared/nft/NftMedia.tsx b/ui/shared/nft/NftMedia.tsx
index 51dd03b6e5..a67bdf7231 100644
--- a/ui/shared/nft/NftMedia.tsx
+++ b/ui/shared/nft/NftMedia.tsx
@@ -18,9 +18,10 @@ interface Props {
   className?: string;
   isLoading?: boolean;
   withFullscreen?: boolean;
+  autoplayVideo?: boolean;
 }
 
-const NftMedia = ({ imageUrl, animationUrl, className, isLoading, withFullscreen }: Props) => {
+const NftMedia = ({ imageUrl, animationUrl, className, isLoading, withFullscreen, autoplayVideo }: Props) => {
   const [ isMediaLoading, setIsMediaLoading ] = React.useState(true);
   const [ isLoadingError, setIsLoadingError ] = React.useState(false);
 
@@ -71,7 +72,7 @@ const NftMedia = ({ imageUrl, animationUrl, className, isLoading, withFullscreen
 
     switch (type) {
       case 'video':
-        return <NftVideo { ...props }/>;
+        return <NftVideo { ...props } autoPlay={ autoplayVideo }/>;
       case 'html':
         return <NftHtml { ...props }/>;
       case 'image':
diff --git a/ui/shared/nft/NftVideo.tsx b/ui/shared/nft/NftVideo.tsx
index a58cefbbda..3ffc51c27b 100644
--- a/ui/shared/nft/NftVideo.tsx
+++ b/ui/shared/nft/NftVideo.tsx
@@ -5,15 +5,17 @@ import { mediaStyleProps, videoPlayProps } from './utils';
 
 interface Props {
   src: string;
+  autoPlay?: boolean;
   onLoad: () => void;
   onError: () => void;
   onClick?: () => void;
 }
 
-const NftVideo = ({ src, onLoad, onError, onClick }: Props) => {
+const NftVideo = ({ src, autoPlay = true, onLoad, onError, onClick }: Props) => {
   return (
     <chakra.video
       { ...videoPlayProps }
+      autoPlay={ autoPlay }
       src={ src }
       onCanPlayThrough={ onLoad }
       onError={ onError }
diff --git a/ui/shared/nft/NftVideoFullscreen.tsx b/ui/shared/nft/NftVideoFullscreen.tsx
index 07fa250b1e..26a7081a41 100644
--- a/ui/shared/nft/NftVideoFullscreen.tsx
+++ b/ui/shared/nft/NftVideoFullscreen.tsx
@@ -18,6 +18,7 @@ const NftVideoFullscreen = ({ src, isOpen, onClose }: Props) => {
         src={ src }
         maxH="90vh"
         maxW="90vw"
+        autoPlay={ true }
       />
     </NftMediaFullscreenModal>
   );
diff --git a/ui/shared/nft/utils.ts b/ui/shared/nft/utils.ts
index 90410798f6..3c0ce90bac 100644
--- a/ui/shared/nft/utils.ts
+++ b/ui/shared/nft/utils.ts
@@ -41,7 +41,6 @@ export const mediaStyleProps = {
 };
 
 export const videoPlayProps = {
-  autoPlay: true,
   disablePictureInPicture: true,
   loop: true,
   muted: true,
diff --git a/ui/token/TokenInventoryItem.tsx b/ui/token/TokenInventoryItem.tsx
index 6add374550..dc504a80b5 100644
--- a/ui/token/TokenInventoryItem.tsx
+++ b/ui/token/TokenInventoryItem.tsx
@@ -23,6 +23,7 @@ const TokenInventoryItem = ({ item, token, isLoading }: Props) => {
       animationUrl={ item.animation_url }
       imageUrl={ item.image_url }
       isLoading={ isLoading }
+      autoplayVideo={ false }
     />
   );