Asset View

functions/package.json

@@ -24,12 +24,12 @@
     "cors": "^2.8.5",
     "deepl-node": "^1.15.0",
     "express": "^4.21.2",
-    "firebase-admin": "^13.0.1",
-    "firebase-functions": "^6.1.1",
+    "firebase-admin": "^13.0.2",
+    "firebase-functions": "^6.2.0",
     "sharp": "^0.33.5",
     "stripe": "^17.4.0",
-    "uuid": "^11.0.3",
-    "zod": "^3.23.8"
+    "uuid": "^11.0.5",
+    "zod": "^3.24.1"
   },
   "devDependencies": {
     "openapi3-ts": "^4.4.0",

functions/src/contents.ts

@@ -317,6 +317,19 @@ const onContentWrite = onDocumentWritten('spaces/{spaceId}/contents/{contentId}'
   }
 
   await findContentsHistory(spaceId, contentId).add(addHistory);
+  const countSnapshot = await findContentsHistory(spaceId, contentId).count().get();
+  const { count } = countSnapshot.data();
+  if (count > 30) {
+    const historySnapshot = await findContentsHistory(spaceId, contentId)
+      .orderBy('createdAt', 'asc')
+      .limit(count - 30)
+      .get();
+    if (historySnapshot.size > 0) {
+      const batch = firestoreService.batch();
+      historySnapshot.docs.forEach(doc => batch.delete(doc.ref));
+      await batch.commit();
+    }
+  }
   return;
 });
 

functions/src/models/content.zod.ts

@@ -18,7 +18,7 @@ export const contentBaseSchema = z.object({
 export const contentDocumentSchema = contentBaseSchema.extend({
   kind: z.literal(ContentKind.DOCUMENT),
   schema: z.string(),
-  data: contentDataSchema.optional(),
+  data: z.string().optional().or(contentDataSchema.optional()),
 });
 
 export const contentFolderSchema = contentBaseSchema.extend({

functions/src/services/open-api.service.ts

@@ -692,6 +692,16 @@ export function generateOpenApi(schemasById: Map<string, Schema>): OpenAPIObject
                 example: false,
               },
             },
+            {
+              name: 'thumbnail',
+              in: 'query',
+              description: 'In case you have animated image like WebP/Gif, and you wish to generate non animated thumbnail.',
+              required: false,
+              schema: {
+                type: 'boolean',
+                example: false,
+              },
+            },
           ],
           responses: {
             '200': {

functions/src/translations.ts

@@ -3,7 +3,7 @@ import { HttpsError, onCall } from 'firebase-functions/v2/https';
 import { onDocumentCreated, onDocumentWritten } from 'firebase-functions/v2/firestore';
 import { FieldValue, WithFieldValue } from 'firebase-admin/firestore';
 import { canPerform } from './utils/security-utils';
-import { bucket } from './config';
+import { bucket, firestoreService } from './config';
 import { PublishTranslationsData, Space, Translation, TranslationHistory, TranslationHistoryType, UserPermission } from './models';
 import { findSpaceById, findTranslations, findTranslationsHistory } from './services';
 import { translateCloud } from './services/translate.service';
@@ -147,6 +147,19 @@ const onWriteToHistory = onDocumentWritten('spaces/{spaceId}/translations/{trans
     addHistory.name = afterData.updatedBy.name;
   }
   await findTranslationsHistory(spaceId).add(addHistory);
+  const countSnapshot = await findTranslationsHistory(spaceId).count().get();
+  const { count } = countSnapshot.data();
+  if (count > 30) {
+    const historySnapshot = await findTranslationsHistory(spaceId)
+      .orderBy('createdAt', 'asc')
+      .limit(count - 30)
+      .get();
+    if (historySnapshot.size > 0) {
+      const batch = firestoreService.batch();
+      historySnapshot.docs.forEach(doc => batch.delete(doc.ref));
+      await batch.commit();
+    }
+  }
   return;
 });
 

functions/src/v1.ts

@@ -347,7 +347,7 @@ expressApp.get('/api/v1/spaces/:spaceId/assets/:assetId', async (req, res) => {
   logger.info('v1 spaces asset params: ' + JSON.stringify(req.params));
   logger.info('v1 spaces asset query: ' + JSON.stringify(req.query));
   const { spaceId, assetId } = req.params;
-  const { w: width, download } = req.query;
+  const { w: width, download, thumbnail } = req.query;
 
   const assetFile = bucket.file(`spaces/${spaceId}/assets/${assetId}/original`);
   const [exists] = await assetFile.exists();
@@ -362,15 +362,25 @@ expressApp.get('/api/v1/spaces/:spaceId/assets/:assetId', async (req, res) => {
       if (asset.type === 'image/webp' || asset.type === 'image/gif') {
         // possible animated or single frame webp/gif
         const [file] = await assetFile.download();
-        const sharpFile = sharp(file);
+        let sharpFile = sharp(file);
         const sharpFileMetadata = await sharpFile.metadata();
-        if (sharpFileMetadata.pages) {
-          // animated webp/gif
-          await assetFile.download({ destination: tempFilePath });
-        } else {
+        const isAnimated = sharpFileMetadata.pages !== undefined;
+        if (thumbnail && isAnimated) {
+          // Thumbnail with Animation: Remove animations, to reduce load
+          filename = `${asset.name}-w${width}-thumbnail${asset.extension}`;
+          sharpFile = sharp(file, { page: 0, pages: 1 });
+          await sharpFile.resize(parseInt(width.toString(), 10)).toFile(tempFilePath);
+        } else if (thumbnail && !isAnimated) {
+          // thumbnail without Animation
+          filename = `${asset.name}-w${width}-thumbnail${asset.extension}`;
           // single frame webp/gif
-          filename = `${asset.name}-w${width}${asset.extension}`;
           await sharpFile.resize(parseInt(width.toString(), 10)).toFile(tempFilePath);
+        } else {
+          // Animated
+          filename = `${asset.name}-w${width}${asset.extension}`;
+          // animated webp/gif
+          // TODO no way now to resize animated files
+          await assetFile.download({ destination: tempFilePath });
         }
       } else if (asset.type === 'image/svg+xml') {
         // svg, cannot resize

src/app/app.module.ts

@@ -97,7 +97,8 @@ import { provideRemoteConfig, getRemoteConfig } from '@angular/fire/remote-confi
       useValue: (config: ImageLoaderConfig) => {
         // optimize image for API assets
         if (config.src.startsWith('/api/') && config.width) {
-          return `${config.src}?w=${config.width}`;
+          const thumbnailParam = config.loaderParams && config.loaderParams['thumbnail'] ? '&thumbnail=true' : '';
+          return `${config.src}?w=${config.width}${thumbnailParam}`;
         } else {
           return config.src;
         }

src/app/features/admin/settings/ui/ui.component.html

@@ -2,10 +2,12 @@
   <mat-toolbar-row>
     User Interface
     <span class="spacer"></span>
-    <button mat-stroked-button color="primary" [disabled]="!form.valid" (click)="save()">
-      <mat-icon>save</mat-icon>
-      Save
-    </button>
+    <div class="actions">
+      <button mat-stroked-button color="primary" [disabled]="!form.valid" (click)="save()">
+        <mat-icon>save</mat-icon>
+        Save
+      </button>
+    </div>
   </mat-toolbar-row>
 </mat-toolbar>
 

src/app/features/admin/spaces/spaces.component.html

@@ -2,10 +2,12 @@
   <mat-toolbar-row>
     Spaces
     <span class="spacer"></span>
-    <button mat-stroked-button color="primary" (click)="openAddDialog()">
-      <mat-icon>add</mat-icon>
-      Add Space
-    </button>
+    <div class="actions">
+      <button mat-stroked-button color="primary" (click)="openAddDialog()">
+        <mat-icon>add</mat-icon>
+        Add Space
+      </button>
+    </div>
   </mat-toolbar-row>
 </mat-toolbar>
 @if (isLoading) {
@@ -58,5 +60,5 @@
     <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
     <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
   </mat-table>
-  <mat-paginator></mat-paginator>
+  <mat-paginator class="mat-paginator-sticky"></mat-paginator>
 </div>

src/app/features/admin/users/users.component.html

@@ -2,15 +2,17 @@
   <mat-toolbar-row>
     Users
     <span class="spacer"></span>
-    <button mat-stroked-button color="accent" matTooltip="Synchronize Users with Database." (click)="sync()">
-      <ll-icon [animate]="isSyncLoading()" start="sync" end="sync" />
-      Sync
-    </button>
+    <div class="actions">
+      <button mat-stroked-button color="accent" matTooltip="Synchronize Users with Database." (click)="sync()">
+        <ll-icon [animate]="isSyncLoading()" start="sync" end="sync" />
+        Sync
+      </button>
 
-    <button mat-stroked-button color="primary" (click)="inviteDialog()">
-      <mat-icon>person_add</mat-icon>
-      Invite
-    </button>
+      <button mat-stroked-button color="primary" (click)="inviteDialog()">
+        <mat-icon>person_add</mat-icon>
+        Invite
+      </button>
+    </div>
   </mat-toolbar-row>
 </mat-toolbar>
 @if (isLoading()) {
@@ -102,5 +104,5 @@
     <mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></mat-header-row>
     <mat-row *matRowDef="let row; columns: displayedColumns"></mat-row>
   </mat-table>
-  <mat-paginator></mat-paginator>
+  <mat-paginator class="mat-paginator-sticky"></mat-paginator>
 </div>

src/app/features/features.component.ts

@@ -12,7 +12,6 @@ import {
   signal,
   Signal,
 } from '@angular/core';
-import { Observable } from 'rxjs';
 
 import { LocalStorageService } from '@core/core.module';
 import { Auth, signOut } from '@angular/fire/auth';
@@ -91,9 +90,6 @@ export class FeaturesComponent implements OnInit {
     { link: 'https://github.com/Lessify/localess/issues', label: 'Feedback', icon: 'forum' },
   ];
 
-  stickyHeader$: Observable<boolean> | undefined;
-  language$: Observable<string> | undefined;
-
   private destroyRef = inject(DestroyRef);
   spaceStore = inject(SpaceStore);
   userStore = inject(UserStore);

src/app/features/spaces/assets/add-folder-dialog/add-folder-dialog.component.html

@@ -4,8 +4,8 @@ <h2 mat-dialog-title>Create new Folder</h2>
   <form [formGroup]="form">
     <mat-form-field>
       <mat-label>Name</mat-label>
-      <input matInput type="text" formControlName="name" maxlength="50" autocomplete="off" />
-      <mat-hint align="end">{{ form.controls['name'].value?.length || 0 }}/50</mat-hint>
+      <input matInput type="text" formControlName="name" maxlength="100" autocomplete="off" />
+      <mat-hint align="end">{{ form.controls['name'].value?.length || 0 }}/100</mat-hint>
       @if (form.controls['name'].errors; as errors) {
         <mat-error>{{ fe.errors(errors) }}</mat-error>
       }