Merge pull request #351 from Kredeum/fix-audio-video

Kredeum · Apr 26, 2023 · b21d1a9 · b21d1a9
1 parent e249ce3
commit b21d1a9
Show file tree

Hide file tree

Showing 10 changed files with 148 additions and 111 deletions.
diff --git 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/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/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
@@ -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
@@ -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
@@ -4,59 +4,90 @@
 
   import MediaImage from "./MediaImage.svelte";
   /////////////////////////////////////////////////
-  //  <DisplayAudio {src} {animation_url} {mode}? {alt}? {index}? {small}? {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;
   export let tokenID: string = undefined;
   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="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);
@@ -71,51 +102,18 @@
     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;
-    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/MediaPreview.svelte b/svelte/components/Media/MediaPreview.svelte
@@ -1,11 +1,16 @@
 <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} />
+  // <MediaPreview {chainId} {address} {tokenID} {mode}? />
   // Display a clickable preview of media opening a zoom modal with full media
   // Modal closing by clickoutside
   /////////////////////////////////////////////////////////////////
@@ -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>