Merge pull request #453 from Itheum/d-robert-stop-donating

fix: video player of nft media on mobile opening to full screen

Author: damienen

package.json

@@ -1,7 +1,9 @@
 {
   "name": "explorer-dapp",
   "description": "Itheum Explorer is a DApp for the public to explore and visualize data within the Itheum protocol",
-  "version": "1.15.6",
+ 
+  "version": "1.15.7",
+ 
   "author": "Itheum",
   "license": "GPL-3.0-or-later",
   "dependencies": {

src/components/ImageSlider.tsx

@@ -56,7 +56,9 @@ const ImageSlider: React.FC<ImageSliderProps> = (props) => {
             position: "absolute",
           }}>
           {media[imageIndex].type.includes("video") ? (
-            <video autoPlay loop src={media[imageIndex].url} className="md:w-auto base:w-[15rem] rounded-3xl base:h-[15rem] md:h-[18rem] mx-auto"></video>
+            <video autoPlay loop muted webkit-playsinline playsInline className=" md:w-auto base:w-[15rem] rounded-3xl base:h-[15rem] md:h-[18rem] mx-auto">
+              <source src={media[imageIndex]?.url} type="video/mp4" />
+            </video>
           ) : (
             <img className="md:w-auto base:w-[15rem] rounded-3xl base:h-[15rem] md:h-[18rem] mx-auto" src={media[imageIndex].url} onLoad={onLoad} />
           )}
@@ -77,7 +79,9 @@ const ImageSlider: React.FC<ImageSliderProps> = (props) => {
               setImageIndex(nextImageIndex);
             }}>
             {media[nextImageIndex].type.includes("video") ? (
-              <video autoPlay loop src={media[imageIndex].url} className="md:w-auto base:w-[15rem] rounded-3xl base:h-[15rem] md:h-[18rem] mx-auto"></video>
+              <video autoPlay loop muted webkit-playsinline playsInline className=" md:w-auto base:w-[15rem] rounded-3xl base:h-[15rem] md:h-[18rem] mx-auto">
+                <source src={media[nextImageIndex]?.url} type="video/mp4" />
+              </video>
             ) : (
               <img className="md:w-auto base:w-[15rem] rounded-3xl base:h-[15rem] md:h-[18rem] mx-auto" src={media[nextImageIndex].url} onLoad={onLoad} />
             )}

src/components/NftMediaComponent.tsx

@@ -16,8 +16,10 @@ const NftMediaComponent: React.FC<NftMediaComponentProps> = (props) => {
       {nftMedia.length === 0 && <img src="https://media.elrond.com/nfts/thumbnail/default.png" />}
       {nftMedia.length === 1 ? (
         <div className={cn("flex justify-center rounded-3xl overflow-hidden", mediaStyle)}>
-          {nftMedia[0].fileType === "video/mp4" ? (
-            <video autoPlay loop src={nftMedia[0]?.url} className="scale-[1.8]" />
+          {nftMedia[0]?.fileType === "video/mp4" ? (
+            <video autoPlay loop muted webkit-playsinline playsInline className="scale-[1.8]">
+              <source src={nftMedia[0]?.url} type="video/mp4" />
+            </video>
           ) : (
             <img className="rounded-3xl" src={!isLoading ? nftMedia[0]?.url : "https://media.elrond.com/nfts/thumbnail/default.png"} />
           )}

src/components/ThreeDCard.tsx

@@ -23,7 +23,9 @@ export function ThreeDCard(props: ThreeDCardProps) {
           <a href={`${MARKETPLACE_DETAILS_PAGE}${tokenIdentifier}${offerIndex ? "/offer-" + offerIndex : ""}`} target="_blank" className="cursor-pointer">
             {nftImgUrl.includes(".mp4") ? (
               <div className="flex relative h-48 w-48 rounded-3xl overflow-hidden justify-center items-center">
-                <video autoPlay loop src={nftImgUrl} className="scale-[1.8]  "></video>
+                <video autoPlay loop muted webkit-playsinline playsInline className="scale-[1.8]  ">
+                  <source src={nftImgUrl} type="video/mp4" />
+                </video>
               </div>
             ) : (
               <img src={nftImgUrl} className="h-48 w-48 object-cover rounded-3xl group-hover/card:shadow-xl" alt="thumbnail" />

src/pages/Account/MyListed/index.tsx

@@ -76,7 +76,7 @@ export const MyListed = () => {
                 <Card className="border-[0.5px] dark:border-slate-100/30 border-slate-300 bg-transparent rounded-[2.37rem] xl:w-[330px] w-[296px] pb-5">
                   <CardContent className="flex flex-col p-6 ">
                     <div className="mb-4">
-                      <NftMediaComponent nftMedia={dataNft.media as NftMedia[]} isLoading={isLoading} mediaStyle="mb-8 base:h-[15rem]  md:h-[18rem]" />
+                      <NftMediaComponent nftMedia={dataNft.media as NftMedia[]} isLoading={isLoading} mediaStyle="mb-2 base:h-[15rem] md:h-[18rem]" />
                     </div>
                     <div className="xl:h-[300px] h-[315px]">
                       <div className="mb-1">
@@ -102,7 +102,7 @@ export const MyListed = () => {
                       </div>
 
                       <div className="mt-4 mb-1 text-start">
-                        <h5 className="text-center !text-xl !font-[Clash-Medium] pb-2">Data NFT Detail</h5>
+                        <h5 className="text-start !text-xl !font-[Clash-Medium] pb-2">Data NFT Detail</h5>
                       </div>
                       <div className="grid grid-cols-12 mb-1">
                         <span className="col-span-4 opacity-6">Title:</span>