From 0bb0a02fdec89285293115a4765a72ab2504b600 Mon Sep 17 00:00:00 2001
From: odkhang <odkhang@tma.com.vn>
Date: Thu, 1 Aug 2024 16:00:21 +0700
Subject: [PATCH 1/7] Only show audio translation option if available

---
 webapp/src/views/rooms/item.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/views/rooms/item.vue b/webapp/src/views/rooms/item.vue
index 5c18dbf2..561cf234 100644
--- a/webapp/src/views/rooms/item.vue
+++ b/webapp/src/views/rooms/item.vue
@@ -8,7 +8,7 @@
 			reactions-bar(:expanded="true", @expand="activeStageTool = 'reaction'")
 			//- reactions-bar(:expanded="activeStageTool === 'reaction'", @expand="activeStageTool = 'reaction'")
 			// Added dropdown menu for audio translations near the reactions bar
-			AudioTranslationDropdown(:languages="languages", @languageChanged="handleLanguageChange")
+			AudioTranslationDropdown(v-if="languages.length > 1", :languages="languages", @languageChanged="handleLanguageChange")
 	media-source-placeholder(v-else-if="modules['call.bigbluebutton'] || modules['call.zoom']")
 	roulette(v-else-if="modules['networking.roulette'] && $features.enabled('roulette')", :module="modules['networking.roulette']", :room="room")
 	landing-page(v-else-if="modules['page.landing']", :module="modules['page.landing']")

From bebea7fd2c925d05477db83e8d45dd378461cb85 Mon Sep 17 00:00:00 2001
From: odkhang <odkhang@tma.com.vn>
Date: Wed, 7 Aug 2024 16:07:31 +0700
Subject: [PATCH 2/7] shrink reaction bar

---
 webapp/src/components/AudioTranslationDropdown.vue | 7 +------
 webapp/src/components/ReactionsBar.vue             | 7 +++++--
 webapp/src/views/rooms/item.vue                    | 4 ++--
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/webapp/src/components/AudioTranslationDropdown.vue b/webapp/src/components/AudioTranslationDropdown.vue
index 7e0f1143..7b4b28e5 100644
--- a/webapp/src/components/AudioTranslationDropdown.vue
+++ b/webapp/src/components/AudioTranslationDropdown.vue
@@ -1,6 +1,5 @@
 <template lang="pug">
 div.c-audio-translation
-		h4 Audio Translation
 		bunt-select(
 		name="audio-translation",
 		v-model="selectedLanguage",
@@ -43,11 +42,7 @@ export default {
 
 <style scoped>
 .c-audio-translation {
-		margin-bottom: 3em;
-}
-
-.c-audio-translation h4 {
-		margin-bottom: 0.5em;
+	height: 65px;
 }
 
 .bunt-select {
diff --git a/webapp/src/components/ReactionsBar.vue b/webapp/src/components/ReactionsBar.vue
index b8f25329..60fd7329 100644
--- a/webapp/src/components/ReactionsBar.vue
+++ b/webapp/src/components/ReactionsBar.vue
@@ -39,7 +39,7 @@ export default {
 <style lang="stylus">
 .c-reactions-bar
 	position: relative
-	width: 64px
+	margin-left: 10px
 	height: 56px
 	.actions
 		position: absolute
@@ -61,12 +61,15 @@ export default {
 		width: @height
 		display: inline-block
 	&:not(.expanded)
+		width: 50px
+		margin-left: 10px
 		.actions:hover
 			cursor: pointer
 			background-color: $clr-grey-100
 		.bunt-icon-button
 			pointer-events: none
 	&.expanded
+		width: 230px
 		.actions
-			transform: translateX(calc(64px - 100% - 16px))
+			transform: translateX(calc(64px - 21% - 16px));
 </style>
diff --git a/webapp/src/views/rooms/item.vue b/webapp/src/views/rooms/item.vue
index c1f36bec..201eaa16 100644
--- a/webapp/src/views/rooms/item.vue
+++ b/webapp/src/views/rooms/item.vue
@@ -5,10 +5,10 @@
 		reactions-overlay(v-if="modules['livestream.native'] || modules['livestream.youtube'] || modules['livestream.iframe'] || modules['call.janus']")
 		.stage-tool-blocker(v-if="activeStageTool !== null", @click="activeStageTool = null")
 		.stage-tools(v-if="modules['livestream.native'] || modules['livestream.youtube'] || modules['livestream.iframe'] || modules['call.janus']")
-			reactions-bar(:expanded="true", @expand="activeStageTool = 'reaction'")
-			//- reactions-bar(:expanded="activeStageTool === 'reaction'", @expand="activeStageTool = 'reaction'")
+			//- reactions-bar(:expanded="true", @expand="activeStageTool = 'reaction'")
 			// Added dropdown menu for audio translations near the reactions bar
 			AudioTranslationDropdown(v-if="languages.length > 1", :languages="languages", @languageChanged="handleLanguageChange")
+			reactions-bar(:expanded="activeStageTool === 'reaction'", @expand="activeStageTool = 'reaction'")
 	media-source-placeholder(v-else-if="modules['call.bigbluebutton'] || modules['call.zoom']")
 	roulette(v-else-if="modules['networking.roulette'] && $features.enabled('roulette')", :module="modules['networking.roulette']", :room="room")
 	landing-page(v-else-if="modules['page.landing']", :module="modules['page.landing']")

From c677a684cca708d71f3a878a27b12c7eec2cab92 Mon Sep 17 00:00:00 2001
From: Tri Truong <tmtri@tma.com.vn>
Date: Wed, 7 Aug 2024 16:22:33 +0700
Subject: [PATCH 3/7] update css for reaction bar

---
 webapp/src/components/ReactionsBar.vue | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/webapp/src/components/ReactionsBar.vue b/webapp/src/components/ReactionsBar.vue
index 60fd7329..4fd16e9d 100644
--- a/webapp/src/components/ReactionsBar.vue
+++ b/webapp/src/components/ReactionsBar.vue
@@ -54,14 +54,16 @@ export default {
 		transition: transform .3s ease
 	.bunt-icon-button
 		icon-button-style()
+		height: 30px !important
+		width: 30px !important
 		&:not(:first-child)
 			margin-left: 8px
 	.emoji
-		height: 28px
+		height: 30px
 		width: @height
 		display: inline-block
 	&:not(.expanded)
-		width: 50px
+		width: 40px
 		margin-left: 10px
 		.actions:hover
 			cursor: pointer

From 7ec51f376e26ed02b749914eb5e77f71756d2a43 Mon Sep 17 00:00:00 2001
From: odkhang <odkhang@tma.com.vn>
Date: Wed, 7 Aug 2024 17:23:18 +0700
Subject: [PATCH 4/7] shrink emoji bar

---
 webapp/src/components/AudioTranslationDropdown.vue | 1 +
 webapp/src/components/ReactionsBar.vue             | 3 ++-
 2 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/webapp/src/components/AudioTranslationDropdown.vue b/webapp/src/components/AudioTranslationDropdown.vue
index 7b4b28e5..fd00f6f4 100644
--- a/webapp/src/components/AudioTranslationDropdown.vue
+++ b/webapp/src/components/AudioTranslationDropdown.vue
@@ -43,6 +43,7 @@ export default {
 <style scoped>
 .c-audio-translation {
 	height: 65px;
+	padding-top: 3px;
 }
 
 .bunt-select {
diff --git a/webapp/src/components/ReactionsBar.vue b/webapp/src/components/ReactionsBar.vue
index 4fd16e9d..2a897771 100644
--- a/webapp/src/components/ReactionsBar.vue
+++ b/webapp/src/components/ReactionsBar.vue
@@ -52,6 +52,7 @@ export default {
 		border-radius: 24px
 		padding: 4px
 		transition: transform .3s ease
+		z-index: 9000
 	.bunt-icon-button
 		icon-button-style()
 		height: 30px !important
@@ -71,7 +72,7 @@ export default {
 		.bunt-icon-button
 			pointer-events: none
 	&.expanded
-		width: 230px
+		width: 205px
 		.actions
 			transform: translateX(calc(64px - 21% - 16px));
 </style>

From e4538542018859a109215586faa0c3edeed530d3 Mon Sep 17 00:00:00 2001
From: odkhang <odkhang@tma.com.vn>
Date: Wed, 7 Aug 2024 20:14:54 +0700
Subject: [PATCH 5/7] move reaction bar to left side

---
 webapp/src/components/AudioTranslationDropdown.vue |  8 ++++++++
 webapp/src/components/ReactionsBar.vue             | 14 +++++++++-----
 webapp/src/views/rooms/item.vue                    |  5 +++--
 3 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/webapp/src/components/AudioTranslationDropdown.vue b/webapp/src/components/AudioTranslationDropdown.vue
index fd00f6f4..ba03660c 100644
--- a/webapp/src/components/AudioTranslationDropdown.vue
+++ b/webapp/src/components/AudioTranslationDropdown.vue
@@ -44,6 +44,14 @@ export default {
 .c-audio-translation {
 	height: 65px;
 	padding-top: 3px;
+	margin-right: 5px;
+}
+
+@media (max-width: 992px) {
+  .c-audio-translation {
+    width: 50%;
+    margin-right: 5px;
+  }
 }
 
 .bunt-select {
diff --git a/webapp/src/components/ReactionsBar.vue b/webapp/src/components/ReactionsBar.vue
index 2a897771..f4bb892a 100644
--- a/webapp/src/components/ReactionsBar.vue
+++ b/webapp/src/components/ReactionsBar.vue
@@ -41,6 +41,8 @@ export default {
 	position: relative
 	margin-left: 10px
 	height: 56px
+	+above('m')
+		right: 160px
 	.actions
 		position: absolute
 		bottom: 5px
@@ -55,8 +57,8 @@ export default {
 		z-index: 9000
 	.bunt-icon-button
 		icon-button-style()
-		height: 30px !important
-		width: 30px !important
+		height: 27px !important
+		width: 27px !important
 		&:not(:first-child)
 			margin-left: 8px
 	.emoji
@@ -65,14 +67,16 @@ export default {
 		display: inline-block
 	&:not(.expanded)
 		width: 40px
-		margin-left: 10px
+		+below('m')
+			left: -150px
 		.actions:hover
 			cursor: pointer
 			background-color: $clr-grey-100
 		.bunt-icon-button
 			pointer-events: none
 	&.expanded
-		width: 205px
 		.actions
-			transform: translateX(calc(64px - 21% - 16px));
+			transform: translateX(calc(50px - 21% - 15px));
+			+above('m')
+				transform: translateX(calc(50px - 21% - 50px));
 </style>
diff --git a/webapp/src/views/rooms/item.vue b/webapp/src/views/rooms/item.vue
index 201eaa16..2956de95 100644
--- a/webapp/src/views/rooms/item.vue
+++ b/webapp/src/views/rooms/item.vue
@@ -5,10 +5,9 @@
 		reactions-overlay(v-if="modules['livestream.native'] || modules['livestream.youtube'] || modules['livestream.iframe'] || modules['call.janus']")
 		.stage-tool-blocker(v-if="activeStageTool !== null", @click="activeStageTool = null")
 		.stage-tools(v-if="modules['livestream.native'] || modules['livestream.youtube'] || modules['livestream.iframe'] || modules['call.janus']")
-			//- reactions-bar(:expanded="true", @expand="activeStageTool = 'reaction'")
 			// Added dropdown menu for audio translations near the reactions bar
+			reactions-bar(:expanded="$mq.above['m'] ? true : activeStageTool === 'reaction'", @expand="activeStageTool = 'reaction'")
 			AudioTranslationDropdown(v-if="languages.length > 1", :languages="languages", @languageChanged="handleLanguageChange")
-			reactions-bar(:expanded="activeStageTool === 'reaction'", @expand="activeStageTool = 'reaction'")
 	media-source-placeholder(v-else-if="modules['call.bigbluebutton'] || modules['call.zoom']")
 	roulette(v-else-if="modules['networking.roulette'] && $features.enabled('roulette')", :module="modules['networking.roulette']", :room="room")
 	landing-page(v-else-if="modules['page.landing']", :module="modules['page.landing']")
@@ -173,6 +172,8 @@ export default {
 				height: 2px
 				width: calc(100% - 16px)
 				background-color: var(--clr-primary)
+		+below('m')
+			justify-content: space-between
 	.stage-tool-blocker
 		position: fixed
 		top: 0

From bf4d36c421bffdf75931cc8e7deaa48dcd5f42bd Mon Sep 17 00:00:00 2001
From: odkhang <odkhang@tma.com.vn>
Date: Fri, 9 Aug 2024 17:55:53 +0700
Subject: [PATCH 6/7] update size for emoji icon

---
 webapp/src/components/ReactionsBar.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/webapp/src/components/ReactionsBar.vue b/webapp/src/components/ReactionsBar.vue
index f4bb892a..b70004e1 100644
--- a/webapp/src/components/ReactionsBar.vue
+++ b/webapp/src/components/ReactionsBar.vue
@@ -62,7 +62,7 @@ export default {
 		&:not(:first-child)
 			margin-left: 8px
 	.emoji
-		height: 30px
+		height: 26px
 		width: @height
 		display: inline-block
 	&:not(.expanded)

From 9f8bf7b08787e8c2bdb99f939751dd374d172d77 Mon Sep 17 00:00:00 2001
From: odkhang <odkhang@tma.com.vn>
Date: Fri, 9 Aug 2024 18:05:03 +0700
Subject: [PATCH 7/7] disable expand action for reation bar

---
 webapp/src/components/ReactionsBar.vue | 1 -
 webapp/src/views/rooms/item.vue        | 2 +-
 2 files changed, 1 insertion(+), 2 deletions(-)

diff --git a/webapp/src/components/ReactionsBar.vue b/webapp/src/components/ReactionsBar.vue
index b70004e1..00742534 100644
--- a/webapp/src/components/ReactionsBar.vue
+++ b/webapp/src/components/ReactionsBar.vue
@@ -54,7 +54,6 @@ export default {
 		border-radius: 24px
 		padding: 4px
 		transition: transform .3s ease
-		z-index: 9000
 	.bunt-icon-button
 		icon-button-style()
 		height: 27px !important
diff --git a/webapp/src/views/rooms/item.vue b/webapp/src/views/rooms/item.vue
index 2956de95..fcf0bf7d 100644
--- a/webapp/src/views/rooms/item.vue
+++ b/webapp/src/views/rooms/item.vue
@@ -6,7 +6,7 @@
 		.stage-tool-blocker(v-if="activeStageTool !== null", @click="activeStageTool = null")
 		.stage-tools(v-if="modules['livestream.native'] || modules['livestream.youtube'] || modules['livestream.iframe'] || modules['call.janus']")
 			// Added dropdown menu for audio translations near the reactions bar
-			reactions-bar(:expanded="$mq.above['m'] ? true : activeStageTool === 'reaction'", @expand="activeStageTool = 'reaction'")
+			reactions-bar(:expanded="true", @expand="activeStageTool = 'reaction'")
 			AudioTranslationDropdown(v-if="languages.length > 1", :languages="languages", @languageChanged="handleLanguageChange")
 	media-source-placeholder(v-else-if="modules['call.bigbluebutton'] || modules['call.zoom']")
 	roulette(v-else-if="modules['networking.roulette'] && $features.enabled('roulette')", :module="modules['networking.roulette']", :room="room")