diff options
author | Daniel Calviño Sánchez <danxuliu@gmail.com> | 2018-11-06 13:49:49 +0100 |
---|---|---|
committer | Daniel Calviño Sánchez <danxuliu@gmail.com> | 2018-11-28 14:36:29 +0100 |
commit | 6ecc31d8bf50fdf057dfc3537e1985e47d8536da (patch) | |
tree | a493980bdb71d99917fafe114c322bb1bf97e190 | |
parent | 9dc40fa2ff8d37f1a97a0620e03d99265d8d0649 (diff) |
Extract view for call button
Signed-off-by: Daniel Calviño Sánchez <danxuliu@gmail.com>
-rw-r--r-- | js/views/callbutton.js | 94 | ||||
-rw-r--r-- | js/views/callinfoview.js | 42 | ||||
-rw-r--r-- | lib/PublicShareAuth/TemplateLoader.php | 1 | ||||
-rw-r--r-- | templates/index-public.php | 1 | ||||
-rw-r--r-- | templates/index.php | 1 |
5 files changed, 108 insertions, 31 deletions
diff --git a/js/views/callbutton.js b/js/views/callbutton.js new file mode 100644 index 000000000..f60f438a0 --- /dev/null +++ b/js/views/callbutton.js @@ -0,0 +1,94 @@ +/* global Marionette, Handlebars */ + +/** + * + * @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, Handlebars) { + + 'use strict'; + + OCA.SpreedMe = OCA.SpreedMe || {}; + OCA.SpreedMe.Views = OCA.SpreedMe.Views || {}; + + var TEMPLATE = + '{{#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}}'; + + var CallButton = Marionette.View.extend({ + + className: 'call-button', + + template: Handlebars.compile(TEMPLATE), + + templateContext: function() { + return { + isInCall: (this.model.get('participantFlags') & OCA.SpreedMe.app.FLAG_IN_CALL) !== 0, + hasCall: this.model.get('hasCall'), + }; + }, + + 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, Handlebars); 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/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', |