From e70f5bcce39ae19060be62aec8b75f75c26d1b9e Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Fri, 6 Sep 2024 09:43:41 +0200
Subject: [PATCH] chore(attachments): refactor building image preview

(cherry picked from commit 02c1de55c4b21863bb7500811e04bc0de9177089)
---
 .../components/tasks/partials/Attachments.vue |   6 +-
 .../components/tasks/partials/FilePreview.vue |   8 +-
 .../components/tasks/partials/KanbanCard.vue  |   2 +-
 frontend/src/models/attachment.ts             |   4 +
 frontend/src/services/attachment.ts           |   9 +-
 pkg/models/task_attachment.go                 | 113 +++++++++++++++++-
 pkg/routes/api/v1/task_attachment.go          |  15 +--
 7 files changed, 131 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/tasks/partials/Attachments.vue b/frontend/src/components/tasks/partials/Attachments.vue
index dc84aaa27..d6ba21dae 100644
--- a/frontend/src/components/tasks/partials/Attachments.vue
+++ b/frontend/src/components/tasks/partials/Attachments.vue
@@ -180,7 +180,7 @@ import ProgressBar from '@/components/misc/ProgressBar.vue'
 import BaseButton from '@/components/base/BaseButton.vue'
 
 import AttachmentService from '@/services/attachment'
-import {SUPPORTED_IMAGE_SUFFIX} from '@/models/attachment'
+import {canPreview} from '@/models/attachment'
 import type {IAttachment} from '@/modelTypes/IAttachment'
 import type {ITask} from '@/modelTypes/ITask'
 
@@ -274,10 +274,6 @@ async function viewOrDownload(attachment: IAttachment) {
 	}
 }
 
-function canPreview(attachment: IAttachment): boolean {
-	return SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.toLowerCase().endsWith(suffix))
-}
-
 const copy = useCopyToClipboard()
 
 function copyUrl(attachment: IAttachment) {
diff --git a/frontend/src/components/tasks/partials/FilePreview.vue b/frontend/src/components/tasks/partials/FilePreview.vue
index 306a2915e..4edde7e13 100644
--- a/frontend/src/components/tasks/partials/FilePreview.vue
+++ b/frontend/src/components/tasks/partials/FilePreview.vue
@@ -22,7 +22,7 @@
 import {ref, shallowReactive, watchEffect} from 'vue'
 import AttachmentService from '@/services/attachment'
 import type {IAttachment} from '@/modelTypes/IAttachment'
-import {SUPPORTED_IMAGE_SUFFIX} from '@/models/attachment'
+import {canPreview} from '@/models/attachment'
 
 const props = defineProps<{
 	modelValue?: IAttachment
@@ -33,13 +33,9 @@ const blobUrl = ref<string | undefined>(undefined)
 
 watchEffect(async () => {
 	if (props.modelValue && canPreview(props.modelValue)) {
-		blobUrl.value = await attachmentService.getBlobUrl(props.modelValue)
+		blobUrl.value = await attachmentService.getBlobUrl(props.modelValue, PREVIEW_SIZE.MD)
 	}
 })
-
-function canPreview(attachment: IAttachment): boolean {
-	return SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.toLowerCase().endsWith(suffix))
-}
 </script>
 
 <style scoped lang="scss">
diff --git a/frontend/src/components/tasks/partials/KanbanCard.vue b/frontend/src/components/tasks/partials/KanbanCard.vue
index 9c25b827f..ca9f40e32 100644
--- a/frontend/src/components/tasks/partials/KanbanCard.vue
+++ b/frontend/src/components/tasks/partials/KanbanCard.vue
@@ -165,7 +165,7 @@ async function maybeDownloadCoverImage() {
 	}
 
 	const attachmentService = new AttachmentService()
-	coverImageBlobUrl.value = await attachmentService.getBlobUrl(attachment)
+	coverImageBlobUrl.value = await attachmentService.getBlobUrl(attachment, PREVIEW_SIZE.LG)
 }
 
 watch(
diff --git a/frontend/src/models/attachment.ts b/frontend/src/models/attachment.ts
index 409f031c8..964b83f18 100644
--- a/frontend/src/models/attachment.ts
+++ b/frontend/src/models/attachment.ts
@@ -7,6 +7,10 @@ import type { IAttachment } from '@/modelTypes/IAttachment'
 
 export const SUPPORTED_IMAGE_SUFFIX = ['.jpg', '.png', '.bmp', '.gif']
 
+export function canPreview(attachment: IAttachment): boolean {
+	return SUPPORTED_IMAGE_SUFFIX.some((suffix) => attachment.file.name.toLowerCase().endsWith(suffix))
+}
+
 export default class AttachmentModel extends AbstractModel<IAttachment> implements IAttachment {
 	id = 0
 	taskId = 0
diff --git a/frontend/src/services/attachment.ts b/frontend/src/services/attachment.ts
index e6d02def0..46a2fdac3 100644
--- a/frontend/src/services/attachment.ts
+++ b/frontend/src/services/attachment.ts
@@ -37,8 +37,13 @@ export default class AttachmentService extends AbstractService<IAttachment> {
 		return data
 	}
 
-	getBlobUrl(model: IAttachment) {
-		return AbstractService.prototype.getBlobUrl.call(this, '/tasks/' + model.taskId + '/attachments/' + model.id)
+	getBlobUrl(model: IAttachment, size?: PREVIEW_SIZE) {
+		let mainUrl = '/tasks/' + model.taskId + '/attachments/' + model.id
+		if (size !== undefined) {
+			mainUrl += `?preview_size=${size}`
+		}
+
+		return AbstractService.prototype.getBlobUrl.call(this, mainUrl)
 	}
 
 	async download(model: IAttachment) {
diff --git a/pkg/models/task_attachment.go b/pkg/models/task_attachment.go
index 84adca1c2..4a9247d80 100644
--- a/pkg/models/task_attachment.go
+++ b/pkg/models/task_attachment.go
@@ -17,14 +17,21 @@
 package models
 
 import (
+	"bytes"
+	"image"
+	"image/png"
 	"io"
+	"strconv"
 	"time"
 
 	"code.vikunja.io/api/pkg/events"
-
 	"code.vikunja.io/api/pkg/files"
+	"code.vikunja.io/api/pkg/log"
+	"code.vikunja.io/api/pkg/modules/keyvalue"
 	"code.vikunja.io/api/pkg/user"
 	"code.vikunja.io/api/pkg/web"
+
+	"github.com/disintegration/imaging"
 	"xorm.io/xorm"
 )
 
@@ -185,6 +192,110 @@ func (ta *TaskAttachment) ReadAll(s *xorm.Session, _ web.Auth, _ string, page in
 	return attachments, len(attachments), numberOfTotalItems, err
 }
 
+func cacheKeyForTaskAttachmentPreview(id int64, size PreviewSize) string {
+	return "task_attachment_preview_" + strconv.FormatInt(id, 10) + "_size_" + string(size)
+}
+
+func (ta *TaskAttachment) GetPreviewFromCache(previewSize PreviewSize) []byte {
+	cacheKey := cacheKeyForTaskAttachmentPreview(ta.ID, previewSize)
+
+	var cached []byte
+	exists, err := keyvalue.GetWithValue(cacheKey, &cached)
+
+	// If the preview is not cached, return nil
+	if err != nil || !exists || cached == nil {
+		return nil
+	}
+
+	return cached
+}
+
+type PreviewSize string
+
+const (
+	PreviewSizeUnknown PreviewSize = "unknown"
+	PreviewSmall       PreviewSize = "sm"
+	PreviewMedium      PreviewSize = "md"
+	PreviewLarge       PreviewSize = "lg"
+	PreviewExtraLarge  PreviewSize = "xl"
+)
+
+func (previewSize PreviewSize) GetSize() int {
+	switch previewSize {
+	case PreviewSmall:
+		return 100
+	case PreviewMedium:
+		return 200
+	case PreviewLarge:
+		return 400
+	case PreviewExtraLarge:
+		return 800
+	case PreviewSizeUnknown:
+		return 0
+	default:
+		return 200
+	}
+}
+
+func GetPreviewSizeFromString(size string) PreviewSize {
+	switch size {
+	case "sm":
+		return PreviewSmall
+	case "md":
+		return PreviewMedium
+	case "lg":
+		return PreviewLarge
+	case "xl":
+		return PreviewExtraLarge
+	}
+
+	return PreviewSizeUnknown
+}
+
+func resizeImage(img image.Image, width int) *image.NRGBA {
+	resizedImg := imaging.Resize(img, width, 0, imaging.Lanczos)
+	log.Debugf(
+		"Resized attachment image from %vx%v to %vx%v for a preview",
+		img.Bounds().Size().X,
+		img.Bounds().Size().Y,
+		resizedImg.Bounds().Size().X,
+		resizedImg.Bounds().Size().Y,
+	)
+
+	return resizedImg
+}
+
+func (ta *TaskAttachment) GenerateAndSavePreviewToCache(previewSize PreviewSize) []byte {
+	img, _, err := image.Decode(ta.File.File)
+	if err != nil {
+		return nil
+	}
+
+	// Scale down the image to a minimum size
+	resizedImg := resizeImage(img, previewSize.GetSize())
+
+	// Get the raw bytes of the resized image
+	buf := &bytes.Buffer{}
+	if err := png.Encode(buf, resizedImg); err != nil {
+		return nil
+	}
+	previewImage, err := io.ReadAll(buf)
+	if err != nil {
+		return nil
+	}
+
+	// Store the preview image in the cache
+	cacheKey := cacheKeyForTaskAttachmentPreview(ta.ID, previewSize)
+	err = keyvalue.Put(cacheKey, previewImage)
+	if err != nil {
+		return nil
+	}
+
+	log.Infof("Attachment image preview for task attachment %v of size %v created and cached", ta.ID, previewSize)
+
+	return previewImage
+}
+
 // Delete removes an attachment
 // @Summary Delete an attachment
 // @Description Delete an attachment.
diff --git a/pkg/routes/api/v1/task_attachment.go b/pkg/routes/api/v1/task_attachment.go
index dcf1979f0..3ffefed78 100644
--- a/pkg/routes/api/v1/task_attachment.go
+++ b/pkg/routes/api/v1/task_attachment.go
@@ -117,8 +117,7 @@ func UploadTaskAttachment(c echo.Context) error {
 // @Produce octet-stream
 // @Param id path int true "Task ID"
 // @Param attachmentID path int true "Attachment ID"
-// @Param preview query string false "If set to true, a preview image will be returned if the attachment is an image."
-// @Param size query string false "The size of the preview image. Can be sm = 100px, md = 200px, lg = 400px or xl = 800px."
+// @Param preview_size query string false "The size of the preview image. Can be sm = 100px, md = 200px, lg = 400px or xl = 800px. If provided, a preview image will be returned if the attachment is an image."
 // @Security JWTKeyAuth
 // @Success 200 {file} blob "The attachment file."
 // @Failure 403 {object} models.Message "No access to this task."
@@ -157,15 +156,9 @@ func GetTaskAttachment(c echo.Context) error {
 		return handler.HandleHTTPError(err)
 	}
 
-	// Reading the 'preview' query parameter
-	preview := c.QueryParam("preview") == "true"
-	previewSize := models.PreviewSize(c.QueryParam("size"))
-	if previewSize == "" {
-		previewSize = models.PreviewMedium
-	}
-
 	// If the preview query parameter is set and the preview was already generated and cached, return the cached preview image
-	if preview && strings.HasPrefix(taskAttachment.File.Mime, "image") {
+	previewSize := models.GetPreviewSizeFromString(c.QueryParam("preview_size"))
+	if previewSize != models.PreviewSizeUnknown && strings.HasPrefix(taskAttachment.File.Mime, "image") {
 		previewFileBytes := taskAttachment.GetPreviewFromCache(previewSize)
 		if previewFileBytes != nil {
 			log.Debugf("Cached attachment image preview found for task attachment %v", taskAttachment.ID)
@@ -187,7 +180,7 @@ func GetTaskAttachment(c echo.Context) error {
 	}
 
 	// If a preview is requested and the preview was not cached, we create the preview and cache it
-	if preview {
+	if previewSize != models.PreviewSizeUnknown {
 		previewFileBytes := taskAttachment.GenerateAndSavePreviewToCache(previewSize)
 		if previewFileBytes != nil {
 			return c.Blob(http.StatusOK, "image/png", previewFileBytes)