Merge branch 'refactoring/join_collaboration' into 'develop'

Refactoring/join collaboration See merge request !202

Merge branch 'refactoring/join_collaboration' into 'develop'
Refactoring/join collaboration See merge request !202
c9223c14 · Kim Peace · 976f40c4 · d39c14e0 · c9223c14 · c9223c14
Commit c9223c14 authored Jul 29, 2021 by Kim Peace
32 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,8 +125,6 @@
  <script src="./js/views/chats/chat-list.js"></script>
  <script>
-    $("#loadingArea").load("./loading.html");
    if (deviceInfo.isAndroid()) {
      const needHostAlert = android.getExitHostAlert();
      if (needHostAlert) {

--- 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
@@ -478,6 +478,11 @@ input[name="tab_item"] {
  margin: 0 auto;
 }
+.message_container {
+  display: flex;
+  flex-direction: column-reverse;
+}
 .room_container {
  padding: 0;
  background: #f3f3f3;
@@ -485,15 +490,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;

--- 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-message.js
+++ b/public_new/js/sockets/chat-websocket-message.js
-var bindOnNewMessage = function () {
+CHAT_SOCKET.bindOnNewMessage = function () {
  // New Message
  // #36170
  socket.on(SOCKET_KEY.NEW_MESSAGE, function (message, roomID, roomName) {
    const systemMessageTemplate = getTemplate(TemplateURL.SYSTEM_MESSAGE);
-    const unwrappedMessageInfo = decodeMessage(message.text);
+    const unwrappedMessageInfo = CHAT_SOCKET.decodeMessage(message.text);
    if (
      unwrappedMessageInfo ==
      DATA_MESSAGE_SCHEME + FINISH_ALL_COLLABORATION_SIGNAL
    ) {
-      cleanUpCollaborationMessage();
+      CHAT_SOCKET.cleanUpCollaborationMessage();
      return;
    }
@@ -22,7 +22,7 @@ var bindOnNewMessage = function () {
        messageType == MessageType.COMMUNICATIONSTART ||
        messageType == MessageType.COMMUNICATIONEND
      ) {
-        addCollaborationMessage(
+        CHAT_SOCKET.addCollaborationMessage(
          messageInfo,
          message.userId,
          roomName,
@@ -30,7 +30,7 @@ var bindOnNewMessage = function () {
          message.createdAt
        );
      } else {
-        addTextMessage(messageText, message, socket.id);
+        CHAT_SOCKET.addTextMessage(messageText, message, socket.id);
      }
    }
@@ -39,11 +39,13 @@ var bindOnNewMessage = function () {
      setTimeout(function () {
        ChatRoom.scrollToBottom();
      }, 300);
+    } else {
+      Common.dismissLoadingIndicator();
    }
  });
 };
-var decodeMessage = function (text) {
+CHAT_SOCKET.decodeMessage = function (text) {
  try {
    return decodeURIComponent(text);
  } catch (e) {
@@ -51,7 +53,7 @@ var decodeMessage = function (text) {
  }
 };
-var addCollaborationMessage = function (
+CHAT_SOCKET.addCollaborationMessage = function (
  messageInfo,
  userID,
  roomName,
@@ -59,7 +61,7 @@ var addCollaborationMessage = function (
  createdAt
 ) {
  const collaborationType = CHAT_UTIL.getCollaborationType(messageInfo[2]);
-  const meetingID = getMeetingID(collaborationType, messageInfo);
+  const meetingID = CHAT_SOCKET.getMeetingID(collaborationType, messageInfo);
  const userInCollaboration = JSON.parse(
    NativeBridgeDataSource.getUserInfoList(userID)
  );
@@ -72,7 +74,7 @@ var addCollaborationMessage = function (
    TemplateURL.OPEN_COLLABORATION_MESSAGE
  );
-  const html = renderCollaborationMessage(
+  const html = CHAT_SOCKET.renderCollaborationMessage(
    openCollaborationMessageTemplate,
    roomName,
    userInCollaboration,
@@ -82,10 +84,10 @@ var addCollaborationMessage = function (
    createdAt
  );
-  $("#messages").append(html);
+  $("#messages").prepend(html);
 };
-var getMeetingID = function (collaborationType, messageInfo) {
+CHAT_SOCKET.getMeetingID = function (collaborationType, messageInfo) {
  if (collaborationType == COLLABORATION_TYPE.DOCUMENT) {
    return messageInfo[3];
  } else {
@@ -93,7 +95,7 @@ var getMeetingID = function (collaborationType, messageInfo) {
  }
 };
-var renderCollaborationMessage = function (
+CHAT_SOCKET.renderCollaborationMessage = function (
  template,
  roomName,
  userList,
@@ -118,15 +120,17 @@ var renderCollaborationMessage = function (
  });
 };
-var addTextMessage = function (messageText, message, socketID) {
+CHAT_SOCKET.addTextMessage = function (messageText, message, socketID) {
-  const messageTextWithSID = insertSID(messageText);
+  const messageTextWithSID = CHAT_SOCKET.insertSID(messageText);
  const messageSender = JSON.parse(
    NativeBridgeDataSource.getUserInfoList(message.userId)
  );
  const shopMemberName = messageSender[0].shopMemberName;
-  const textMessageTemplate = getTextMessageTemplate(message.id === socketID);
+  const textMessageTemplate = CHAT_SOCKET.getTextMessageTemplate(
+    message.id === socketID
+  );
  const profileImagePath = Common.getProfileImgUrl(message.profileImagePath);
-  const html = renderTextMessage(
+  const html = CHAT_SOCKET.renderTextMessage(
    textMessageTemplate,
    messageTextWithSID,
    shopMemberName,
@@ -134,10 +138,10 @@ var addTextMessage = function (messageText, message, socketID) {
    message.userId,
    message.createdAt
  );
-  $("#messages").append(html);
+  $("#messages").prepend(html);
 };
-var renderTextMessage = function (
+CHAT_SOCKET.renderTextMessage = function (
  template,
  text,
  from,
@@ -165,11 +169,11 @@ var renderTextMessage = function (
  }
 };
-var getUserInfoList = function (userID) {
+CHAT_SOCKET.getUserInfoList = function (userID) {
  return JSON.parse(NativeBridgeDataSource.getUserInfoList(userID));
 };
-var cleanUpCollaborationMessage = function () {
+CHAT_SOCKET.cleanUpCollaborationMessage = function () {
  $(".collabo_area.start").each(function (index, collaborationMessage) {
    $(collaborationMessage).removeClass("start");
    $(collaborationMessage).addClass("end");
@@ -179,11 +183,11 @@ var cleanUpCollaborationMessage = function () {
      .attr("disabled", "disabled");
    $(collaborationMessage)
      .find(".collaboration_join_message")
-      .text(getLocalizedString("message_ended"));
+      .text(getLocalizedString("flex-directionmessage_ended"));
  });
 };
-var insertSID = function (text) {
+CHAT_SOCKET.insertSID = function (text) {
  let replacePath = text;
  replacePath = replacePath.replaceAll(
    "?fileName=",
@@ -192,7 +196,7 @@ var insertSID = function (text) {
  return replacePath;
 };
-var getTextMessageTemplate = function (isSenderMySelf) {
+CHAT_SOCKET.getTextMessageTemplate = function (isSenderMySelf) {
  return getTemplate(
    isSenderMySelf
      ? TemplateURL.MY_MESSAGE // ユーザーが送信したメッセージの場合、自分のメッセージ様式を適用して表示する

--- 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();
@@ -197,7 +197,7 @@ CHAT_SOCKET.emitCollaborationFinishMessage = function () {
    const sendData = DATA_MESSAGE_SCHEME + FINISH_ALL_COLLABORATION_SIGNAL;
    CHAT_SOCKET.emitCreateMessage(sendData, 0);
  }
-}
+};
 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) {
+    setTimeout(function () {
      if (!$("#chatLoader").is(":visible")) {
+        // display loading indicator in chat message
        let loader = $(
          '<div id="chatLoader" class="text-center"><div class="spinner-grow spinner-grow-sm" role="status" /></div>'
        );
-      $("#messages").prepend(loader);
+        $("#messages").append(loader);
-      const messageID = $($(".chat_message").get(0)).data("messageid");
+        // get lastest message id and update message from server via native
+        const messageID = $($(".chat_message").last()).data("messageid");
        NativeBridgeDelegate.updatePreMessage(messageID);
        let messages = NativeBridgeDataSource.getMessagesByMessageID(messageID);
+        // 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,9 +114,10 @@ ChatRoom.bindMessageInput = function () {
 };
 // 下スクロールでユーザーリストを非表示
-var startPos = 0;
+ChatRoom.bindUserListDisplayToggle = function () {
-var winScrollTop = 0;
+  let startPos = 0;
-$(window).on("scroll", function () {
+  let winScrollTop = 0;
+  $(window).on("scroll", function () {
    winScrollTop = $(this).scrollTop();
    if (winScrollTop >= startPos) {
      if (winScrollTop >= 200) {
@@ -115,22 +127,8 @@ $(window).on("scroll", function () {
      $("#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();
-    }
-  }
-});
 // 画像の読み込みが全て終わったタイミングでコールバック実行
 // 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,14 +118,20 @@ 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);
+    postRecords(url, formData, callback);
+  }, 1000);
+}
+function postRecords(url, formData, callback) {
  $.ajax({
    type: "post",
-      url,
+    url: url,
    data: formData,
    contentType: false,
    processData: false,
@@ -140,14 +146,11 @@ function mainManRecordWithCollaboration(action, url, callback) {
      callback();
    },
  });
-  }, 1000);
 }
-function postRecords() {}
 // 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();
 };
@@ -249,26 +252,18 @@ CoviewBridge.addLoginID = function (loginID) {
  });
 };
-CollaborationFeature.searchHostIntervally = function () {
+CollaborationFeature.updateHost = function () {
-  let hostName = "";
-  function searchHost() {
  if (g_isMainMan) {
    CollaborationUI.showHostButtons();
  } else {
    CollaborationUI.hideHostButtons();
  }
-    CollaborationUI.showHostMark(hostName);
+  CollaborationUI.showHostMark(g_isMainManUsername);
-    if (hostName != g_isMainManUsername) {
-      hostName = g_isMainManUsername;
-    }
-  }
-  timeInterval = setInterval(searchHost, 2000);
 };
 CollaborationUI.showHostButtons = function () {
-  $("#collaboration_user_" + currentUserInfo.loginID).addClass("host");
  $(".host_contents").removeClass("none");
  if (globalUserInfo.collaborationType == COLLABORATION_TYPE.CAMERA) {
    $(".photo_select_button").removeClass("none");
@@ -280,7 +275,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");
@@ -301,13 +296,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");
@@ -417,6 +406,7 @@ function getReplacedLoginId(loginId) {
 CoviewBridge.exitCollaboration = function () {
  CollaborationFeature.disableScrollLock();
+  Common.showLoadingIndicator();
  if (g_isMainMan) {
    CHAT_SOCKET.emitCollaborationFinishMessage();
@@ -433,9 +423,8 @@ CoviewBridge.exitCollaboration = function () {
 };
 CoviewBridge.finishCollaboration = function () {
-  clearInterval(timeInterval);
+  Common.showLoadingIndicator();
  coview_api.LeaveRoom();
-  NativeBridgeDelegate.finishCollaboration(true);
  if (coview_api.getRoomUsers()) {
    NativeBridgeDelegate.finishCollaboration();
  }
@@ -446,6 +435,7 @@ CoviewBridge.finishCollaboration = function () {
  } else {
    NativeBridgeDelegate.joinRoom(roomInfo.roomID, roomInfo.roomName);
  }
+  Common.dismissLoadingIndicator();
 };
 // Display User List
@@ -457,7 +447,6 @@ CollaborationUI.refreshJoinedCollaboration = function (loginIDList) {
    );
  }
-  Common.showLoadingIndicator();
  $("#collaboration_overlay_user_list").html("");
  const joinedUserListTemplate = getTemplate(
@@ -487,7 +476,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_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/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>