[IMP] mail: rename RTC models (step 1)
- rename 'RtcController' to 'CallActionListView' - rename 'RtcOptionList' to 'CallOptionMenu' - rename 'RtcInvitationCard' to 'CallInviteRequestPopup' - rename 'RtcInvitations' to 'CallInviteRequestPopupList' - rename 'RtcVideo' to 'CallParticipantVideo' Task-2867786 Part-of: odoo/odoo#92463
This commit is contained in:
Alexandre Kühn
@@ -4,7 +4,7 @@
|
||||
<t t-name="mail.RtcActivityNotice" owl="1">
|
||||
<div class="o_RtcActivityNotice dropdown" t-attf-class="{{ className }}" t-ref="root">
|
||||
<t t-if="messaging">
|
||||
<RtcInvitations/>
|
||||
<CallInviteRequestPopupList/>
|
||||
<t t-if="messaging.rtc.channel">
|
||||
<button class="o_RtcActivityNotice_button px-3 user-select-none dropdown-toggle o-no-caret o-dropdown--narrow" t-att-title="rtcActivityNoticeView.buttonTitle" role="button" t-on-click="messaging.rtc.onClickActivityNoticeButton">
|
||||
<div class="o_RtcActivityNotice_buttonContent d-flex align-items-center">
|
||||
|
||||
+2
-2
@@ -17,8 +17,8 @@
|
||||
t-ref="root"
|
||||
>
|
||||
<!-- card -->
|
||||
<t t-if="callParticipantCard.rtcVideoView">
|
||||
<RtcVideo record="callParticipantCard.rtcVideoView"/>
|
||||
<t t-if="callParticipantCard.callParticipantVideoView">
|
||||
<CallParticipantVideo record="callParticipantCard.callParticipantVideoView"/>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<div class="o_RtcCallParticipantCard_avatarFrame d-flex align-items-center justify-content-center h-100 w-100 rounded-sm" t-att-class="{ 'o-isMinimized': callParticipantCard.isMinimized, 'bg-secondary': !callParticipantCard.isMinimized}" draggable="false">
|
||||
|
||||
@@ -45,7 +45,7 @@
|
||||
<t t-if="rtcCallViewer.showOverlay or !rtcCallViewer.isControllerFloating">
|
||||
<div class="o_RtcCallViewer_controls d-flex justify-content-center w-100 pb-1" t-att-class="{ 'o-isFloating position-absolute bottom-0 pb-3': rtcCallViewer.isControllerFloating }">
|
||||
<div class="o_RtcCallViewer_controlsOverlayContainer" t-on-mousemove="rtcCallViewer.onMouseMoveOverlay">
|
||||
<RtcController record="rtcCallViewer.rtcController"/>
|
||||
<CallActionList record="rtcCallViewer.callActionListView"/>
|
||||
</div>
|
||||
</div>
|
||||
</t>
|
||||
|
||||
@@ -6,21 +6,21 @@ import Popover from "web.Popover";
|
||||
|
||||
const { Component } = owl;
|
||||
|
||||
export class RtcController extends Component {
|
||||
export class CallActionList extends Component {
|
||||
|
||||
/**
|
||||
* @returns {RtcController}
|
||||
* @returns {CallActionListView}
|
||||
*/
|
||||
get rtcController() {
|
||||
get callActionListView() {
|
||||
return this.props.record;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Object.assign(RtcController, {
|
||||
Object.assign(CallActionList, {
|
||||
props: { record: Object },
|
||||
template: 'mail.RtcController',
|
||||
template: 'mail.CallActionList',
|
||||
components: { Popover },
|
||||
});
|
||||
|
||||
registerMessagingComponent(RtcController);
|
||||
registerMessagingComponent(CallActionList);
|
||||
|
||||
@@ -1,113 +1,113 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t t-name="mail.RtcController" owl="1">
|
||||
<t t-if="rtcController">
|
||||
<div class="o_RtcController d-flex justify-content-between" t-attf-class="{{ className }}" t-ref="root">
|
||||
<div class="o_RtcController_buttons d-flex align-items-center flex-wrap">
|
||||
<t t-if="rtcController.callViewer.threadView.thread.rtc and messaging.rtc.currentRtcSession">
|
||||
<button class="o_RtcController_button btn d-flex m-1 border-0 rounded-circle bg-800 shadow-none"
|
||||
t-att-class="{ 'o-isActive': !messaging.rtc.currentRtcSession.isMute, 'o-isSmall p-2': rtcController.isSmall, 'p-3': !rtcController.isSmall }"
|
||||
t-att-aria-label="rtcController.microphoneButtonTitle"
|
||||
t-att-title="rtcController.microphoneButtonTitle"
|
||||
t-on-click="rtcController.onClickMicrophone">
|
||||
<div class="o_RtcController_buttonIconWrapper fa-stack" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
|
||||
<t t-name="mail.CallActionList" owl="1">
|
||||
<t t-if="callActionListView">
|
||||
<div class="o_CallActionList d-flex justify-content-between" t-attf-class="{{ className }}" t-ref="root">
|
||||
<div class="o_CallActionList_buttons d-flex align-items-center flex-wrap">
|
||||
<t t-if="callActionListView.callViewer.threadView.thread.rtc and messaging.rtc.currentRtcSession">
|
||||
<button class="o_CallActionList_button btn d-flex m-1 border-0 rounded-circle bg-800 shadow-none"
|
||||
t-att-class="{ 'o-isActive': !messaging.rtc.currentRtcSession.isMute, 'o-isSmall p-2': callActionListView.isSmall, 'p-3': !callActionListView.isSmall }"
|
||||
t-att-aria-label="callActionListView.microphoneButtonTitle"
|
||||
t-att-title="callActionListView.microphoneButtonTitle"
|
||||
t-on-click="callActionListView.onClickMicrophone">
|
||||
<div class="o_CallActionList_buttonIconWrapper fa-stack" t-att-class="{ 'o-isSmall': callActionListView.isSmall }">
|
||||
<i class="fa fa-stack-1x" t-att-class="{
|
||||
'fa-lg': !rtcController.isSmall,
|
||||
'fa-lg': !callActionListView.isSmall,
|
||||
'fa-microphone': !messaging.rtc.currentRtcSession.isMute,
|
||||
'fa-microphone-slash': messaging.rtc.currentRtcSession.isMute,
|
||||
'text-danger': messaging.rtc.currentRtcSession.isMute,
|
||||
}"/>
|
||||
</div>
|
||||
</button>
|
||||
<button class="o_RtcController_button btn d-flex m-1 border-0 rounded-circle bg-800 shadow-none"
|
||||
t-att-class="{ 'o-isActive': !messaging.rtc.currentRtcSession.isDeaf, 'o-isSmall p-2': rtcController.isSmall, 'p-3': !rtcController.isSmall }"
|
||||
t-att-aria-label="rtcController.headphoneButtonTitle"
|
||||
t-att-title="rtcController.headphoneButtonTitle"
|
||||
t-on-click="rtcController.onClickDeafen">
|
||||
<div class="o_RtcController_buttonIconWrapper fa-stack" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
|
||||
<button class="o_CallActionList_button btn d-flex m-1 border-0 rounded-circle bg-800 shadow-none"
|
||||
t-att-class="{ 'o-isActive': !messaging.rtc.currentRtcSession.isDeaf, 'o-isSmall p-2': callActionListView.isSmall, 'p-3': !callActionListView.isSmall }"
|
||||
t-att-aria-label="callActionListView.headphoneButtonTitle"
|
||||
t-att-title="callActionListView.headphoneButtonTitle"
|
||||
t-on-click="callActionListView.onClickDeafen">
|
||||
<div class="o_CallActionList_buttonIconWrapper fa-stack" t-att-class="{ 'o-isSmall': callActionListView.isSmall }">
|
||||
<i class="fa fa-stack-1x" t-att-class="{
|
||||
'fa-lg': !rtcController.isSmall,
|
||||
'fa-lg': !callActionListView.isSmall,
|
||||
'fa-headphones': !messaging.rtc.currentRtcSession.isDeaf,
|
||||
'fa-deaf': messaging.rtc.currentRtcSession.isDeaf,
|
||||
'text-danger': messaging.rtc.currentRtcSession.isDeaf,
|
||||
}"/>
|
||||
</div>
|
||||
</button>
|
||||
<button class="o_RtcController_button o_RtcController_videoButton btn d-flex m-1 border-0 rounded-circle bg-800 shadow-none"
|
||||
<button class="o_CallActionList_button o_CallActionList_videoButton btn d-flex m-1 border-0 rounded-circle bg-800 shadow-none"
|
||||
t-att-class="{
|
||||
'o-isActive': messaging.rtc.sendUserVideo,
|
||||
'o-isSmall p-2': rtcController.isSmall,
|
||||
'p-3': !rtcController.isSmall,
|
||||
'o-isSmall p-2': callActionListView.isSmall,
|
||||
'p-3': !callActionListView.isSmall,
|
||||
}"
|
||||
t-att-aria-label="rtcController.cameraButtonTitle"
|
||||
t-att-title="rtcController.cameraButtonTitle"
|
||||
t-on-click="rtcController.onClickCamera">
|
||||
<div class="o_RtcController_buttonIconWrapper fa-stack" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
|
||||
<i class="fa fa-video-camera fa-stack-1x" t-att-class="{ 'fa-lg': !rtcController.isSmall, 'text-success': messaging.rtc.sendUserVideo }"/>
|
||||
t-att-aria-label="callActionListView.cameraButtonTitle"
|
||||
t-att-title="callActionListView.cameraButtonTitle"
|
||||
t-on-click="callActionListView.onClickCamera">
|
||||
<div class="o_CallActionList_buttonIconWrapper fa-stack" t-att-class="{ 'o-isSmall': callActionListView.isSmall }">
|
||||
<i class="fa fa-video-camera fa-stack-1x" t-att-class="{ 'fa-lg': !callActionListView.isSmall, 'text-success': messaging.rtc.sendUserVideo }"/>
|
||||
</div>
|
||||
</button>
|
||||
<button class="o_RtcController_button o_RtcController_videoButton btn d-flex m-1 border-0 rounded-circle bg-800 shadow-none"
|
||||
<button class="o_CallActionList_button o_CallActionList_videoButton btn d-flex m-1 border-0 rounded-circle bg-800 shadow-none"
|
||||
t-att-class="{
|
||||
'o-isActive': messaging.rtc.sendDisplay,
|
||||
'o-isSmall p-2': rtcController.isSmall,
|
||||
'p-3': !rtcController.isSmall,
|
||||
'o-isSmall p-2': callActionListView.isSmall,
|
||||
'p-3': !callActionListView.isSmall,
|
||||
}"
|
||||
t-att-aria-label="rtcController.screenSharingButtonTitle"
|
||||
t-att-title="rtcController.screenSharingButtonTitle"
|
||||
t-on-click="rtcController.onClickScreen">
|
||||
<div class="o_RtcController_buttonIconWrapper fa-stack" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
|
||||
<i class="fa fa-desktop fa-stack-1x" t-att-class="{ 'fa-lg': !rtcController.isSmall, 'text-success': messaging.rtc.sendDisplay }"/>
|
||||
t-att-aria-label="callActionListView.screenSharingButtonTitle"
|
||||
t-att-title="callActionListView.screenSharingButtonTitle"
|
||||
t-on-click="callActionListView.onClickScreen">
|
||||
<div class="o_CallActionList_buttonIconWrapper fa-stack" t-att-class="{ 'o-isSmall': callActionListView.isSmall }">
|
||||
<i class="fa fa-desktop fa-stack-1x" t-att-class="{ 'fa-lg': !callActionListView.isSmall, 'text-success': messaging.rtc.sendDisplay }"/>
|
||||
</div>
|
||||
</button>
|
||||
<Popover position="'top'" popoverClass="'o_RtcController_popover'">
|
||||
<button class="o_RtcController_button btn d-flex m-1 border-0 rounded-circle bg-800 shadow-none"
|
||||
<Popover position="'top'" popoverClass="'o_CallActionList_popover'">
|
||||
<button class="o_CallActionList_button btn d-flex m-1 border-0 rounded-circle bg-800 shadow-none"
|
||||
aria-label="More"
|
||||
title="More"
|
||||
t-att-class="{ 'o-isSmall p-2': rtcController.isSmall, 'p-3': !rtcController.isSmall }"
|
||||
t-att-class="{ 'o-isSmall p-2': callActionListView.isSmall, 'p-3': !callActionListView.isSmall }"
|
||||
>
|
||||
<div class="o_RtcController_buttonIconWrapper fa-stack" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
|
||||
<i class="fa fa-ellipsis-h fa-stack-1x" t-att-class="{ 'fa-lg': !rtcController.isSmall }"/>
|
||||
<div class="o_CallActionList_buttonIconWrapper fa-stack" t-att-class="{ 'o-isSmall': callActionListView.isSmall }">
|
||||
<i class="fa fa-ellipsis-h fa-stack-1x" t-att-class="{ 'fa-lg': !callActionListView.isSmall }"/>
|
||||
</div>
|
||||
</button>
|
||||
<t t-set-slot="opened">
|
||||
<RtcOptionList record="rtcController.rtcOptionList"/>
|
||||
<CallOptionMenu record="callActionListView.callOptionMenu"/>
|
||||
</t>
|
||||
</Popover>
|
||||
</t>
|
||||
<t t-if="!rtcController.callViewer.threadView.thread.rtc">
|
||||
<button class="o_RtcController_button o_RtcController_callToggle btn btn-success d-flex m-1 border-0 rounded-circle shadow-none"
|
||||
t-att-class="{ 'o-isSmall p-2': rtcController.isSmall, 'p-3': !rtcController.isSmall }"
|
||||
<t t-if="!callActionListView.callViewer.threadView.thread.rtc">
|
||||
<button class="o_CallActionList_button o_CallActionList_callToggle btn btn-success d-flex m-1 border-0 rounded-circle shadow-none"
|
||||
t-att-class="{ 'o-isSmall p-2': callActionListView.isSmall, 'p-3': !callActionListView.isSmall }"
|
||||
aria-label="Join Video Call"
|
||||
title="Join Video Call"
|
||||
t-att-disabled="rtcController.callViewer.threadView.thread.hasPendingRtcRequest"
|
||||
t-on-click="rtcController.onClickToggleVideoCall">
|
||||
<div class="o_RtcController_buttonIconWrapper fa-stack" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
|
||||
<i class="fa fa-video-camera fa-stack-1x" t-att-class="{ 'fa-lg': !rtcController.isSmall }"/>
|
||||
t-att-disabled="callActionListView.callViewer.threadView.thread.hasPendingRtcRequest"
|
||||
t-on-click="callActionListView.onClickToggleVideoCall">
|
||||
<div class="o_CallActionList_buttonIconWrapper fa-stack" t-att-class="{ 'o-isSmall': callActionListView.isSmall }">
|
||||
<i class="fa fa-video-camera fa-stack-1x" t-att-class="{ 'fa-lg': !callActionListView.isSmall }"/>
|
||||
</div>
|
||||
</button>
|
||||
</t>
|
||||
<t t-if="rtcController.callViewer.threadView.thread">
|
||||
<t t-if="rtcController.callViewer.threadView.thread.rtcInvitingSession and !rtcController.callViewer.threadView.thread.rtc">
|
||||
<button class="o_RtcController_button o_RtcController_callToggle o-isActive btn btn-danger d-flex m-1 border-0 rounded-circle shadow-none"
|
||||
t-att-class="{ 'o-isSmall p-2': rtcController.isSmall, 'p-3': !rtcController.isSmall }"
|
||||
<t t-if="callActionListView.callViewer.threadView.thread">
|
||||
<t t-if="callActionListView.callViewer.threadView.thread.rtcInvitingSession and !callActionListView.callViewer.threadView.thread.rtc">
|
||||
<button class="o_CallActionList_button o_CallActionList_callToggle o-isActive btn btn-danger d-flex m-1 border-0 rounded-circle shadow-none"
|
||||
t-att-class="{ 'o-isSmall p-2': callActionListView.isSmall, 'p-3': !callActionListView.isSmall }"
|
||||
aria-label="Reject"
|
||||
title="Reject"
|
||||
t-att-disabled="rtcController.callViewer.threadView.thread.hasPendingRtcRequest"
|
||||
t-on-click="rtcController.onClickRejectCall">
|
||||
<div class="o_RtcController_buttonIconWrapper fa-stack" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
|
||||
<i class="fa fa-phone fa-stack-1x" t-att-class="{ 'fa-lg': !rtcController.isSmall }"/>
|
||||
t-att-disabled="callActionListView.callViewer.threadView.thread.hasPendingRtcRequest"
|
||||
t-on-click="callActionListView.onClickRejectCall">
|
||||
<div class="o_CallActionList_buttonIconWrapper fa-stack" t-att-class="{ 'o-isSmall': callActionListView.isSmall }">
|
||||
<i class="fa fa-phone fa-stack-1x" t-att-class="{ 'fa-lg': !callActionListView.isSmall }"/>
|
||||
</div>
|
||||
</button>
|
||||
</t>
|
||||
<button class="o_RtcController_button o_RtcController_callToggle btn d-flex m-1 border-0 rounded-circle shadow-none"
|
||||
t-att-aria-label="rtcController.callButtonTitle"
|
||||
t-att-class="{ 'o-isActive btn-danger': !!rtcController.callViewer.threadView.thread.rtc, 'o-isSmall p-2': rtcController.isSmall, 'p-3': !rtcController.isSmall, 'btn-success': !rtcController.callViewer.threadView.thread.rtc }"
|
||||
t-att-disabled="rtcController.callViewer.threadView.thread.hasPendingRtcRequest"
|
||||
t-att-title="rtcController.callButtonTitle"
|
||||
t-on-click="rtcController.onClickToggleAudioCall">
|
||||
<div class="o_RtcController_buttonIconWrapper fa-stack" t-att-class="{ 'o-isSmall': rtcController.isSmall }">
|
||||
<i class="fa fa-phone fa-stack-1x" t-att-class="{ 'fa-lg': !rtcController.isSmall }"/>
|
||||
<button class="o_CallActionList_button o_CallActionList_callToggle btn d-flex m-1 border-0 rounded-circle shadow-none"
|
||||
t-att-aria-label="callActionListView.callButtonTitle"
|
||||
t-att-class="{ 'o-isActive btn-danger': !!callActionListView.callViewer.threadView.thread.rtc, 'o-isSmall p-2': callActionListView.isSmall, 'p-3': !callActionListView.isSmall, 'btn-success': !callActionListView.callViewer.threadView.thread.rtc }"
|
||||
t-att-disabled="callActionListView.callViewer.threadView.thread.hasPendingRtcRequest"
|
||||
t-att-title="callActionListView.callButtonTitle"
|
||||
t-on-click="callActionListView.onClickToggleAudioCall">
|
||||
<div class="o_CallActionList_buttonIconWrapper fa-stack" t-att-class="{ 'o-isSmall': callActionListView.isSmall }">
|
||||
<i class="fa fa-phone fa-stack-1x" t-att-class="{ 'fa-lg': !callActionListView.isSmall }"/>
|
||||
</div>
|
||||
</button>
|
||||
</t>
|
||||
|
||||
@@ -4,24 +4,24 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component';
|
||||
|
||||
const { Component } = owl;
|
||||
|
||||
export class RtcInvitationCard extends Component {
|
||||
export class CallInviteRequestPopup extends Component {
|
||||
|
||||
//--------------------------------------------------------------------------
|
||||
// Getters / Setters
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @returns {RtcInvitationCard|undefined}
|
||||
* @returns {CallInviteRequestPopup}
|
||||
*/
|
||||
get rtcInvitationCard() {
|
||||
get callInviteRequestPopup() {
|
||||
return this.props.record;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Object.assign(RtcInvitationCard, {
|
||||
Object.assign(CallInviteRequestPopup, {
|
||||
props: { record: Object },
|
||||
template: 'mail.RtcInvitationCard',
|
||||
template: 'mail.CallInviteRequestPopup',
|
||||
});
|
||||
|
||||
registerMessagingComponent(RtcInvitationCard);
|
||||
registerMessagingComponent(CallInviteRequestPopup);
|
||||
|
||||
@@ -2,11 +2,11 @@
|
||||
// Layout
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
.o_RtcInvitationCard_partnerInfo {
|
||||
.o_CallInviteRequestPopup_partnerInfo {
|
||||
width: 130px;
|
||||
}
|
||||
|
||||
.o_RtcInvitationCard_partnerInfoImage {
|
||||
.o_CallInviteRequestPopup_partnerInfoImage {
|
||||
width: 70%;
|
||||
height: 70%;
|
||||
}
|
||||
@@ -15,10 +15,10 @@
|
||||
// Style
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
.o_RtcInvitationCard_buttonListButton {
|
||||
.o_CallInviteRequestPopup_buttonListButton {
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.o_RtcInvitationCard_partnerInfoImage {
|
||||
.o_CallInviteRequestPopup_partnerInfoImage {
|
||||
border: 3px solid gray;
|
||||
}
|
||||
|
||||
@@ -1,31 +1,31 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t t-name="mail.RtcInvitationCard" owl="1">
|
||||
<t t-if="rtcInvitationCard">
|
||||
<div class="o_RtcInvitationCard d-flex flex-column m-2 p-5 border border-dark rounded-sm bg-900" t-attf-class="{{ className }}" t-ref="root">
|
||||
<t t-if="rtcInvitationCard.thread.rtcInvitingSession">
|
||||
<div class="o_RtcInvitationCard_partnerInfo d-flex flex-column justify-content-around align-items-center text-nowrap">
|
||||
<img class="o_RtcInvitationCard_partnerInfoImage mb-2 rounded-circle o_cursor_pointer"
|
||||
t-att-src="rtcInvitationCard.thread.rtcInvitingSession.avatarUrl"
|
||||
t-on-click="rtcInvitationCard.onClickAvatar"
|
||||
<t t-name="mail.CallInviteRequestPopup" owl="1">
|
||||
<t t-if="callInviteRequestPopup">
|
||||
<div class="o_CallInviteRequestPopup d-flex flex-column m-2 p-5 border border-dark rounded-sm bg-900" t-attf-class="{{ className }}" t-ref="root">
|
||||
<t t-if="callInviteRequestPopup.thread.rtcInvitingSession">
|
||||
<div class="o_CallInviteRequestPopup_partnerInfo d-flex flex-column justify-content-around align-items-center text-nowrap">
|
||||
<img class="o_CallInviteRequestPopup_partnerInfoImage mb-2 rounded-circle o_cursor_pointer"
|
||||
t-att-src="callInviteRequestPopup.thread.rtcInvitingSession.avatarUrl"
|
||||
t-on-click="callInviteRequestPopup.onClickAvatar"
|
||||
alt="Avatar"/>
|
||||
<span class="o_RtcInvitationCard_partnerInfoName w-100 font-weight-bolder text-truncate text-center overflow-hidden" t-esc="rtcInvitationCard.thread.rtcInvitingSession.name"/>
|
||||
<span class="o_RtcInvitationCard_partnerInfoText font-italic opacity-75">Incoming Call...</span>
|
||||
<span class="o_CallInviteRequestPopup_partnerInfoName w-100 font-weight-bolder text-truncate text-center overflow-hidden" t-esc="callInviteRequestPopup.thread.rtcInvitingSession.name"/>
|
||||
<span class="o_CallInviteRequestPopup_partnerInfoText font-italic opacity-75">Incoming Call...</span>
|
||||
</div>
|
||||
</t>
|
||||
<div class="o_RtcInvitationCard_buttonList d-flex justify-content-around align-items-center w-100 mt-4">
|
||||
<button class="o_RtcInvitationCard_buttonListButton o_RtcInvitationCard_buttonListRefuse p-2 rounded-circle border-0 bg-danger"
|
||||
<div class="o_CallInviteRequestPopup_buttonList d-flex justify-content-around align-items-center w-100 mt-4">
|
||||
<button class="o_CallInviteRequestPopup_buttonListButton o_CallInviteRequestPopup_buttonListRefuse p-2 rounded-circle border-0 bg-danger"
|
||||
aria-label="Refuse"
|
||||
title="Refuse"
|
||||
t-on-click="rtcInvitationCard.onClickRefuse">
|
||||
<i class="o_RtcInvitationCard_buttonListButtonIcon fa fa-lg fa-times m-3"/>
|
||||
t-on-click="callInviteRequestPopup.onClickRefuse">
|
||||
<i class="o_CallInviteRequestPopup_buttonListButtonIcon fa fa-lg fa-times m-3"/>
|
||||
</button>
|
||||
<button class="o_RtcInvitationCard_buttonListButton o_RtcInvitationCard_buttonListAccept p-2 rounded-circle border-0 bg-success"
|
||||
<button class="o_CallInviteRequestPopup_buttonListButton o_CallInviteRequestPopup_buttonListAccept p-2 rounded-circle border-0 bg-success"
|
||||
aria-label="Accept"
|
||||
title="Accept"
|
||||
t-on-click="rtcInvitationCard.onClickAccept">
|
||||
<i class="o_RtcInvitationCard_buttonListButtonIcon fa fa-lg fa-phone m-3"/>
|
||||
t-on-click="callInviteRequestPopup.onClickAccept">
|
||||
<i class="o_CallInviteRequestPopup_buttonListButtonIcon fa fa-lg fa-phone m-3"/>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -4,11 +4,11 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component';
|
||||
|
||||
const { Component } = owl;
|
||||
|
||||
export class RtcInvitations extends Component {}
|
||||
export class CallInviteRequestPopupList extends Component {}
|
||||
|
||||
Object.assign(RtcInvitations, {
|
||||
Object.assign(CallInviteRequestPopupList, {
|
||||
props: {},
|
||||
template: 'mail.RtcInvitations',
|
||||
template: 'mail.CallInviteRequestPopupList',
|
||||
});
|
||||
|
||||
registerMessagingComponent(RtcInvitations);
|
||||
registerMessagingComponent(CallInviteRequestPopupList);
|
||||
|
||||
@@ -2,6 +2,6 @@
|
||||
// Layout
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
.o_RtcInvitations {
|
||||
.o_CallInviteRequestPopupList {
|
||||
z-index: $zindex-modal;
|
||||
}
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t t-name="mail.RtcInvitations" owl="1">
|
||||
<div class="o_RtcInvitations position-absolute top-0 end-0 d-flex flex-column p-2" t-attf-class="{{ className }}" t-ref="root">
|
||||
<t t-name="mail.CallInviteRequestPopupList" owl="1">
|
||||
<div class="o_CallInviteRequestPopupList position-absolute top-0 end-0 d-flex flex-column p-2" t-attf-class="{{ className }}" t-ref="root">
|
||||
<t t-if="messaging.ringingThreads">
|
||||
<t t-foreach="messaging.rtcInvitationCards" t-as="rtcInvitationCard" t-key="rtcInvitationCard.localId">
|
||||
<RtcInvitationCard record="rtcInvitationCard"/>
|
||||
<t t-foreach="messaging.callInviteRequestPopups" t-as="callInviteRequestPopup" t-key="callInviteRequestPopup.localId">
|
||||
<CallInviteRequestPopup record="callInviteRequestPopup"/>
|
||||
</t>
|
||||
</t>
|
||||
</div>
|
||||
|
||||
@@ -4,7 +4,7 @@ import { useComponentToModel } from '@mail/component_hooks/use_component_to_mode
|
||||
import { registerMessagingComponent } from '@mail/utils/messaging_component';
|
||||
import { LegacyComponent } from "@web/legacy/legacy_component";
|
||||
|
||||
export class RtcOptionList extends LegacyComponent {
|
||||
export class CallOptionMenu extends LegacyComponent {
|
||||
|
||||
/**
|
||||
* @override
|
||||
@@ -15,17 +15,17 @@ export class RtcOptionList extends LegacyComponent {
|
||||
}
|
||||
|
||||
/**
|
||||
* @returns {RtcOptionList}
|
||||
* @returns {CallOptionMenu}
|
||||
*/
|
||||
get rtcOptionList() {
|
||||
get callOptionMenu() {
|
||||
return this.props.record;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Object.assign(RtcOptionList, {
|
||||
Object.assign(CallOptionMenu, {
|
||||
props: { record: Object },
|
||||
template: 'mail.RtcOptionList',
|
||||
template: 'mail.CallOptionMenu',
|
||||
});
|
||||
|
||||
registerMessagingComponent(RtcOptionList);
|
||||
registerMessagingComponent(CallOptionMenu);
|
||||
|
||||
@@ -2,24 +2,24 @@
|
||||
// Layout
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
.o_RtcOptionList {
|
||||
.o_CallOptionMenu {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.o_RtcOptionList_button {
|
||||
.o_CallOptionMenu_button {
|
||||
display: flex;
|
||||
margin: map-get($spacers, 1);
|
||||
align-items: center;
|
||||
color: gray('800');
|
||||
}
|
||||
|
||||
.o_RtcOptionList_buttonIcon {
|
||||
.o_CallOptionMenu_buttonIcon {
|
||||
margin: map-get($spacers, 1);
|
||||
padding: map-get($spacers, 1);
|
||||
}
|
||||
|
||||
.o_RtcOptionList_buttonText {
|
||||
.o_CallOptionMenu_buttonText {
|
||||
@include text-truncate();
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
// Style
|
||||
// ------------------------------------------------------------------
|
||||
|
||||
.o_RtcOptionList_button {
|
||||
.o_CallOptionMenu_button {
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
|
||||
@@ -1,33 +1,33 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t t-name="mail.RtcOptionList" owl="1">
|
||||
<t t-if="rtcOptionList">
|
||||
<div class="o_RtcOptionList" t-attf-class="{{ className }}" t-ref="root">
|
||||
<button class="o_RtcOptionList_button" t-on-click="rtcOptionList.onClickLayout">
|
||||
<i class="o_RtcOptionList_buttonIcon fa fa-lg fa-th-large"/>
|
||||
<span class="o_RtcOptionList_buttonText">Change layout</span>
|
||||
<t t-name="mail.CallOptionMenu" owl="1">
|
||||
<t t-if="callOptionMenu">
|
||||
<div class="o_CallOptionMenu" t-attf-class="{{ className }}" t-ref="root">
|
||||
<button class="o_CallOptionMenu_button" t-on-click="callOptionMenu.onClickLayout">
|
||||
<i class="o_CallOptionMenu_buttonIcon fa fa-lg fa-th-large"/>
|
||||
<span class="o_CallOptionMenu_buttonText">Change layout</span>
|
||||
</button>
|
||||
<t t-if="rtcOptionList.rtcController.callViewer.isFullScreen">
|
||||
<button class="o_RtcOptionList_button" t-on-click="rtcOptionList.onClickDeactivateFullScreen">
|
||||
<i class="o_RtcOptionList_buttonIcon fa fa-lg fa-compress"/>
|
||||
<span class="o_RtcOptionList_buttonText">Exit full screen</span>
|
||||
<t t-if="callOptionMenu.callActionListView.callViewer.isFullScreen">
|
||||
<button class="o_CallOptionMenu_button" t-on-click="callOptionMenu.onClickDeactivateFullScreen">
|
||||
<i class="o_CallOptionMenu_buttonIcon fa fa-lg fa-compress"/>
|
||||
<span class="o_CallOptionMenu_buttonText">Exit full screen</span>
|
||||
</button>
|
||||
</t>
|
||||
<t t-else="">
|
||||
<button class="o_RtcOptionList_button" t-on-click="rtcOptionList.onClickActivateFullScreen">
|
||||
<i class="o_RtcOptionList_buttonIcon fa fa-lg fa-arrows-alt"/>
|
||||
<span class="o_RtcOptionList_buttonText">Full screen</span>
|
||||
<button class="o_CallOptionMenu_button" t-on-click="callOptionMenu.onClickActivateFullScreen">
|
||||
<i class="o_CallOptionMenu_buttonIcon fa fa-lg fa-arrows-alt"/>
|
||||
<span class="o_CallOptionMenu_buttonText">Full screen</span>
|
||||
</button>
|
||||
</t>
|
||||
<button class="o_RtcOptionList_button" t-on-click="rtcOptionList.onClickOptions">
|
||||
<i class="o_RtcOptionList_buttonIcon fa fa-lg fa-cog"/>
|
||||
<span class="o_RtcOptionList_buttonText">Settings</span>
|
||||
<button class="o_CallOptionMenu_button" t-on-click="callOptionMenu.onClickOptions">
|
||||
<i class="o_CallOptionMenu_buttonIcon fa fa-lg fa-cog"/>
|
||||
<span class="o_CallOptionMenu_buttonText">Settings</span>
|
||||
</button>
|
||||
<t t-if="messaging.modelManager.isDebug">
|
||||
<button class="o_RtcOptionList_button" t-on-click="rtcOptionList.onClickDownloadLogs">
|
||||
<i class="o_RtcOptionList_buttonIcon fa fa-lg fa-file-text-o"/>
|
||||
<span class="o_RtcOptionList_buttonText">Download logs</span>
|
||||
<button class="o_CallOptionMenu_button" t-on-click="callOptionMenu.onClickDownloadLogs">
|
||||
<i class="o_CallOptionMenu_buttonIcon fa fa-lg fa-file-text-o"/>
|
||||
<span class="o_CallOptionMenu_buttonText">Download logs</span>
|
||||
</button>
|
||||
</t>
|
||||
</div>
|
||||
|
||||
@@ -5,7 +5,7 @@ import { registerMessagingComponent } from '@mail/utils/messaging_component';
|
||||
|
||||
const { Component } = owl;
|
||||
|
||||
export class RtcVideo extends Component {
|
||||
export class CallParticipantVideo extends Component {
|
||||
|
||||
/**
|
||||
* @override
|
||||
@@ -20,9 +20,9 @@ export class RtcVideo extends Component {
|
||||
//--------------------------------------------------------------------------
|
||||
|
||||
/**
|
||||
* @returns {RtcVideoView}
|
||||
* @returns {CallParticipantVideoView}
|
||||
*/
|
||||
get rtcVideoView() {
|
||||
get callParticipantVideoView() {
|
||||
return this.props.record;
|
||||
}
|
||||
|
||||
@@ -44,19 +44,19 @@ export class RtcVideo extends Component {
|
||||
if (!this.root.el) {
|
||||
return;
|
||||
}
|
||||
if (!this.rtcVideoView.rtcSession || !this.rtcVideoView.rtcSession.videoStream) {
|
||||
if (!this.callParticipantVideoView.rtcSession || !this.callParticipantVideoView.rtcSession.videoStream) {
|
||||
this.root.el.srcObject = undefined;
|
||||
} else {
|
||||
this.root.el.srcObject = this.rtcVideoView.rtcSession.videoStream;
|
||||
this.root.el.srcObject = this.callParticipantVideoView.rtcSession.videoStream;
|
||||
}
|
||||
this.root.el.load();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
Object.assign(RtcVideo, {
|
||||
Object.assign(CallParticipantVideo, {
|
||||
props: { record: Object },
|
||||
template: 'mail.RtcVideo',
|
||||
template: 'mail.CallParticipantVideo',
|
||||
});
|
||||
|
||||
registerMessagingComponent(RtcVideo);
|
||||
registerMessagingComponent(CallParticipantVideo);
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<templates xml:space="preserve">
|
||||
|
||||
<t t-name="mail.RtcVideo" owl="1">
|
||||
<t t-if="rtcVideoView">
|
||||
<video class="o_RtcVideo w-100 h-100 rounded-sm bg-black o_cursor_pointer"
|
||||
<t t-name="mail.CallParticipantVideo" owl="1">
|
||||
<t t-if="callParticipantVideoView">
|
||||
<video class="o_CallParticipantVideo w-100 h-100 rounded-sm bg-black o_cursor_pointer"
|
||||
t-attf-class="{{ className }}"
|
||||
playsinline="true"
|
||||
autoplay="true"
|
||||
muted="true"
|
||||
t-on-loadedmetadata="rtcVideoView.rtcSession.onVideoLoadedMetaData"
|
||||
t-on-loadedmetadata="callParticipantVideoView.rtcSession.onVideoLoadedMetaData"
|
||||
t-ref="root"
|
||||
/>
|
||||
</t>
|
||||
|
||||
@@ -268,11 +268,11 @@ registerModel({
|
||||
* @private
|
||||
* @returns {FieldCommand}
|
||||
*/
|
||||
_computeRtcInvitationCards() {
|
||||
_computeCallInviteRequestPopups() {
|
||||
if (this.ringingThreads.length === 0) {
|
||||
return clear();
|
||||
}
|
||||
return replace(this.ringingThreads.map(thread => thread.rtcInvitationCard));
|
||||
return replace(this.ringingThreads.map(thread => thread.callInviteRequestPopup));
|
||||
},
|
||||
/**
|
||||
* @private
|
||||
@@ -447,8 +447,8 @@ registerModel({
|
||||
isCausal: true,
|
||||
readonly: true,
|
||||
}),
|
||||
rtcInvitationCards: many('RtcInvitationCard', {
|
||||
compute: '_computeRtcInvitationCards',
|
||||
callInviteRequestPopups: many('CallInviteRequestPopup', {
|
||||
compute: '_computeCallInviteRequestPopups',
|
||||
isCausal: true,
|
||||
}),
|
||||
soundEffects: one('SoundEffects', {
|
||||
|
||||
@@ -163,7 +163,7 @@ registerModel({
|
||||
* @private
|
||||
* @returns {FieldCommand}
|
||||
*/
|
||||
_computeRtcVideoView() {
|
||||
_computeCallParticipantVideoView() {
|
||||
if (this.rtcSession && this.rtcSession.videoStream) {
|
||||
return insertAndReplace();
|
||||
}
|
||||
@@ -260,8 +260,8 @@ registerModel({
|
||||
* If set, this card represents a rtcSession.
|
||||
*/
|
||||
rtcSession: one('RtcSession'),
|
||||
rtcVideoView: one('RtcVideoView', {
|
||||
compute: '_computeRtcVideoView',
|
||||
callParticipantVideoView: one('CallParticipantVideoView', {
|
||||
compute: '_computeCallParticipantVideoView',
|
||||
inverse: 'rtcCallParticipantCardOwner',
|
||||
isCausal: true,
|
||||
}),
|
||||
|
||||
@@ -38,7 +38,7 @@ registerModel({
|
||||
* @param {MouseEvent} ev
|
||||
*/
|
||||
onMouseleave(ev) {
|
||||
if (ev.relatedTarget && ev.relatedTarget.closest('.o_RtcController_popover')) {
|
||||
if (ev.relatedTarget && ev.relatedTarget.closest('.o_CallActionList_popover')) {
|
||||
// the overlay should not be hidden when the cursor leaves to enter the controller popover
|
||||
return;
|
||||
}
|
||||
@@ -364,7 +364,7 @@ registerModel({
|
||||
/**
|
||||
* The model for the controller (buttons).
|
||||
*/
|
||||
rtcController: one('RtcController', {
|
||||
callActionListView: one('CallActionListView', {
|
||||
default: insertAndReplace(),
|
||||
readonly: true,
|
||||
inverse: 'callViewer',
|
||||
|
||||
@@ -5,7 +5,7 @@ import { attr, one } from '@mail/model/model_field';
|
||||
import { clear, insertAndReplace } from '@mail/model/model_field_command';
|
||||
|
||||
registerModel({
|
||||
name: 'RtcController',
|
||||
name: 'CallActionListView',
|
||||
identifyingFields: ['callViewer'],
|
||||
recordMethods: {
|
||||
/**
|
||||
@@ -150,7 +150,7 @@ registerModel({
|
||||
default: '',
|
||||
}),
|
||||
callViewer: one('RtcCallViewer', {
|
||||
inverse: 'rtcController',
|
||||
inverse: 'callActionListView',
|
||||
readonly: true,
|
||||
required: true,
|
||||
}),
|
||||
@@ -168,9 +168,9 @@ registerModel({
|
||||
microphoneButtonTitle: attr({
|
||||
compute: '_computeMicrophoneButtonTitle',
|
||||
}),
|
||||
rtcOptionList: one('RtcOptionList', {
|
||||
callOptionMenu: one('CallOptionMenu', {
|
||||
default: insertAndReplace(),
|
||||
inverse: 'rtcController',
|
||||
inverse: 'callActionListView',
|
||||
isCausal: true,
|
||||
}),
|
||||
screenSharingButtonTitle: attr({
|
||||
|
||||
@@ -4,7 +4,7 @@ import { registerModel } from '@mail/model/model_core';
|
||||
import { one } from '@mail/model/model_field';
|
||||
|
||||
registerModel({
|
||||
name: 'RtcInvitationCard',
|
||||
name: 'CallInviteRequestPopup',
|
||||
identifyingFields: ['thread'],
|
||||
recordMethods: {
|
||||
/**
|
||||
@@ -35,7 +35,7 @@ registerModel({
|
||||
},
|
||||
fields: {
|
||||
thread: one('Thread', {
|
||||
inverse: 'rtcInvitationCard',
|
||||
inverse: 'callInviteRequestPopup',
|
||||
readonly: true,
|
||||
required: true,
|
||||
}),
|
||||
|
||||
@@ -4,8 +4,8 @@ import { registerModel } from '@mail/model/model_core';
|
||||
import { attr, one } from '@mail/model/model_field';
|
||||
|
||||
registerModel({
|
||||
name: 'RtcOptionList',
|
||||
identifyingFields: ['rtcController'],
|
||||
name: 'CallOptionMenu',
|
||||
identifyingFields: ['callActionListView'],
|
||||
recordMethods: {
|
||||
/**
|
||||
* Creates and download a file that contains the logs of the current RTC call.
|
||||
@@ -13,7 +13,7 @@ registerModel({
|
||||
* @param {MouseEvent} ev
|
||||
*/
|
||||
async onClickDownloadLogs(ev) {
|
||||
const channel = this.rtcController.callViewer.threadView.thread;
|
||||
const channel = this.callActionListView.callViewer.threadView.thread;
|
||||
if (!channel.rtc) {
|
||||
return;
|
||||
}
|
||||
@@ -31,21 +31,21 @@ registerModel({
|
||||
* @param {MouseEvent} ev
|
||||
*/
|
||||
onClickActivateFullScreen(ev) {
|
||||
this.rtcController.callViewer.activateFullScreen();
|
||||
this.callActionListView.callViewer.activateFullScreen();
|
||||
this.component.trigger('o-popover-close');
|
||||
},
|
||||
/**
|
||||
* @param {MouseEvent} ev
|
||||
*/
|
||||
onClickDeactivateFullScreen(ev) {
|
||||
this.rtcController.callViewer.deactivateFullScreen();
|
||||
this.callActionListView.callViewer.deactivateFullScreen();
|
||||
this.component.trigger('o-popover-close');
|
||||
},
|
||||
/**
|
||||
* @param {MouseEvent} ev
|
||||
*/
|
||||
onClickLayout(ev) {
|
||||
this.rtcController.callViewer.toggleLayoutMenu();
|
||||
this.callActionListView.callViewer.toggleLayoutMenu();
|
||||
this.component.trigger('o-popover-close');
|
||||
},
|
||||
/**
|
||||
@@ -61,8 +61,8 @@ registerModel({
|
||||
* States the OWL component of this option list.
|
||||
*/
|
||||
component: attr(),
|
||||
rtcController: one('RtcController', {
|
||||
inverse: 'rtcOptionList',
|
||||
callActionListView: one('CallActionListView', {
|
||||
inverse: 'callOptionMenu',
|
||||
readonly: true,
|
||||
required: true,
|
||||
}),
|
||||
|
||||
@@ -5,7 +5,7 @@ import { one } from '@mail/model/model_field';
|
||||
import { clear, replace } from '@mail/model/model_field_command';
|
||||
|
||||
registerModel({
|
||||
name: 'RtcVideoView',
|
||||
name: 'CallParticipantVideoView',
|
||||
identifyingFields: ['rtcCallParticipantCardOwner'],
|
||||
recordMethods: {
|
||||
/**
|
||||
@@ -21,7 +21,7 @@ registerModel({
|
||||
},
|
||||
fields: {
|
||||
rtcCallParticipantCardOwner: one('RtcCallParticipantCard', {
|
||||
inverse: 'rtcVideoView',
|
||||
inverse: 'callParticipantVideoView',
|
||||
readonly: true,
|
||||
required: true,
|
||||
}),
|
||||
|
||||
@@ -1531,7 +1531,7 @@ registerModel({
|
||||
* @private
|
||||
* @returns {FieldCommand}
|
||||
*/
|
||||
_computeRtcInvitationCard() {
|
||||
_computeCallInviteRequestPopup() {
|
||||
if (this.rtcInvitingSession) {
|
||||
return insertAndReplace();
|
||||
}
|
||||
@@ -2308,8 +2308,8 @@ registerModel({
|
||||
rtc: one('Rtc', {
|
||||
inverse: 'channel',
|
||||
}),
|
||||
rtcInvitationCard: one('RtcInvitationCard', {
|
||||
compute: '_computeRtcInvitationCard',
|
||||
callInviteRequestPopup: one('CallInviteRequestPopup', {
|
||||
compute: '_computeCallInviteRequestPopup',
|
||||
inverse: 'thread',
|
||||
isCausal: true,
|
||||
}),
|
||||
|
||||
Reference in New Issue
Block a user