Merge pull request #1362 from nextcloud/disable-call-button-while-joining-or-leaving-a-call

Disable call button while joining or leaving a call

css/files.scss

@@ -1,6 +1,28 @@
 #talkChatTabView .call-button {
 	text-align: center;
 	margin-bottom: 10px;
+
+	button {
+		padding-left: 26px;
+		padding-right: 26px;
+	}
+
+	.icon-loading-small {
+		/* Prevent the text from being moved when the icon is shown. */
+		position: absolute;
+
+		margin-left: 5px;
+		margin-top: 1px;
+
+		/* Unset the background image set by the server for loading icons inside
+		 * buttons, as in this case the pure CSS icon can be used instead of the
+		 * image. */
+		background-image: unset;
+
+		&.hidden {
+			display: none;
+		}
+	}
 }
 
 #talkChatTabView .file-not-shared button {

css/style.scss

@@ -743,6 +743,23 @@
 				width: 100%;
 				padding: 12px;
 			}
+
+			.icon-loading-small {
+				/* Prevent the text from being moved when the icon is shown. */
+				position: absolute;
+
+				margin-left: 5px;
+				margin-top: 1px;
+
+				/* Unset the background image set by the server for loading
+				 * icons inside buttons, as in this case the pure CSS icon can
+				 * be used instead of the image. */
+				background-image: unset;
+
+				&.hidden {
+					display: none;
+				}
+			}
 		}
 	}
 

js/connection.js

@@ -112,6 +112,8 @@
 				return;
 			}
 
+			roomsChannel.trigger('joinCall', token);
+
 			var self = this;
 			this.app.callbackAfterMedia = function(configuration) {
 				var flags = OCA.SpreedMe.app.FLAG_IN_CALL;
@@ -130,6 +132,8 @@
 			this.app.setupWebRTC();
 		},
 		leaveCurrentCall: function() {
+			roomsChannel.trigger('leaveCurrentCall');
+
 			this.app.signaling.leaveCurrentCall();
 			this.app.signaling.syncRooms();
 			$(this.app.mainCallElementSelector).removeClass('incall');

js/views/callbutton.js

@@ -30,6 +30,8 @@
 	OCA.SpreedMe.Views = OCA.SpreedMe.Views || {};
 	OCA.Talk.Views = OCA.Talk.Views || {};
 
+	var roomsChannel = Backbone.Radio.channel('rooms');
+
 	var CallButton  = Marionette.View.extend({
 
 		className: 'call-button',
@@ -54,6 +56,7 @@
 		ui: {
 			'joinCallButton': 'button.join-call',
 			'leaveCallButton': 'button.leave-call',
+			'workingIcon': '.icon-loading-small',
 		},
 
 		events: {
@@ -76,6 +79,12 @@
 		 */
 		initialize: function(options) {
 			this._connection = options.connection;
+
+			// While joining or leaving a call the button is disabled; it will
+			// be rendered again and thus enabled once the operation finishes
+			// and the model changes.
+			this.listenTo(roomsChannel, 'joinCall', this._waitForCallToBeJoined);
+			this.listenTo(roomsChannel, 'leaveCurrentCall', this._waitForCallToBeLeft);
 		},
 
 		joinCall: function() {
@@ -86,6 +95,16 @@
 			this._connection.leaveCurrentCall();
 		},
 
+		_waitForCallToBeJoined: function() {
+			this.getUI('joinCallButton').prop('disabled', true);
+			this.getUI('workingIcon').removeClass('hidden');
+		},
+
+		_waitForCallToBeLeft: function() {
+			this.getUI('leaveCallButton').prop('disabled', true);
+			this.getUI('workingIcon').removeClass('hidden');
+		},
+
 	});
 
 	OCA.SpreedMe.Views.CallButton = CallButton;

js/views/templates.js

@@ -5,7 +5,7 @@ templates['callbutton'] = template({"1":function(container,depth0,helpers,partia
 
   return "<button class=\"leave-call primary\">"
     + container.escapeExpression(((helper = (helper = helpers.leaveCallText || (depth0 != null ? depth0.leaveCallText : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"leaveCallText","hash":{},"data":data}) : helper)))
-    + "</button>\n";
+    + "<span class=\"icon icon-loading-small hidden\"></span></button>\n";
 },"3":function(container,depth0,helpers,partials,data) {
     var stack1;
 
@@ -15,13 +15,13 @@ templates['callbutton'] = template({"1":function(container,depth0,helpers,partia
 
   return "<button class=\"join-call call-ongoing primary\">"
     + container.escapeExpression(((helper = (helper = helpers.joinCallText || (depth0 != null ? depth0.joinCallText : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"joinCallText","hash":{},"data":data}) : helper)))
-    + "</button>\n";
+    + "<span class=\"icon icon-loading-small hidden\"></span></button>\n";
 },"6":function(container,depth0,helpers,partials,data) {
     var helper;
 
   return "<button class=\"join-call primary\">"
     + container.escapeExpression(((helper = (helper = helpers.startCallText || (depth0 != null ? depth0.startCallText : depth0)) != null ? helper : helpers.helperMissing),(typeof helper === "function" ? helper.call(depth0 != null ? depth0 : (container.nullContext || {}),{"name":"startCallText","hash":{},"data":data}) : helper)))
-    + "</button>\n";
+    + "<span class=\"icon icon-loading-small hidden\"></span></button>\n";
 },"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
     var stack1;
 

js/views/templates/callbutton.handlebars

@@ -1,9 +1,9 @@
 {{#if isInCall}}
-<button class="leave-call primary">{{leaveCallText}}</button>
+<button class="leave-call primary">{{leaveCallText}}<span class="icon icon-loading-small hidden"></span></button>
 {{else}}
 	{{#if hasCall}}
-<button class="join-call call-ongoing primary">{{joinCallText}}</button>
+<button class="join-call call-ongoing primary">{{joinCallText}}<span class="icon icon-loading-small hidden"></span></button>
 	{{else}}
-<button class="join-call primary">{{startCallText}}</button>
+<button class="join-call primary">{{startCallText}}<span class="icon icon-loading-small hidden"></span></button>
 	{{/if}}
 {{/if}}