From 42cde5cfdbdd5af714b4d0b0c6fdc2317ae3a9b5 Mon Sep 17 00:00:00 2001
From: Benedek Robert George <benedek_robert2001@yahoo.com>
Date: Thu, 16 May 2024 16:26:39 +0300
Subject: [PATCH 1/3] fix: video player of nft media on mobile opening to full
 screen

---
 src/components/ImageSlider.tsx       | 22 ++++++++++++++++++++--
 src/components/NftMediaComponent.tsx |  6 ++++--
 src/components/ThreeDCard.tsx        |  4 +++-
 src/pages/Account/MyListed/index.tsx |  4 ++--
 4 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/components/ImageSlider.tsx b/src/components/ImageSlider.tsx
index a29d2f26..0ecdf0a7 100644
--- a/src/components/ImageSlider.tsx
+++ b/src/components/ImageSlider.tsx
@@ -56,7 +56,16 @@ 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
+              controls
+              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 +86,16 @@ 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
+                controls
+                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} />
             )}
diff --git a/src/components/NftMediaComponent.tsx b/src/components/NftMediaComponent.tsx
index e5f88d92..d6f8bff6 100644
--- a/src/components/NftMediaComponent.tsx
+++ b/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 controls 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"} />
           )}
diff --git a/src/components/ThreeDCard.tsx b/src/components/ThreeDCard.tsx
index 8a6abdd2..61942069 100644
--- a/src/components/ThreeDCard.tsx
+++ b/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 controls 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" />
diff --git a/src/pages/Account/MyListed/index.tsx b/src/pages/Account/MyListed/index.tsx
index 90fd3cd0..d22bf53c 100644
--- a/src/pages/Account/MyListed/index.tsx
+++ b/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>

From 4abaced71d576dae07b77e4f51c5a3544f74f701 Mon Sep 17 00:00:00 2001
From: Benedek Robert George <benedek_robert2001@yahoo.com>
Date: Thu, 16 May 2024 16:38:18 +0300
Subject: [PATCH 2/3] chore: version bump

---
 package.json | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/package.json b/package.json
index a797aeb5..f7ebb610 100644
--- a/package.json
+++ b/package.json
@@ -1,9 +1,7 @@
 {
   "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": {

From 9b51aace5c7dc925b51e3e5909623587a6ca6c2b Mon Sep 17 00:00:00 2001
From: Benedek Robert George <benedek_robert2001@yahoo.com>
Date: Thu, 16 May 2024 16:52:33 +0300
Subject: [PATCH 3/3] fix: remove controls out of the video

---
 src/components/ImageSlider.tsx       | 18 ++----------------
 src/components/NftMediaComponent.tsx |  2 +-
 src/components/ThreeDCard.tsx        |  2 +-
 3 files changed, 4 insertions(+), 18 deletions(-)

diff --git a/src/components/ImageSlider.tsx b/src/components/ImageSlider.tsx
index 0ecdf0a7..40990916 100644
--- a/src/components/ImageSlider.tsx
+++ b/src/components/ImageSlider.tsx
@@ -56,14 +56,7 @@ const ImageSlider: React.FC<ImageSliderProps> = (props) => {
             position: "absolute",
           }}>
           {media[imageIndex].type.includes("video") ? (
-            <video
-              autoPlay
-              loop
-              muted
-              controls
-              webkit-playsinline
-              playsInline
-              className=" md:w-auto base:w-[15rem] rounded-3xl base:h-[15rem] md:h-[18rem] mx-auto">
+            <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>
           ) : (
@@ -86,14 +79,7 @@ const ImageSlider: React.FC<ImageSliderProps> = (props) => {
               setImageIndex(nextImageIndex);
             }}>
             {media[nextImageIndex].type.includes("video") ? (
-              <video
-                autoPlay
-                loop
-                muted
-                controls
-                webkit-playsinline
-                playsInline
-                className=" md:w-auto base:w-[15rem] rounded-3xl base:h-[15rem] md:h-[18rem] mx-auto">
+              <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>
             ) : (
diff --git a/src/components/NftMediaComponent.tsx b/src/components/NftMediaComponent.tsx
index d6f8bff6..a8c94fa0 100644
--- a/src/components/NftMediaComponent.tsx
+++ b/src/components/NftMediaComponent.tsx
@@ -17,7 +17,7 @@ const NftMediaComponent: React.FC<NftMediaComponentProps> = (props) => {
       {nftMedia.length === 1 ? (
         <div className={cn("flex justify-center rounded-3xl overflow-hidden", mediaStyle)}>
           {nftMedia[0]?.fileType === "video/mp4" ? (
-            <video autoPlay loop muted controls webkit-playsinline playsInline className="scale-[1.8]">
+            <video autoPlay loop muted webkit-playsinline playsInline className="scale-[1.8]">
               <source src={nftMedia[0]?.url} type="video/mp4" />
             </video>
           ) : (
diff --git a/src/components/ThreeDCard.tsx b/src/components/ThreeDCard.tsx
index 61942069..fa4e6da7 100644
--- a/src/components/ThreeDCard.tsx
+++ b/src/components/ThreeDCard.tsx
@@ -23,7 +23,7 @@ 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 muted controls webkit-playsinline playsInline className="scale-[1.8]  ">
+                <video autoPlay loop muted webkit-playsinline playsInline className="scale-[1.8]  ">
                   <source src={nftImgUrl} type="video/mp4" />
                 </video>
               </div>