Implement sound notification on invitation to chat

src/mibew/js/source/widget.js

@@ -90,6 +90,12 @@ var Mibew = Mibew || {};
          */
         this.inviteStyle = options.inviteStyle;
 
+        /**
+         * Flag to disable sound notification on invitations
+         * @type Boolean
+         */
+         this.silentInvitation = options.silentInvitation;
+
         /**
          * Locale of the Widget
          * @type String
@@ -134,7 +140,7 @@ var Mibew = Mibew || {};
                 delete this.dataToSend.user_id;
             }
         }
-
+        this.dataToSend.silent = this.silentInvitation ? 1 : 0;
         Mibew.Utils.loadScript(
             this.requestURL
                 + '?' + this.getQuery(),
@@ -341,10 +347,12 @@ var Mibew = Mibew || {};
      *  - 'threadUrl': String, URL of the invitation thread which must be
      *    dispaly in invitation iframe.
      *  - 'acceptCaption': String, caption for accept button.
+     *  - 'soundFile': String, pseudo URL (without extension) of the sound file to
+     *    play on invitation event (in case when it's possible)
      */
     Mibew.Invitation.create = function (options) {
 
-        // Cookies are blocked, invitation will behave badly
+        // Cookies are blocked, invitation will behave badly, won't even try
         if (Mibew.Objects.widget.cookiesBlocked) {
             return;
         }
@@ -353,6 +361,7 @@ var Mibew = Mibew || {};
         var avatarUrl = options.avatarUrl;
         var threadUrl = options.threadUrl;
         var acceptCaption = options.acceptCaption;
+        var soundFile = options.soundFile;
 
         var popuptext = '<div id="mibew-invitation-popup" style="display: none;">';
         popuptext += '<div id="mibew-invitation-close">'
@@ -376,10 +385,19 @@ var Mibew = Mibew || {};
                 + '</h1>';
         }
 
-        // Play sound
+        // Try to play sound
+        if (soundFile) {
             var sound = document.getElementById('mibew-notification-sound');
-        if (sound) {
+            if (!sound) {
-            sound.play();
+                sound = document.createElement('audio');
+                sound.setAttribute('id', 'mibew-notification-sound');
+                sound.setAttribute('style', 'display: none;');
+                sound.innerHTML = '<source src="' + soundFile + '.wav" type="audio/x-wav" />'
+                                + '<source src="' + soundFile + '.mp3" type="audio/mpeg" codecs="mp3" />';
+                document.getElementsByTagName('body')[0].appendChild(sound);
+            }
+            // User should do something on a page before it could be possible to play sound, so just try
+            sound.play().then( function(s) {}, function(e) {} );
         }
 
         // Broadcast message from the thread related with invitation into iframe

src/mibew/libs/classes/Mibew/Button/Generator/AbstractGenerator.php

@@ -275,6 +275,9 @@ abstract class AbstractGenerator implements GeneratorInterface
         // URL for requests
         $widget_data['requestURL'] = $this->generateUrl('widget_gateway');
 
+        // Silent invitations
+        $widget_data['silentInvitation'] = $this->getOption('silent_invitation');
+
         // Locale for invitation
         $widget_data['locale'] = $this->getOption('locale');
 

src/mibew/libs/classes/Mibew/Controller/ButtonCodeController.php

@@ -86,6 +86,8 @@ class ButtonCodeController extends AbstractController
 
         $disable_tracking = $request->query->get('disabletracking') == 'on';
 
+        $silent_invitation = $request->query->get('silentinvitation') == 'on';
+
         $code_type = $request->query->get('codetype', 'button');
         if (!in_array($code_type, array('button', 'operator_code', 'text_link'))) {
             throw new BadRequestException('Wrong value of "codetype" param.');
@@ -106,7 +108,8 @@ class ButtonCodeController extends AbstractController
             'mod_security' => $mod_security,
             'prefer_iframe' => !$force_windows,
             'invitation_style' => $invitation_style,
-            'disable_tracking' => $disable_tracking
+            'disable_tracking' => $disable_tracking,
+            'silent_invitation' => $silent_invitation
         );
 
         if ($operator_code) {
@@ -176,7 +179,7 @@ class ButtonCodeController extends AbstractController
         $page['formcodetype'] = $code_type;
         $page['formforcewindows'] = $force_windows;
         $page['formdisabletracking'] = $disable_tracking;
-
+        $page['formsilentinvitation'] = $silent_invitation;
         $page['enabletracking'] = Settings::get('enabletracking');
         $page['operator_code'] = $operator_code;
         $page['generateButton'] = $generate_button;

src/mibew/libs/classes/Mibew/Controller/WidgetController.php

@@ -155,8 +155,10 @@ class WidgetController extends AbstractController
                         UrlGeneratorInterface::ABSOLUTE_URL
                     ),
                     'acceptCaption' => getlocal('Answer'),
+                    'soundFile' => $request->query->get('silent', false)
+                                   ? false
+                                   : $this->asset('sounds/invite', AssetUrlGeneratorInterface::ABSOLUTE_URL),
                 );
-
                 $_SESSION[SESSION_PREFIX . 'invitation_threadid'] = $thread->id;
             }
 

src/mibew/styles/pages/dark/templates_src/server_side/button_code.handlebars

@@ -92,6 +92,12 @@
                                         </select>
                                     </div>
                                 </div>
+                                <div class="field-in-row">
+                                    <label for="silent-invitation" class="field-label">{{l10n "Silent invitations"}}</label>
+                                    <div class="field-value-no-description">
+                                        <input id="silent-invitation" type="checkbox" name="silentinvitation" value="on"{{#if formsilentinvitation}} checked="checked"{{/if}} onchange="this.form.submit();"/>
+                                    </div>
+                                </div>
                             {{/unless}}
                             <br clear="all"/>
                         {{/if}}

src/mibew/styles/pages/default/templates_src/server_side/button_code.handlebars

@@ -92,6 +92,12 @@
                                         </select>
                                     </div>
                                 </div>
+                                <div class="field-in-row">
+                                    <label for="silent-invitation" class="field-label">{{l10n "Silent invitations"}}</label>
+                                    <div class="field-value-no-description">
+                                        <input id="silent-invitation" type="checkbox" name="silentinvitation" value="on"{{#if formsilentinvitation}} checked="checked"{{/if}} onchange="this.form.submit();"/>
+                                    </div>
+                                </div>
                             {{/unless}}
                             <br clear="all"/>
                         {{/if}}