feat: Set audio-only conference and toggle video before joining

web/app/configs/widget/jitsi/jitsi.widget.component.html

@@ -7,5 +7,12 @@
                    [(ngModel)]="widget.dimension.newData.conferenceUrl" name="widget-url-{{widget.id}}"
                    [disabled]="isUpdating"/>
         </label>
+        <label class="label-block">
+            Audio only
+            <span class="text-muted">Starts the conference without camera by default. Users can still manually turn on the camera when joining or joined.</span>
+            <ui-switch size="medium"
+                   [(ngModel)]="widget.dimension.newData.isAudioOnly" name="widget-audio-{{widget.id}}"
+                   [disabled]="isUpdating"></ui-switch>
+        </label>
     </ng-template>
 </my-widget-config>

web/app/configs/widget/jitsi/jitsi.widget.component.ts

@@ -80,7 +80,6 @@ export class JitsiWidgetConfigComponent extends WidgetComponent {
         const jitsiUrl = url.parse(widget.dimension.newData.conferenceUrl);
         widget.dimension.newData.domain = jitsiUrl.host;
         widget.dimension.newData.conferenceId = jitsiUrl.path.substring(1);
-        widget.dimension.newData.isAudioOnly = false;
 
         let widgetQueryString = url.format({
             query: {

web/app/widget-wrappers/jitsi/jitsi.component.html

@@ -7,7 +7,11 @@
             <h3>Jitsi Video Conference</h3>
             <button type="button" (click)="joinConference()" class="btn btn-primary btn-large">
                 Join Conference
-            </button>
+            </button><br>
+            <label>
+                Start camera:
+                <input type="checkbox" name="toggleVideo" [(ngModel)]="toggleVideo" />
+            </label>
         </div>
     </div>
 </div>

web/app/widget-wrappers/jitsi/jitsi.component.ts

@@ -17,12 +17,14 @@ declare var JitsiMeetExternalAPI: any;
 export class JitsiWidgetWrapperComponent extends CapableWidget implements OnInit, OnDestroy {
 
     public isJoined = false;
+    public toggleVideo = false;
 
     private domain: string;
     private conferenceId: string;
     private displayName: string;
     private avatarUrl: string;
     private userId: string;
+    private isAudioOnly: boolean;
     private jitsiApiObj: any;
     private jitsiApiSubscription: Subscription;
 
@@ -37,6 +39,9 @@ export class JitsiWidgetWrapperComponent extends CapableWidget implements OnInit
         this.displayName = params.displayName;
         this.avatarUrl = params.avatarUrl;
         this.userId = params.userId || params.email; // Riot uses `email` when placing a conference call
+        this.isAudioOnly = params.isAudioOnly === 'true';
+
+        this.toggleVideo = !this.isAudioOnly;
 
         // Set the widget ID if we have it
         ScalarWidgetApi.widgetId = params.widgetId;
@@ -108,6 +113,7 @@ export class JitsiWidgetWrapperComponent extends CapableWidget implements OnInit
         if (this.displayName) this.jitsiApiObj.executeCommand("displayName", this.displayName);
         if (this.avatarUrl) this.jitsiApiObj.executeCommand("avatarUrl", this.avatarUrl.toString());
         if (this.userId) this.jitsiApiObj.executeCommand("email", this.userId);
+        if (this.isAudioOnly === this.toggleVideo) this.jitsiApiObj.executeCommand("toggleVideo");
 
         this.jitsiApiObj.on("readyToClose", () => {
             this.isJoined = false;