fix: chat not opening while bbb is open (#8433)

Co-authored-by: Mario Behling <[email protected]>

Author: pavnesh-c

app/components/public/stream/video-stream.hbs

@@ -15,7 +15,11 @@
     <iframe src="https://player.vimeo.com/video/{{this.vimeoId}}?autoplay={{if @videoStream.extra.autoplay 1 0}}&loop={{if @videoStream.extra.loop 1 0}}" width="100%" height="100%" frameborder="0" title="Vimeo Live Stream" allow="autoplay" allowfullscreen="true"></iframe>
   {{/if}}
 </div>
-<Public::Stream::SidePanel @event={{@event}} @videoStream={{@videoStream}} />
+<Public::Stream::SidePanel @event={{@event}} @videoStream={{@videoStream}} @shown={{true}} @showChatPanel={{this.showChatPanel}} />
 {{#if this.isRocketChatEnabled}}
-  <Public::Stream::ChatPanel @event={{@event}}/>
+  {{#if this.shown}}
+    <Public::Stream::ChatPanel @event={{@event}} @shown={{true}} @showChatPanel={{this.showChatPanel}} />
+  {{else}}
+    <Public::Stream::ChatPanel @event={{@event}} @shown={{false}} @showChatPanel={{this.showChatPanel}} />
+  {{/if}}
 {{/if}}

app/components/public/stream/video-stream.ts

@@ -21,6 +21,15 @@ export default class PublicStreamVideoStream extends Component<Args> {
   @service
   loader!: any;
 
+  @service
+  l10n: any;
+
+  @service
+  confirm: any;
+
+  @service
+  settings: any;
+
   @service authManager: any;
 
   @tracked
@@ -38,6 +47,9 @@ export default class PublicStreamVideoStream extends Component<Args> {
   @tracked
   vimeoId = '';
 
+  @tracked
+  shown = false;
+
   @computed()
   get isRocketChatEnabled(): boolean {
     return this.authManager.currentUser?.isRocketChatRegistered && this.args.event.isChatEnabled;
@@ -96,4 +108,38 @@ export default class PublicStreamVideoStream extends Component<Args> {
       location.href = stream.url;
     }
   }
+
+  @action
+  async showChatPanel() {
+    if (this.shown) {
+      this.shown = false;
+      return;
+    }
+    if (this.authManager.currentUser?.isRocketChatRegistered) {
+      this.shown = true;
+      return;
+    }
+    try {
+      const heading = this.l10n.t('Please confirm that you understand and agree to the conditions of using the chat!');
+
+      const content =  this.l10n.t('If you join the event chat, your profile name and image will be visible to other attendees. Other event attendees can also contact you directly.') + '<br/><br/>'
+        + this.l10n.t('You may change your chat name and chat profile picture by going to account settings on the chat page on the top left.') + ' '
+        + this.l10n.t('You need to minimize the side panel to access it.') + ' '
+        + this.l10n.t('The feature integration is still in Alpha stage and currently your profile on the {{appName}} account page and on the chat are not linked and can be independently edited.', { appName: this.settings.appName }) + ' '
+        + this.l10n.t('When you change the chat settings you may receive additional email confirmations.') + '<br/><br/>'
+        + this.l10n.t('Do you want to use the chat now?');
+
+      const options = {
+        denyText     : 'Cancel',
+        denyColor    : 'red',
+        approveText  : 'OK',
+        approveColor : 'green',
+        extra        : content
+      };
+      await this.confirm.prompt(heading, options);
+      this.shown = true;
+    } catch {
+      this.shown = false;
+    }
+  }
 }