🔧 Audio resource

components/gallery/GalleryItem.vue

@@ -33,6 +33,7 @@
                     :key="resource.src"
                     :src="resource.src"
                     :mime-type="resource.mimeType"
+                    :animation-src="resource.animation"
                     is-detail
                     :original="isMobile" />
                 </section>
@@ -83,7 +84,7 @@
                   </CollectionDetailsPopover>
                 </h2>
               </div>
-              <GalleryItemButton />
+              <!-- <GalleryItemButton /> -->
             </div>
 
             <div
@@ -114,7 +115,7 @@
             class="mt-4" />
 
           <!-- price section -->
-          <GalleryItemAction :nft="nft" @buy-success="onNFTBought" />
+          <!-- <GalleryItemAction :nft="nft" @buy-success="onNFTBought" /> -->
           <UnlockableTag
             v-if="isUnlockable && !isMobile"
             :link="unlockLink"
@@ -123,7 +124,7 @@
         </div>
       </div>
     </div>
-
+    <!--
     <div class="columns is-variable is-6 mt-5">
       <div class="column is-two-fifths">
         <GalleryItemDescription ref="galleryDescriptionRef" />
@@ -132,7 +133,7 @@
       <div class="column is-three-fifths gallery-item-tabs-panel-wrapper">
         <GalleryItemTabsPanel :active-tab="activeTab" />
       </div>
-    </div>
+    </div> -->
 
     <!-- <CarouselTypeRelated
       v-if="nft?.collection.id"
@@ -142,7 +143,7 @@
 
     <CarouselTypeVisited class="mt-8" /> -->
 
-    <GalleryItemPreviewer v-model="isFullscreen" :item-src="previewItemSrc" />
+    <!-- <GalleryItemPreviewer v-model="isFullscreen" :item-src="previewItemSrc" /> -->
   </section>
 </template>
 

components/gallery/useGalleryItem.ts

@@ -39,7 +39,7 @@ export const useGalleryItem = (nftId?: string) => {
   const nftAnimation = ref('')
   const nftMimeType = ref('')
   const nftMetadata = ref<NFTWithMetadata>()
-  const nftResources = ref<any[]>()
+  const nftResources = ref<NftResources[]>()
 
   const { params } = useRoute()
   const id = nftId || params.id
@@ -85,13 +85,11 @@ export const useGalleryItem = (nftId?: string) => {
     nft.value = nftEntity
 
     const resources = nftEntity.resources?.map((resource) => {
-      // console.log(
-      //   await getMimeType(sanitizeIpfsUrl(resource.meta.animationUrl))
-      // )
       return {
         ...resource,
         src: sanitizeIpfsUrl(resource.meta.animationUrl || resource.src),
         thumb: sanitizeIpfsUrl(resource.thumb || resource.meta.image),
+        animation: sanitizeIpfsUrl(resource.meta.animationUrl),
         // mimeType: await getMimeType(sanitizeIpfsUrl(resource.meta.animationUrl || resource.src)),
       }
     })

components/search/SearchSuggestion.vue

@@ -235,10 +235,12 @@ import { processMetadata } from '~/utils/cachingStrategy'
 import resolveQueryPath from '@/utils/queryPathResolver'
 import { unwrapSafe } from '~/utils/uniquery'
 import { RowSeries } from '~/components/series/types'
+import { NeoIcon } from '@kodadot1/brick'
 
 @Component({
   components: {
     Money: () => import('@/components/shared/format/Money.vue'),
+    NeoIcon,
   },
 })
 export default class SearchSuggestion extends mixins(PrefixMixin) {

composables/useNft.ts

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

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

@@ -29,7 +29,7 @@ const props = defineProps<{
 const onError = (e: Event) => {
   const target = e.target as HTMLImageElement
   if (target) {
-    // consola.log('[KODADOT::IMAGE] unable to load', e)
+    consola.log('[KODADOT::IMAGE] unable to load', e)
     target.src = props.placeholder
   }
 }