From 200fac005c2f2557881710d15a7207d7912e126e Mon Sep 17 00:00:00 2001
From: vishwajeet-13 <vishwajeetthakur403@gmail.com>
Date: Tue, 8 Sep 2026 00:57:39 +0530
Subject: [PATCH] feat: JPEG/PNG download choice on shared folder/project pages
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The format menu shipped in #157 only reached the review page and the asset
action menu — a guest on a /vms/shared/folder or /vms/shared/:project link
could still only download a RAW/HEIC file in its original format.

- vms.api.download_shared_converted_asset: guest endpoint, share-token scoped
  (same validation as get_shared_asset_download_url), 300 MB cap + 15/min
  rate limit via serve_converted_download
- SharedProjectPage: per-asset Download becomes Original / JPEG / PNG for
  RAW/HEIC stills; "Download all" stays originals
- MediaPreviewDialog: optional downloadMenu prop renders the same choice in
  the preview header

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01N6kPRDGo6QbcVcc8DPkMTf
---
 .../components/common/MediaPreviewDialog.vue  |  8 +++-
 frontend/src/pages/SharedProjectPage.vue      | 43 ++++++++++++++++++-
 vms/api.py                                    | 32 ++++++++++++++
 3 files changed, 80 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/common/MediaPreviewDialog.vue b/frontend/src/components/common/MediaPreviewDialog.vue
index 55fb796..647e675 100644
--- a/frontend/src/components/common/MediaPreviewDialog.vue
+++ b/frontend/src/components/common/MediaPreviewDialog.vue
@@ -3,8 +3,11 @@
 		<template #default="{ close }">
 			<div class="flex items-center gap-2 border-b border-outline-gray-1 px-4 py-2">
 				<p class="flex-1 truncate text-base font-medium text-ink-gray-8">{{ name }}</p>
+				<Dropdown v-if="downloadMenu?.length" :options="downloadMenu" align="end">
+					<Button variant="ghost" icon-left="lucide-download" label="Download" />
+				</Dropdown>
 				<Button
-					v-if="downloadUrl"
+					v-else-if="downloadUrl"
 					variant="ghost"
 					icon-left="lucide-download"
 					label="Download"
@@ -62,7 +65,7 @@
 
 <script setup lang="ts">
 import { computed, onScopeDispose, ref, watch } from 'vue'
-import { Button, Dialog } from 'frappe-ui'
+import { Button, Dialog, Dropdown, type DropdownOption } from 'frappe-ui'
 
 const props = defineProps<{
 	open: boolean
@@ -70,6 +73,7 @@ const props = defineProps<{
 	name: string
 	mime: string
 	downloadUrl?: string
+	downloadMenu?: DropdownOption[]
 	hasPrevious?: boolean
 	hasNext?: boolean
 }>()
diff --git a/frontend/src/pages/SharedProjectPage.vue b/frontend/src/pages/SharedProjectPage.vue
index 0d7464b..83f7c2e 100644
--- a/frontend/src/pages/SharedProjectPage.vue
+++ b/frontend/src/pages/SharedProjectPage.vue
@@ -123,7 +123,20 @@
 										/>
 									</p>
 								</div>
+								<Dropdown
+									v-if="isConvertibleStill(asset.file_type, asset.file_name)"
+									:options="downloadMenu(asset)"
+									align="end"
+								>
+									<Button
+										variant="ghost"
+										icon="lucide-download"
+										label="Download"
+										@click.stop
+									/>
+								</Dropdown>
 								<Button
+									v-else
 									variant="ghost"
 									icon="lucide-download"
 									label="Download"
@@ -169,6 +182,11 @@
 			:name="preview.asset.file_name"
 			:mime="preview.asset.file_type ?? ''"
 			:download-url="preview.downloadUrl"
+			:download-menu="
+				isConvertibleStill(preview.asset.file_type, preview.asset.file_name)
+					? downloadMenu(preview.asset)
+					: undefined
+			"
 			@update:open="preview = null"
 		/>
 	</div>
@@ -180,16 +198,18 @@ import { useRoute } from 'vue-router'
 import {
 	Badge,
 	Button,
+	Dropdown,
 	PageHeaderBase,
 	PageHeaderTitle,
 	Spinner,
 	toast,
 	useCall,
 	usePageMeta,
+	type DropdownOption,
 } from 'frappe-ui'
 import type { ViewUrlResponse } from '@/types'
 import EmptyState from '@/components/common/EmptyState.vue'
-import { fileKindStyle } from '@/lib/fileType'
+import { fileKindStyle, isConvertibleStill } from '@/lib/fileType'
 import MediaPreviewDialog from '@/components/common/MediaPreviewDialog.vue'
 import { formatBytes, serverMessage } from '@/lib/format'
 
@@ -342,6 +362,27 @@ async function downloadAll() {
 	}
 }
 
+function downloadConverted(asset: SharedAsset, format: 'jpeg' | 'png') {
+	const params = new URLSearchParams({ asset_name: asset.name, format, token: token.value })
+	if (isFolder.value) params.set('folder', props.folderId ?? '')
+	else params.set('project', props.projectId ?? '')
+	const outName = asset.file_name.replace(/\.[^.]+$/, '') + (format === 'jpeg' ? '.jpg' : '.png')
+	toast.info(`Preparing ${format.toUpperCase()}…`)
+	triggerDownload(
+		`/api/v2/method/vms.api.download_shared_converted_asset?${params.toString()}`,
+		outName,
+	)
+}
+
+function downloadMenu(asset: SharedAsset): DropdownOption[] {
+	const ext = asset.file_name.match(/\.([^.]+)$/)?.[1]?.toUpperCase() ?? 'file'
+	return [
+		{ label: `Original (${ext})`, icon: 'lucide-download', onClick: () => download(asset) },
+		{ label: 'JPEG', icon: 'lucide-image', onClick: () => downloadConverted(asset, 'jpeg') },
+		{ label: 'PNG', icon: 'lucide-image', onClick: () => downloadConverted(asset, 'png') },
+	]
+}
+
 function triggerDownload(url: string, fileName: string) {
 	const anchor = document.createElement('a')
 	anchor.href = url
diff --git a/vms/api.py b/vms/api.py
index 08120de..4c60d5a 100644
--- a/vms/api.py
+++ b/vms/api.py
@@ -2250,3 +2250,35 @@ def get_shared_asset_download_url(
 
 	url = generate_presigned_download_url(asset.r2_key, asset.file_name)
 	return {"url": url}
+
+
+# nosemgrep: frappe-semgrep-rules.rules.security.guest-whitelisted-method
+@frappe.whitelist(allow_guest=True)
+@rate_limit(key="asset_name", limit=15, seconds=60, methods=["GET"])
+def download_shared_converted_asset(
+	asset_name: str,
+	format: str,
+	project: str | None = None,
+	token: str | None = None,
+	folder: str | None = None,
+):
+	scope_field, scope_value = _validate_shared_asset_scope(project, token, folder)
+
+	meta = frappe.db.get_value(
+		"VMS Asset",
+		asset_name,
+		["project", "folder", "status", "deleted_at"],
+		as_dict=True,
+	)
+
+	if not meta or meta.deleted_at or meta.status == "Uploading" or meta.get(scope_field) != scope_value:
+		frappe.throw(_("Asset not found in this share"), frappe.DoesNotExistError)
+
+	asset = frappe.get_doc("VMS Asset", asset_name)
+
+	if not asset.r2_key:
+		frappe.throw(_("Asset has no R2 key"))
+
+	from vms.image_export import serve_converted_download
+
+	serve_converted_download(asset, format)