diff --git a/web/package-lock.json b/web/package-lock.json
index 15080e23e..c10601498 100644
--- a/web/package-lock.json
+++ b/web/package-lock.json
@@ -10,7 +10,7 @@
       "dependencies": {
         "@egjs/svelte-view360": "^4.0.0-beta.7",
         "@mdi/js": "^7.3.67",
-        "@zoom-image/svelte": "^0.2.1",
+        "@zoom-image/svelte": "^0.2.2",
         "axios": "^0.27.2",
         "buffer": "^6.0.3",
         "copy-image-clipboard": "^2.1.2",
@@ -3935,9 +3935,9 @@
       "dev": true
     },
     "node_modules/@zoom-image/core": {
-      "version": "0.31.0",
-      "resolved": "https://registry.npmjs.org/@zoom-image/core/-/core-0.31.0.tgz",
-      "integrity": "sha512-lvFVfIe/CSASXVq1E2vWnt/inXqrBMgjW96lW/l1JdM9EaCj5yis6YXPL5z+Rz2WHmMg5bb7Ps6w1Gzs/bC8LQ==",
+      "version": "0.31.1",
+      "resolved": "https://registry.npmjs.org/@zoom-image/core/-/core-0.31.1.tgz",
+      "integrity": "sha512-VoAo4OkrD6sZIXNutnTzMeR0KZPkK+VOkyYfU9FTJsJxHHoHTCi9qixu8tzfrFkz3l0iQQBKkVVofu+ujM8sGw==",
       "dependencies": {
         "@namnode/store": "^0.1.0"
       },
@@ -3947,11 +3947,11 @@
       }
     },
     "node_modules/@zoom-image/svelte": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@zoom-image/svelte/-/svelte-0.2.1.tgz",
-      "integrity": "sha512-UGOFsXJN5Sk/uJxp7ZMajedXusmdmQ23nTNgphR4T9Q0Aef4qJJZI5dpGZtMCbGH2kdLbpIm30Sbht9kIe1L1Q==",
+      "version": "0.2.2",
+      "resolved": "https://registry.npmjs.org/@zoom-image/svelte/-/svelte-0.2.2.tgz",
+      "integrity": "sha512-y8NGL3XAY4utyCtF4bk8Z8H/5JXBxRRYAvoR1o9fzHWNQ9dWVog3gniQ2C9WNPFQPet/4SxIi6G2RakJ6gu6Aw==",
       "dependencies": {
-        "@zoom-image/core": "0.31.0"
+        "@zoom-image/core": "0.31.1"
       },
       "funding": {
         "type": "github",
diff --git a/web/package.json b/web/package.json
index 7a35258e6..366fb88e5 100644
--- a/web/package.json
+++ b/web/package.json
@@ -59,7 +59,7 @@
   "dependencies": {
     "@egjs/svelte-view360": "^4.0.0-beta.7",
     "@mdi/js": "^7.3.67",
-    "@zoom-image/svelte": "^0.2.1",
+    "@zoom-image/svelte": "^0.2.2",
     "axios": "^0.27.2",
     "buffer": "^6.0.3",
     "copy-image-clipboard": "^2.1.2",
diff --git a/web/src/lib/components/asset-viewer/photo-viewer.svelte b/web/src/lib/components/asset-viewer/photo-viewer.svelte
index dbf6c2065..4839e7118 100644
--- a/web/src/lib/components/asset-viewer/photo-viewer.svelte
+++ b/web/src/lib/components/asset-viewer/photo-viewer.svelte
@@ -9,6 +9,7 @@
   import { isWebCompatibleImage } from '$lib/utils/asset-utils';
   import { shouldIgnoreShortcut } from '$lib/utils/shortcut';
   import { handleError } from '$lib/utils/handle-error';
+  import { user } from '$lib/stores/user.store';
 
   export let asset: AssetResponseDto;
   export let haveFadeTransition = true;
@@ -52,6 +53,10 @@
 
   const doRotate = async () => {
     setZoomImageWheelState({ currentRotation: $zoomImageWheelState.currentRotation + 90, currentZoom: 1 });
+
+    if (($user && $user.id !== asset.ownerId) || $user === null || asset.isReadOnly) {
+      return;
+    }
     try {
       await api.assetApi.updateAsset({
         id: asset.id,
@@ -182,7 +187,7 @@
   {#await loadAssetData({ loadOriginal: false })}
     <LoadingSpinner />
   {:then}
-    <div bind:this={imgElement}>
+    <div bind:this={imgElement} class="duration-500">
       <img
         transition:fade={{ duration: haveFadeTransition ? 150 : 0 }}
         src={assetData}