Merge pull request #203 from kodadot/svg-games

Can show svg games (svg+xml)

Author: yangwao

dashboard/src/components/rmrk/Gallery/GalleryItem.vue

@@ -162,7 +162,7 @@ export default class GalleryItem extends Vue {
         const { headers } = await api.head(this.nft.animation_url);
         this.mimeType = headers['content-type'];
         const mediaType = resolveMedia(this.mimeType);
-        this.imageVisible = ![MediaType.VIDEO, MediaType.IMAGE, MediaType.MODEL].some(
+        this.imageVisible = ![MediaType.VIDEO, MediaType.IMAGE, MediaType.MODEL, MediaType.IFRAME].some(
           t => t === mediaType
         );
       }

dashboard/src/components/rmrk/Media/IFrameMedia.vue

@@ -0,0 +1,21 @@
+<template>
+
+    <iframe class="iframe-model__wrapper" :src="src" :alt="mimeType" />
+</template>
+
+<script lang="ts" >
+import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
+@Component({})
+export default class ImageMedia extends Vue {
+  @Prop() public src!: string;
+  @Prop() public mimeType!: string;
+}
+</script>
+
+<style scoped>
+.iframe-model__wrapper {
+  height: 100%;
+  min-height: 37em;
+  width: 100%;
+}
+</style>

dashboard/src/components/rmrk/Media/MediaResolver.vue

@@ -13,6 +13,7 @@ const ImageMedia = () => import('./ImageMedia.vue')
 const AudioMedia = () => import('./AudioMedia.vue')
 const JsonMedia = () => import('./JsonMedia.vue')
 const ModelMedia = () => import('./ModelMedia.vue')
+const IFrameMedia = () => import('./IFrameMedia.vue')
 const Media = () => import('./Unknown.vue')
 const SUFFIX = 'Media'
 @Component({
@@ -22,6 +23,7 @@ const SUFFIX = 'Media'
     AudioMedia,
     JsonMedia,
     ModelMedia,
+    IFrameMedia,
     Media
   }
 })

dashboard/src/components/rmrk/types.ts

@@ -63,6 +63,7 @@ export enum MediaType {
   AUDIO = 'Audio',
   JSON = 'Json',
   TEXT = 'Text',
+  IFRAME = 'IFrame',
   UNKNOWN = ''
 }
 

dashboard/src/components/rmrk/utils.ts

@@ -201,6 +201,10 @@ export const resolveMedia = (mimeType: string): MediaType => {
     return MediaType.MODEL;
   }
 
+  if (/^image\/svg\+xml/.test(mimeType)) {
+    return MediaType.IFRAME
+  }
+
   const match = mimeType.match(/^[a-z]+/);
 
   if (!match) {

dashboard/tslint.json

@@ -17,6 +17,7 @@
     "quotemark": [true, "single"],
     "no-console": false,
     "no-trailing-whitespace": false,
-    "max-classes-per-file": [true, 2]
+    "max-classes-per-file": [true, 2],
+    "no-string-literal": false
   }
 }