Use PreviewFile also in model index page

4 files changed, 12 insertions, 61 deletions

diff --git a/assets/sass/_models.sass b/assets/sass/_models.sass
index e54e6ce..1d7688b 100644
--- a/assets/sass/_models.sass
+++ b/assets/sass/_models.sass
@@ -13,7 +13,3 @@
     h3
       &+ svg
         float: right
-
-.file-preview
-  img
-    margin: 0 auto
diff --git a/components/FilePreview.vue b/components/FilePreview.vue
index a738a93..5c0f3db 100644
--- a/components/FilePreview.vue
+++ b/components/FilePreview.vue
@@ -1,6 +1,6 @@
 <template lang="pug">
-  .file-preview
-    img(
+  .file-preview.h-full
+    img.h-full.block.mx-auto(
       v-if="isImage(path)"
       :src="baseAPI + '' + path"
     )
@@ -8,12 +8,14 @@
       v-else-if="isStl(path)"
       :rotate="rotate"
       :src="baseAPI + '' + path"
-      :backgroundColor="'#D1D5DB'"
+      :backgroundColor="bg ? bg : '#D1D5DB'"
+      :controlsOptions="{'enablePan': controls ? true : false, 'enableZoom': controls ? true : false, 'enableRotate': controls ? true : false}"
     )
     model-obj(
       v-else-if="isObj(path)"
       :src="baseAPI + '' + path"
-      :backgroundColor="'#D1D5DB'"
+      :backgroundColor="bg ? bg : '#D1D5DB'"
+      :controlsOptions="{'enablePan': controls ? true : false, 'enableZoom': controls ? true : false, 'enableRotate': controls ? true : false}"
     )
 </template>
 
@@ -22,7 +24,7 @@ import { ModelStl, ModelObj } from "vue-3d-model";
 
 export default {
   name: "FilePreview",
-  props: ["path"],
+  props: ["path", "bg", "controls"],
   data() {
     return {
       baseAPI: "",
diff --git a/components/ModelForm.vue b/components/ModelForm.vue
index ea1d3c3..442c0ba 100644
--- a/components/ModelForm.vue
+++ b/components/ModelForm.vue
@@ -5,7 +5,7 @@
       .fixed.inset-0.z-10.overflow-y-auto
         .flex.min-h-full.items-center.justify-center.p-4.text-center
           .relative.transform.overflow-hidden.rounded-lg.bg-white.shadow-xl.transition-all(class="w-10/12 sm:w-8/12")
-            file-preview(:path="openPreview")
+            file-preview(:path="openPreview" controls="1")
             .bg-gray-50.px-4.py-3(class="sm:flex sm:flex-row-reverse sm:px-6")
               button.mt-3.inline-flex.w-full.justify-center.rounded-md.border.border-gray-300.bg-white.px-4.py-2.text-base.font-medium.text-gray-700.shadow-sm(
                 type="button"
diff --git a/pages/models/_id/index.vue b/pages/models/_id/index.vue
index 6c5bbd4..238aea7 100644
--- a/pages/models/_id/index.vue
+++ b/pages/models/_id/index.vue
@@ -70,21 +70,7 @@
       .block.gap-4.h-full(class="md:flex")
         .w-full(class="md:w-4/5")
           .image.bg-gray-900.border-2.rounded-xl.w-full.h-full.overflow-hidden(v-if="model.uploads && model.uploads[selectedUpload]")
-            img.h-full.block.mx-auto(
-              v-if="isImage(model.uploads[selectedUpload].filepath)"
-              :src="baseAPI + '' + model.uploads[selectedUpload].filepath"
-            )
-            model-stl(
-              v-else-if="isStl(model.uploads[selectedUpload].filepath)"
-              :rotate="rotate"
-              :src="baseAPI + '' + model.uploads[selectedUpload].filepath"
-              :backgroundColor="'#111827'"
-            )
-            model-obj(
-              v-else-if="isObj(model.uploads[selectedUpload].filepath)"
-              :src="baseAPI + '' + model.uploads[selectedUpload].filepath"
-              :backgroundColor="'#111827'"
-            )
+            file-preview(:path="model.uploads[selectedUpload].filepath" bg="#111827" controls="1")
         .w-full.mt-8.h-auto(class="md:w-1/5 md:mt-0" v-if="model")
           .grid.grid-cols-3.gap-4.h-full.overflow-y-auto.grid-mini(class="md:grid-cols-2")
             .border-2.border-gray-300.bg-gray-300.w-20.h-20.rounded-xl.grid.items-center.justify-items-center.overflow-hidden.cursor-pointer(
@@ -93,22 +79,7 @@
               :class="{'md:w-24 md:h-24': true, 'border-green-700': selectedUpload == i}"
               @click="selectedUpload = i"
             )
-              img(
-                v-if="isImage(upload.filepath)"
-                :src="baseAPI + '' + upload.filepath"
-              )
-              model-stl(
-                v-else-if="isStl(upload.filepath)"
-                :rotate="rotate"
-                :src="baseAPI + '' + upload.filepath"
-                :backgroundColor="'#D1D5DB'"
-                :controlsOptions="{'enablePan': false, 'enableZoom': false, 'enableRotate': false}"
-              )
-              model-obj(
-                v-else-if="isObj(upload.filepath)"
-                :src="baseAPI + '' + upload.filepath"
-                :backgroundColor="'#D1D5DB'"
-              )
+              file-preview(:path="upload.filepath")
 
     section.mt-5
       .grid.grid-cols-2.gap-5.mb-5(class="md:grid-cols-6")
@@ -170,7 +141,7 @@
 </template>
 
 <script>
-import { ModelStl, ModelObj } from "vue-3d-model";
+import FilePreview from "@/components/FilePreview.vue";
 import UserAvatar from "@/components/UserAvatar.vue";
 
 import { mapGetters } from "vuex";
@@ -199,9 +170,8 @@ export default {
     };
   },
   components: {
-    ModelStl,
-    ModelObj,
     "user-avatar": UserAvatar,
+    "file-preview": FilePreview,
   },
   computed: {
     ...mapGetters(["isLoading"]),
@@ -223,23 +193,6 @@ export default {
     });
   },
   methods: {
-    checkExt(path, ext) {
-      return path.indexOf("." + ext) > 0;
-    },
-    isImage(path) {
-      return (
-        this.checkExt(path, "png") ||
-        this.checkExt(path, "jpg") ||
-        this.checkExt(path, "jpeg") ||
-        this.checkExt(path, "webp")
-      );
-    },
-    isStl(path) {
-      return this.checkExt(path, "stl") || this.checkExt(path, "sla");
-    },
-    isObj(path) {
-      return this.checkExt(path, "obj") || this.checkExt(path, "octet-stream");
-    },
     getFileName(path) {
       return path.split("/").at(-1);
     },