#25959 Adding Progress on image broken

dotCMS · Oct 13, 2023 · 74bcb91 · 74bcb91
1 parent c6d6019
commit 74bcb91
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 12 deletions.
diff --git a/...tcms-ui/src/app/portlets/dot-edit-page/content/services/html/dot-seo-meta-tags.service.ts b/...tcms-ui/src/app/portlets/dot-edit-page/content/services/html/dot-seo-meta-tags.service.ts
@@ -1,4 +1,4 @@
-import { Observable, forkJoin, from, of, throwError } from 'rxjs';
+import { Observable, forkJoin, from, of } from 'rxjs';
 
 import { Injectable } from '@angular/core';
 
@@ -767,8 +767,11 @@ export class DotSeoMetaTagsService {
     getImageFileSize(imageUrl: string): Observable<DotCMSTempFile | ImageMetaData> {
         return from(fetch(imageUrl)).pipe(
             mergeMap((response) => {
-                if (response.status === 404) {
-                    throwError('Image not found');
+                if (response.status == 404) {
+                    return of({
+                        size: 0,
+                        url: IMG_NOT_FOUND_KEY
+                    });
                 }
 
                 return response.blob();
@@ -779,14 +782,7 @@ export class DotSeoMetaTagsService {
                     url: imageUrl
                 });
             }),
-            catchError((error) => {
-                if (error.message === 'Failed to fetch') {
-                    return of({
-                        length: 0,
-                        url: IMG_NOT_FOUND_KEY
-                    });
-                }
-
+            catchError(() => {
                 return from(this.dotUploadService.uploadFile({ file: imageUrl })).pipe(
                     mergeMap((uploadedFile) => {
                         if (uploadedFile) {
@@ -795,7 +791,6 @@ export class DotSeoMetaTagsService {
                     }),
                     catchError((uploadError) => {
                         console.warn('Error while uploading:', uploadError);
-                        // You can handle the error from the upload service here
 
                         return of({
                             length: 0,

diff --git a/...ets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.html b/...ets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.html
@@ -36,6 +36,7 @@
                     <img
                         class="results-seo-tool__preview-image"
                         [src]="mainPreview.image"
+                        (error)="onImageError()"
                         alt="preview image" />
                     <div class="results-seo-tool__preview">
                         <span data-testId="page-hostName">{{ mainPreview.hostName }}</span>
@@ -44,10 +45,17 @@ <h5>{{ mainPreview.twitterTitle }}</h5>
                     </div>
                 </div>
                 <div *ngSwitchDefault>
+                    <div class="default-image" *ngIf="defaultPreview">
+                        <i class="pi pi-exclamation-triangle"></i>
+                        <h5>Social Media Preview Image Not Defined!</h5>
+                    </div>
                     <img
                         class="results-seo-tool__preview-image"
+                        *ngIf="!defaultPreview"
                         [src]="mainPreview.image"
+                        (error)="onImageError($event)"
                         alt="preview image" />
+
                     <div class="results-seo-tool__preview">
                         <span data-testId="page-hostName">{{ mainPreview.hostName }}</span>
                         <h5>{{ mainPreview.title }}</h5>

diff --git a/...ets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.scss b/...ets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.scss
@@ -180,4 +180,20 @@
             border-top-left-radius: $border-radius-xl;
         }
     }
+
+    .default-image {
+        width: 45.61706rem;
+        height: 23.875rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        flex-direction: column;
+        color: $black;
+        background-color: $color-palette-gray-100;
+
+        .pi {
+            font-size: 2.5rem;
+            color: $color-alert-red;
+        }
+    }
 }
diff --git a/...tlets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.ts b/...tlets/dot-edit-page/seo/components/dot-results-seo-tool/dot-results-seo-tool.component.ts
@@ -65,6 +65,7 @@ export class DotResultsSeoToolComponent implements OnInit, OnChanges {
     allPreview: MetaTagsPreview[];
     mainPreview: MetaTagsPreview;
     seoMediaTypes = SEO_MEDIA_TYPES;
+    defaultPreview = false;
 
     ngOnInit() {
         const title =
@@ -117,4 +118,8 @@ export class DotResultsSeoToolComponent implements OnInit, OnChanges {
             })
         );
     }
+
+    onImageError() {
+        this.defaultPreview = true;
+    }
 }