MessageComposer: Trigger Jitsi app from call buttons

src/components/structures/ModularWidgets.js

@@ -12,6 +12,12 @@ class ModularWidgets {
             name: 'Grafana',
             description: 'Graph and monitor all the things!',
         },
+        {
+            type: 'jitsi',
+            icon: 'http://localhost:8000/static/jitsi.png',
+            name: 'jitsi',
+            description: 'Jitsi video conference',
+        },
         {
             type: 'custom',
             icon: 'http://localhost:8000/static/blocks.png',

src/components/views/elements/AppTile.js

@@ -94,7 +94,7 @@ export default React.createClass({
                     </span>
                 </div>
                 <div className="mx_AppTileBody">
-                    <iframe ref="appFrame" src={this.props.url}></iframe>
+                    <iframe ref="appFrame" src={this.props.url} allowFullScreen="true"></iframe>
                 </div>
             </div>
         );

src/components/views/rooms/MessageComposer.js

@@ -153,21 +153,41 @@ export default class MessageComposer extends React.Component {
         });
     }
 
-    onCallClick(ev) {
-        console.warn("Call but clicked!");
+    _startCallApp(isAudioConf) {
         dis.dispatch({
-            action: 'place_call',
-            type: ev.shiftKey ? "screensharing" : "video",
-            room_id: this.props.room.roomId,
+            action: 'appsDrawer',
+            show: true,
         });
+
+        const appsStateEvents = this.props.room.currentState.getStateEvents('im.vector.modular.widgets', '');
+        let appsStateEvent = {};
+        if (appsStateEvents) {
+            appsStateEvent = appsStateEvents.getContent();
+        }
+        if (!appsStateEvent.videoConf) {
+            appsStateEvent.videoConf = {
+                type: 'jitsi',
+                url: 'http://localhost:8000/jitsi.html',
+                data: {
+                    confId: this.props.room.roomId.replace(/[^A-Za-z0-9]/g, '_') + Date.now(),
+                    isAudioConf: isAudioConf,
+                },
+            };
+            MatrixClientPeg.get().sendStateEvent(
+                this.props.room.roomId,
+                'im.vector.modular.widgets',
+                appsStateEvent,
+                '',
+            ).then(() => console.log('Sent state'), (e) => console.error(e));
+        }
+    }
+
+    onCallClick(ev) {
+        this._startCallApp(false);
     }
 
     onVoiceCallClick(ev) {
-        dis.dispatch({
-            action: 'place_call',
-            type: 'voice',
-            room_id: this.props.room.roomId,
-        });
+        this._startCallApp(true);
     }
 
     onShowAppsClick(ev) {