Merge pull request #1895 from blockscout/fe-1872

remove video autoplay from lists
blockscout · May 8, 2024 · cc97093 · cc97093
2 parents 3d60059 + 4cc4e43
commit cc97093
Show file tree

Hide file tree

Showing 6 changed files with 9 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -23,6 +23,7 @@ const TokenInventoryItem = ({ item, token, isLoading }: Props) => {
       animationUrl={ item.animation_url }
       imageUrl={ item.image_url }
       isLoading={ isLoading }
+      autoplayVideo={ false }
     />
   );