Hide chat when in theater mode

client/src/app/+videos/+video-watch/video-live-chat.component.html

@@ -1,4 +1,4 @@
-<div class="root">
+<div class="root" *ngIf="!ghostMode">
   <div class="scroller"
     #scroller myInfiniteScroller [dataObservable]="onDataSubject.asObservable()"
     (nearOfTop)="onNearTop()" (nearOfBottom)="onNearBottom()" [onItself]="true"

client/src/app/+videos/+video-watch/video-live-chat.component.ts

@@ -9,7 +9,8 @@ import {
 } from '@app/core'
 import { HooksService } from '@app/core/plugins/hooks.service'
 import {
-  VideoChannel,
+  Video,
+  VideoChannelSummary,
   RoomMessageCreate,
   RoomMessage as RoomMessageServerModel
 } from '@shared/models'
@@ -21,10 +22,12 @@ import { RoomService, RoomMessage, Room } from '@app/shared/shared-chat'
   styleUrls: ['./video-live-chat.component.scss']
 })
 export class LiveChatComponent implements OnInit, OnDestroy {
-  @Input() channel: VideoChannel
+  @Input() video: Video
   @Input() user: User
+  @Input() ghostMode: Boolean = false
 
   room: Room
+  channel: VideoChannelSummary
   messages: RoomMessage[] = []
   componentPagination: ComponentPagination = {
     currentPage: 1,
@@ -37,6 +40,8 @@ export class LiveChatComponent implements OnInit, OnDestroy {
   dockMode: 'docked-bottom' | 'docked-right';
   sending = false
 
+  startFromDate: Date
+
   constructor(
     private hooks: HooksService,
     private notifier: Notifier,
@@ -45,8 +50,13 @@ export class LiveChatComponent implements OnInit, OnDestroy {
   ) {}
 
   ngOnInit () {
+    this.channel = this.video.channel
+    // TODO: Start of live session when live / viewing a replay
+    this.startFromDate = new Date(Date.now() - (15 * 60 * 1000))
+
     this.loadRoom(this.channel.roomId)
     this.subscribeToRoom(this.channel.roomId)
+
     this.loadMoreMessages()
 
     fromEvent(window, 'resize')
@@ -91,7 +101,8 @@ export class LiveChatComponent implements OnInit, OnDestroy {
   loadMoreMessages () {
     const params = {
       roomId: this.channel.roomId,
-      componentPagination: this.componentPagination
+      componentPagination: this.componentPagination,
+      afterDate: this.startFromDate
     }
 
     const obs = this.hooks.wrapObsFun(

client/src/app/+videos/+video-watch/video-watch.component.html

@@ -11,16 +11,17 @@
       <img class="placeholder-image" *ngIf="playerPlaceholderImgSrc" [src]="playerPlaceholderImgSrc" alt="Placeholder image" i18n-alt>
     </div>
 
+    <my-live-chat *ngIf="video?.isLive && video?.channel?.roomId"
+      [video]="video"
+      [user]="user"
+      [ghostMode]="theaterEnabled"
+    ></my-live-chat>
+
     <my-video-watch-playlist
       #videoWatchPlaylist [playlist]="playlist"
       (noVideoFound)="onPlaylistNoVideoFound()" (videoFound)="onPlaylistVideoFound($event)"
     ></my-video-watch-playlist>
 
-    <my-live-chat *ngIf="video?.isLive && video?.channel?.roomId"
-      [channel]="video.channel"
-      [user]="user"
-    ></my-live-chat>
-
     <my-plugin-placeholder pluginId="player-next"></my-plugin-placeholder>
   </div>
 

client/src/app/shared/shared-chat/room.service.ts

@@ -36,9 +36,10 @@ export class RoomService {
 
   getMessages (parameters: {
     roomId: number | string,
-    componentPagination: ComponentPaginationLight
+    componentPagination: ComponentPaginationLight,
+    afterDate?: Date,
   }): Observable<ResultList<RoomMessage>> {
-    const { roomId, componentPagination } = parameters
+    const { roomId, componentPagination, afterDate } = parameters
 
     const url = RoomService.BASE_ROOM_URL + roomId + '/messages'
 
@@ -47,6 +48,8 @@ export class RoomService {
     let params = new HttpParams()
     params = this.restService.addRestGetParams(params, pagination)
 
+    if (afterDate) params = params.append('afterDate', afterDate.toISOString())
+
     return this.authHttp.get<ResultList<RoomMessage>>(url, { params })
                .pipe(
                  map(data => this.extractMessages(data)),

server/controllers/api/room.ts

@@ -66,6 +66,7 @@ async function getRoomMessages(req: express.Request, res: express.Response) {
     roomId: parseInt(req.params.roomId),
     start: req.query.start,
     count: req.query.count,
+    afterTimestamp: req.query.afterDate,
     user,
   };
 

server/middlewares/validators/room.ts

@@ -3,7 +3,7 @@ import { body, param } from 'express-validator'
 import { HttpStatusCode, ServerErrorCode, UserRight } from '@shared/models'
 import { MUserAccountUrl, MRoom, MRoomMessageFull } from '@server/types/models'
 import { isValidVideoCommentText } from '../../helpers/custom-validators/video-comments'
-import { isIdValid } from '../../helpers/custom-validators/misc'
+import { isIdValid, isDateValid } from '../../helpers/custom-validators/misc'
 import { logger } from '../../helpers/logger'
 import { RoomModel } from '../../models/room/room'
 import { RoomMessageModel } from '../../models/room/room-message'
@@ -45,6 +45,10 @@ const addRoomMessageValidator = [
 const listRoomMessagesValidator = [
   param('roomId').custom(isIdValid),
 
+  param('afterDate')
+    .optional()
+    .custom(isDateValid),
+
   async (req: express.Request, res: express.Response, next: express.NextFunction) => {
     logger.debug('Checking listRoomMessagesValidator parameters.', { parameters: req.params, body: req.body })
 

server/models/room/room-message.ts

@@ -159,8 +159,9 @@ export class RoomMessageModel extends Model<Partial<AttributesOnly<RoomMessageMo
     start: number
     count: number
     user?: MUserAccountId
+    afterTimestamp?: string
   }) {
-    const { roomId, start, count, user } = parameters
+    const { roomId, start, count, user, afterTimestamp } = parameters
 
     const blockerAccountIds = await RoomMessageModel.buildBlockerAccountIds({ user })
 
@@ -172,6 +173,15 @@ export class RoomMessageModel extends Model<Partial<AttributesOnly<RoomMessageMo
       }
     }
 
+    let timefilterWhere = {}
+    if (afterTimestamp) {
+      timefilterWhere = {
+        createdAt: {
+          [Op.gte]: new Date(afterTimestamp),
+        }
+      }
+    }
+
     const queryList = {
       offset: start,
       limit: count,
@@ -179,7 +189,8 @@ export class RoomMessageModel extends Model<Partial<AttributesOnly<RoomMessageMo
       where: {
         roomId,
         deletedAt: null,
-        ...accountBlockedWhere
+        ...accountBlockedWhere,
+        ...timefilterWhere
       }
     }
 

shared/models/videos/channel/video-channel.model.ts

@@ -38,4 +38,6 @@ export interface VideoChannelSummary {
   avatars: ActorImage[]
   // TODO: remove, deprecated in 4.2
   avatar: ActorImage
+
+  roomId?: number
 }