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" } } 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..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,15 +10,10 @@ (psYReachEnd)="onYReachEnd($event)" [enableUnequalChildrenSizes]="true" [modifyOverflowStyleOfParentScroll]="false" - (vsChange)="onVsChange($event)" > -
+
+ +
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..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'; @@ -108,8 +107,8 @@ export class MessagesComponent implements OnInit, OnDestroy { @ViewChild('chatMessagesContainer', { static: false }) chatMessagesContainer: ElementRef; - @ViewChild(PerfectScrollbarDirective, { static: false }) - psChatContent: PerfectScrollbarDirective; + @ViewChild('chatMessagesBuffer', { static: false }) + chatMessagesBuffer: ElementRef; @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; + 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, + 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) { - 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( @@ -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, - () => { - 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 + ); } } } @@ -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): number {