Revert "Feature-9082 Enhance language dropdown button (#9105)"

This reverts commit 28b3a36.

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

@@ -60,40 +60,38 @@
       <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 class="block-side-panel">
-                    <div class="translation-dropdown-button translation-dropdown-container">
+                  <div style="display:inline-block;margin-left:auto">
+                    <div class="translation-dropdown-button translation-dropdown-container ">
                       <UiDropdown class="btn btn-secondary dropdown-toggle"
-                                  @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}}
+                                  @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}}
                         </div>
                       </UiDropdown>
                     </div>
                   </div>
                 {{/if}}
             </a>
+
           {{/each}}
         </div>
       </div>

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

@@ -109,18 +109,9 @@ export default class PublicStreamSidePanel extends Component<Args> {
   }
 
   @action
-  switchLanguage(channel: any): void {
-    this.selectingLanguage.setLanguage(channel.url);
+  switchLanguage(url: string): void {
+    this.selectingLanguage.setLanguage(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,9 +25,6 @@ export default class PublicStreamVideoStream extends Component<Args> {
   @service
   l10n: any;
 
-  @service
-  selectingLanguage: any;
-
   @service
   confirm: any;
 
@@ -60,6 +57,9 @@ export default class PublicStreamVideoStream extends Component<Args> {
   @tracked
   provider = '';
 
+  @service
+  selectingLanguage: any;
+
   @tracked
   languageUrl = '';
 
@@ -166,10 +166,6 @@ 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)
     this.eventCheckIn(this.args.event.identifier, stream.microlocationId)
   }
 

app/services/selecting-language.js

@@ -1,17 +1,10 @@
 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;
 
@@ -23,14 +16,6 @@ export default class SelectingLanguageService extends Service {
     this.isStreamYardVisible = true;
   }
 
-  setName(name) {
-    this.name = name;
-  }
-
-  setTranslationRoomId(roomId) {
-    this.translationRoomId = roomId;
-  }
-
   setStreamYardVisibility(isVisible) {
     this.isStreamYardVisible = isVisible;
   }
@@ -47,16 +32,4 @@ 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,101 +1,80 @@
-.translation.menu {
-  left: -6px !important;
-  width: 9.6rem !important;
+.translation-dropdown-container {
+  height: 3rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
 }
 
-.language.icon {
-  font-size: 1.8em;
-  color: #808080;
+.translation-dropdown-wrapper {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  flex: 1;
 }
 
+.translation-dropdown {
+  padding: 2px;
+  display: flex;
+  justify-content: space-between;
+  flex-direction: row;
+  align-items: center;
+  width: 100%;
+  background-color: #d3d3d3;
+}
 
-.block-side-panel {
+.translation-dropdown-component {
   display: inline-block;
-  margin-left: auto;
-
-  .translation-dropdown-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    width: 95px !important;
-    height: 33px !important;
-    margin-left: 10px !important;
-
-    .menu.transition.visible {
-      font-size: small !important;
-      width: 115px !important;
-    }
-
-    .text {
-      font-size: small !important;
-      color: #808080 !important;
-    }
-  }
-
-  .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;
-  }
-
-  .dropdown-toggle {
-    width: 100%;
-
-    .translation-dropdown-wrapper {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      flex: 1;
+}
 
-      .translation-dropdown-component {
-        display: inline-block;
+.translation-dropdown .ui.dropdown {
+  background-color: #f9f9f9;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  padding: 8px;
+}
 
-        .translation-dropdown-icon {
-          margin-left: 0 !important;
-          text-align: right;
-          color: #808080;
-        }
-      }
+.translation-dropdown .ui.dropdown .menu {
+  background-color: #f9f9f9;
+}
 
-      .translation-length {
-        font-size: .8em;
-        margin-left: 5px;
-        background-color: #808080;
-        border-radius: 100%;
-        color: #fff;
-        padding: 2px 5px;
-        margin-top: 1px;
-      }
-    }
+.translation-dropdown .ui.dropdown .item {
+  color: #333;
+}
 
-    .translate-hidden {
-      display: none !important;
-    }
-  }
+.translation-dropdown .ui.dropdown i.dropdown.icon {
+  color: #333;
+}
 
-  .translation-dropdown-container .ui.dropdown .menu > .custom-item {
-    padding: 16px 4px !important;
-  }
+.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;
 }
 
+.translation.menu {
+  left: -6px !important;
+  margin-top: 10px !important;
+  width: 9.6rem !important;
+}