From d4526796d8b90f24f7ef4e0ea13bb309bbd8dd4c Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Tue, 23 Sep 2025 00:34:49 +0200
Subject: [PATCH 1/6] feat: add shift + mouse scroll for zoom out and zoom in
 in preview app

---
 packages/web-app-preview/src/App.vue          |  4 +-
 .../src/components/Sources/MediaImage.vue     | 65 ++++++++++++-------
 .../src/composables/useImageControls.ts       | 16 +----
 3 files changed, 46 insertions(+), 39 deletions(-)

diff --git a/packages/web-app-preview/src/App.vue b/packages/web-app-preview/src/App.vue
index e6cf664a78..e67787e7b3 100644
--- a/packages/web-app-preview/src/App.vue
+++ b/packages/web-app-preview/src/App.vue
@@ -36,9 +36,7 @@
           :file="activeMediaFileCached"
           :current-image-rotation="currentImageRotation"
           :current-image-zoom="currentImageZoom"
-          :current-image-position-x="currentImagePositionX"
-          :current-image-position-y="currentImagePositionY"
-          @pan-zoom-change="onPanZoomChanged"
+          @set-zoom="currentImageZoom = $event"
         />
         <media-video
           v-else-if="activeMediaFileCached.isVideo"
diff --git a/packages/web-app-preview/src/components/Sources/MediaImage.vue b/packages/web-app-preview/src/components/Sources/MediaImage.vue
index 591416a1d1..8ddbde16be 100644
--- a/packages/web-app-preview/src/components/Sources/MediaImage.vue
+++ b/packages/web-app-preview/src/components/Sources/MediaImage.vue
@@ -5,15 +5,24 @@
     :src="file.url"
     :alt="file.name"
     :data-id="file.id"
-    class="max-w-full max-h-full pt-4 cursor-move object-contain"
-    :style="`transform: rotate(${currentImageRotation}deg)`"
+    class="max-w-full max-h-full pt-4"
   />
 </template>
 <script lang="ts">
 import { CachedFile } from '../../helpers/types'
-import { defineComponent, PropType, onMounted, ref, watch, unref, nextTick } from 'vue'
+import {
+  defineComponent,
+  PropType,
+  ref,
+  watch,
+  unref,
+  nextTick,
+  onMounted,
+  onBeforeUnmount
+} from 'vue'
 import type { PanzoomObject, PanzoomOptions } from '@panzoom/panzoom'
 import Panzoom from '@panzoom/panzoom'
+import { useEventBus } from '@opencloud-eu/web-pkg'
 
 export default defineComponent({
   name: 'MediaImage',
@@ -29,32 +38,35 @@ export default defineComponent({
     currentImageRotation: {
       type: Number,
       required: true
-    },
-    currentImagePositionX: {
-      type: Number,
-      required: true
-    },
-    currentImagePositionY: {
-      type: Number,
-      required: true
     }
   },
-  emits: ['panZoomChange'],
+  emits: ['setZoom'],
   setup(props, { emit }) {
+    const eventBus = useEventBus()
+
     const img = ref<HTMLElement | null>()
     const panzoom = ref<PanzoomObject>()
+    const resetEventToken = ref(null)
 
-    const onPanZoomChange = (event: Event) => {
-      emit('panZoomChange', event)
+    const onWheelEvent = (e: WheelEvent) => {
+      e.preventDefault()
+      if (!e.shiftKey) {
+        return false
+      }
+
+      if (e.deltaY < 0) {
+        unref(panzoom).zoomOut({ step: 0.1 })
+      } else if (e.deltaY > 0) {
+        unref(panzoom).zoomIn({ step: 0.1 })
+      }
+
+      emit('setZoom', unref(panzoom).getScale())
     }
 
     const initPanzoom = async () => {
       if (unref(panzoom)) {
         await nextTick()
-        ;(unref(img) as unknown as HTMLElement).removeEventListener(
-          'panzoomchange',
-          onPanZoomChange
-        )
+        ;(unref(img) as unknown as HTMLElement).removeEventListener('wheel', onWheelEvent)
         unref(panzoom)?.destroy()
       }
 
@@ -66,6 +78,8 @@ export default defineComponent({
         duration: 300,
         overflow: 'auto',
         maxScale: 10,
+        minScale: 0.5,
+
         setTransform: (_, { scale, x, y }) => {
           let h: number
           let v: number
@@ -97,18 +111,23 @@ export default defineComponent({
           )
         }
       } as PanzoomOptions)
-      ;(unref(img) as unknown as HTMLElement).addEventListener('panzoomchange', onPanZoomChange)
+      ;(unref(img) as unknown as HTMLElement).addEventListener('wheel', onWheelEvent)
     }
 
-    watch(img, initPanzoom)
-    onMounted(initPanzoom)
+    watch(() => props.file, initPanzoom, { immediate: true, deep: true })
 
     watch([() => props.currentImageZoom, () => props.currentImageRotation], () => {
       unref(panzoom).zoom(props.currentImageZoom)
     })
 
-    watch([() => props.currentImagePositionX, () => props.currentImagePositionY], () => {
-      unref(panzoom).pan(props.currentImagePositionX, props.currentImagePositionY)
+    onMounted(() => {
+      resetEventToken.value = eventBus.subscribe('app.preview.media.image.reset', () =>
+        initPanzoom()
+      )
+    })
+
+    onBeforeUnmount(() => {
+      eventBus.unsubscribe('app.preview.media.image.reset', unref(resetEventToken))
     })
 
     return {
diff --git a/packages/web-app-preview/src/composables/useImageControls.ts b/packages/web-app-preview/src/composables/useImageControls.ts
index f19ead4364..bd81e490b3 100644
--- a/packages/web-app-preview/src/composables/useImageControls.ts
+++ b/packages/web-app-preview/src/composables/useImageControls.ts
@@ -1,30 +1,20 @@
-import { PanzoomEventDetail } from '@panzoom/panzoom'
 import { ref } from 'vue'
+import { useEventBus } from '@opencloud-eu/web-pkg'
 
 export const useImageControls = () => {
+  const eventBus = useEventBus()
   const currentImageZoom = ref(1)
   const currentImageRotation = ref(0)
-  const currentImagePositionX = ref(0)
-  const currentImagePositionY = ref(0)
-
-  const onPanZoomChanged = ({ detail }: { detail: PanzoomEventDetail }) => {
-    currentImagePositionX.value = detail.x
-    currentImagePositionY.value = detail.y
-  }
 
   const resetImage = () => {
     currentImageZoom.value = 1
     currentImageRotation.value = 0
-    currentImagePositionX.value = 0
-    currentImagePositionY.value = 0
+    eventBus.publish('app.preview.media.image.reset')
   }
 
   return {
     currentImageZoom,
     currentImageRotation,
-    currentImagePositionX,
-    currentImagePositionY,
-    onPanZoomChanged,
     resetImage
   }
 }

From 9f1c175e8c3e5e06fb6763136087bd71df5d3c53 Mon Sep 17 00:00:00 2001
From: Alex <abackermann91@gmail.com>
Date: Tue, 23 Sep 2025 01:06:39 +0200
Subject: [PATCH 2/6] Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 packages/web-app-preview/src/components/Sources/MediaImage.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/web-app-preview/src/components/Sources/MediaImage.vue b/packages/web-app-preview/src/components/Sources/MediaImage.vue
index 8ddbde16be..135c3aebb2 100644
--- a/packages/web-app-preview/src/components/Sources/MediaImage.vue
+++ b/packages/web-app-preview/src/components/Sources/MediaImage.vue
@@ -79,7 +79,6 @@ export default defineComponent({
         overflow: 'auto',
         maxScale: 10,
         minScale: 0.5,
-
         setTransform: (_, { scale, x, y }) => {
           let h: number
           let v: number

From 0d8aa32e368778ae8c0f2e6331b4a98c7ebfc47c Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Tue, 23 Sep 2025 01:47:17 +0200
Subject: [PATCH 3/6] refactor

---
 packages/web-app-preview/src/App.vue          |  9 ++--
 .../src/components/MediaControls.vue          | 41 +++++--------------
 .../src/components/Sources/MediaImage.vue     |  8 ++--
 .../src/composables/useImageControls.ts       | 25 ++++++++++-
 .../unit/components/MediaControls.spec.ts     |  8 ++--
 5 files changed, 48 insertions(+), 43 deletions(-)

diff --git a/packages/web-app-preview/src/App.vue b/packages/web-app-preview/src/App.vue
index e67787e7b3..96b3b338c7 100644
--- a/packages/web-app-preview/src/App.vue
+++ b/packages/web-app-preview/src/App.vue
@@ -36,7 +36,8 @@
           :file="activeMediaFileCached"
           :current-image-rotation="currentImageRotation"
           :current-image-zoom="currentImageZoom"
-          @set-zoom="currentImageZoom = $event"
+          @set-zoom="imageZoom"
+          @set-shrink="imageShrink"
         />
         <media-video
           v-else-if="activeMediaFileCached.isVideo"
@@ -60,8 +61,10 @@
         :show-delete-button="isDeleteButtonVisible"
         :current-image-rotation="currentImageRotation"
         :current-image-zoom="currentImageZoom"
-        @set-rotation="currentImageRotation = $event"
-        @set-zoom="currentImageZoom = $event"
+        @set-rotation-right="imageRotateRight"
+        @set-rotation-left="imageRotateLeft"
+        @set-zoom="imageZoom"
+        @set-shrink="imageShrink"
         @reset-image="resetImage"
         @toggle-full-screen="toggleFullScreenMode"
         @toggle-previous="goToPrev"
diff --git a/packages/web-app-preview/src/components/MediaControls.vue b/packages/web-app-preview/src/components/MediaControls.vue
index 3c50f8ca16..c2bc492ab1 100644
--- a/packages/web-app-preview/src/components/MediaControls.vue
+++ b/packages/web-app-preview/src/components/MediaControls.vue
@@ -51,7 +51,7 @@
             class="preview-controls-image-shrink raw-hover-surface p-1"
             appearance="raw"
             :aria-label="imageShrinkDescription"
-            @click="imageShrink"
+            @click="$emit('setShrink')"
           >
             <oc-icon fill-type="line" name="zoom-out" />
           </oc-button>
@@ -60,7 +60,7 @@
             class="preview-controls-image-zoom raw-hover-surface p-1"
             appearance="raw"
             :aria-label="imageZoomDescription"
-            @click="imageZoom"
+            @click="$emit('setZoom')"
           >
             <oc-icon fill-type="line" name="zoom-in" />
           </oc-button>
@@ -71,7 +71,7 @@
             class="preview-controls-rotate-left raw-hover-surface p-1"
             appearance="raw"
             :aria-label="imageRotateLeftDescription"
-            @click="imageRotateLeft"
+            @click="$emit('setRotationLeft')"
           >
             <oc-icon fill-type="line" name="anticlockwise" />
           </oc-button>
@@ -80,7 +80,7 @@
             class="preview-controls-rotate-right raw-hover-surface p-1"
             appearance="raw"
             :aria-label="imageRotateRightDescription"
-            @click="imageRotateRight"
+            @click="$emit('setRotationRight')"
           >
             <oc-icon fill-type="line" name="clockwise" />
           </oc-button>
@@ -153,7 +153,9 @@ export default defineComponent({
     }
   },
   emits: [
-    'setRotation',
+    'setRotationLeft',
+    'setRotationRight',
+    'setShrink',
     'setZoom',
     'toggleFullScreen',
     'toggleNext',
@@ -161,7 +163,7 @@ export default defineComponent({
     'resetImage',
     'deleteResource'
   ],
-  setup(props, { emit }) {
+  setup(props) {
     const { $gettext } = useGettext()
 
     const currentZoomDisplayValue = computed(() => {
@@ -181,23 +183,6 @@ export default defineComponent({
       })
     })
 
-    const calculateZoom = (zoom: number, factor: number) => {
-      return Math.round(zoom * factor * 20) / 20
-    }
-    const imageShrink = () => {
-      emit('setZoom', Math.max(0.1, calculateZoom(props.currentImageZoom, 0.8)))
-    }
-    const imageZoom = () => {
-      const maxZoomValue = calculateZoom(9, 1.25)
-      emit('setZoom', Math.min(calculateZoom(props.currentImageZoom, 1.25), maxZoomValue))
-    }
-    const imageRotateLeft = () => {
-      emit('setRotation', props.currentImageRotation === -270 ? 0 : props.currentImageRotation - 90)
-    }
-    const imageRotateRight = () => {
-      emit('setRotation', props.currentImageRotation === 270 ? 0 : props.currentImageRotation + 90)
-    }
-
     const resourceDeleteDescription = computed(() => {
       return $gettext('Delete (%{key})', {
         key: isMacOs() ? $gettext('⌘ + Backspace') : $gettext('Del')
@@ -211,17 +196,13 @@ export default defineComponent({
       resourceDeleteDescription,
       enterFullScreenDescription: $gettext('Enter full screen mode'),
       exitFullScreenDescription: $gettext('Exit full screen mode'),
-      imageShrinkDescription: $gettext('Shrink the image'),
-      imageZoomDescription: $gettext('Enlarge the image'),
+      imageShrinkDescription: $gettext('Shrink the image (⇧ + Mouse wheel)'),
+      imageZoomDescription: $gettext('Enlarge the image (⇧ + Mouse wheel)'),
       imageResetDescription: $gettext('Reset'),
       imageRotateLeftDescription: $gettext('Rotate the image 90 degrees to the left'),
       imageRotateRightDescription: $gettext('Rotate the image 90 degrees to the right'),
       previousDescription: $gettext('Show previous media file in folder'),
-      nextDescription: $gettext('Show next media file in folder'),
-      imageShrink,
-      imageZoom,
-      imageRotateLeft,
-      imageRotateRight
+      nextDescription: $gettext('Show next media file in folder')
     }
   }
 })
diff --git a/packages/web-app-preview/src/components/Sources/MediaImage.vue b/packages/web-app-preview/src/components/Sources/MediaImage.vue
index 135c3aebb2..5e9d583787 100644
--- a/packages/web-app-preview/src/components/Sources/MediaImage.vue
+++ b/packages/web-app-preview/src/components/Sources/MediaImage.vue
@@ -40,7 +40,7 @@ export default defineComponent({
       required: true
     }
   },
-  emits: ['setZoom'],
+  emits: ['setZoom', 'setShrink'],
   setup(props, { emit }) {
     const eventBus = useEventBus()
 
@@ -55,12 +55,10 @@ export default defineComponent({
       }
 
       if (e.deltaY < 0) {
-        unref(panzoom).zoomOut({ step: 0.1 })
+        emit('setZoom')
       } else if (e.deltaY > 0) {
-        unref(panzoom).zoomIn({ step: 0.1 })
+        emit('setShrink')
       }
-
-      emit('setZoom', unref(panzoom).getScale())
     }
 
     const initPanzoom = async () => {
diff --git a/packages/web-app-preview/src/composables/useImageControls.ts b/packages/web-app-preview/src/composables/useImageControls.ts
index bd81e490b3..563b6692eb 100644
--- a/packages/web-app-preview/src/composables/useImageControls.ts
+++ b/packages/web-app-preview/src/composables/useImageControls.ts
@@ -1,4 +1,4 @@
-import { ref } from 'vue'
+import { ref, unref } from 'vue'
 import { useEventBus } from '@opencloud-eu/web-pkg'
 
 export const useImageControls = () => {
@@ -12,9 +12,32 @@ export const useImageControls = () => {
     eventBus.publish('app.preview.media.image.reset')
   }
 
+  const calculateZoom = (zoom: number, factor: number) => {
+    return Math.round(zoom * factor * 20) / 20
+  }
+  const imageShrink = () => {
+    currentImageZoom.value = Math.max(0.1, calculateZoom(unref(currentImageZoom), 0.8))
+  }
+  const imageZoom = () => {
+    const maxZoomValue = calculateZoom(9, 1.25)
+    currentImageZoom.value = Math.min(calculateZoom(unref(currentImageZoom), 1.25), maxZoomValue)
+  }
+  const imageRotateLeft = () => {
+    currentImageRotation.value =
+      unref(currentImageRotation) === -270 ? 0 : unref(currentImageRotation) - 90
+  }
+  const imageRotateRight = () => {
+    currentImageRotation.value =
+      unref(currentImageRotation) === 270 ? 0 : unref(currentImageRotation) + 90
+  }
+
   return {
     currentImageZoom,
     currentImageRotation,
+    imageShrink,
+    imageZoom,
+    imageRotateLeft,
+    imageRotateRight,
     resetImage
   }
 }
diff --git a/packages/web-app-preview/tests/unit/components/MediaControls.spec.ts b/packages/web-app-preview/tests/unit/components/MediaControls.spec.ts
index 6b3484da30..77cb9e3dd7 100644
--- a/packages/web-app-preview/tests/unit/components/MediaControls.spec.ts
+++ b/packages/web-app-preview/tests/unit/components/MediaControls.spec.ts
@@ -57,7 +57,7 @@ describe('MediaControls component', () => {
       it('emits "setZoom"-event on click', async () => {
         const { wrapper } = getWrapper({ showImageControls: true })
         await wrapper.find(selectors.controlsImageShrink).trigger('click')
-        expect(wrapper.emitted('setZoom').length).toBeDefined()
+        expect(wrapper.emitted('setShrink')).toBeTruthy
       })
     })
     describe('zoom button', () => {
@@ -68,7 +68,7 @@ describe('MediaControls component', () => {
       it('emits "setZoom"-event on click', async () => {
         const { wrapper } = getWrapper({ showImageControls: true })
         await wrapper.find(selectors.controlsImageZoom).trigger('click')
-        expect(wrapper.emitted('setZoom').length).toBeDefined()
+        expect(wrapper.emitted('setZoom')).toBeTruthy()
       })
     })
   })
@@ -81,7 +81,7 @@ describe('MediaControls component', () => {
       it('emits "setRotation"-event on click', async () => {
         const { wrapper } = getWrapper({ showImageControls: true })
         await wrapper.find(selectors.controlsRotateLeft).trigger('click')
-        expect(wrapper.emitted('setRotation').length).toBeDefined()
+        expect(wrapper.emitted('setRotationLeft')).toBeTruthy()
       })
     })
     describe('right button', () => {
@@ -92,7 +92,7 @@ describe('MediaControls component', () => {
       it('emits "setRotation"-event on click', async () => {
         const { wrapper } = getWrapper({ showImageControls: true })
         await wrapper.find(selectors.controlsRotateRight).trigger('click')
-        expect(wrapper.emitted('setRotation').length).toBeDefined()
+        expect(wrapper.emitted('setRotationRight')).toBeTruthy()
       })
     })
   })

From f3276085d5aea0b1cdd307f15cfe8537643f0f17 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Tue, 23 Sep 2025 02:28:37 +0200
Subject: [PATCH 4/6] refactor

---
 packages/web-app-preview/src/App.vue          |  3 -
 .../src/components/Sources/MediaImage.vue     | 96 +++++++++++--------
 .../src/composables/useImageControls.ts       | 11 +--
 3 files changed, 57 insertions(+), 53 deletions(-)

diff --git a/packages/web-app-preview/src/App.vue b/packages/web-app-preview/src/App.vue
index 96b3b338c7..06ebdf925c 100644
--- a/packages/web-app-preview/src/App.vue
+++ b/packages/web-app-preview/src/App.vue
@@ -35,9 +35,6 @@
           v-else-if="activeMediaFileCached.isImage"
           :file="activeMediaFileCached"
           :current-image-rotation="currentImageRotation"
-          :current-image-zoom="currentImageZoom"
-          @set-zoom="imageZoom"
-          @set-shrink="imageShrink"
         />
         <media-video
           v-else-if="activeMediaFileCached.isVideo"
diff --git a/packages/web-app-preview/src/components/Sources/MediaImage.vue b/packages/web-app-preview/src/components/Sources/MediaImage.vue
index 5e9d583787..b7d438e25c 100644
--- a/packages/web-app-preview/src/components/Sources/MediaImage.vue
+++ b/packages/web-app-preview/src/components/Sources/MediaImage.vue
@@ -31,22 +31,19 @@ export default defineComponent({
       type: Object as PropType<CachedFile>,
       required: true
     },
-    currentImageZoom: {
-      type: Number,
-      required: true
-    },
     currentImageRotation: {
       type: Number,
       required: true
     }
   },
-  emits: ['setZoom', 'setShrink'],
-  setup(props, { emit }) {
+  setup(props) {
     const eventBus = useEventBus()
 
     const img = ref<HTMLElement | null>()
     const panzoom = ref<PanzoomObject>()
     const resetEventToken = ref(null)
+    const zoomToken = ref(null)
+    const shrinkToken = ref(null)
 
     const onWheelEvent = (e: WheelEvent) => {
       e.preventDefault()
@@ -55,12 +52,43 @@ export default defineComponent({
       }
 
       if (e.deltaY < 0) {
-        emit('setZoom')
+        unref(panzoom).zoomIn({ step: 0.1 })
       } else if (e.deltaY > 0) {
-        emit('setShrink')
+        unref(panzoom).zoomOut({ step: 0.1 })
       }
     }
 
+    const setTransform = ({ scale, x, y }: { scale: number; x: number; y: number }) => {
+      let h: number
+      let v: number
+
+      switch (props.currentImageRotation) {
+        case -270:
+        case 90:
+          h = y
+          v = 0 - x
+          break
+        case -180:
+        case 180:
+          h = 0 - x
+          v = 0 - y
+          break
+        case -90:
+        case 270:
+          h = 0 - y
+          v = x
+          break
+        default:
+          h = x
+          v = y
+      }
+
+      unref(panzoom).setStyle(
+        'transform',
+        `rotate(${props.currentImageRotation}deg) scale(${scale}) translate(${h}px, ${v}px)`
+      )
+    }
+
     const initPanzoom = async () => {
       if (unref(panzoom)) {
         await nextTick()
@@ -77,54 +105,40 @@ export default defineComponent({
         overflow: 'auto',
         maxScale: 10,
         minScale: 0.5,
-        setTransform: (_, { scale, x, y }) => {
-          let h: number
-          let v: number
-
-          switch (props.currentImageRotation) {
-            case -270:
-            case 90:
-              h = y
-              v = 0 - x
-              break
-            case -180:
-            case 180:
-              h = 0 - x
-              v = 0 - y
-              break
-            case -90:
-            case 270:
-              h = 0 - y
-              v = x
-              break
-            default:
-              h = x
-              v = y
-          }
-
-          unref(panzoom).setStyle(
-            'transform',
-            `rotate(${props.currentImageRotation}deg) scale(${scale}) translate(${h}px, ${v}px)`
-          )
-        }
+        setTransform: (_, { scale, x, y }) => setTransform({ scale, x, y })
       } as PanzoomOptions)
       ;(unref(img) as unknown as HTMLElement).addEventListener('wheel', onWheelEvent)
     }
 
     watch(() => props.file, initPanzoom, { immediate: true, deep: true })
 
-    watch([() => props.currentImageZoom, () => props.currentImageRotation], () => {
-      unref(panzoom).zoom(props.currentImageZoom)
-    })
+    watch(
+      () => props.currentImageRotation,
+      () => {
+        setTransform({
+          scale: unref(panzoom).getScale(),
+          x: unref(panzoom).getPan().x,
+          y: unref(panzoom).getPan().y
+        })
+      }
+    )
 
     onMounted(() => {
       resetEventToken.value = eventBus.subscribe('app.preview.media.image.reset', () =>
         initPanzoom()
       )
+      zoomToken.value = eventBus.subscribe('app.preview.media.image.zoom', () =>
+        unref(panzoom)?.zoomIn({ step: 0.1 })
+      )
+      shrinkToken.value = eventBus.subscribe('app.preview.media.image.shrink', () =>
+        unref(panzoom)?.zoomOut({ step: 0.1 })
+      )
     })
 
     onBeforeUnmount(() => {
       eventBus.unsubscribe('app.preview.media.image.reset', unref(resetEventToken))
+      eventBus.unsubscribe('app.preview.media.image.zoom', unref(zoomToken))
+      eventBus.unsubscribe('app.preview.media.image.shrink', unref(shrinkToken))
     })
 
     return {
diff --git a/packages/web-app-preview/src/composables/useImageControls.ts b/packages/web-app-preview/src/composables/useImageControls.ts
index 563b6692eb..60e2b1cfc6 100644
--- a/packages/web-app-preview/src/composables/useImageControls.ts
+++ b/packages/web-app-preview/src/composables/useImageControls.ts
@@ -3,24 +3,18 @@ import { useEventBus } from '@opencloud-eu/web-pkg'
 
 export const useImageControls = () => {
   const eventBus = useEventBus()
-  const currentImageZoom = ref(1)
   const currentImageRotation = ref(0)
 
   const resetImage = () => {
-    currentImageZoom.value = 1
     currentImageRotation.value = 0
     eventBus.publish('app.preview.media.image.reset')
   }
 
-  const calculateZoom = (zoom: number, factor: number) => {
-    return Math.round(zoom * factor * 20) / 20
-  }
   const imageShrink = () => {
-    currentImageZoom.value = Math.max(0.1, calculateZoom(unref(currentImageZoom), 0.8))
+    eventBus.publish('app.preview.media.image.shrink')
   }
   const imageZoom = () => {
-    const maxZoomValue = calculateZoom(9, 1.25)
-    currentImageZoom.value = Math.min(calculateZoom(unref(currentImageZoom), 1.25), maxZoomValue)
+    eventBus.publish('app.preview.media.image.zoom')
   }
   const imageRotateLeft = () => {
     currentImageRotation.value =
@@ -32,7 +26,6 @@ export const useImageControls = () => {
   }
 
   return {
-    currentImageZoom,
     currentImageRotation,
     imageShrink,
     imageZoom,

From fb89b249158e9e55f837b7131161fa8f68754dcc Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Tue, 23 Sep 2025 02:36:26 +0200
Subject: [PATCH 5/6] refactor

---
 packages/web-app-preview/src/App.vue                     | 2 --
 .../web-app-preview/src/components/MediaControls.vue     | 9 ---------
 .../src/components/Sources/MediaImage.vue                | 6 +++++-
 3 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/packages/web-app-preview/src/App.vue b/packages/web-app-preview/src/App.vue
index 06ebdf925c..ea9dde2aa8 100644
--- a/packages/web-app-preview/src/App.vue
+++ b/packages/web-app-preview/src/App.vue
@@ -57,7 +57,6 @@
         :show-image-controls="activeMediaFileCached?.isImage && !activeMediaFileCached?.isError"
         :show-delete-button="isDeleteButtonVisible"
         :current-image-rotation="currentImageRotation"
-        :current-image-zoom="currentImageZoom"
         @set-rotation-right="imageRotateRight"
         @set-rotation-left="imageRotateLeft"
         @set-zoom="imageZoom"
@@ -413,7 +412,6 @@ export default defineComponent({
         this.isAutoPlayEnabled = false
       }
 
-      this.currentImageZoom = 1
       this.currentImageRotation = 0
     }
   },
diff --git a/packages/web-app-preview/src/components/MediaControls.vue b/packages/web-app-preview/src/components/MediaControls.vue
index c2bc492ab1..0487eaad6b 100644
--- a/packages/web-app-preview/src/components/MediaControls.vue
+++ b/packages/web-app-preview/src/components/MediaControls.vue
@@ -143,10 +143,6 @@ export default defineComponent({
       type: Boolean,
       default: true
     },
-    currentImageZoom: {
-      type: Number,
-      default: 1
-    },
     currentImageRotation: {
       type: Number,
       default: 0
@@ -166,10 +162,6 @@ export default defineComponent({
   setup(props) {
     const { $gettext } = useGettext()
 
-    const currentZoomDisplayValue = computed(() => {
-      return `${(props.currentImageZoom * 100).toFixed(0)}%`
-    })
-
     const ariaHiddenFileCount = computed(() => {
       return $gettext('%{ displayIndex } of %{ availableMediaFiles }', {
         displayIndex: (props.activeIndex + 1).toString(),
@@ -190,7 +182,6 @@ export default defineComponent({
     })
 
     return {
-      currentZoomDisplayValue,
       screenreaderFileCount,
       ariaHiddenFileCount,
       resourceDeleteDescription,
diff --git a/packages/web-app-preview/src/components/Sources/MediaImage.vue b/packages/web-app-preview/src/components/Sources/MediaImage.vue
index b7d438e25c..1b1f9c83c9 100644
--- a/packages/web-app-preview/src/components/Sources/MediaImage.vue
+++ b/packages/web-app-preview/src/components/Sources/MediaImage.vue
@@ -103,8 +103,8 @@ export default defineComponent({
         animate: false,
         duration: 300,
         overflow: 'auto',
-        maxScale: 10,
         minScale: 0.5,
+        maxScale: 10,
         setTransform: (_, { scale, x, y }) => setTransform({ scale, x, y })
       } as PanzoomOptions)
       ;(unref(img) as unknown as HTMLElement).addEventListener('wheel', onWheelEvent)
@@ -115,6 +115,10 @@ export default defineComponent({
     watch(
       () => props.currentImageRotation,
       () => {
+        if (!unref(panzoom)) {
+          return
+        }
+
         setTransform({
           scale: unref(panzoom).getScale(),
           x: unref(panzoom).getPan().x,

From d20296c13b59a5279dd66c801c3637cf8bc953d7 Mon Sep 17 00:00:00 2001
From: Alexander Ackermann <abackermann91@gmail.com>
Date: Tue, 23 Sep 2025 03:17:11 +0200
Subject: [PATCH 6/6] fix bug while reloading image

---
 packages/web-app-preview/src/App.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/web-app-preview/src/App.vue b/packages/web-app-preview/src/App.vue
index ea9dde2aa8..8a8256a493 100644
--- a/packages/web-app-preview/src/App.vue
+++ b/packages/web-app-preview/src/App.vue
@@ -206,14 +206,14 @@ export default defineComponent({
 
       const files = props.activeFiles.filter((file) => {
         if (
-          unref(props.currentFileContext.routeQuery)['q_share-visibility'] === 'hidden' &&
+          unref(props.currentFileContext.routeQuery)?.['q_share-visibility'] === 'hidden' &&
           !(file as IncomingShareResource).hidden
         ) {
           return false
         }
 
         if (
-          unref(props.currentFileContext.routeQuery)['q_share-visibility'] !== 'hidden' &&
+          unref(props.currentFileContext.routeQuery)?.['q_share-visibility'] !== 'hidden' &&
           (file as IncomingShareResource).hidden
         ) {
           return false