feat(viewer): add visual image rotation (90° steps)

css/viewer-init.css

@@ -1,5 +1,5 @@
 /* extracted by css-entry-points-plugin */
-@import './init-UG3gDniN.chunk.css';
+@import './init-ClPK3puv.chunk.css';
 @import './previewUtils-DsspQ6dL.chunk.css';
 @import './NcIconSvgWrapper-Bui9PhAS-3xIBDiQU.chunk.css';
 @import './NcActionButton-Dc3ra1Np.chunk.css';

css/viewer-main.css

@@ -1,3 +1,3 @@
 /* extracted by css-entry-points-plugin */
-@import './main-Bg3U4zXh.chunk.css';
+@import './main-D-4NNElW.chunk.css';
 @import './previewUtils-DsspQ6dL.chunk.css';

src/components/Images.vue

@@ -104,6 +104,10 @@ export default {
 			type: Boolean,
 			default: false,
 		},
+		rotation: {
+			type: Number,
+			default: 0,
+		},
 	},
 	data() {
 		return {
@@ -134,17 +138,20 @@ export default {
 			return this.basename
 		},
 		imgStyle() {
+			const transform = this.rotation !== 0 ? `rotate(${this.rotation}deg)` : undefined
 			if (this.zoomRatio === 1) {
 				return {
 					height: this.zoomHeight + 'px',
 					width: this.zoomWidth + 'px',
+					transform,
 				}
 			}
 			return {
 				marginTop: Math.round(this.shiftY * 2) + 'px',
 				marginLeft: Math.round(this.shiftX * 2) + 'px',
 				height: this.zoomHeight + 'px',
 				width: this.zoomWidth + 'px',
+				transform,
 			}
 		},
 		livePhoto() {
@@ -200,6 +207,9 @@ export default {
 		},
 	},
 	watch: {
+		rotation() {
+			this.resetZoom()
+		},
 		active(val, old) {
 			// the item was hidden before and is now the current view
 			if (val === true && old === false) {
@@ -467,6 +477,7 @@ img, video {
 	justify-self: center;
 	// black while loading
 	background-color: #000;
+	transition: transform 0.2s ease;
 	// disable animations during zooming/resize
 	transition: none !important;
 	touch-action: none;

src/views/Viewer.vue

@@ -41,7 +41,7 @@
 		:enable-swipe="canSwipe && !editing"
 		:has-next="hasNext"
 		:has-previous="hasPrevious"
-		:inline-actions="canEdit ? 1 : 0"
+		:inline-actions="(canEdit ? 1 : 0) + (canRotate ? 2 : 0)"
 		:spread-navigation="true"
 		:style="{ width: isSidebarShown ? `${sidebarPosition}px` : null }"
 		:name="currentFile.basename"
@@ -61,6 +61,24 @@
 				</template>
 				{{ t('viewer', 'Edit') }}
 			</NcActionButton>
+			<NcActionButton v-if="canRotate"
+				:close-after-click="false"
+				:aria-label="t('viewer', 'Rotate counterclockwise')"
+				@click="rotateLeft">
+				<template #icon>
+					<RotateLeft :size="20" />
+				</template>
+				{{ t('viewer', 'Rotate counterclockwise') }}
+			</NcActionButton>
+			<NcActionButton v-if="canRotate"
+				:close-after-click="false"
+				:aria-label="t('viewer', 'Rotate clockwise')"
+				@click="rotateRight">
+				<template #icon>
+					<RotateRight :size="20" />
+				</template>
+				{{ t('viewer', 'Rotate clockwise') }}
+			</NcActionButton>
 			<!-- Menu items -->
 			<NcActionButton :close-after-click="true"
 				@click="toggleFullScreen">
@@ -148,6 +166,7 @@
 					:is-full-screen="isFullscreen"
 					:is-sidebar-shown="isSidebarShown"
 					:loaded.sync="currentFile.loaded"
+					:rotation="rotation"
 					class="viewer__file viewer__file--active"
 					@update:editing="toggleEditor"
 					@error="currentFailed" />
@@ -207,6 +226,8 @@ import Fullscreen from 'vue-material-design-icons/Fullscreen.vue'
 import FullscreenExit from 'vue-material-design-icons/FullscreenExit.vue'
 import Pencil from 'vue-material-design-icons/PencilOutline.vue'
 import DockRight from 'vue-material-design-icons/DockRight.vue'
+import RotateLeft from 'vue-material-design-icons/RotateLeft.vue'
+import RotateRight from 'vue-material-design-icons/RotateRight.vue'
 
 import '@nextcloud/dialogs/style.css'
 
@@ -229,6 +250,8 @@ export default defineComponent({
 		NcActionLink,
 		NcModal,
 		Pencil,
+		RotateLeft,
+		RotateRight,
 	},
 
 	mixins: [isFullscreen, isMobile],
@@ -251,6 +274,7 @@ export default defineComponent({
 			comparisonFile: null,
 			nextFile: {},
 			fileList: [],
+			rotation: 0,
 			sortingConfig: null,
 
 			// States
@@ -333,6 +357,10 @@ export default defineComponent({
 			return ['image/jpeg', 'image/png', 'image/webp'].includes(this.currentFile?.mime)
 		},
 
+		canRotate() {
+			return this.isImage && !this.comparisonFile
+		},
+
 		sidebarOpenFilePath() {
 			try {
 				const relativePath = this.currentFile?.davPath?.split(defaultRootPath)[1]
@@ -1062,7 +1090,16 @@ export default defineComponent({
 		/**
 		 * Open previous available file
 		 */
+		rotateLeft() {
+			this.rotation = ((this.rotation - 90) + 360) % 360
+		},
+
+		rotateRight() {
+			this.rotation = (this.rotation + 90) % 360
+		},
+
 		previous() {
+			this.rotation = 0
 			this.currentIndex--
 			if (this.currentIndex < 0) {
 				this.currentIndex = this.fileList.length - 1
@@ -1078,6 +1115,7 @@ export default defineComponent({
 		 * Open next available file
 		 */
 		next() {
+			this.rotation = 0
 			this.currentIndex++
 			if (this.currentIndex > this.fileList.length - 1) {
 				this.currentIndex = 0