Merge remote-tracking branch 'origin/develop' into squash/socket

# Conflicts: # public_new/js/sockets/chat-websocket-message.js

Merge remote-tracking branch 'origin/develop' into squash/socket
# Conflicts: # public_new/js/sockets/chat-websocket-message.js
a5080415 · Kim Eunchul · c2f50a37 · b2249b95 · a5080415 · a5080415
Commit a5080415 authored Jul 30, 2021 by Kim Eunchul
36 changed files
--- a/public_new/archive.html
+++ b/public_new/archive.html
@@ -85,8 +85,6 @@
    </div>
  </footer>
-  <div id="loadingArea"></div>
  <!-- Library -->
  <script src="./js/libs/jquery-3.3.1.min.js"></script>
  <script src="./js/libs/moment.js"></script>
@@ -114,8 +112,6 @@
  <script src="./js/views/archive/archive.js"></script>
  <script>
-    $("#loadingArea").load("./loading.html");
    window.addEventListener('DOMContentLoaded', function () {
      ArchiveUI.refreshArchiveScreen();
    });

--- a/public_new/chat.html
+++ b/public_new/chat.html
@@ -8,7 +8,7 @@
    content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1, user-scalable=0">
  <title>LiveTaskyell</title>
  <link rel="stylesheet" href="./css/notosansjp.css">
-  <link rel="stylesheet" href="./fontawesome/css/all.css" >
+  <link rel="stylesheet" href="./fontawesome/css/all.css">
  <link rel="stylesheet" href="./css/bootstrap.min.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/chat.css">
@@ -97,7 +97,6 @@
      </div>
    </div>
  </footer>
-  <div id="loadingArea"></div>
  <!-- Library -->
  <script src="./js/libs/jquery-3.3.1.min.js"></script>
@@ -126,14 +125,12 @@
  <script src="./js/views/chats/chat-list.js"></script>
  <script>
-    $("#loadingArea").load("./loading.html");
    if (deviceInfo.isAndroid()) {
      const needHostAlert = android.getExitHostAlert();
      if (needHostAlert) {
        alert(getLocalizedString("inform_exit_host_collaboration"));
      }
-    }
+    } 
    ChatList.refreshRoomList(ChatRoomType.GROUP);
    NativeBridgeDelegate.saveSelectedUserList("");

--- a/public_new/chat_add_user.html
+++ b/public_new/chat_add_user.html
@@ -152,7 +152,6 @@
  <!-- View -->
  <script src="./js/views/chats/management/chat-management-common.js"></script>
  <script src="./js/views/chats/management/chat-add-user.js"></script>
-  <script src="./js/common/loading.js"></script>
  <script>
    const selectedUsers = NativeBridgeDataSource.loadSelectedUsers();

--- a/public_new/chat_add_user_confirm.html
+++ b/public_new/chat_add_user_confirm.html
@@ -82,7 +82,6 @@
  <script src="./js/Models/userinfo.js"></script>
  <!-- View -->
  <script src="./js/views/chats/management/chat-management-common.js"></script>
-  <script src="./js/common/loading.js"></script>
  <script>
    ChatManagementCommon.showAddUserConfirmView();

--- a/public_new/chat_make_room.html
+++ b/public_new/chat_make_room.html
@@ -154,7 +154,6 @@
  <!-- View -->
  <script src="./js/views/chats/management/chat-management-common.js"></script>
  <script src="./js/views/chats/management/chat-make-room.js"></script>
-  <script src="./js/common/loading.js"></script>
  <script>
    if (NativeBridgeDataSource.loadSelectedUsers() != "") {

--- a/public_new/chat_make_room_confirm.html
+++ b/public_new/chat_make_room_confirm.html
@@ -89,7 +89,6 @@
  <script src="./js/Models/userinfo.js"></script>
  <!-- View -->
  <script src="./js/views/chats/management/chat-management-common.js"></script>
-  <script src="./js/common/loading.js"></script>
  <script>
    ChatManagementCommon.showMakeRoomConfirmView();

--- a/public_new/chat_room.html
+++ b/public_new/chat_room.html
@@ -53,7 +53,7 @@
  <!-- コンテンツ -->
  <main id="chat_room">
-    <div id="user_list" class="user_list d-flex flex-row"> </div>
+    <div id="user_list" class="user_list d-flex flex-row hide"> </div>
    <!-- フィルター -->
    <div id="filter" class="user_list filter d-flex flex-row none"></div>
    <div class="chat_list none" id="searchList">
@@ -63,7 +63,7 @@
    <!-- チャット内容 -->
    <div class="room_container">
      <div class="room_contents scroll">
-        <div id="messages"></div>
+        <div id="messages" class="message_container"></div>
      </div>
    </div>
  </main>
@@ -133,7 +133,6 @@
      </div>
    </div>
  </footer>
-  <div id="loadingArea"></div>
  <div id="userProfileModal"></div>
  <div id="chatMenuModal"></div>
  <div id="pictureModal"></div>
@@ -173,7 +172,6 @@
  <script src="./js/views/chats/chat-room-search.js"></script>
  <script src="./js/views/chats/chat-room-message.js"></script>
  <script src="./js/views/contact/namecard.js"></script>
-  <script src="./js/common/loading.js"></script>
  <script>
    function imageModal(image) {
@@ -183,7 +181,6 @@
    $("#pictureModal").load("./modal_chat_picture.html");
    $("#chatMenuModal").load("./modal_chat_menu.html");
-    $("#loadingArea").load("./loading.html");
    if (deviceInfo.isAndroid()) {
      const needHostAlert = android.getExitHostAlert();

--- a/public_new/collaboration.html
+++ b/public_new/collaboration.html
@@ -48,7 +48,6 @@
            <div class="menu-bar menu-bar2"></div>
            <div class="menu-bar menu-bar3"></div>
          </div>
-          <!-- <button type="button" name="button" class="btn exit_btn" onclick="CoviewBridge.exitCollaboration();"></button> -->
        </div>
      </div>
    </div>
@@ -107,7 +106,6 @@
  <!-- フッター -->
  <div id="footer_collabo"></div>
-  <div id="loadingArea"></div>
  <div class="pip_indicator none" onclick="NativeBridgeDelegate.finishPIPMode();">
    <div style="vertical-align: middle;display: table-cell;">
      <img src="icon/icon_end_pip.svg" alt="文書共有" style="width: 30px;height: 30px;">
@@ -171,7 +169,6 @@
    $("#collaboration_picture_overlay_menu").load("./collaboration_overlay_menu.html");
    $("#add_user_list").load("./modal_add_user_list.html");
    $("#zoom").load("./zoom.html");
-    $("#loadingArea").load("./loading.html");
    if (deviceInfo.isAndroid()) {
      if (

--- a/public_new/collaboration_documents.html
+++ b/public_new/collaboration_documents.html
@@ -64,7 +64,6 @@
  <!-- フッター -->
  <div id="footer_collabo"></div>
-  <div id="loadingArea"></div>
  <div class="pip_indicator none" onclick="NativeBridgeDelegate.finishPIPMode();">
    <div style="vertical-align: middle;display: table-cell;">協業中</div>
  </div>
@@ -101,7 +100,6 @@
  <script src="./js/views/chats/management/chat-management-common.js"></script>
  <script src="./js/views/collaboration/collaboration.js"></script>
  <script src="./js/views/collaboration/collaboration-add-user.js"></script>
-  <script src="./js/common/loading.js"></script>
  <script src="./js/views/contact/namecard.js"></script>
  <script>
@@ -110,7 +108,6 @@
    $("#modal_collabo_change_host").load("./modal_collabo_change_host.html");
    $("#modal_collabo_capture").load("./modal_collabo_capture.html");
    $("#modal_collabo_profile2").load("./modal_collabo_profile2.html");
-    $("#loadingArea").load("./loading.html");
    $("#collaboration_voice_overlay_menu").load("./collaboration_voice_overlay_menu.html");
    $("#add_user_list").load("./modal_add_user_list.html");

--- a/public_new/collaboration_picture.html
+++ b/public_new/collaboration_picture.html
@@ -29,7 +29,6 @@
          <button type="button" name="button" class="btn user_btn"></button>
          <button type="button" name="button" class="btn menu_btn"></button>
          <button type="button" name="button" class="btn add_user_btn none"></button>
-          <!-- <button type="button" name="button" class="btn exit_btn" onclick="CoviewBridge.exitCollaboration();"></button> -->
        </div>
      </div>
    </div>

--- a/public_new/collaboration_video.html
+++ b/public_new/collaboration_video.html
@@ -32,7 +32,6 @@
            <div class="menu-bar menu-bar2"></div>
            <div class="menu-bar menu-bar3"></div>
          </div>
-          <!-- <button type="button" name="button" class="btn exit_btn" onclick="CoviewBridge.exitCollaboration();"></button> -->
        </div>
      </div>
    </div>

--- a/public_new/collaboration_whiteboard.html
+++ b/public_new/collaboration_whiteboard.html
@@ -28,7 +28,6 @@
          <button type="button" name="button" class="btn user_btn"></button>
          <button type="button" name="button" class="btn add_user_btn none"></button>
          <button type="button" name="button" class="btn menu_btn"></button>
-          <!-- <button type="button" name="button" class="btn exit_btn" onclick="CoviewBridge.exitCollaboration();"></button> -->
        </div>
      </div>
    </div>

--- a/public_new/contact.html
+++ b/public_new/contact.html
@@ -172,7 +172,6 @@
  </footer>
  <!-- ローディング -->
-  <div id="loadingArea"></div>
  <div id="myProfileModal"></div>
  <div id="userProfileModal"></div>
@@ -202,11 +201,8 @@
  <!-- View -->
  <script src="./js/views/contact/contact.js"></script>
  <script src="./js/views/contact/namecard.js"></script>
-  <script src="./js/common/loading.js"></script>
  <script>
-    $("#loadingArea").load("./loading.html");
    const groupID = NativeBridgeDataSource.getToMoveGroupId();
    if (groupID != "" && groupID != undefined) {

--- a/public_new/css/chat.css
+++ b/public_new/css/chat.css
@@ -259,24 +259,6 @@ input[name="tab_item"] {
  font: 25px FontAwesome;
 }
-/* お気に入り */
-.star.active:before {
-  content: "\f005";
-  font: 30px FontAwesome;
-  font-family: "Font Awesome 5 Free";
-  font-weight: 900;
-  color: #F5D256;
-  padding: 20px;
-}
-.star.disable:before {
-  content: "\f005";
-  font: 30px FontAwesome;
-  font-family: "Font Awesome 5 Free";
-  font-weight: 400;
-  color: #707070;
-  padding: 20px;
-}
 /* メンバー選択チェックボックス */
 .chat_item_l_chk {
  height: 100%;
@@ -478,6 +460,11 @@ input[name="tab_item"] {
  margin: 0 auto;
 }
+.message_container {
+  display: flex;
+  flex-direction: column-reverse;
+}
 .room_container {
  padding: 0;
  background: #f3f3f3;
@@ -485,15 +472,18 @@ input[name="tab_item"] {
  margin: 20px auto;
  margin-bottom: 140px;
 }
 /* 会話部分 */
 .room_contents {
  padding: 10px;
  overflow: hidden;
  line-height: 150%;
 }
 .scroll {
  overflow-y: scroll;
 }
 /* 相手の会話 */
 .room_left {
  width: fit-content;
@@ -785,24 +775,14 @@ input[name="tab_item"] {
 /**************************** modal *************************/
 /* メニューモーダル */
-.modal-backdrop{
-  background-color: #F9F9F9;
-}
-.modal-backdrop.show{
-  opacity: 0.95;
-}
 .menu_modal .modal-dialog{
  max-width: 100%!important;
 }
-.profile_modal .modal-content{
-  border:none!important;
-  background-color:transparent!important;
-}
 .menu_modal .modal-content{
  border:none!important;
  background-color:transparent!important;
 }
-.modal-content-wrap {
+.menu_modal .modal-content-wrap {
  width: 100%;
  height: 100vh;
  pointer-events: auto;
@@ -811,7 +791,6 @@ input[name="tab_item"] {
  padding: 0.8rem 0.8rem!important;
  margin: 0!important;
 }
-.profile_modal button.close,
 .menu_modal button.close{
  position: fixed;
  top: 30px;
@@ -822,7 +801,6 @@ input[name="tab_item"] {
  opacity: 0;
  animation: fadein .5s ease forwards;
 }
-.profile_modal .close,
 .menu_modal .close{
  color: #707070;
  opacity: 1!important;
@@ -871,10 +849,6 @@ input[name="tab_item"] {
  opacity: 0;
  animation: fadein 1.5s ease forwards;
 }
-.profile_modal .modal-content.item01{
-  opacity: 0;
-  animation: fadein .5s ease forwards;
-}
 @keyframes fadein{
 	0%{
 		opacity: 0;

--- a/public_new/css/common.css
+++ b/public_new/css/common.css
@@ -138,6 +138,13 @@ main {
 }
 /**************************** modal *************************/
+/* 共通設定 */
+.modal-backdrop{
+  background-color: #F9F9F9;
+}
+.modal-backdrop.show{
+  opacity: 0.95;
+}
 /* プロフィールモーダル */
 .profile_modal .modal-footer button {
  color: #707070;
@@ -203,6 +210,25 @@ main {
  outline: 0;
  box-shadow: none;
 }
+/* お気に入り */
+.star.active:before {
+  content: "\f005";
+  font: 30px FontAwesome;
+  font-family: "Font Awesome 5 Free";
+  font-weight: 900;
+  color: #F5D256;
+  padding: 20px;
+}
+.star.disable:before {
+  content: "\f005";
+  font: 30px FontAwesome;
+  font-family: "Font Awesome 5 Free";
+  font-weight: 400;
+  color: #707070;
+  padding: 20px;
+}
 @media screen and (max-width: 768px) {
  /* navi */
  .nav-ttl {

--- a/public_new/js/common/common.js
+++ b/public_new/js/common/common.js
 String.prototype.replaceAll = function (org, dest) {
  return this.split(org).join(dest);
-}
+};
 function includeJs(jsFilePath) {
  var js = document.createElement("script");
@@ -39,13 +39,11 @@ $(".home_btn").on("click", function () {
 });
 document.addEventListener("DOMContentLoaded", function () {
-  var h = $(window).height(); //画面の高さを取得
  // ローディング表示
  $("footer a").click(function (event) {
    const a = $(this);
    event.preventDefault();
-    $("#loader-bg ,#loader").height(h).css("display", "block"); //ローディング画像を表示
+    Common.showLoadingIndicator();
    setTimeout(function () {
      window.location.href = a[0].href;
@@ -74,21 +72,34 @@ document.addEventListener("DOMContentLoaded", function () {
  });
 });
+document.addEventListener("readystatechange", () => {
+  switch (document.readyState) {
+    case "interactive":
+      break;
+    case "complete":
+      if (typeof initialLoading != "undefined" && initialLoading) {
+        break;
+      }
+      Common.dismissLoadingIndicator();
+      break;
+  }
+});
 var Common = {};
 //loadingIndicatorを表示
 Common.showLoadingIndicator = function () {
-  const h = $(window).height();
+  NativeBridgeDelegate.showLoadingIndicator();
-  $("#loader-bg ,#loader").height(h).css("display", "block");
 };
 //loadingIndicatorを表示しない
 Common.dismissLoadingIndicator = function () {
-  const h = $(window).height();
+  NativeBridgeDelegate.hideLoadingIndicator();
-  $("#loader-bg ,#loader").height(h).css("display", "none");
 };
 Common.refreshForOnline = function () {
+  Common.showLoadingIndicator();
  serverInfo.isOnline = true;
  $(".footer_item a").removeClass("ui-state-disabled");
  if (typeof ChatList != "undefined") {

--- a/public_new/js/common/loading.js
+++ b/public_new/js/common/loading.js
-$(window).on("load", function () {
-  //読み込み完了したら実行する
-  $("#loader-bg").delay(900).fadeOut(800); //ローディングを隠す
-  $("#loader").delay(600).fadeOut(300);
-});
-document.addEventListener('DOMContentLoaded', function() {
-  setTimeout("stopload()", 3000); //いつまでもローディング状態にならないように10秒で強制表示させる
-});
-function stopload() {
-  //強制表示の関数
-  $("#loader-bg").delay(900).fadeOut(800);
-  $("#loader").delay(600).fadeOut(300);
-}
--- a/public_new/js/common/native-bridge-delegate.js
+++ b/public_new/js/common/native-bridge-delegate.js
@@ -364,6 +364,22 @@ NativeBridgeDelegate.changeCollaboration = function (
  }
 };
+NativeBridgeDelegate.showLoadingIndicator = function () {
+  if (deviceInfo.isiOS()) {
+    webkit.messageHandlers.showLoadingIndicator.postMessage({});
+  } else if (deviceInfo.isAndroid()) {
+    android.showLoadingIndicator();
+  }
+};
+NativeBridgeDelegate.hideLoadingIndicator = function () {
+  if (deviceInfo.isiOS()) {
+    webkit.messageHandlers.hideLoadingIndicator.postMessage({});
+  } else if (deviceInfo.isAndroid()) {
+    android.hideLoadingIndicator();
+  }
+};
 var ReverseDelegate = {};
 /* reverse delegates  */
 // for android native call
@@ -372,9 +388,9 @@ ReverseDelegate.leaveRoom = function () {
 };
 // for android call
-ReverseDelegate.displayExistRoom = function (roomId) {
+ReverseDelegate.displayExistRoom = function (roomID) {
  if (confirm("error_already_exist_same_user")) {
-    NativeBridgeDelegate.joinRoom(roomId);
+    NativeBridgeDelegate.joinRoom(roomID);
  }
  return;
 };
--- a/public_new/js/sockets/chat-websocket.js
+++ b/public_new/js/sockets/chat-websocket.js
@@ -33,7 +33,7 @@ function setSocketAction() {
  /* ---------------------------------------------------
   * Chat Room List Tab
   * --------------------------------------------------- */
-  bindOnNewMessage();
+  CHAT_SOCKET.bindOnNewMessage();
  bindOnNewNotification();
  bindOnRefreshGroupList();
  bindOnRefreshUserListInGroup();
@@ -213,7 +213,7 @@ CHAT_SOCKET.emitCollaborationFinishMessage = function () {
    const sendData = DATA_MESSAGE_SCHEME + FINISH_ALL_COLLABORATION_SIGNAL;
    CHAT_SOCKET.emitCreateMessage(SOCKET_KEY.CREATE_MESSAGE, sendData);
  }
-}
+};
 CHAT_SOCKET.emitGetGroupList = function (isInvite) {
  socket.emit(SOCKET_KEY.GET_GROUP_LIST, isInvite);

--- a/public_new/js/views/chats/chat-list.js
+++ b/public_new/js/views/chats/chat-list.js
@@ -10,7 +10,6 @@ $("#tabGroup").on("click", function (e) {
 document.addEventListener("DOMContentLoaded", function () {
  ChatList.bindChatSearch();
-  Common.dismissLoadingIndicator();
 });
 ChatList.bindChatSearch = function () {

--- a/public_new/js/views/chats/chat-room-message.js
+++ b/public_new/js/views/chats/chat-room-message.js
@@ -13,7 +13,7 @@ ChatRoom.appendSearchMessages = function (messages, unwrappedWorkVal = "") {
    let html = ChatRoom.renderMessageForSearchMessage(message);
    workVal = html + workVal;
  });
-  $(".overlay_src_msg").prepend(workVal);
+  $(".overlay_src_msg").append(workVal);
 };
 ChatRoom.renderMessageForSearchMessage = function (message) {
@@ -98,17 +98,14 @@ ChatRoom.loadMessages = function (joinRoomID, joinRoomName) {
  let messages = NativeBridgeDataSource.getMessagesByRoomID(roomID);
  ChatRoom.prependMessage(messages);
-  // スクロール調整
-  let jQueryMessages = $("#messages");
-  ChatRoom.waitForLoadingImage(jQueryMessages, ChatRoom.scrollToBottom);
-  ChatRoom.waitForLoadingVideo(jQueryMessages, ChatRoom.scrollToBottom);
-  // iOS用スクロールoffset調整
+  window.addEventListener(
-  if (deviceInfo.isiOS()) {
+    "load",
-    $(window).on("load", function () {
+    function (event) {
-      ChatRoom.scrollToBottom();
+      ChatRoom.scrollToBottom(false);
-    });
+    },
-  }
+    false
+  );
 };
 ChatRoom.configureRoomMenu = function () {
@@ -147,9 +144,8 @@ ChatRoom.appendAttendedUsers = function (roomID) {
 ChatRoom.prependMessage = function (messages) {
  const now = new Date();
-  // メッセージ文字列の生成
-  let workVal = "";
+  const messageElement = $("#messages");
  let checkBeforeDate = "";
  let beforeDate = "";
  messages.forEach(function (message) {
@@ -170,21 +166,22 @@ ChatRoom.prependMessage = function (messages) {
    const isToday = messageCreatedTime.includes(":") ? true : false;
    // 日付ラーベル表示
-    if (messageCreatedTime != checkBeforeDate && checkBeforeDate != "") {
+    if (
+      messageCreatedTime != checkBeforeDate 
+      && checkBeforeDate != "" 
+      && !isToday
+    ) {
      const html = ChatRoom.renderDateLabelMessage(beforeDate);
-      workVal = html + workVal;
+      messageElement.append(html);
    }
    checkBeforeDate = messageCreatedTime;
    beforeDate = message.insertDate;
    const html = ChatRoom.renderMessage(message, isToday, isOtherYear);
-    workVal = html + workVal;
+    messageElement.append(html);
  });
-  // メッセージの画面描画
-  $("#messages").prepend(workVal);
  // messageが存在する場合、最上段にそのメッセージの日付を表示
  ChatRoom.appendInitialDateMessage(messages);
 };
@@ -196,7 +193,7 @@ ChatRoom.appendInitialDateMessage = function (messages) {
      messages[messages.length - 1].insertDate,
      true
    );
-    $("#messages").prepend(html);
+    $("#messages").append(html);
  }
 };
@@ -254,7 +251,9 @@ ChatRoom.renderCollaborationMessage = function (message, isToday, isOtherYear) {
  const createdAtYear =
    message.insertDate.substring(0, 4) + getLocalizedString("year") + " ";
  // 協業のタイプを数値から文字列に変換
-  const strCollaborationType = CHAT_UTIL.getCollaborationType(collaborationInfo.collaborationType);
+  const strCollaborationType = CHAT_UTIL.getCollaborationType(
+    collaborationInfo.collaborationType
+  );
  const html = Mustache.render(collaborationMessageTemplate, {
    messageId: message.messageId,
@@ -279,11 +278,7 @@ ChatRoom.renderCollaborationMessage = function (message, isToday, isOtherYear) {
 };
 ChatRoom.getMeetingID = function (meetingID) {
-  if (typeof meetingID != "undefined") {
+  return typeof meetingID != "undefined" ? 0 : meetingID;
-    return meetingID;
-  } else {
-    return 0;
-  }
 };
 ChatRoom.getDisplayUserList = function (userList) {

--- a/public_new/js/views/chats/chat-room.js
+++ b/public_new/js/views/chats/chat-room.js
@@ -2,6 +2,7 @@ var beforeHeight = window.innerHeight;
 var beforeWidth = window.innerWidth;
 var beforeScroll;
 var roomName = "";
+var initialLoading = true;
 var ChatRoom = {};
 window.onscroll = function () {
@@ -11,20 +12,27 @@ window.onscroll = function () {
  beforeScroll = window.scrollY;
  const beforeHeight = $(".room_container").height();
  messageCount = $(".chat_message").length;
+  // TODO: peacekim :: check this condition
  if ($(this).scrollTop() === 0 && messageCount >= PagingSize.MESSAGE) {
-    if (!$("#chatLoader").is(":visible")) {
+    setTimeout(function () {
-      let loader = $(
+      if (!$("#chatLoader").is(":visible")) {
-        '<div id="chatLoader" class="text-center"><div class="spinner-grow spinner-grow-sm" role="status" /></div>'
+        // display loading indicator in chat message
-      );
+        let loader = $(
-      $("#messages").prepend(loader);
+          '<div id="chatLoader" class="text-center"><div class="spinner-grow spinner-grow-sm" role="status" /></div>'
-      const messageID = $($(".chat_message").get(0)).data("messageid");
+        );
-      NativeBridgeDelegate.updatePreMessage(messageID);
+        $("#messages").append(loader);
-      let messages = NativeBridgeDataSource.getMessagesByMessageID(messageID);
+        // get lastest message id and update message from server via native
-      ChatRoom.prependMessage(messages);
+        const messageID = $($(".chat_message").last()).data("messageid");
-      loader.remove();
+        NativeBridgeDelegate.updatePreMessage(messageID);
-      var afterHeight = $(".room_container").height();
+        let messages = NativeBridgeDataSource.getMessagesByMessageID(messageID);
-      window.scroll(0, afterHeight - beforeHeight);
+        // prepend message
-    }
+        ChatRoom.prependMessage(messages);
+        // hide loading indicator
+        loader.remove();
+        var afterHeight = $(".room_container").height();
+        window.scroll(0, afterHeight - beforeHeight);
+      }
+    }, 0);
  }
 };
@@ -37,6 +45,9 @@ document.addEventListener("DOMContentLoaded", function () {
  // メッセージ入力イベントバインディング
  ChatRoom.bindMessageInput();
+  // 下スクロールでユーザーリストを非表示
+  ChatRoom.bindUserListDisplayToggle();
 });
 ChatRoom.bindResize = function () {
@@ -103,34 +114,21 @@ ChatRoom.bindMessageInput = function () {
 };
 // 下スクロールでユーザーリストを非表示
-var startPos = 0;
+ChatRoom.bindUserListDisplayToggle = function () {
-var winScrollTop = 0;
+  let startPos = 0;
-$(window).on("scroll", function () {
+  let winScrollTop = 0;
-  winScrollTop = $(this).scrollTop();
+  $(window).on("scroll", function () {
-  if (winScrollTop >= startPos) {
+    winScrollTop = $(this).scrollTop();
-    if (winScrollTop >= 200) {
+    if (winScrollTop >= startPos) {
-      $("#chat_room .user_list").addClass("hide");
+      if (winScrollTop >= 200) {
-    }
+        $("#chat_room .user_list").addClass("hide");
-  } else {
+      }
-    $("#chat_room .user_list").removeClass("hide");
+    } else {
-  }
+      $("#chat_room .user_list").removeClass("hide");
-  startPos = winScrollTop;
-});
-//上にスクロールすると新しいメッセージを呼ぶ処理。
-$("#messages").scroll(function () {
-  if ($(this).scrollTop() === 0) {
-    if (!$("#chatLoader").is(":visible")) {
-      // 現在、メッセージの個数以前をメッセージを読み込む
-      // ローディングアイコンを追加する
-      let loader = $(
-        '<div id="chatLoader" class="text-center"><div class="spinner-grow spinner-grow-sm" role="status" /></div>'
-      );
-      $("#messages").prepend(loader);
-      loader.remove();
    }
-  }
+    startPos = winScrollTop;
-});
+  });
+};
 // 画像の読み込みが全て終わったタイミングでコールバック実行
 // FIXME 追加読み込みの場合は差分の画像のみ監視すべきだが、現状新規入室時にしか対応出来ていない。
@@ -172,15 +170,19 @@ ChatRoom.waitForLoadingImage = function (div, callback) {
    });
 };
-ChatRoom.scrollToBottom = function () {
+ChatRoom.scrollToBottom = function (animated = true) {
  const messages = $(".room_contents");
  const scrollHeight = messages.prop("scrollHeight");
-  //messages.scrollTop(scrollHeight);
  $("html, body").animate(
    {
      scrollTop: scrollHeight,
    },
-    100
+    animated ? 100 : 0,
+    function () {
+      initialLoading = false;
+      Common.dismissLoadingIndicator();
+    }
  );
 };

--- a/public_new/js/views/collaboration/collaboration-add-user.js
+++ b/public_new/js/views/collaboration/collaboration-add-user.js
 CollaborationUI.initialBindAddUserButton = function () {
  // ユーザー招待メンバー検索
  $(".add_user_btn").click(function () {
-    CollaborationUI.enableScroll();
+    CollaborationUI.bindEnableScroll();
    Common.showLoadingIndicator();
    ChatManagementCommon.selectedUserList = [];
    CollaborationUI.refreshMyGroupForAddUserInCollaboration();

--- a/public_new/js/views/collaboration/collaboration.js
+++ b/public_new/js/views/collaboration/collaboration.js
 var CollaborationUI = {};
 document.addEventListener("DOMContentLoaded", function () {
-  CollaborationUI.disableScroll();
+  CollaborationUI.bindDisableScroll();
  // メニューオーバーレイ表示
  CollaborationUI.bindMenuButton();
@@ -42,10 +42,10 @@ CollaborationUI.bindDisplayUsersButton = function () {
      .css({ transform: "translateX(" & -w & ")" });
    if ($(this).hasClass("hide")) {
-      CollaborationUI.enableScroll();
+      CollaborationUI.bindEnableScroll();
    } else {
      scrollTo(0, 0);
-      CollaborationUI.disableScroll();
+      CollaborationUI.bindDisableScroll();
    }
  });
 };
@@ -64,7 +64,7 @@ CollaborationUI.bindChangeHostButton = function () {
 CollaborationUI.bindCloseButton = function () {
  $(".close_btn").click(function () {
    $("#overlay_add_user_list").addClass("none");
-    CollaborationUI.disableScroll();
+    CollaborationUI.bindDisableScroll();
  });
 };
@@ -77,7 +77,7 @@ CollaborationUI.bindInviteButton = function () {
 /*********************************
 *  Scroll Controls
 ********************************/
-CollaborationUI.disableScroll = function () {
+CollaborationUI.bindDisableScroll = function () {
  document.addEventListener("mousewheel", CollaborationUI.scrollControl, {
    passive: false,
  });
@@ -87,7 +87,7 @@ CollaborationUI.disableScroll = function () {
 };
 // スクロール禁止解除
-CollaborationUI.enableScroll = function () {
+CollaborationUI.bindEnableScroll = function () {
  document.removeEventListener("mousewheel", CollaborationUI.scrollControl, {
    passive: false,
  });

--- a/public_new/js/views/collaboration/fermi-web-socket-bridge.js
+++ b/public_new/js/views/collaboration/fermi-web-socket-bridge.js
@@ -15,6 +15,7 @@ FermiWebSocketBridge.shareFileHost = function (collaborationType) {
 };
 FermiWebSocketBridge.hostChangeResponse = function () {
+  // TODO: peacekim:: check loginID is for fw or not
  fw.sendToMsg("others", "HOST_CHANGE_RESPONSE", {
    isAndroid: deviceInfo.isAndroid(),
    isAble: deviceInfo.androidVersion >= ANDROID_SDK_VERSION.O,

--- a/public_new/js/views/collaboration/fermi-web-socket-message-handler.js
+++ b/public_new/js/views/collaboration/fermi-web-socket-message-handler.js
@@ -69,7 +69,7 @@ FermiWebSocketMessageHandler.handleMessagesToAll = function (data) {
      }
      break;
    case "API_SEND_OWNER_CHANGE_COMPLETE":
-      FermiWebSocketMessageHandler.apiSendOwnerChangeComplete();
+      FermiWebSocketMessageHandler.apiSendOwnerChangeComplete(data);
      break;
    case "API_SEND_OWNER_CHANGE_CONFIRM":
      if (globalUserInfo.collaborationType == COLLABORATION_TYPE.CAMERA) {
@@ -143,9 +143,8 @@ FermiWebSocketMessageHandler.shareFileHost = function () {
 // CAPTURE_REQUEST
 FermiWebSocketMessageHandler.captureRequest = function (data) {
-  if (
+  const name = data.payload.name;
-    confirm(data.payload.name + getLocalizedString("request_capture")) == false
+  if (confirm(name + getLocalizedString("request_capture")) == false) {
-  ) {
    return;
  }
@@ -155,13 +154,13 @@ FermiWebSocketMessageHandler.captureRequest = function (data) {
      $("#screenLock").remove();
      captureAndShareImage(
        serverInfo.cmsURL + "/chatapi/file/uploadArchive",
-        data.payload.name
+        name
      );
    });
  } else {
    captureAndShareImage(
      serverInfo.cmsURL + "/chatapi/file/uploadArchive",
-      data.payload.name
+      name
    );
  }
 };
@@ -199,7 +198,7 @@ FermiWebSocketMessageHandler.pipEndRequest = function () {
 };
 // API_SEND_OWNER_CHANGE_COMPLETE
-FermiWebSocketMessageHandler.apiSendOwnerChangeComplete = function () {
+FermiWebSocketMessageHandler.apiSendOwnerChangeComplete = function (data) {
  penOff();
  if ($("#recordBtn .record").hasClass("disable")) {
    recordStop(function () {});
@@ -225,6 +224,7 @@ FermiWebSocketMessageHandler.changeHostApplyForNotHost = function (data) {
 // CHANGE_HOST_APPLY
 FermiWebSocketMessageHandler.changeHostApplyForHost = function (data) {
+  const hostID = data.payload.hostId;
  coview_api.HeartBeatUser(globalUserInfo.loginId);
  NativeBridgeDelegate.finishPIPMode(true);
  if (deviceInfo.isAndroid()) {
@@ -235,17 +235,13 @@ FermiWebSocketMessageHandler.changeHostApplyForHost = function (data) {
  waitMillisecond(500);
-  if (
+  if (confirm(getLocalizedString("norify_request_host_change", hostID))) {
-    confirm(
+    CoviewBridge.changeHost(getFermiLoginId(hostID));
-      getLocalizedString("norify_request_host_change", data.payload.hostId)
-    )
-  ) {
-    CoviewBridge.changeHost(getFermiLoginId(data.payload.hostId));
    NativeBridgeDelegate.setHostRequestFlg(HostRequestFlag.DONE);
  } else {
-    FermiWebSocketBridge.hostRequestReject(data.payload.hostId);
+    FermiWebSocketBridge.hostRequestReject(hostID);
  }
-  FermiWebSocketBridge.hostRequestDone(data.payload.hostId);
+  FermiWebSocketBridge.hostRequestDone(hostID);
 };
 // HOST_REQUEST_DONE
@@ -268,19 +264,19 @@ FermiWebSocketMessageHandler.getCollaborationType = function (data) {
 // GET_COLLABORATION_TYPE_RESPONSE
 FermiWebSocketMessageHandler.getCollaborationTypeResponse = function (data) {
-  FermiWebSocketMessageHandler.updateJoinChangeCollaboration(
+  const collaborationType = data.payload.collaborationType;
-    data.payload.collaborationType
+  const meetingID = data.payload.newMeetingId;
-  );
+  FermiWebSocketMessageHandler.updateJoinChangeCollaboration(collaborationType);
-  globalUserInfo.meetingID = data.payload.newMeetingId;
+  globalUserInfo.meetingID = meetingID;
  CollaborationUI.updateScreen(globalUserInfo.collaborationType);
  NativeBridgeDelegate.joinChangedCollaboration(
    globalUserInfo.collaborationType,
-    data.payload.newMeetingId
+    meetingID
  );
  if (globalUserInfo.collaborationType == COLLABORATION_TYPE.DOCUMENT) {
-    NativeBridgeDelegate.joinMeetingRoom(data.payload.newMeetingId);
+    NativeBridgeDelegate.joinMeetingRoom(meetingID);
  }
 };

--- a/public_new/js/views/collaboration/share-bind-button-action.js
+++ b/public_new/js/views/collaboration/share-bind-button-action.js
@@ -118,36 +118,39 @@ function mainManRecordWithCollaboration(action, url, callback) {
    formData.append("fileData", blob, uploadFileName);
    formData.append("sid", globalUserInfo.sid);
    formData.append("roomId", globalUserInfo.roomId);
-    if (globalUserInfo.collaborationType == COLLABORATION_TYPE.VIDEO) {
+    let collaborationType =
-      formData.append("archiveType", 1);
+      globalUserInfo.collaborationType == COLLABORATION_TYPE.VIDEO
-    } else {
+        ? ARCHIVE_TYPE.VIDEO
-      formData.append("archiveType", 2);
+        : ARCHIVE_TYPE.VOICE;
-    }
+    formData.append("archiveType", collaborationType);
-    $.ajax({
-      type: "post",
+    postRecords(url, formData, callback);
-      url,
-      data: formData,
-      contentType: false,
-      processData: false,
-      success: function (res) {
-        recordFinished();
-        Common.dismissLoadingIndicator();
-        callback();
-      },
-      error: function (err) {
-        recordFinished();
-        Common.dismissLoadingIndicator();
-        callback();
-      },
-    });
  }, 1000);
 }
-function postRecords() {}
+function postRecords(url, formData, callback) {
+  $.ajax({
+    type: "post",
+    url: url,
+    data: formData,
+    contentType: false,
+    processData: false,
+    success: function (res) {
+      recordFinished();
+      Common.dismissLoadingIndicator();
+      callback();
+    },
+    error: function (err) {
+      recordFinished();
+      Common.dismissLoadingIndicator();
+      callback();
+    },
+  });
+}
 // div削除関数
-function deleteDOMObject(id_name) {
+function deleteDOMObject(idName) {
-  const dom_obj = document.getElementById(id_name);
+  const domObj = document.getElementById(idName);
-  const dom_obj_parent = dom_obj.parentNode;
+  const domObjParent = domObj.parentNode;
-  dom_obj_parent.removeChild(dom_obj);
+  domObjParent.removeChild(domObj);
 }
--- a/public_new/js/views/collaboration/share-event-listener.js
+++ b/public_new/js/views/collaboration/share-event-listener.js
@@ -121,7 +121,7 @@ CoviewBridge.bindMessageEvent = function () {
        if (json.resultCode != 200) {
          break;
        }
-        CollaborationFeature.searchHostIntervally();
+        CollaborationFeature.updateHost();
      // fall through
      case "RoomMemberJoinedEvent":
      // fall through
@@ -150,6 +150,10 @@ CoviewBridge.bindMessageEvent = function () {
          });
        }
        break;
+      case "IceCandidateEvent": // do nothing for ice condidate event
+        break;
+      case "HeartbeatResponse": // do nothing for heartbeat response
+        break;
      default:
        console.debug("Unrecognized api", json);
        break;
@@ -158,8 +162,6 @@ CoviewBridge.bindMessageEvent = function () {
 };
 CollaborationFeature.didReceiveLoginResponseMessage = async function () {
-  CollaborationFeature.searchHostIntervally();
  const isDocument =
    globalUserInfo.collaborationType == COLLABORATION_TYPE.DOCUMENT;
  const isAttendee =
@@ -171,7 +173,8 @@ CollaborationFeature.didReceiveLoginResponseMessage = async function () {
      NativeBridgeDelegate.startContentView();
    } else if (isHost) {
      globalUserInfo.meetingID = NativeBridgeDataSource.createContentView();
-      if (globalUserInfo.meetingID == "-1") { //会議室作成失敗
+      if (globalUserInfo.meetingID == "-1") {
+        //会議室作成失敗
        CoviewBridge.finishCollaboration();
        return;
      }
@@ -182,7 +185,9 @@ CollaborationFeature.didReceiveLoginResponseMessage = async function () {
    case COLLABORATION_JOIN_TYPE.INVITED:
    // fall through
    case COLLABORATION_JOIN_TYPE.ATTENDEE:
+      // TODO:: here to update host
      coview_api.JoinRoom(globalUserInfo.roomId, globalUserInfo.coWorkType);
      break;
    case COLLABORATION_JOIN_TYPE.HOST:
      let deleteRoomResult = JSON.parse(
@@ -196,9 +201,7 @@ CollaborationFeature.didReceiveLoginResponseMessage = async function () {
    default:
      break;
  }
+  CollaborationFeature.updateHost();
  CollaborationUI.moveToVideoShareArea();
 };
@@ -246,26 +249,18 @@ CoviewBridge.addLoginID = function (loginID) {
  });
 };
-CollaborationFeature.searchHostIntervally = function () {
+CollaborationFeature.updateHost = function () {
-  let hostName = "";
+  if (g_isMainMan) {
-  function searchHost() {
+    CollaborationUI.showHostButtons();
-    if (g_isMainMan) {
+  } else {
-      CollaborationUI.showHostButtons();
+    CollaborationUI.hideHostButtons();
-    } else {
-      CollaborationUI.hideHostButtons();
-    }
-    CollaborationUI.showHostMark(hostName);
-    if (hostName != g_isMainManUsername) {
-      hostName = g_isMainManUsername;
-    }
  }
-  timeInterval = setInterval(searchHost, 2000);
+  CollaborationUI.showHostMark(g_isMainManUsername);
 };
 CollaborationUI.showHostButtons = function () {
-  $("#collaboration_user_" + currentUserInfo.loginID).addClass("host");
  $(".host_contents").removeClass("none");
  if (globalUserInfo.collaborationType == COLLABORATION_TYPE.CAMERA) {
    $(".photo_select_button").removeClass("none");
@@ -277,7 +272,7 @@ CollaborationUI.showHostButtons = function () {
 };
 CollaborationUI.hideHostButtons = function () {
-  $("#collaboration_user_" + currentUserInfo.loginID).removeClass("host");
  $(".host_contents").addClass("none");
  if (globalUserInfo.collaborationType == COLLABORATION_TYPE.CAMERA) {
    $(".photo_select_button").addClass("none");
@@ -298,13 +293,7 @@ CollaborationUI.showHostMark = function (hostName) {
  const replacedMainManUserID = $(
    "#collaboration_user_" + getReplacedLoginId(g_isMainManUsername)
  );
-  if (hostName != g_isMainManUsername) {
-    if (hostName != "") {
-      replaceHostIDDiv.removeClass("host");
-    }
-    replacedMainManUserID.addClass("host");
-    return;
-  }
  if (hostName == "") {
    if (!currentUserLoginIDDiv.hasClass("host") && coview_api.getRoomUsers()) {
      currentUserLoginIDDiv.addClass("host");
@@ -414,6 +403,7 @@ function getReplacedLoginId(loginId) {
 CoviewBridge.exitCollaboration = function () {
  CollaborationFeature.disableScrollLock();
+  Common.showLoadingIndicator();
  if (g_isMainMan) {
    CHAT_SOCKET.emitCollaborationFinishMessage();
@@ -430,9 +420,8 @@ CoviewBridge.exitCollaboration = function () {
 };
 CoviewBridge.finishCollaboration = function () {
-  clearInterval(timeInterval);
+  Common.showLoadingIndicator();
  coview_api.LeaveRoom();
-  NativeBridgeDelegate.finishCollaboration(true);
  if (coview_api.getRoomUsers()) {
    NativeBridgeDelegate.finishCollaboration();
  }
@@ -443,6 +432,7 @@ CoviewBridge.finishCollaboration = function () {
  } else {
    NativeBridgeDelegate.joinRoom(roomInfo.roomID, roomInfo.roomName);
  }
+  Common.dismissLoadingIndicator();
 };
 // Display User List
@@ -454,7 +444,6 @@ CollaborationUI.refreshJoinedCollaboration = function (loginIDList) {
    );
  }
-  Common.showLoadingIndicator();
  $("#collaboration_overlay_user_list").html("");
  const joinedUserListTemplate = getTemplate(
@@ -484,7 +473,7 @@ CollaborationUI.refreshJoinedCollaboration = function (loginIDList) {
  let obj = jQuery.parseHTML(html);
  $("#collaboration_overlay_user_list").append(obj);
-  Common.dismissLoadingIndicator();
+  CollaborationFeature.updateHost();
 };
 CollaborationUI.moveToVideoShareArea = function () {

--- a/public_new/js/views/collaboration/share.js
+++ b/public_new/js/views/collaboration/share.js
@@ -3,7 +3,6 @@
 /* --------------------------------------------------- */
 let coview_api = new CoviewApi();
 var isBoard = false;
-let timeInterval = null;
 var backgroundFileName;
 document.addEventListener("DOMContentLoaded", function () {

--- a/public_new/loading.html
+++ b/public_new/loading.html
-<div id="loader-bg" class="loading-indicator">
-  <div id="loader" class="loading-indicator">
-    <div class="sp sp-circle"></div>
-  </div>
-</div>
\ No newline at end of file
--- a/public_new/modal_chat_profile.html
+++ b/public_new/modal_chat_profile.html
-<div class="modal profile_modal" id="profileModal1" tabindex="-1" role="dialog" aria-labelledby="profileModal1"
+<div class="modal fade profile_modal" id="profileModal1" tabindex="-1" role="dialog" aria-labelledby="profileModal1"
  aria-hidden="true">
  <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" style="font-size:40px;">&times;</span>
+        </button>
        <div class="profile_desc d-flex flex-row">
          <img src="img/noImage.svg" alt="プロフィール画像">
          <div class="prifile_name"><span>名前　名前</span></div>
        </div>
-        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-          <span aria-hidden="true" style="font-size:40px;">&times;</span>
-        </button>
      </div>
      <div class="modal-body">
        <p>

--- a/public_new/modal_collabo_capture.html
+++ b/public_new/modal_collabo_capture.html
@@ -7,7 +7,7 @@
      </div>
      <div class="modal-body">
        <div class="img_wrap">
-          <img src="img/capture.svg" alt="キャプチャ画像">
+          <img src="icon/icon_collabo_capture.svg" alt="キャプチャ画像">
        </div>
        <p>filename.jpg</p>
      </div>

--- a/public_new/modal_collabo_profile.html
+++ b/public_new/modal_collabo_profile.html
-<div class="modal profile_modal w_50" id="userNameCardInCollaboration" tabindex="-1" role="dialog"
+<div class="modal fade profile_modal w_50" id="userNameCardInCollaboration" tabindex="-1" role="dialog"
  aria-labelledby="userNameCardInCollaboration" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
-    <div class="modal-content-wrap d-flex align-items-center">
+    <div class="modal-content-wrap d-flex align-items-center m-auto">
-      <div class="modal-content item01">
+      <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" style="font-size:40px;">&times;</span>
+          </button>
          <div class="profile_desc_ d-flex flex-row">
            <img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" />
            <div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div>
          </div>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true" style="font-size:40px;">&times;</span>
-          </button>
        </div>
        <div class="modal-body">
          {{#groupPathList}}

--- a/public_new/template/template_document_list.html
+++ b/public_new/template/template_document_list.html
@@ -7,7 +7,7 @@
      </div>
      <div class="modal-body">
        <div class="img_wrap">
-          <img src="img/capture.svg" alt="キャプチャ画像">
+          <img src="icon/icon_collabo_capture.svg" alt="キャプチャ画像">
        </div>
        <p>filename.jpg</p>
      </div>

--- a/public_new/template/template_my_name_card.html
+++ b/public_new/template/template_my_name_card.html
-<div class="modal profile_modal" id="myNameCard" tabindex="-1" role="dialog" aria-labelledby="myNameCard" aria-hidden="true">
+<div class="modal fade profile_modal" id="myNameCard" tabindex="-1" role="dialog" aria-labelledby="myNameCard" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
-    <div class="modal-content-wrap d-flex align-items-center">
+    <div class="modal-content-wrap d-flex align-items-center m-auto">
-      <div class="modal-content item01">
+      <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" style="font-size:40px;">&times;</span>
+          </button>
          <div class="profile_desc d-flex flex-row">
            <img src="{{profileImage}}" onError="this.src='./img/noImage.png'">
            <div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div>
          </div>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true" style="font-size:40px;">&times;</span>
-          </button>
        </div>
        <div class="modal-body">
          {{#groupPathList}}

--- a/public_new/template/template_user_name_card.html
+++ b/public_new/template/template_user_name_card.html
-<div class="modal profile_modal" id="userNameCard" tabindex="-1" role="dialog" aria-labelledby="userNameCard"
+<div class="modal fade profile_modal" id="userNameCard" tabindex="-1" role="dialog" aria-labelledby="userNameCard"
  aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
-    <div class="modal-content-wrap d-flex align-items-center">
+    <div class="modal-content-wrap d-flex align-items-center m-auto">
-      <div class="modal-content item01">
+      <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" style="font-size:40px;">&times;</span>
+          </button>
          <div class="profile_desc_ d-flex flex-row">
            <img src="{{profileUrl}}" onError="this.src='./img/noImage.png'" />
            <div class="profile_name d-flex justify-content-center align-items-center"><span>{{name}}</span></div>
          </div>
-          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
-            <span aria-hidden="true" style="font-size:40px;">&times;</span>
-          </button>
        </div>
        <div class="modal-body" id="userNameCard-scroll">
          {{#groupPathList}}