Merge pull request #559 in FS/freeswitch from ~JAONZE/freeswitch:bugfix/FS-8030-render-links-and-images-in-chat-window to master

* commit '5820ffd49945abc2394f6e321c7b66e2b3ad9ead':
  FS-8030 [verto_communicator] changed chat image display behavior (break line before rendering).
  FS-8030 [verto_communicator] added ngSanitize as a dependency, vertoFilters module and picturify filter.

html5/verto/verto_communicator/bower.json

@@ -28,6 +28,7 @@
     "bootstrap": "~3.3.4",
     "angular-toastr": "~1.4.1",
     "angular": "~1.3.15",
+    "angular-sanitize": "~1.3.15",
     "angular-route": "~1.3.15",
     "angular-prompt": "~1.1.1",
     "angular-animate": "~1.3.15",

html5/verto/verto_communicator/src/css/verto.css

@@ -925,6 +925,10 @@ body .modal-body .btn-group .btn.active {
   color: #FFF;
 }
 
+.chat-img {
+  display: block;
+}
+
 .chat-members .chat-member-item {
   padding: 8px 16px;
   height: 56px;

html5/verto/verto_communicator/src/index.html

@@ -56,7 +56,7 @@
 
     <video class="hide" id="webcam" autoplay="autoplay" style="width:100%; height:100%; object-fit:inherit;"></video>
 
-   
+
     <!--<script type="text/javascript" src="js/jquery/jquery.mobile.min.js"></script>-->
 
     <!-- build:js(.) scripts/vendor.js -->
@@ -66,6 +66,7 @@
     <script src="bower_components/angular-gravatar/build/angular-gravatar.js"></script>
     <script src="bower_components/bootstrap/dist/js/bootstrap.js"></script>
     <script src="bower_components/angular-toastr/dist/angular-toastr.tpls.js"></script>
+    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
     <script src="bower_components/angular-route/angular-route.js"></script>
     <script src="bower_components/angular-bootstrap/ui-bootstrap-tpls.js"></script>
     <script src="bower_components/angular-prompt/dist/angular-prompt.js"></script>
@@ -87,14 +88,14 @@
     <!-- endbuild -->
 
     <!-- build:js(.) scripts/scripts.js -->
-    
+
     <script type="text/javascript" src="../js/src/jquery.jsonrpcclient.js"></script>
     <script type="text/javascript" src="../js/src/jquery.FSRTC.js"></script>
     <script type="text/javascript" src="../js/src/jquery.verto.js"></script>
-    
+
     <script type="text/javascript" src="js/3rd-party/getScreenId.js"></script>
     <script type="text/javascript" src="js/3rd-party/md5.min.js"></script>
-    
+
     <script type="text/javascript" src="src/vertoApp/vertoApp.module.js"></script>
 
     <script type="text/javascript" src="src/vertoControllers/vertoControllers.module.js"></script>
@@ -119,6 +120,9 @@
     <script type="text/javascript" src="src/vertoDirectives/directives/userStatus.js"></script>
     <script type="text/javascript" src="src/vertoDirectives/directives/videoTag.js"></script>
 
+    <script type="text/javascript" src="src/vertoFilters/vertoFilters.module.js"></script>
+    <script type="text/javascript" src="src/vertoFilters/filters/picturify.js"></script>
+
     <script type="text/javascript" src="src/vertoService/vertoService.module.js"></script>
     <script type="text/javascript" src="src/vertoService/services/vertoService.js"></script>
     <script type="text/javascript" src="src/vertoService/services/configService.js"></script>
@@ -133,4 +137,3 @@
 
   </body>
 </html>
-

html5/verto/verto_communicator/src/partials/chat.html

@@ -23,15 +23,15 @@
       </span>
       <!-- FIXME(italo): Put this whole block in a flex box to avoid defining fixed width.-->
       <h4 class="chat-members-name">
-        <div class="members-name">{{ member.name }}</div> 
+        <div class="members-name">{{ member.name }}</div>
 	<small class="ellipsis members-number">({{ member.number }})</small>
-	
+
 	<div class="members-badges">
    	  <div ng-if="member.status.video.floor" class="label badge-floor" ng-class="{'label-danger': member.status.video.floorLocked, 'label-info': !member.status.video.floorLocked}"><i class="mdi mdi-action-https lock-floor" ng-if="member.status.video.floorLocked"></i> <span>Floor</span></div>
           <div ng-if="member.status.video.reservationID == 'presenter'" class="label label-warning">Presenter</div>
 	</div>
       </h4>
-      
+
       <div class="pull-right action-buttons chat-members-action" ng-show="verto.data.confRole == 'moderator'">
         <div class="btn-group">
           <button type="button" class="btn btn-xs dropdown-toggle" data-toggle="dropdown">
@@ -116,7 +116,7 @@
       </div>
       <div class="chat-message" ng-repeat="message in messages" title="Sent at {{ message.created_at|date }}.">
         <div class="chat-message-metadata">{{ message.from }}:</div>
-        <p class="chat-message-body">{{ message.body }}</p>
+        <p class="chat-message-body" ng-bind-html="message.body | linky:'_blank' | picturify:150:3 "></p>
       </div>
       <div id="chat-message-bottom"></div>
     </div>

html5/verto/verto_communicator/src/vertoApp/vertoApp.module.js

@@ -6,8 +6,10 @@
     'ngRoute',
     'vertoControllers',
     'vertoDirectives',
+    'vertoFilters',
     'ngStorage',
     'ngAnimate',
+    'ngSanitize',
     'toastr',
     'FBAngular',
     'cgPrompt',
@@ -56,17 +58,17 @@
 
   vertoApp.run(['$rootScope', '$location', 'toastr', 'prompt', 'verto',
     function($rootScope, $location, toastr, prompt, verto) {
-      
+
       $rootScope.$on( "$routeChangeStart", function(event, next, current) {
         if (!verto.data.connected) {
           if ( next.templateUrl === "partials/login.html") {
-            // pass 
+            // pass
           } else {
             $location.path("/");
           }
         }
       });
-      
+
       $rootScope.$on('$routeChangeSuccess', function(event, current, previous) {
         $rootScope.title = current.$$route.title;
       });
@@ -77,7 +79,7 @@
         $rootScope.safeProtocol = true;
       }
 
-      
+
       $rootScope.promptInput = function(title, message, label, callback) {
         var ret = prompt({
           title: title,

html5/verto/verto_communicator/src/vertoFilters/filters/picturify.js

@@ -0,0 +1,26 @@
+(function () {
+  'use strict';
+
+  angular
+  .module('vertoFilters')
+  .filter('picturify', function() {
+    var regex = /<a (|target="\s*\S*" )href="(\s*\S*.(png|jpg|svg|gif|webp|bmp))">\s*\S*<\/a>/i;
+    var regex64 = /data:image\/(\s*\S*);base64,((?:[A-Za-z0-9+\/]{4})*(?:[A-Za-z0-9+\/]{2}==|[A-Za-z0-9+\/]{3}=))/g;
+
+    return function (text, width, n) {
+      var i = 0;
+      width = width || 150; //default width
+      if(regex64.test(text)) {
+        text = text.replace(regex64, '<a href="$1" target="_blank"><img class="chat-img" width="'+ width +'" src="data:image/png;base64,$2"/></a>')
+      }
+
+      do {
+        text = text.replace(regex, '<a $1href="$2"><img class="chat-img" width="'+ width +'" src="$2"/></a>');
+      } while((!n || (n && i++ < n)) && regex.test(text));
+
+      return text;
+    }
+
+  });
+
+})();

html5/verto/verto_communicator/src/vertoFilters/vertoFilters.module.js

@@ -0,0 +1,4 @@
+(function() {
+  'use strict';
+  var vertoFilters = angular.module('vertoFilters', []);
+})();