From 623291c8711f690fc68697c73c167d9c2c792583 Mon Sep 17 00:00:00 2001
From: Preschian F <preschian@users.noreply.github.com>
Date: Fri, 21 Apr 2023 17:43:19 +0700
Subject: [PATCH 1/6] feat: carousel for resources

---
 components/gallery/GalleryItem.vue   | 67 +++++++++++++++++++++++++++-
 components/gallery/useGalleryItem.ts | 12 ++++-
 composables/useNft.ts                | 11 +++--
 3 files changed, 83 insertions(+), 7 deletions(-)

diff --git a/components/gallery/GalleryItem.vue b/components/gallery/GalleryItem.vue
index 2ae30e45b7..34d27f3dc9 100644
--- a/components/gallery/GalleryItem.vue
+++ b/components/gallery/GalleryItem.vue
@@ -12,12 +12,30 @@
       <div class="column is-two-fifths">
         <div class="is-relative">
           <a
-            v-if="canPreview"
+            v-if="canPreview && !nftResources?.length"
             class="fullscreen-button is-justify-content-center is-align-items-center"
             @click="isFullscreen = true">
             <NeoIcon icon="expand" />
           </a>
+          <div v-if="nftResources?.length" class="gallery-media-carousel">
+            <o-carousel
+              :overlay="overlayCarousel"
+              @click="overlayCarousel = !overlayCarousel">
+              <o-carousel-item
+                v-for="(resource, index) in nftResources"
+                :key="index">
+                <section>
+                  <MediaItem
+                    :key="resource.src"
+                    :src="resource.src"
+                    is-detail
+                    :original="isMobile" />
+                </section>
+              </o-carousel-item>
+            </o-carousel>
+          </div>
           <MediaItem
+            v-else
             :key="nftImage"
             :class="{
               'is-flex is-align-items-center is-justify-content-center h-audio':
@@ -32,6 +50,7 @@
             :original="isMobile" />
         </div>
       </div>
+
       <div class="py-8 column">
         <div
           class="is-flex is-flex-direction-column is-justify-content-space-between h-full">
@@ -104,11 +123,13 @@
       data-cy="carousel-related" />
 
     <CarouselTypeVisited class="mt-8" />
+
     <GalleryItemPreviewer v-model="isFullscreen" />
   </section>
 </template>
 
 <script setup lang="ts">
+import { OCarousel, OCarouselItem } from '@oruga-ui/oruga'
 import { IdentityItem, MediaItem, NeoIcon } from '@kodadot1/brick'
 
 import { useGalleryItem } from './useGalleryItem'
@@ -131,7 +152,7 @@ const { $seoMeta } = useNuxtApp()
 const route = useRoute()
 const router = useRouter()
 
-const { nft, nftMetadata, nftImage, nftAnimation, nftMimeType } =
+const { nft, nftMetadata, nftImage, nftAnimation, nftMimeType, nftResources } =
   useGalleryItem()
 const collection = computed(() => nft.value?.collection)
 const isMobile = ref(window.innerWidth < 768)
@@ -143,6 +164,7 @@ const tabs = {
 }
 const activeTab = ref(tabs.offers)
 const showCongratsMessage = ref(false)
+const overlayCarousel = ref(false)
 
 const isFullscreen = ref(false)
 const canPreview = computed(() =>
@@ -267,3 +289,44 @@ $break-point-width: 930px;
   height: 70%;
 }
 </style>
+
+<style lang="scss">
+@import '@/styles/abstracts/variables';
+
+.gallery-media-carousel {
+  .o-car {
+    &__item {
+      overflow: hidden;
+    }
+
+    &__overlay {
+      @include ktheme() {
+        background: theme('background-color');
+      }
+    }
+
+    &__indicators {
+      margin-top: 1rem;
+    }
+
+    &__indicator {
+      margin: 0 0.25rem;
+
+      &__item {
+        @include ktheme() {
+          background: theme('background-color-inverse');
+          border: theme('background-color-inverse');
+        }
+        border-radius: 50%;
+
+        &--active {
+          @include ktheme() {
+            background: theme('k-primary');
+            border: theme('k-primary');
+          }
+        }
+      }
+    }
+  }
+}
+</style>
diff --git a/components/gallery/useGalleryItem.ts b/components/gallery/useGalleryItem.ts
index 4611a39747..9454506ef9 100644
--- a/components/gallery/useGalleryItem.ts
+++ b/components/gallery/useGalleryItem.ts
@@ -1,7 +1,7 @@
 import { sanitizeIpfsUrl } from '@/utils/ipfs'
 import { getMimeType } from '@/utils/gallery/media'
 import { useHistoryStore } from '@/stores/history'
-import { getNftMetadata } from '@/composables/useNft'
+import { NftResources, getNftMetadata } from '@/composables/useNft'
 import useSubscriptionGraphql from '@/composables/useSubscriptionGraphql'
 import type { NFT } from '@/components/rmrk/service/scheme'
 import type { NFTWithMetadata } from '@/composables/useNft'
@@ -39,6 +39,7 @@ export const useGalleryItem = () => {
   const nftAnimation = ref('')
   const nftMimeType = ref('')
   const nftMetadata = ref<NFTWithMetadata>()
+  const nftResources = ref<NftResources[]>()
 
   const { params } = useRoute()
   // const { id: collectionID, item: id } = tokenIdToRoute(params.id)
@@ -82,6 +83,14 @@ export const useGalleryItem = () => {
 
     nft.value = nftEntity
 
+    nftResources.value = nftEntity.resources?.map((resource) => {
+      return {
+        ...resource,
+        src: sanitizeIpfsUrl(resource.src),
+        thumb: sanitizeIpfsUrl(resource.thumb),
+      }
+    })
+    console.log(nftResources.value)
     nftMetadata.value = await getNftMetadata(nftEntity, urlPrefix.value)
     nftMimeType.value = await whichMimeType(nftMetadata.value)
 
@@ -109,5 +118,6 @@ export const useGalleryItem = () => {
     nftAnimation,
     nftMimeType,
     nftMetadata,
+    nftResources,
   }
 }
diff --git a/composables/useNft.ts b/composables/useNft.ts
index 823f8b95b9..6963f91d21 100644
--- a/composables/useNft.ts
+++ b/composables/useNft.ts
@@ -3,12 +3,15 @@ import { sanitizeIpfsUrl } from '@/utils/ipfs'
 import { processSingleMetadata } from '@/utils/cachingStrategy'
 import { getMimeType } from '@/utils/gallery/media'
 
+export type NftResources = {
+  id: string
+  src?: string
+  thumb?: string
+}
+
 export type ItemResources = {
   mediaUri?: string
-  resources?: {
-    src?: string
-    thumb?: string
-  }[]
+  resources?: NftResources[]
 }
 
 export type NFTWithMetadata = NFT &

From cc7966c78525e6530bf282b2520b99040ff52854 Mon Sep 17 00:00:00 2001
From: Preschian F <preschian@users.noreply.github.com>
Date: Fri, 21 Apr 2023 18:06:44 +0700
Subject: [PATCH 2/6] chore: unused console

---
 components/gallery/useGalleryItem.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/gallery/useGalleryItem.ts b/components/gallery/useGalleryItem.ts
index 9454506ef9..087042f98a 100644
--- a/components/gallery/useGalleryItem.ts
+++ b/components/gallery/useGalleryItem.ts
@@ -90,7 +90,6 @@ export const useGalleryItem = () => {
         thumb: sanitizeIpfsUrl(resource.thumb),
       }
     })
-    console.log(nftResources.value)
     nftMetadata.value = await getNftMetadata(nftEntity, urlPrefix.value)
     nftMimeType.value = await whichMimeType(nftMetadata.value)
 

From 24206f9fb8d26f5c99dbda2caf8e29acde1a3cf6 Mon Sep 17 00:00:00 2001
From: Preschian F <preschian@users.noreply.github.com>
Date: Sun, 23 Apr 2023 08:53:42 +0700
Subject: [PATCH 3/6] chore: scoped scss and show carousel on > 1

---
 components/gallery/GalleryItem.vue | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/components/gallery/GalleryItem.vue b/components/gallery/GalleryItem.vue
index f673d295da..b0ae6b6b94 100644
--- a/components/gallery/GalleryItem.vue
+++ b/components/gallery/GalleryItem.vue
@@ -12,18 +12,18 @@
       <div class="column is-two-fifths">
         <div class="is-relative">
           <a
-            v-if="canPreview && !nftResources?.length"
+            v-if="canPreview && !isResources"
             class="fullscreen-button is-justify-content-center is-align-items-center"
             @click="isFullscreen = true">
             <NeoIcon icon="expand" />
           </a>
-          <div v-if="nftResources?.length" class="gallery-media-carousel">
+          <div v-if="isResources" class="gallery-item-carousel">
             <o-carousel
               :overlay="overlayCarousel"
               @click="overlayCarousel = !overlayCarousel">
               <o-carousel-item
-                v-for="(resource, index) in nftResources"
-                :key="index">
+                v-for="resource in nftResources"
+                :key="resource.id">
                 <section>
                   <MediaItem
                     :key="resource.src"
@@ -167,6 +167,9 @@ const tabs = {
 const activeTab = ref(tabs.offers)
 const showCongratsMessage = ref(false)
 const overlayCarousel = ref(false)
+const isResources = computed(
+  () => nftResources.value && nftResources.value?.length > 1
+)
 
 const isFullscreen = ref(false)
 const canPreview = computed(() =>
@@ -290,13 +293,11 @@ $break-point-width: 930px;
 .h-audio {
   height: 70%;
 }
-</style>
 
-<style lang="scss">
 @import '@/styles/abstracts/variables';
 
-.gallery-media-carousel {
-  .o-car {
+.gallery-item-carousel {
+  :deep .o-car {
     &__item {
       overflow: hidden;
     }

From 115c106658ae5f9d9052d47ee58e3b618207bd3c Mon Sep 17 00:00:00 2001
From: Preschian F <preschian@users.noreply.github.com>
Date: Sun, 23 Apr 2023 08:59:26 +0700
Subject: [PATCH 4/6] chore: css class with props

---
 components/gallery/GalleryItem.vue | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/components/gallery/GalleryItem.vue b/components/gallery/GalleryItem.vue
index b0ae6b6b94..c5e06cb9e1 100644
--- a/components/gallery/GalleryItem.vue
+++ b/components/gallery/GalleryItem.vue
@@ -20,6 +20,8 @@
           <div v-if="isResources" class="gallery-item-carousel">
             <o-carousel
               :overlay="overlayCarousel"
+              indicators-class="mt-4"
+              indicator-item-class="mx-1"
               @click="overlayCarousel = !overlayCarousel">
               <o-carousel-item
                 v-for="resource in nftResources"
@@ -308,13 +310,7 @@ $break-point-width: 930px;
       }
     }
 
-    &__indicators {
-      margin-top: 1rem;
-    }
-
     &__indicator {
-      margin: 0 0.25rem;
-
       &__item {
         @include ktheme() {
           background: theme('background-color-inverse');

From d5c014ffdada61d7428b127edc789b56af9c16b3 Mon Sep 17 00:00:00 2001
From: Preschian F <preschian@users.noreply.github.com>
Date: Mon, 24 Apr 2023 21:18:05 +0800
Subject: [PATCH 5/6] chore: remove duplicate scss vars and hasResources

---
 components/gallery/GalleryItem.vue | 8 +++-----
 1 file changed, 3 insertions(+), 5 deletions(-)

diff --git a/components/gallery/GalleryItem.vue b/components/gallery/GalleryItem.vue
index c5e06cb9e1..68d5b43f9c 100644
--- a/components/gallery/GalleryItem.vue
+++ b/components/gallery/GalleryItem.vue
@@ -12,12 +12,12 @@
       <div class="column is-two-fifths">
         <div class="is-relative">
           <a
-            v-if="canPreview && !isResources"
+            v-if="canPreview && !hasResources"
             class="fullscreen-button is-justify-content-center is-align-items-center"
             @click="isFullscreen = true">
             <NeoIcon icon="expand" />
           </a>
-          <div v-if="isResources" class="gallery-item-carousel">
+          <div v-if="hasResources" class="gallery-item-carousel">
             <o-carousel
               :overlay="overlayCarousel"
               indicators-class="mt-4"
@@ -169,7 +169,7 @@ const tabs = {
 const activeTab = ref(tabs.offers)
 const showCongratsMessage = ref(false)
 const overlayCarousel = ref(false)
-const isResources = computed(
+const hasResources = computed(
   () => nftResources.value && nftResources.value?.length > 1
 )
 
@@ -296,8 +296,6 @@ $break-point-width: 930px;
   height: 70%;
 }
 
-@import '@/styles/abstracts/variables';
-
 .gallery-item-carousel {
   :deep .o-car {
     &__item {

From 597fe5ca6e72eeeaa24a4b602631096e74c89797 Mon Sep 17 00:00:00 2001
From: Preschian Febryantara <preschian@users.noreply.github.com>
Date: Thu, 4 May 2023 18:34:19 +0700
Subject: [PATCH 6/6] fix: use existing previewer

---
 components/gallery/GalleryItem.vue          | 29 ++++++++++++++-------
 components/gallery/GalleryItemPreviewer.vue |  5 ++--
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/components/gallery/GalleryItem.vue b/components/gallery/GalleryItem.vue
index 68d5b43f9c..b5058078e8 100644
--- a/components/gallery/GalleryItem.vue
+++ b/components/gallery/GalleryItem.vue
@@ -11,18 +11,20 @@
     <div class="columns is-variable is-6">
       <div class="column is-two-fifths">
         <div class="is-relative">
+          <!-- preview button -->
           <a
-            v-if="canPreview && !hasResources"
+            v-if="canPreview"
             class="fullscreen-button is-justify-content-center is-align-items-center"
             @click="isFullscreen = true">
             <NeoIcon icon="expand" />
           </a>
+
+          <!-- media item -->
           <div v-if="hasResources" class="gallery-item-carousel">
             <o-carousel
-              :overlay="overlayCarousel"
+              v-model="activeCarousel"
               indicators-class="mt-4"
-              indicator-item-class="mx-1"
-              @click="overlayCarousel = !overlayCarousel">
+              indicator-item-class="mx-1">
               <o-carousel-item
                 v-for="resource in nftResources"
                 :key="resource.id">
@@ -127,7 +129,7 @@
 
     <CarouselTypeVisited class="mt-8" />
 
-    <GalleryItemPreviewer v-model="isFullscreen" />
+    <GalleryItemPreviewer v-model="isFullscreen" :item-src="previewItemSrc" />
   </section>
 </template>
 
@@ -168,10 +170,6 @@ const tabs = {
 }
 const activeTab = ref(tabs.offers)
 const showCongratsMessage = ref(false)
-const overlayCarousel = ref(false)
-const hasResources = computed(
-  () => nftResources.value && nftResources.value?.length > 1
-)
 
 const isFullscreen = ref(false)
 const canPreview = computed(() =>
@@ -180,6 +178,19 @@ const canPreview = computed(() =>
   )
 )
 
+const activeCarousel = ref(0)
+const activeCarouselImage = computed(() => {
+  const resource = nftResources.value?.[activeCarousel.value]
+  return resource?.src || 'placeholder.webp'
+})
+const hasResources = computed(
+  () => nftResources.value && nftResources.value?.length > 1
+)
+
+const previewItemSrc = computed(
+  () => (hasResources.value && activeCarouselImage.value) || nftImage.value
+)
+
 const onNFTBought = () => {
   activeTab.value = tabs.activity
   showCongratsMessage.value = true
diff --git a/components/gallery/GalleryItemPreviewer.vue b/components/gallery/GalleryItemPreviewer.vue
index 44eace175d..742f96a02d 100644
--- a/components/gallery/GalleryItemPreviewer.vue
+++ b/components/gallery/GalleryItemPreviewer.vue
@@ -14,7 +14,7 @@
     <div class="gallery-item-modal-container">
       <MediaItem
         class="gallery-item-media"
-        :src="nftImage"
+        :src="itemSrc"
         :placeholder="placeholder"
         :animation-src="nftAnimation"
         :mime-type="nftMimeType"
@@ -28,11 +28,12 @@
 import { useVModel } from '@vueuse/core'
 import { MediaItem, NeoButton, NeoIcon } from '@kodadot1/brick'
 import { useGalleryItem } from './useGalleryItem'
-const { nft, nftImage, nftAnimation, nftMimeType } = useGalleryItem()
+const { nft, nftAnimation, nftMimeType } = useGalleryItem()
 const { placeholder } = useTheme()
 
 const props = defineProps<{
   value: boolean
+  itemSrc: string
 }>()
 const emit = defineEmits(['input'])
 const isFullscreen = useVModel(props, 'value', emit)