diff --git a/addons/mail/static/src/core/thread_model.js b/addons/mail/static/src/core/thread_model.js index 0cc15614208..73c401792a2 100644 --- a/addons/mail/static/src/core/thread_model.js +++ b/addons/mail/static/src/core/thread_model.js @@ -378,7 +378,25 @@ export class Thread { orderedOnlineMembers.push(member); } } - return orderedOnlineMembers.sort((m1, m2) => (m1.persona.name < m2.persona.name ? -1 : 1)); + return orderedOnlineMembers.sort((m1, m2) => { + const m1HasRtc = Boolean(m1.rtcSession); + const m2HasRtc = Boolean(m2.rtcSession); + if (m1HasRtc === m2HasRtc) { + /** + * If raisingHand is falsy, it gets an Infinity value so that when + * we sort by [oldest/lowest-value]-first, falsy values end up last. + */ + const m1RaisingValue = m1.rtcSession?.raisingHand || Infinity; + const m2RaisingValue = m2.rtcSession?.raisingHand || Infinity; + if (m1HasRtc && m1RaisingValue !== m2RaisingValue) { + return m1RaisingValue - m2RaisingValue; + } else { + return m1.persona.name?.localeCompare(m2.persona.name) ?? 1; + } + } else { + return m2HasRtc - m1HasRtc; + } + }); } get unknownMembersCount() { diff --git a/addons/mail/static/src/discuss/channel_member_list.xml b/addons/mail/static/src/discuss/channel_member_list.xml index a6c08b0638a..621bf76810f 100644 --- a/addons/mail/static/src/discuss/channel_member_list.xml +++ b/addons/mail/static/src/discuss/channel_member_list.xml @@ -33,7 +33,13 @@ - + + + + + + + diff --git a/addons/mail/static/src/rtc/call.js b/addons/mail/static/src/rtc/call.js index 77534321e90..44e3c6b52fb 100644 --- a/addons/mail/static/src/rtc/call.js +++ b/addons/mail/static/src/rtc/call.js @@ -72,25 +72,45 @@ export class Call extends Component { } get visibleCards() { - const cards = []; + const raisingHandCards = []; + const sessionCards = []; + const invitationCards = []; const filterVideos = this.userSettings.showOnlyVideo && this.props.thread.videoCount > 0; for (const session of Object.values(this.props.thread.rtcSessions)) { if (!filterVideos || session.videoStream) { - cards.push({ + const data = { key: "session_" + session.id, session, - }); + }; + if (session.raisingHand) { + raisingHandCards.push(data); + } else { + sessionCards.push(data); + } } } if (!filterVideos) { for (const memberId of this.props.thread.invitedMemberIds) { - cards.push({ + invitationCards.push({ key: "member_" + memberId, member: this.store.channelMembers[memberId], }); } } - return cards; + raisingHandCards.sort((c1, c2) => { + return c1.session.raisingHand - c2.session.raisingHand; + }); + sessionCards.sort((c1, c2) => { + return ( + c1.session.channelMember?.persona?.name?.localeCompare( + c2.session.channelMember?.persona?.name + ) ?? 1 + ); + }); + invitationCards.sort((c1, c2) => { + return c1.member.persona?.name?.localeCompare(c2.member.persona?.name) ?? 1; + }); + return raisingHandCards.concat(sessionCards, invitationCards); } get visibleMainCards() { diff --git a/addons/mail/static/src/rtc/call_action_list.js b/addons/mail/static/src/rtc/call_action_list.js index 554bdcbd431..fa0ada2dc1e 100644 --- a/addons/mail/static/src/rtc/call_action_list.js +++ b/addons/mail/static/src/rtc/call_action_list.js @@ -36,7 +36,7 @@ export class CallActionList extends Component { } async onClickRaiseHand(ev) { - this.rtc.raiseHand(!this.rtc.state.selfSession.isRaisingHand); + this.rtc.raiseHand(!this.rtc.state.selfSession.raisingHand); } /** diff --git a/addons/mail/static/src/rtc/call_action_list.xml b/addons/mail/static/src/rtc/call_action_list.xml index 08ecc468c06..3a51cfa0b06 100644 --- a/addons/mail/static/src/rtc/call_action_list.xml +++ b/addons/mail/static/src/rtc/call_action_list.xml @@ -37,10 +37,10 @@ }"/> - Lower hand + Lower hand Raise hand