Merge branch 'feature/glb-support' into develop

Author: Candinya

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",

src/components/NFT/NFTItem.vue

@@ -1,35 +1,60 @@
 <template>
-    <img
-        v-if="!(imageUrl?.endsWith('mp4') || imageUrl?.endsWith('mov'))"
+    <div
         :style="{
             width: size + 'px',
             height: size + 'px',
         }"
-        :src="imageUrl"
-        class="nft-item"
-    />
-    <video
-        v-else
-        :style="{
-            width: size + 'px',
-            height: size + 'px',
-        }"
-        :src="imageUrl"
-        class="nft-item"
-        autoplay
-        loop
-        muted
-    />
+    >
+        <video
+            v-if="imageUrl?.endsWith('mp4') || imageUrl?.endsWith('mov')"
+            :src="imageUrl"
+            class="nft-item"
+            :style="{
+                width: size + 'px',
+                height: size + 'px',
+            }"
+            autoplay
+            loop
+            muted
+        />
+        <model-viewer
+            v-else-if="imageUrl?.endsWith('glb')"
+            :src="imageUrl"
+            class="nft-item"
+            :style="{
+                width: size + 'px',
+                height: size + 'px',
+            }"
+            ar
+            ar-modes="webxr scene-viewer quick-look"
+            environment-image="neutral"
+            auto-rotate
+            camera-controls
+        />
+        <img
+            v-else
+            :src="imageUrl"
+            class="nft-item"
+            :style="{
+                width: size + 'px',
+                height: size + 'px',
+            }"
+        />
+    </div>
 </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;

src/types/model-viewer.d.ts

@@ -0,0 +1,4 @@
+declare module '@google/model-viewer' {
+    const viewer: any;
+    export default viewer;
+}

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"