fix: update remote control on slides reorder change

Author: peterpeterparker

studio/package-lock.json

@@ -14,7 +14,7 @@
     "test.watch": "stencil test --spec --e2e --watch"
   },
   "dependencies": {
-    "@deckdeckgo/core": "^1.0.0-beta.41",
+    "@deckdeckgo/core": "^1.0.0-beta.42",
     "@deckdeckgo/highlight-code": "^1.0.0-alpha.16",
     "@deckdeckgo/inline-editor": "^1.0.0-alpha.10",
     "@deckdeckgo/lazy-img": "^1.0.0-alpha.10",

studio/package.json

@@ -239,7 +239,7 @@ export class RemoteEventsHandler {
 
             deckgoRemoteElement.slides = $event.detail;
 
-            await this.updateRemoteSlides($event);
+            await this.updateRemoteSlidesOnSlidesDidLoad($event);
 
             resolve();
         });
@@ -392,7 +392,7 @@ export class RemoteEventsHandler {
         });
     }
 
-    private updateRemoteSlides($event: CustomEvent): Promise<void> {
+    private updateRemoteSlidesOnSlidesDidLoad($event: CustomEvent): Promise<void> {
         return new Promise<void>(async (resolve) => {
             const deck: HTMLElement = this.el.querySelector('deckgo-deck');
 
@@ -409,6 +409,46 @@ export class RemoteEventsHandler {
                 return;
             }
 
+            await this.updateRemoteSlides();
+
+            resolve();
+        });
+    }
+
+    updateRemoteSlidesOnMutation(): Promise<void> {
+        return new Promise<void>(async (resolve) => {
+            const deck: HTMLElement = this.el.querySelector('deckgo-deck');
+
+            if (!deck || !deck.hasChildNodes()) {
+                resolve();
+                return;
+            }
+
+            const observer: MutationObserver = new MutationObserver(async (_mutations: MutationRecord[], _observer: MutationObserver) => {
+
+                const slidesDefinition: any[] = await (deck as any).getSlidesDefinition();
+
+                if (slidesDefinition && slidesDefinition.length > 0) {
+                    const deckgoRemoteElement = this.el.querySelector('deckgo-remote');
+
+                    if (deckgoRemoteElement) {
+                        deckgoRemoteElement.slides = slidesDefinition;
+
+                        await this.updateRemoteSlides();
+                    }
+                }
+
+                observer.disconnect();
+            });
+
+            observer.observe(deck, {childList: true, subtree: true});
+
+            resolve();
+        });
+    }
+
+    private updateRemoteSlides(): Promise<void> {
+        return new Promise<void>(async (resolve) => {
             const deckgoRemoteElement = this.el.querySelector('deckgo-remote');
 
             if (!deckgoRemoteElement) {

studio/src/app/handlers/editor/events/remote/remote-events.handler.tsx

@@ -505,6 +505,8 @@ export class AppEditor {
                     return;
                 }
 
+                await this.remoteEventsHandler.updateRemoteSlidesOnMutation();
+
                 this.slides.splice(detail.to, 0, ...this.slides.splice(detail.from, 1));
                 this.slides = [...this.slides];
             } catch (err) {