Merge pull request #200 from kodadot/model-view

model view

Author: yangwao

dashboard/package.json

@@ -16,6 +16,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.15.2",
     "@fortawesome/free-solid-svg-icons": "^5.15.2",
     "@fortawesome/vue-fontawesome": "^2.0.2",
+    "@google/model-viewer": "^1.6.0",
     "@polkadot/extension-dapp": "^0.36.1",
     "@polkadot/types": "^3.7.2",
     "@polkadot/ui-keyring": "^0.68.1",

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

@@ -157,13 +157,13 @@ export default class GalleryItem extends Vue {
       this.nft = {
         ...nft,
         image: sanitizeIpfsUrl(nft.image || ''),
-        animation_url: sanitizeIpfsUrl(nft.animation_url || '', 'pinata')
+        animation_url: sanitizeIpfsUrl(nft.animation_url || '', 'dweb')
       };
       if (this.nft.animation_url) {
         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].some(
+        this.imageVisible = ![MediaType.VIDEO, MediaType.IMAGE, MediaType.MODEL].some(
           t => t === mediaType
         );
       }

dashboard/src/components/rmrk/Gallery/Item/Sharing.vue

@@ -74,7 +74,7 @@ import { IFrame, emptyIframe } from '../../types';
 @Component({})
 export default class Sharing extends Vue {
   @Prop({ default: 'Check this cool NFT on %23KusamaNetwork %23kodadot' }) label!: string;
-  @Prop({ default: emptyIframe }) iframe!: IFrame;
+  @Prop({ default: () => emptyIframe }) iframe!: IFrame;
 
   get helloText() {
     return this.label;

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

@@ -0,0 +1,57 @@
+<template>
+  <div class="view-model__wrapper">
+    <model-viewer
+      class="view-model__component"
+      :src="src"
+      :ios-src="iosSrc"
+      camera-controls
+      shadow-intensity="1"
+      ar
+      ar-modes="scene-viewer webxr quick-look"
+    >
+      <div class="progress-bar hide" slot="progress-bar">
+        <div class="update-bar"></div>
+      </div>
+      <button class="button is-dark" slot="ar-button" id="ar-button">
+        AR
+      </button>
+    </model-viewer>
+  </div>
+</template>
+
+<script lang="ts" >
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import '@google/model-viewer';
+
+
+
+const testSrc = 'http://localhost:8000/Astronaut.glb';
+const testIosSrc = 'http://localhost:8000/Astronaut.usdz';
+
+@Component({})
+export default class ViewModel extends Vue {
+  @Prop({ default: testSrc }) public src!: string;
+  @Prop({ default: testIosSrc }) public iosSrc!: string;
+
+  // get src() {
+  //   return 'https://kristina-simakova.github.io/ar-webview/assets/RocketShip_1393.gltf';  // }
+
+  get poster() {
+    return '';
+  }
+}
+</script>
+
+<style scoped>
+.view-model__wrapper {
+  height: 100%;
+  width: 100%;
+}
+
+.view-model__component {
+  height: 100%;
+  width: 100%;
+  min-width: 300px;
+  min-height: 300px;
+}
+</style>

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

@@ -1,6 +1,6 @@
 
 <template>
-  <component :is="resolveComponent" :src="src" />
+  <component v-if="src" :is="resolveComponent" :src="src" />
 </template>
 
 <script lang="ts" >
@@ -12,6 +12,7 @@ const VideoMedia = () => import('./VideoMedia.vue')
 const ImageMedia = () => import('./ImageMedia.vue')
 const AudioMedia = () => import('./AudioMedia.vue')
 const JsonMedia = () => import('./JsonMedia.vue')
+const ModelMedia = () => import('./ModelMedia.vue')
 const Media = () => import('./Unknown.vue')
 const SUFFIX = 'Media'
 @Component({
@@ -20,6 +21,7 @@ const SUFFIX = 'Media'
     ImageMedia,
     AudioMedia,
     JsonMedia,
+    ModelMedia,
     Media
   }
 })

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

@@ -0,0 +1,42 @@
+<template>
+  <div class="view-model__wrapper">
+    <model-viewer
+      class="view-model__component"
+      :src="src"
+      camera-controls
+      shadow-intensity="1"
+    >
+    </model-viewer>
+  </div>
+</template>
+
+<script lang="ts" >
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import '@google/model-viewer';
+
+@Component({})
+export default class ViewModel extends Vue {
+  @Prop() public src!: string;
+
+  // get src() {
+  //   return 'https://kristina-simakova.github.io/ar-webview/assets/RocketShip_1393.gltf';  // }
+
+  get poster() {
+    return '';
+  }
+}
+</script>
+
+<style scoped>
+.view-model__wrapper {
+  height: 100%;
+  width: 100%;
+}
+
+.view-model__component {
+  height: 100%;
+  width: 100%;
+  min-width: 300px;
+  min-height: 592px;
+}
+</style>

dashboard/src/components/rmrk/types.ts

@@ -58,6 +58,7 @@ export enum RmrkEvent {
 
 export enum MediaType {
   VIDEO = 'Video',
+  MODEL = 'Model',
   IMAGE = 'Image',
   AUDIO = 'Audio',
   JSON = 'Json',

dashboard/src/components/rmrk/utils.ts

@@ -19,6 +19,7 @@ export const ipfsProviders: Record<string, string> = {
   pinata: 'https://gateway.pinata.cloud/',
   cloudflare: 'https://cloudflare-ipfs.com/',
   ipfs: DEFAULT_IPFS_PROVIDER,
+  dweb: 'https://dweb.link/',
   '': 'https://cloudflare-ipfs.com/'
 }
 
@@ -193,7 +194,11 @@ export const resolveMedia = (mimeType: string): MediaType => {
   }
 
   if (/^application\/json/.test(mimeType)) {
-    return MediaType.JSON;
+    return MediaType.MODEL;
+  }
+
+  if (/^application\/octet-stream/.test(mimeType)) {
+    return MediaType.MODEL;
   }
 
   const match = mimeType.match(/^[a-z]+/);
@@ -221,3 +226,21 @@ export const sortByModification = (a: any, b: any) => b._mod - a._mod
 export const nftSort = (a: any, b: any) => b.blockNumber - a.blockNumber
 export const sortBy = (arr: any[], cb = nftSort) => arr.slice().sort(cb)
 export const defaultSortBy = (arr: any[]) => sortBy(arr)
+
+
+export const isJsonGltf = (value: any): boolean => {
+  try {
+    if (!(value['asset'] && /^2\.[0-9]$/.test(value['asset']['version']))) {
+      return false
+    }
+
+    if (!(value['buffers'] && /^data:application\/octet/.test(value['buffers'][0]['uri']))) {
+      return false
+    }
+
+    return true
+  } catch (e) {
+    console.warn(`Unable to decide on isJsonGltf ${e}`)
+    return false
+  }
+}

dashboard/src/main.ts

@@ -24,6 +24,7 @@ import { getPrefixByStoreUrl } from '@/utils/chain'
 import 'setimmediate';
 import i18n from './i18n'
 import mingo from 'mingo'
+import api from './fetch'
 
 Vue.filter('shortAddress', shortAddress);
 
@@ -33,6 +34,7 @@ Vue.filter('shortAddress', shortAddress);
 (window as any).R = getInstance;
 (window as any).W = web3FromAddress;
 (window as any).mingo = mingo;
+(window as any).api = api;
 // (window as any).migrateCollection = migrateCollection;
 // (window as any).migrateNFT = migrateNFT;
 

dashboard/src/router/rmrk.ts

@@ -7,6 +7,7 @@ const rmrkFaq = () => import('@/components/rmrk/Faq.vue')
 const Packs = () => import('@/components/rmrk/Pack/Packs.vue')
 const PackItem = () => import('@/components/rmrk/Pack/PackItem.vue')
 const CollectionItem = () => import('@/components/rmrk/Gallery/CollectionItem.vue')
+const ViewModel = () => import('@/components/rmrk/Gallery/ViewModel.vue')
 
 export default [
   {
@@ -54,4 +55,9 @@ export default [
     name: 'collectionDetail',
     component: CollectionItem,
   },
+  {
+    path: '/rmrk/view',
+    name: 'viewModel',
+    component: ViewModel,
+  },
 ];