From 2665e70f403640254091e4013d539eefb3c98585 Mon Sep 17 00:00:00 2001
From: Bastian Rihm <brihm@intevation.de>
Date: Wed, 13 Nov 2024 17:19:17 +0100
Subject: [PATCH] Fix projection flicker on data change

---
 .../components/projector/projector.component.html        | 2 +-
 .../components/projector/projector.component.ts          | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/client/src/app/site/pages/meetings/modules/projector/components/projector/projector.component.html b/client/src/app/site/pages/meetings/modules/projector/components/projector/projector.component.html
index cb4fac75e9..e6a66668fe 100644
--- a/client/src/app/site/pages/meetings/modules/projector/components/projector/projector.component.html
+++ b/client/src/app/site/pages/meetings/modules/projector/components/projector/projector.component.html
@@ -44,7 +44,7 @@
         @if (projector!.show_clock) {
             <os-projector-clock [color]="projector!.header_font_color"></os-projector-clock>
         }
-        @for (slide of slides | async; track slide) {
+        @for (slide of slides | async; track slide.id) {
             <div>
                 <os-slide-container
                     [projector]="projector!"
diff --git a/client/src/app/site/pages/meetings/modules/projector/components/projector/projector.component.ts b/client/src/app/site/pages/meetings/modules/projector/components/projector/projector.component.ts
index 242b0f941c..c667c8352c 100644
--- a/client/src/app/site/pages/meetings/modules/projector/components/projector/projector.component.ts
+++ b/client/src/app/site/pages/meetings/modules/projector/components/projector/projector.component.ts
@@ -10,7 +10,7 @@ import {
     mergeMap,
     Observable
 } from 'rxjs';
-import { UnsafeHtml } from 'src/app/domain/definitions/key-types';
+import { Id, UnsafeHtml } from 'src/app/domain/definitions/key-types';
 import { ViewProjector } from 'src/app/site/pages/meetings/pages/projectors';
 import { MediaManageService } from 'src/app/site/pages/meetings/services/media-manage.service';
 import { MeetingSettingsService } from 'src/app/site/pages/meetings/services/meeting-settings.service';
@@ -101,7 +101,9 @@ export class ProjectorComponent extends BaseUiComponent implements OnDestroy {
     /**
      * All slides to show on this projector
      */
-    public slides: Observable<SlideData<object>[]> = new Observable<SlideData<object>[]>();
+    public slides: Observable<(SlideData<object> & { id: Id })[]> = new Observable<
+        (SlideData<object> & { id: Id })[]
+    >();
 
     /**
      * Info about if the user is offline.
@@ -160,13 +162,14 @@ export class ProjectorComponent extends BaseUiComponent implements OnDestroy {
                     (projector?.current_projections || []).map(
                         projection =>
                             ({
+                                id: projection.id,
                                 collection: projection.content?.collection,
                                 data: projection.content,
                                 stable: !!projection.stable,
                                 type: projection.type || ``,
                                 options: projection.options || {},
                                 ...(!!projection.content?.[`error`] && { error: projection.content[`error`] })
-                            }) as SlideData
+                            }) as SlideData & { id: Id }
                     )
                 )
             )