From 2ae1b25f99f20e1e5d46102e70f7f33db3b9086f Mon Sep 17 00:00:00 2001 From: nnhathung Date: Mon, 14 Aug 2023 19:40:26 +0700 Subject: [PATCH 01/18] feature-9082: Enhance language dropdown button --- app/components/public/stream/side-panel.hbs | 41 +++++++------ app/components/public/stream/side-panel.ts | 10 +++- app/services/selecting-language.js | 11 ++++ .../components/translation-dropdown.scss | 60 +++++++++++++------ 4 files changed, 85 insertions(+), 37 deletions(-) diff --git a/app/components/public/stream/side-panel.hbs b/app/components/public/stream/side-panel.hbs index 670ecba4882..2bc39283942 100644 --- a/app/components/public/stream/side-panel.hbs +++ b/app/components/public/stream/side-panel.hbs @@ -66,25 +66,32 @@ {{stream.name}} {{#if (gt stream.translations.length 1)}}
-
+
-
-
- -
-
- {{stream.translations.length}} {{t 'languages'}} -
-
- -
-
+ @selected={{this.selectingLanguage.getName}} + @onChange={{ action "switchLanguage"}} as |execute mapper|> +
+ {{#if this.language}} +
+ {{this.language}} +
+ {{else}} +
+ +
+
+ {{stream.translations.length}} +
+ {{/if}} +
+ +
+
- {{#each-in stream.translations as |key channel|}} -
{{channel.name}}
- {{/each-in}} + {{#each stream.translations as |channel|}} +
{{channel.name}}
+ {{/each}}
diff --git a/app/components/public/stream/side-panel.ts b/app/components/public/stream/side-panel.ts index 227baf29b08..d8f73c842b3 100644 --- a/app/components/public/stream/side-panel.ts +++ b/app/components/public/stream/side-panel.ts @@ -46,6 +46,7 @@ export default class PublicStreamSidePanel extends Component { @tracked showChat = false; @tracked showRoomChat = false; @tracked showVideoRoom = false; + @tracked language = null; @tracked translationChannels = [{ id : '0', @@ -109,9 +110,14 @@ export default class PublicStreamSidePanel extends Component { } @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); + this.language = this.selectingLanguage.getName(); + if (this.selectingLanguage.getName() === 'Original') { + this.language = null + } } @action diff --git a/app/services/selecting-language.js b/app/services/selecting-language.js index 62224ff29e0..cdb3943bbaf 100644 --- a/app/services/selecting-language.js +++ b/app/services/selecting-language.js @@ -5,6 +5,9 @@ export default class SelectingLanguageService extends Service { @tracked selectingLanguage = null; + @tracked + name = null; + @tracked isStreamYardVisible = true; @@ -16,6 +19,10 @@ export default class SelectingLanguageService extends Service { this.isStreamYardVisible = true; } + setName(name) { + this.name = name; + } + setStreamYardVisibility(isVisible) { this.isStreamYardVisible = isVisible; } @@ -32,4 +39,8 @@ export default class SelectingLanguageService extends Service { getLanguage() { return this.selectingLanguage; } + + getName() { + return this.name; + } } diff --git a/app/styles/components/translation-dropdown.scss b/app/styles/components/translation-dropdown.scss index 7c0d4715a44..568af969610 100644 --- a/app/styles/components/translation-dropdown.scss +++ b/app/styles/components/translation-dropdown.scss @@ -1,15 +1,30 @@ .translation-dropdown-container { - height: 3rem; + height: 2.5rem; + width: 135.5px !important; display: flex; justify-content: space-between; align-items: center; + + .menu.transition.visible { + font-size: small !important; + color: #808080 !important; + padding-left: 5px !important; + transform: translateX(-10.7%); + animation: slideInMenu .3s forwards; + top: 22px !important; + border-top-left-radius: unset; + border-top-right-radius: unset; + border-bottom-right-radius: .285714rem; + border-bottom-left-radius: .285714rem; + } + } .translation-dropdown-wrapper { - display: flex; - justify-content: space-between; align-items: center; flex: 1; + display: flex; + width: 107.5px; } .translation-dropdown { @@ -24,6 +39,21 @@ .translation-dropdown-component { display: inline-block; + + i.translation.icon { + font-size: 1.8em; + color: #808080; + } +} + +.translation-dropdown-language { + font-size: .8em; + margin-left: 5px; + background-color: #808080; + border-radius: 100%; + color: #fff; + padding: 2px 5px; + margin-top: 1px; } .translation-dropdown .ui.dropdown { @@ -33,20 +63,8 @@ padding: 8px; } -.translation-dropdown .ui.dropdown .menu { - background-color: #f9f9f9; -} - -.translation-dropdown .ui.dropdown .item { - color: #333; -} - -.translation-dropdown .ui.dropdown i.dropdown.icon { - color: #333; -} - .translation-dropdown-button { - width: 9.6rem; + width: 5rem; border-radius: .28571429rem; border-top-left-radius: .285714rem; border-top-right-radius: .285714rem; @@ -69,12 +87,18 @@ cursor: default; box-sizing: border-box; background-color: buttonface; - padding: 1px 6px; + padding: 1px 20px; border-image: initial; } .translation.menu { left: -6px !important; margin-top: 10px !important; - width: 9.6rem !important; + width: 5rem !important; + + .item { + font-size: small !important; + color: #808080 !important; + padding-left: 5px !important; + } } From ea82eaf98a530536bd5aad2b9ac54dd8bda4b102 Mon Sep 17 00:00:00 2001 From: nnhathung Date: Mon, 14 Aug 2023 19:41:07 +0700 Subject: [PATCH 02/18] feature-9082: Enhance language dropdown button --- app/styles/components/translation-dropdown.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/app/styles/components/translation-dropdown.scss b/app/styles/components/translation-dropdown.scss index 568af969610..7d21e3e85f5 100644 --- a/app/styles/components/translation-dropdown.scss +++ b/app/styles/components/translation-dropdown.scss @@ -41,18 +41,18 @@ display: inline-block; i.translation.icon { - font-size: 1.8em; + font-size: 1.8em; color: #808080; } } .translation-dropdown-language { - font-size: .8em; - margin-left: 5px; - background-color: #808080; - border-radius: 100%; - color: #fff; - padding: 2px 5px; + font-size: .8em; + margin-left: 5px; + background-color: #808080; + border-radius: 100%; + color: #fff; + padding: 2px 5px; margin-top: 1px; } From bce4e15e55503e63944c4120b0024fd9fd660e78 Mon Sep 17 00:00:00 2001 From: nnhathung Date: Mon, 14 Aug 2023 21:39:23 +0700 Subject: [PATCH 03/18] fix css --- app/components/public/stream/side-panel.hbs | 4 +--- app/styles/components/translation-dropdown.scss | 8 ++++---- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/app/components/public/stream/side-panel.hbs b/app/components/public/stream/side-panel.hbs index 2bc39283942..2d5bb3fdbb5 100644 --- a/app/components/public/stream/side-panel.hbs +++ b/app/components/public/stream/side-panel.hbs @@ -66,8 +66,7 @@ {{stream.name}} {{#if (gt stream.translations.length 1)}}
-
-
@@ -94,7 +93,6 @@ {{/each}}
-
{{/if}} diff --git a/app/styles/components/translation-dropdown.scss b/app/styles/components/translation-dropdown.scss index 7d21e3e85f5..196f5742941 100644 --- a/app/styles/components/translation-dropdown.scss +++ b/app/styles/components/translation-dropdown.scss @@ -1,7 +1,7 @@ .translation-dropdown-container { height: 2.5rem; width: 135.5px !important; - display: flex; + display: flex !important; justify-content: space-between; align-items: center; @@ -38,7 +38,7 @@ } .translation-dropdown-component { - display: inline-block; + display: flex; i.translation.icon { font-size: 1.8em; @@ -92,8 +92,8 @@ } .translation.menu { - left: -6px !important; - margin-top: 10px !important; + left: 14px !important; + margin-top: 18px !important; width: 5rem !important; .item { From 6df3e9c9c7e44598b98e0b159a067d694b104d8a Mon Sep 17 00:00:00 2001 From: nnhathung Date: Tue, 15 Aug 2023 18:19:37 +0700 Subject: [PATCH 04/18] fix UI --- app/components/public/stream/side-panel.hbs | 22 ++++----- app/components/public/stream/side-panel.ts | 11 +++-- app/services/selecting-language.js | 15 +++++- .../components/translation-dropdown.scss | 49 +++++++++++++------ 4 files changed, 63 insertions(+), 34 deletions(-) diff --git a/app/components/public/stream/side-panel.hbs b/app/components/public/stream/side-panel.hbs index 2d5bb3fdbb5..4b0fd421cec 100644 --- a/app/components/public/stream/side-panel.hbs +++ b/app/components/public/stream/side-panel.hbs @@ -60,7 +60,7 @@
{{#each this.streams as |stream|}} - + {{truncate (uppercase stream.name) 1 false}} {{stream.name}} @@ -69,25 +69,21 @@ -
- {{#if this.language}} -
- {{this.language}} -
- {{else}} -
+
+
{{stream.translations.length}}
- {{/if}} -
- +
+
-
+ {{#if (eq @currentRoom.id)}} +
{{this.selectingLanguage.getName}}
+ {{/if}} +
{{#each stream.translations as |channel|}}
{{channel.name}}
{{/each}} diff --git a/app/components/public/stream/side-panel.ts b/app/components/public/stream/side-panel.ts index d8f73c842b3..6c593fb1681 100644 --- a/app/components/public/stream/side-panel.ts +++ b/app/components/public/stream/side-panel.ts @@ -46,7 +46,6 @@ export default class PublicStreamSidePanel extends Component { @tracked showChat = false; @tracked showRoomChat = false; @tracked showVideoRoom = false; - @tracked language = null; @tracked translationChannels = [{ id : '0', @@ -114,10 +113,14 @@ export default class PublicStreamSidePanel extends Component { this.selectingLanguage.setLanguage(channel.url); this.selectingLanguage.updateTranslationYTId(); this.selectingLanguage.setName(channel.name); - this.language = this.selectingLanguage.getName(); - if (this.selectingLanguage.getName() === 'Original') { - this.language = null + } + + @action + switchRoom(stream: any) { + if (this.selectingLanguage.getTranslationRoomId() !== stream.id) { + this.selectingLanguage.setName(null); } + this.selectingLanguage.setTranslationRoomId(stream.id) } @action diff --git a/app/services/selecting-language.js b/app/services/selecting-language.js index cdb3943bbaf..2f378e06275 100644 --- a/app/services/selecting-language.js +++ b/app/services/selecting-language.js @@ -1,5 +1,6 @@ import Service from '@ember/service'; import { tracked } from '@glimmer/tracking'; +import { computed } from '@ember/object'; export default class SelectingLanguageService extends Service { @tracked @@ -8,6 +9,9 @@ export default class SelectingLanguageService extends Service { @tracked name = null; + @tracked + translationRoomId = null; + @tracked isStreamYardVisible = true; @@ -23,6 +27,10 @@ export default class SelectingLanguageService extends Service { this.name = name; } + setTranslationRoomId(roomId) { + this.translationRoomId = roomId; + } + setStreamYardVisibility(isVisible) { this.isStreamYardVisible = isVisible; } @@ -40,7 +48,12 @@ export default class SelectingLanguageService extends Service { return this.selectingLanguage; } - getName() { + getTranslationRoomId() { + return this.translationRoomId; + } + + @computed('name') + get getName() { return this.name; } } diff --git a/app/styles/components/translation-dropdown.scss b/app/styles/components/translation-dropdown.scss index 196f5742941..a207986b9aa 100644 --- a/app/styles/components/translation-dropdown.scss +++ b/app/styles/components/translation-dropdown.scss @@ -4,18 +4,16 @@ display: flex !important; justify-content: space-between; align-items: center; + margin-left: 10px !important; .menu.transition.visible { - font-size: small !important; - color: #808080 !important; - padding-left: 5px !important; transform: translateX(-10.7%); animation: slideInMenu .3s forwards; - top: 22px !important; - border-top-left-radius: unset; - border-top-right-radius: unset; - border-bottom-right-radius: .285714rem; - border-bottom-left-radius: .285714rem; + border-radius: 0; + } + + .text { + color: #808080 !important; } } @@ -38,12 +36,14 @@ } .translation-dropdown-component { - display: flex; - i.translation.icon { font-size: 1.8em; color: #808080; } + + .text-lang { + color: #808080 !important; + } } .translation-dropdown-language { @@ -59,17 +59,11 @@ .translation-dropdown .ui.dropdown { background-color: #f9f9f9; border: 1px solid #ccc; - border-radius: 4px; padding: 8px; } .translation-dropdown-button { width: 5rem; - 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; @@ -102,3 +96,26 @@ padding-left: 5px !important; } } + +.ui.translation.menu.menu-language { + transform: translateX(-10.7%) !important; + top: 22px; + width: 135px !important; + font-size: small !important; + color: #808080 !important; + border-radius: 0; + padding-left: 2px !important; +} + +.item-ic-language { + padding-right: 10px !important; +} + +.item-ic-dropdown { + margin-left: 8px !important; + text-align: right; +} + +.hidden { + display: none; +} From 1b3f7967cb050c639291271cc99a76fece4735eb Mon Sep 17 00:00:00 2001 From: nnhathung Date: Tue, 15 Aug 2023 19:08:20 +0700 Subject: [PATCH 05/18] fix missing header --- app/components/public/stream/side-panel.hbs | 4 ++-- app/styles/components/translation-dropdown.scss | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/public/stream/side-panel.hbs b/app/components/public/stream/side-panel.hbs index 4b0fd421cec..c8cefe69795 100644 --- a/app/components/public/stream/side-panel.hbs +++ b/app/components/public/stream/side-panel.hbs @@ -69,7 +69,7 @@ -
+
@@ -80,7 +80,7 @@
- {{#if (eq @currentRoom.id)}} + {{#if (eq @currentRoom.id stream.id)}}
{{this.selectingLanguage.getName}}
{{/if}}
diff --git a/app/styles/components/translation-dropdown.scss b/app/styles/components/translation-dropdown.scss index a207986b9aa..d06a0e3a855 100644 --- a/app/styles/components/translation-dropdown.scss +++ b/app/styles/components/translation-dropdown.scss @@ -116,6 +116,6 @@ text-align: right; } -.hidden { +.translate-hidden { display: none; } From 8098d938f58f0a862af8e0efa154ac76eaecabf2 Mon Sep 17 00:00:00 2001 From: nnhathung Date: Tue, 15 Aug 2023 19:30:40 +0700 Subject: [PATCH 06/18] fix missing header --- app/components/public/stream/side-panel.hbs | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/components/public/stream/side-panel.hbs b/app/components/public/stream/side-panel.hbs index c8cefe69795..fc3f65d1cc5 100644 --- a/app/components/public/stream/side-panel.hbs +++ b/app/components/public/stream/side-panel.hbs @@ -60,7 +60,7 @@
{{#each this.streams as |stream|}} - + {{truncate (uppercase stream.name) 1 false}} {{stream.name}} @@ -68,7 +68,8 @@
+ @onChange={{ action "switchLanguage"}} as |execute mapper| + {{action 'switchRoom' stream}} >
From 613025b625759156c2f8327e67ef7ae7350128d4 Mon Sep 17 00:00:00 2001 From: nnhathung Date: Tue, 15 Aug 2023 19:38:19 +0700 Subject: [PATCH 07/18] fix missing header --- app/components/public/stream/video-stream.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/app/components/public/stream/video-stream.ts b/app/components/public/stream/video-stream.ts index 225c27616f8..3291eb4532b 100644 --- a/app/components/public/stream/video-stream.ts +++ b/app/components/public/stream/video-stream.ts @@ -25,6 +25,9 @@ export default class PublicStreamVideoStream extends Component { @service l10n: any; + @service + selectingLanguage: any; + @service confirm: any; @@ -166,6 +169,10 @@ export default class PublicStreamVideoStream extends Component { 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 From 8b97d2ae5332ef27b7f504f57970d35e291b4601 Mon Sep 17 00:00:00 2001 From: nnhathung Date: Tue, 15 Aug 2023 22:26:11 +0700 Subject: [PATCH 08/18] fix missing header --- app/components/public/stream/side-panel.hbs | 25 +++--- app/components/public/stream/video-stream.ts | 2 +- app/services/selecting-language.js | 3 + .../components/translation-dropdown.scss | 88 +++++++++---------- 4 files changed, 57 insertions(+), 61 deletions(-) diff --git a/app/components/public/stream/side-panel.hbs b/app/components/public/stream/side-panel.hbs index fc3f65d1cc5..5858a18e6d7 100644 --- a/app/components/public/stream/side-panel.hbs +++ b/app/components/public/stream/side-panel.hbs @@ -61,35 +61,36 @@
{{#each this.streams as |stream|}} - {{truncate (uppercase stream.name) 1 false}} {{stream.name}} {{#if (gt stream.translations.length 1)}}
- +
-
- +
+
-
- {{stream.translations.length}} +
+ {{stream.translations.length}} {{t}}
-
- +
+
- {{#if (eq @currentRoom.id stream.id)}} -
{{this.selectingLanguage.getName}}
+ {{#if (and (eq @currentRoom.id stream.id) this.selectingLanguage.getName)}} +
{{this.selectingLanguage.getName}}
{{/if}} -
+
{{#each stream.translations as |channel|}} -
{{channel.name}}
+
{{channel.name}}
{{/each}}
+
{{/if}} diff --git a/app/components/public/stream/video-stream.ts b/app/components/public/stream/video-stream.ts index 3291eb4532b..c367b4fb743 100644 --- a/app/components/public/stream/video-stream.ts +++ b/app/components/public/stream/video-stream.ts @@ -25,7 +25,7 @@ export default class PublicStreamVideoStream extends Component { @service l10n: any; - @service + @service selectingLanguage: any; @service diff --git a/app/services/selecting-language.js b/app/services/selecting-language.js index 2f378e06275..478f8862e2a 100644 --- a/app/services/selecting-language.js +++ b/app/services/selecting-language.js @@ -54,6 +54,9 @@ export default class SelectingLanguageService extends Service { @computed('name') get getName() { + if (this.name === 'Original') { + return null; + } return this.name; } } diff --git a/app/styles/components/translation-dropdown.scss b/app/styles/components/translation-dropdown.scss index d06a0e3a855..1477faa34bb 100644 --- a/app/styles/components/translation-dropdown.scss +++ b/app/styles/components/translation-dropdown.scss @@ -1,28 +1,28 @@ .translation-dropdown-container { - height: 2.5rem; - width: 135.5px !important; - display: flex !important; + display: flex; justify-content: space-between; align-items: center; - margin-left: 10px !important; + width: 95px !important; + height: 33px !important; .menu.transition.visible { - transform: translateX(-10.7%); - animation: slideInMenu .3s forwards; - border-radius: 0; + width: 115px !important; } - .text { - color: #808080 !important; + .ui.translation.menu .item { + padding-left: 4px !important; } + .text { + color: #808080; + } } .translation-dropdown-wrapper { + display: flex; + justify-content: space-between; align-items: center; flex: 1; - display: flex; - width: 107.5px; } .translation-dropdown { @@ -36,17 +36,17 @@ } .translation-dropdown-component { - i.translation.icon { - font-size: 1.8em; - color: #808080; - } + display: inline-block; +} - .text-lang { - color: #808080 !important; - } +.translation-dropdown-icon { + margin-left: 0 !important; + text-align: right; + color: #808080; } -.translation-dropdown-language { + +.translation-length { font-size: .8em; margin-left: 5px; background-color: #808080; @@ -59,11 +59,28 @@ .translation-dropdown .ui.dropdown { background-color: #f9f9f9; border: 1px solid #ccc; + border-radius: 4px; padding: 8px; } +.translation-dropdown .ui.dropdown .menu { + background-color: #f9f9f9; +} + +.translation-dropdown .ui.dropdown .item { + color: #333; +} + +.translation-dropdown .ui.dropdown i.dropdown.icon { + color: #333; +} + .translation-dropdown-button { - width: 5rem; + 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; @@ -81,39 +98,14 @@ cursor: default; box-sizing: border-box; background-color: buttonface; - padding: 1px 20px; + padding: 1px 6px; border-image: initial; } .translation.menu { - left: 14px !important; - margin-top: 18px !important; - width: 5rem !important; - - .item { - font-size: small !important; - color: #808080 !important; - padding-left: 5px !important; - } -} - -.ui.translation.menu.menu-language { - transform: translateX(-10.7%) !important; - top: 22px; - width: 135px !important; - font-size: small !important; - color: #808080 !important; - border-radius: 0; - padding-left: 2px !important; -} + left: -6px !important; + width: 9.6rem !important; -.item-ic-language { - padding-right: 10px !important; -} - -.item-ic-dropdown { - margin-left: 8px !important; - text-align: right; } .translate-hidden { From 8e2e0d237da59ae078b361b998712d67b60eb10e Mon Sep 17 00:00:00 2001 From: nnhathung Date: Wed, 16 Aug 2023 09:12:35 +0700 Subject: [PATCH 09/18] fix missing header --- app/styles/components/translation-dropdown.scss | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/app/styles/components/translation-dropdown.scss b/app/styles/components/translation-dropdown.scss index 1477faa34bb..fbc0e24a998 100644 --- a/app/styles/components/translation-dropdown.scss +++ b/app/styles/components/translation-dropdown.scss @@ -6,6 +6,7 @@ height: 33px !important; .menu.transition.visible { + font-size: small !important; width: 115px !important; } @@ -14,7 +15,8 @@ } .text { - color: #808080; + font-size: small !important; + color: #808080 !important; } } From ac63b55570a9d31bd36e91c273cdc17676baa838 Mon Sep 17 00:00:00 2001 From: nnhathung Date: Wed, 16 Aug 2023 09:34:18 +0700 Subject: [PATCH 10/18] fix missing header --- app/styles/components/translation-dropdown.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/styles/components/translation-dropdown.scss b/app/styles/components/translation-dropdown.scss index fbc0e24a998..9af99ff6273 100644 --- a/app/styles/components/translation-dropdown.scss +++ b/app/styles/components/translation-dropdown.scss @@ -4,6 +4,7 @@ align-items: center; width: 95px !important; height: 33px !important; + margin-left: 10px !important; .menu.transition.visible { font-size: small !important; From 85ae5046e3450356fda316b0711df01652629687 Mon Sep 17 00:00:00 2001 From: nnhathung Date: Wed, 16 Aug 2023 14:10:25 +0700 Subject: [PATCH 11/18] avoid using css inline --- app/components/public/stream/side-panel.hbs | 2 +- app/styles/components/translation-dropdown.scss | 9 +++++---- 2 files changed, 6 insertions(+), 5 deletions(-) diff --git a/app/components/public/stream/side-panel.hbs b/app/components/public/stream/side-panel.hbs index 5858a18e6d7..b4e9b0e9c0e 100644 --- a/app/components/public/stream/side-panel.hbs +++ b/app/components/public/stream/side-panel.hbs @@ -72,7 +72,7 @@ {{action 'switchRoom' stream}} >
- +
{{stream.translations.length}} {{t}} diff --git a/app/styles/components/translation-dropdown.scss b/app/styles/components/translation-dropdown.scss index 9af99ff6273..6b04dcc7aaf 100644 --- a/app/styles/components/translation-dropdown.scss +++ b/app/styles/components/translation-dropdown.scss @@ -11,10 +11,6 @@ width: 115px !important; } - .ui.translation.menu .item { - padding-left: 4px !important; - } - .text { font-size: small !important; color: #808080 !important; @@ -114,3 +110,8 @@ .translate-hidden { display: none; } + +.language.icon { + font-size: 1.8em; + color: #808080; +} From 7706e8a41986dacc35ca3a1cbf14c02ac95dee43 Mon Sep 17 00:00:00 2001 From: ntthitrinh Date: Wed, 16 Aug 2023 16:48:06 +0700 Subject: [PATCH 12/18] feature-9082: Fix css dropdown side panel --- app/components/public/stream/side-panel.hbs | 11 +- app/components/public/stream/video-stream.ts | 3 - .../components/translation-dropdown.scss | 189 ++++++++---------- 3 files changed, 91 insertions(+), 112 deletions(-) diff --git a/app/components/public/stream/side-panel.hbs b/app/components/public/stream/side-panel.hbs index b4e9b0e9c0e..4f69d01352e 100644 --- a/app/components/public/stream/side-panel.hbs +++ b/app/components/public/stream/side-panel.hbs @@ -64,9 +64,9 @@ {{truncate (uppercase stream.name) 1 false}} {{stream.name}} {{#if (gt stream.translations.length 1)}} -
-
- +
+ @@ -84,9 +84,9 @@ {{#if (and (eq @currentRoom.id stream.id) this.selectingLanguage.getName)}}
{{this.selectingLanguage.getName}}
{{/if}} -
+
{{#each stream.translations as |channel|}} -
{{channel.name}}
+
{{channel.name}}
{{/each}}
@@ -94,7 +94,6 @@
{{/if}} - {{/each}}
diff --git a/app/components/public/stream/video-stream.ts b/app/components/public/stream/video-stream.ts index c367b4fb743..1975dfdafc2 100644 --- a/app/components/public/stream/video-stream.ts +++ b/app/components/public/stream/video-stream.ts @@ -60,9 +60,6 @@ export default class PublicStreamVideoStream extends Component { @tracked provider = ''; - @service - selectingLanguage: any; - @tracked languageUrl = ''; diff --git a/app/styles/components/translation-dropdown.scss b/app/styles/components/translation-dropdown.scss index 6b04dcc7aaf..b6368ff0bb4 100644 --- a/app/styles/components/translation-dropdown.scss +++ b/app/styles/components/translation-dropdown.scss @@ -1,106 +1,3 @@ -.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-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; -} - -.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; -} - -.translation-dropdown .ui.dropdown { - background-color: #f9f9f9; - border: 1px solid #ccc; - border-radius: 4px; - padding: 8px; -} - -.translation-dropdown .ui.dropdown .menu { - background-color: #f9f9f9; -} - -.translation-dropdown .ui.dropdown .item { - color: #333; -} - -.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.menu { left: -6px !important; width: 9.6rem !important; @@ -115,3 +12,89 @@ font-size: 1.8em; color: #808080; } + + +.block-side-panel { + 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 { + + .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; + } + } + } + + .translation-dropdown-container .ui.dropdown .menu > .custom-item { + padding: 16px 4px !important; + } +} From fdbe3b4d4915a8de057314b931677c1593e792d9 Mon Sep 17 00:00:00 2001 From: ntthitrinh Date: Wed, 16 Aug 2023 17:14:54 +0700 Subject: [PATCH 13/18] feature-9082: Fix css dropdown side panel --- app/styles/components/translation-dropdown.scss | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/app/styles/components/translation-dropdown.scss b/app/styles/components/translation-dropdown.scss index b6368ff0bb4..cc1b17ced7b 100644 --- a/app/styles/components/translation-dropdown.scss +++ b/app/styles/components/translation-dropdown.scss @@ -1,11 +1,6 @@ .translation.menu { left: -6px !important; width: 9.6rem !important; - -} - -.translate-hidden { - display: none; } .language.icon { @@ -92,9 +87,14 @@ margin-top: 1px; } } + + .translate-hidden { + display: none !important; + } } .translation-dropdown-container .ui.dropdown .menu > .custom-item { padding: 16px 4px !important; } } + From c29dc32fbcfe328f53e0dce57ffd1507396a72b8 Mon Sep 17 00:00:00 2001 From: ntthitrinh Date: Wed, 16 Aug 2023 17:31:17 +0700 Subject: [PATCH 14/18] feature-9082: Fix css dropdown side panel --- app/styles/components/translation-dropdown.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/app/styles/components/translation-dropdown.scss b/app/styles/components/translation-dropdown.scss index cc1b17ced7b..2a89293df2a 100644 --- a/app/styles/components/translation-dropdown.scss +++ b/app/styles/components/translation-dropdown.scss @@ -60,6 +60,7 @@ } .dropdown-toggle { + width: 100%; .translation-dropdown-wrapper { display: flex; From c6b7aca6dbf437a5574cfe2a20ce0d87021a4ce8 Mon Sep 17 00:00:00 2001 From: nnhathung Date: Thu, 17 Aug 2023 12:01:09 +0700 Subject: [PATCH 15/18] fix-9082 language dropdown not showing up --- app/components/public/stream/side-panel.hbs | 2 +- app/components/public/stream/side-panel.ts | 26 ++++++++++++++++----- app/models/video-stream.ts | 1 + 3 files changed, 22 insertions(+), 7 deletions(-) diff --git a/app/components/public/stream/side-panel.hbs b/app/components/public/stream/side-panel.hbs index 4f69d01352e..582416ee737 100644 --- a/app/components/public/stream/side-panel.hbs +++ b/app/components/public/stream/side-panel.hbs @@ -59,7 +59,7 @@
- {{#each this.streams as |stream|}} + {{#each this.streamList as |stream|}} {{truncate (uppercase stream.name) 1 false}} {{stream.name}} diff --git a/app/components/public/stream/side-panel.ts b/app/components/public/stream/side-panel.ts index 6c593fb1681..c1334271661 100644 --- a/app/components/public/stream/side-panel.ts +++ b/app/components/public/stream/side-panel.ts @@ -46,6 +46,7 @@ export default class PublicStreamSidePanel extends Component { @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 { 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 { this.loading = false; this.streams = [...this.streams]; } + + @computed('languageList.@each.streamId') + get streamList() { + return this.streams; + } } diff --git a/app/models/video-stream.ts b/app/models/video-stream.ts index 9376f6c1714..423845e7f9f 100644 --- a/app/models/video-stream.ts +++ b/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[]; From c7b6dd21d379cc650dd8cd6310fa96cbc221a0d7 Mon Sep 17 00:00:00 2001 From: nnhathung Date: Thu, 17 Aug 2023 12:04:04 +0700 Subject: [PATCH 16/18] fix-9082 language dropdown not showing up --- app/components/public/stream/side-panel.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/components/public/stream/side-panel.ts b/app/components/public/stream/side-panel.ts index c1334271661..271b14a93d8 100644 --- a/app/components/public/stream/side-panel.ts +++ b/app/components/public/stream/side-panel.ts @@ -185,7 +185,7 @@ export default class PublicStreamSidePanel extends Component { } @computed('languageList.@each.streamId') - get streamList() { - return this.streams; - } + get streamList() { + return this.streams; + } } From 502414cb9df8e5d1d79127c385d5747b9f259700 Mon Sep 17 00:00:00 2001 From: lthanhhieu Date: Fri, 18 Aug 2023 14:25:52 +0700 Subject: [PATCH 17/18] feature-9082: Enhance language dropdown button --- app/components/public/stream/video-stream.hbs | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/app/components/public/stream/video-stream.hbs b/app/components/public/stream/video-stream.hbs index c210fab2da5..e660746ea06 100644 --- a/app/components/public/stream/video-stream.hbs +++ b/app/components/public/stream/video-stream.hbs @@ -8,19 +8,16 @@ -{{/if}} - {{#if (eq @videoStream.videoChannel.provider 'jitsi')}} {{/if}} {{#if (eq this.provider 'youtube')}} - {{/if}} {{#if (and (eq @videoStream.videoChannel.provider 'vimeo') this.vimeoId)}} From a6053d9f8ba35a5b0e8229c81dae64a91543db24 Mon Sep 17 00:00:00 2001 From: lthanhhieu Date: Fri, 18 Aug 2023 14:26:34 +0700 Subject: [PATCH 18/18] feature-9082: Enhance language dropdown button --- app/routes/public/cfs/edit-speaker.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/routes/public/cfs/edit-speaker.js b/app/routes/public/cfs/edit-speaker.js index ebad0618777..c65891ef71a 100644 --- a/app/routes/public/cfs/edit-speaker.js +++ b/app/routes/public/cfs/edit-speaker.js @@ -9,7 +9,7 @@ export default class EditSpeakerRoute extends Route { async model(params) { const eventDetails = this.modelFor('public'); - const speaker = await this.store.findRecord('speaker', params.speaker_id, { include: 'sessions' }) + const speaker = await this.store.findRecord('speaker', params.speaker_id, { include: 'sessions' }); return { event : eventDetails, forms : await eventDetails.query('customForms', { @@ -24,4 +24,4 @@ export default class EditSpeakerRoute extends Route { speaker }; } -} \ No newline at end of file +}