Feature-9082 Enhance language dropdown button

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

@@ -60,38 +60,40 @@
       <div>
         <div class="ui inverted vertical fluid menu borderless stream-side-menu">
           {{#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) }}>
-
+            <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 (gt stream.translations.length 1)}}
-                  <div style="display:inline-block;margin-left:auto">
-                    <div class="translation-dropdown-button translation-dropdown-container ">
+                  <div class="block-side-panel">
+                    <div class="translation-dropdown-button translation-dropdown-container">
                       <UiDropdown class="btn btn-secondary dropdown-toggle"
-                                  @onChange={{ action "switchLanguage"}}>
-                    <div class="translation-dropdown-wrapper">
-                      <div class="translation-dropdown-component">
-                        <i style="font-size:1.1em" class="language icon"></i>
-                      </div>
-                      <div class="translation-dropdown-component">
-                        {{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 stream.translations as |key channel|}}
-                            <div class="item" data-value="{{channel.url}}">{{channel.name}}</div>
-                          {{/each-in}}
+                                  @selected={{this.selectingLanguage.getName}}
+                                  @onChange={{ action "switchLanguage"}} as |execute mapper|
+                                  {{action 'switchRoom' stream}} >
+                        <div class="{{if (and this.selectingLanguage.getName (eq @currentRoom.id stream.id)) 'translate-hidden'}} translation-dropdown-wrapper">
+                          <div class="translation-dropdown-component">
+                            <i class="language icon"></i>
+                          </div>
+                          <div class="translation-dropdown-component translation-length">
+                            {{stream.translations.length}} {{t}}
+                          </div>
+                          <div class="translation-dropdown-component">
+                            <i class="dropdown icon translation-dropdown-icon"> </i>
+                          </div>
+                        </div>
+                        {{#if (and (eq @currentRoom.id stream.id) this.selectingLanguage.getName)}}
+                          <div class="text">{{this.selectingLanguage.getName}}</div>
+                        {{/if}}
+                        <div class="ui translation menu custom-menu">
+                          {{#each stream.translations as |channel|}}
+                            <div class="item custom-item" data-value="{{map-value mapper channel}}">{{channel.name}}</div>
+                          {{/each}}
                         </div>
                       </UiDropdown>
                     </div>
                   </div>
                 {{/if}}
             </a>
-
           {{/each}}
         </div>
       </div>

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

@@ -109,9 +109,18 @@ export default class PublicStreamSidePanel extends Component<Args> {
   }
 
   @action
-  switchLanguage(url: string): void {
-    this.selectingLanguage.setLanguage(url);
+  switchLanguage(channel: any): void {
+    this.selectingLanguage.setLanguage(channel.url);
     this.selectingLanguage.updateTranslationYTId();
+    this.selectingLanguage.setName(channel.name);
+  }
+
+  @action
+  switchRoom(stream: any) {
+    if (this.selectingLanguage.getTranslationRoomId() !== stream.id) {
+      this.selectingLanguage.setName(null);
+    }
+    this.selectingLanguage.setTranslationRoomId(stream.id)
   }
 
   @action

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

@@ -25,6 +25,9 @@ export default class PublicStreamVideoStream extends Component<Args> {
   @service
   l10n: any;
 
+  @service
+  selectingLanguage: any;
+
   @service
   confirm: any;
 
@@ -57,9 +60,6 @@ export default class PublicStreamVideoStream extends Component<Args> {
   @tracked
   provider = '';
 
-  @service
-  selectingLanguage: any;
-
   @tracked
   languageUrl = '';
 
@@ -166,6 +166,10 @@ export default class PublicStreamVideoStream extends Component<Args> {
   async setupRoomChat(stream:any) {
     this.currentRoom = stream;
     this.shown = false;
+    if (this.selectingLanguage.getTranslationRoomId() !== stream.id) {
+      this.selectingLanguage.setName(null);
+    }
+    this.selectingLanguage.setTranslationRoomId(stream.id)
   }
 
   @action

app/services/selecting-language.js

@@ -1,10 +1,17 @@
 import Service from '@ember/service';
 import { tracked } from '@glimmer/tracking';
+import { computed } from '@ember/object';
 
 export default class SelectingLanguageService extends Service {
   @tracked
   selectingLanguage = null;
 
+  @tracked
+  name = null;
+
+  @tracked
+  translationRoomId = null;
+
   @tracked
   isStreamYardVisible = true;
 
@@ -16,6 +23,14 @@ export default class SelectingLanguageService extends Service {
     this.isStreamYardVisible = true;
   }
 
+  setName(name) {
+    this.name = name;
+  }
+
+  setTranslationRoomId(roomId) {
+    this.translationRoomId = roomId;
+  }
+
   setStreamYardVisibility(isVisible) {
     this.isStreamYardVisible = isVisible;
   }
@@ -32,4 +47,16 @@ export default class SelectingLanguageService extends Service {
   getLanguage() {
     return this.selectingLanguage;
   }
+
+  getTranslationRoomId() {
+    return this.translationRoomId;
+  }
+
+  @computed('name')
+  get getName() {
+    if (this.name === 'Original') {
+      return null;
+    }
+    return this.name;
+  }
 }

app/styles/components/translation-dropdown.scss

@@ -1,80 +1,101 @@
-.translation-dropdown-container {
-  height: 3rem;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
+.translation.menu {
+  left: -6px !important;
+  width: 9.6rem !important;
 }
 
-.translation-dropdown-wrapper {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  flex: 1;
+.language.icon {
+  font-size: 1.8em;
+  color: #808080;
 }
 
-.translation-dropdown {
-  padding: 2px;
-  display: flex;
-  justify-content: space-between;
-  flex-direction: row;
-  align-items: center;
-  width: 100%;
-  background-color: #d3d3d3;
-}
 
-.translation-dropdown-component {
+.block-side-panel {
   display: inline-block;
-}
+  margin-left: auto;
 
-.translation-dropdown .ui.dropdown {
-  background-color: #f9f9f9;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  padding: 8px;
-}
+  .translation-dropdown-container {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    width: 95px !important;
+    height: 33px !important;
+    margin-left: 10px !important;
 
-.translation-dropdown .ui.dropdown .menu {
-  background-color: #f9f9f9;
-}
+    .menu.transition.visible {
+      font-size: small !important;
+      width: 115px !important;
+    }
 
-.translation-dropdown .ui.dropdown .item {
-  color: #333;
-}
+    .text {
+      font-size: small !important;
+      color: #808080 !important;
+    }
+  }
 
-.translation-dropdown .ui.dropdown i.dropdown.icon {
-  color: #333;
-}
+  .translation-dropdown-button {
+    border-radius: .28571429rem;
+    border-top-left-radius: .285714rem;
+    border-top-right-radius: .285714rem;
+    border-bottom-right-radius: .285714rem;
+    border-bottom-left-radius: .285714rem;
+    font-family: sans-serif;
+    font-size: 100%;
+    line-height: 1.15;
+    text-rendering: auto;
+    color: buttontext;
+    letter-spacing: normal;
+    word-spacing: normal;
+    text-transform: none;
+    text-shadow: none;
+    display: flex;
+    justify-content: space-evenly;
+    flex-direction: column;
+    text-align: center;
+    align-items: flex-start;
+    cursor: default;
+    box-sizing: border-box;
+    background-color: buttonface;
+    padding: 1px 6px;
+    border-image: initial;
+  }
 
-.translation-dropdown-button {
-  width: 9.6rem;
-  border-radius: .28571429rem;
-  border-top-left-radius: .285714rem;
-  border-top-right-radius: .285714rem;
-  border-bottom-right-radius: .285714rem;
-  border-bottom-left-radius: .285714rem;
-  font-family: sans-serif;
-  font-size: 100%;
-  line-height: 1.15;
-  text-rendering: auto;
-  color: buttontext;
-  letter-spacing: normal;
-  word-spacing: normal;
-  text-transform: none;
-  text-shadow: none;
-  display: flex;
-  justify-content: space-evenly;
-  flex-direction: column;
-  text-align: center;
-  align-items: flex-start;
-  cursor: default;
-  box-sizing: border-box;
-  background-color: buttonface;
-  padding: 1px 6px;
-  border-image: initial;
-}
+  .dropdown-toggle {
+    width: 100%;
 
-.translation.menu {
-  left: -6px !important;
-  margin-top: 10px !important;
-  width: 9.6rem !important;
+    .translation-dropdown-wrapper {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      flex: 1;
+
+      .translation-dropdown-component {
+        display: inline-block;
+
+        .translation-dropdown-icon {
+          margin-left: 0 !important;
+          text-align: right;
+          color: #808080;
+        }
+      }
+
+      .translation-length {
+        font-size: .8em;
+        margin-left: 5px;
+        background-color: #808080;
+        border-radius: 100%;
+        color: #fff;
+        padding: 2px 5px;
+        margin-top: 1px;
+      }
+    }
+
+    .translate-hidden {
+      display: none !important;
+    }
+  }
+
+  .translation-dropdown-container .ui.dropdown .menu > .custom-item {
+    padding: 16px 4px !important;
+  }
 }
+