diff --git a/package-lock.json b/package-lock.json index d0beebc..24eae4f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,6 @@ "@vueuse/components": "^12.5.0", "@vueuse/core": "^12.8.2", "@vueuse/integrations": "^13.6.0", - "browser-image-compression": "^2.0.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "date-fns": "^4.1.0", @@ -146,6 +145,7 @@ "integrity": "sha512-l+lkXCHS6tQEc5oUpK28xBOZ6+HwaH7YwoYQbLFiYb4nS2/l1tKnZEtEWkD0GuiYdvArf9qBS0XlQGXzPMsNqQ==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@ampproject/remapping": "^2.2.0", "@babel/code-frame": "^7.26.2", @@ -2651,6 +2651,7 @@ "integrity": "sha512-zx0EIq78WlY/lBb1uXlziZmDZI4ubcCXIMJ4uGjXzZW0nS19TjSPeXPAjzzTmKQlJUZm0SbmZhPKP7tuQ1SsEw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "chalk": "^4.1.1", "fs-extra": "^9.0.1", @@ -5717,6 +5718,7 @@ "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "fast-deep-equal": "^3.1.3", "fast-uri": "^3.0.1", @@ -6059,15 +6061,6 @@ "node": ">=8" } }, - "node_modules/browser-image-compression": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/browser-image-compression/-/browser-image-compression-2.0.2.tgz", - "integrity": "sha512-pBLlQyUf6yB8SmmngrcOw3EoS4RpQ1BcylI3T9Yqn7+4nrQTXJD4sJDe5ODnJdrvNMaio5OicFo75rDyJD2Ucw==", - "license": "MIT", - "dependencies": { - "uzip": "0.20201231.0" - } - }, "node_modules/browserslist": { "version": "4.24.4", "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.24.4.tgz", @@ -6088,6 +6081,7 @@ } ], "license": "MIT", + "peer": true, "dependencies": { "caniuse-lite": "^1.0.30001688", "electron-to-chromium": "^1.5.73", @@ -7634,17 +7628,6 @@ "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", "license": "MIT" }, - "node_modules/encoding": { - "version": "0.1.13", - "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.13.tgz", - "integrity": "sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==", - "dev": true, - "license": "MIT", - "optional": true, - "dependencies": { - "iconv-lite": "^0.6.2" - } - }, "node_modules/end-of-stream": { "version": "1.4.4", "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz", @@ -8398,6 +8381,7 @@ "resolved": "https://registry.npmjs.org/fuse.js/-/fuse.js-7.0.0.tgz", "integrity": "sha512-14F4hBIxqKvD4Zz/XjDc3y94mNZN6pRv3U13Udo0lNLCWRBUsrMv2xwcF/y/Z5sV6+FQW+/ow68cHpm4sunt8Q==", "license": "Apache-2.0", + "peer": true, "engines": { "node": ">=10" } @@ -8934,20 +8918,6 @@ "ms": "^2.0.0" } }, - "node_modules/iconv-lite": { - "version": "0.6.3", - "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz", - "integrity": "sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==", - "dev": true, - "license": "MIT", - "optional": true, - "dependencies": { - "safer-buffer": ">= 2.1.2 < 3.0.0" - }, - "engines": { - "node": ">=0.10.0" - } - }, "node_modules/idb": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz", @@ -11763,6 +11733,7 @@ "resolved": "https://registry.npmjs.org/qrcode/-/qrcode-1.5.4.tgz", "integrity": "sha512-1ca71Zgiu6ORjHqFBDpnSMTR2ReToX4l1Au1VFLyVeBTFavzQnv5JxMFr3ukHVKpSrSA2MCk0lNJSykjUfz7Zg==", "license": "MIT", + "peer": true, "dependencies": { "dijkstrajs": "^1.0.1", "pngjs": "^5.0.0", @@ -12406,6 +12377,7 @@ "integrity": "sha512-4iya7Jb76fVpQyLoiVpzUrsjQ12r3dM7fIVz+4NwoYvZOShknRmiv+iu9CClZml5ZLGb0XMcYLutK6w9tgxHDw==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "@types/estree": "1.0.8" }, @@ -13415,7 +13387,8 @@ "version": "4.0.12", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-4.0.12.tgz", "integrity": "sha512-bT0hJo91FtncsAMSsMzUkoo/iEU0Xs5xgFgVC9XmdM9bw5MhZuQFjPNl6wxAE0SiQF/YTZJa+PndGWYSDtuxAg==", - "license": "MIT" + "license": "MIT", + "peer": true }, "node_modules/tailwindcss-animate": { "version": "1.0.7", @@ -13550,6 +13523,7 @@ "integrity": "sha512-GWANVlPM/ZfYzuPHjq0nxT+EbOEDDN3Jwhwdg1D8TU8oSkktp8w64Uq4auuGLxFSoNTRDncTq2hQHX1Ld9KHkA==", "dev": true, "license": "BSD-2-Clause", + "peer": true, "dependencies": { "@jridgewell/source-map": "^0.3.3", "acorn": "^8.8.2", @@ -13779,6 +13753,7 @@ "integrity": "sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==", "devOptional": true, "license": "Apache-2.0", + "peer": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" @@ -13978,12 +13953,6 @@ "dev": true, "license": "MIT" }, - "node_modules/uzip": { - "version": "0.20201231.0", - "resolved": "https://registry.npmjs.org/uzip/-/uzip-0.20201231.0.tgz", - "integrity": "sha512-OZeJfZP+R0z9D6TmBgLq2LHzSSptGMGDGigGiEe0pr8UBe/7fdflgHlHBNDASTXB5jnFuxHpNaJywSg8YFeGng==", - "license": "MIT" - }, "node_modules/validate-npm-package-license": { "version": "3.0.4", "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz", @@ -14035,6 +14004,7 @@ "integrity": "sha512-+Oxm7q9hDoLMyJOYfUYBuHQo+dkAloi33apOPP56pzj+vsdJDzr+j1NISE5pyaAuKL4A3UD34qd0lx5+kfKp2g==", "dev": true, "license": "MIT", + "peer": true, "dependencies": { "esbuild": "^0.25.0", "fdir": "^6.4.4", @@ -14259,6 +14229,7 @@ "resolved": "https://registry.npmjs.org/vue/-/vue-3.5.13.tgz", "integrity": "sha512-wmeiSMxkZCSc+PM2w2VRsOYAZC8GdipNFRTsLSfodVqI9mbejKeXEGr8SckuLnrQPGe3oJN5c3K0vpoU9q/wCQ==", "license": "MIT", + "peer": true, "dependencies": { "@vue/compiler-dom": "3.5.13", "@vue/compiler-sfc": "3.5.13", @@ -14711,6 +14682,7 @@ "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==", "dev": true, "license": "MIT", + "peer": true, "bin": { "rollup": "dist/bin/rollup" }, @@ -14968,6 +14940,7 @@ "resolved": "https://registry.npmjs.org/zod/-/zod-3.25.76.tgz", "integrity": "sha512-gzUt/qt81nXsFGKIFcC3YnfEAx5NkunCfnDlvuBSSFS02bcXu4Lmea0AFIUwbLWxWPx3d9p8S5QoaujKcNQxcQ==", "license": "MIT", + "peer": true, "funding": { "url": "https://github.com/sponsors/colinhacks" } diff --git a/package.json b/package.json index 2c2f2dd..d7db78c 100644 --- a/package.json +++ b/package.json @@ -48,7 +48,6 @@ "@vueuse/components": "^12.5.0", "@vueuse/core": "^12.8.2", "@vueuse/integrations": "^13.6.0", - "browser-image-compression": "^2.0.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "date-fns": "^4.1.0", diff --git a/src/modules/activities/components/CreateEventDialog.vue b/src/modules/activities/components/CreateEventDialog.vue index 68b3994..5f3a605 100644 --- a/src/modules/activities/components/CreateEventDialog.vue +++ b/src/modules/activities/components/CreateEventDialog.vue @@ -41,8 +41,6 @@ import { import { Calendar, Loader2, ChevronDown, MapPin } from 'lucide-vue-next' import { toastService } from '@/core/services/ToastService' import { injectService, SERVICE_TOKENS } from '@/core/di-container' -import ImageUpload from '@/modules/base/components/ImageUpload.vue' -import type { ImageUploadService, UploadedImage } from '@/modules/base/services/ImageUploadService' import type { TicketApiService } from '../services/TicketApiService' import type { CreateEventRequest } from '../types/ticket' import { ALL_CATEGORIES } from '../types/category' @@ -68,6 +66,7 @@ const formSchema = toTypedSchema(z.object({ event_end_date: z.string().optional().default(''), event_end_time: z.string().optional().default(''), location: z.string().max(500).optional().default(''), + banner: z.string().optional().default(''), currency: z.string().default("sat"), amount_tickets: z.number().min(0).max(100000).default(0), price_per_ticket: z.number().min(0).default(0), @@ -83,17 +82,13 @@ const form = useForm({ event_end_date: '', event_end_time: '', location: '', + banner: '', currency: 'sat', amount_tickets: 0, price_per_ticket: 0, } }) -interface BannerImage extends UploadedImage { - isPrimary: boolean -} -const bannerImages = ref([]) - // Fold a date input ("YYYY-MM-DD") and an optional time input ("HH:MM") // into the events-extension wire format: date-only when no time given, // ISO 8601 datetime otherwise. The publisher switches NIP-52 kinds on @@ -105,7 +100,6 @@ function foldDateTime(date: string, time: string): string { const paymentService = injectService(SERVICE_TOKENS.PAYMENT_SERVICE) const ticketApi = injectService(SERVICE_TOKENS.TICKET_API) as TicketApiService | null -const imageService = injectService(SERVICE_TOKENS.IMAGE_UPLOAD_SERVICE) const availableCurrencies = ref(['sat']) const loadingCurrencies = ref(false) @@ -179,9 +173,7 @@ const onSubmit = form.handleSubmit(async (formValues) => { ) } if (formValues.location) eventData.location = formValues.location - if (bannerImages.value.length > 0) { - eventData.banner = imageService.getImageUrl(bannerImages.value[0].alias) - } + if (formValues.banner) eventData.banner = formValues.banner if (formValues.currency) eventData.currency = formValues.currency if (formValues.amount_tickets) eventData.amount_tickets = formValues.amount_tickets if (formValues.price_per_ticket) eventData.price_per_ticket = formValues.price_per_ticket @@ -191,7 +183,6 @@ const onSubmit = form.handleSubmit(async (formValues) => { toastService.success('Event submitted!') resetForm() selectedCategories.value = [] - bannerImages.value = [] emit('update:open', false) emit('event-created') } catch (error) { @@ -206,7 +197,6 @@ const handleOpenChange = (open: boolean) => { if (!open && !isLoading.value) { resetForm() selectedCategories.value = [] - bannerImages.value = [] } emit('update:open', open) } @@ -306,25 +296,16 @@ const handleOpenChange = (open: boolean) => { - - - Banner image - - One poster image. Auto-resized to 1920px max edge and re-encoded as WebP. - - - + + + + Image URL + + + + + +
diff --git a/src/modules/base/components/ImageUpload.vue b/src/modules/base/components/ImageUpload.vue index 71f96af..d85817f 100644 --- a/src/modules/base/components/ImageUpload.vue +++ b/src/modules/base/components/ImageUpload.vue @@ -160,7 +160,7 @@ import { Camera, X, Loader2, AlertCircle, Image } from 'lucide-vue-next' import { Button } from '@/components/ui/button' import { Alert, AlertDescription } from '@/components/ui/alert' import { injectService, SERVICE_TOKENS } from '@/core/di-container' -import type { ImageUploadService, UploadedImage, CompressOptions } from '../services/ImageUploadService' +import type { ImageUploadService, UploadedImage } from '../services/ImageUploadService' interface ImageWithMetadata extends UploadedImage { isPrimary: boolean @@ -175,12 +175,6 @@ const props = defineProps<{ disabled?: boolean placeholder?: string allowCamera?: boolean - /** - * Client-side resize + re-encode before upload. Pass `true` for the - * service defaults (1920px max edge, WebP, ~1MB target), or an object - * to tune individual knobs. - */ - compress?: boolean | CompressOptions }>() const emit = defineEmits<{ @@ -385,8 +379,7 @@ const uploadFiles = async (files: File[]) => { try { const uploadOptions = { - maxSizeMB: maxSizeMB.value, - compress: props.compress, + maxSizeMB: maxSizeMB.value } // Upload files with better error handling diff --git a/src/modules/base/services/ImageUploadService.ts b/src/modules/base/services/ImageUploadService.ts index d045a11..cabe234 100644 --- a/src/modules/base/services/ImageUploadService.ts +++ b/src/modules/base/services/ImageUploadService.ts @@ -1,4 +1,3 @@ -import imageCompression from 'browser-image-compression' import { BaseService } from '@/core/base/BaseService' import type { ServiceMetadata } from '@/core/base/BaseService' import appConfig from '@/app.config' @@ -14,36 +13,10 @@ export interface UploadedImage { } } -/** - * Client-side compression knobs. Resize first, then re-encode. - * - * Defaults target a typical banner/poster: longest edge 1920px, WebP - * at q=0.85, aim for ~1MB output. EXIF orientation is handled by the - * library (canvas drawImage doesn't auto-rotate, which is the classic - * "portrait photo lands sideways" bug). - */ -export interface CompressOptions { - maxSizeMB?: number - maxWidthOrHeight?: number - initialQuality?: number - fileType?: 'image/webp' | 'image/jpeg' - useWebWorker?: boolean -} - export interface ImageUploadOptions { maxSizeMB?: number acceptedTypes?: string[] generateThumbnail?: boolean - /** Enable client-side resize + re-encode before upload. */ - compress?: boolean | CompressOptions -} - -const DEFAULT_COMPRESS: Required = { - maxSizeMB: 1, - maxWidthOrHeight: 1920, - initialQuality: 0.85, - fileType: 'image/webp', - useWebWorker: true, } export interface ImageUrlOptions { @@ -103,12 +76,8 @@ export class ImageUploadService extends BaseService { // Validate file this.validateFile(file, options) - // Optional client-side resize + re-encode. Keeps phone photos - // (5–8MB originals) from hitting pict-rs as full-resolution files. - const fileToUpload = await this.maybeCompress(file, options) - const formData = new FormData() - formData.append('images[]', fileToUpload) + formData.append('images[]', file) const response = await fetch(`${this.baseUrl}/image`, { method: 'POST', @@ -322,50 +291,6 @@ export class ImageUploadService extends BaseService { return alias } - /** - * Resize + re-encode the file when compression is requested. Returns - * the original file untouched when compression is off, the file is - * already smaller than the target, or when re-encoding produces a - * larger blob than the input (rare but possible on already-optimized - * sources). - * - * The library handles EXIF orientation internally and falls back to - * JPEG if the browser can't encode WebP. - */ - private async maybeCompress(file: File, options: ImageUploadOptions): Promise { - if (!options.compress) return file - - const opts: Required = { - ...DEFAULT_COMPRESS, - ...(typeof options.compress === 'object' ? options.compress : {}), - } - - // Skip if the source is already smaller than the target and within - // dimension limits (we can't cheaply check dimensions without - // decoding, so size-only is the pragmatic short-circuit). - if (file.size <= opts.maxSizeMB * 1024 * 1024 * 0.6) { - this.debug(`Skipping compression: ${file.name} already ${(file.size / 1024 / 1024).toFixed(2)}MB`) - return file - } - - try { - const compressed = await imageCompression(file, opts) - if (compressed.size >= file.size) { - this.debug(`Compression made ${file.name} larger; keeping original`) - return file - } - this.debug( - `Compressed ${file.name}: ${(file.size / 1024 / 1024).toFixed(2)}MB → ${(compressed.size / 1024 / 1024).toFixed(2)}MB` - ) - return compressed - } catch (err) { - // HEIC / encoder edge cases — fall back to the original file so the - // upload still succeeds. Server-side processing handles delivery. - this.debug('Compression failed, uploading original:', err) - return file - } - } - /** * Validate file before upload */