feature-9082: Enhance language dropdown button (#9162)

* 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

* feature-9082: Enhance language dropdown button

* feature-9082: Enhance language dropdown button

* feature-9082: Enhance language dropdown button

---------

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

Author: 4 people

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

@@ -12,13 +12,20 @@
     <Public::Stream::JitsiStream @videoStream={{@videoStream}} />
   {{/if}}
   {{#if (eq this.provider 'youtube')}}
+    {{#if this.selectingLanguage.selectingLanguage}}
+      <iframe
+        style="position: absolute; width: 100%; height: 100%" id="video-player-translation" width="50%" height="50%" frameborder="0" title="YouTube Live Stream Translation"
+        src="https://www.youtube.com/embed/{{this.selectingLanguage.translationYoutubeId}}?enablejsapi=1&autoplay=1&modestbranding=1&loop=1&controls=0&disablekb=1"
+        gesture="media" allow="autoplay; encrypted-media" allowfullscreen="true"></iframe>
+    {{else}}
       <iframe 
         style="position: absolute; width: 100%; height: 100%;" 
         id="video-player" 
         frameborder="0" 
         title="YouTube Live Stream"
         src="https://www.youtube.com/embed/{{this.youtubeId}}?enablejsapi=1&playlist={{this.youtubeId}}&autoplay=1&modestbranding=1&loop={{if @videoStream.extra.loop 1 0}}&controls=0&disablekb=1"
-      gesture="media" allow="autoplay; encrypted-media" allowfullscreen="true"></iframe>
+        gesture="media" allow="autoplay; encrypted-media" allowfullscreen="true"></iframe>
+    {{/if}}
   {{/if}}
   {{#if (and (eq @videoStream.videoChannel.provider 'vimeo') this.vimeoId)}}
     <iframe style="position: absolute" src="https://player.vimeo.com/video/{{this.vimeoId}}?autoplay={{if @videoStream.extra.autoplay 1 0}}&loop={{if @videoStream.extra.loop 1 0}}" width="50%" height="50%" frameborder="0" allow="autoplay" title="StreamYard Live Stream" allowfullscreen="true"></iframe>