feat: add autoConnect property and disconnect method

Author: peterpeterparker

webcomponents/remote/src/components.d.ts

@@ -23,7 +23,9 @@ import {
 export namespace Components {
 
   interface DeckgoRemote {
+    'autoConnect': boolean;
     'connect': () => Promise<void>;
+    'disconnect': () => Promise<void>;
     'height': number;
     'length': number;
     'moveDraw': (leftOffset: number, transitionDuration: string) => Promise<void>;
@@ -36,6 +38,7 @@ export namespace Components {
     'width': number;
   }
   interface DeckgoRemoteAttributes extends StencilHTMLAttributes {
+    'autoConnect'?: boolean;
     'height'?: number;
     'length'?: number;
     'onEvent'?: (event: CustomEvent<DeckdeckgoEvent>) => void;

webcomponents/remote/src/components/deckdeckgo-remote/deckdeckgo-remote.tsx

@@ -32,6 +32,8 @@ export class DeckdeckgoRemote {
 
   @Prop() slides: DeckdeckgoSlideDefinition[];
 
+  @Prop() autoConnect: boolean = true;
+
   @State() canvasWidth: number;
 
   @Event() state: EventEmitter<ConnectionState>;
@@ -106,6 +108,10 @@ export class DeckdeckgoRemote {
   @Watch('room')
   @Watch('server')
   private async initConnect() {
+    if (!this.autoConnect) {
+      return;
+    }
+
     await this.connect();
   }
 
@@ -127,6 +133,15 @@ export class DeckdeckgoRemote {
     });
   }
 
+  @Method()
+  disconnect(): Promise<void> {
+    return new Promise<void>(async (resolve) => {
+      await this.communicationService.disconnect();
+
+      resolve();
+    });
+  }
+
   private initContext(): Promise<void> {
     return new Promise<void>((resolve) => {
       const canvas: HTMLCanvasElement = this.el.shadowRoot.querySelector('canvas');