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

* 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

* 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

@@ -11,21 +11,23 @@
   {{#if (eq @videoStream.videoChannel.provider 'jitsi')}}
     <Public::Stream::JitsiStream @videoStream={{@videoStream}} />
   {{/if}}
+  {{#if this.selectingLanguage.selectingLanguage}}
+    <iframe
+      style="position: absolute;width: 50%; height: 100%; z-index: -1"
+      id="video-player-translation"
+      frameborder="0" 
+      title="YouTube Live Stream Translation"
+      src="https://www.youtube.com/embed/{{this.selectingLanguage.translationYoutubeId}}?enablejsapi=1&mute=0&autoplay=1&modestbranding=1&loop=1&controls=0&disablekb=1"
+      gesture="media" allow="autoplay; encrypted-media" allowfullscreen="true"></iframe>
+  {{/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>
-    {{/if}}
+    <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}}&mute={{if this.selectingLanguage.selectingLanguage 1 0}}&controls=0&disablekb=1"
+      gesture="media" allow="autoplay; encrypted-media" allowfullscreen="true"></iframe>
   {{/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>