fix: invalid keys

Signed-off-by: skjnldsv <skjnldsv@protonmail.com>

Author: skjnldsv

src/views/Viewer.vue

@@ -10,7 +10,7 @@
 		:data-handler="handlerId">
 		<component :is="currentFile.modal"
 			v-if="!currentFile.failed"
-			:key="currentFile | uniqueKey"
+			:key="uniqueKey(currentFile)"
 			ref="content"
 			:active="true"
 			:can-swipe="false"
@@ -102,7 +102,7 @@
 			<!-- COMPARE FILE -->
 			<div v-if="comparisonFile && !comparisonFile.failed && showComparison" class="viewer__file-wrapper">
 				<component :is="comparisonFile.modal"
-					:key="comparisonFile | uniqueKey"
+					:key="uniqueKey(comparisonFile)"
 					ref="comparison-content"
 					v-bind="comparisonFile"
 					:active="true"
@@ -117,8 +117,8 @@
 			</div>
 
 			<!-- PREVIOUS -->
-			<div v-if="previousFile"
-				:key="previousFile | uniqueKey"
+			<div v-if="hasPreviousFile"
+				:key="uniqueKey(previousFile)"
 				class="viewer__file-wrapper viewer__file-wrapper--hidden"
 				aria-hidden="true"
 				inert>
@@ -134,7 +134,7 @@
 			</div>
 
 			<!-- CURRENT -->
-			<div :key="currentFile | uniqueKey" class="viewer__file-wrapper">
+			<div :key="uniqueKey(currentFile)" class="viewer__file-wrapper">
 				<component :is="currentFile.modal"
 					v-if="!currentFile.failed"
 					ref="content"
@@ -154,8 +154,8 @@
 			</div>
 
 			<!-- NEXT -->
-			<div v-if="nextFile"
-				:key="nextFile | uniqueKey"
+			<div v-if="hasNextFile"
+				:key="uniqueKey(nextFile)"
 				class="viewer__file-wrapper viewer__file-wrapper--hidden"
 				aria-hidden="true"
 				inert>
@@ -223,12 +223,6 @@ export default defineComponent({
 		Pencil,
 	},
 
-	filters: {
-		uniqueKey(file) {
-			return '' + file.fileid + file.source
-		},
-	},
-
 	mixins: [isFullscreen, isMobile],
 
 	data() {
@@ -319,6 +313,15 @@ export default defineComponent({
 			return this.currentIndex === this.fileList.length - 1
 		},
 
+		hasPreviousFile() {
+			// Check if empty object
+			return Object.keys(this.previousFile).length > 0
+		},
+		hasNextFile() {
+			// Check if empty object
+			return Object.keys(this.nextFile).length > 0
+		},
+
 		isImage() {
 			return ['image/jpeg', 'image/png', 'image/webp'].includes(this.currentFile?.mime)
 		},
@@ -562,6 +565,10 @@ export default defineComponent({
 	},
 
 	methods: {
+		uniqueKey(file) {
+			return '' + file.fileid + file.source
+		},
+
 		/**
 		 * If there is no download permission also hide the context menu.
 		 * @param {MouseEvent} event The mouse click event
@@ -773,7 +780,7 @@ export default defineComponent({
 				}
 			} else {
 				// RESET
-				this.previousFile = null
+				this.previousFile = {}
 			}
 
 			if (next) {
@@ -783,7 +790,7 @@ export default defineComponent({
 				}
 			} else {
 				// RESET
-				this.nextFile = null
+				this.nextFile = {}
 			}
 
 		},