feat: show font name & preview font in branding (#6026)

* feat: add fontname package and draft

* feat: change back delete visibility

* feat: replace fontname lib with opentype.js

* feat: dynamic font preview also for font name

---------

Co-authored-by: Max Peintner <max@caos.ch>

console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.html

@@ -492,7 +492,9 @@
           </cnsl-info-section>
           <div class="font-preview" *ngIf="previewData.fontUrl; else addFontButton">
             <mat-icon class="icon">text_fields</mat-icon>
-
+            <span class="font-name" [ngStyle]="fontName ? { 'font-family': 'brandingFont' } : { '': '' }">{{
+              fontName
+            }}</span>
             <span class="fill-space"></span>
 
             <button
@@ -634,6 +636,7 @@
           class="preview"
           [ngClass]="{ darkmode: theme === Theme.DARK, lightmode: theme === Theme.LIGHT }"
           [policy]="view === View.PREVIEW ? previewData : data"
+          [ngStyle]="fontName ? { 'font-family': 'brandingFont' } : { '': '' }"
         >
         </cnsl-preview>
       </div>

console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.scss

@@ -243,8 +243,6 @@
           }
 
           .font-preview {
-            height: 70px;
-            width: 70px;
             display: flex;
             align-items: center;
             justify-content: center;
@@ -252,22 +250,17 @@
             margin-bottom: 1rem;
             border: 1px solid map-get($foreground, divider);
             position: relative;
+            padding: 1rem 0.5rem 1rem 0.75rem;
 
-            .icon {
-              position: absolute;
-              top: 50%;
-              left: 50%;
-              transform: translateX(-50%) translateY(-50%);
+            .font-name {
+              margin-left: 0.5rem;
+              font-size: 16px;
             }
 
             .dl-btn {
               z-index: 2;
-              position: absolute;
-              right: 0;
-              top: 0;
               cursor: pointer;
               visibility: hidden;
-              transform: translateX(50%) translateY(-50%);
             }
 
             &:hover {

console/src/app/modules/policies/private-labeling-policy/private-labeling-policy.component.ts

@@ -31,6 +31,7 @@ import {
 } from 'src/app/services/theme.service';
 import { ToastService } from 'src/app/services/toast.service';
 
+import * as opentype from 'opentype.js';
 import { InfoSectionType } from '../../info-section/info-section.component';
 import { WarnDialogComponent } from '../../warn-dialog/warn-dialog.component';
 import { PolicyComponentServiceType } from '../policy-component-types.enum';
@@ -88,6 +89,8 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
   public ColorType: any = ColorType;
   public AssetType: any = AssetType;
 
+  public fontName = '';
+
   public refreshPreview: EventEmitter<void> = new EventEmitter();
   public org!: Org.AsObject;
   public InfoSectionType: any = InfoSectionType;
@@ -180,6 +183,10 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
       if (file) {
         const formData = new FormData();
         formData.append('file', file);
+
+        this.getFontName(file);
+        this.previewNewFont(file);
+
         switch (this.serviceType) {
           case PolicyComponentServiceType.MGMT:
             return this.handleFontUploadPromise(this.assetService.upload(AssetEndpoint.MGMTFONT, formData, this.org.id));
@@ -199,6 +206,7 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
             this.getPreviewData().then((data) => {
               if (data.policy) {
                 this.previewData = data.policy;
+                this.fontName = '';
               }
             });
           }, 1000);
@@ -374,6 +382,11 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
       .then((data) => {
         if (data.policy) {
           this.previewData = data.policy;
+          if (this.previewData?.fontUrl) {
+            this.fetchFontMetadataAndPreview(this.previewData.fontUrl);
+          } else {
+            this.fontName = 'Could not parse font name';
+          }
           this.loading = false;
         }
       })
@@ -385,6 +398,11 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
       .then((data) => {
         if (data.policy) {
           this.data = data.policy;
+          if (this.data?.fontUrl) {
+            this.fetchFontMetadataAndPreview(this.data?.fontUrl);
+          } else {
+            this.fontName = 'Could not parse font name';
+          }
           this.loading = false;
         }
       })
@@ -678,6 +696,45 @@ export class PrivateLabelingPolicyComponent implements OnInit, OnDestroy {
       });
   }
 
+  private fetchFontMetadataAndPreview(url: string): void {
+    fetch(url)
+      .then((res) => res.blob())
+      .then((blob) => {
+        this.getFontName(blob);
+        this.previewNewFont(blob);
+      });
+  }
+
+  private getFontName(blob: Blob): void {
+    const reader = new FileReader();
+    reader.onload = (e) => {
+      if (e.target && e.target.result) {
+        try {
+          const font = opentype.parse(e.target.result);
+          this.fontName = font.names.fullName['en'];
+        } catch (e) {
+          this.fontName = 'Could not parse font name';
+        }
+      }
+    };
+    reader.readAsArrayBuffer(blob);
+  }
+
+  private previewNewFont(blob: Blob): void {
+    const reader = new FileReader();
+
+    reader.onload = (e) => {
+      if (e.target) {
+        let customFont = new FontFace('brandingFont', `url(${e.target.result})`);
+        // typescript complains that add is not found but
+        // indeed it is https://developer.mozilla.org/en-US/docs/Web/API/FontFaceSet/add
+        // @ts-ignore
+        document.fonts.add(customFont);
+      }
+    };
+    reader.readAsDataURL(blob);
+  }
+
   // /**
   //  *  defaults to false because urls are distinct anyway
   //  */