sdarbinyan/marketplaces
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(media): reusable media management

Browse Source 
Sprint 22.

- MediaAsset gains folder (flat) and MediaListParams gains folder/tag
  filters; MediaRepository.listFolders() derives the folder list from
  existing records
- upload validation: 10MB size cap, mime allow-list (jpeg/png/webp/gif/
  svg+xml/pdf), real error messages surfaced through MediaLibraryFacade
  instead of a generic swallowed string
- SVG uploads are sanitized (script tags and on*= attributes stripped)
  before storage
- raster images (excl. gif) are downscaled to a 2000px max dimension and
  re-encoded via canvas before storage - compression, not a crop UI
- tag editing (window.prompt, comma-separated) via
  MediaLibraryFacade.updateTags()
- MediaPickerComponent wired into Project Editor branding (logo, compact
  logo, favicon) alongside its existing category/product usage - confirmed
  no image fields exist on Static Pages or as a dedicated hero field to
  wire

docs/ADMIN.md updated with the new Sprint 22 section including the storage
abstraction note (MediaRepository was already the abstraction).

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
This commit is contained in:
sdarbinyan
2026-07-15 10:42:23 +04:00
parent 60c63a0d2a
commit 30afb5d778
14 changed files with 324 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
src/app/core/media/media-repository.ts
View File

@@ -1,8 +1,9 @@
import { MediaAsset, MediaListParams, MediaListResult } from './models/media-asset.model';
import { MediaAsset, MediaListParams, MediaListResult, MediaUploadOptions } from './models/media-asset.model';
export abstract class MediaRepository {
abstract list(params?: MediaListParams): Promise<MediaListResult>;
abstract upload(file: File): Promise<MediaAsset>;
abstract upload(file: File, options?: MediaUploadOptions): Promise<MediaAsset>;
abstract remove(id: string): Promise<void>;
abstract update(id: string, patch: Partial<Pick<MediaAsset, 'altText' | 'tags'>>): Promise<MediaAsset>;
abstract update(id: string, patch: Partial<Pick<MediaAsset, 'altText' | 'tags' | 'folder'>>): Promise<MediaAsset>;
abstract listFolders(): Promise<string[]>;
}

94
src/app/core/media/mock-media-repository.service.ts
View File

@@ -1,11 +1,15 @@
import { Injectable } from '@angular/core';
import { MediaRepository } from './media-repository';
import { MediaAsset, MediaListParams, MediaListResult } from './models/media-asset.model';
import { MediaAsset, MediaListParams, MediaListResult, MediaUploadOptions } from './models/media-asset.model';
const DB_NAME = 'media-manager';
const DB_VERSION = 1;
const STORE_NAME = 'assets';
const DEFAULT_PAGE_SIZE = 24;
const MAX_FILE_SIZE_BYTES = 10 * 1024 * 1024;
const MAX_IMAGE_DIMENSION = 2000;
const COMPRESS_QUALITY = 0.85;
const ALLOWED_MIME_TYPES = ['image/jpeg', 'image/png', 'image/webp', 'image/gif', 'image/svg+xml', 'application/pdf'];
interface StoredAssetRecord {
id: string;
@@ -16,6 +20,7 @@ interface StoredAssetRecord {
height?: number;
altText?: Record<string, string>;
tags?: string[];
folder?: string;
createdAt: string;
blob: Blob;
}
@@ -31,9 +36,10 @@ export class MockMediaRepository extends MediaRepository {
const search = (params.search ?? '').trim().toLowerCase();
const records = await this.getAllRecords();
const filtered = search
? records.filter(record => record.filename.toLowerCase().includes(search))
: records;
const filtered = records
.filter(record => !search || record.filename.toLowerCase().includes(search))
.filter(record => !params.folder || record.folder === params.folder)
.filter(record => !params.tag || (record.tags ?? []).includes(params.tag!));
filtered.sort((a, b) => b.createdAt.localeCompare(a.createdAt));
@@ -46,17 +52,21 @@ export class MockMediaRepository extends MediaRepository {
};
}
async upload(file: File): Promise<MediaAsset> {
const dimensions = await this.readImageDimensions(file);
async upload(file: File, options: MediaUploadOptions = {}): Promise<MediaAsset> {
this.validateFile(file);
const blob = await this.prepareBlob(file);
const dimensions = await this.readImageDimensions(blob, file.type);
const record: StoredAssetRecord = {
id: crypto.randomUUID(),
filename: file.name,
mimeType: file.type,
size: file.size,
size: blob.size,
width: dimensions?.width,
height: dimensions?.height,
folder: options.folder || undefined,
tags: options.tags,
createdAt: new Date().toISOString(),
blob: file,
blob,
};
const db = await this.openDb();
@@ -65,6 +75,67 @@ export class MockMediaRepository extends MediaRepository {
return this.toAsset(record);
}
async listFolders(): Promise<string[]> {
const records = await this.getAllRecords();
return [...new Set(records.map(record => record.folder).filter((folder): folder is string => !!folder))].sort();
}
private validateFile(file: File): void {
if (file.size > MAX_FILE_SIZE_BYTES) {
throw new Error(`File exceeds the ${MAX_FILE_SIZE_BYTES / (1024 * 1024)}MB limit.`);
}
if (!ALLOWED_MIME_TYPES.includes(file.type)) {
throw new Error(`Unsupported file type: ${file.type || 'unknown'}.`);
}
}
private async prepareBlob(file: File): Promise<Blob> {
if (file.type === 'image/svg+xml') {
return this.sanitizeSvg(file);
}
if (file.type === 'image/gif') {
return file;
}
if (file.type.startsWith('image/')) {
return this.compressImage(file);
}
return file;
}
/** Strips <script> elements and on*="..." event-handler attributes before storing untrusted SVG markup. */
private async sanitizeSvg(file: File): Promise<Blob> {
const text = await file.text();
const sanitized = text
.replace(/<script[\s\S]*?<\/script>/gi, '')
.replace(/\son\w+\s*=\s*"[^"]*"/gi, '')
.replace(/\son\w+\s*=\s*'[^']*'/gi, '');
return new Blob([sanitized], { type: 'image/svg+xml' });
}
private async compressImage(file: File): Promise<Blob> {
try {
const bitmap = await createImageBitmap(file);
const scale = Math.min(1, MAX_IMAGE_DIMENSION / Math.max(bitmap.width, bitmap.height));
const width = Math.round(bitmap.width * scale);
const height = Math.round(bitmap.height * scale);
const canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
if (!ctx) {
bitmap.close();
return file;
}
ctx.drawImage(bitmap, 0, 0, width, height);
bitmap.close();
const outputType = file.type === 'image/png' ? 'image/png' : 'image/jpeg';
const blob = await new Promise<Blob | null>(resolve => canvas.toBlob(resolve, outputType, COMPRESS_QUALITY));
return blob ?? file;
} catch {
return file;
}
}
async remove(id: string): Promise<void> {
const db = await this.openDb();
await this.runTransaction(db, 'readwrite', store => store.delete(id));
@@ -97,6 +168,7 @@ export class MockMediaRepository extends MediaRepository {
height: record.height,
altText: record.altText,
tags: record.tags,
folder: record.folder,
createdAt: record.createdAt,
};
}
@@ -119,12 +191,12 @@ export class MockMediaRepository extends MediaRepository {
}
}
private async readImageDimensions(file: File): Promise<{ width: number; height: number } | undefined> {
if (!file.type.startsWith('image/')) {
private async readImageDimensions(blob: Blob, mimeType: string): Promise<{ width: number; height: number } | undefined> {
if (!mimeType.startsWith('image/') || mimeType === 'image/svg+xml') {
return undefined;
}
try {
const bitmap = await createImageBitmap(file);
const bitmap = await createImageBitmap(blob);
const dimensions = { width: bitmap.width, height: bitmap.height };
bitmap.close();
return dimensions;

8
src/app/core/media/models/media-asset.model.ts
View File

@@ -9,6 +9,7 @@ export interface MediaAsset {
height?: number;
altText?: Record<string, string>;
tags?: string[];
folder?: string;
createdAt: string;
}
@@ -16,6 +17,13 @@ export interface MediaListParams {
page?: number;
pageSize?: number;
search?: string;
folder?: string;
tag?: string;
}
export interface MediaUploadOptions {
folder?: string;
tags?: string[];
}
export interface MediaListResult {

30
src/app/features/backoffice/media/facade/media-library.facade.ts
View File

@@ -1,6 +1,6 @@
import { Injectable, inject, signal } from '@angular/core';
import { MediaRepository } from '../../../../core/media/media-repository';
import { MediaAsset } from '../../../../core/media/models/media-asset.model';
import { MediaAsset, MediaUploadOptions } from '../../../../core/media/models/media-asset.model';
const PAGE_SIZE = 24;
@@ -15,6 +15,8 @@ export class MediaLibraryFacade {
readonly error = signal<string | null>(null);
readonly search = signal('');
readonly page = signal(1);
readonly folder = signal<string | null>(null);
readonly folders = signal<string[]>([]);
async load(): Promise<void> {
this.loading.set(true);
@@ -24,9 +26,11 @@ export class MediaLibraryFacade {
page: this.page(),
pageSize: PAGE_SIZE,
search: this.search(),
folder: this.folder() ?? undefined,
});
this.items.set(result.items);
this.total.set(result.total);
this.folders.set(await this.repository.listFolders());
} catch {
this.error.set('Failed to load media assets.');
} finally {
@@ -40,25 +44,41 @@ export class MediaLibraryFacade {
void this.load();
}
setFolder(value: string | null): void {
this.folder.set(value);
this.page.set(1);
void this.load();
}
setPage(page: number): void {
this.page.set(page);
void this.load();
}
async upload(file: File): Promise<void> {
async upload(file: File, options: MediaUploadOptions = {}): Promise<void> {
this.uploading.set(true);
this.error.set(null);
try {
await this.repository.upload(file);
await this.repository.upload(file, { folder: this.folder() ?? undefined, ...options });
this.page.set(1);
await this.load();
} catch {
this.error.set('Failed to upload file.');
} catch (error: unknown) {
this.error.set(error instanceof Error ? error.message : 'Failed to upload file.');
} finally {
this.uploading.set(false);
}
}
async updateTags(id: string, tags: string[]): Promise<void> {
this.error.set(null);
try {
await this.repository.update(id, { tags });
await this.load();
} catch {
this.error.set('Failed to update tags.');
}
}
async remove(id: string): Promise<void> {
this.error.set(null);
try {

25
src/app/features/backoffice/media/media-library-page.component.html
View File

@@ -7,10 +7,17 @@
(ngModelChange)="facade.setSearch($event)"
[placeholder]="'mediaLibrary.searchPlaceholder' | translate"
/>
<select [ngModel]="facade.folder()" (ngModelChange)="facade.setFolder($event || null)">
<option [ngValue]="null">{{ 'mediaLibrary.allFolders' | translate }}</option>
@for (folder of facade.folders(); track folder) {
<option [ngValue]="folder">{{ folder }}</option>
}
</select>
<app-button variant="secondary" (click)="createFolder()">{{ 'mediaLibrary.newFolder' | translate }}</app-button>
<input
#fileInput
type="file"
accept="image/*,application/pdf"
accept="image/jpeg,image/png,image/webp,image/gif,image/svg+xml,application/pdf"
hidden
(change)="onFileSelected($event)"
/>
@@ -20,6 +27,10 @@
</div>
</div>
@if (facade.error()) {
<p class="media-page__error">{{ facade.error() }}</p>
}
@if (facade.loading()) {
<div class="media-page__grid">
@for (i of [1, 2, 3, 4, 5, 6]; track i) {
@@ -44,10 +55,16 @@
<div class="media-tile__meta">
<span class="media-tile__filename">{{ asset.filename }}</span>
<span class="media-tile__size">{{ formatSize(asset.size) }}</span>
@if (asset.tags?.length) {
<span class="media-tile__tags">{{ asset.tags!.join(', ') }}</span>
}
</div>
<div class="media-tile__row">
<app-button variant="secondary" size="sm" (click)="editTags(asset)">{{ 'mediaLibrary.editTags' | translate }}</app-button>
<app-button variant="danger" size="sm" (click)="confirmDelete(asset)">
{{ 'mediaLibrary.delete' | translate }}
</app-button>
</div>
<app-button variant="danger" size="sm" [fullWidth]="true" (click)="confirmDelete(asset)">
{{ 'mediaLibrary.delete' | translate }}
</app-button>
</div>
</app-card>
}

24
src/app/features/backoffice/media/media-library-page.component.scss
View File

@@ -73,3 +73,27 @@
gap: 8px;
margin-top: 16px;
}
.media-page__error {
color: var(--color-danger, #d9433c);
font-size: 0.85rem;
margin: 0;
}
.media-tile__tags {
font-size: 0.7rem;
color: var(--text-secondary, #6b7280);
font-style: italic;
}
.media-tile__row {
display: flex;
gap: 8px;
}
.media-page__toolbar-actions select {
min-height: 40px;
padding: 0 10px;
border: 1px solid var(--border-color, #d3dad9);
border-radius: 10px;
}

18
src/app/features/backoffice/media/media-library-page.component.ts
View File

@@ -57,6 +57,16 @@ export class MediaLibraryPageComponent implements OnInit {
await this.facade.upload(file);
}
protected async editTags(asset: MediaAsset): Promise<void> {
const current = (asset.tags ?? []).join(', ');
const next = window.prompt('Tags (comma-separated):', current);
if (next === null) {
return;
}
const tags = next.split(',').map(tag => tag.trim()).filter(Boolean);
await this.facade.updateTags(asset.id, tags);
}
protected confirmDelete(asset: MediaAsset): void {
this.pendingDelete.set(asset);
}
@@ -74,6 +84,14 @@ export class MediaLibraryPageComponent implements OnInit {
this.pendingDelete.set(null);
}
protected createFolder(): void {
const name = window.prompt('New folder name:');
if (!name?.trim()) {
return;
}
this.facade.setFolder(name.trim());
}
protected formatSize(bytes: number): string {
if (bytes < 1024) {
return `${bytes} B`;

16
src/app/features/project-editor/sections/branding-section.component.html
View File

@@ -3,17 +3,27 @@
<h2>{{ 'builder.branding' | translate }}</h2>
<div class="editor-grid two">
<app-form-field [label]="'builder.logo' | translate" [hint]="'builder.logoDesc' | translate">
<app-input [ngModel]="bootstrap.branding.logoUrl" (ngModelChange)="updateField('logoUrl', $event)" />
<div class="media-field-row">
<app-input [ngModel]="bootstrap.branding.logoUrl" (ngModelChange)="updateField('logoUrl', $event)" />
<app-button variant="secondary" size="sm" (click)="openMediaPicker('logoUrl')">{{ 'adminCategories.chooseImage' | translate }}</app-button>
</div>
</app-form-field>
<app-form-field [label]="'builder.smallLogo' | translate" [hint]="'builder.smallLogoDesc' | translate">
<app-input [ngModel]="bootstrap.branding.logoCompactUrl || ''" (ngModelChange)="updateField('logoCompactUrl', $event)" />
<div class="media-field-row">
<app-input [ngModel]="bootstrap.branding.logoCompactUrl || ''" (ngModelChange)="updateField('logoCompactUrl', $event)" />
<app-button variant="secondary" size="sm" (click)="openMediaPicker('logoCompactUrl')">{{ 'adminCategories.chooseImage' | translate }}</app-button>
</div>
</app-form-field>
<app-form-field [label]="'builder.favicon' | translate" [hint]="'builder.faviconDesc' | translate">
<app-input [ngModel]="bootstrap.branding.faviconUrl" (ngModelChange)="updateField('faviconUrl', $event)" />
<div class="media-field-row">
<app-input [ngModel]="bootstrap.branding.faviconUrl" (ngModelChange)="updateField('faviconUrl', $event)" />
<app-button variant="secondary" size="sm" (click)="openMediaPicker('faviconUrl')">{{ 'adminCategories.chooseImage' | translate }}</app-button>
</div>
</app-form-field>
<app-form-field [label]="'builder.marketplaceTitle' | translate" [hint]="'builder.marketplaceTitleDesc' | translate">
<app-input [ngModel]="bootstrap.seo.default.title" (ngModelChange)="updateMarketplaceTitle($event)" />
</app-form-field>
</div>
<app-media-picker [open]="mediaPickerOpen" (selected)="onImagePicked($event)" (closed)="mediaPickerOpen = false" />
</section>
}

22
src/app/features/project-editor/sections/branding-section.component.ts
View File

@@ -4,11 +4,16 @@ import { ProjectEditorFacade } from '../facade/project-editor.facade';
import { TranslatePipe } from '../../../i18n/translate.pipe';
import { InputComponent } from '../../../shared/ui/input/input.component';
import { FormFieldComponent } from '../../../shared/ui/form-field/form-field.component';
import { ButtonComponent } from '../../../shared/ui/button/button.component';
import { MediaPickerComponent } from '../../../shared/media/media-picker/media-picker.component';
import { MediaAsset } from '../../../core/media/models/media-asset.model';
type BrandingImageField = 'logoUrl' | 'logoCompactUrl' | 'faviconUrl';
@Component({
selector: 'app-project-editor-branding-section',
standalone: true,
imports: [FormsModule, TranslatePipe, InputComponent, FormFieldComponent],
imports: [FormsModule, TranslatePipe, InputComponent, FormFieldComponent, ButtonComponent, MediaPickerComponent],
templateUrl: './branding-section.component.html',
styleUrls: ['./section.shared.scss'],
changeDetection: ChangeDetectionStrategy.OnPush
@@ -17,6 +22,9 @@ export class ProjectEditorBrandingSectionComponent {
private readonly facade = inject(ProjectEditorFacade);
readonly bootstrap = this.facade.bootstrap;
protected mediaPickerOpen = false;
private mediaPickerTarget: BrandingImageField | null = null;
updateField<K extends 'logoUrl' | 'logoCompactUrl' | 'faviconUrl' | 'brandName'>(key: K, value: string): void {
this.facade.updateBootstrap(current => ({
...current,
@@ -24,6 +32,18 @@ export class ProjectEditorBrandingSectionComponent {
}));
}
openMediaPicker(target: BrandingImageField): void {
this.mediaPickerTarget = target;
this.mediaPickerOpen = true;
}
onImagePicked(asset: MediaAsset): void {
if (this.mediaPickerTarget) {
this.updateField(this.mediaPickerTarget, asset.url);
}
this.mediaPickerOpen = false;
}
updateMarketplaceTitle(value: string): void {
this.facade.updateBootstrap(current => ({
...current,

7
src/app/features/project-editor/sections/section.shared.scss
View File

@@ -11,6 +11,13 @@
gap: 14px;
}
.media-field-row {
display: flex;
gap: 8px;
align-items: center;
}
.media-field-row app-input { flex: 1; }
.editor-grid {
display: grid;
gap: 12px;

6
src/app/shared/media/media-picker/media-picker.component.html
View File

@@ -14,7 +14,7 @@
<input
#fileInput
type="file"
accept="image/*,application/pdf"
accept="image/jpeg,image/png,image/webp,image/gif,image/svg+xml,application/pdf"
hidden
(change)="onFileSelected($event)"
/>
@@ -23,6 +23,10 @@
</app-button>
</div>
@if (facade.error()) {
<p class="media-picker__error">{{ facade.error() }}</p>
}
@if (facade.loading()) {
<div class="media-picker__grid">
@for (i of [1, 2, 3, 4]; track i) {

6
src/app/shared/media/media-picker/media-picker.component.scss
View File

@@ -34,6 +34,12 @@
padding: 6px;
}
.media-picker__error {
color: var(--color-danger, #d9433c);
font-size: 0.85rem;
margin: 0;
}
.media-picker__filename {
display: block;
font-size: 0.75rem;