feat(#471): sync poll in the remote control

remote/package.json

@@ -15,7 +15,7 @@
     "test.watch": "stencil test --spec --e2e --watch"
   },
   "dependencies": {
-    "@deckdeckgo/charts": "^1.0.0-rc.3-1",
+    "@deckdeckgo/charts": "file:../webcomponents/charts",
     "@deckdeckgo/core": "^1.0.0-rc.2",
     "@deckdeckgo/deck-utils": "^1.0.0-rc.1-2",
     "@deckdeckgo/highlight-code": "^1.0.0-rc.1-3",
@@ -28,6 +28,7 @@
     "@deckdeckgo/slide-content": "^1.0.0-rc.1",
     "@deckdeckgo/slide-countdown": "^1.0.0-rc.1",
     "@deckdeckgo/slide-gif": "^1.0.0-rc.1-1",
+    "@deckdeckgo/slide-poll": "file:../webcomponents/slides/poll",
     "@deckdeckgo/slide-qrcode": "^1.0.0-rc.2-1",
     "@deckdeckgo/slide-split": "^1.0.0-rc.2",
     "@deckdeckgo/slide-title": "^1.0.0-rc.1",
@@ -43,7 +44,7 @@
     "uuid": "^3.3.3"
   },
   "devDependencies": {
-    "@deckdeckgo/types": "^1.0.0-rc.3",
+    "@deckdeckgo/types": "file:../utils/types",
     "@stencil/core": "^1.7.5",
     "@stencil/postcss": "^1.0.1",
     "@stencil/sass": "^1.1.1",

remote/src/app/utils/parse-slides.utils.tsx

@@ -109,7 +109,8 @@ export class ParseSlidesUtils {
             'deckgo-slide-countdown',
             'deckgo-slide-youtube',
             'deckgo-slide-big-img',
-            'deckgo-slide-video'].indexOf(slide.template) > -1;
+            'deckgo-slide-video',
+            'deckgo-slide-poll'].indexOf(slide.template) > -1;
     }
 
     private static parseDummySlide(index: number): Promise<JSX.IntrinsicElements> {

remote/src/global/app-local.ts

@@ -18,6 +18,7 @@ import '@deckdeckgo/slide-countdown';
 import '@deckdeckgo/slide-youtube';
 import '@deckdeckgo/slide-big-img';
 import '@deckdeckgo/slide-video';
+import '@deckdeckgo/slide-poll';
 
 import {setupConfig} from '../app/services/environment/environment-config';
 

remote/src/global/app.ts

@@ -18,6 +18,7 @@ import '@deckdeckgo/slide-countdown';
 import '@deckdeckgo/slide-youtube';
 import '@deckdeckgo/slide-big-img';
 import '@deckdeckgo/slide-video';
+import '@deckdeckgo/slide-poll';
 
 import {setupConfig} from '../app/services/environment/environment-config';
 

studio/package.json

@@ -18,7 +18,7 @@
     "@deckdeckgo/charts": "file:../webcomponents/charts",
     "@deckdeckgo/color": "^1.0.0-rc.3-1",
     "@deckdeckgo/core": "^1.0.0-rc.2",
-    "@deckdeckgo/deck-utils": "^1.0.0-rc.1-2",
+    "@deckdeckgo/deck-utils": "file:../utils/deck",
     "@deckdeckgo/highlight-code": "^1.0.0-rc.1-3",
     "@deckdeckgo/inline-editor": "^1.0.0-rc.3-2",
     "@deckdeckgo/lazy-img": "^1.0.0-rc.1",

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

@@ -1,5 +1,3 @@
-
-
 export class PollEventsHandler {
 
     private el: HTMLElement;

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

@@ -2,6 +2,8 @@ import {Subscription} from 'rxjs';
 import {take} from 'rxjs/operators';
 
 import {debounce} from '@deckdeckgo/utils';
+import {getSlideDefinition} from '@deckdeckgo/deck-utils';
+import {DeckdeckgoSlideDefinition} from '@deckdeckgo/types';
 
 import {EnvironmentDeckDeckGoConfig} from '../../../../services/core/environment/environment-config';
 import {EnvironmentConfigService} from '../../../../services/core/environment/environment-config.service';
@@ -97,6 +99,7 @@ export class RemoteEventsHandler {
 
         this.el.removeEventListener('slideDelete', this.onSlideDelete, true);
         this.el.removeEventListener('slideDidUpdate', this.slideDidUpdate, true);
+        this.el.removeEventListener('pollConnected', this.pollConnected, true);
         this.el.removeEventListener('deckDidChange', this.deckDidChange, true);
     }
 
@@ -128,6 +131,7 @@ export class RemoteEventsHandler {
 
             this.el.addEventListener('slideDelete', this.onSlideDelete, false);
             this.el.addEventListener('slideDidUpdate', this.slideDidUpdate, false);
+            this.el.addEventListener('pollConnected', this.pollConnected, false);
             this.el.addEventListener('deckDidChange', this.deckDidChange, false);
 
             resolve();
@@ -495,20 +499,48 @@ export class RemoteEventsHandler {
 
             const index = await (deck as any).getActiveIndex();
 
-            const slideDefinition: any = await (deck as any).getSlideDefinition(index);
+            const slideDefinition: DeckdeckgoSlideDefinition | null = await (deck as any).getSlideDefinition(index);
 
-            if (slideDefinition) {
-                const deckgoRemoteElement = self.el.querySelector('deckgo-remote');
+            await this.updateSlideDefinition(self, slideDefinition, index);
 
-                if (deckgoRemoteElement) {
-                    await deckgoRemoteElement.updateSlide(index, slideDefinition);
-                }
+            resolve();
+        });
+    }
+
+    private updatePollSlideWithDefinition(self, slide: HTMLElement): Promise<void> {
+        return new Promise<void>(async (resolve) => {
+            if (!slide) {
+                resolve();
+                return;
             }
 
+            const deck: HTMLElement = self.el.querySelector('deckgo-deck');
+
+            if (!deck || !deck.hasChildNodes()) {
+                resolve();
+                return;
+            }
+
+            const index = Array.prototype.indexOf.call(deck.children, slide);
+
+            const slideDefinition: DeckdeckgoSlideDefinition | null = await getSlideDefinition(slide);
+
+            await self.updateSlideDefinition(self, slideDefinition, index);
+
             resolve();
         });
     }
 
+    private async updateSlideDefinition(self, slideDefinition: DeckdeckgoSlideDefinition | null, index: number) {
+        if (slideDefinition) {
+            const deckgoRemoteElement = self.el.querySelector('deckgo-remote');
+
+            if (deckgoRemoteElement) {
+                await deckgoRemoteElement.updateSlide(index, slideDefinition);
+            }
+        }
+    }
+
     private updateRemoteSlides(self): Promise<void> {
         return new Promise<void>(async (resolve) => {
             const deckgoRemoteElement = self.el.querySelector('deckgo-remote');
@@ -540,6 +572,14 @@ export class RemoteEventsHandler {
         this.executeIfConnected(this.updateCurrentSlideWithDefinition);
     };
 
+    private pollConnected = async ($event: CustomEvent) => {
+        if (!$event || !$event.target) {
+            return;
+        }
+
+        this.executeIfConnected(this.updatePollSlideWithDefinition, $event.target);
+    };
+
     private deckDidChange = async ($event: CustomEvent) => {
         if (!$event || !$event.detail) {
             return;
@@ -548,10 +588,10 @@ export class RemoteEventsHandler {
         this.executeIfConnected(this.updateRemoteDeckWithDefinition);
     };
 
-    private executeIfConnected(func: (self) => Promise<void>) {
+    private executeIfConnected(func: (self, options?) => Promise<void>, options?) {
         this.remoteService.watch().pipe(take(1)).subscribe(async (enable: boolean) => {
             if (enable) {
-                await func(this);
+                await func(this, options);
             }
         });
     }

utils/deck/package.json

@@ -16,6 +16,7 @@
     "@deckdeckgo/utils": "^1.0.0-rc.1-3"
   },
   "devDependencies": {
+    "@deckdeckgo/types": "file:../types",
     "typescript": "^3.5.1"
   },
   "main": "lib/index.js",