Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

electron-builder.json

@@ -48,7 +48,7 @@
     "title": "DS Talk"
   },
   "win": {
-    "target": ["zip", "nsis"],
+    "target": ["nsis-web"],
     "icon": "./config/build/win/icon/daesang/16x16.ico",
     "legalTrademarks": "(c) 2015 lgucap.com",
     "publisherName": "LGCNS",
@@ -72,5 +72,13 @@
     "perMachine": false,
     "differentialPackage": true,
     "include": "./config/build/win/nsis/installer.nsh"
+  },
+  "nsisWeb": {
+    "appPackageUrl": "https://messenger.daesang.com/AppDist/pc/",
+    "oneClick": true,
+    "allowToChangeInstallationDirectory": false,
+    "perMachine": false,
+    "differentialPackage": true,
+    "include": "./config/build/win/nsis/installer.nsh"
   }
 }

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html

@@ -10,15 +10,10 @@
   (psYReachEnd)="onYReachEnd($event)"
   [enableUnequalChildrenSizes]="true"
   [modifyOverflowStyleOfParentScroll]="false"
-  (vsChange)="onVsChange($event)"
 >
+  <div #chatMessagesContainer class="chat-messages">
     <div
-    #chatMessagesContainer
-    class="chat-messages hide"
-    [style.opacity]="fixScreen ? 0 : 1"
-  >
-    <div
-      *ngIf="eventRemained && eventList.length > 0"
+      *ngIf="eventRemained && !!eventList && eventList.length > 0"
       class="message-row view-previous"
     >
       <button mat-button (click)="onClickMore($event)" class="bg-accent-dark">
@@ -63,7 +58,7 @@
         [mine]="message.senderSeq === loginRes.userSeq"
         [highlight]="isHighlightedEvent(message.seq)"
         [existReadToHere]="
-          getReadHere(message) && existReadHere && !clearReadHere
+          readToHereEvent && readToHereEvent.seq === message.seq
         "
         [dateChanged]="getDateSplitter(message)"
         [senderName]="getUserName(message.senderSeq)"
@@ -83,3 +78,9 @@
     </div>
   </div>
 </virtual-scroller>
+
+<div
+  #chatMessagesBuffer
+  fxFlexFill
+  class="chat-messages-buffer disappear"
+></div>

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss

@@ -189,3 +189,15 @@ $meBox-bg: #ffffff;
 .hide {
   opacity: 0 !important;
 }
+
+.disappear {
+  display: none !important;
+}
+
+.chat-messages-buffer {
+  position: absolute;
+  top: 0px;
+  overflow-y: hidden !important;
+  padding: 30px 40px;
+  flex-direction: column;
+}

projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts

@@ -27,7 +27,6 @@ import { DatePipe } from '@angular/common';
 import moment from 'moment';
 import { FileDownloadItem } from '@ucap-webmessenger/api';
 import { TranslateService } from '@ngx-translate/core';
-import { PerfectScrollbarDirective } from 'ngx-perfect-scrollbar';
 import { Observable, Subscription } from 'rxjs';
 import { VirtualScrollerComponent, IPageInfo } from 'ngx-virtual-scroller';
 
@@ -108,8 +107,8 @@ export class MessagesComponent implements OnInit, OnDestroy {
   @ViewChild('chatMessagesContainer', { static: false })
   chatMessagesContainer: ElementRef<HTMLElement>;
 
-  @ViewChild(PerfectScrollbarDirective, { static: false })
-  psChatContent: PerfectScrollbarDirective;
+  @ViewChild('chatMessagesBuffer', { static: false })
+  chatMessagesBuffer: ElementRef<HTMLElement>;
 
   @ViewChild(VirtualScrollerComponent, { static: false })
   private virtualScroller: VirtualScrollerComponent;
@@ -141,8 +140,8 @@ export class MessagesComponent implements OnInit, OnDestroy {
   profileImageRoot: string;
   moment = moment;
 
-  existReadHere = false;
-  fixScreen = false;
+  readToHereEvent: Info<EventJson>;
+  swapped = false;
 
   constructor(
     private logger: NGXLogger,
@@ -181,6 +180,8 @@ export class MessagesComponent implements OnInit, OnDestroy {
         this.firstCheckReadHere = false;
       }
 
+      this.readToHereEvent = eventList.find(e => this.getReadHere(e));
+
       this.eventList = eventList;
       this.changeDetectorRef.detectChanges();
 
@@ -358,7 +359,6 @@ export class MessagesComponent implements OnInit, OnDestroy {
             this.eventList[messageIndex].seq ===
             this.roomInfo.lastReadEventSeq + 1
           ) {
-            this.existReadHere = true;
             return true;
           }
         }
@@ -381,42 +381,71 @@ export class MessagesComponent implements OnInit, OnDestroy {
     ];
   }
 
-  scrollToStoredItem() {
-    if (!this.scrollUpInitalized) {
-      this.chatMessagesContainer.nativeElement.classList.remove('hide');
+  swapScroll(
+    to: Info<EventJson>,
+    preCallback: () => void,
+    postCallback: () => void,
+    useSwap: boolean = true
+  ) {
+    this.preSwapScroll(useSwap);
+    if (!!preCallback) {
+      preCallback();
     }
-
-    this.virtualScroller.scrollInto(this.storedScrollItem, true, 0, 0, () => {
-      this.storedScrollItem = undefined;
+    this.virtualScroller.scrollInto(to, true, 0, 0, () => {
+      setTimeout(() => {
+        if (!!postCallback) {
+          postCallback();
+        }
+        this.postSwapScroll(useSwap);
+      }, 100);
     });
   }
 
-  ready(): void {
-    if (!this.scrollUpInitalized) {
+  preSwapScroll(useSwap: boolean = true) {
+    if (useSwap && !this.swapped) {
+      this.chatMessagesBuffer.nativeElement.innerHTML = this.chatMessagesContainer.nativeElement.innerHTML;
+      this.chatMessagesBuffer.nativeElement.scrollTop = this.chatMessagesContainer.nativeElement.scrollTop;
+      this.chatMessagesBuffer.nativeElement.classList.remove('disappear');
+      this.swapped = true;
+    }
+
     this.chatMessagesContainer.nativeElement.classList.add('hide');
   }
 
-    setTimeout(() => {
+  postSwapScroll(useSwap: boolean = true) {
+    if (useSwap && this.swapped) {
+      this.chatMessagesBuffer.nativeElement.innerHTML = '';
+      this.chatMessagesBuffer.nativeElement.scrollTop = 0;
+      this.chatMessagesBuffer.nativeElement.classList.add('disappear');
+      this.swapped = false;
+    }
+
+    this.chatMessagesContainer.nativeElement.classList.remove('hide');
+  }
+
+  ready(): void {
     this.scrollToBottom();
-    });
   }
 
   scrollToBottom(speed?: number): void {
     if (!!this.storedScrollItem) {
-      // if (this.psChatContent) {
-      //   this.psChatContent.update();
-
-      const element = document.getElementById('message-box-readhere');
-      if (!!element && this.firstCheckReadHere) {
-        setTimeout(() => {
-          this.psChatContent.scrollToTop(element.offsetTop - 200, speed);
-        });
-
+      if (!!this.readToHereEvent && this.firstCheckReadHere) {
+        this.swapScroll(
+          this.readToHereEvent,
+          () => {},
+          () => {
             this.firstCheckReadHere = false;
-      } else {
-        this.scrollToStoredItem();
           }
-      // }
+        );
+      } else {
+        this.swapScroll(
+          this.storedScrollItem,
+          () => {},
+          () => {
+            this.storedScrollItem = undefined;
+          }
+        );
+      }
     } else if (this.scrollUpInitalized) {
       if (!!this.newEventList && this.newEventList.length > 0) {
         this.existNewMessage.emit(
@@ -425,27 +454,22 @@ export class MessagesComponent implements OnInit, OnDestroy {
       }
     } else {
       speed = speed || 0;
-      if (this.psChatContent) {
-        this.psChatContent.update();
 
-        const element = document.getElementById('message-box-readhere');
-        if (!!element && this.firstCheckReadHere) {
-          setTimeout(() => {
-            this.psChatContent.scrollToTop(element.offsetTop - 200, speed);
-          });
-
-          this.firstCheckReadHere = false;
-        } else {
-          this.virtualScroller.scrollToIndex(
-            this.eventList.length - 1,
-            true,
-            0,
-            0,
+      if (!!this.readToHereEvent && this.firstCheckReadHere) {
+        this.swapScroll(
+          this.readToHereEvent,
+          () => {},
           () => {
-              this.chatMessagesContainer.nativeElement.classList.remove('hide');
+            this.firstCheckReadHere = false;
           }
         );
-        }
+      } else {
+        this.swapScroll(
+          this.eventList[this.eventList.length - 1],
+          () => {},
+          () => {},
+          false
+        );
       }
     }
   }
@@ -459,23 +483,9 @@ export class MessagesComponent implements OnInit, OnDestroy {
   clear() {}
 
   gotoPosition(eventSeq: number) {
-    // if (this.psChatContent) {
-    //   this.psChatContent.update();
-
-    //   const element = document.getElementById(eventSeq.toString());
-    //   if (!!element) {
-    //     setTimeout(() => {
-    //       this.psChatContent.scrollToTop(element.offsetTop - 200);
-    //     });
-    //   }
-    // }
-
     if (!!this.virtualScroller) {
       const e = this.eventList.find(v => v.seq === eventSeq);
-      this.fixScreen = true;
-      this.virtualScroller.scrollInto(e, false, undefined, 0, () => {
-        this.fixScreen = false;
-      });
+      this.virtualScroller.scrollInto(e, false, undefined, 0, () => {});
     }
   }
 
@@ -488,9 +498,10 @@ export class MessagesComponent implements OnInit, OnDestroy {
     event.stopPropagation();
 
     if (this.scrollUpInitalized && this.eventRemained) {
-      // this.storedScrollItem = this.psChatContent.elementRef.nativeElement.scrollHeight;
       this.storeScrollPosition();
 
+      this.preSwapScroll();
+
       this.moreEvent.emit(this.eventList[0].seq);
 
       this.virtualScroller.invalidateCachedMeasurementAtIndex(0);
@@ -554,7 +565,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
     ) {
       return;
     }
-    this.logger.debug('onVsChange', event);
+    // this.logger.debug('onVsChange', event);
   }
 
   trackByEvent(index: number, info: Info<EventJson>): number {