Merge pull request #2711 from nextcloud/backport/2709/stable31

css/viewer-init.css

@@ -1,5 +1,5 @@
 /* extracted by css-entry-points-plugin */
-@import './init-BKhEieqn.chunk.css';
+@import './init-Dk7geEdL.chunk.css';
 @import './logger-BffjDTy3.chunk.css';
 @import './NcActionButton-WAAyMq9-.chunk.css';
 @import './NcActionLink-C3uWgqfV.chunk.css';

css/viewer-main.css

@@ -1,3 +1,3 @@
 /* extracted by css-entry-points-plugin */
-@import './main-Ck_4WeTm.chunk.css';
+@import './main-D756fEgg.chunk.css';
 @import './logger-BffjDTy3.chunk.css';

src/components/Images.vue

@@ -468,7 +468,7 @@ img, video {
 			linear-gradient(45deg, transparent 75%, #{$checkered-color} 75%),
 			linear-gradient(45deg, transparent 75%, #{$checkered-color} 75%),
 			linear-gradient(45deg, #{$checkered-color} 25%, #fff 25%);
-		background-size: 2 * $checkered-size 2 * $checkered-size;
+		background-size: #{2 * $checkered-size} #{2 * $checkered-size};
 		background-position: 0 0, 0 0, -#{$checkered-size} -#{$checkered-size}, $checkered-size $checkered-size;
 	}
 	&.loaded {

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 = {}
 			}
 
 		},