Fix #9056 include dropdown of languages (#9059)

* Update side-panel.ts

* Update side-panel.hbs

* Update side-panel.hbs

Author: cweitat

app/components/public/stream/side-panel.hbs

@@ -59,13 +59,12 @@
     <div class="chat-video-room">
       <div>
         <div class="ui inverted vertical fluid menu borderless stream-side-menu">
-          {{#each this.streams as |stream index|}}
+          {{#each this.streams as |stream|}}
             <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>
-                {{#if (eq index 0)}}
-                  {{#if (gt this.translationChannels.length 1)}}
+                  {{#if (gt stream.translations.length 1)}}
                   <div style="display:inline-block;margin-left:auto">
                     <div class="translation-dropdown-button translation-dropdown-container ">
                       <UiDropdown class="btn btn-secondary dropdown-toggle"
@@ -75,22 +74,21 @@
                         <i style="font-size:1.1em" class="language icon"></i>
                       </div>
                       <div class="translation-dropdown-component">
-                        {{this.translationChannels.length}} {{t 'languages'}}
+                        {{stream.translations.length}} {{t 'languages'}}
                       </div>
                       <div class="translation-dropdown-component">
                         <i style="margin-left: 0 !important;text-align: right;"
                           class="dropdown icon"> </i>
                       </div>
                     </div>
                         <div class="ui translation menu">
-                          {{#each-in this.translationChannels as |key channel|}}
+                          {{#each-in stream.translations as |key channel|}}
                             <div class="item" data-value="{{channel.url}}">{{channel.name}}</div>
                           {{/each-in}}
                         </div>
                       </UiDropdown>
                     </div>
                   </div>
-                  {{/if}}
                 {{/if}}
             </a>
 

app/components/public/stream/side-panel.ts

@@ -65,7 +65,7 @@ export default class PublicStreamSidePanel extends Component<Args> {
     'lightcoral', 'lightsalmon', 'lightseagreen', 'limegreen',
     'maroon', 'mediumorchid', 'mediumpurple', 'mediumspringgreen'];
 
-  async fetchTranslationChannels(streamId: string): Promise<void> {
+  async fetchTranslationChannels(streamId: string): Promise<any[] | undefined> {
     const response = await this.loader.load(`/video-streams/${streamId}/translation_channels`);
     if (response.data !== undefined && response.data.length > 0) {
       const newChannels = response.data.map((channel: ChannelData) => ({
@@ -74,9 +74,10 @@ export default class PublicStreamSidePanel extends Component<Args> {
         url  : channel.attributes.url
       }));
       // Append newChannels to the existing translationChannels list
-      this.translationChannels = [...this.translationChannels, ...newChannels];
-      // eslint-disable-next-line no-mixed-spaces-and-tabs
+      const res = [...this.translationChannels, ...newChannels];
+      return res;
     }
+    return undefined;
   }
 
   async checkSpeakers(): Promise<void> {
@@ -113,9 +114,6 @@ export default class PublicStreamSidePanel extends Component<Args> {
 
   @action
   async setup(): Promise<void> {
-    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());
 
@@ -138,7 +136,9 @@ export default class PublicStreamSidePanel extends Component<Args> {
           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) => {
+        })).forEach(async(stream: any) => {
+          const res = await this.fetchTranslationChannels(stream.id)
+          stream.translations = res
           this.addStream(stream)
         });
       } catch (e) {