Started implementation of call attention

css/xabber.css

@@ -7258,6 +7258,11 @@ input[type='range'].voice-message-volume:focus {
     max-height: 380px;
 }
 
+.dialog-modal .img-from-clipboard.qr-code {
+    width: 230px;
+    height: 230px;
+}
+
 .dialog-modal .container-for-img {
     margin: 20px auto;
     width: max-content;

src/chats.js

@@ -2830,6 +2830,10 @@ define("xabber-chats", function () {
                     }
             }
 
+            if (message.get('attention') && xabber.settings.call_attention) {
+                this.attentionMessage(message);
+            }
+
             if (message.isSenderMe()) {
                 if (!message.get('is_archived') && !message.get('missed_msg'))
                     this.readMessages(message.get('timestamp'));
@@ -3505,6 +3509,22 @@ define("xabber-chats", function () {
             xabber.recountAllMessageCounter();
         },
 
+          attentionMessage: function () {
+              if (xabber.settings.call_attention) {
+                  var notification = xabber.popupNotification({
+                      title: this.contact.get('name'),
+                      text: 'Attention',
+                      icon: this.contact.cached_image.url
+                  });
+                  notification.onclick = function () {
+                      window.focus();
+                      this.model.trigger('open');
+                  }.bind(this);
+                  let sound = xabber.settings.sound_on_attention;
+                  xabber.playAudio(sound);
+              }
+          },
+
         sendMessage: function (message) {
             let body = message.get('message'),
                 legacy_body = '',
@@ -4773,6 +4793,13 @@ define("xabber-chats", function () {
             let contact = this.account.contacts.get(msg_from), chat;
             contact && (chat = this.account.chats.getChat(contact));
 
+            if ($message.children('attention[xmlns="' + Strophe.NS.ATTENTION + '"]')) {
+                // return this.attention();
+                if (!chat)
+                    return;
+                return chat.messages.createSystemMessage({from_jid: msg_from, message: 'Attention was requested', attention: true});
+            }
+
             if ($message.children('x[xmlns="' + Strophe.NS.GROUP_CHAT + '#system-message"]').length) {
                 if (!contact)
                     return;
@@ -6103,6 +6130,7 @@ define("xabber-chats", function () {
             "click .btn-retract-own-messages": "retractOwnMessages",
             "click .btn-delete-chat": "deleteChat",
             "click .btn-archive-chat": "archiveChat",
+            "click .btn-call-attention": "callAttention",
             "click .btn-search-messages": "renderSearchPanel",
             "click .btn-jingle-message": "sendJingleMessage",
             "click .btn-set-status": "setStatus"
@@ -6181,6 +6209,7 @@ define("xabber-chats", function () {
         updateMenu: function () {
             var is_group_chat = this.contact.get('group_chat');
             this.$('.btn-invite-users').showIf(is_group_chat);
+            this.$('.btn-call-attention').hideIf(is_group_chat);
             this.$('.btn-retract-own-messages').showIf(is_group_chat);
         },
 
@@ -6210,6 +6239,13 @@ define("xabber-chats", function () {
             this.account.chat_settings.updateMutedList(this.contact.get('jid'), muted);
         },
 
+        callAttention: function (ev) {
+            let msg = $msg({type: 'headline', to: this.contact.get('jid')})
+                .c('attention', {xmlns: Strophe.NS.ATTENTION});
+            this.account.sendMsg(msg);
+            this.model.messages.createSystemMessage({from_jid: this.account.get('jid'), message: "Call attention was sent"});
+        },
+
         archiveChat: function (ev) {
             if (ev) {
                 if (($(ev.target).hasClass('mdi-package-down')) || ($(ev.target).hasClass('mdi-package-up'))) {

src/constants.js

@@ -155,7 +155,8 @@ var constants = {
         beep_a:             'sounds/beep_a.ogg',
         call:               'sounds/marching-band-dave-girtsman.mp3',
         connecting:         'sounds/alien-bomb-timer.wav',
-        busy:               'sounds/phone_busy.wav'
+        busy:               'sounds/phone_busy.wav',
+        attention:          'sounds/attention.wav'
     },
 
     SYNC_WAY_DATA: {

src/contacts.js

@@ -1080,12 +1080,13 @@ define("xabber-contacts", function () {
                 let src = $('<img/>').ClassyQR({
                     type: 'text',
                     text: 'xmpp:' + this.model.get('jid')
-                })[0].src;
-                utils.dialogs.ask("QR-code", null, {blob_image_from_clipboard: src}, { ok_button_text: 'copy'}).done(function (result) {
-                    if (result) {
+                })[0].onload = function () {
+                    utils.dialogs.ask("QR-code", null, {blob_image_from_clipboard: this.src, qrcode: true}, { ok_button_text: 'copy'}).done(function (result) {
+                        if (result) {
 
-                    }
-                }.bind(this));
+                        }
+                    }.bind(this));
+                };
             },
 
             updateSubscriptions: function () {

src/core.js

@@ -144,6 +144,8 @@
                 message_preview: false,
                 sound: true,
                 sound_on_message: 'beep_up',
+                call_attention: false,
+                sound_on_attention: 'attention',
                 sound_on_auth_request: 'beep_a',
                 hotkeys: 'enter',
                 load_history: true,

src/discovery.js

@@ -52,6 +52,7 @@ define("xabber-discovery", function () {
             this.connection.disco.addFeature(Strophe.NS.CHATSTATES);
             this.addFeature(Strophe.NS.BLOCKING, 'XEP-0191: Blocking Command');
             this.addFeature(Strophe.NS.PING, 'XEP-0199: XMPP Ping');
+            this.addFeature(Strophe.NS.ATTENTION, 'XEP-0244: Attention');
             this.addFeature(Strophe.NS.CARBONS, 'XEP-0280: Message carbons');
             this.addFeature(Strophe.NS.MAM, 'XEP-0313: Message archive management');
             this.connection.disco.addFeature(Strophe.NS.CHAT_MARKERS);

src/strophe.js

@@ -199,9 +199,10 @@ define("xabber-strophe", function () {
             return testRegexp.test(text) ? text.replace(replaceRegexp, escaper) : text;
         };
 
+        Strophe.addNamespace('ATTENTION', 'urn:xmpp:attention:0');
         Strophe.addNamespace('CARBONS', 'urn:xmpp:carbons:2');
-        Strophe.addNamespace('HASH', 'urn:xmpp:hashes:2');
         Strophe.addNamespace('FORWARD', 'urn:xmpp:forward:0');
+        Strophe.addNamespace('HASH', 'urn:xmpp:hashes:2');
         Strophe.addNamespace('HINTS', 'urn:xmpp:hints');
         Strophe.addNamespace('RECEIPTS', 'urn:xmpp:receipts');
         Strophe.addNamespace('JINGLE', 'urn:xmpp:jingle:1');

src/utils/modals.js

@@ -136,7 +136,7 @@ define(["xabber-dependencies", "xabber-templates"], function (deps, templates) {
 
                 if (dialog_options.blob_image_from_clipboard) {
                     dialog.$modal.find('.dialog-options-wrap').html('');
-                    dialog.$modal.find('.img-from-clipboard').get(0).src = dialog_options.blob_image_from_clipboard;
+                    dialog.$modal.find('.img-from-clipboard').switchClass('qr-code', dialog_options.qrcode)[0].src = dialog_options.blob_image_from_clipboard;
                     dialog.$modal.find('.container-for-img').removeClass('hidden');
                 }
 

src/views.js

@@ -1240,6 +1240,7 @@ define("xabber-views", function () {
             "click .settings-tabs-wrap .settings-tab": "jumpToBlock",
             "mousedown .setting.notifications label": "setNotifications",
             "mousedown .setting.message-preview label": "setMessagePreview",
+            "mousedown .setting.call-attention label": "setCallAttention",
             "change .sound input[type=radio][name=sound]": "setSound",
             "change .hotkeys input[type=radio][name=hotkeys]": "setHotkeys",
             "click .settings-tab.delete-all-accounts": "deleteAllAccounts"
@@ -1256,6 +1257,8 @@ define("xabber-views", function () {
             });
             this.$('.message-preview input[type=checkbox]')
                 .prop({checked: settings.message_preview});
+            this.$('.call-attention input[type=checkbox]')
+                .prop({checked: settings.call_attention});
             var sound_value = settings.sound ? settings.sound_on_message : '';
             this.$('.sound input[type=radio][name=sound][value="'+sound_value+'"]')
                     .prop('checked', true);
@@ -1290,6 +1293,13 @@ define("xabber-views", function () {
             $(ev.target).closest('input').prop('checked', value);
         },
 
+        setCallAttention: function (ev) {
+            var value = !this.model.get('call_attention');
+            this.model.save('call_attention', value);
+            ev.preventDefault();
+            $(ev.target).closest('input').prop('checked', value);
+        },
+
         setSound: function (ev) {
             var value = ev.target.value;
             if (value) {

templates/base/settings.html

@@ -126,6 +126,15 @@
                             </label>
                         </div>
                     </div>
+                    <div class="setting call-attention field-wrap">
+                        <div class="field clickable-field switch small">
+                            <span class="field-name">Call attention</span>
+                            <label class="field-value">
+                                <input type="checkbox" name="call-attention">
+                                <span class="lever"></span>
+                            </label>
+                        </div>
+                    </div>
                 </div>
 
                 <div class="settings-block-wrap sounds">