From c1f775975dc924cf75578471ce0818caffb90e7d Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C4=8Carodej?= <peterpapp@makingcg.com>
Date: Mon, 4 Apr 2022 12:58:07 +0200
Subject: [PATCH] - image thumbnail fix in s3 - svg thumbnail fix

---
 .../FilePreview/FilePreviewMedia.vue          |  2 +-
 .../FilePreview/Media/ImageFile.vue           | 12 ++++----
 .../js/components/FilesView/ItemGrid.vue      | 14 ++++++++-
 .../js/components/FilesView/ItemList.vue      | 18 +++++++++--
 .../components/Others/FilePreviewDetail.vue   | 30 ++++++++++++++++++-
 5 files changed, 65 insertions(+), 11 deletions(-)

diff --git a/resources/js/components/FilePreview/FilePreviewMedia.vue b/resources/js/components/FilePreview/FilePreviewMedia.vue
index 9dd5f5bd..d31c8562 100644
--- a/resources/js/components/FilePreview/FilePreviewMedia.vue
+++ b/resources/js/components/FilePreview/FilePreviewMedia.vue
@@ -23,7 +23,7 @@
             <div class="flex h-full w-full items-center justify-center">
                 <Audio v-if="isAudio" :file="currentFile" />
                 <Video v-if="isVideo" :file="currentFile" class="mx-auto max-h-full max-w-[1080px] self-center" />
-                <ImageFile v-if="isImage" :file="currentFile" class="mx-auto max-h-[100%] max-w-[100%] self-center" />
+                <ImageFile v-if="isImage" :file="currentFile" class="mx-auto max-h-[100%] max-w-[100%] self-center" :class="{'file-shadow': !$isMobile()}" id="printable-file" />
             </div>
         </div>
 
diff --git a/resources/js/components/FilePreview/Media/ImageFile.vue b/resources/js/components/FilePreview/Media/ImageFile.vue
index c49c3c74..b2cea1f5 100644
--- a/resources/js/components/FilePreview/Media/ImageFile.vue
+++ b/resources/js/components/FilePreview/Media/ImageFile.vue
@@ -1,11 +1,13 @@
 <template>
-    <img id="printable-file" class="file" :class="{'file-shadow': !$isMobile()}" :src="src" @error="replaceByOriginal" />
+    <img class="file" :src="src" @error="replaceByOriginal" alt="" />
 </template>
 
 <script>
 export default {
     name: 'ImageFile',
-    props: ['file'],
+    props: [
+		'file'
+	],
 	watch: {
 		'file': function () {
 			this.getSrc()
@@ -21,9 +23,9 @@ export default {
 			this.src = this.file.data.attributes.file_url
 		},
 		getSrc() {
-			let windowWidth = window.innerWidth
-
-			if (windowWidth > 1280) {
+			if (this.file.data.attributes.mimetype === 'svg') {
+				this.src = this.file.data.attributes.file_url
+			} else if (window.innerWidth > 1280) {
 				this.src = this.file.data.attributes.thumbnail.xl
 			} else {
 				this.src = this.file.data.attributes.thumbnail.lg
diff --git a/resources/js/components/FilesView/ItemGrid.vue b/resources/js/components/FilesView/ItemGrid.vue
index 90735258..c4453534 100644
--- a/resources/js/components/FilesView/ItemGrid.vue
+++ b/resources/js/components/FilesView/ItemGrid.vue
@@ -64,9 +64,10 @@
 
                     <img
                         class="h-full w-full rounded-lg object-cover shadow-lg"
-                        :src="entry.data.attributes.thumbnail.sm"
+                        :src="imageSrc"
 						alt=""
                         loading="lazy"
+						@error="replaceByOriginal"
                     />
                 </div>
             </div>
@@ -157,6 +158,7 @@ export default {
         return {
             mobileMultiSelect: false,
             itemName: undefined,
+			imageSrc: undefined,
         }
     },
     computed: {
@@ -214,6 +216,14 @@ export default {
         },
     },
     methods: {
+		getImageSrc() {
+			this.imageSrc = this.entry.data.attributes.mimetype === 'svg'
+				? this.entry.data.attributes.file_url
+				: this.entry.data.attributes.thumbnail.xs
+		},
+		replaceByOriginal() {
+			this.imageSrc = this.entry.data.attributes.file_url
+		},
         showItemActions() {
             this.$store.commit('CLIPBOARD_CLEAR')
             this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.entry)
@@ -248,6 +258,8 @@ export default {
                 document.execCommand('selectAll')
             }
         })
+
+		this.getImageSrc()
     },
 }
 </script>
diff --git a/resources/js/components/FilesView/ItemList.vue b/resources/js/components/FilesView/ItemList.vue
index e9af5756..7abdb96a 100644
--- a/resources/js/components/FilesView/ItemList.vue
+++ b/resources/js/components/FilesView/ItemList.vue
@@ -43,9 +43,10 @@
             <img
                 v-if="isImage && entry.data.attributes.thumbnail"
                 class="ml-0.5 h-12 w-12 rounded object-cover"
-                :src="entry.data.attributes.thumbnail.xs"
+                :src="imageSrc"
 				alt=""
                 loading="lazy"
+				@error="replaceByOriginal"
             />
         </div>
 
@@ -140,7 +141,8 @@ export default {
             itemName: undefined,
             isSelected: false,
 			isChecked: false,
-        }
+			imageSrc: undefined,
+		}
     },
     computed: {
         ...mapGetters(['isMultiSelectMode', 'clipboard', 'user']),
@@ -190,6 +192,14 @@ export default {
         },
     },
     methods: {
+		getImageSrc() {
+			this.imageSrc = this.entry.data.attributes.mimetype === 'svg'
+				? this.entry.data.attributes.file_url
+				: this.entry.data.attributes.thumbnail.xs
+		},
+		replaceByOriginal() {
+			this.imageSrc = this.entry.data.attributes.file_url
+		},
         showItemActions() {
             this.$store.commit('CLIPBOARD_CLEAR')
             this.$store.commit('ADD_ITEM_TO_CLIPBOARD', this.entry)
@@ -226,6 +236,8 @@ export default {
                 document.execCommand('selectAll')
             }
         })
-    },
+
+		this.getImageSrc()
+	},
 }
 </script>
diff --git a/resources/js/components/Others/FilePreviewDetail.vue b/resources/js/components/Others/FilePreviewDetail.vue
index d79f01f3..3099bc79 100644
--- a/resources/js/components/Others/FilePreviewDetail.vue
+++ b/resources/js/components/Others/FilePreviewDetail.vue
@@ -1,7 +1,13 @@
 <template>
     <div v-if="canBePreview" class="mb-4 block w-full">
         <!--Image-->
-		<ImageFile v-if="singleFile.data.type === 'image'" :file="singleFile" class="w-full overflow-hidden rounded-lg object-cover shadow-lg" />
+		<img
+			v-if="singleFile.data.type === 'image'"
+			:src="imageSrc"
+			class="w-full overflow-hidden rounded-lg object-cover shadow-lg"
+			@error="replaceByOriginal"
+			alt=""
+		>
 
         <!--Audio-->
         <audio
@@ -51,7 +57,29 @@ export default {
             if (val.data.type === 'video') {
                 this.$refs.video.load()
             }
+            if (val.data.type === 'image') {
+				this.getImageSrc()
+            }
         },
     },
+	data() {
+		return {
+			imageSrc: undefined,
+		}
+	},
+	methods: {
+		replaceByOriginal() {
+			this.imageSrc = this.singleFile.data.attributes.file_url
+		},
+		getImageSrc() {
+			this.imageSrc = this.singleFile.data.attributes.mimetype === 'svg'
+				? this.singleFile.data.attributes.file_url
+				: this.singleFile.data.attributes.thumbnail.lg
+		},
+	},
+	created() {
+		if (this.singleFile.data.type === 'image')
+			this.getImageSrc()
+	}
 }
 </script>