From d54290ab3555cc1c0c55d8816f5419bbfadc682f Mon Sep 17 00:00:00 2001
From: Florian Schade <f.schade@icloud.com>
Date: Sun, 15 Oct 2023 18:47:21 +0200
Subject: [PATCH 1/2] enhancement: preview image presentation

use a more user friendly image preview and take care that images are no longer cropped
---
 ...enhancement-preview-app-image-presentation |   8 ++
 packages/web-app-preview/package.json         |   1 +
 packages/web-app-preview/src/App.vue          | 121 ++++++++----------
 .../src/components/MediaControls.vue          |   5 +-
 .../src/components/Sources/MediaImage.vue     |  64 ++++++++-
 packages/web-pkg/package.json                 |   3 +-
 .../src/services/preview/previewService.ts    |  12 +-
 .../web-pkg/src/services/preview/types.ts     |   7 +
 pnpm-lock.yaml                                |  22 +++-
 9 files changed, 158 insertions(+), 85 deletions(-)
 create mode 100644 changelog/unreleased/enhancement-preview-app-image-presentation

diff --git a/changelog/unreleased/enhancement-preview-app-image-presentation b/changelog/unreleased/enhancement-preview-app-image-presentation
new file mode 100644
index 00000000000..dead001dca6
--- /dev/null
+++ b/changelog/unreleased/enhancement-preview-app-image-presentation
@@ -0,0 +1,8 @@
+Enhancement: Preview image presentation
+
+We've updated the preview app to have a more user friendly image browsing experience,
+image zooming, rotation and movement is smoother, images are no longer cropped.
+
+https://github.com/owncloud/web/pull/9806
+https://github.com/owncloud/ocis/pull/7409
+https://github.com/owncloud/web/issues/7728
diff --git a/packages/web-app-preview/package.json b/packages/web-app-preview/package.json
index 0c6344515bf..b2ef627e9ad 100644
--- a/packages/web-app-preview/package.json
+++ b/packages/web-app-preview/package.json
@@ -5,6 +5,7 @@
   "description": "ownCloud Web Preview",
   "license": "AGPL-3.0",
   "devDependencies": {
+    "@panzoom/panzoom": "^4.5.1",
     "web-test-helpers": "workspace:*"
   },
   "peerDependencies": {
diff --git a/packages/web-app-preview/src/App.vue b/packages/web-app-preview/src/App.vue
index 93bb440d21a..94c0f7fb9fe 100644
--- a/packages/web-app-preview/src/App.vue
+++ b/packages/web-app-preview/src/App.vue
@@ -29,50 +29,49 @@
       :accessible-label="$gettext('Failed to load media file')"
     />
     <template v-else>
-      <div
-        v-show="activeMediaFileCached"
-        class="oc-width-1-1 oc-flex oc-flex-center oc-flex-middle oc-p-s oc-box-shadow-medium preview-player"
-        :class="{ lightbox: isFullScreenModeActivated }"
-      >
-        <media-image
-          v-if="activeMediaFileCached.isImage"
-          :file="activeMediaFileCached"
+      <div class="stage" :class="{ lightbox: isFullScreenModeActivated }">
+        <div v-show="activeMediaFileCached" class="stage_media">
+          <media-image
+            v-if="activeMediaFileCached.isImage"
+            :file="activeMediaFileCached"
+            :current-image-rotation="currentImageRotation"
+            :current-image-zoom="currentImageZoom"
+          />
+          <media-video
+            v-else-if="activeMediaFileCached.isVideo"
+            :file="activeMediaFileCached"
+            :is-auto-play-enabled="isAutoPlayEnabled"
+          />
+          <media-audio
+            v-else-if="activeMediaFileCached.isAudio"
+            :file="activeMediaFileCached"
+            :is-auto-play-enabled="isAutoPlayEnabled"
+          />
+        </div>
+        <media-controls
+          class="stage_controls"
+          :files="filteredFiles"
+          :active-index="activeIndex"
+          :is-full-screen-mode-activated="isFullScreenModeActivated"
+          :is-folder-loading="isFolderLoading"
+          :is-image="activeMediaFileCached?.isImage"
           :current-image-rotation="currentImageRotation"
           :current-image-zoom="currentImageZoom"
-        />
-        <media-video
-          v-else-if="activeMediaFileCached.isVideo"
-          :file="activeMediaFileCached"
-          :is-auto-play-enabled="isAutoPlayEnabled"
-        />
-        <media-audio
-          v-else-if="activeMediaFileCached.isAudio"
-          :file="activeMediaFileCached"
-          :is-auto-play-enabled="isAutoPlayEnabled"
+          @set-rotation="currentImageRotation = $event"
+          @set-zoom="currentImageZoom = $event"
+          @toggle-full-screen="toggleFullscreenMode"
+          @toggle-previous="prev"
+          @toggle-next="next"
         />
       </div>
     </template>
-    <media-controls
-      :files="filteredFiles"
-      :active-index="activeIndex"
-      :is-full-screen-mode-activated="isFullScreenModeActivated"
-      :is-folder-loading="isFolderLoading"
-      :is-image="activeMediaFileCached?.isImage"
-      :current-image-rotation="currentImageRotation"
-      :current-image-zoom="currentImageZoom"
-      @set-rotation="currentImageRotation = $event"
-      @set-zoom="currentImageZoom = $event"
-      @toggle-full-screen="toggleFullscreenMode"
-      @toggle-previous="prev"
-      @toggle-next="next"
-    />
   </main>
 </template>
 <script lang="ts">
 import { computed, defineComponent, ref, unref } from 'vue'
 import { RouteLocationRaw } from 'vue-router'
 import { Resource } from '@ownclouders/web-client/src'
-import { AppTopBar } from '@ownclouders/web-pkg'
+import { AppTopBar, ProcessorType } from '@ownclouders/web-pkg'
 import {
   queryItemAsString,
   sortHelper,
@@ -443,7 +442,8 @@ export default defineComponent({
       return this.$previewService.loadPreview({
         space: unref(this.currentFileContext.space),
         resource: file,
-        dimensions: [this.thumbDimensions, this.thumbDimensions] as [number, number]
+        dimensions: [this.thumbDimensions, this.thumbDimensions] as [number, number],
+        processor: ProcessorType.enum.fit
       })
     },
     preloadImages() {
@@ -496,44 +496,25 @@ export default defineComponent({
 </script>
 
 <style lang="scss" scoped>
-.preview-player {
-  overflow: auto;
-  max-width: 90vw;
-  height: 70vh;
-  margin: 10px auto;
-  object-fit: contain;
-
-  img,
-  video {
-    max-width: 85vw;
-    max-height: 65vh;
-  }
-}
-.preview-player.lightbox {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 999;
-  margin: 0;
-  background: rgba(38, 38, 38, 0.8);
-  width: 100%;
+.stage {
+  display: flex;
+  flex-direction: column;
   height: 100%;
-  max-width: 100%;
-}
-
-.preview-player.lightbox > * {
-  max-width: 100vw;
-  max-height: 100vh;
-}
-
-.preview-details.lightbox {
-  z-index: 1000;
-  opacity: 0.9;
-}
+  text-align: center;
+
+  &_media {
+    flex-grow: 1;
+    overflow: hidden;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
 
-@media (max-width: 959px) {
-  .preview-player {
-    max-width: 100vw;
+  &_controls {
+    height: auto;
+    margin: 10px auto;
   }
 }
 </style>
diff --git a/packages/web-app-preview/src/components/MediaControls.vue b/packages/web-app-preview/src/components/MediaControls.vue
index c69905c50a9..855f74bae22 100644
--- a/packages/web-app-preview/src/components/MediaControls.vue
+++ b/packages/web-app-preview/src/components/MediaControls.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="oc-position-medium oc-position-bottom-center preview-details"
-    :class="{ lightbox: isFullScreenModeActivated }"
-  >
+  <div class="preview-details" :class="{ lightbox: isFullScreenModeActivated }">
     <div
       class="oc-background-brand oc-p-s oc-width-large oc-flex oc-flex-middle oc-flex-center oc-flex-around preview-controls-action-bar"
     >
diff --git a/packages/web-app-preview/src/components/Sources/MediaImage.vue b/packages/web-app-preview/src/components/Sources/MediaImage.vue
index 6ad88fce73f..706ab7cf356 100644
--- a/packages/web-app-preview/src/components/Sources/MediaImage.vue
+++ b/packages/web-app-preview/src/components/Sources/MediaImage.vue
@@ -1,15 +1,18 @@
 <template>
   <img
+    ref="img"
     :key="`media-image-${file.id}`"
     :src="file.url"
     :alt="file.name"
     :data-id="file.id"
-    :style="`zoom: ${currentImageZoom};transform: rotate(${currentImageRotation}deg)`"
+    :style="`transform: rotate(${currentImageRotation}deg)`"
   />
 </template>
 <script lang="ts">
-import { defineComponent, PropType } from 'vue'
+import { defineComponent, PropType, onMounted, ref, watch } from 'vue'
 import { CachedFile } from '../../helpers/types'
+import type { PanzoomObject } from '@panzoom/panzoom'
+import Panzoom from '@panzoom/panzoom'
 
 export default defineComponent({
   name: 'MediaImage',
@@ -26,6 +29,63 @@ export default defineComponent({
       type: Number,
       required: true
     }
+  },
+  setup(props) {
+    const img = ref()
+    let panzoom: PanzoomObject
+
+    onMounted(() => {
+      panzoom = Panzoom(img.value, {
+        animate: true,
+        duration: 300,
+        overflow: 'auto',
+        maxScale: 10,
+        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
+          }
+
+          panzoom.setStyle(
+            'transform',
+            `rotate(${props.currentImageRotation}deg) scale(${scale}) translate(${h}px, ${v}px)`
+          )
+        }
+      })
+    })
+
+    watch([() => props.currentImageZoom, () => props.currentImageRotation], () => {
+      panzoom.zoom(props.currentImageZoom)
+    })
+
+    return {
+      img
+    }
   }
 })
 </script>
+<style lang="scss" scoped>
+img {
+  max-width: 80%;
+  max-height: 80%;
+}
+</style>
diff --git a/packages/web-pkg/package.json b/packages/web-pkg/package.json
index 834fd47d5f5..2b8d560579d 100644
--- a/packages/web-pkg/package.json
+++ b/packages/web-pkg/package.json
@@ -14,7 +14,8 @@
     "directory": "packages/web-pkg"
   },
   "devDependencies": {
-    "web-test-helpers": "workspace:*"
+    "web-test-helpers": "workspace:*",
+    "zod": "^3.22.4"
   },
   "peerDependencies": {
     "@ownclouders/web-client": "workspace:*",
diff --git a/packages/web-pkg/src/services/preview/previewService.ts b/packages/web-pkg/src/services/preview/previewService.ts
index 804b3208ebb..039e8979e87 100644
--- a/packages/web-pkg/src/services/preview/previewService.ts
+++ b/packages/web-pkg/src/services/preview/previewService.ts
@@ -112,6 +112,7 @@ export class PreviewService {
       scalingup: options.scalingup || 0,
       preview: Object.hasOwnProperty.call(options, 'preview') ? options.preview : 1,
       a: Object.hasOwnProperty.call(options, 'a') ? options.a : 1,
+      ...(options.processor && { processor: options.processor }),
       ...(options.etag && { c: options.etag.replaceAll('"', '') }),
       ...(options.dimensions && options.dimensions[0] && { x: options.dimensions[0] }),
       ...(options.dimensions && options.dimensions[1] && { y: options.dimensions[1] })
@@ -119,7 +120,7 @@ export class PreviewService {
   }
 
   private async privatePreviewBlob(options: LoadPreviewOptions, cached = false): Promise<string> {
-    const { resource, dimensions } = options
+    const { resource, dimensions, processor } = options
     if (cached) {
       return this.cacheFactory(options)
     }
@@ -129,7 +130,7 @@ export class PreviewService {
       'remote.php/dav',
       encodePath(resource.webDavPath),
       '?',
-      this.buildQueryString({ etag: resource.etag, dimensions })
+      this.buildQueryString({ etag: resource.etag, dimensions, processor })
     ].join('')
     try {
       const { data } = await this.clientService.httpAuthenticated.get(url, {
@@ -140,14 +141,17 @@ export class PreviewService {
   }
 
   private async publicPreviewUrl(options: LoadPreviewOptions): Promise<string> {
-    const { resource, dimensions } = options
+    const { resource, dimensions, processor } = options
     // In a public context, i.e. public shares, the downloadURL contains a pre-signed url to
     // download the file.
     const [url, signedQuery] = resource.downloadURL.split('?')
 
     // Since the pre-signed url contains query parameters and the caller of this method
     // can also provide query parameters we have to combine them.
-    const combinedQuery = [this.buildQueryString({ etag: resource.etag, dimensions }), signedQuery]
+    const combinedQuery = [
+      this.buildQueryString({ etag: resource.etag, dimensions, processor }),
+      signedQuery
+    ]
       .filter(Boolean)
       .join('&')
 
diff --git a/packages/web-pkg/src/services/preview/types.ts b/packages/web-pkg/src/services/preview/types.ts
index 6090a45c06b..25ddce0a6ba 100644
--- a/packages/web-pkg/src/services/preview/types.ts
+++ b/packages/web-pkg/src/services/preview/types.ts
@@ -1,4 +1,9 @@
 import { Resource, SpaceResource } from '@ownclouders/web-client'
+import { z } from 'zod'
+
+export const ProcessorType = z.enum(['fit', 'resize', 'fill', 'thumbnail'])
+
+export type ProcessorType = z.infer<typeof ProcessorType>
 
 export interface BuildQueryStringOptions {
   preview?: number
@@ -6,12 +11,14 @@ export interface BuildQueryStringOptions {
   a?: number
   etag?: string
   dimensions?: [number, number]
+  processor?: ProcessorType
 }
 
 export interface LoadPreviewOptions {
   space: SpaceResource
   resource: Resource
   dimensions?: [number, number]
+  processor?: ProcessorType
 }
 
 export interface PreviewCapability {
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 26ebe92cc56..14e82c6971f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 overrides:
   '@uppy/companion-client': https://github.com/owncloud/uppy/releases/download/v3.12.13-owncloud/uppy-companion-client.tgz
   '@uppy/core': https://github.com/owncloud/uppy/releases/download/v3.12.13-owncloud/uppy-core.tgz
@@ -853,6 +849,9 @@ importers:
         specifier: 4.1.0
         version: 4.1.0(vue@3.3.4)
     devDependencies:
+      '@panzoom/panzoom':
+        specifier: ^4.5.1
+        version: 4.5.1
       web-test-helpers:
         specifier: workspace:*
         version: link:../web-test-helpers
@@ -1059,6 +1058,9 @@ importers:
       web-test-helpers:
         specifier: workspace:*
         version: link:../web-test-helpers
+      zod:
+        specifier: ^3.22.4
+        version: 3.22.4
 
   packages/web-runtime:
     dependencies:
@@ -6163,6 +6165,10 @@ packages:
       rimraf: 3.0.2
     dev: true
 
+  /@panzoom/panzoom@4.5.1:
+    resolution: {integrity: sha512-QOr/t7314XTwgAUDazR+RDcTAWSbkpjDnZJddd9f56jSUA8ptUsyDblAb+sp/O5O1o5Fiu9KpWxVHKuhGUgp5w==}
+    dev: true
+
   /@playwright/test@1.33.0:
     resolution: {integrity: sha512-YunBa2mE7Hq4CfPkGzQRK916a4tuZoVx/EpLjeWlTVOnD4S2+fdaQZE0LJkbfhN5FTSKNLdcl7MoT5XB37bTkg==}
     engines: {node: '>=14'}
@@ -22391,6 +22397,10 @@ packages:
       readable-stream: 3.6.0
     dev: true
 
+  /zod@3.22.4:
+    resolution: {integrity: sha512-iC+8Io04lddc+mVqQ9AZ7OQ2MrUKGN+oIQyq1vemgt46jwCwLfhq7/pwnBnNXXXZb8VTVLKwp9EDkx+ryxIWmg==}
+    dev: true
+
   /zwitch@1.0.5:
     resolution: {integrity: sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==}
     dev: true
@@ -22599,3 +22609,7 @@ packages:
       lodash: 4.17.21
       vue: 3.3.4
     dev: true
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false

From dfbcc28e14f91cb81defcd8a1c5e55e8fcc3c96c Mon Sep 17 00:00:00 2001
From: Florian Schade <f.schade@icloud.com>
Date: Mon, 16 Oct 2023 09:22:55 +0200
Subject: [PATCH 2/2] fix> e2e test preview image xpath

---
 tests/e2e/support/objects/app-files/resource/actions.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/e2e/support/objects/app-files/resource/actions.ts b/tests/e2e/support/objects/app-files/resource/actions.ts
index 186b871426e..f7edd5131d0 100644
--- a/tests/e2e/support/objects/app-files/resource/actions.ts
+++ b/tests/e2e/support/objects/app-files/resource/actions.ts
@@ -65,7 +65,7 @@ const globalSearchOptions = '#files-global-search-options'
 const loadingSpinner = '#files-global-search-options .loading'
 const filesViewOptionButton = '#files-view-options-btn'
 const hiddenFilesToggleButton = '//*[@data-testid="files-switch-hidden-files"]//button'
-const previewImage = '//main[@id="preview"]//div[contains(@class,"preview-player")]//img'
+const previewImage = '//main[@id="preview"]//div[contains(@class,"stage_media")]//img'
 const drawioSaveButton = '.geBigButton >> text=Save'
 const drawioIframe = '#drawio-editor'
 const externalEditorIframe = '[name="app-iframe"]'