Merge branch 'release_sp3' into 'bugFix/#42192操作改善1'

# Conflicts: # public_new/chat_room.html

Merge branch 'release_sp3' into 'bugFix/#42192操作改善1'
# Conflicts: # public_new/chat_room.html
558f93ca · Lee Daehyun · 0a563678 · 42b78026 · 558f93ca · 558f93ca
Commit 558f93ca authored Apr 08, 2021 by Lee Daehyun
13 changed files
--- a/public_new/archive.html
+++ b/public_new/archive.html
@@ -18,7 +18,7 @@
  <script>
    window.addEventListener('DOMContentLoaded', function() {
-      CHAT_DB.callGetArchiveList();
+      CHAT_DB.getArchiveList();
    });
  </script>
 </head>
@@ -135,12 +135,31 @@
  </li>
 </script>
 <script>
+  String.prototype.replaceAll = function(org, dest) {
+    return this.split(org).join(dest);
+  }
  let CHAT_SERVER_URL = '';
  let CMS_SERVER_URL = '';
  let ASSET_PATH = './';
  let PLATFORM = '';
  let IS_MOBILE = true;
  let IS_ONLINE = false;
+  $("#chatMenuModal").load("./modal_chat_menu.html");
+  $("#loadingArea").load("./loading.html");
+  android.getLoginParameter();
+  android.getGlobalParameter();
+  webkit.messageHandlers.loginInfoRequestMessageHandlerId.postMessage({});
+  webkit.messageHandlers.getGlobalParameter.postMessage({});
+  function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
+    CHAT_SERVER_URL = chatServerUrl;
+    CMS_SERVER_URL = cmsServerUrl;
+    PLATFORM = platform;
+    IS_MOBILE = isMobile;
+    IS_ONLINE = isOnline;
+    CHAT_UI.loadMessages(CHAT.globalLoginParameter.roomId, CHAT.globalLoginParameter.roomName);
+  };
 </script>
 </body>

--- a/public_new/archive_detail.html
+++ b/public_new/archive_detail.html
@@ -22,7 +22,7 @@
      var urlSearch = location.search.substring(1).split('&');
      var kv = urlSearch[0].split('=');
      urlPrm[kv[0]]=kv[1];
-      CHAT_DB.callGetArchiveDetail(urlPrm.archiveId);
+      CHAT_DB.getArchiveDetail(urlPrm.archiveId);
    });
  </script>
 </head>

--- a/public_new/chat.html
+++ b/public_new/chat.html
@@ -129,6 +129,8 @@
    android.getLoginParameter();
    android.getGlobalParameter();
    android.saveSelectedUserList("");
+    webkit.messageHandlers.loginInfoRequestMessageHandlerId.postMessage({});
+    webkit.messageHandlers.getGlobalParameter.postMessage({});
    function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
      CHAT_SERVER_URL = chatServerUrl;

--- a/public_new/chat_room.html
+++ b/public_new/chat_room.html
@@ -138,12 +138,6 @@
  <div id="userProfileModal"></div>
  <div id="chatMenuModal"></div>
  <div id="pictureModal"></div>
-  <!-- メニューモーダル -->
-  <!--#include virtual="modal_chat_menu.html" -->
-  <!-- プロフィールモーダル -->
-  <!--#include virtual="modal_chat_profile.html" -->
-  <!-- 写真メッセージーモーダル -->
-  <!--#include virtual="modal_chat_picture.html" -->
  <script src="./js/libs/jquery-3.3.1.min.js"></script>
  <script src="./js/libs/socket.io.js"></script>
@@ -186,6 +180,8 @@
    $("#loadingArea").load("./loading.html");
    android.getLoginParameter();
    android.getGlobalParameter();
+    webkit.messageHandlers.loginInfoRequestMessageHandlerId.postMessage({});
+    webkit.messageHandlers.getGlobalParameter.postMessage();
    function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
      CHAT_SERVER_URL = chatServerUrl;

--- a/public_new/contact.html
+++ b/public_new/contact.html
@@ -229,6 +229,9 @@
    $("#loadingArea").load("./loading.html");
    android.getLoginParameter();
    android.getGlobalParameter();
+    webkit.messageHandlers.loginInfoRequestMessageHandlerId.postMessage({});
+    webkit.messageHandlers.getGlobalParameter.postMessage({});
    function getGlobalParam(chatServerUrl, cmsServerUrl, platform, isMobile, isOnline) {
      CHAT_SERVER_URL = chatServerUrl;
      CMS_SERVER_URL = cmsServerUrl;

--- a/public_new/css/chat.css
+++ b/public_new/css/chat.css
@@ -558,6 +558,7 @@ input[name="tab_item"] {
  border-radius: 8px;
  background-color: #ffffff;
  font-size: 18px;
+  word-break: break-word;
 }
 .room_left-text.latest .text,
 .room_left-text.latest .img_wrap {
@@ -623,6 +624,7 @@ input[name="tab_item"] {
  margin: 0;
  margin-left: 80px;
  font-size: 18px;
+  word-break: break-word;
 }
 /* 吹き出し */
 .room_right .text::after {
@@ -742,9 +744,6 @@ input[name="tab_item"] {
 /**************************** modal *************************/
 /* メニューモーダル */
-.modal-body {
-    padding-left: 0.6rem;
-}
 .modal-body #modal_image {
    width: 100%;
    height: 100%;
@@ -844,3 +843,12 @@ input[name="tab_item"] {
    max-width: 75%;
  }
 }
+/*************************** ネームカード *************************/
+.prifile_name {
+  padding-top: 20px;
+  padding-bottom: 20px;
+  line-height: 1.2;
+  font-size: 16px;
+  margin-left: auto;
+  margin-right: auto;
+}
\ No newline at end of file
--- a/public_new/css/common.css
+++ b/public_new/css/common.css
@@ -152,16 +152,17 @@ main {
 }
 .profile_modal #userNameCard-scroll {
-    height: 200px;
+    height: 150px;
-    overflow: auto;
+    overflow: scroll;
    padding-top: 0rem;
-    padding-right: 0rem;
+    padding-right: 1rem;
    margin-top: 1rem;
 }
+.profile_modal .modal-header { display: table; }
 .profile_modal .modal-header,.profile_modal .modal-body { padding-bottom: 0; }
-.profile_modal .modal-footer button { width: 33%; padding: 5px;}
+.profile_modal .modal-footer button { width: 33%; padding: 5px; }
-.profile_modal.w_50 .modal-footer button { width: 50%; padding: 5px;}
+.profile_modal.w_50 .modal-footer button { width: 50%; padding: 5px; }
-.profile_modal .modal-header .profile_desc{ width: 100%;}
+.profile_modal .modal-header .profile_desc { width: 100%; }
 .profile_modal .modal-header .profile_name {
  width: 100%;
  text-align: center;

--- a/public_new/js/chat-db.js
+++ b/public_new/js/chat-db.js
 // 名前空間
 var CHAT_DB = {};
+// ios用
+function callNativeApp(iosKey, jsonData) {
+    console.log("callNativeApp called");
+    var result;
+    try {
+        var key = iosKey;
+        var data = jsonData;
+        var payload = {key: key, data: data};
+        // payloadの形 {"type":"SJbridge","data":{"name":"abc","role":"dev"}}
+        // resにObjective-cからのレスポンスが返る
+        result = prompt(JSON.stringify (payload));
+        console.log(result);
+    } catch(err) {
+        console.log('The native context does not exist yet');
+    }
+    return result;
+}
 //ロカールDBからルーム一覧情報を取得
 CHAT_DB.getRoomList = function(roomType, keyWord) {
    if (CHAT_UTIL.isIOS()) {
-        return JSON.parse(iosRoomList);        
+        return JSON.parse(callNativeApp("getRoomList", {"roomType": roomType, "keyWord": keyWord}));
    } else if (CHAT_UTIL.isAndroid()) {
    	return JSON.parse(android.getRoomList(roomType, keyWord));
    }
 };
-var iosRoomList;
-CHAT_DB.getIosRoomList = function(roomList) {
-	iosRoomList = roomList;
-    CHAT_DB.getRoomList(0);
-};
 CHAT_DB.callGetRoomList = function(roomType) {
    if (CHAT_UTIL.isIOS()) {
-        webkit.messageHandlers.getRoomList.postMessage({roomType});
+        return JSON.parse(callNativeApp("getRoomList", {"roomType": roomType}));
    } else if (CHAT_UTIL.isAndroid()) {
        //String形式をJsonに変更してReturn
    	return JSON.parse(android.getRoomList(roomType));
@@ -27,10 +38,9 @@ CHAT_DB.callGetRoomList = function(roomType) {
 }
 //ロカールDBからログインしたユーザのデータを取得する。
-CHAT_DB.getMyInfo = function(input) {
+CHAT_DB.getMyInfo = function() {
    if (CHAT_UTIL.isIOS()) {
-        //TODO IOS処理追加必要
+        return JSON.parse(callNativeApp("getMyInfo", {}));
    } else if (CHAT_UTIL.isAndroid()) {
        //String形式をJsonに変更してReturn
    	return JSON.parse(android.getMyInfo());
@@ -39,7 +49,7 @@ CHAT_DB.getMyInfo = function(input) {
 CHAT_DB.getMessages = function(roomId) {
    if (CHAT_UTIL.isIOS()) {
-        //TODO IOS処理追加必要
+        return JSON.parse(callNativeApp("getMessages", {"roomId": roomId}));
    } else if (CHAT_UTIL.isAndroid()) {
        //String形式をJsonに変更してReturn
    	return JSON.parse(android.getMessageList(roomId));
@@ -57,7 +67,7 @@ CHAT_DB.getFavoriteUsersNotInRoom = function() {
 CHAT_DB.getFavoriteUsers = function() {
    if (CHAT_UTIL.isIOS()) {
-        //TODO IOS処理追加必要
+        return JSON.parse(callNativeApp("getFavoriteUsers", {}));
    } else if (CHAT_UTIL.isAndroid()) {
        //String形式をJsonに変更してReturn
    	return JSON.parse(android.getFavoriteUsers());
@@ -66,7 +76,7 @@ CHAT_DB.getFavoriteUsers = function() {
 CHAT_DB.getFavoriteGroups = function() {
    if (CHAT_UTIL.isIOS()) {
-        //TODO IOS処理追加必要
+        return JSON.parse(callNativeApp("getFavoriteGroups", {}));
    } else if (CHAT_UTIL.isAndroid()) {
        //String形式をJsonに変更してReturn
    	return JSON.parse(android.getFavoriteGroups());
@@ -75,7 +85,7 @@ CHAT_DB.getFavoriteGroups = function() {
 CHAT_DB.getMyGroupUsers = function() {
    if (CHAT_UTIL.isIOS()) {
-        //TODO IOS処理追加必要
+        return JSON.parse(callNativeApp("getMyGroupUsers", {}));
    } else if (CHAT_UTIL.isAndroid()) {
        //String形式をJsonに変更してReturn
    	return JSON.parse(android.getMyGroupUsers());
@@ -84,7 +94,7 @@ CHAT_DB.getMyGroupUsers = function() {
 CHAT_DB.getGroupInfo = function(groupId) {
    if (CHAT_UTIL.isIOS()) {
-        //TODO IOS処理追加必要
+        return JSON.parse(callNativeApp("getGroupInfo", {"groupId": groupId}));
    } else if (CHAT_UTIL.isAndroid()) {
        //String形式をJsonに変更してReturn
    	return JSON.parse(android.getGroupInfo(groupId));
@@ -103,7 +113,7 @@ CHAT_DB.loadSelectedUsers = function() {
 CHAT_DB.getNameCardData = function(shopMemberId) {
    if (CHAT_UTIL.isIOS()) {
-        //TODO IOS処理追加必要
+        return JSON.parse(callNativeApp("getNameCardData", {"shopMemberId": shopMemberId}));
    } else if (CHAT_UTIL.isAndroid()) {
    	return JSON.parse(android.getNameCardData(shopMemberId));
    }
@@ -111,7 +121,7 @@ CHAT_DB.getNameCardData = function(shopMemberId) {
 CHAT_DB.getMyGroupShopMemberByName = function(shopMemberName) {
    if (CHAT_UTIL.isIOS()) {
-        //TODO IOS処理追加必要
+        return JSON.parse(callNativeApp("getMyGroupShopMemberByName", {"shopMemberName": shopMemberName}));
    } else if (CHAT_UTIL.isAndroid()) {
        //String形式をJsonに変更してReturn
    	return JSON.parse(android.getMyGroupShopMemberByName(shopMemberName));
@@ -129,7 +139,7 @@ CHAT_DB.getMyGroupShopMemberNotInRoomByName = function(shopMemberName) {
 CHAT_DB.getAllGroupShopMemberByName = function(shopMemberName) {
    if (CHAT_UTIL.isIOS()) {
-        //TODO IOS処理追加必要
+        return JSON.parse(callNativeApp("getAllGroupShopMemberByName", {"shopMemberName": shopMemberName}));
    } else if (CHAT_UTIL.isAndroid()) {
        //String形式をJsonに変更してReturn
    	return JSON.parse(android.getAllGroupShopMemberByName(shopMemberName));
@@ -147,7 +157,7 @@ CHAT_DB.getAllGroupShopMemberNotInRoomByName = function(shopMemberName) {
 CHAT_DB.getGroupByName = function(groupName) {
    if (CHAT_UTIL.isIOS()) {
-        //TODO IOS処理追加必要
+        return JSON.parse(callNativeApp("getGroupByName", {"groupName": groupName}));
    } else if (CHAT_UTIL.isAndroid()) {
        //String形式をJsonに変更してReturn
    	return JSON.parse(android.getGroupByName(groupName));
@@ -156,7 +166,7 @@ CHAT_DB.getGroupByName = function(groupName) {
 CHAT_DB.getUsersInRoom = function(roomId) {
    if (CHAT_UTIL.isIOS()) {
-        //TODO IOS処理追加必要
+        return JSON.parse(callNativeApp("getUsersInRoom", {"roomId": roomId}));
    } else if (CHAT_UTIL.isAndroid()) {
        //String形式をJsonに変更してReturn
    	return JSON.parse(android.getUsersInRoom(roomId));
@@ -164,25 +174,9 @@ CHAT_DB.getUsersInRoom = function(roomId) {
 }
 // アーカイブ一覧
-var iosArchiveList;
-CHAT_DB.callGetArchiveList = function() {
-    if (CHAT_UTIL.isIOS()) {
-        iosArchiveList = "";
-        webkit.messageHandlers.getArchiveList.postMessage();
-    } else if (CHAT_UTIL.isAndroid()) {
-        CHAT_UI.refreshArchiveScreen();
-    }
-};
-CHAT_DB.getIosArchiveList = function(archiveList) {
-    iosArchiveList = archiveList;
-    CHAT_UI.refreshArchiveScreen();
-};
 CHAT_DB.getArchiveList = function() {
    if (CHAT_UTIL.isIOS()) {
-        return JSON.parse(iosArchiveList);
+        return JSON.parse(callNativeApp("getArchiveList", {}));
    } else if (CHAT_UTIL.isAndroid()) {
        // TODO
    }
@@ -190,58 +184,25 @@ CHAT_DB.getArchiveList = function() {
 CHAT_DB.updateArchiveList = function() {
    if (CHAT_UTIL.isIOS()) {
-        webkit.messageHandlers.updateArchiveList.postMessage();
+        webkit.messageHandlers.updateArchiveList.postMessage({});
    } else if (CHAT_UTIL.isAndroid()) {
        // TODO
    }
 };
 // アーカイブ一覧検索
-var iosSearchArchiveList;
-var searchWord;
-CHAT_DB.callGetArchiveByName = function(keyword) {
-    if (CHAT_UTIL.isIOS()) {
-        iosSearchArchiveList = "";
-        searchWord = keyword;
-        webkit.messageHandlers.getArchiveByName.postMessage({keyword});
-    } else if (CHAT_UTIL.isAndroid()) {
-        ARCHIVE_UI.refreshSearchScreen(keyword);
-    }
-};
-CHAT_DB.getIosSearchArchiveList = function(archiveList) {
-    iosSearchArchiveList = archiveList;
-    ARCHIVE_UI.refreshSearchScreen(searchWord);
-};
 CHAT_DB.getArchiveByName = function(archiveName) {
    if (CHAT_UTIL.isIOS()) {
-        return JSON.parse(iosSearchArchiveList);
+        return JSON.parse(callNativeApp("getArchiveByName", {"archiveName": archiveName}));
    } else if (CHAT_UTIL.isAndroid()) {
        // TODO
    }
 };
 // アーカイブ詳細
-var iosArchiveDetail;
+CHAT_DB.getArchiveDetail = function(archiveId) {
-CHAT_DB.getIosArchiveDetail = function(archiveDetail) {
-    iosArchiveDetail = archiveDetail;
-    CHAT_DB.callGetArchiveDetail(archiveDetail.archiveId);
-};
-CHAT_DB.callGetArchiveDetail = function(archiveId) {
-    if (CHAT_UTIL.isIOS()) {
-        iosArchiveDetail = "";
-        webkit.messageHandlers.getArchiveDetail.postMessage({archiveId});
-    } else if (CHAT_UTIL.isAndroid()) {
-        CHAT_UI.refreshArchiveDetailScreen(archiveId);
-    }
-};
-CHAT_DB.getArchiveDetail = function() {
    if (CHAT_UTIL.isIOS()) {
-        return JSON.parse(iosArchiveDetail);
+        return JSON.parse(callNativeApp("getArchiveDetail", {"archiveId": archiveId}));
    } else if (CHAT_UTIL.isAndroid()) {
        // TODO
    }

--- a/public_new/js/chat-ui.js
+++ b/public_new/js/chat-ui.js
@@ -126,6 +126,7 @@ $('#room-search').on('input', function(event) {
    } else {
        if (IS_ONLINE == 'true') {
            android.updateRoomList();
+            webkit.messageHandlers.updateRoomList.postMessage({});
            CHAT_UI.refreshRoomList(chatRoomType.DM);
            CHAT_UI.dismissLoadingIndicator();
        }
@@ -417,6 +418,7 @@ $('a[data-toggle="pill"]').on('show.bs.tab', function(e) {
                if (IS_ONLINE == 'true') {
                    socket.emit('leaveRoom', function() {
                        android.updateRoomList();
+                        webkit.messageHandlers.updateRoomList.postMessage({});
                    });
                }
                CHAT_UI.refreshRoomList(chatRoomType.DM);
@@ -684,6 +686,17 @@ CHAT_UI.showConfirmView = function(isInvite) {
                    //todo android create room api
                    android.createChatRoom("1",userIdList.join(','),newRoomName);
+                    if (CHAT_UTIL.isIOS()) {
+                        // TODO
+                        var roomDic = {
+                            roomType: "1",
+                            userIdList: userIdList.join(','),
+                            roomName: newRoomName
+                        };
+                        webkit.messageHandlers.createChatRoom.postMessage({roomDic});
+                    }
                    /*socket.emit('createNewRoom', userIdList, encodedRoomName, function(newRoomId) {
                        socket.emit('joinRoom', newRoomId, newRoomName, function() {
@@ -932,6 +945,11 @@ CHAT_UI.refreshContactScreen = function() {
        android.updateMyInfo();
        android.updateGroupUser();
        android.updateFavorite();
+        webkit.messageHandlers.updateGroupInfo.postMessage({'0'});
+        webkit.messageHandlers.updateMyInfo.postMessage({});
+        webkit.messageHandlers.updateGroupUser.postMessage({});
+        webkit.messageHandlers.updateFavorite.postMessage({});
    }
    var myInfo = CHAT_DB.getMyInfo();
@@ -1007,6 +1025,7 @@ CHAT_UI.refreshRoomList = function(roomType) {
    if (IS_ONLINE == 'true') {
        android.updateRoomList();
+        webkit.messageHandlers.updateRoomList.postMessage({});
    }
    var rooms = CHAT_DB.getRoomList(roomType, null);
    CHAT.globalIsInvite = false;
@@ -1044,7 +1063,7 @@ CHAT_UI.refreshRoomList = function(roomType) {
        var displayMsg;
        //TODO 協業の場合処理追加必要
        if (room.messageType == messageType.TEXT || room.messageType == messageType.TEXT) displayMsg = room.message;
-        if (room.messageType == messageType.IMAGE || room.messageType == messageType.SYSTEM) displayMsg = getLocalizedString("image");
+        if (room.messageType == messageType.IMAGE || room.messageType == messageType.VIDEO) displayMsg = getLocalizedString("image");
        var attendUserName = [];
        room.attendUsers.forEach(function(user) {
            user.profileUrl = CHAT.getProfileImgUrl(user.profileUrl);
@@ -1094,12 +1113,14 @@ CHAT_UI.refreshRoomList = function(roomType) {
 CHAT_UI.joinRoom = function(roomId,roomName) {
    //native側に入場対象のroomId,roomNameを保存。(ルーム詳細画面初期化の時に使用。)
    android.joinRoom(roomId,roomName);
+    webkit.messageHandlers.roomInfosaveMessageHandlerId.postMessage({"roomId": roomId, "roomName": roomName});
 };
 CHAT_UI.loadMessages = function(roomId, roomName) {
    if (IS_ONLINE == 'true') {
        CHAT_SOCKET.connectSocket();
        android.updateMessages(roomId);
+        webkit.messageHandlers.updateMessages.postMessage({roomId});
        socket.emit('exitRoom',roomId);
        socket.emit('joinRoom', roomId, roomName, function() {
        });
@@ -1290,6 +1311,7 @@ CHAT_UI.removeFavoriteUser = function(shopMemberId) {
    $('#userNameCard').modal('hide');
    $('#myNameCard').modal('hide');
    android.removeFavoriteUser(shopMemberId);
+    webkit.messageHandlers.removeFavoriteUser.postMessage({shopMemberId});
    $('.shopmember_'+shopMemberId).removeClass('active');
    $('.shopmember_'+shopMemberId).addClass('disable');
    CHAT_UI.dismissLoadingIndicator();
@@ -1313,6 +1335,7 @@ CHAT_UI.insertFavoriteUser = function(shopMemberId) {
 CHAT_UI.removeFavoriteGroup = function(groupId) {
    android.removeFavoriteGroup(groupId);
+    webkit.messageHandlers.removeFavoriteGroup.postMessage({groupId});
    $('.group_'+groupId).removeClass('active');
    $('.group_'+groupId).addClass('disable');
    CHAT_UI.dismissLoadingIndicator();
@@ -1350,6 +1373,7 @@ CHAT_UI.refreshAllGroupSearch = function(paramGroupId) {
    //オンライン状態であればサーバから情報更新。
    if (IS_ONLINE == 'true') {
        android.updateGroupInfo(groupId);
+        webkit.messageHandlers.updateGroupInfo.postMessage({groupId});
    }
    //画面エリアを初期化。
@@ -1443,6 +1467,7 @@ CHAT_UI.startChat = function(userShopMemberId,userName) {
    // 参加ユーザ名でルーム名を生成
    let newRoomName = CHAT.globalLoginParameter.loginId + ',' +userName;
    android.createChatRoom(chatRoomType.DM, userIdList.join(','),newRoomName);
+    webkit.messageHandlers.createChatRoom.postMessage({"roomType": chatRoomType.DM, "userIdList": userIdList.join(','), "roomName": newRoomName});
    CHAT_UI.hideNamecard(nameCardAreaId.USER);
 };

--- a/public_new/js/chat-websocket.js
+++ b/public_new/js/chat-websocket.js
@@ -199,6 +199,7 @@ function setSocketAction () {
            text: message.text,
            from: message.from,
            profileImage: message.profileImagePath,
+            shopMemberId: message.userId,
            createdAtDay: messageTime.createdAtDay,
            createdAtTime: messageTime.createdAtTime,
            isToday: true

--- a/public_new/js/chat.js
+++ b/public_new/js/chat.js
@@ -135,14 +135,18 @@ CHAT.uploadImage = function(formData) {
            }
            let downloadPath = CMS_SERVER_URL + '/chatapi/file/download?fileName=' + imageName + '&roomId=' + CHAT.globalLoginParameter.roomId;
-            const aTag = $('<a/>', {id:"attachedImages"})
-            const image = $('<img/>',{src:imgPath, width:'auto',style:'max-width:100%'});
+            var videoSrc = CMS_SERVER_URL + '/chatapi/file/getImage?fileName=' + res.fileName + '&roomId=' + CHAT.globalLoginParameter.roomId;
+            const totalDiv = $('<div/>', {id:"attachedImages"});
+            const videoTag = $('<video/>', {controls:"true", width:'auto', style:'max-width:100%'});
+            const source = $('<source/>', {src:videoSrc});
            const downloadIcon = $('<a/>',{href:downloadPath, class:'fa fa-download', download:res.fileName});
-            aTag.append(image);
+            videoTag.append(source);
-            aTag.append(downloadIcon);
+            totalDiv.append(videoTag);
+            totalDiv.append(downloadIcon);
-            let text = aTag.prop('outerHTML');
+            let text = totalDiv.prop('outerHTML');
            let encodedText
            try {
                encodedText = encodeURIComponent(text)

--- a/public_new/template/template_user_message.html
+++ b/public_new/template/template_user_message.html
 <div class="room_left">
  <figure>
-    <a href="#" data-toggle="modal" data-target="#profileModal1"><img src="{{profileImage}}" onError="this.src='./img/noImage.png'"></a>
+    <a href="#" data-toggle="modal" data-target="#profileModal1">
+      <img src="{{profileImage}}" onError="this.src='./img/noImage.png'" onclick="CHAT_UI.makeNameCard({{shopMemberId}})">
+    </a>
  </figure>
  <div class="room_left-text">
    <div class="name">{{from}}</div>

--- a/public_new/template/template_user_name_card.html
+++ b/public_new/template/template_user_name_card.html
@@ -2,13 +2,13 @@
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header border-0">
+        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+          <span aria-hidden="true">&times;</span>
+        </button>
        <div class="prifile_desc d-flex flex-row">
          <img src="{{profileUrl}}" onError="this.src='./img/noImage.png'"/>
          <div class="prifile_name"><span>{{name}}</span></div>
        </div>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true">&times;</span>
-        </button>
      </div>
      <div class="modal-body" id="userNameCard-scroll">
        {{#groupPathList}}