Merge pull request #444 from deckgo/studio-remote-update-notes

feat(#228): sync studio and remotes on notes update
deckgo · Nov 1, 2019 · 8d4229b · 8d4229b
2 parents 9fc86b8 + 22ca7f6
commit 8d4229b
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 12 deletions.
diff --git a/remote/src/app/pages/app-remote/app-remote.tsx b/remote/src/app/pages/app-remote/app-remote.tsx
@@ -81,6 +81,7 @@ export class AppRemote {
                 } else if ($event.type === DeckdeckgoEventType.SLIDES_UPDATE) {
                     await this.initSlides(($event as DeckdeckgoEventSlides));
                     await this.slideToLastSlide();
+                    await this.setNotes();
                 } else if ($event.type === DeckdeckgoEventType.NEXT_SLIDE) {
                     await this.animateNextSlide();
                 } else if ($event.type === DeckdeckgoEventType.PREV_SLIDE) {

diff --git a/studio/src/app/components/editor/app-editor-toolbar/app-editor-toolbar.tsx b/studio/src/app/components/editor/app-editor-toolbar/app-editor-toolbar.tsx
@@ -65,6 +65,7 @@ export class AppEditorToolbar {
     @Event() private deckDidChange: EventEmitter<HTMLElement>;
     @Event() private codeDidChange: EventEmitter<HTMLElement>;
     @Event() private imgDidChange: EventEmitter<HTMLElement>;
+    @Event() private notesDidChange: EventEmitter<HTMLElement>;
 
     @Event() private slideCopy: EventEmitter<HTMLElement>;
 
@@ -614,7 +615,7 @@ export class AppEditorToolbar {
 
         modal.onDidDismiss().then(async (detail: OverlayEventDetail) => {
             if (detail && detail.data && this.selectedElement) {
-                this.slideDidChange.emit(this.selectedElement);
+                this.notesDidChange.emit(this.selectedElement);
             }
         });
 

diff --git a/studio/src/app/handlers/editor/events/deck/deck-events.handler.tsx b/studio/src/app/handlers/editor/events/deck/deck-events.handler.tsx
@@ -74,6 +74,7 @@ export class DeckEventsHandler {
             this.el.addEventListener('codeDidChange', this.onCustomEventChange, false);
             this.el.addEventListener('imgDidChange', this.onCustomEventChange, false);
             this.el.addEventListener('linkCreated', this.onCustomEventChange, false);
+            this.el.addEventListener('notesDidChange', this.onSlideChange, false);
 
             this.updateSlideSubscription = this.updateSlideSubject.pipe(debounceTime(500)).subscribe(async (element: HTMLElement) => {
                 await this.updateSlide(element);
@@ -97,6 +98,7 @@ export class DeckEventsHandler {
         this.el.removeEventListener('codeDidChange', this.onCustomEventChange, true);
         this.el.removeEventListener('imgDidChange', this.onCustomEventChange, true);
         this.el.removeEventListener('linkCreated', this.onCustomEventChange, true);
+        this.el.removeEventListener('notesDidChange', this.onSlideChange, true);
 
         if (this.updateSlideSubscription) {
             this.updateSlideSubscription.unsubscribe();

diff --git a/studio/src/app/handlers/editor/events/remote/remote-events.handler.tsx b/studio/src/app/handlers/editor/events/remote/remote-events.handler.tsx
@@ -86,6 +86,7 @@ export class RemoteEventsHandler {
         }
 
         this.el.removeEventListener('slideDelete', this.onSlideDelete, true);
+        this.el.removeEventListener('notesDidChange', this.onNotesDidChange, true);
     }
 
     private initRemote(): Promise<void> {
@@ -114,6 +115,7 @@ export class RemoteEventsHandler {
             await this.remoteService.init();
 
             this.el.addEventListener('slideDelete', this.onSlideDelete, false);
+            this.el.addEventListener('notesDidChange', this.onNotesDidChange, false);
 
             resolve();
         });
@@ -425,23 +427,37 @@ export class RemoteEventsHandler {
             }
 
             const observer: MutationObserver = new MutationObserver(async (_mutations: MutationRecord[], _observer: MutationObserver) => {
+                await this.updateRemoteSlidesWithDefinition();
 
-                const slidesDefinition: any[] = await (deck as any).getSlidesDefinition();
+                observer.disconnect();
+            });
 
-                if (slidesDefinition && slidesDefinition.length > 0) {
-                    const deckgoRemoteElement = this.el.querySelector('deckgo-remote');
+            observer.observe(deck, {childList: true, subtree: true});
 
-                    if (deckgoRemoteElement) {
-                        deckgoRemoteElement.slides = slidesDefinition;
+            resolve();
+        });
+    }
 
-                        await this.updateRemoteSlides();
-                    }
-                }
+    private updateRemoteSlidesWithDefinition(): Promise<void> {
+        return new Promise<void>(async (resolve) => {
+            const deck: HTMLElement = this.el.querySelector('deckgo-deck');
 
-                observer.disconnect();
-            });
+            if (!deck || !deck.hasChildNodes()) {
+                resolve();
+                return;
+            }
 
-            observer.observe(deck, {childList: true, subtree: true});
+            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();
+                }
+            }
 
             resolve();
         });
@@ -470,6 +486,14 @@ export class RemoteEventsHandler {
         await this.deleteRemoteSlide();
     };
 
+    private onNotesDidChange = async ($event: CustomEvent) => {
+        if (!$event || !$event.detail) {
+            return;
+        }
+
+        await this.updateRemoteSlidesWithDefinition();
+    };
+
     private deleteRemoteSlide(): Promise<void> {
         return new Promise<void>(async (resolve) => {
             const deckgoRemoteElement = this.el.querySelector('deckgo-remote');

diff --git a/studio/src/components.d.ts b/studio/src/components.d.ts
@@ -771,6 +771,7 @@ declare namespace LocalJSX {
     'onCodeDidChange'?: (event: CustomEvent<HTMLElement>) => void;
     'onDeckDidChange'?: (event: CustomEvent<HTMLElement>) => void;
     'onImgDidChange'?: (event: CustomEvent<HTMLElement>) => void;
+    'onNotesDidChange'?: (event: CustomEvent<HTMLElement>) => void;
     'onSignIn'?: (event: CustomEvent<void>) => void;
     'onSlideCopy'?: (event: CustomEvent<HTMLElement>) => void;
     'onSlideDelete'?: (event: CustomEvent<HTMLElement>) => void;