refactor: move media from rmrk/Media/ to media/

.eslintrc.js

@@ -5,14 +5,14 @@ module.exports = {
     node: true,
   },
   extends: [
-    'eslint:recommended',
-    'plugin:vue/essential',
+    'plugin:vue/recommended',
     'plugin:@typescript-eslint/recommended',
+    'prettier',
   ],
   parser: 'vue-eslint-parser',
   parserOptions: {
-    ecmaVersion: 11,
     parser: '@typescript-eslint/parser',
+    ecmaVersion: 2020,
     sourceType: 'module',
   },
   plugins: ['vue', 'prettier', '@typescript-eslint', 'unicorn'],
@@ -33,6 +33,7 @@ module.exports = {
     quotes: ['error', 'single'],
     semi: ['error', 'never'],
     'max-classes-per-file': ['error', 2],
+    'sort-imports': ['warn', { allowSeparatedGroups: true }],
   },
   ignorePatterns: ['*.md'],
   overrides: [

components/base/CarouselCardList.vue

@@ -81,11 +81,12 @@
 </template>
 
 <script lang="ts">
-import { Component, mixins, Prop } from 'nuxt-property-decorator'
+import { Component, Prop, mixins } from 'nuxt-property-decorator'
+
 import AuthMixin from '@/utils/mixins/authMixin'
+import PrefixMixin from '@/utils/mixins/prefixMixin'
 
 import type { CarouselNFT } from './types'
-import PrefixMixin from '~/utils/mixins/prefixMixin'
 
 const components = {
   Loader: () => import('@/components/shared/Loader.vue'),
@@ -94,7 +95,7 @@ const components = {
   BasicImage: () => import('@/components/shared/view/BasicImage.vue'),
   Appreciation: () => import('@/components/rmrk/Gallery/Appreciation.vue'),
   PreviewMediaResolver: () =>
-    import('@/components/rmrk/Media/PreviewMediaResolver.vue'),
+    import('@/components/media/PreviewMediaResolver.vue'),
 }
 
 @Component<CarouselList>({

components/media/MediaResolver.vue

@@ -0,0 +1,39 @@
+<template>
+  <component
+    :is="resolveComponent"
+    v-if="src"
+    :src="src"
+    :poster="poster || '/placeholder.webp'"
+    :description="description"
+    :preview="preview"
+    :available-animations="availableAnimations" />
+</template>
+
+<script lang="ts" setup>
+import { resolveMedia } from '@/utils/gallery/media'
+
+const props = defineProps<{
+  src?: string
+  mimeType?: string
+  poster?: string
+  description?: string
+  availableAnimations?: string[]
+  preview?: boolean
+}>()
+
+const SUFFIX = 'Media'
+const components = {
+  VideoMedia: defineAsyncComponent(() => import('./type/VideoMedia.vue')),
+  ImageMedia: defineAsyncComponent(() => import('./type/ImageMedia.vue')),
+  AudioMedia: defineAsyncComponent(() => import('./type/AudioMedia.vue')),
+  JsonMedia: defineAsyncComponent(() => import('./type/JsonMedia.vue')),
+  ModelMedia: defineAsyncComponent(() => import('./type/ModelMedia.vue')),
+  IFrameMedia: defineAsyncComponent(() => import('./type/IFrameMedia.vue')),
+  ObjectMedia: defineAsyncComponent(() => import('./type/ObjectMedia.vue')),
+  Media: defineAsyncComponent(() => import('./type/UnknownMedia.vue')),
+}
+
+const resolveComponent = computed(() => {
+  return components[resolveMedia(props.mimeType) + SUFFIX]
+})
+</script>

components/media/PreviewMediaResolver.vue

@@ -0,0 +1,53 @@
+<template>
+  <MediaResolver
+    :src="properSrc"
+    :mime-type="properType"
+    :poster="poster"
+    preview />
+</template>
+
+<script lang="ts" setup>
+import { get, update } from 'idb-keyval'
+import { $fetch } from 'ohmyfetch'
+
+import { NFTMetadata } from '@/components/rmrk/service/scheme'
+
+const MediaResolver = defineAsyncComponent(
+  () => import('@/components/media/MediaResolver.vue')
+)
+
+const props = defineProps({
+  src: { type: String, default: '' },
+  metadata: { type: String, default: '' },
+  mimeType: { type: String, default: '' },
+  poster: { type: String, default: '' },
+})
+
+const type = ref('')
+
+const properType = computed(() => props.mimeType || type.value || 'image/webp')
+const properSrc = computed(() => props.src || '/placeholder.webp')
+
+const fetchMimeType = async () => {
+  if (props.mimeType) {
+    return
+  }
+
+  const nftMetadata = await get<NFTMetadata>(props.metadata)
+  type.value = nftMetadata?.type || ''
+
+  if (!type.value) {
+    const response = await $fetch(props.src, { method: 'HEAD' })
+    type.value = response.type
+
+    update(props.metadata, (cached) => ({
+      ...(cached || {}),
+      type: type.value,
+    }))
+  }
+}
+
+onMounted(() => {
+  fetchMimeType()
+})
+</script>

components/rmrk/Media/AudioMedia.vue → components/media/type/AudioMedia.vue

@@ -8,20 +8,13 @@
       played-line-color="rgba(0,0,0,0.74)"
       noplayed-line-color="#d32e79"
       playtime-font-color="rgba(0,0,0,0.74)" />
-    <!-- <audio controls class="media-audio__player">
-      <source :src="src" :type="mimeType" />
-      Unable to show audio
-    </audio> -->
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'nuxt-property-decorator'
-@Component({})
-export default class AppAudio extends Vue {
-  @Prop() public src!: string
-  @Prop() public mimeType!: string
-}
+<script lang="ts" setup>
+defineProps<{
+  src?: string
+}>()
 </script>
 
 <style>

components/rmrk/Media/IFrameMedia.vue → components/media/type/IFrameMedia.vue

@@ -8,13 +8,11 @@
     allow="accelerometer; camera; gyroscope; microphone; xr-spatial-tracking;" />
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'nuxt-property-decorator'
-@Component({})
-export default class ImageMedia extends Vue {
-  @Prop() public src!: string
-  @Prop() public mimeType!: string
-}
+<script lang="ts" setup>
+defineProps<{
+  src?: string
+  mimeType?: string
+}>()
 </script>
 
 <style scoped>

components/rmrk/Media/ImageMedia.vue → components/media/type/ImageMedia.vue

@@ -4,13 +4,11 @@
   </figure>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'nuxt-property-decorator'
-@Component({})
-export default class ImageMedia extends Vue {
-  @Prop() public src!: string
-  @Prop() public mimeType!: string
-}
+<script lang="ts" setup>
+defineProps<{
+  src?: string
+  mimeType?: string
+}>()
 </script>
 
 <style scoped>

components/media/type/JsonMedia.vue

@@ -0,0 +1,33 @@
+<template>
+  <div>
+    <div v-for="item in data" :key="item.key">
+      <div>
+        <b>{{ item.key }}</b
+        >: {{ item.value }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import api from '@/utils/fetch'
+
+const { $consola } = useNuxtApp()
+const props = defineProps<{
+  src?: string
+}>()
+const data = ref<{ key: string; value: string }[]>([])
+
+onMounted(async () => {
+  if (props.src) {
+    const { data } = await api.get(props.src)
+    $consola.log('data', data)
+    data.forEach(([key, value]) => {
+      data.push({
+        key,
+        value: JSON.stringify(value),
+      })
+    })
+  }
+})
+</script>

components/rmrk/Media/ModelMedia.vue → components/media/type/ModelMedia.vue

@@ -6,7 +6,7 @@
       :src="src"
       :poster="poster"
       :alt="description"
-      :availableAnimations="availableAnimations"
+      :available-animations="availableAnimations"
       auto-rotate
       :camera-controls="isDetail"
       :ar="isDetail"
@@ -18,22 +18,18 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'nuxt-property-decorator'
+<script lang="ts" setup>
 import '@google/model-viewer'
 
-@Component({})
-export default class ViewModel extends Vue {
-  @Prop({ type: String, default: '' }) public readonly src!: string
-  @Prop({ type: String, default: '' }) public readonly poster?: string
-  @Prop({ type: String, default: '' }) public readonly description?: string
-  @Prop({ type: Array }) public readonly availableAnimations?: string[]
-  @Prop(Boolean) public preview!: boolean
+const props = defineProps({
+  src: { type: String, default: '' },
+  poster: { type: String, default: '' },
+  description: { type: String, default: '' },
+  availableAnimations: { type: Array, default: () => [] },
+  preview: Boolean,
+})
 
-  get isDetail(): boolean {
-    return !this.preview
-  }
-}
+const isDetail = computed(() => !props.preview)
 </script>
 
 <style lang="scss" scoped>

components/media/type/ObjectMedia.vue

@@ -0,0 +1,18 @@
+<template>
+  <object class="iframe-model__wrapper" :type="mimeType" :data="src" />
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  src?: string
+  mimeType?: string
+}>()
+</script>
+
+<style scoped>
+.iframe-model__wrapper {
+  height: 100%;
+  min-height: 37em;
+  width: 100%;
+}
+</style>

components/media/type/UnknownMedia.vue

@@ -0,0 +1,13 @@
+<template>
+  <div>
+    <a :href="src" target="_blank" rel="noopener noreferrer"
+      >Unknown animated media, click to download</a
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  src?: string
+}>()
+</script>

components/rmrk/Media/VideoMedia.vue → components/media/type/VideoMedia.vue

@@ -15,20 +15,14 @@
   </div>
 </template>
 
-<script lang="ts">
-import { Component, Prop, Vue } from 'nuxt-property-decorator'
-
-@Component({})
-export default class VideoMedia extends Vue {
-  @Prop(String) public src!: string
-  @Prop(String) public poster?: string
-  @Prop(String) public mimeType!: string
-  @Prop(Boolean) public preview!: boolean
-
-  get controls(): boolean {
-    return !this.preview
-  }
-}
+<script lang="ts" setup>
+const props = defineProps<{
+  src?: string
+  poster?: string
+  mimeType?: string
+  preview?: boolean
+}>()
+const controls = computed(() => !props.preview)
 </script>
 
 <style lang="scss" scoped>