From 852eb6314f797ec659486e5ebc05510c57ff5848 Mon Sep 17 00:00:00 2001
From: Richard Park <crusader@loafle.com>
Date: Mon, 20 Jan 2020 18:01:31 +0900
Subject: [PATCH 1/3] more rendering is implemented

---
 .../lib/components/messages.component.html    | 12 +++++----
 .../lib/components/messages.component.scss    | 12 +++++++++
 .../src/lib/components/messages.component.ts  | 26 ++++++++++++-------
 3 files changed, 36 insertions(+), 14 deletions(-)

diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
index 57ea8b25..638a3270 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
@@ -12,11 +12,7 @@
   [modifyOverflowStyleOfParentScroll]="false"
   (vsChange)="onVsChange($event)"
 >
-  <div
-    #chatMessagesContainer
-    class="chat-messages hide"
-    [style.opacity]="fixScreen ? 0 : 1"
-  >
+  <div #chatMessagesContainer class="chat-messages">
     <div
       *ngIf="eventRemained && eventList.length > 0"
       class="message-row view-previous"
@@ -83,3 +79,9 @@
     </div>
   </div>
 </virtual-scroller>
+
+<div
+  #chatMessagesBuffer
+  fxFlexFill
+  class="chat-messages-buffer disappear"
+></div>
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
index 9d37c920..cdbba32e 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.scss
+++ b/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;
+}
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
index 7c78ab41..d1b4b093 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
@@ -108,6 +108,9 @@ export class MessagesComponent implements OnInit, OnDestroy {
   @ViewChild('chatMessagesContainer', { static: false })
   chatMessagesContainer: ElementRef<HTMLElement>;
 
+  @ViewChild('chatMessagesBuffer', { static: false })
+  chatMessagesBuffer: ElementRef<HTMLElement>;
+
   @ViewChild(PerfectScrollbarDirective, { static: false })
   psChatContent: PerfectScrollbarDirective;
 
@@ -142,7 +145,6 @@ export class MessagesComponent implements OnInit, OnDestroy {
   moment = moment;
 
   existReadHere = false;
-  fixScreen = false;
 
   constructor(
     private logger: NGXLogger,
@@ -382,11 +384,13 @@ export class MessagesComponent implements OnInit, OnDestroy {
   }
 
   scrollToStoredItem() {
-    if (!this.scrollUpInitalized) {
-      this.chatMessagesContainer.nativeElement.classList.remove('hide');
-    }
-
     this.virtualScroller.scrollInto(this.storedScrollItem, true, 0, 0, () => {
+      this.chatMessagesBuffer.nativeElement.innerHTML = '';
+      this.chatMessagesBuffer.nativeElement.scrollTop = 0;
+
+      this.chatMessagesBuffer.nativeElement.classList.add('disappear');
+      this.chatMessagesContainer.nativeElement.classList.remove('hide');
+
       this.storedScrollItem = undefined;
     });
   }
@@ -472,10 +476,7 @@ export class MessagesComponent implements OnInit, OnDestroy {
 
     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, () => {});
     }
   }
 
@@ -491,6 +492,13 @@ export class MessagesComponent implements OnInit, OnDestroy {
       // this.storedScrollItem = this.psChatContent.elementRef.nativeElement.scrollHeight;
       this.storeScrollPosition();
 
+      this.chatMessagesBuffer.nativeElement.innerHTML = this.chatMessagesContainer.nativeElement.innerHTML;
+      this.chatMessagesBuffer.nativeElement.scrollTop = this.chatMessagesContainer.nativeElement.scrollTop;
+
+      this.chatMessagesBuffer.nativeElement.classList.remove('disappear');
+      this.chatMessagesContainer.nativeElement.classList.add('hide');
+      this.changeDetectorRef.detectChanges();
+
       this.moreEvent.emit(this.eventList[0].seq);
 
       this.virtualScroller.invalidateCachedMeasurementAtIndex(0);

From bce9165f2b93c715d24159808301fe76e4d940ae Mon Sep 17 00:00:00 2001
From: Richard Park <crusader@loafle.com>
Date: Tue, 21 Jan 2020 11:48:26 +0900
Subject: [PATCH 2/3] virtual scroll of chat room is implemented

---
 .../lib/components/messages.component.html    |   5 +-
 .../src/lib/components/messages.component.ts  | 147 +++++++++---------
 2 files changed, 77 insertions(+), 75 deletions(-)

diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
index 638a3270..d2fbc690 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
+++ b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.html
@@ -10,11 +10,10 @@
   (psYReachEnd)="onYReachEnd($event)"
   [enableUnequalChildrenSizes]="true"
   [modifyOverflowStyleOfParentScroll]="false"
-  (vsChange)="onVsChange($event)"
 >
   <div #chatMessagesContainer class="chat-messages">
     <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">
@@ -59,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)"
diff --git a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts b/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
index d1b4b093..4c20b283 100644
--- a/projects/ucap-webmessenger-ui-chat/src/lib/components/messages.component.ts
+++ b/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';
 
@@ -111,9 +110,6 @@ export class MessagesComponent implements OnInit, OnDestroy {
   @ViewChild('chatMessagesBuffer', { static: false })
   chatMessagesBuffer: ElementRef<HTMLElement>;
 
-  @ViewChild(PerfectScrollbarDirective, { static: false })
-  psChatContent: PerfectScrollbarDirective;
-
   @ViewChild(VirtualScrollerComponent, { static: false })
   private virtualScroller: VirtualScrollerComponent;
 
@@ -144,7 +140,8 @@ export class MessagesComponent implements OnInit, OnDestroy {
   profileImageRoot: string;
   moment = moment;
 
-  existReadHere = false;
+  readToHereEvent: Info<EventJson>;
+  swapped = false;
 
   constructor(
     private logger: NGXLogger,
@@ -183,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();
 
@@ -360,7 +359,6 @@ export class MessagesComponent implements OnInit, OnDestroy {
             this.eventList[messageIndex].seq ===
             this.roomInfo.lastReadEventSeq + 1
           ) {
-            this.existReadHere = true;
             return true;
           }
         }
@@ -383,44 +381,71 @@ export class MessagesComponent implements OnInit, OnDestroy {
     ];
   }
 
-  scrollToStoredItem() {
-    this.virtualScroller.scrollInto(this.storedScrollItem, true, 0, 0, () => {
-      this.chatMessagesBuffer.nativeElement.innerHTML = '';
-      this.chatMessagesBuffer.nativeElement.scrollTop = 0;
-
-      this.chatMessagesBuffer.nativeElement.classList.add('disappear');
-      this.chatMessagesContainer.nativeElement.classList.remove('hide');
-
-      this.storedScrollItem = undefined;
+  swapScroll(
+    to: Info<EventJson>,
+    preCallback: () => void,
+    postCallback: () => void,
+    useSwap: boolean = true
+  ) {
+    this.preSwapScroll(useSwap);
+    if (!!preCallback) {
+      preCallback();
+    }
+    this.virtualScroller.scrollInto(to, true, 0, 0, () => {
+      setTimeout(() => {
+        if (!!postCallback) {
+          postCallback();
+        }
+        this.postSwapScroll(useSwap);
+      }, 100);
     });
   }
 
-  ready(): void {
-    if (!this.scrollUpInitalized) {
-      this.chatMessagesContainer.nativeElement.classList.add('hide');
+  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;
     }
 
-    setTimeout(() => {
-      this.scrollToBottom();
-    });
+    this.chatMessagesContainer.nativeElement.classList.add('hide');
+  }
+
+  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);
-        });
-
-        this.firstCheckReadHere = false;
+      if (!!this.readToHereEvent && this.firstCheckReadHere) {
+        this.swapScroll(
+          this.readToHereEvent,
+          () => {},
+          () => {
+            this.firstCheckReadHere = false;
+          }
+        );
       } else {
-        this.scrollToStoredItem();
+        this.swapScroll(
+          this.storedScrollItem,
+          () => {},
+          () => {
+            this.storedScrollItem = undefined;
+          }
+        );
       }
-      // }
     } else if (this.scrollUpInitalized) {
       if (!!this.newEventList && this.newEventList.length > 0) {
         this.existNewMessage.emit(
@@ -429,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,
-            () => {
-              this.chatMessagesContainer.nativeElement.classList.remove('hide');
-            }
-          );
-        }
+      if (!!this.readToHereEvent && this.firstCheckReadHere) {
+        this.swapScroll(
+          this.readToHereEvent,
+          () => {},
+          () => {
+            this.firstCheckReadHere = false;
+          }
+        );
+      } else {
+        this.swapScroll(
+          this.eventList[this.eventList.length - 1],
+          () => {},
+          () => {},
+          false
+        );
       }
     }
   }
@@ -463,17 +483,6 @@ 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.virtualScroller.scrollInto(e, false, undefined, 0, () => {});
@@ -489,15 +498,9 @@ export class MessagesComponent implements OnInit, OnDestroy {
     event.stopPropagation();
 
     if (this.scrollUpInitalized && this.eventRemained) {
-      // this.storedScrollItem = this.psChatContent.elementRef.nativeElement.scrollHeight;
       this.storeScrollPosition();
 
-      this.chatMessagesBuffer.nativeElement.innerHTML = this.chatMessagesContainer.nativeElement.innerHTML;
-      this.chatMessagesBuffer.nativeElement.scrollTop = this.chatMessagesContainer.nativeElement.scrollTop;
-
-      this.chatMessagesBuffer.nativeElement.classList.remove('disappear');
-      this.chatMessagesContainer.nativeElement.classList.add('hide');
-      this.changeDetectorRef.detectChanges();
+      this.preSwapScroll();
 
       this.moreEvent.emit(this.eventList[0].seq);
 
@@ -562,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 {

From 13902ba1fceee82a00085e8c72569f506d31fafd Mon Sep 17 00:00:00 2001
From: Richard Park <crusader@loafle.com>
Date: Tue, 21 Jan 2020 13:10:24 +0900
Subject: [PATCH 3/3] config of online installer is added

---
 electron-builder.json | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/electron-builder.json b/electron-builder.json
index 20db6ffa..c82450f2 100644
--- a/electron-builder.json
+++ b/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"
   }
 }