feature-8987 - Implement dedicated Rocket Chat rooms for each video r… (#8998)

nnhathung · web-flow · commit a8c2a5c14a77 · 2023-07-30T23:08:45.000+08:00
* feature-8987 - Implement dedicated Rocket Chat rooms for each video room and make them ready for mobile view

* feature-8987 + feature-9004

* feature-8987 + feature-9004

* feature-8987: Implement dedicated Rocket Chat rooms for each video room

* feature-8987
close chat pannel when switch room

* feature-8987
close chat pannel when switch room

* fix conflict
diff --git a/app/components/public/stream/chat-panel.hbs b/app/components/public/stream/chat-panel.hbs
@@ -11,7 +11,7 @@
           <h3>Unable to login to chat. Please contact the administrator</h3>
         {{/if}}
         {{#if this.token}}
-          <Public::Stream::Chat @token={{this.token}} @embedded={{true}} @event={{@event}} />
+          <Public::Stream::Chat @token={{this.token}} @embedded={{true}} @event={{@event}} @currentRoom={{@currentRoom}} />
         {{/if}}
       {{/if}}
     </div>
diff --git a/app/components/public/stream/chat-panel.ts b/app/components/public/stream/chat-panel.ts
@@ -8,6 +8,7 @@ import { action } from '@ember/object';
 interface Args {
   event: Event
   shown: boolean
+  currentRoom: any
 }
 export default class PublicStreamChatPanel extends Component<Args> {
   @service declare loader: Loader;
@@ -18,9 +19,16 @@ export default class PublicStreamChatPanel extends Component<Args> {
 
   @action
   async setup(): Promise<void> {
-    const { success, token } = await this.loader.load(`/events/${this.args.event.id}/chat-token`);
-    this.token = token;
-    this.success = success;
-    this.loading = false;
+    if (this.args.currentRoom && this.args.currentRoom.isChatEnabled) {
+      const { success, token } = await this.loader.load(`/events/${this.args.event.id}/room/${this.args.currentRoom.microlocationId}/chat-token`);
+      this.token = token;
+      this.success = success;
+      this.loading = false;
+    } else {
+      const { success, token } = await this.loader.load(`/events/${this.args.event.id}/chat-token`);
+      this.token = token;
+      this.success = success;
+      this.loading = false;
+    }
   }
 }
diff --git a/app/components/public/stream/chat.ts b/app/components/public/stream/chat.ts
@@ -7,7 +7,8 @@ import Event from 'open-event-frontend/models/event';
 interface Args {
   token: string,
   embedded: boolean,
-  event: Event
+  event: Event,
+  currentRoom: any,
 }
 
 export default class PublicStreamChat extends Component<Args> {
@@ -16,6 +17,10 @@ export default class PublicStreamChat extends Component<Args> {
 
   @action
   init(): void {
-    this.iframeUrl = this.settings.rocketChatUrl + `/group/${this.args.event.chatRoomName}?resumeToken=${this.args.token}` + (this.args.embedded ? '&layout=embedded' : '');
+    let room_name = this.args.event.chatRoomName;
+    if (this.args.currentRoom && this.args.currentRoom.isChatEnabled) {
+      room_name = this.args.currentRoom.chatRoomName
+    }
+    this.iframeUrl = this.settings.rocketChatUrl + `/group/${room_name}?resumeToken=${this.args.token}` + (this.args.embedded ? '&layout=embedded' : '');
   }
 }
diff --git a/app/components/public/stream/side-panel.hbs b/app/components/public/stream/side-panel.hbs
@@ -1,7 +1,7 @@
 <button {{did-insert this.setup}} class="ui icon button stream-side-panel-button" {{action (mut this.shown) true}}>
   <i class="angle right icon"></i>
 </button>
-{{#if this.showChat}}
+{{#if this.isChatShowing}}
 <div class="ui chat-stream-side-panel-button right">
   <i class="rocketchat large icon p-4 chat-panel-icon" {{on "click" @showChatPanel}} role="button"></i>
 </div>
@@ -42,14 +42,12 @@
           {{t 'Exhibition'}}</span>
         </a>
       {{/if}}
-
-      {{#if this.showChat}}
+      {{#if (and @event.isChatEnabled this.settings.rocketChatUrl (or @currentRoom.isChatEnabled @currentRoom.isGlobalEventRoom))}}
         <a href="#" class="ui labeled icon item" role="button" {{on "click" @showChatPanel}}>
           <span><i class="comment icon"></i>
           {{t 'Chat'}}</span>
         </a>
       {{/if}}
-
       {{#if this.showVideoRoom}}
         <div class="item">
           <span><i class="video icon"></i>
@@ -60,7 +58,7 @@
     {{#if this.showVideoRoom}}
       <div class="ui inverted vertical fluid menu borderless stream-side-menu" style="margin-top: -20px;">
         {{#each this.streams as |stream index|}}
-          <a href={{href-to 'public.stream.view' @event stream.slugName stream.id}} class="{{if (eq @videoStream.id stream.id) 'video-active'}} item stream-item d-flex items-center">
+          <a href={{href-to 'public.stream.view' @event stream.slugName stream.id }} class="{{if (eq @currentRoom.microlocationId stream.microlocationId) 'video-active'}} item stream-item d-flex items-center" {{on "click" (fn @setupRoomChat stream) }}>
 
               <span class="stream-preview-letter" style={{css background-color=(object-at (abs (mod stream.hash this.colors.length)) this.colors)}}>{{truncate (uppercase stream.name) 1 false}}</span>
               <span class="ml-2">{{stream.name}}</span>
diff --git a/app/components/public/stream/side-panel.ts b/app/components/public/stream/side-panel.ts
@@ -1,7 +1,7 @@
 import Component from '@glimmer/component';
 import VideoStream from 'open-event-frontend/models/video-stream';
 import { tracked } from '@glimmer/tracking';
-import { action } from '@ember/object';
+import { action, computed } from '@ember/object';
 import Event from 'open-event-frontend/models/event';
 import { inject as service } from '@ember/service';
 import { slugify, stringHashCode } from 'open-event-frontend/utils/text';
@@ -14,6 +14,9 @@ interface Args {
   event: Event,
   shown: boolean,
   showChatPanel: any,
+  currentRoom: any,
+  streamId: number,
+  setupRoomChat: ((stream: any) => void),
 }
 
 interface ChannelData {
@@ -41,6 +44,7 @@ export default class PublicStreamSidePanel extends Component<Args> {
   @tracked showSpeakers: number | null = null;
   @tracked showExhibitors: number | null = null;
   @tracked showChat = false;
+  @tracked showRoomChat = false;
   @tracked showVideoRoom = false;
 
   @tracked translationChannels = [{
@@ -87,6 +91,14 @@ export default class PublicStreamSidePanel extends Component<Args> {
     this.showExhibitors = this.showExhibitors ?? await hasExhibitors(this.loader, this.args.event);
   }
 
+  @computed('args.currentRoom')
+  get isChatShowing(): boolean {
+    if (this.args.currentRoom) {
+      return this.args.event.isChatEnabled && this.settings.rocketChatUrl && (this.args.currentRoom.isChatEnabled || this.args.currentRoom.isGlobalEventRoom);
+    }
+    return false
+  }
+
   addStream(stream: VideoStream | null): void {
     if (!stream) {return;}
     if (this.streams.map(stream => stream.id).any(id => id === stream.id)) {return;}
@@ -100,7 +112,9 @@ export default class PublicStreamSidePanel extends Component<Args> {
 
   @action
   async setup(): Promise<void> {
-    this.fetchTranslationChannels(this.args.videoStream.id);
+    if (this.args.videoStream) {
+      this.fetchTranslationChannels(this.args.videoStream.id);
+    }
     this.shown = this.args.shown || Boolean(new URLSearchParams(location.search).get('side_panel'));
     this.addStream(this.args.event.belongsTo('videoStream').value());
 
@@ -112,23 +126,31 @@ export default class PublicStreamSidePanel extends Component<Args> {
 
     if (this.args.event.isSchedulePublished) {
       try {
-        const rooms = await this.loader.load(`/events/${this.args.event.identifier}/microlocations?include=video-stream&fields[microlocation]=id,video_stream,position&fields[video-stream]=id,name&sort=position`);
+        const rooms = await this.loader.load(`/events/${this.args.event.identifier}/microlocations?include=video-stream&fields[microlocation]=id,name,video_stream,position,is_chat_enabled,chat_room_name,is_global_event_room&fields[video-stream]=id,name&sort=position`);
         rooms.included?.map((stream: any) => ({
-          id       : stream.id,
-          name     : stream.attributes.name,
-          slugName : slugify(stream.attributes.name),
-          hash     : stringHashCode(stream.attributes.name + stream.id)
+          id                : stream.id,
+          name              : stream.attributes.name,
+          roomName          : rooms.data.filter((room: any) => room.relationships['video-stream'].data ? room.relationships['video-stream'].data.id === stream.id : null).map((room: any) => room.attributes.name)[0],
+          slugName          : slugify(rooms.data.filter((room: any) => room.relationships['video-stream'].data ? room.relationships['video-stream'].data.id === stream.id : null).map((room: any) => room.attributes['chat-room-name'])[0]),
+          isChatEnabled     : rooms.data.filter((room: any) => room.relationships['video-stream'].data ? room.relationships['video-stream'].data.id === stream.id : null).map((room: any) => room.attributes['is-chat-enabled'])[0],
+          isGlobalEventRoom : rooms.data.filter((room: any) => room.relationships['video-stream'].data ? room.relationships['video-stream'].data.id === stream.id : null).map((room: any) => room.attributes['is-global-event-room'])[0],
+          chatRoomName      : rooms.data.filter((room: any) => room.relationships['video-stream'].data ? room.relationships['video-stream'].data.id === stream.id : null).map((room: any) => room.attributes['chat-room-name'])[0],
+          microlocationId   : rooms.data.filter((room: any) => room.relationships['video-stream'].data ? room.relationships['video-stream'].data.id === stream.id : null).map((room: any) => room.id)[0],
+          hash              : stringHashCode(stream.attributes.name + stream.id)
         })).forEach((stream: any) => {
           this.addStream(stream)
         });
       } catch (e) {
         console.error('Error while loading rooms in video stream', e);
       }
-
       if (this.args.event.isChatEnabled) {
         const { success, token } = await this.loader.load(`/events/${this.args.event.id}/chat-token`);
         this.token = token;
         this.success = success;
+        if (this.args.streamId) {
+          const microlocation = this.streams.find(stream => stream.id === this.args.streamId)
+          this.args.setupRoomChat(microlocation)
+        }
       }
 
       this.loading = false;
diff --git a/app/components/public/stream/video-stream.hbs b/app/components/public/stream/video-stream.hbs
@@ -28,11 +28,12 @@
       {{/if}}
   {{/if}}
 </div>
-<Public::Stream::SidePanel @event={{@event}} @videoStream={{@videoStream}} @selectingLanguage={{this.selectingLanguage}} @shown={{true}} @showChatPanel={{this.showChatPanel}} />
+<Public::Stream::SidePanel @event={{@event}} @videoStream={{@videoStream}} @selectingLanguage={{this.selectingLanguage}} @shown={{true}} @showChatPanel={{this.showChatPanel}} @setupRoomChat={{action 'setupRoomChat'}} @currentRoom={{this.currentRoom}} @streamId={{@streamId}}/>
+
 {{#if this.isRocketChatEnabled}}
   {{#if this.shown}}
-    <Public::Stream::ChatPanel @event={{@event}} @shown={{true}} @showChatPanel={{this.showChatPanel}} />
+    <Public::Stream::ChatPanel @event={{@event}} @shown={{true}} @showChatPanel={{this.showChatPanel}} @currentRoom={{this.currentRoom}}/>
   {{else}}
-    <Public::Stream::ChatPanel @event={{@event}} @shown={{false}} @showChatPanel={{this.showChatPanel}} />
+    <Public::Stream::ChatPanel @event={{@event}} @shown={{false}} @showChatPanel={{this.showChatPanel}} @currentRoom={{this.currentRoom}}/>
   {{/if}}
 {{/if}}
diff --git a/app/components/public/stream/video-stream.ts b/app/components/public/stream/video-stream.ts
@@ -14,6 +14,7 @@ declare global {
 interface Args {
   videoStream: VideoStream,
   event: Event,
+  streamId: number,
 }
 
 export default class PublicStreamVideoStream extends Component<Args> {
@@ -53,6 +54,9 @@ export default class PublicStreamVideoStream extends Component<Args> {
   @tracked
   shown = false;
 
+  @tracked
+  currentRoom = null;
+
   @tracked
   provider = '';
 
@@ -174,6 +178,12 @@ export default class PublicStreamVideoStream extends Component<Args> {
     }
   }
 
+  @action
+  async setupRoomChat(stream:any) {
+    this.currentRoom = stream;
+    this.shown = false;
+  }
+
   @action
   hideStreamYard() {
     this.selectingLanguage.setStreamYardVisibility(false);
diff --git a/app/controllers/events/view/chat.js b/app/controllers/events/view/chat.js
@@ -1,12 +1,37 @@
 import Controller from '@ember/controller';
-import { action } from '@ember/object';
+import { action, computed } from '@ember/object';
 
 export default class extends Controller {
+
+  @computed('model.rooms.data')
+  get rooms() {
+    return this.model.rooms?.data;
+  }
+
+  @action
+  async changeRoomChatStatus(room) {
+    room.isChatEnabled = !room.isChatEnabled;
+    if (room.isGlobalEventRoom) {
+      room.isGlobalEventRoom = !room.isGlobalEventRoom;
+    }
+    await room.save();
+  }
+
+  @action
+  async setGlobalEventRoom(room) {
+    room.isGlobalEventRoom = !room.isGlobalEventRoom;
+    if (room.isChatEnabled) {
+      room.isChatEnabled = !room.isChatEnabled;
+    }
+    await room.save();
+  }
+
   @action
   async toggleChat() {
-    this.set('model.isChatEnabled', !this.model.isChatEnabled);
+    const { event } = this.model;
+    this.set('model.event.isChatEnabled', !event.isChatEnabled);
     try {
-      await this.model.save();
+      await event.save();
     } catch (error) {
       console.error('Error while enabling chat', error);
     }
diff --git a/app/controllers/public.js b/app/controllers/public.js
@@ -19,6 +19,7 @@ export default class PublicController extends Controller {
   @tracked canAccess = null;
 
   @tracked shown = false;
+  @tracked currentRoom = null;
 
   @computed('model.socialLinks')
   get twitterLink() {
@@ -203,4 +204,10 @@ export default class PublicController extends Controller {
     this.hasStreams = exists;
     this.canAccess = can_access;
   }
+
+  @action
+  async setupRoomChat(stream) {
+    this.currentRoom = stream;
+    this.shown = false;
+  }
 }
diff --git a/app/models/microlocation.ts b/app/models/microlocation.ts
@@ -9,10 +9,12 @@ export default class Microlocation extends ModelBase.extend({
   hiddenInScheduler : attr('boolean', { defaultValue: false }),
   longitude         : attr('number'),
   position          : attr('number', { defaultValue: 0 }),
-
-  sessions    : hasMany('session'),
-  event       : belongsTo('event'),
-  videoStream : belongsTo('video-stream')
+  isChatEnabled     : attr('boolean', { defaultValue: false }),
+  isGlobalEventRoom : attr('boolean', { defaultValue: false }),
+  // chatRoomId        : attr('string'),
+  sessions          : hasMany('session'),
+  event             : belongsTo('event'),
+  videoStream       : belongsTo('video-stream')
 }) {
 
   get hasVideoStream(): boolean {
diff --git a/app/routes/events/view/chat.js b/app/routes/events/view/chat.js
@@ -1,11 +1,32 @@
 import Route from '@ember/routing/route';
+import EmberTableRouteMixin from 'open-event-frontend/mixins/ember-table-route';
+import { hash } from 'rsvp';
 
-export default class extends Route {
+export default class extends Route.extend(EmberTableRouteMixin) {
   titleToken() {
     return this.l10n.t('Chat');
   }
 
-  model() {
-    return this.modelFor('events.view');
+  async model(params) {
+    this.set('params', params);
+    const searchField = 'title';
+    let filterOptions = [];
+
+    const event = this.modelFor('events.view');
+
+    filterOptions = this.applySearchFilters(filterOptions, params, searchField);
+    let queryString = {
+      include        : 'video-stream.video-channel,video-stream.moderators',
+      filter         : filterOptions,
+      'page[size]'   : params.per_page || 25,
+      'page[number]' : params.page || 1
+    };
+    queryString = this.applySortFilters(queryString, params);
+
+    const rooms = this.asArray(event.query('microlocations', queryString));
+    return hash({
+      event,
+      rooms
+    });
   }
 }
diff --git a/app/routes/public/stream/view.ts b/app/routes/public/stream/view.ts
@@ -22,7 +22,8 @@ export default class PublicStreamView extends Route {
     const event = this.modelFor('public');
     return hash({
       event,
-      stream: this.store.findRecord('video-stream', params.stream_id, { include: 'video-channel', reload: true })
+      stream   : this.store.findRecord('video-stream', params.stream_id, { include: 'video-channel', reload: true }),
+      streamId : params.stream_id
     });
   }
 
diff --git a/app/templates/events/view/chat.hbs b/app/templates/events/view/chat.hbs
diff --git a/app/templates/public.hbs b/app/templates/public.hbs
diff --git a/app/templates/public/stream/view.hbs b/app/templates/public/stream/view.hbs

Original file line number	Diff line number	Diff line change
`@@ -7,7 +7,8 @@ import Event from 'open-event-frontend/models/event';`
`7`	`7`	`interface Args {`
`8`	`8`	`token: string,`
`9`	`9`	`embedded: boolean,`
`10`		`- event: Event`
	`10`	`+ event: Event,`
	`11`	`+ currentRoom: any,`
`11`	`12`	`}`
`12`	`13`
`13`	`14`	`export default class PublicStreamChat extends Component<Args> {`
`@@ -16,6 +17,10 @@ export default class PublicStreamChat extends Component<Args> {`
`16`	`17`
`17`	`18`	`@action`
`18`	`19`	`init(): void {`
`19`		- this.iframeUrl = this.settings.rocketChatUrl + `/group/${this.args.event.chatRoomName}?resumeToken=${this.args.token}` + (this.args.embedded ? '&layout=embedded' : '');
	`20`	`+ let room_name = this.args.event.chatRoomName;`
	`21`	`+ if (this.args.currentRoom && this.args.currentRoom.isChatEnabled) {`
	`22`	`+ room_name = this.args.currentRoom.chatRoomName`
	`23`	`+ }`
	`24`	+ this.iframeUrl = this.settings.rocketChatUrl + `/group/${room_name}?resumeToken=${this.args.token}` + (this.args.embedded ? '&layout=embedded' : '');
`20`	`25`	`}`
`21`	`26`	`}`