Fixed message display order to colomn reversed

public_new/chat_room.html

@@ -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>

public_new/css/chat.css

@@ -478,23 +478,30 @@ input[name="tab_item"] {
   margin: 0 auto;
 }
 
+.message_container {
+  display: flex;
+  flex-direction: column-reverse;
+}
+
 .room_container {
   padding: 0;
   background: #f3f3f3;
   overflow: hidden;
   margin: 20px auto;
   margin-bottom: 140px;
-  flex-direction: column-reverse;
 }
+
 /* 会話部分 */
 .room_contents {
   padding: 10px;
   overflow: hidden;
   line-height: 150%;
 }
+
 .scroll {
   overflow-y: scroll;
 }
+
 /* 相手の会話 */
 .room_left {
   width: fit-content;

public_new/js/sockets/chat-websocket-message.js

@@ -102,7 +102,7 @@ CHAT_SOCKET.addCollaborationMessage = function (
     createdAt
   );
 
-  $("#messages").append(html);
+  $("#messages").prepend(html);
 };
 
 CHAT_SOCKET.getMeetingID = function (collaborationType, messageInfo) {
@@ -177,7 +177,7 @@ CHAT_SOCKET.addTextMessage = function (messageText, message, socketID) {
     message.userId,
     message.createdAt
   );
-  $("#messages").append(html);
+  $("#messages").prepend(html);
 };
 
 CHAT_SOCKET.renderTextMessage = function (

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) {
@@ -147,9 +147,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) {
@@ -176,19 +175,16 @@ ChatRoom.prependMessage = function (messages) {
       && !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);
 };
@@ -200,7 +196,7 @@ ChatRoom.appendInitialDateMessage = function (messages) {
       messages[messages.length - 1].insertDate,
       true
     );
-    $("#messages").prepend(html);
+    $("#messages").append(html);
   }
 };
 

public_new/js/views/chats/chat-room.js

@@ -11,16 +11,21 @@ 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")) {
+      // 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);
+      // get lastest message id and update message from server via native
       const messageID = $($(".chat_message").get(0)).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);
@@ -123,21 +128,6 @@ ChatRoom.bindUserListDisplayToggle = function () {
   });
 };
 
-//上にスクロールすると新しいメッセージを呼ぶ処理。
-$("#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 追加読み込みの場合は差分の画像のみ監視すべきだが、現状新規入室時にしか対応出来ていない。
 ChatRoom.waitForLoadingVideo = function (div, callback) {

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,