🔧 Audio resource

components/gallery/GalleryItem.vue

@@ -13,7 +13,11 @@
         <div class="is-relative">
           <!-- preview button -->
           <a
-            v-if="canPreview && !mediaItemRef?.isLewdBlurredLayer"
+            v-if="
+              canPreview &&
+              !mediaItemRef?.isLewdBlurredLayer &&
+              !hasAnimatedResources
+            "
             class="fullscreen-button is-justify-content-center is-align-items-center"
             @click="isFullscreen = true">
             <NeoIcon icon="expand" />
@@ -28,13 +32,13 @@
               <o-carousel-item
                 v-for="resource in nftResources"
                 :key="resource.id">
-                <section>
-                  <MediaItem
-                    :key="resource.src"
-                    :src="resource.src"
-                    is-detail
-                    :original="isMobile" />
-                </section>
+                <MediaItem
+                  :key="resource.src"
+                  :src="resource.src"
+                  :mime-type="resource.mimeType"
+                  :animation-src="resource.animation"
+                  is-detail
+                  :original="isMobile" />
               </o-carousel-item>
             </o-carousel>
           </div>
@@ -204,6 +208,12 @@ const activeCarouselImage = computed(() => {
 const hasResources = computed(
   () => nftResources.value && nftResources.value?.length > 1
 )
+const hasAnimatedResources = computed(
+  () =>
+    nftResources.value &&
+    nftResources.value?.length > 1 &&
+    nftResources.value[1].animation
+)
 
 const previewItemSrc = computed(
   () => (hasResources.value && activeCarouselImage.value) || nftImage.value

components/gallery/useGalleryItem.ts

@@ -84,15 +84,18 @@ export const useGalleryItem = (nftId?: string) => {
 
     nft.value = nftEntity
 
-    nftResources.value = nftEntity.resources?.map((resource) => {
+    const resources = nftEntity.resources?.map((resource) => {
       return {
         ...resource,
-        src: sanitizeIpfsUrl(resource.src),
-        thumb: sanitizeIpfsUrl(resource.thumb),
+        src: sanitizeIpfsUrl(resource.meta.animationUrl || resource.src),
+        thumb: sanitizeIpfsUrl(resource.thumb || resource.meta.image),
+        animation: sanitizeIpfsUrl(resource.meta.animationUrl),
       }
     })
+
     nftMetadata.value = await getNftMetadata(nftEntity, urlPrefix.value)
     nftMimeType.value = await whichMimeType(nftMetadata.value)
+    nftResources.value = resources
 
     const asset = whichAsset(nftMetadata.value)
     nftImage.value = asset.image

components/media/MediaResolver.vue

@@ -2,6 +2,7 @@
   <component
     :is="resolveComponent"
     v-if="src"
+    style="height: 100%"
     :src="src"
     :poster="poster || placeholder"
     :description="description"

composables/useNft.ts

@@ -7,6 +7,8 @@ export type NftResources = {
   id: string
   src?: string
   thumb?: string
+  mimeType?: string
+  animation?: string
 }
 
 export type ItemResources = {

libs/ui/src/components/MediaItem/MediaItem.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="media-object">
+  <div class="media-object" style="height: 100%">
     <component
       :is="resolveComponent"
       :src="properSrc"

libs/ui/src/components/MediaItem/type/AudioMedia.vue

@@ -1,15 +1,13 @@
 <template>
-  <div>
-    <av-waveform
-      class="media-audio__player"
-      :audio-src="animationSrc"
-      audio-class="media-audio__audio"
-      canv-class="media-audio__canvas"
-      played-line-color="rgba(0,0,0,0.74)"
-      noplayed-line-color="#d32e79"
-      playtime-font-color="rgba(0,0,0,0.74)"
-      data-cy="type-audio" />
-  </div>
+  <av-waveform
+    class="media-audio__player is-flex is-flex-direction-column-reverse"
+    :audio-src="animationSrc"
+    audio-class="media-audio__audio"
+    canv-class="media-audio__canvas"
+    played-line-color="rgba(0,0,0,0.74)"
+    noplayed-line-color="#d32e79"
+    playtime-font-color="rgba(0,0,0,0.74)"
+    data-cy="type-audio" />
 </template>
 
 <script lang="ts" setup>
@@ -21,6 +19,9 @@ defineProps<{
 </script>
 
 <style>
+div.media-audio__player {
+  height: 100%;
+}
 div.media-audio__player div > canvas.media-audio__canvas,
 div.media-audio__player > div > audio.media-audio__audio {
   width: 100% !important;