Files
cinny/src/app/utils/imageCompression.ts
T
jaredandClaude Sonnet 4.6 c6760b0ba4 fix: schedule button, compression visibility, activity log, insights overflow, bookmarks UI
Schedule message: modal now always opens (even with empty composer);
includes its own message textarea pre-filled from editor content;
removed null-content early-return guard from handleScheduleClick;
fixed error text to use color.Critical.Main not CSS var

Image compression: removed 200KB size threshold — checkbox now shows
for all JPEG/PNG uploads (not just large ones); 'no significant saving'
message handles already-small files gracefully

Activity log: auto-paginate on mount — state events are absent from
initial sync window, so the log was always empty until Load More was
clicked manually

Insights summary: Text size H4→H5 with toLocaleString() formatting and
overflow:ellipsis so large numbers don't push tiles off screen

Bookmarks panel: replaced var(--bg-*) CSS vars (undefined in folds
themes) with color.Surface/SurfaceVariant/Primary folds tokens; added
left accent border on message preview block, count badge, clear button
in search, improved empty state, cleaner button hierarchy

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-06-04 12:07:12 -04:00

69 lines
1.8 KiB
TypeScript

export type CompressionResult = {
blob: Blob;
originalSize: number;
compressedSize: number;
width: number;
height: number;
};
const COMPRESSIBLE_TYPES = ['image/jpeg', 'image/png'];
/** Returns true if this file type can be compressed (JPEG or PNG, any size). */
export function isCompressible(file: File): boolean {
return COMPRESSIBLE_TYPES.includes(file.type);
}
/**
* Compress an image file via canvas.toBlob.
* Returns null if the file type is not compressible (GIF, SVG, WebP, video, audio, etc.).
*/
export async function compressImage(file: File, quality = 0.82): Promise<CompressionResult | null> {
if (!COMPRESSIBLE_TYPES.includes(file.type)) return null;
const img = await loadImage(file);
const canvas = document.createElement('canvas');
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
const ctx = canvas.getContext('2d')!;
ctx.drawImage(img, 0, 0);
return new Promise((resolve) => {
canvas.toBlob(
(blob) => {
if (!blob) {
resolve(null);
return;
}
resolve({
blob,
originalSize: file.size,
compressedSize: blob.size,
width: img.naturalWidth,
height: img.naturalHeight,
});
},
'image/jpeg',
quality,
);
});
}
function loadImage(file: File): Promise<HTMLImageElement> {
return new Promise((resolve, reject) => {
const url = URL.createObjectURL(file);
const img = new Image();
img.onload = () => {
URL.revokeObjectURL(url);
resolve(img);
};
img.onerror = reject;
img.src = url;
});
}
export function formatFileSize(bytes: number): string {
if (bytes < 1024) return `${bytes} B`;
if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
}