fix #284 (again) prevent widgets to be re-created

negue · May 27, 2021 · 173e242 · 173e242
1 parent a31021a
commit 173e242
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 18 deletions.
diff --git a/src/app/screens/target-screen/target-screen.component.html b/src/app/screens/target-screen/target-screen.component.html
@@ -72,7 +72,7 @@
 
     <app-dynamic-iframe *ngSwitchCase="4"  class="media-clip" #dynamicIframeComponent
                         (load)="addToMap(entry.clip, dynamicIframeComponent)"
-                        [content]="entry.clip | clipTemplate$ | async"
+                        [content]="entry.clip.id | clipTemplate$ | async"
                         [mediaId]="entry.clip.id"
                         [class.visible]="(mediaToggleVar.isVisible$ | async)">
 

diff --git a/src/app/shared/widget-pipes/clip-template.pipe.ts b/src/app/shared/widget-pipes/clip-template.pipe.ts
@@ -1,9 +1,9 @@
 import {Pipe, PipeTransform} from '@angular/core';
 import {AppQueries} from "../../state/app.queries";
-import {Clip} from "@memebox/contracts";
-import {Observable, of} from "rxjs";
+import {Observable} from "rxjs";
 import {clipDataToDynamicIframeContent, DynamicIframeContent} from "@memebox/utils";
-import {map} from "rxjs/operators";
+import {distinctUntilChanged, map} from "rxjs/operators";
+import {isEqual} from "lodash";
 
 @Pipe({
   name: 'clipTemplate$'
@@ -13,24 +13,25 @@ export class ClipTemplatePipe implements PipeTransform {
   constructor(private appQueries: AppQueries) {
   }
 
-  transform(value: Clip): Observable<DynamicIframeContent> {
-    if (value.fromTemplate) {
-      return this.appQueries.clipMap$.pipe(
-        map(clipMap => clipMap[value.fromTemplate]),
-        map(template => {
+  transform(mediaId: string): Observable<DynamicIframeContent> {
+    return this.appQueries.clipMap$.pipe(
+      map(clipMap => {
+        const selectedMedia = clipMap[mediaId];
+
+        if (selectedMedia.fromTemplate) {
+          const widgetTemplate = clipMap[selectedMedia.fromTemplate];
+
           const config: DynamicIframeContent = {
-            ...clipDataToDynamicIframeContent(template),
-            variables: value.extended
+            ...clipDataToDynamicIframeContent(widgetTemplate),
+            variables: selectedMedia.extended
           };
 
-          console.info({config, value});
-
           return config;
-        })
-      );
-    }
+        }
 
-    return of(clipDataToDynamicIframeContent(value));
+        return clipDataToDynamicIframeContent(selectedMedia);
+      }),
+      distinctUntilChanged((x, y) => isEqual(x, y))
+    );
   }
-
 }