Feature-9082: Enhance language dropdown button (#9131)

* feature-9082: Enhance language dropdown button

* feature-9082: Enhance language dropdown button

* fix css

* fix UI

* fix missing header

* fix missing header

* fix missing header

* fix missing header

* fix missing header

* fix missing header

* avoid using css inline

* feature-9082: Fix css dropdown side panel

* feature-9082: Fix css dropdown side panel

* feature-9082: Fix css dropdown side panel

* fix-9082
language dropdown not showing up

* fix-9082
language dropdown not showing up

---------

Co-authored-by: Khang On - TMA <[email protected]>
Co-authored-by: ntthitrinh <[email protected]>

Author: 3 people

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

@@ -59,7 +59,7 @@
     <div class="chat-video-room">
       <div>
         <div class="ui inverted vertical fluid menu borderless stream-side-menu">
-          {{#each this.streams as |stream|}}
+          {{#each this.streamList 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>

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

@@ -46,6 +46,7 @@ export default class PublicStreamSidePanel extends Component<Args> {
   @tracked showChat = false;
   @tracked showRoomChat = false;
   @tracked showVideoRoom = false;
+  @tracked languageList: any = [];
 
   @tracked translationChannels = [{
     id   : '0',
@@ -147,14 +148,22 @@ export default class PublicStreamSidePanel extends Component<Args> {
           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(async(stream: any) => {
+          hash              : stringHashCode(stream.attributes.name + stream.id),
+          translations      : []
+        })).forEach((stream: any) => {
           this.addStream(stream)
         });
-        this.streams.forEach(async(stream: any) => {
-          const res = await this.fetchTranslationChannels(stream.id)
-          stream.translations = res
-        });
+        const languageLists: any = [];
+        Promise.all(this.streams.map(async(stream: any) => {
+          const res = await this.fetchTranslationChannels(stream.id);
+          const item = {
+            streamId: stream.id
+          }
+          languageLists.push(item);
+          stream.translations = res;
+        })).then(() => {
+          this.languageList = languageLists;
+        })
       } catch (e) {
         console.error('Error while loading rooms in video stream', e);
       }
@@ -174,4 +183,9 @@ export default class PublicStreamSidePanel extends Component<Args> {
     this.loading = false;
     this.streams = [...this.streams];
   }
+
+  @computed('[email protected]')
+  get streamList() {
+    return this.streams;
+  }
 }

app/models/video-stream.ts

@@ -35,6 +35,7 @@ export default class VideoStream extends ModelBase.extend() {
   @attr() additionalInformation!: string;
   @attr() extra!: Extra;
   @attr() chatRoomName?: string;
+  @attr() translations?: any[];
 
   @hasMany('microlocation') rooms!: Microlocation[];
   @hasMany('video-recording') videoRecordings!: VideoRecording[];