release update

.github/CODEOWNERS

@@ -1 +1,2 @@
-* @kodadot/code-review-guild
+* @kodadot/code-review-guild
+/libs/ui @kodadot/internal-dev

assets/styles/abstracts/_animations.scss

@@ -104,3 +104,49 @@
  display: inline-block;
  animation: dots 1.5s infinite;
 }
+
+@mixin shineEffect($shineColor, $shineHover) {
+ overflow: hidden;
+
+ &::before,
+ &::after {
+ content: '';
+ position: absolute;
+ top: 0;
+ height: 100%;
+ background-color: $shineColor;
+ transform: skewX(-30deg);
+ transition: background-color 0.3s;
+ z-index: 0;
+ }
+
+ &::before {
+ left: -120%;
+ width: 15%;
+ animation: shine1 3s ease-in-out infinite;
+ }
+
+ &::after {
+ left: -115%;
+ width: 3%;
+ animation: shine2 3s ease-in-out infinite;
+ }
+
+ &:hover {
+ &::before,
+ &::after {
+ background-color: $shineHover
+ }
+ }
+}
+
+@keyframes shine1 {
+ 0% { left: -118%; }
+ 100% { left: 112%; }
+}
+
+@keyframes shine2 {
+ 0% { left: -100%; }
+ 100% { left: 130%; }
+}
+

assets/styles/abstracts/_theme.scss

@@ -22,8 +22,10 @@ $themes: (
  'k-redaccent2': #ffe6e6,
  'k-grey': #999999,
  'k-grey-fix': #999999,
+ 'k-grey-light': #ECECEC,
  'k-pink': #ffb6ef,
  'k-yellow': #feffb6,
+ 'warning-yellow': #fffbcc,
  'k-blueaccent': #b6cbff,
  'k-aqua-blue': #cafdf4,
  'k-greenaccent': #c2ffac,
@@ -70,8 +72,10 @@ $themes: (
  'k-redaccent2': #390b0b,
  'k-grey': #cccccc,
  'k-grey-fix': #999999,
+ 'k-grey-light': #ECECEC,
  'k-pink': #7a2a68,
  'k-yellow': #363234,
+ 'warning-yellow': #3f3500,
  'k-blueaccent': #2e50a2,
  'k-aqua-blue': #106153,
  'k-greenaccent': #056a02,

assets/styles/components/_price-chart.scss

@@ -6,13 +6,13 @@
  left: 0;
  top: 0;
  }
- .neo-dropdown {
+ .time-range-dropdown {
  $width: 89px;
  $height: 30px;
  $font-size: 12px;
 
  position: absolute;
- right: 10px;
+ right: 60px;
  top: -8px;
  font-size: $font-size;
 

assets/styles/layouts/_main-navigation.scss

@@ -352,3 +352,10 @@
  height: 2.5rem;
  }
 }
+
+.has-navbar-fixed-top {
+ padding-top: $navbar-desktop-min-height !important;
+ @include mobile {
+ padding-top: $navbar-mobile-min-height !important;
+ }
+}

components/base/MediaItem.vue

@@ -0,0 +1,226 @@
+<template>
+ <div ref="mediaItem" class="media-object" style="height: fit-content">
+ <component
+ :is="resolveComponent"
+ :src="properSrc"
+ :sizes="sizes"
+ :animation-src="animationSrc"
+ :alt="title"
+ :placeholder="placeholder"
+ :original="original"
+ :is-lewd="isLewd"
+ :is-detail="isDetail"
+ :disable-operation="disableOperation"
+ :player-cover="audioPlayerCover"
+ :hover-on-cover-play="audioHoverOnCoverPlay"
+ :parent-hovering="isMediaItemHovering"
+ :image-component="imageComponent"
+ :preview="preview"
+ :autoplay="autoplay" />
+ <div
+ v-if="isLewd && isLewdBlurredLayer"
+ class="nsfw-blur is-capitalized is-flex is-align-items-center is-justify-content-center is-flex-direction-column">
+ <NeoIcon icon="eye-slash" class="mb-3" />
+ <span class="has-text-weight-bold">
+ {{ $t('lewd.explicit') }}
+ </span>
+ <span class="nsfw-desc text-align-center">{{
+ $t('lewd.explicitDesc')
+ }}</span>
+ </div>
+ <div
+ v-if="isInteractive"
+ class="k-shade border-k-grey is-flex is-align-items-center is-justify-content-center border is-rounded absolute-position image is-24x24">
+ <NeoIcon
+ icon="code"
+ pack="far"
+ class="is-size-7 has-text-weight-medium" />
+ </div>
+ <NeoButton
+ v-if="isLewd"
+ rounded
+ no-shadow
+ class="nsfw-action no-border px-4 py-1 is-size-6"
+ :class="{ hide: isLewdBlurredLayer }"
+ :label="
+ isLewdBlurredLayer ? $t('lewd.showContent') : $t('lewd.hideContent')
+ "
+ @click="toggleContent" />
+ </div>
+</template>
+
+<script lang="ts" setup>
+import type { ComputedOptions, ConcreteComponent, MethodOptions } from 'vue'
+import { useElementHover, useElementVisibility } from '@vueuse/core'
+import {
+ NeoAudioMedia,
+ NeoButton,
+ NeoIFrameMedia,
+ NeoIcon,
+ NeoImageMedia,
+ NeoJsonMedia,
+ NeoObjectMedia,
+ NeoUnknownMedia,
+ NeoVideoMedia,
+} from '@kodadot1/brick'
+import { getMimeType, resolveMedia } from '@/utils/gallery/media'
+import { MediaType } from '@/components/rmrk/types'
+
+const props = withDefaults(
+ defineProps<{
+ src?: string
+ animationSrc?: string
+ mimeType?: string
+ title?: string
+ original?: boolean
+ isLewd?: boolean
+ isDetail?: boolean
+ placeholder?: string
+ disableOperation?: boolean
+ audioPlayerCover?: string
+ audioHoverOnCoverPlay?: boolean
+ // props for video component
+ preview?: boolean
+ autoplay?: boolean
+ // props for image component
+ sizes?: string
+ imageComponent?:
+ | string
+ // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+ | ConcreteComponent<{}, any, any, ComputedOptions, MethodOptions>
+ }>(),
+ {
+ src: '',
+ animationSrc: '',
+ mimeType: '',
+ title: 'KodaDot NFT',
+ original: false,
+ isLewd: false,
+ isDetail: false,
+ placeholder: './Koda.svg',
+ disableOperation: undefined,
+ audioPlayerCover: '',
+ imageComponent: 'img',
+ },
+)
+
+const mediaItem = ref<HTMLDivElement>()
+
+// props.mimeType may be empty string "". Add `image/png` as fallback
+const mimeType = computed(() => props.mimeType || type.value || 'image/png')
+
+const sizes = computed(() =>
+ props.sizes === 'original' ? undefined : props.sizes,
+)
+
+const targetIsVisible = useElementVisibility(mediaItem)
+const modelComponent = ref<Component>()
+const isModelComponentLoaded = ref(false)
+const shouldLoadModelComponent = computed(() => {
+ return targetIsVisible.value && mimeType.value === 'model/gltf-binary'
+})
+watch(shouldLoadModelComponent, (shouldLoad) => {
+ if (shouldLoad && !isModelComponentLoaded.value) {
+ modelComponent.value = defineAsyncComponent(
+ async () => (await import('@kodadot1/brick')).NeoModelMedia,
+ )
+ isModelComponentLoaded.value = true
+ }
+})
+
+const PREFIX = 'Neo'
+const SUFFIX = 'Media'
+
+const isInteractive = computed(() => {
+ return resolveMedia(mimeType.value) === MediaType.IFRAME && !props.isDetail
+})
+const type = ref('')
+
+const isLewdBlurredLayer = ref(props.isLewd)
+const components = {
+ NeoImageMedia,
+ NeoVideoMedia,
+ NeoAudioMedia,
+ NeoJsonMedia,
+ NeoIFrameMedia,
+ NeoObjectMedia,
+ NeoUnknownMedia,
+}
+
+const resolveComponent = computed(() => {
+ let mediaType = resolveMedia(mimeType.value)
+
+ if (mediaType === MediaType.IFRAME && !props.isDetail) {
+ mediaType = MediaType.IMAGE
+ }
+
+ return mediaType === 'Model'
+ ? modelComponent.value
+ : components[PREFIX + mediaType + SUFFIX]
+})
+const properSrc = computed(() => props.src || props.placeholder)
+
+const updateComponent = async () => {
+ if (props.animationSrc && !props.mimeType) {
+ type.value = await getMimeType(props.animationSrc)
+ }
+}
+
+watch(
+ () => props.animationSrc,
+ () => updateComponent(),
+ {
+ immediate: true,
+ },
+)
+
+const toggleContent = () => {
+ isLewdBlurredLayer.value = !isLewdBlurredLayer.value
+}
+
+const isMediaItemHovering = useElementHover(mediaItem)
+
+defineExpose({ isLewdBlurredLayer })
+</script>
+
+<style lang="scss" scoped>
+@import '@/assets/styles/abstracts/variables';
+.media-object {
+ .nsfw-blur {
+ backdrop-filter: blur(60px);
+ position: absolute;
+ top: 0;
+ height: 100%;
+ width: 100%;
+ @include ktheme() {
+ color: theme('text-color');
+ }
+
+ .nsfw-desc {
+ max-width: 18.75rem;
+ }
+ }
+ .nsfw-action {
+ position: absolute;
+ left: 50%;
+ transform: translateX(-50%);
+ bottom: 1.25rem;
+ @include ktheme() {
+ color: theme('text-color') !important;
+ background: theme('background-color') !important;
+ }
+ &.hide {
+ @include ktheme() {
+ color: theme('background-color') !important;
+ background: theme('text-color') !important;
+ }
+ }
+ }
+
+ .absolute-position {
+ position: absolute;
+ right: 0.75rem;
+ top: 0.75rem;
+ }
+}
+</style>

components/base/types.ts

@@ -30,6 +30,7 @@ export interface CarouselNFT extends ItemResources {
  }
  name: string
  price: string
+ latestSalePrice?: string
  timestamp: string
  unixTime: number
  metadata?: string

components/carousel/CarouselTypeGenerative.vue

@@ -12,6 +12,6 @@ import { useCarouselGenerativeNftEvents } from './utils/useCarouselEvents'
 
 const { nfts, ids } = await useCarouselGenerativeNftEvents(
  ['176'],
- ['38', '40'],
+ ['38', '40', '46'],
 )
 </script>

components/carousel/module/CarouselInfo.vue

@@ -35,12 +35,16 @@
  ? 'is-justify-content-space-between'
  : 'is-justify-content-end',
  ]">
- <Money
- v-if="showPrice"
- :value="item.price"
- inline
- :prefix="item.chain"
- :unit-symbol="unitSymbol" />
+ <div v-if="showPrice" class="is-flex is-align-items-center">
+ <Money
+ :value="price"
+ inline
+ :prefix="item.chain"
+ :unit-symbol="unitSymbol" />
+ <span v-if="showSold" class="ml-2 has-text-grey is-size-7"
+ >- {{ $t('spotlight.sold') }}</span
+ >
+ </div>
  <p class="is-size-7 chain-name is-capitalized">{{ chainName }}</p>
  </div>
  </div>
@@ -71,8 +75,11 @@ const chainName = computed(() => {
  return getChainNameByPrefix(props.item.chain || urlPrefix.value)
 })
 
+const price = computed(() => props.item.latestSalePrice ?? props.item.price)
+const showSold = computed(() => Number(props.item.latestSalePrice) > 0)
+
 const showPrice = computed((): boolean => {
- return Number(props.item.price) > 0 && !isCollection
+ return Number(price.value) > 0 && !isCollection
 })
 
 const unitSymbol = computed(() => prefixToToken[props.item.chain || 'ksm'])