From 01dc20cc2db111cc29a4197a0515dc1e2b88e773 Mon Sep 17 00:00:00 2001
From: Nya Candy <dev@candinya.com>
Date: Tue, 7 Sep 2021 19:33:04 +0800
Subject: [PATCH] add: model viewer for glb support

---
 package.json                   |  1 +
 src/components/NFT/NFTItem.vue | 30 ++++++++++++++++++++++++------
 src/types/model-viewer.d.ts    |  4 ++++
 yarn.lock                      |  5 +++++
 4 files changed, 34 insertions(+), 6 deletions(-)
 create mode 100644 src/types/model-viewer.d.ts

diff --git a/package.json b/package.json
index af97f3b..decd1d7 100644
--- a/package.json
+++ b/package.json
@@ -26,6 +26,7 @@
     },
     "homepage": "https://github.com/NaturalSelectionLabs/RSS3-Page#readme",
     "dependencies": {
+        "@google/model-viewer": "1.8.0",
         "@sentry/tracing": "6.11.0",
         "@sentry/vue": "6.11.0",
         "@walletconnect/web3-provider": "1.6.5",
diff --git a/src/components/NFT/NFTItem.vue b/src/components/NFT/NFTItem.vue
index 9d0a377..a1c354e 100644
--- a/src/components/NFT/NFTItem.vue
+++ b/src/components/NFT/NFTItem.vue
@@ -1,14 +1,31 @@
 <template>
-    <img
-        v-if="!(imageUrl?.endsWith('mp4') || imageUrl?.endsWith('mov'))"
+    <video
+        v-if="imageUrl?.endsWith('mp4') || imageUrl?.endsWith('mov')"
         :style="{
             width: size + 'px',
             height: size + 'px',
         }"
         :src="imageUrl"
         class="nft-item"
+        autoplay
+        loop
+        muted
     />
-    <video
+    <model-viewer
+        v-else-if="imageUrl?.endsWith('glb')"
+        :style="{
+            width: size + 'px',
+            height: size + 'px',
+        }"
+        :src="imageUrl"
+        class="nft-item"
+        ar
+        ar-modes="webxr scene-viewer quick-look"
+        environment-image="neutral"
+        auto-rotate
+        camera-controls
+    />
+    <img
         v-else
         :style="{
             width: size + 'px',
@@ -16,20 +33,21 @@
         }"
         :src="imageUrl"
         class="nft-item"
-        autoplay
-        loop
-        muted
     />
 </template>
 
 <script lang="ts">
 import { Vue, Options } from 'vue-class-component';
+import * as viewer from '@google/model-viewer';
 
 @Options({
     props: {
         size: Number,
         imageUrl: String,
     },
+    components: {
+        viewer,
+    },
 })
 export default class NFTItem extends Vue {
     size!: Number;
diff --git a/src/types/model-viewer.d.ts b/src/types/model-viewer.d.ts
new file mode 100644
index 0000000..5f8d1c7
--- /dev/null
+++ b/src/types/model-viewer.d.ts
@@ -0,0 +1,4 @@
+declare module '@google/model-viewer' {
+    const viewer: any;
+    export default viewer;
+}
diff --git a/yarn.lock b/yarn.lock
index 435695f..7a6e987 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1410,6 +1410,11 @@
     "@ethersproject/properties" "^5.4.0"
     "@ethersproject/strings" "^5.4.0"
 
+"@google/model-viewer@1.8.0":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@google/model-viewer/-/model-viewer-1.8.0.tgz#398c0d9bbd3281933a3a4e6ed8f02da6789df768"
+  integrity sha512-qUwlu4q+sEFs2XOztZpaT5sGdv9G76jyLzEOdttcfAFb0/ZE0HnXU1KPN3Pq5gvdg+jW7fDUUHhsMxM1OBnpUQ==
+
 "@metamask/safe-event-emitter@^2.0.0":
   version "2.0.0"
   resolved "https://registry.npm.taobao.org/@metamask/safe-event-emitter/download/@metamask/safe-event-emitter-2.0.0.tgz#af577b477c683fad17c619a78208cede06f9605c"