From f8f3dee0c85266e233b45d92d54cc09ec8b291b8 Mon Sep 17 00:00:00 2001
From: dlaxcess <flipiste@free.fr>
Date: Tue, 25 Apr 2023 19:34:39 +0200
Subject: [PATCH 1/3] audio

---
 gulp/scss/front.scss                        |  4 ++
 svelte/components/Main/Dapp.svelte          |  3 +
 svelte/components/Main/OpenSky.svelte       |  3 +
 svelte/components/Media/Media.svelte        |  2 +-
 svelte/components/Media/MediaAudio.svelte   | 74 ++++++++++-----------
 svelte/components/Media/MediaPreview.svelte | 26 +++++++-
 svelte/components/Media/MediaVideo.svelte   | 44 ++++++------
 svelte/components/Nft/NftMintPopup.svelte   |  2 +-
 svelte/components/Nfts/NftsGrid.svelte      |  2 +-
 9 files changed, 93 insertions(+), 67 deletions(-)

diff --git a/gulp/scss/front.scss b/gulp/scss/front.scss
index 60e5d7444..309818408 100644
--- a/gulp/scss/front.scss
+++ b/gulp/scss/front.scss
@@ -248,6 +248,10 @@
         position: relative;
       }
 
+      .kre-media-line {
+        display: inline-block;
+      }
+
       .detail {
         position: absolute;
         left: 0;
diff --git a/svelte/components/Main/Dapp.svelte b/svelte/components/Main/Dapp.svelte
index 53ac29765..722d192ad 100644
--- a/svelte/components/Main/Dapp.svelte
+++ b/svelte/components/Main/Dapp.svelte
@@ -41,6 +41,9 @@
   let refreshAll: Writable<number> = writable(1);
   setContext("refreshAll", refreshAll);
 
+  let toPlayTokenID: Writable<string> = writable("");
+  setContext("toPlayTokenID", toPlayTokenID);
+
   $: refresh = refreshingCollections || refreshingNfts;
 
   // SET chainId on memataskChainId change
diff --git a/svelte/components/Main/OpenSky.svelte b/svelte/components/Main/OpenSky.svelte
index 6ab5ebba0..813425a59 100644
--- a/svelte/components/Main/OpenSky.svelte
+++ b/svelte/components/Main/OpenSky.svelte
@@ -26,6 +26,9 @@
   let refreshAll: Writable<number> = writable(1);
   setContext("refreshAll", refreshAll);
 
+  let toPlayTokenID: Writable<string> = writable("");
+  setContext("toPlayTokenID", toPlayTokenID);
+
   const setNetwork = async () => {
     if (chainId != $metamaskChainId) {
       await metamaskSwitchChain(chainId);
diff --git a/svelte/components/Media/Media.svelte b/svelte/components/Media/Media.svelte
index c73918690..ade214ca2 100644
--- a/svelte/components/Media/Media.svelte
+++ b/svelte/components/Media/Media.svelte
@@ -21,7 +21,7 @@
   let gridScale = mode.startsWith("grid") ? " a-simul-cursor" : "";
 </script>
 
-<div id="media-{mode}-{tokenID}" class="media {cssMedia} media-{nftMediaContentType($nft)}{gridScale}">
+<div id="media-{mode}-{tokenID}" class="media kre-media-{mode} {cssMedia} media-{nftMediaContentType($nft)}{gridScale}">
   {#if nftMediaAnimationUrl($nft)}
     <MediaAudio
       animation_url={nftMediaAnimationUrl($nft)}
diff --git a/svelte/components/Media/MediaAudio.svelte b/svelte/components/Media/MediaAudio.svelte
index 333c19ad1..adc14061e 100644
--- a/svelte/components/Media/MediaAudio.svelte
+++ b/svelte/components/Media/MediaAudio.svelte
@@ -4,7 +4,7 @@
 
   import MediaImage from "./MediaImage.svelte";
   /////////////////////////////////////////////////
-  //  <DisplayAudio {src} {animation_url} {mode}? {alt}? {index}? {small}? {paused}? />
+  //  <DisplayAudio {src} {animation_url} {mode}? {alt}? {index}? {paused}? />
   // Display a player audio with its cover image according to its entering parameters
   /////////////////////////////////////////////////
   export let src: string;
@@ -12,48 +12,47 @@
   export let animation_url: string;
   export let mode: string = "line";
   export let alt: string = "Cover image";
-  export let small: boolean = true;
   export let paused: boolean = true;
 
   let toPlayTokenID: Writable<string> = getContext("toPlayTokenID");
-  $: paused = $toPlayTokenID !== tokenID;
-  const playAudio = () => {
-    if (mode === "zoom") {
+
+  const togglePlayAudio = () => {
+    paused = !paused;
+    if (toPlayTokenID) {
       $toPlayTokenID = $toPlayTokenID !== tokenID ? tokenID : "";
     }
   };
+
+  $: if (toPlayTokenID && $toPlayTokenID !== tokenID) paused = true;
+  $: mode && resetToPlayTokenID();
+  const resetToPlayTokenID = () => {
+    if (toPlayTokenID) $toPlayTokenID = "";
+  };
 </script>
 
-<div class="audio-cover-image {small ? '' : 'audioDeployed'}">
+<div class="audio-cover-image">
   <MediaImage {src} {alt} />
 </div>
-{#if small}
-  {#if mode === "line"}
-    <audio preload="none" bind:paused src={animation_url}>
-      <track kind="captions" />
-      Your browser does not support the
-      <code>audio</code> element.
-    </audio>
-    <button on:click={playAudio} class="krd-play-audio-button krd-play-audio-line-button">
-      <i class="fa {paused ? 'fa-play-circle' : 'fa-pause-circle'} video-play-icon" />
-    </button>
-  {:else}
-    <!-- <audio controls preload="none" bind:this={player} src={animation_url}> -->
-    <audio controls preload="none" bind:paused src={animation_url}>
-      <!-- <audio controls preload="none" src={animation_url}> -->
-      <track kind="captions" />
-      Your browser does not support the
-      <code>audio</code> element.
-    </audio>
-    <button on:click={playAudio} class="krd-play-audio-button">
-      <i class="fa {paused ? 'fa-play-circle' : 'fa-pause-circle'} video-play-icon" />
-    </button>
-  {/if}
+
+{#if mode == "zoom"}
+  <audio class="kre-zoom-audio" controls autoplay src={animation_url}>
+    Your browser does not support the
+    <code>audio</code> element.
+  </audio>
 {:else}
-  <audio controls autoplay src={animation_url}>
+  <!-- <audio controls preload="none" bind:this={player} src={animation_url}> -->
+  <audio preload="none" bind:paused src={animation_url}>
+    <!-- <audio controls preload="none" src={animation_url}> -->
+    <track kind="captions" />
     Your browser does not support the
     <code>audio</code> element.
   </audio>
+  <button
+    on:click|stopPropagation={togglePlayAudio}
+    class="krd-play-audio-button {mode === 'line' && 'krd-play-audio-line-button'}"
+  >
+    <i class="fa {paused ? 'fa-play-circle' : 'fa-pause-circle'} video-play-icon" />
+  </button>
 {/if}
 
 <style>
@@ -71,25 +70,20 @@
     height: 100%;
   }
 
-  .audio-cover-image:not(.audioDeployed) + audio {
+  .kre-zoom-audio {
+    width: 50%;
     position: absolute;
-    bottom: 0;
+    bottom: 60px;
     left: 50%;
-    transform: translate(-50%, 0%);
-    width: 100%;
-    height: 54px;
+    transform: translate(-50%, 0);
   }
 
-  @supports (-moz-appearance: none) {
+  /* @supports (-moz-appearance: none) {
     .audio-cover-image:not(.audioDeployed) + audio {
       padding: 0px 0 7px 0;
       background-color: rgba(0, 0, 0, 1);
     }
-  }
-
-  .audioDeployed + audio {
-    transform: translate(50%, 15%);
-  }
+  } */
 
   .krd-play-audio-button {
     position: absolute;
diff --git a/svelte/components/Media/MediaPreview.svelte b/svelte/components/Media/MediaPreview.svelte
index 509d03fc7..d5b43a782 100644
--- a/svelte/components/Media/MediaPreview.svelte
+++ b/svelte/components/Media/MediaPreview.svelte
@@ -1,8 +1,13 @@
 <script lang="ts">
-  import { fade } from "svelte/transition";
+  import type { Writable } from "svelte/store";
+  import { getContext } from "svelte";
 
   import Media from "./Media.svelte";
+  import { fade } from "svelte/transition";
+
   import { clickOutside } from "@helpers/clickOutside";
+  import { nftMediaAnimationUrl, nftMediaContentType } from "@lib/nft/nft";
+  import { nftStore } from "@stores/nft/nft";
 
   /////////////////////////////////////////////////
   // <MediaPreview {chainId} {address} {tokenID} />
@@ -14,14 +19,25 @@
   export let tokenID: string;
   export let mode: string = undefined;
   /////////////////////////////////////////////////////////////////
+  let toPlayTokenID: Writable<string> = getContext("toPlayTokenID");
+
+  $: nft = nftStore(chainId, address, tokenID);
+  $: isAnimationMedia = nftMediaContentType($nft) === "video" || nftMediaAnimationUrl($nft) !== "";
 
   let popupOpen = false;
-  const popupToggle = (): boolean => (popupOpen = !popupOpen);
+  const popupToggle = (): void => {
+    if (toPlayTokenID) $toPlayTokenID = "";
+    popupOpen = !popupOpen;
+  };
 </script>
 
 <div class="media-zoom">
   <div class="media">
-    <span class="krd-pointer zoom-hover" on:click={popupToggle} on:keydown={popupToggle}>
+    <span
+      class="krd-pointer {isAnimationMedia ? 'no-zoom-hover' : 'zoom-hover'}"
+      on:click={popupToggle}
+      on:keydown={popupToggle}
+    >
       <i class="fas fa-search" />
       <Media {chainId} {address} {tokenID} {mode} />
     </span>
@@ -92,4 +108,8 @@
   .media-zoom .media .zoom-hover:hover .fas {
     opacity: 1;
   }
+
+  .krd-pointer.no-zoom-hover i.fas {
+    display: none;
+  }
 </style>
diff --git a/svelte/components/Media/MediaVideo.svelte b/svelte/components/Media/MediaVideo.svelte
index e87bc52e9..1c33858ef 100644
--- a/svelte/components/Media/MediaVideo.svelte
+++ b/svelte/components/Media/MediaVideo.svelte
@@ -20,30 +20,32 @@
     paused = !paused;
     $toPlayTokenID = $toPlayTokenID !== tokenID ? tokenID : "";
   };
+  $: console.log("playAudio ~ mode:", mode);
 </script>
 
-{#if small}
-  {#if mode.startsWith("grid")}
-    <video autoplay={false} {src} preload="metadata" loop playsinline style="border-radius: initial;" bind:paused>
-      <track kind="captions" />
-    </video>
-    <button on:click={playVideo} class="video-play-button">
-      <i class="fa {paused ? 'fa-play-circle' : 'fa-pause-circle'} video-play-icon" />
-    </button>
-  {:else if mode === "line"}
-    <!-- svelte-ignore a11y-media-has-caption -->
-    <video autoplay={false} playsinline style="border-radius: initial;" {controls} {muted}>
-      <source {src} type="video/mp4" /></video
-    >
-  {:else}
-    <!-- svelte-ignore a11y-media-has-caption -->
-    <video autoplay={true} preload="metadata" controls loop playsinline muted style="border-radius: initial;">
-      <source {src} type="video/mp4" /></video
-    >
-  {/if}
+<!-- {#if small} -->
+{#if mode.startsWith("grid")}
+  <video autoplay={false} {src} preload="metadata" loop playsinline style="border-radius: initial;" bind:paused>
+    <track kind="captions" />
+  </video>
+  <button on:click|stopPropagation={playVideo} class="video-play-button">
+    <i class="fa {paused ? 'fa-play-circle' : 'fa-pause-circle'} video-play-icon" />
+  </button>
+{:else if mode === "line"}
+  <!-- svelte-ignore a11y-media-has-caption -->
+  <video autoplay={false} playsinline style="border-radius: initial;" {controls} {muted}>
+    <source {src} type="video/mp4" /></video
+  >
 {:else}
   <!-- svelte-ignore a11y-media-has-caption -->
-  <video
+  <video autoplay={true} preload="metadata" controls loop playsinline muted style="border-radius: initial;">
+    <source {src} type="video/mp4" /></video
+  >
+{/if}
+
+<!-- {:else} -->
+<!-- svelte-ignore a11y-media-has-caption -->
+<!-- <video
     autoplay={true}
     controls
     controlslist="nodownload"
@@ -54,7 +56,7 @@
   >
     <source {src} type="video/mp4" /></video
   >
-{/if}
+{/if} -->
 
 <style>
   .video-play-button {
diff --git a/svelte/components/Nft/NftMintPopup.svelte b/svelte/components/Nft/NftMintPopup.svelte
index 689d2608b..89d9b6b99 100644
--- a/svelte/components/Nft/NftMintPopup.svelte
+++ b/svelte/components/Nft/NftMintPopup.svelte
@@ -408,7 +408,7 @@
         {:else if S0_START < minting && minting <= S5_MINTED}
           <div class="media media-photo">
             {#if inputMediaType === "video"}
-              <MediaVideo {src} small={true} />
+              <MediaVideo {src} mode="line" small={true} controls={true} />
             {:else}
               <img {src} alt="nft" />
             {/if}
diff --git a/svelte/components/Nfts/NftsGrid.svelte b/svelte/components/Nfts/NftsGrid.svelte
index dd11bda48..438be40a1 100644
--- a/svelte/components/Nfts/NftsGrid.svelte
+++ b/svelte/components/Nfts/NftsGrid.svelte
@@ -23,7 +23,7 @@
 <div class="row grid-krd">
   {#if nfts?.size > 0}
     {#each [...nfts.values()] as nft}
-      <div class={colClass(mode)} on:mousedown={() => (tokenID = nft.tokenID)}>
+      <div class={colClass(mode)} on:click={() => (tokenID = nft.tokenID)}>
         <Nft chainId={nft.chainId} address={nft.address} tokenID={nft.tokenID} {owner} {mode} />
       </div>
     {/each}

From 5e6c994e775368f6ab20dd336b5999cbc37a3c0e Mon Sep 17 00:00:00 2001
From: dlaxcess <flipiste@free.fr>
Date: Wed, 26 Apr 2023 00:14:52 +0200
Subject: [PATCH 2/3] refacto video

---
 hardhat/lib/forge-std                         |  1 +
 svelte/components/Input/InputVideoMint.svelte |  2 +-
 svelte/components/Media/MediaAudio.svelte     | 64 +++++++------
 svelte/components/Media/MediaVideo.svelte     | 94 ++++++++++++-------
 svelte/components/Nft/NftMintPopup.svelte     |  2 +-
 5 files changed, 97 insertions(+), 66 deletions(-)
 create mode 160000 hardhat/lib/forge-std

diff --git a/hardhat/lib/forge-std b/hardhat/lib/forge-std
new file mode 160000
index 000000000..2a2ce3692
--- /dev/null
+++ b/hardhat/lib/forge-std
@@ -0,0 +1 @@
+Subproject commit 2a2ce3692b8c1523b29de3ec9d961ee9fbbc43a6
diff --git a/svelte/components/Input/InputVideoMint.svelte b/svelte/components/Input/InputVideoMint.svelte
index 44978ca6f..696b6d381 100644
--- a/svelte/components/Input/InputVideoMint.svelte
+++ b/svelte/components/Input/InputVideoMint.svelte
@@ -39,7 +39,7 @@
   <div class="box-file">
     {#if video}
       <div class="kre-video-mint">
-        <MediaVideo src={video} mode="line" small={true} controls={true} muted={true} />
+        <MediaVideo src={video} mode="line" />
 
         <span class="kre-delete-file" on:click={resetFileVideo} on:keydown={resetFileVideo}
           ><i class="fa fa-trash" aria-hidden="true" /></span
diff --git a/svelte/components/Media/MediaAudio.svelte b/svelte/components/Media/MediaAudio.svelte
index adc14061e..df5f8197c 100644
--- a/svelte/components/Media/MediaAudio.svelte
+++ b/svelte/components/Media/MediaAudio.svelte
@@ -4,7 +4,7 @@
 
   import MediaImage from "./MediaImage.svelte";
   /////////////////////////////////////////////////
-  //  <DisplayAudio {src} {animation_url} {mode}? {alt}? {index}? {paused}? />
+  //  <DisplayAudio {src} {tokenID} {animation_url} {mode}? {alt}? {paused}? />
   // Display a player audio with its cover image according to its entering parameters
   /////////////////////////////////////////////////
   export let src: string;
@@ -49,13 +49,45 @@
   </audio>
   <button
     on:click|stopPropagation={togglePlayAudio}
-    class="krd-play-audio-button {mode === 'line' && 'krd-play-audio-line-button'}"
+    class="kre-play-media-button {mode === 'line' && 'kre-play-media-line-button'}"
   >
     <i class="fa {paused ? 'fa-play-circle' : 'fa-pause-circle'} video-play-icon" />
   </button>
 {/if}
 
 <style>
+  .kre-play-media-button {
+    position: absolute;
+    bottom: 2%;
+    right: 2%;
+    background-color: transparent;
+    color: white;
+    border: none;
+    font-size: 2.7rem;
+  }
+
+  .kre-play-media-button i {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    background-color: lightgray;
+    border-radius: 50%;
+    cursor: pointer;
+  }
+
+  .kre-play-media-line-button {
+    top: 65px;
+    left: 35px;
+    bottom: unset;
+    width: 2.3rem;
+    font-size: 2.3rem;
+  }
+
+  .kre-play-media-line-button i {
+    border: 1px solid lightgray;
+  }
+
+  /* Specific for audio */
   audio::-webkit-media-controls-enclosure {
     border-radius: 6px;
     background-color: rgba(0, 0, 0, 0.5);
@@ -84,32 +116,4 @@
       background-color: rgba(0, 0, 0, 1);
     }
   } */
-
-  .krd-play-audio-button {
-    position: absolute;
-    bottom: 9px;
-    left: 0;
-    background-color: transparent;
-    color: white;
-    border: none;
-    font-size: 3.5rem;
-  }
-
-  .krd-play-audio-button i {
-    position: absolute;
-    bottom: 0;
-    background-color: lightgray;
-    border-radius: 50%;
-    cursor: pointer;
-  }
-
-  .krd-play-audio-line-button {
-    top: 65px;
-    left: 35px;
-    bottom: unset;
-  }
-
-  .krd-play-audio-line-button i {
-    border: 1px solid lightgray;
-  }
 </style>
diff --git a/svelte/components/Media/MediaVideo.svelte b/svelte/components/Media/MediaVideo.svelte
index 1c33858ef..3f0dfba19 100644
--- a/svelte/components/Media/MediaVideo.svelte
+++ b/svelte/components/Media/MediaVideo.svelte
@@ -3,63 +3,57 @@
   import type { Writable } from "svelte/store";
 
   /////////////////////////////////////////////////
-  //  <MediaVideo {src} {tokenID}? {mode}? {paused}? {small}? {controls}? {muted}? />
+  //  <MediaVideo {src} {tokenID}? {mode}? {paused}? />
   // Display a Video according to its entering parameters
   /////////////////////////////////////////////////
   export let src: string;
   export let tokenID: string = undefined;
   export let mode: string = undefined;
   export let paused: boolean = true;
-  export let small: boolean = false;
-  export let controls: boolean = false;
-  export let muted: boolean = false;
 
   let toPlayTokenID: Writable<string> = getContext("toPlayTokenID");
-  $: paused = $toPlayTokenID !== tokenID;
-  const playVideo = () => {
+  const togglePlayVideo = () => {
     paused = !paused;
-    $toPlayTokenID = $toPlayTokenID !== tokenID ? tokenID : "";
+    if (toPlayTokenID) {
+      $toPlayTokenID = $toPlayTokenID !== tokenID ? tokenID : "";
+    }
+  };
+
+  $: if (toPlayTokenID && $toPlayTokenID !== tokenID) paused = true;
+  $: mode && resetToPlayTokenID();
+  const resetToPlayTokenID = () => {
+    if (toPlayTokenID) $toPlayTokenID = "";
   };
-  $: console.log("playAudio ~ mode:", mode);
 </script>
 
-<!-- {#if small} -->
-{#if mode.startsWith("grid")}
-  <video autoplay={false} {src} preload="metadata" loop playsinline style="border-radius: initial;" bind:paused>
-    <track kind="captions" />
-  </video>
-  <button on:click|stopPropagation={playVideo} class="video-play-button">
-    <i class="fa {paused ? 'fa-play-circle' : 'fa-pause-circle'} video-play-icon" />
-  </button>
-{:else if mode === "line"}
+{#if mode == "zoom"}
   <!-- svelte-ignore a11y-media-has-caption -->
-  <video autoplay={false} playsinline style="border-radius: initial;" {controls} {muted}>
+  <video autoplay={true} preload="metadata" controls loop playsinline style="border-radius: initial;">
     <source {src} type="video/mp4" /></video
   >
 {:else}
-  <!-- svelte-ignore a11y-media-has-caption -->
-  <video autoplay={true} preload="metadata" controls loop playsinline muted style="border-radius: initial;">
-    <source {src} type="video/mp4" /></video
-  >
-{/if}
-
-<!-- {:else} -->
-<!-- svelte-ignore a11y-media-has-caption -->
-<!-- <video
-    autoplay={true}
-    controls
-    controlslist="nodownload"
+  <video
+    {src}
+    autoplay={mode === "detail"}
+    muted={mode === "detail"}
+    preload="metadata"
     loop
     playsinline
-    preload="metadata"
     style="border-radius: initial;"
+    bind:paused
   >
-    <source {src} type="video/mp4" /></video
+    <track kind="captions" />
+  </video>
+  <button
+    on:click|stopPropagation={togglePlayVideo}
+    class="kre-play-media-button {mode === 'line' && 'kre-play-media-line-button'}"
   >
-{/if} -->
+    <i class="fa {paused ? 'fa-play-circle' : 'fa-pause-circle'} video-play-icon" />
+  </button>
+{/if}
 
 <style>
-  .video-play-button {
+  /* .video-play-button {
     position: absolute;
     bottom: 2%;
     right: 2%;
@@ -75,5 +69,37 @@
     right: 0;
     background-color: lightgray;
     border-radius: 50%;
+  } */
+
+  /*  */
+  .kre-play-media-button {
+    position: absolute;
+    bottom: 2%;
+    right: 2%;
+    background-color: transparent;
+    color: white;
+    border: none;
+    font-size: 2.7rem;
+  }
+
+  .kre-play-media-button i {
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    background-color: lightgray;
+    border-radius: 50%;
+    cursor: pointer;
+  }
+
+  .kre-play-media-line-button {
+    top: 65px;
+    left: 35px;
+    bottom: unset;
+    width: 2.3rem;
+    font-size: 2.3rem;
+  }
+
+  .kre-play-media-line-button i {
+    border: 1px solid lightgray;
   }
 </style>
diff --git a/svelte/components/Nft/NftMintPopup.svelte b/svelte/components/Nft/NftMintPopup.svelte
index 89d9b6b99..6189528bb 100644
--- a/svelte/components/Nft/NftMintPopup.svelte
+++ b/svelte/components/Nft/NftMintPopup.svelte
@@ -408,7 +408,7 @@
         {:else if S0_START < minting && minting <= S5_MINTED}
           <div class="media media-photo">
             {#if inputMediaType === "video"}
-              <MediaVideo {src} mode="line" small={true} controls={true} />
+              <MediaVideo {src} mode="line" />
             {:else}
               <img {src} alt="nft" />
             {/if}

From a3d1befc955bdedc6bd32eda71e01db810b102d4 Mon Sep 17 00:00:00 2001
From: dlaxcess <flipiste@free.fr>
Date: Wed, 26 Apr 2023 00:42:19 +0200
Subject: [PATCH 3/3] clean PR

---
 svelte/components/Media/MediaPreview.svelte |  2 +-
 svelte/components/Media/MediaVideo.svelte   | 19 -------------------
 svelte/components/Nfts/NftsGrid.svelte      |  2 +-
 3 files changed, 2 insertions(+), 21 deletions(-)

diff --git a/svelte/components/Media/MediaPreview.svelte b/svelte/components/Media/MediaPreview.svelte
index d5b43a782..760246bf7 100644
--- a/svelte/components/Media/MediaPreview.svelte
+++ b/svelte/components/Media/MediaPreview.svelte
@@ -10,7 +10,7 @@
   import { nftStore } from "@stores/nft/nft";
 
   /////////////////////////////////////////////////
-  // <MediaPreview {chainId} {address} {tokenID} />
+  // <MediaPreview {chainId} {address} {tokenID} {mode}? />
   // Display a clickable preview of media opening a zoom modal with full media
   // Modal closing by clickoutside
   /////////////////////////////////////////////////////////////////
diff --git a/svelte/components/Media/MediaVideo.svelte b/svelte/components/Media/MediaVideo.svelte
index 3f0dfba19..3e2e874fe 100644
--- a/svelte/components/Media/MediaVideo.svelte
+++ b/svelte/components/Media/MediaVideo.svelte
@@ -53,25 +53,6 @@
 {/if}
 
 <style>
-  /* .video-play-button {
-    position: absolute;
-    bottom: 2%;
-    right: 2%;
-    background-color: transparent;
-    color: white;
-    border: none;
-    font-size: 4rem;
-  }
-
-  .video-play-button i {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    background-color: lightgray;
-    border-radius: 50%;
-  } */
-
-  /*  */
   .kre-play-media-button {
     position: absolute;
     bottom: 2%;
diff --git a/svelte/components/Nfts/NftsGrid.svelte b/svelte/components/Nfts/NftsGrid.svelte
index 438be40a1..fc2174dc8 100644
--- a/svelte/components/Nfts/NftsGrid.svelte
+++ b/svelte/components/Nfts/NftsGrid.svelte
@@ -23,7 +23,7 @@
 <div class="row grid-krd">
   {#if nfts?.size > 0}
     {#each [...nfts.values()] as nft}
-      <div class={colClass(mode)} on:click={() => (tokenID = nft.tokenID)}>
+      <div class={colClass(mode)} on:click={() => (tokenID = nft.tokenID)} on:keydown={() => (tokenID = nft.tokenID)}>
         <Nft chainId={nft.chainId} address={nft.address} tokenID={nft.tokenID} {owner} {mode} />
       </div>
     {/each}