From 663db10fe94142b3356f9c4378230bbe100b0f09 Mon Sep 17 00:00:00 2001
From: Thanh Dodeur <tso@odoo.com>
Date: Thu, 12 May 2022 12:48:55 +0000
Subject: [PATCH] [IMP] mail: change the rtc layout system
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This commit removes the layout menu, the layout is now automatically
adjusted based on the focused tile and uses a collapsable sidebar.

Layout variables are now located on the callView model instead of
messaging, which means that the presence of video tiles may depend on
multiple views with each their own layouts. It is therefore no longer
possible to rely on the previously global layout state to know if a
stream is viewed and should be downloaded.

closes odoo/odoo#82692

Signed-off-by: Alexandre Kühn (aku) <aku@odoo.com>
---
 .../call_layout_menu/call_layout_menu.js      |  31 -----
 .../call_layout_menu/call_layout_menu.xml     | 128 ------------------
 .../call_option_menu/call_option_menu.scss    |   4 +
 .../call_option_menu/call_option_menu.xml     |  13 +-
 .../call_participant_card.scss                |   2 +-
 .../call_participant_card.xml                 |   1 -
 .../src/components/call_view/call_view.scss   |  22 +++
 .../src/components/call_view/call_view.xml    |  28 ++--
 .../static/src/models/call_layout_menu.js     |  50 -------
 .../static/src/models/call_option_menu.js     |  12 ++
 .../src/models/call_participant_card.js       |  50 +++++--
 addons/mail/static/src/models/call_view.js    | 110 ++++++---------
 addons/mail/static/src/models/messaging.js    |  29 ----
 addons/mail/static/src/models/rtc.js          |  21 ---
 .../static/src/models/rtc_peer_connection.js  |  37 +++++
 addons/mail/static/src/models/rtc_session.js  |  16 ++-
 addons/mail/static/src/models/user_setting.js |   7 -
 17 files changed, 186 insertions(+), 375 deletions(-)
 delete mode 100644 addons/mail/static/src/components/call_layout_menu/call_layout_menu.js
 delete mode 100644 addons/mail/static/src/components/call_layout_menu/call_layout_menu.xml
 delete mode 100644 addons/mail/static/src/models/call_layout_menu.js

diff --git a/addons/mail/static/src/components/call_layout_menu/call_layout_menu.js b/addons/mail/static/src/components/call_layout_menu/call_layout_menu.js
deleted file mode 100644
index 6a2e841eb80..00000000000
--- a/addons/mail/static/src/components/call_layout_menu/call_layout_menu.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/** @odoo-module **/
-
-import { useComponentToModel } from '@mail/component_hooks/use_component_to_model';
-import { registerMessagingComponent } from '@mail/utils/messaging_component';
-import { LegacyComponent } from "@web/legacy/legacy_component";
-
-export class CallLayoutMenu extends LegacyComponent {
-
-    /**
-     * @override
-     */
-    setup() {
-        super.setup();
-        useComponentToModel({ fieldName: 'component' });
-    }
-
-    /**
-     * @returns {CallLayoutMenu}
-     */
-    get callLayoutMenu() {
-        return this.props.record;
-    }
-
-}
-
-Object.assign(CallLayoutMenu, {
-    props: { record: Object },
-    template: 'mail.CallLayoutMenu',
-});
-
-registerMessagingComponent(CallLayoutMenu);
diff --git a/addons/mail/static/src/components/call_layout_menu/call_layout_menu.xml b/addons/mail/static/src/components/call_layout_menu/call_layout_menu.xml
deleted file mode 100644
index da64a060716..00000000000
--- a/addons/mail/static/src/components/call_layout_menu/call_layout_menu.xml
+++ /dev/null
@@ -1,128 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<templates xml:space="preserve">
-
-    <t t-name="mail.CallLayoutMenu" owl="1">
-        <t t-if="callLayoutMenu">
-            <div class="o_CallLayoutMenu d-flex flex-column p-1" t-attf-class="{{ className }}" t-ref="root">
-                <t t-if="callLayoutMenu.callView.threadView.thread.videoCount > 0">
-                    <div class="btn btn-light p-0 rounded font-weight-normal">
-                        <label class="o_CallLayoutMenu_radio d-flex align-items-center justify-content-between m-0 rounded fs-4 o_cursor_pointer">
-                            <div class="o_CallLayoutMenu_radioInputContainer">
-                                <input class="o_CallLayoutMenu_radioInput m-3" type="radio" name="filter" value="all" t-on-click="callLayoutMenu.onClickFilter" t-att-checked="!callLayoutMenu.callView.filterVideoGrid"/>
-                                <span class="o_CallLayoutMenu_inputText text-truncate">Show All</span>
-                            </div>
-                        </label>
-                    </div>
-                    <div class="btn btn-light p-0 rounded font-weight-normal">
-                        <label class="o_CallLayoutMenu_radio d-flex align-items-center justify-content-between m-0 rounded fs-4 o_cursor_pointer">
-                            <div class="o_CallLayoutMenu_radioInputContainer">
-                                <input class="o_CallLayoutMenu_radioInput m-3" type="radio" name="filter" value="video" t-on-click="callLayoutMenu.onClickFilter" t-att-checked="callLayoutMenu.callView.filterVideoGrid"/>
-                                <span class="o_CallLayoutMenu_inputText text-truncate">Show only video</span>
-                            </div>
-                        </label>
-                    </div>
-                    <hr class="o_CallLayoutMenu_separator w-100 bg-300"/>
-                </t>
-                <div class="btn btn-light p-0 rounded font-weight-normal">
-                    <label class="o_CallLayoutMenu_radio d-flex align-items-center justify-content-between m-0 rounded fs-4 o_cursor_pointer">
-                        <div class="o_CallLayoutMenu_radioInputContainer">
-                            <input class="o_CallLayoutMenu_radioInput m-3" type="radio" name="layout" value="tiled" t-on-click="callLayoutMenu.onClickLayout" t-att-checked="messaging.userSetting.rtcLayout === 'tiled'"/>
-                            <span class="o_CallLayoutMenu_inputText text-truncate">Tiled</span>
-                        </div>
-                        <span class="o_CallLayoutMenu_radioIcon me-1">
-                            <t t-call="mail.CallLayoutMenu_gridSvg"/>
-                        </span>
-                    </label>
-                </div>
-                <div class="btn btn-light p-0 rounded font-weight-normal">
-                    <label class="o_CallLayoutMenu_radio d-flex align-items-center justify-content-between m-0 rounded fs-4 o_cursor_pointer">
-                        <div class="o_CallLayoutMenu_radioInputContainer">
-                            <input class="o_CallLayoutMenu_radioInput m-3" type="radio" name="layout" value="spotlight" t-on-click="callLayoutMenu.onClickLayout" t-att-checked="messaging.userSetting.rtcLayout === 'spotlight'"/>
-                            <span class="o_CallLayoutMenu_inputText text-truncate">Spotlight</span>
-                        </div>
-                        <span class="o_CallLayoutMenu_radioIcon me-1">
-                            <t t-call="mail.CallLayoutMenu_spotlightSvg"/>
-                        </span>
-                    </label>
-                </div>
-                <div class="btn btn-light p-0 rounded font-weight-normal">
-                    <label class="o_CallLayoutMenu_radio d-flex align-items-center justify-content-between m-0 rounded fs-4 o_cursor_pointer">
-                        <div class="o_CallLayoutMenu_radioInputContainer">
-                            <input class="o_CallLayoutMenu_radioInput m-3" type="radio" name="layout" value="sidebar" t-on-click="callLayoutMenu.onClickLayout" t-att-checked="messaging.userSetting.rtcLayout === 'sidebar'"/>
-                            <span class="o_CallLayoutMenu_inputText text-truncate">Sidebar</span>
-                        </div>
-                        <span class="o_CallLayoutMenu_radioIcon me-1">
-                            <t t-call="mail.CallLayoutMenu_sidebarSvg"/>
-                        </span>
-                    </label>
-                </div>
-            </div>
-        </t>
-    </t>
-
-    <!-- TODO TEMPORARY ICONS -->
-
-    <t t-name="mail.CallLayoutMenu_gridSvg" owl="1">
-        <svg viewBox="0 0 300 300" width="5rem" height="5rem">
-            <g transform="matrix(1.08 0 0 1.29 63.85 96.61)">
-                <rect style="fill: currentColor" x="-37.46" y="-19.415" rx="0" ry="0" width="74.92" height="38.83"/>
-            </g>
-            <g transform="matrix(1.08 0 0 1.29 150 96.61)">
-                <rect style="fill: currentColor" x="-37.46" y="-19.415" rx="0" ry="0" width="74.92" height="38.83"/>
-            </g>
-            <g transform="matrix(1.08 0 0 1.29 236 96.61)">
-                <rect style="fill: currentColor" x="-37.46" y="-19.415" rx="0" ry="0" width="74.92" height="38.83"/>
-            </g>
-            <g transform="matrix(1.08 0 0 1.29 63.85 150)">
-                <rect style="fill: currentColor" x="-37.46" y="-19.415" rx="0" ry="0" width="74.92" height="38.83"/>
-            </g>
-            <g transform="matrix(1.08 0 0 1.29 63.85 204)">
-                <rect style="fill: currentColor" x="-37.46" y="-19.415" rx="0" ry="0" width="74.92" height="38.83"/>
-            </g>
-            <g transform="matrix(1.08 0 0 1.29 150 150)">
-                <rect style="fill: currentColor" x="-37.46" y="-19.415" rx="0" ry="0" width="74.92" height="38.83"/>
-            </g>
-            <g transform="matrix(1.08 0 0 1.29 150 204)">
-                <rect style="fill: currentColor" x="-37.46" y="-19.415" rx="0" ry="0" width="74.92" height="38.83"/>
-            </g>
-            <g transform="matrix(1.08 0 0 1.29 236 150)">
-                <rect style="fill: currentColor" x="-37.46" y="-19.415" rx="0" ry="0" width="74.92" height="38.83"/>
-            </g>
-            <g transform="matrix(1.08 0 0 1.29 236 204)">
-                <rect style="fill: currentColor" x="-37.46" y="-19.415" rx="0" ry="0" width="74.92" height="38.83"/>
-            </g>
-        </svg>
-    </t>
-
-    <t t-name="mail.CallLayoutMenu_spotlightSvg" owl="1">
-        <svg viewBox="0 0 300 300" width="5rem" height="5rem">
-            <g transform="matrix(3.38 0 0 4.04 150 150)">
-                <rect style="fill: currentColor" x="-38" y="-20" rx="0" ry="0" width="75" height="39"/>
-            </g>
-        </svg>
-    </t>
-
-    <t t-name="mail.CallLayoutMenu_sidebarSvg" owl="1">
-        <svg viewBox="0 0 300 300" width="5rem" height="5rem">
-            <g transform="matrix(2.66 0 0 4.04 122.89 150.02)">
-                <rect style="fill: currentColor" x="-37.46" y="-19.415" rx="0" ry="0" width="74.92" height="38.83"/>
-            </g>
-            <g transform="matrix(0.63 0 0 0.77 252.6 150.07)">
-                <rect style="fill: currentColor" x="-37.46" y="-19.415" rx="0" ry="0" width="74.92" height="38.83"/>
-            </g>
-                <g transform="matrix(0.63 0 0 0.77 252.6 118.07)">
-            <rect style="fill: currentColor" x="-37.46" y="-19.415" rx="0" ry="0" width="74.92" height="38.83"/>
-                </g>
-            <g transform="matrix(0.63 0 0 0.77 252.6 86.07)">
-                <rect style="fill: currentColor" x="-37.46" y="-19.415" rx="0" ry="0" width="74.92" height="38.83"/>
-            </g>
-            <g transform="matrix(0.63 0 0 0.77 252.6 182.07)">
-                <rect style="fill: currentColor" x="-37.46" y="-19.415" rx="0" ry="0" width="74.92" height="38.83"/>
-            </g>
-            <g transform="matrix(0.63 0 0 0.77 252.6 214.07)">
-                <rect style="fill: currentColor" x="-37.46" y="-19.415" rx="0" ry="0" width="74.92" height="38.83"/>
-            </g>
-        </svg>
-    </t>
-
-</templates>
diff --git a/addons/mail/static/src/components/call_option_menu/call_option_menu.scss b/addons/mail/static/src/components/call_option_menu/call_option_menu.scss
index 6e40751777f..144b1efaf62 100644
--- a/addons/mail/static/src/components/call_option_menu/call_option_menu.scss
+++ b/addons/mail/static/src/components/call_option_menu/call_option_menu.scss
@@ -49,3 +49,7 @@
         outline: none;
     }
 }
+
+.o_CallOptionMenu_separator {
+    background-color: $border-color;
+}
diff --git a/addons/mail/static/src/components/call_option_menu/call_option_menu.xml b/addons/mail/static/src/components/call_option_menu/call_option_menu.xml
index 80d4d749cd5..c5f3c67b4dc 100644
--- a/addons/mail/static/src/components/call_option_menu/call_option_menu.xml
+++ b/addons/mail/static/src/components/call_option_menu/call_option_menu.xml
@@ -4,10 +4,15 @@
     <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="callOptionMenu.callActionListView.callView.threadView.thread.videoCount > 0">
+                    <div class="o_CallOptionMenu_button">
+                        <label class="o_CallOptionMenu_checkBoxLabel o_cursor_pointer d-flex align-items-center p-1 mb-0">
+                            <input class="o_CallOptionMenu_checkBox p-1 ml-2 mr-2" type="checkbox" t-on-change="callOptionMenu.onChangeVideoFilterCheckbox" t-att-checked="callOptionMenu.callActionListView.callView.filterVideoGrid"/>
+                            <span class="o_CallOptionMenu_buttonText">Video only</span>
+                        </label>
+                    </div>
+                    <hr class="o_CallOptionMenu_separator w-100"/>
+                </t>
                 <t t-if="callOptionMenu.callActionListView.callView.isFullScreen">
                     <button class="o_CallOptionMenu_button" t-on-click="callOptionMenu.onClickDeactivateFullScreen">
                         <i class="o_CallOptionMenu_buttonIcon fa fa-lg fa-compress"/>
diff --git a/addons/mail/static/src/components/call_participant_card/call_participant_card.scss b/addons/mail/static/src/components/call_participant_card/call_participant_card.scss
index 4c761fa7e97..4f9756d7ca3 100644
--- a/addons/mail/static/src/components/call_participant_card/call_participant_card.scss
+++ b/addons/mail/static/src/components/call_participant_card/call_participant_card.scss
@@ -10,7 +10,7 @@
     max-height: #{"min(100%, 100px)"}; // interpolated as not supported by Sass
     max-width: #{"min(100%, 100px)"};
     aspect-ratio: 1;
-    border: solid $gray-700;
+    border: solid $gray-500;
 
     &.o-isTalking {
         border: solid darken($o-enterprise-primary-color, 5%);
diff --git a/addons/mail/static/src/components/call_participant_card/call_participant_card.xml b/addons/mail/static/src/components/call_participant_card/call_participant_card.xml
index 6be7ebd45be..fcbacbc5a18 100644
--- a/addons/mail/static/src/components/call_participant_card/call_participant_card.xml
+++ b/addons/mail/static/src/components/call_participant_card/call_participant_card.xml
@@ -5,7 +5,6 @@
         <t t-if="callParticipantCard">
             <div class="o_CallParticipantCard position-relative d-flex flex-column align-items-center justify-content-center mh-100 mw-100 p-1 rounded-sm"
                 t-att-class="{
-                    'o-isClickable o_cursor_pointer': callParticipantCard.invitedGuest or callParticipantCard.invitedPartner or !callParticipantCard.isMinimized,
                     'o-isTalking': !callParticipantCard.isMinimized and callParticipantCard.isTalking,
                     'o-isInvitation opacity-50': callParticipantCard.isInvitation,
                 }"
diff --git a/addons/mail/static/src/components/call_view/call_view.scss b/addons/mail/static/src/components/call_view/call_view.scss
index 4f353769825..81d005aa5d3 100644
--- a/addons/mail/static/src/components/call_view/call_view.scss
+++ b/addons/mail/static/src/components/call_view/call_view.scss
@@ -11,6 +11,10 @@
     }
 }
 
+.o_CallView_mainParticipantContainer {
+    min-width: 0;
+}
+
 .o_CallView_grid {
     overflow-y: auto;
     overflow-x: hidden;
@@ -40,6 +44,13 @@
     aspect-ratio: 16/9;
 }
 
+.o_CallView_sidebarButton {
+    font-size: 1.2rem;
+    padding: map-get($spacers, 2);
+    top: 48%;
+    right: 0;
+}
+
 // ------------------------------------------------------------------
 // Style
 // ------------------------------------------------------------------
@@ -53,3 +64,14 @@
         background: gray('700');
     }
 }
+
+.o_CallView_mainParticipantContainer {
+    background-color: black;
+}
+
+.o_CallView_sidebarButton {
+    color: white;
+    border-radius: 10px 0px 0px 10px;
+    border-right: 0px;
+    background-color: lighten(black, 10%);
+}
diff --git a/addons/mail/static/src/components/call_view/call_view.xml b/addons/mail/static/src/components/call_view/call_view.xml
index 7f26366f52b..5e2e37736b3 100644
--- a/addons/mail/static/src/components/call_view/call_view.xml
+++ b/addons/mail/static/src/components/call_view/call_view.xml
@@ -9,20 +9,22 @@
 
             <!-- Call members display -->
             <div class="o_CallView_participantContainer d-flex justify-content-between w-100 h-100 overflow-hidden" t-on-click="callView.onClick" t-on-mousemove="callView.onMouseMove">
-                <t t-if="callView.layout !== 'tiled'">
-                    <div class="o_CallView_mainParticipantContainer d-flex flex-grow-1 justify-content-center mw-100 mh-100">
-                        <t t-if="callView.mainParticipantCard">
-                            <CallParticipantCard className="'o_CallView_participantCard'" record="callView.mainParticipantCard"/>
+                <t t-if="callView.mainParticipantCard">
+                    <div class="o_CallView_mainParticipantContainer d-flex flex-grow-1 justify-content-center position-relative mw-100 mh-100">
+                        <CallParticipantCard className="'o_CallView_participantCard'" record="callView.mainParticipantCard"/>
+                        <t t-if="callView.showOverlay">
+                            <i t-if="callView.hasSidebar" class="o_CallView_sidebarButton position-absolute fa fa-arrow-right" title="Hide sidebar" t-on-click="callView.onClickHideSidebar"/>
+                            <i t-else="" class="o_CallView_sidebarButton position-absolute fa fa-arrow-left" title="Show sidebar" t-on-click="callView.onClickShowSidebar"/>
                         </t>
                     </div>
                 </t>
-                <t t-if="callView.layout !== 'spotlight'">
+                <t t-if="callView.tileParticipantCards.length > 0">
                     <div
                         class="o_CallView_grid d-flex align-items-center h-100"
                         t-att-class="{
-                            'o-isTiled flex-wrap justify-content-center w-100': callView.layout === 'tiled',
-                            'flex-column': callView.layout !== 'tiled',
-                            'o-isSidebar': callView.layout === 'sidebar',
+                            'o-isTiled flex-wrap justify-content-center w-100': !callView.mainParticipantCard,
+                            'flex-column': callView.mainParticipantCard,
+                            'o-isSidebar': callView.hasSidebar and callView.mainParticipantCard,
                         }"
                         t-ref="tileContainer"
                         t-attf-style="--height:{{state.tileHeight}}px; --width:{{state.tileWidth}}px; --columns:{{state.columnCount}};"
@@ -32,7 +34,7 @@
                                 <!-- maybe filter focused partner out? -->
                                 <CallParticipantCard
                                     className="'o_CallView_participantCard o_CallView_gridTile'"
-                                    classNameObj="{ 'w-100' : callView.layout === 'sidebar' }"
+                                    classNameObj="{ 'w-100' : callView.hasSidebar and callView.mainParticipantCard }"
                                     record="participantCard"
                                 />
                             </t>
@@ -59,14 +61,6 @@
                     </t>
                 </Dialog>
             </t>
-            <t t-if="callView.layoutMenu">
-                <Dialog size="'small'" title="callView.layoutSettingsTitle" onClosed="callView.onLayoutSettingsDialogClosed">
-                    <CallLayoutMenu record="callView.layoutMenu"/>
-                    <t t-set-slot="buttons">
-                        <!-- Explicit No buttons -->
-                    </t>
-                </Dialog>
-            </t>
         </div>
     </t>
 </t>
diff --git a/addons/mail/static/src/models/call_layout_menu.js b/addons/mail/static/src/models/call_layout_menu.js
deleted file mode 100644
index 07c3b31ef05..00000000000
--- a/addons/mail/static/src/models/call_layout_menu.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/** @odoo-module **/
-
-import { registerModel } from '@mail/model/model_core';
-import { attr, one } from '@mail/model/model_field';
-import { clear } from '@mail/model/model_field_command';
-
-registerModel({
-    name: 'CallLayoutMenu',
-    identifyingFields: ['callView'],
-    recordMethods: {
-        /**
-         * @param {MouseEvent} ev
-         */
-        onClickFilter(ev) {
-            ev.preventDefault();
-            switch (ev.target.value) {
-                case 'all':
-                    this.callView.update({
-                        filterVideoGrid: false,
-                    });
-                    break;
-                case 'video':
-                    this.callView.update({
-                        filterVideoGrid: true,
-                    });
-                    if (this.messaging.focusedRtcSession && !this.messaging.focusedRtcSession.videoStream) {
-                        this.messaging.update({ focusedRtcSession: clear() });
-                    }
-                    break;
-            }
-        },
-        /**
-         * @param {MouseEvent} ev
-         */
-        onClickLayout(ev) {
-            ev.preventDefault();
-            this.messaging.userSetting.update({
-                rtcLayout: ev.target.value,
-            });
-            this.component.trigger('dialog-closed');
-        },
-    },
-    fields: {
-        component: attr(),
-        callView: one('CallView', {
-            inverse: 'layoutMenu',
-            readonly: true,
-        }),
-    },
-});
diff --git a/addons/mail/static/src/models/call_option_menu.js b/addons/mail/static/src/models/call_option_menu.js
index 20eeaeca717..cd751bfe6e1 100644
--- a/addons/mail/static/src/models/call_option_menu.js
+++ b/addons/mail/static/src/models/call_option_menu.js
@@ -2,11 +2,23 @@
 
 import { registerModel } from '@mail/model/model_core';
 import { attr, one } from '@mail/model/model_field';
+import { clear } from '@mail/model/model_field_command';
 
 registerModel({
     name: 'CallOptionMenu',
     identifyingFields: ['callActionListView'],
     recordMethods: {
+        /**
+         * @param {Event} ev
+         */
+        onChangeVideoFilterCheckbox(ev) {
+            const filterVideoGrid = ev.target.checked;
+            const activeRtcSession = this.callActionListView.callView.activeRtcSession;
+            if (filterVideoGrid && activeRtcSession && !activeRtcSession.videoStream) {
+                this.callActionListView.callView.update({ activeRtcSession: clear() });
+            }
+            this.callActionListView.callView.update({ filterVideoGrid });
+        },
         /**
          * Creates and download a file that contains the logs of the current RTC call.
          *
diff --git a/addons/mail/static/src/models/call_participant_card.js b/addons/mail/static/src/models/call_participant_card.js
index c42ebc75dd8..d0a208a7713 100644
--- a/addons/mail/static/src/models/call_participant_card.js
+++ b/addons/mail/static/src/models/call_participant_card.js
@@ -2,14 +2,14 @@
 
 import { registerModel } from '@mail/model/model_core';
 import { attr, one } from '@mail/model/model_field';
-import { clear, insertAndReplace } from '@mail/model/model_field_command';
+import { clear, insertAndReplace, replace } from '@mail/model/model_field_command';
 import { isEventHandled, markEventHandled } from '@mail/utils/utils';
 
 import { sprintf } from '@web/core/utils/strings';
 
 registerModel({
     name: 'CallParticipantCard',
-    identifyingFields: ['relationalId'],
+    identifyingFields: [['rtcSession', 'invitedPartner', 'invitedGuest'], ['callViewOfMainCard', 'callViewOfTile']],
     recordMethods: {
         /**
          * @param {Event} ev
@@ -24,9 +24,11 @@ registerModel({
             if (isEventHandled(ev, 'CallParticipantCard.clickVolumeAnchor')) {
                 return;
             }
-            if (!this.invitedPartner && !this.invitedGuest) {
-                if (!this.isMinimized) {
-                    this.messaging.toggleFocusedRtcSession(this.rtcSession.id);
+            if (this.rtcSession) {
+                if (this.callView.activeRtcSession === this.rtcSession && this.callViewOfMainCard) {
+                    this.callView.update({ activeRtcSession: clear() });
+                } else {
+                    this.callView.update({ activeRtcSession: replace(this.rtcSession) });
                 }
                 return;
             }
@@ -83,6 +85,18 @@ registerModel({
                 return `/mail/channel/${this.channel.id}/guest/${this.invitedGuest.id}/avatar_128?unique=${this.invitedGuest.name}`;
             }
         },
+        /**
+         * @private
+         * @returns {mail.callView}
+         */
+        _computeCallView() {
+            const callView = this.callViewOfMainCard || this.callViewOfTile;
+            if (callView) {
+                return replace(callView);
+            } else {
+                return clear();
+            }
+        },
         /**
          * @private
          * @returns {boolean}
@@ -111,8 +125,7 @@ registerModel({
          * @returns {boolean}
          */
         _computeIsMinimized() {
-            const callView = this.callViewOfMainCard || this.callViewOfTile;
-            return Boolean(callView && callView.isMinimized);
+            return Boolean(this.callView && this.callView.isMinimized);
         },
         /**
          * @private
@@ -198,11 +211,15 @@ registerModel({
         /**
          * If set, this card represents an invitation of this guest to this call.
          */
-        invitedGuest: one('Guest'),
+        invitedGuest: one('Guest', {
+            readonly: true,
+         }),
         /**
          * If set, this card represents an invitation of this partner to this call.
          */
-        invitedPartner: one('Partner'),
+        invitedPartner: one('Partner', {
+            readonly: true,
+         }),
         /**
          * States whether this card is representing a person with a pending
          * invitation.
@@ -238,28 +255,33 @@ registerModel({
             compute: '_computeOutboundConnectionTypeText',
         }),
         /**
-         * Unique id for this session provided when instantiated.
+         * The callView that displays this card.
          */
-        relationalId: attr({
-            readonly: true,
-            required: true,
+        callView: one('CallView', {
+            compute: '_computeCallView',
+            inverse: 'participantCards',
         }),
         /**
          * The call view for which this card is the spotlight.
          */
         callViewOfMainCard: one('CallView', {
             inverse: 'mainParticipantCard',
+            readonly: true,
         }),
         /**
          * The call view for which this card is one of the tiles.
          */
         callViewOfTile: one('CallView', {
             inverse: 'tileParticipantCards',
+            readonly: true,
         }),
         /**
          * If set, this card represents a rtcSession.
          */
-        rtcSession: one('RtcSession'),
+        rtcSession: one('RtcSession', {
+            inverse: 'callParticipantCards',
+            readonly: true,
+        }),
         callParticipantVideoView: one('CallParticipantVideoView', {
             compute: '_computeCallParticipantVideoView',
             inverse: 'callParticipantCardOwner',
diff --git a/addons/mail/static/src/models/call_view.js b/addons/mail/static/src/models/call_view.js
index 1531bb43fd9..d836dbbb315 100644
--- a/addons/mail/static/src/models/call_view.js
+++ b/addons/mail/static/src/models/call_view.js
@@ -31,8 +31,14 @@ registerModel({
         /**
          * @param {MouseEvent} ev
          */
-        onLayoutSettingsDialogClosed(ev) {
-            this.toggleLayoutMenu();
+        onClickHideSidebar(ev) {
+            this.update({ hasSidebar: false });
+        },
+        /**
+         * @param {MouseEvent} ev
+         */
+        onClickShowSidebar(ev) {
+            this.update({ hasSidebar: true });
         },
         /**
          * @param {MouseEvent} ev
@@ -116,13 +122,6 @@ registerModel({
                 this.update({ isFullScreen: false });
             }
         },
-        toggleLayoutMenu() {
-            if (!this.layoutMenu) {
-                this.update({ layoutMenu: insertAndReplace() });
-                return;
-            }
-            this.update({ layoutMenu: clear() });
-        },
         //----------------------------------------------------------------------
         // Private
         //----------------------------------------------------------------------
@@ -140,10 +139,7 @@ registerModel({
          * @private
          */
         _computeIsControllerFloating() {
-            return (
-                this.isFullScreen ||
-                this.layout !== "tiled" && !this.threadView.compact
-            );
+            return Boolean(this.isFullScreen || this.activeRtcSession && !this.threadView.compact);
         },
         /**
          * @private
@@ -155,36 +151,11 @@ registerModel({
             if (this.isFullScreen || this.threadView.compact) {
                 return false;
             }
+            if (this.mainParticipantCard) {
+                return false;
+            }
             return !this.threadView.thread.rtc || this.threadView.thread.videoCount === 0;
         },
-        /**
-         * @private
-         */
-        _computeLayout() {
-            if (!this.threadView) {
-                return 'tiled';
-            }
-            if (this.isMinimized) {
-                return 'tiled';
-            }
-            if (!this.threadView.thread.rtc) {
-                return 'tiled';
-            }
-            if (!this.mainParticipantCard) {
-                return 'tiled';
-            }
-            if (
-                this.threadView.thread.rtcSessions.length +
-                this.threadView.thread.invitedPartners.length +
-                this.threadView.thread.invitedGuests.length < 2
-            ) {
-                return "tiled";
-            }
-            if (this.threadView.compact && this.messaging.userSetting.rtcLayout === 'sidebar') {
-                return 'spotlight';
-            }
-            return this.messaging.userSetting.rtcLayout;
-        },
         /**
          * @private
          * @returns {string}
@@ -196,17 +167,13 @@ registerModel({
          * @private
          */
         _computeMainParticipantCard() {
-            if (!this.messaging || !this.threadView) {
+            if (!this.messaging || !this.activeRtcSession || !this.threadView || !this.activeRtcSession) {
                 return clear();
             }
-            if (this.messaging.focusedRtcSession && this.messaging.focusedRtcSession.channel === this.threadView.thread) {
-                return insert({
-                    relationalId: `rtc_session_${this.messaging.focusedRtcSession.localId}_${this.threadView.thread.localId}`,
-                    rtcSession: replace(this.messaging.focusedRtcSession),
-                    channel: replace(this.threadView.thread),
-                });
-            }
-            return clear();
+            return insert({
+                rtcSession: replace(this.activeRtcSession),
+                channel: replace(this.threadView.thread),
+            });
         },
         /**
          * @private
@@ -222,14 +189,19 @@ registerModel({
             if (!this.threadView) {
                 return clear();
             }
+            if (this.activeRtcSession && !this.hasSidebar) {
+                return clear();
+            }
             const tileCards = [];
             const sessionPartners = new Set();
             const sessionGuests = new Set();
             for (const rtcSession of this.threadView.thread.rtcSessions) {
+                if (this.filterVideoGrid && !rtcSession.videoStream) {
+                    continue;
+                }
                 rtcSession.partner && sessionPartners.add(rtcSession.partner.id);
                 rtcSession.guest && sessionPartners.add(rtcSession.guest.id);
                 tileCards.push({
-                    relationalId: `rtc_session_${rtcSession.localId}_${this.threadView.thread.localId}`,
                     rtcSession: replace(rtcSession),
                     channel: replace(this.threadView.thread),
                 });
@@ -239,7 +211,6 @@ registerModel({
                     continue;
                 }
                 tileCards.push({
-                    relationalId: `invited_partner_${partner.localId}_${this.threadView.thread.localId}`,
                     invitedPartner: replace(partner),
                     channel: replace(this.threadView.thread),
                 });
@@ -249,7 +220,6 @@ registerModel({
                     continue;
                 }
                 tileCards.push({
-                    relationalId: `invited_guest_${guest.localId}_${this.threadView.thread.localId}`,
                     invitedGuest: replace(guest),
                     channel: replace(this.threadView.thread),
                 });
@@ -307,6 +277,10 @@ registerModel({
         },
     },
     fields: {
+        /**
+         * The rtc session that is the focus/spotlight of the viewer.
+         */
+        activeRtcSession: one('RtcSession'),
         /**
          * The aspect ratio of the tiles.
          */
@@ -320,6 +294,12 @@ registerModel({
         filterVideoGrid: attr({
             default: false,
         }),
+        /**
+         * Determines if the viewer should have a sidebar.
+         */
+        hasSidebar: attr({
+            default: true,
+        }),
         /**
          * Determines if the controller is an overlay or a bottom bar.
          */
@@ -341,13 +321,6 @@ registerModel({
             default: false,
             compute: '_computeIsMinimized',
         }),
-        /**
-         * Determines the layout use for the tiling of the participant cards.
-         */
-        layout: attr({
-            default: 'tiled',
-            compute: '_computeLayout',
-        }),
         /**
          * Text content that is displayed on title of the layout settings dialog.
          */
@@ -360,6 +333,15 @@ registerModel({
         mainParticipantCard: one('CallParticipantCard', {
             compute: '_computeMainParticipantCard',
             inverse: 'callViewOfMainCard',
+            isCausal: true,
+        }),
+        /**
+         * All the participant cards of the call viewer (main card and tile cards).
+         * this is a technical inverse to distinguish from the other relation 'tileParticipantCards'.
+         */
+        participantCards: many('CallParticipantCard', {
+            inverse: 'callView',
+            isCausal: true,
         }),
         /**
          * The model for the controller (buttons).
@@ -370,13 +352,6 @@ registerModel({
             inverse: 'callView',
             isCausal: true,
         }),
-        /**
-         * The model for the menu to control the layout of the viewer.
-         */
-        layoutMenu: one('CallLayoutMenu', {
-            inverse: 'callView',
-            isCausal: true,
-        }),
         /**
          * Text content that is displayed on title of the settings dialog.
          */
@@ -404,6 +379,7 @@ registerModel({
         tileParticipantCards: many('CallParticipantCard', {
             compute: '_computeTileParticipantCards',
             inverse: 'callViewOfTile',
+            isCausal: true,
         }),
     },
     onChanges: [
diff --git a/addons/mail/static/src/models/messaging.js b/addons/mail/static/src/models/messaging.js
index 5b58d2c64e3..1c943ff063f 100644
--- a/addons/mail/static/src/models/messaging.js
+++ b/addons/mail/static/src/models/messaging.js
@@ -221,24 +221,6 @@ registerModel({
             }, { shadow: true });
             this.models['Partner'].insert(dataList);
         },
-        /**
-         * @param {String} sessionId
-         */
-        toggleFocusedRtcSession(sessionId) {
-            const rtcSession = this.messaging.models['RtcSession'].findFromIdentifyingData({
-                id: sessionId,
-            });
-            const focusedSessionId = this.focusedRtcSession && this.focusedRtcSession.id;
-            if (!sessionId || focusedSessionId === sessionId) {
-                this.update({ focusedRtcSession: clear() });
-                return;
-            }
-            this.update({ focusedRtcSession: replace(rtcSession) });
-            if (this.userSetting.rtcLayout !== 'tiled') {
-                return;
-            }
-            this.userSetting.update({ rtcLayout: 'sidebar' });
-        },
         /**
          * @private
          * @returns {Object} browser
@@ -319,12 +301,6 @@ registerModel({
                 this.soundEffects.incomingCall.stop();
             }
         },
-        /**
-         * @private
-         */
-        _onChangeFocusedRtcSession() {
-            this.rtc.filterIncomingVideoTraffic(this.focusedRtcSession && [this.focusedRtcSession.peerToken]);
-        },
     },
     fields: {
         /**
@@ -388,7 +364,6 @@ registerModel({
         fetchImStatusTimerDuration: attr({
             default: 50 * 1000,
         }),
-        focusedRtcSession: one('RtcSession'),
         /**
          * Mailbox History.
          */
@@ -505,9 +480,5 @@ registerModel({
             dependencies: ['ringingThreads'],
             methodName: '_onChangeRingingThreads',
         }),
-        new OnChange({
-            dependencies: ['focusedRtcSession'],
-            methodName: '_onChangeFocusedRtcSession',
-        }),
     ],
 });
diff --git a/addons/mail/static/src/models/rtc.js b/addons/mail/static/src/models/rtc.js
index 43d146b0d7f..857bc106fb2 100644
--- a/addons/mail/static/src/models/rtc.js
+++ b/addons/mail/static/src/models/rtc.js
@@ -56,27 +56,6 @@ registerModel({
                 this.channel.endCall();
             }
         },
-        /**
-         * @param {array} [allowedTokens] tokens of the peerConnections for which
-         * the incoming video traffic is allowed. If undefined, all traffic is
-         * allowed.
-         */
-        filterIncomingVideoTraffic(allowedTokens) {
-            const tokenSet = new Set(allowedTokens);
-            for (const rtcSession of this.connectedRtcSessions) {
-                const fullDirection = this.videoTrack ? 'sendrecv' : 'recvonly';
-                const limitedDirection = this.videoTrack ? 'sendonly' : 'inactive';
-                const transceiver = rtcSession.rtcPeerConnection.getTransceiver('video')
-                if (!transceiver) {
-                    continue;
-                }
-                if (!tokenSet.size || tokenSet.has(rtcSession.id)) {
-                    transceiver.direction = fullDirection;
-                } else {
-                    transceiver.direction = limitedDirection;
-                }
-            }
-        },
         /**
          * @param {number} sender id of the session that sent the notification
          * @param {String} content JSON
diff --git a/addons/mail/static/src/models/rtc_peer_connection.js b/addons/mail/static/src/models/rtc_peer_connection.js
index 6eef43d4ea4..12b6e40b359 100644
--- a/addons/mail/static/src/models/rtc_peer_connection.js
+++ b/addons/mail/static/src/models/rtc_peer_connection.js
@@ -2,6 +2,7 @@
 
 import { registerModel } from '@mail/model/model_core';
 import { attr, one } from '@mail/model/model_field';
+import { OnChange } from '@mail/model/model_onchange';
 
 registerModel({
     name: 'RtcPeerConnection',
@@ -20,8 +21,38 @@ registerModel({
             const transceivers = this.peerConnection.getTransceivers();
             return transceivers[this.messaging.rtc.orderedTransceiverNames.indexOf(trackKind)];
         },
+        /**
+         * The download is allowed when there are views that display the video stream.
+         *
+         * @private
+         * @returns {boolean}
+         */
+        _computeAcceptsVideoStream() {
+            return Boolean(this.rtcSession.callParticipantCards && this.rtcSession.callParticipantCards.length > 0);
+        },
+        /**
+         * @private
+         */
+        _onChangeAcceptsVideoStream() {
+            const transceiver = this.getTransceiver('video');
+            if (!transceiver) {
+                return;
+            }
+            const rtc = this.rtcSession.rtcAsConnectedSession;
+            if (this.acceptsVideoStream) {
+                transceiver.direction = rtc.videoTrack ? 'sendrecv' : 'recvonly';
+            } else {
+                transceiver.direction = rtc.videoTrack ? 'sendonly' : 'inactive';
+            }
+        },
     },
     fields: {
+        /**
+         * Determines whether the video stream receiver accepts video stream download.
+         */
+        acceptsVideoStream: attr({
+            compute: '_computeAcceptsVideoStream',
+        }),
         /**
          * Contains the browser.RTCPeerConnection instance of this RTC Session.
          * If unset, this RTC Session is not considered as connected
@@ -33,4 +64,10 @@ registerModel({
             required: true,
         }),
     },
+    onChanges: [
+        new OnChange({
+            dependencies: ['acceptsVideoStream'],
+            methodName: '_onChangeAcceptsVideoStream',
+        }),
+    ],
 });
diff --git a/addons/mail/static/src/models/rtc_session.js b/addons/mail/static/src/models/rtc_session.js
index a9d770a7e9d..2a613ccdda6 100644
--- a/addons/mail/static/src/models/rtc_session.js
+++ b/addons/mail/static/src/models/rtc_session.js
@@ -198,11 +198,9 @@ registerModel({
                 return;
             }
             const track = trackKind === 'audio' ? this.rtcAsConnectedSession.audioTrack : this.rtcAsConnectedSession.videoTrack;
-            const fullDirection = track ? 'sendrecv' : 'recvonly';
-            const limitedDirection = track ? 'sendonly' : 'inactive';
-            let transceiverDirection = fullDirection;
-            if (trackKind === 'video') {
-                transceiverDirection = !this.messaging.focusedRtcSession || this.messaging.focusedRtcSession === this ? fullDirection : limitedDirection;
+            let transceiverDirection = track ? 'sendrecv' : 'recvonly';
+            if (trackKind === 'video' && !this.rtcPeerConnection.acceptsVideoStream) {
+                transceiverDirection = track ? 'sendonly' : 'inactive';
             }
             let transceiver;
             if (initTransceiver) {
@@ -432,6 +430,14 @@ registerModel({
         calledChannels: many('Thread', {
             inverse: 'rtcInvitingSession',
         }),
+        /**
+         * The participant cards of this session,
+         * this is used to know how many views are displaying this session.
+         */
+        callParticipantCards: many('CallParticipantCard', {
+            inverse: 'rtcSession',
+            isCausal: true,
+        }),
         /**
          * States whether there is currently an error with the audio element.
          */
diff --git a/addons/mail/static/src/models/user_setting.js b/addons/mail/static/src/models/user_setting.js
index f1543239e83..5003b0eeb84 100644
--- a/addons/mail/static/src/models/user_setting.js
+++ b/addons/mail/static/src/models/user_setting.js
@@ -280,13 +280,6 @@ registerModel({
             inverse: 'userSetting',
             isCausal: true,
         }),
-        /**
-         * layout of the rtc session display chosen by the user
-         * possible values: tiled, spotlight, sidebar
-         */
-        rtcLayout: attr({
-            default: 'tiled',
-        }),
         /**
          * true if the user wants to use push to talk (over voice activation)
          */