Fix sizes icons (#725)

Co-authored-by: Gilles <[email protected]>

Author: gtsteffaniak

CHANGELOG.md

@@ -18,6 +18,8 @@ All notable changes to this project will be documented in this file. For commit
  - admin special characters and general login improvements https://github.com/gtsteffaniak/filebrowser/issues/594
  - updated editor caching behavior https://github.com/gtsteffaniak/filebrowser/issues/701
  - move/copy file path issue and overwrite https://github.com/gtsteffaniak/filebrowser/issues/687
+ - fix popup preview loading on safari
+ - `preview.highQuality` only affects gallery view mode. popop preview is always high quality, and icons are always low quality.
 
 ## v0.7.6-beta
 

backend/http/preview.go

@@ -97,8 +97,8 @@ func rawFileHandler(w http.ResponseWriter, r *http.Request, file iteminfo.Extend
 
 func previewHelperFunc(w http.ResponseWriter, r *http.Request, d *requestContext) (int, error) {
 	previewSize := r.URL.Query().Get("size")
-	if !(previewSize == "small" || previewSize == "original") {
-		previewSize = "large"
+	if !(previewSize == "large" || previewSize == "original") {
+		previewSize = "small"
 	}
 	if d.fileInfo.Type == "directory" {
 		return http.StatusBadRequest, fmt.Errorf("can't create preview for directory")

frontend/src/api/files.js

@@ -225,15 +225,10 @@ export function getDownloadURL(source, path, inline, useExternal) {
   }
 }
 
-export function getPreviewURL(source, path, modified, selectedSize) {
-  let size = state.user.preview.highQuality ? 'large' : 'small'
-  if (selectedSize) {
-    size = selectedSize
-  }
+export function getPreviewURL(source, path, modified) {
   try {
     const params = {
       path: encodeURIComponent(path),
-      size: size,
       key: Date.parse(modified), // Use modified date as cache key
       source: source,
       inline: 'true'

frontend/src/api/share.js

@@ -1,5 +1,4 @@
 import { fetchURL, fetchJSON, adjustedData } from "./utils";
-import { state } from '@/store'
 import { notify } from "@/notify";
 import { getApiPath,removePrefix } from "@/utils/url.js";
 import { externalUrl,baseURL } from "@/utils/constants";
@@ -54,7 +53,7 @@ export function getPreviewURL(hash, path) {
   try {
     const params = {
       path: encodeURIComponent(path),
-      size: state.user.preview.highQuality ? 'large' : 'small',
+      size: 'small',
       hash: hash,
       inline: 'true'
     }

frontend/src/components/files/Icon.vue

@@ -1,16 +1,18 @@
 <template>
-  <span v-if="isPreviewImg && imageState !== 'error'">
+  <span
+    @mouseenter="handleMouseEnter($event)"
+    @mouseleave="handleMouseLeave($event)"
+    v-if="isPreviewImg && imageState !== 'error'"
+  >
     <i
       v-if="hasMotion"
       class="material-icons"
       :class="{ larger: showLarger, smaller: !showLarger }"
       >animation</i
     >
     <img
-      :key="thumbnailUrl"
+      :key="imageTargetSrc"
       :src="imageDisplaySrc"
-      @mouseenter="handleMouseEnter($event)"
-      @mouseleave="handleMouseLeave($event)"
       class="icon"
       ref="thumbnail"
     />
@@ -21,7 +23,12 @@
 </template>
 
 <script>
-import { onlyOfficeUrl, mediaAvailable, muPdfAvailable, baseURL } from "@/utils/constants";
+import {
+  onlyOfficeUrl,
+  mediaAvailable,
+  muPdfAvailable,
+  baseURL,
+} from "@/utils/constants";
 import { getTypeInfo } from "@/utils/mimetype";
 import { mutations, state } from "@/store";
 
@@ -56,10 +63,16 @@ export default {
       previewTimeouts: [],
       // UPDATED: Manage image state directly
       imageState: "loading", // Can be 'loading', 'loaded', or 'error'
-      imageTargetSrc: this.thumbnailUrl, // The URL we currently want to display
     };
   },
   computed: {
+    imageTargetSrc() {
+      if (this.showLargeIcon) {
+        // Use the large version of the thumbnail if available
+        return this.thumbnailUrl + "&size=large" || PLACEHOLDER_URL;
+      }
+      return this.thumbnailUrl || PLACEHOLDER_URL;
+    },
     pdfConvertable() {
       const ext = "." + this.filename.split(".").pop().toLowerCase(); // Ensure lowercase and dot
       const pdfConvertCompatibleFileExtensions = {
@@ -96,6 +109,9 @@ export default {
       }
       return this.imageTargetSrc;
     },
+    showLargeIcon() {
+      return state.user.viewMode === "gallery" && state.user.preview.highQuality;
+    },
     showLarger() {
       return state.user.viewMode === "gallery" || state.user.viewMode === "normal";
     },
@@ -168,18 +184,19 @@ export default {
       targetImage.src = url;
     },
     handleMouseEnter() {
+      const imageUrl = this.thumbnailUrl + "&size=large";
       if (this.imageState == "loaded") {
-        mutations.setPreviewSource(this.thumbnailUrl);
+        mutations.setPreviewSource(imageUrl);
       }
       if (!state.user.preview.motionVideoPreview || !this.hasMotion) {
         return;
       }
 
       const sequence = [
-        this.thumbnailUrl,
-        this.thumbnailUrl + "&atPercentage=25",
-        this.thumbnailUrl + "&atPercentage=50",
-        this.thumbnailUrl + "&atPercentage=75",
+        imageUrl,
+        imageUrl + "&atPercentage=25",
+        imageUrl + "&atPercentage=50",
+        imageUrl + "&atPercentage=75",
       ];
       let index = 0;
 

frontend/src/i18n/en.json

@@ -194,7 +194,7 @@
     "previewImages": "Preview images",
     "previewVideos": "Preview videos",
     "previewMotionVideos": "Motion preview for videos",
-    "highQualityPreview": "High quality preview",
+    "highQualityPreview": "High quality preview for gallery images",
     "editOffice": "Edit/view office files",
     "popupPreview": "Enable pop-up preview",
     "filePreviewOptions": "File preview options"