feat: carousel for resources on gallery detail

components/gallery/GalleryItem.vue

@@ -11,13 +11,35 @@
  <div class="columns is-variable is-6">
  <div class="column is-two-fifths">
  <div class="is-relative">
+ <!-- preview button -->
  <a
  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
+ v-model="activeCarousel"
+ indicators-class="mt-4"
+ indicator-item-class="mx-1">
+ <o-carousel-item
+ v-for="resource in nftResources"
+ :key="resource.id">
+ <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':
@@ -33,6 +55,7 @@
  :placeholder="placeholder" />
  </div>
  </div>
+
  <div class="py-8 column">
  <div
  class="is-flex is-flex-direction-column is-justify-content-space-between h-full">
@@ -105,11 +128,13 @@
  data-cy="carousel-related" />
 
  <CarouselTypeVisited class="mt-8" />
- <GalleryItemPreviewer v-model="isFullscreen" />
+
+ <GalleryItemPreviewer v-model="isFullscreen" :item-src="previewItemSrc" />
  </section>
 </template>
 
 <script setup lang="ts">
+import { OCarousel, OCarouselItem } from '@oruga-ui/oruga'
 import { IdentityItem, MediaItem, NeoIcon } from '@kodadot1/brick'
 
 import { useGalleryItem } from './useGalleryItem'
@@ -133,7 +158,7 @@ const route = useRoute()
 const router = useRouter()
 const { placeholder } = useTheme()
 
-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)
@@ -153,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
@@ -268,4 +306,35 @@ $break-point-width: 930px;
 .h-audio {
  height: 70%;
 }
+
+.gallery-item-carousel {
+ :deep .o-car {
+ &__item {
+ overflow: hidden;
+ }
+
+ &__overlay {
+ @include ktheme() {
+ background: theme('background-color');
+ }
+ }
+
+ &__indicator {
+ &__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>

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)

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 = (nftId?: string) => {
  const nftAnimation = ref('')
  const nftMimeType = ref('')
  const nftMetadata = ref<NFTWithMetadata>()
+ const nftResources = ref<NftResources[]>()
 
  const { params } = useRoute()
  const id = nftId || params.id
@@ -83,6 +84,13 @@ export const useGalleryItem = (nftId?: string) => {
 
  nft.value = nftEntity
 
+ nftResources.value = nftEntity.resources?.map((resource) => {
+ return {
+ ...resource,
+ src: sanitizeIpfsUrl(resource.src),
+ thumb: sanitizeIpfsUrl(resource.thumb),
+ }
+ })
  nftMetadata.value = await getNftMetadata(nftEntity, urlPrefix.value)
  nftMimeType.value = await whichMimeType(nftMetadata.value)
 
@@ -110,5 +118,6 @@ export const useGalleryItem = (nftId?: string) => {
  nftAnimation,
  nftMimeType,
  nftMetadata,
+ nftResources,
  }
 }

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 &