Merge branch 'main' into chore/refactor/scss

components/media/MediaResolver.vue

@@ -3,7 +3,7 @@
     :is="resolveComponent"
     v-if="src"
     :src="src"
-    :poster="poster || '/placeholder.webp'"
+    :poster="poster || placeholder"
     :description="description"
     :preview="preview"
     :available-animations="availableAnimations" />
@@ -33,7 +33,15 @@ const components = {
   Media: defineAsyncComponent(() => import('./type/UnknownMedia.vue')),
 }
 
+const { $colorMode } = useNuxtApp()
+
 const resolveComponent = computed(() => {
   return components[resolveMedia(props.mimeType) + SUFFIX]
 })
+
+const placeholder = computed(() => {
+  return $colorMode.preference === 'dark'
+    ? '/placeholder.webp'
+    : '/placeholder-white.webp'
+})
 </script>

components/rmrk/Collection/List/CollectionList.vue

@@ -116,7 +116,10 @@ export default class CollectionList extends mixins(
 ) {
   private collections: Collection[] = []
   private meta: Metadata[] = []
-  private placeholder = '/placeholder.webp'
+  private placeholder =
+    this.$colorMode.preference === 'dark'
+      ? '/placeholder.webp'
+      : '/placeholder-white.webp'
   private isLoading = true
   private searchQuery: SearchQuery = {
     search: this.$route.query?.search?.toString() ?? '',

components/rmrk/Gallery/GalleryCard.vue

@@ -77,8 +77,6 @@ export default class GalleryCard extends mixins(AuthMixin) {
   protected title = ''
   protected animatedUrl = ''
 
-  protected placeholder = '/placeholder.webp'
-
   async fetch() {
     if (this.metadata) {
       const image = await getSingleCloudflareImage(this.metadata)

components/shared/gallery/BaseGalleryItem.vue

@@ -28,12 +28,12 @@
             }">
             <img
               v-if="isFullScreenView"
-              :src="image"
+              :src="itemImage"
               :alt="description"
               @contextmenu.prevent />
             <BasicImage
               v-else-if="imageVisible"
-              :src="image"
+              :src="itemImage"
               :alt="description"
               data-cy="item-media"
               @contextmenu.native.prevent />
@@ -42,7 +42,7 @@
               class="media-container is-flex is-justify-content-center">
               <MediaResolver
                 :src="animationUrl"
-                :poster="image"
+                :poster="itemImage"
                 :description="description"
                 :available-animations="[animationUrl]"
                 :mime-type="mimeType"
@@ -52,7 +52,7 @@
             <div
               v-show="isTileView"
               id="tile-placeholder"
-              :style="{ 'background-image': 'url(' + image + ')' }"
+              :style="{ 'background-image': 'url(' + itemImage + ')' }"
               :alt="description"
               @click="exitTileView"
               @contextmenu.prevent />
@@ -105,7 +105,7 @@ const directives = {
 
 @Component({ components, directives })
 export default class BaseGalleryItem extends Vue {
-  @Prop({ type: String, default: '/placeholder.svg' }) public image!: string
+  @Prop({ type: String, default: '' }) public image!: string
   @Prop(String) public animationUrl!: string
   @Prop({ type: String, default: 'KodaDot NFT minted multimedia' })
   public description!: string
@@ -126,6 +126,15 @@ export default class BaseGalleryItem extends Vue {
     return this.$store.getters['preferences/getEnableGyroEffect']
   }
 
+  get itemImage(): string {
+    return (
+      this.image ||
+      (this.$colorMode.preference === 'dark'
+        ? '/placeholder.webp'
+        : '/placeholder-white.webp')
+    )
+  }
+
   public toggleView(): void {
     this.viewMode = this.viewMode === 'default' ? 'theatre' : 'default'
   }

components/shared/view/BasicImage.vue

@@ -1,7 +1,7 @@
 <template>
   <b-image
-    :src="src || '/placeholder.webp'"
-    src-fallback="/placeholder.webp"
+    :src="src || placeholder"
+    :src-fallback="placeholder"
     :alt="alt"
     ratio="1by1"
     :class="customClass"
@@ -18,14 +18,20 @@
 </template>
 
 <script lang="ts" setup>
+const { $consola, $colorMode } = useNuxtApp()
+
 defineProps({
   src: { type: String, default: '' },
   alt: { type: String, default: 'KodaDot NFT minted multimedia' },
   customClass: { type: String, default: '' },
   rounded: Boolean,
 })
 
-const { $consola } = useNuxtApp()
+const placeholder = computed(() => {
+  return $colorMode.preference === 'dark'
+    ? '/placeholder.webp'
+    : '/placeholder-white.webp'
+})
 
 function onImageError(ev: Event, src: string) {
   $consola.log('[BasicImage] to load:', src, ev)

components/unique/Collection/Item/CollectionItem.vue

@@ -132,7 +132,12 @@ export default class CollectionItem extends mixins(
   private formater = tokenIdToRoute
 
   get image() {
-    return sanitizeIpfsUrl(this.collection.image || '') || '/placeholder.webp'
+    return (
+      sanitizeIpfsUrl(this.collection.image || '') ||
+      (this.$colorMode.preference === 'dark'
+        ? '/placeholder.webp'
+        : '/placeholder-white.webp')
+    )
   }
 
   get description() {