Merge pull request #1314 from nextcloud/extract-view-for-call-button

Extract view for call button

7 files changed, 143 insertions, 31 deletions

diff --git a/js/views/callbutton.js b/js/views/callbutton.js
new file mode 100644
index 000000000..f62bf1037
--- /dev/null
+++ b/js/views/callbutton.js
@@ -0,0 +1,93 @@
+/* global Marionette */
+
+/**
+ *
+ * @copyright Copyright (c) 2018, Daniel Calviño Sánchez (danxuliu@gmail.com)
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+(function(OCA, Marionette) {
+
+	'use strict';
+
+	OCA.SpreedMe = OCA.SpreedMe || {};
+	OCA.Talk = OCA.Talk || {};
+	OCA.SpreedMe.Views = OCA.SpreedMe.Views || {};
+	OCA.Talk.Views = OCA.Talk.Views || {};
+
+	var CallButton  = Marionette.View.extend({
+
+		className: 'call-button',
+
+		template: function(context) {
+			// OCA.Talk.Views.Templates may not have been initialized when this
+			// view is initialized, so the template can not be directly
+			// assigned.
+			return OCA.Talk.Views.Templates['callbutton'](context);
+		},
+
+		templateContext: function() {
+			return {
+				isInCall: (this.model.get('participantFlags') & OCA.SpreedMe.app.FLAG_IN_CALL) !== 0,
+				hasCall: this.model.get('hasCall'),
+				leaveCallText: t('spreed', 'Leave call'),
+				joinCallText: t('spreed', 'Join call'),
+				startCallText: t('spreed', 'Start call'),
+			};
+		},
+
+		ui: {
+			'joinCallButton': 'button.join-call',
+			'leaveCallButton': 'button.leave-call',
+		},
+
+		events: {
+			'click @ui.joinCallButton': 'joinCall',
+			'click @ui.leaveCallButton': 'leaveCall',
+		},
+
+		modelEvents: {
+			'change:hasCall': function() {
+				this.render();
+			},
+			'change:participantFlags': function() {
+				this.render();
+			},
+		},
+
+		/**
+		 * @param {OCA.SpreedMe.Models.Room} options.model
+		 * @param {OCA.Talk.Connection} options.connection
+		 */
+		initialize: function(options) {
+			this._connection = options.connection;
+		},
+
+		joinCall: function() {
+			this._connection.joinCall(this.model.get('token'));
+		},
+
+		leaveCall: function() {
+			this._connection.leaveCurrentCall();
+		},
+
+	});
+
+	OCA.SpreedMe.Views.CallButton = CallButton;
+
+})(OCA, Marionette);
diff --git a/js/views/callinfoview.js b/js/views/callinfoview.js
index 06cc9a687..e0d79da09 100644
--- a/js/views/callinfoview.js
+++ b/js/views/callinfoview.js
@@ -31,17 +31,7 @@
 	var TEMPLATE =
 		'<div class="room-name"></div>' +
 		'<div class="call-controls-container">' +
-		'	<div class="call-button">' +
-		'	{{#if isInCall}}' +
-		'		<button class="leave-call primary">' + t('spreed', 'Leave call') + '</button>' +
-		'	{{else}}' +
-		'		{{#if hasCall}}' +
-		'		<button class="join-call call-ongoing primary">' + t('spreed', 'Join call') + '</button>' +
-		'		{{else}}' +
-		'		<button class="join-call primary">' + t('spreed', 'Start call') + '</button>' +
-		'		{{/if}}' +
-		'	{{/if}}' +
-		'	</div>' +
+		'	<div class="call-button"></div>' +
 		'{{#if canModerate}}' +
 		'	<div class="share-link-options">' +
 		'		{{#if canFullModerate}}' +
@@ -88,7 +78,6 @@
 			var canModerate = this._canModerate();
 			return $.extend(this.model.toJSON(), {
 				isGuest: this.model.get('participantType') === 4,
-				isInCall: (this.model.get('participantFlags') & OCA.SpreedMe.app.FLAG_IN_CALL) !== 0,
 				canModerate: canModerate,
 				canFullModerate: this._canFullModerate(),
 				isPublic: this.model.get('type') === 3,
@@ -103,8 +92,7 @@
 			'clipboardButton': '.clipboard-button',
 			'linkCheckbox': '.link-checkbox',
 
-			'joinCallButton': 'button.join-call',
-			'leaveCallButton': 'button.leave-call',
+			'callButton': 'div.call-button',
 
 			'passwordButton': '.password-button .button',
 			'passwordForm': '.password-form',
@@ -118,6 +106,7 @@
 
 		regions: {
 			'roomName': '@ui.roomName',
+			'callButton': '@ui.callButton',
 		},
 
 		events: {
@@ -127,20 +116,12 @@
 			'click @ui.passwordButton': 'showPasswordInput',
 			'click @ui.passwordConfirm': 'confirmPassword',
 			'submit @ui.passwordForm': 'confirmPassword',
-			'click @ui.joinCallButton': 'joinCall',
-			'click @ui.leaveCallButton': 'leaveCall',
 		},
 
 		modelEvents: {
 			'change:hasPassword': function() {
 				this.renderWhenInactive();
 			},
-			'change:hasCall': function() {
-				this.renderWhenInactive();
-			},
-			'change:participantFlags': function() {
-				this.renderWhenInactive();
-			},
 			'change:participantType': function() {
 				this._updateNameEditability();
 
@@ -182,6 +163,11 @@
 				buttonTitle: t('spreed', 'Rename')
 			});
 
+			this._callButton = new OCA.SpreedMe.Views.CallButton({
+				model: this.model,
+				connection: OCA.SpreedMe.app.connection,
+			});
+
 			this._updateNameEditability();
 		},
 
@@ -205,6 +191,7 @@
 			// rendered, as the element of the region does not exist yet at that
 			// time and without that option the call would fail otherwise.
 			this.getRegion('roomName').reset({ preventDestroy: true, allowMissingEl: true });
+			this.getRegion('callButton').reset({ preventDestroy: true, allowMissingEl: true });
 		},
 
 		onRender: function() {
@@ -213,9 +200,10 @@
 				this.renderTimeout = undefined;
 			}
 
-			// Attach the child view again (or for the first time) after the
+			// Attach the child views again (or for the first time) after the
 			// template has been rendered.
 			this.showChildView('roomName', this._nameEditableTextLabel, { replaceElement: true } );
+			this.showChildView('callButton', this._callButton, { replaceElement: true } );
 
 			var roomURL = OC.generateUrl('/call/' + this.model.get('token')),
 				completeURL = window.location.protocol + '//' + window.location.host + roomURL;
@@ -293,14 +281,6 @@
 			});
 		},
 
-		joinCall: function() {
-			OCA.SpreedMe.app.connection.joinCall(this.model.get('token'));
-		},
-
-		leaveCall: function() {
-			OCA.SpreedMe.app.connection.leaveCurrentCall();
-		},
-
 		/**
 		 * Password
 		 */
diff --git a/js/views/templates.js b/js/views/templates.js
index 71fbccc0f..24a4f4fee 100644
--- a/js/views/templates.js
+++ b/js/views/templates.js
@@ -1,5 +1,32 @@
 (function() {
   var template = Handlebars.template, templates = OCA.Talk.Views.Templates = OCA.Talk.Views.Templates || {};
+templates['callbutton'] = template({"1":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  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";
+},"3":function(container,depth0,helpers,partials,data) {
+    var stack1;
+
+  return ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.hasCall : depth0),{"name":"if","hash":{},"fn":container.program(4, data, 0),"inverse":container.program(6, data, 0),"data":data})) != null ? stack1 : "");
+},"4":function(container,depth0,helpers,partials,data) {
+    var helper;
+
+  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";
+},"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";
+},"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
+    var stack1;
+
+  return ((stack1 = helpers["if"].call(depth0 != null ? depth0 : (container.nullContext || {}),(depth0 != null ? depth0.isInCall : depth0),{"name":"if","hash":{},"fn":container.program(1, data, 0),"inverse":container.program(3, data, 0),"data":data})) != null ? stack1 : "");
+},"useData":true});
 templates['chatview'] = template({"compiler":[7,">= 4.0.0"],"main":function(container,depth0,helpers,partials,data) {
     var helper;
 
diff --git a/js/views/templates/callbutton.handlebars b/js/views/templates/callbutton.handlebars
new file mode 100644
index 000000000..6b05adaf2
--- /dev/null
+++ b/js/views/templates/callbutton.handlebars
@@ -0,0 +1,9 @@
+{{#if isInCall}}
+<button class="leave-call primary">{{leaveCallText}}</button>
+{{else}}
+	{{#if hasCall}}
+<button class="join-call call-ongoing primary">{{joinCallText}}</button>
+	{{else}}
+<button class="join-call primary">{{startCallText}}</button>
+	{{/if}}
+{{/if}}
diff --git a/lib/PublicShareAuth/TemplateLoader.php b/lib/PublicShareAuth/TemplateLoader.php
index 5e6a6c460..4ecf15218 100644
--- a/lib/PublicShareAuth/TemplateLoader.php
+++ b/lib/PublicShareAuth/TemplateLoader.php
@@ -89,6 +89,7 @@ class TemplateLoader {
 		Util::addScript('spreed', 'models/roomcollection');
 		Util::addScript('spreed', 'models/participant');
 		Util::addScript('spreed', 'models/participantcollection');
+		Util::addScript('spreed', 'views/callbutton');
 		Util::addScript('spreed', 'views/callinfoview');
 		Util::addScript('spreed', 'views/chatview');
 		Util::addScript('spreed', 'views/editabletextlabel');
diff --git a/templates/index-public.php b/templates/index-public.php
index 5e0e22530..0012d8cfa 100644
--- a/templates/index-public.php
+++ b/templates/index-public.php
@@ -24,6 +24,7 @@ script(
 		'models/roomcollection',
 		'models/participant',
 		'models/participantcollection',
+		'views/callbutton',
 		'views/callinfoview',
 		'views/chatview',
 		'views/editabletextlabel',
diff --git a/templates/index.php b/templates/index.php
index 3f954b11a..670549aa2 100644
--- a/templates/index.php
+++ b/templates/index.php
@@ -23,6 +23,7 @@ script(
 		'models/roomcollection',
 		'models/participant',
 		'models/participantcollection',
+		'views/callbutton',
 		'views/callinfoview',
 		'views/chatview',
 		'views/editabletextlabel',