diff options
author | Joas Schilling <213943+nickvergessen@users.noreply.github.com> | 2018-11-28 15:13:24 +0100 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-11-28 15:13:24 +0100 |
commit | fedd0f8b9d87dd58c339c72fbd12e75cd9baa40c (patch) | |
tree | c629d1e4c46209e23491d9d331450a0e1694a7df | |
parent | 9dc40fa2ff8d37f1a97a0620e03d99265d8d0649 (diff) | |
parent | 40f58f9e268563a33ce3e60223a9780166cb7f96 (diff) |
Merge pull request #1314 from nextcloud/extract-view-for-call-button
Extract view for call button
-rw-r--r-- | js/views/callbutton.js | 93 | ||||
-rw-r--r-- | js/views/callinfoview.js | 42 | ||||
-rw-r--r-- | js/views/templates.js | 27 | ||||
-rw-r--r-- | js/views/templates/callbutton.handlebars | 9 | ||||
-rw-r--r-- | lib/PublicShareAuth/TemplateLoader.php | 1 | ||||
-rw-r--r-- | templates/index-public.php | 1 | ||||
-rw-r--r-- | templates/index.php | 1 |
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', |