Merge branch 'bugfix/#613_チャットルームに動画があると最新メッセージが表示されない' into 'release_sp3'

#42526 チャット一覧からチャット後のルームを選択すると、最新メッセージが表示されない

See merge request !87

public_new/chat_room.html

@@ -150,6 +150,7 @@
   <script src="./js/libs/jquery.mark.min.js"></script>
   <script src="./js/common.js"></script>
   <script src="./js/language.js"></script>
+  <script src="./js/loading.js"></script>
   <script src="./js/language_ko.js" charset="UTF-8"></script>
   <script src="./js/language_ja.js" charset="UTF-8"></script>
   <script src="./js/language_en.js" charset="UTF-8"></script>
@@ -169,6 +170,7 @@
     String.prototype.replaceAll = function(org, dest) {
       return this.split(org).join(dest);
     }
+    $("#loadingArea").load("./loading.html");
 
     let CHAT_SERVER_URL = '';
     let CMS_SERVER_URL = '';

public_new/js/chat-ui.js

@@ -554,8 +554,8 @@ CHAT_UI.scrollToBottom = function() {
     const scrollHeight = messages.prop('scrollHeight');
     //messages.scrollTop(scrollHeight);
     $('html, body').animate({
-        scrollTop: 9999999
-    }, 500);
+        scrollTop: scrollHeight
+    }, 100);
 };
 
 CHAT_UI.scrollToLastMarkedUnseen = function(value) {
@@ -879,6 +879,24 @@ CHAT_UI.htmlElementTextInitialize = function(languageCode) {
 
 // 画像の読み込みが全て終わったタイミングでコールバック実行
 // FIXME 追加読み込みの場合は差分の画像のみ監視すべきだが、現状新規入室時にしか対応出来ていない。
+CHAT_UI.waitForLoadingVideo = function(div, callback) {
+    CHAT_UI.showLoadingIndicator();
+//    var imgs = document.getElementsByTagName("video");
+    var video = div.find("video");
+    var count = video.length;
+    if (count==0) callback();
+    var loaded = 0;
+    video.each( function() {
+        this.addEventListener('loadeddata', function(e) {
+                 loaded++;
+                 if ( loaded === count ) {
+                     callback();
+                     CHAT_UI.dismissLoadingIndicator();
+                 }
+        });
+    });
+}
+
 CHAT_UI.waitForLoadingImage = function(div, callback) {
     var imgs = div.find("img");
     console.log(imgs);
@@ -897,10 +915,8 @@ CHAT_UI.waitForLoadingImage = function(div, callback) {
         if ( this.complete || this.readyState === readyState.COMPLETED ) {
             $(this).trigger("load");
         }
-
     });
 }
-
 $('#contactButton').on('click', function(event) {
     CHAT_UI.refreshContactScreen();
 });
@@ -1323,27 +1339,13 @@ CHAT_UI.loadMessages = function(roomId, roomName) {
             workVal = html + workVal;
         }
     })
-
     // メッセージの画面描画
     jQueryMessages.prepend(workVal);
-    if (beforeHeight !== 0) {
-        // 追加のメッセージ読み込み時は読み込み前のスクロール位置を維持
-        setTimeout(function() {
-            jQueryMessages.scrollTop(jQueryMessages.prop('scrollHeight') - beforeHeight);
-        }, 400);
-    } else {
-        // 新規に入室の場合は最下部へスクロール
-        CHAT_UI.waitForLoadingImage(jQueryMessages, CHAT_UI.scrollToBottom);
-        // タブレット等、画面サイズが大きい場合、スクロール出来なくならないよう追加で10件メッセージを取得
-        if ($(window).height() > jQueryMessages.height()) {
-            $('#messages').scroll();
-        }
-    }
+
     CHAT_UI.waitForLoadingImage(jQueryMessages, CHAT_UI.scrollToBottom);
+    CHAT_UI.waitForLoadingVideo(jQueryMessages, CHAT_UI.scrollToBottom);
     // ユーザ削除ボタン表示しない
     $("#userSelectionDeleteBtn").hide();
-    setInterval(updateDuration, 1000);
-    CHAT_UI.scrollToBottom();
 };
 
 
@@ -2166,7 +2168,6 @@ CHAT_UI.showAddUserConfirmView = function() {
 
     var selectedUserList = CHAT_DB.loadSelectedUsers();
 
-    console.log("check = " + selectedUserList);
     selectedUserList.forEach(function(user){
          let html = Mustache.render(userTemplate, {
                  id: user.shopMemberId,

public_new/js/chat.js

@@ -87,7 +87,7 @@ CHAT.createVideoThumbnailAndUpload = function(sourceImage, callback) {
         // Load video in Safari / IE11
         video.muted = true;
         video.playsInline = true;
-        video.play();
+        video.pause();
     };
     fileReader.readAsArrayBuffer(sourceImage);
 }