calloverlays: cleanup main and participant fadeout mechanisms

Unfortunately, QQuickMouseArea force accepts all move events by
design, which makes passthrough events tricky to catch. In-call
overlays for conference participants should be a layer below the
main overlay. So, using QML MouseAreas makes correctly implementing
both overlay fade mechanisms with passthrough for participant menus
too complex. To properly implement the signal relay mechanism we
would need to listen to all the child components with MouseAreas
and relay the positionChanged events to parenting MouseAreas.

To avoid the complexity, we can install an event filter for the
main overlay and listen to global mouse move events that are
contained in it's geometry.

Additionally, we can use Control components instead of transparent
Rectangles to access a hovered property which can be used to
prevent the fade out, and effectively freeze the visibility of menu
components.

Gitlab: #420
Gitlab: #421
Gitlab: #423
Change-Id: I7f05d2bc79ad6a8db0951b7b59e52f671fdf4798

qml.qrc

@@ -136,5 +136,6 @@
         <file>src/mainview/components/ConversationListView.qml</file>
         <file>src/mainview/components/SmartListItemDelegate.qml</file>
         <file>src/mainview/components/BadgeNotifier.qml</file>
+        <file>src/mainview/components/ParticipantsLayer.qml</file>
     </qresource>
 </RCC>

src/calloverlaymodel.cpp

@@ -18,6 +18,10 @@
 
 #include "calloverlaymodel.h"
 
+#include <QEvent>
+#include <QMouseEvent>
+#include <QQuickWindow>
+
 CallControlListModel::CallControlListModel(QObject* parent)
     : QAbstractListModel(parent)
 {}
@@ -183,6 +187,42 @@ CallOverlayModel::overflowHiddenModel()
     return QVariant::fromValue(overflowHiddenModel_);
 }
 
+void
+CallOverlayModel::registerFilter(QQuickWindow* object, QQuickItem* item)
+{
+    if (!object || !item || watchedItems_.contains(item))
+        return;
+    watchedItems_.push_back(item);
+    if (watchedItems_.size() == 1)
+        object->installEventFilter(this);
+}
+
+void
+CallOverlayModel::unregisterFilter(QQuickWindow* object, QQuickItem* item)
+{
+    if (!object || !item || !watchedItems_.contains(item))
+        return;
+    watchedItems_.removeOne(item);
+    if (watchedItems_.size() == 0)
+        object->removeEventFilter(this);
+}
+
+bool
+CallOverlayModel::eventFilter(QObject* object, QEvent* event)
+{
+    if (event->type() == QEvent::MouseMove) {
+        auto mouseEvent = static_cast<QMouseEvent*>(event);
+        QPoint eventPos(mouseEvent->x(), mouseEvent->y());
+        auto windowItem = static_cast<QQuickWindow*>(object)->contentItem();
+        Q_FOREACH (const auto& item, watchedItems_) {
+            if (item->contains(windowItem->mapToItem(item, eventPos))) {
+                Q_EMIT mouseMoved(item);
+            }
+        }
+    }
+    return QObject::eventFilter(object, event);
+}
+
 void
 CallOverlayModel::setControlRanges()
 {

src/calloverlaymodel.h

@@ -25,7 +25,7 @@
 #include <QObject>
 #include <QQmlEngine>
 #include <QSortFilterProxyModel>
-#include <QDebug>
+#include <QQuickItem>
 
 #define CC_ROLES \
     X(QObject*, ItemAction) \
@@ -103,6 +103,13 @@ public:
     Q_INVOKABLE QVariant overflowVisibleModel();
     Q_INVOKABLE QVariant overflowHiddenModel();
 
+    Q_INVOKABLE void registerFilter(QQuickWindow* object, QQuickItem* item);
+    Q_INVOKABLE void unregisterFilter(QQuickWindow* object, QQuickItem* item);
+    bool eventFilter(QObject* object, QEvent* event) override;
+
+Q_SIGNALS:
+    void mouseMoved(QQuickItem* item);
+
 private Q_SLOTS:
     void setControlRanges();
 
@@ -114,4 +121,6 @@ private:
     IndexRangeFilterProxyModel* overflowModel_;
     IndexRangeFilterProxyModel* overflowVisibleModel_;
     IndexRangeFilterProxyModel* overflowHiddenModel_;
+
+    QList<QQuickItem*> watchedItems_;
 };

src/commoncomponents/ModalPopup.qml

@@ -25,8 +25,6 @@ import net.jami.Constants 1.0
 Popup {
     id: root
 
-    property int fadeDuration: 100
-
     // convient access to closePolicy
     property bool autoClose: true
 
@@ -76,13 +74,13 @@ Popup {
     enter: Transition {
         NumberAnimation {
             properties: "opacity"; from: 0.0; to: 1.0
-            duration: fadeDuration
+            duration: JamiTheme.shortFadeDuration
         }
     }
     exit: Transition {
         NumberAnimation {
             properties: "opacity"; from: 1.0; to: 0.0
-            duration: fadeDuration
+            duration: JamiTheme.shortFadeDuration
         }
     }
 }

src/commoncomponents/PushButton.qml

@@ -58,7 +58,7 @@ AbstractButton {
     property string checkedColor: pressedColor
 
     // State transition duration
-    property int duration: JamiTheme.fadeDuration
+    property int duration: JamiTheme.shortFadeDuration
 
     // Image properties
     property alias source: image.source

src/constant/JamiTheme.qml

@@ -163,7 +163,10 @@ Item {
     property color bgSideBarDarkMode_: rgba256(24, 24, 24, 100)
     property color bgDarkMode_: rgba256(32, 32, 32, 100)
 
-    property int fadeDuration: 150
+    property int shortFadeDuration: 150
+    property int overlayFadeDelay: 2000
+    property int overlayFadeDuration: 500
+    property int smartListTransitionDuration: 120
 
     // Sizes
     property real splitViewHandlePreferredWidth: 4
@@ -185,7 +188,6 @@ Item {
     property real accountListAvatarSize: 40
     property real smartListItemHeight: 64
     property real smartListAvatarSize: 52
-    property real smartListTransitionDuration: 120
     property real avatarSizeInCall: 130
     property real callButtonPreferredSize: 50
 

src/mainview/components/AccountComboBox.qml

@@ -76,7 +76,7 @@ Label {
                        Qt.lighter(JamiTheme.hoverColor, 1.05) :
                        JamiTheme.backgroundColor
         Behavior on color {
-            ColorAnimation { duration: JamiTheme.fadeDuration }
+            ColorAnimation { duration: JamiTheme.shortFadeDuration }
         }
 
         // TODO: this can be removed when frameless window is implemented

src/mainview/components/CallOverlayButtonGroup.qml

@@ -29,7 +29,7 @@ import net.jami.Constants 1.0
 
 import "../../commoncomponents"
 
-Rectangle {
+Control {
     id: root
 
     // ButtonCounts here is to make sure that flow layout margin is calculated correctly,
@@ -56,7 +56,6 @@ Rectangle {
         noVideoButton.checked = isVideoMuted
     }
 
-    color: "transparent"
     z: 2
 
     RowLayout {

src/mainview/components/OngoingCallPage.qml

@@ -30,7 +30,7 @@ import net.jami.Constants 1.0
 
 import "../../commoncomponents"
 
-Rectangle {
+Rectangle  {
     id: root
 
     property var accountPeerPair: ["", ""]
@@ -45,11 +45,13 @@ Rectangle {
     property alias callId: distantRenderer.rendererId
     property var linkedWebview: null
 
+    color: "black"
+
     onAccountPeerPairChanged: {
         if (accountPeerPair[0] === "" || accountPeerPair[1] === "")
             return;
         contactImage.updateImage(accountPeerPair[1])
-        callOverlay.handleParticipantsInfo(CallAdapter.getConferencesInfos())
+        callOverlay.participantsLayer.update(CallAdapter.getConferencesInfos())
 
         bestName = UtilsAdapter.getBestName(accountPeerPair[0], accountPeerPair[1])
         var id = UtilsAdapter.getBestId(accountPeerPair[0], accountPeerPair[1])
@@ -95,7 +97,7 @@ Rectangle {
         } else {
             bestName = ""
         }
-        callOverlay.handleParticipantsInfo(infos)
+        callOverlay.participantsLayer.update(infos)
     }
 
     function previewMagneticSnap() {
@@ -178,49 +180,6 @@ Rectangle {
                         callOverlay.openCallViewContextMenuInPos(mouse.x, mouse.y)
                 }
 
-                CallOverlay {
-                    id: callOverlay
-
-                    anchors.fill: parent
-
-                    Connections {
-                        target: CallAdapter
-
-                        function onUpdateOverlay(isPaused, isAudioOnly, isAudioMuted, isVideoMuted,
-                                                 isRecording, isSIP, isConferenceCall, bestName) {
-                            callOverlay.showOnHoldImage(isPaused)
-                            audioCallPageRectCentralRect.visible = !isPaused && root.isAudioOnly
-                            callOverlay.updateButtonStatus(isPaused,
-                                                                isAudioOnly,
-                                                                isAudioMuted,
-                                                                isVideoMuted,
-                                                                isRecording, isSIP,
-                                                                isConferenceCall)
-                            root.bestName = bestName
-                            callOverlay.handleParticipantsInfo(CallAdapter.getConferencesInfos())
-                        }
-
-                        function onShowOnHoldLabel(isPaused) {
-                            callOverlay.showOnHoldImage(isPaused)
-                            audioCallPageRectCentralRect.visible = !isPaused && root.isAudioOnly
-                        }
-
-                        function onRemoteRecordingChanged(label, state) {
-                            callOverlay.showRemoteRecording(label, state)
-                        }
-
-                        function onEraseRemoteRecording() {
-                            callOverlay.resetRemoteRecording()
-                        }
-                    }
-
-                    onOverlayChatButtonClicked: {
-                        inCallMessageWebViewStack.visible ?
-                                    closeInCallConversation() :
-                                    openInCallConversation()
-                    }
-                }
-
                 DistantRenderer {
                     id: distantRenderer
 
@@ -232,7 +191,7 @@ Rectangle {
                     visible: !root.isAudioOnly
 
                     onOffsetChanged: {
-                        callOverlay.handleParticipantsInfo(CallAdapter.getConferencesInfos())
+                        callOverlay.participantsLayer.update(CallAdapter.getConferencesInfos())
                     }
                 }
 
@@ -334,6 +293,49 @@ Rectangle {
                     }
                 }
 
+                CallOverlay {
+                    id: callOverlay
+
+                    anchors.fill: parent
+
+                    Connections {
+                        target: CallAdapter
+
+                        function onUpdateOverlay(isPaused, isAudioOnly, isAudioMuted, isVideoMuted,
+                                                 isRecording, isSIP, isConferenceCall, bestName) {
+                            callOverlay.showOnHoldImage(isPaused)
+                            audioCallPageRectCentralRect.visible = !isPaused && root.isAudioOnly
+                            callOverlay.updateButtonStatus(isPaused,
+                                                                isAudioOnly,
+                                                                isAudioMuted,
+                                                                isVideoMuted,
+                                                                isRecording, isSIP,
+                                                                isConferenceCall)
+                            root.bestName = bestName
+                            callOverlay.participantsLayer.update(CallAdapter.getConferencesInfos())
+                        }
+
+                        function onShowOnHoldLabel(isPaused) {
+                            callOverlay.showOnHoldImage(isPaused)
+                            audioCallPageRectCentralRect.visible = !isPaused && root.isAudioOnly
+                        }
+
+                        function onRemoteRecordingChanged(label, state) {
+                            callOverlay.showRemoteRecording(label, state)
+                        }
+
+                        function onEraseRemoteRecording() {
+                            callOverlay.resetRemoteRecording()
+                        }
+                    }
+
+                    onOverlayChatButtonClicked: {
+                        inCallMessageWebViewStack.visible ?
+                                    closeInCallConversation() :
+                                    openInCallConversation()
+                    }
+                }
+
                 ColumnLayout {
                     id: audioCallPageRectCentralRect
                     anchors.centerIn: parent
@@ -400,6 +402,4 @@ Rectangle {
             clip: true
         }
     }
-
-    color: "black"
 }

src/mainview/components/ParticipantOverlay.qml

@@ -30,7 +30,7 @@ import net.jami.Constants 1.0
 
 import "../../commoncomponents"
 
-Rectangle {
+Item {
     id: root
 
     // svg path for the participant indicators background shape
@@ -38,8 +38,10 @@ Rectangle {
     property int shapeHeight: 16
     property int shapeRadius: 6
     property string pathShape: "M0,0 h%1 q%2,0 %2,%2 v%3 h-%4 z"
-    .arg(shapeWidth-shapeRadius).arg(shapeRadius).arg(shapeHeight-shapeRadius).
-    arg(shapeWidth)
+        .arg(shapeWidth - shapeRadius)
+        .arg(shapeRadius)
+        .arg(shapeHeight - shapeRadius)
+        .arg(shapeWidth)
 
     property string uri: overlayMenu.uri
     property bool participantIsActive: false
@@ -49,6 +51,8 @@ Rectangle {
     property bool participantIsModeratorMuted: false
     property bool participantMenuActive: false
 
+    z: -1
+
     function setAvatar(show, avatar, uri, local, isContact) {
         if (!show)
             contactImage.visible = false
@@ -98,9 +102,6 @@ Rectangle {
         overlayMenu.showHangup = isModerator && !isLocal && !participantIsHost
     }
 
-    color: "transparent"
-    z: 1
-
     // Participant header with host, moderator and mute indicators
     Rectangle {
         id: participantIndicators
@@ -213,90 +214,40 @@ Rectangle {
         layer.smooth: true
     }
 
-    // Participant background, mousearea, hover and buttons for moderation
-    Rectangle {
+    // Participant background and buttons for moderation
+    MouseArea {
         id: participantRect
 
         anchors.fill: parent
         opacity: 0
-        color: "transparent"
         z: 1
 
-        MouseArea {
-            id: mouseAreaHover
-
-            anchors.fill: parent
-            hoverEnabled: true
-            propagateComposedEvents: true
-            acceptedButtons: Qt.LeftButton
-
-            ParticipantOverlayMenu {
-                id: overlayMenu
-                visible: participantRect.opacity !== 0
-
-                onMouseAreaExited: {
-                    root.z = 1
-                    participantRect.state = "exited"
-                }
-                onMouseChanged: {
-                    participantRect.state = "entered"
-                    fadeOutTimer.restart()
-                    participantMenuActive = true
-                }
-            }
-
-            onEntered: {
-                root.z = 2
-                participantRect.state = "entered"
-            }
-
-            onExited: {
-                root.z = 1
-                participantRect.state = "exited"
-            }
-
-            onMouseXChanged: {
-                // Hack: avoid listening mouseXChanged emitted when
-                // ParticipantOverlayMenu is exited
-                if (participantMenuActive) {
-                    participantMenuActive = false
-                } else {
-                    participantRect.state = "entered"
-                    fadeOutTimer.restart()
-                }
-            }
+        propagateComposedEvents: true
+        hoverEnabled: true
+        onPositionChanged: {
+            participantRect.opacity = 1
+            fadeOutTimer.restart()
+            // Here we could call: root.parent.positionChanged(mouse)
+            // to relay the event to a main overlay mouse area, either
+            // as a parent object or some property passed in. But, this
+            // will still fail when hovering over menus, etc.
         }
-
-        states: [
-            State {
-                name: "entered"
-                PropertyChanges {
-                    target: participantRect
-                    opacity: 1
-                }
-            },
-            State {
-                name: "exited"
-                PropertyChanges {
-                    target: participantRect
-                    opacity: 0
-                }
-            }
-        ]
-
-        transitions: Transition {
-            PropertyAnimation {
-                target: participantRect
-                property: "opacity"
-                duration: 50
+        onExited: participantRect.opacity = 0
+        onEntered: participantRect.opacity = 1
+
+        // Timer to decide when ParticipantOverlay fade out
+        Timer {
+            id: fadeOutTimer
+            interval: JamiTheme.overlayFadeDelay
+            onTriggered: {
+                if (overlayMenu.hovered)
+                    return
+                participantRect.opacity = 0
             }
         }
-    }
 
-    // Timer to decide when ParticipantOverlay fade out
-    Timer {
-        id: fadeOutTimer
-        interval: 5000
-        onTriggered: participantRect.state = "exited"
+        ParticipantOverlayMenu { id: overlayMenu }
+
+        Behavior on opacity { NumberAnimation { duration: JamiTheme.shortFadeDuration }}
     }
 }

src/mainview/components/ParticipantOverlayMenu.qml

@@ -29,7 +29,7 @@ import net.jami.Constants 1.0
 import "../../commoncomponents"
 
 // Overlay menu for conference moderation
-Rectangle {
+Control {
     id: root
 
     property string uri: ""
@@ -71,9 +71,6 @@ Rectangle {
 
     property int isSmall: !isBarLayout && (height < 100 || width < 160)
 
-    signal mouseAreaExited
-    signal mouseChanged
-
     width: isBarLayout? bestNameLabel.contentWidth + buttonsSize + 32
                       : (isOverlayRect? buttonsSize + 32 : parent.width)
     height: isBarLayout? shapeHeight : (isOverlayRect? 80 : parent.height)
@@ -82,20 +79,13 @@ Rectangle {
     anchors.left: isBarLayout? parent.left : undefined
     anchors.centerIn: isBarLayout? undefined : parent
 
-    color: isBarLayout? "transparent" : JamiTheme.darkGreyColorOpacity
-
-    radius: (isBarLayout || !isOverlayRect)? 0 : 10
-
-    MouseArea {
-        id: mouseAreaHover
+    background: Rectangle {
+        color: isBarLayout? "transparent" : JamiTheme.darkGreyColorOpacity
+        radius: (isBarLayout || !isOverlayRect)? 0 : 10
+    }
 
+    Item {
         anchors.fill: parent
-        hoverEnabled: true
-        propagateComposedEvents: true
-        acceptedButtons: Qt.LeftButton
-
-        onExited: mouseAreaExited()
-        onMouseXChanged: mouseChanged()
 
         Shape {
             id: myShape

src/mainview/components/ParticipantsLayer.qml

+/*
+ * Copyright (C) 2020 by Savoir-faire Linux
+ * Author: Sébastien Blin <sebastien.blin@savoirfairelinux.com>
+ *
+ * This program is free software; you can redistribute it and/or modify
+ * it under the terms of the GNU General Public License as published by
+ * the Free Software Foundation; either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU General Public License for more details.
+ *
+ * You should have received a copy of the GNU General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import QtQuick 2.14
+import QtQml 2.14
+
+Item {
+    id: root
+
+    property var participantOverlays: []
+    property var participantComponent: Qt.createComponent("ParticipantOverlay.qml")
+
+    // returns true if participant is not fully maximized
+    function showMaximize(pX, pY, pW, pH) {
+        // Hack: -1 offset added to avoid problems with odd sizes
+        return (pX - distantRenderer.getXOffset() !== 0
+                || pY - distantRenderer.getYOffset() !== 0
+                || pW < (distantRenderer.width - distantRenderer.getXOffset() * 2 - 1)
+                || pH < (distantRenderer.height - distantRenderer.getYOffset() * 2 - 1))
+    }
+
+    function update(infos) {
+        if (isAudioOnly)
+            return;
+        // TODO: in the future the conference layout should be entirely managed by the client
+        // Hack: truncate and ceil participant's overlay position and size to correct
+        // when they are not exacts
+        callOverlay.updateMenu()
+        var showMax = false
+        var showMin = false
+
+        var deletedUris = []
+        var currentUris = []
+        for (var p in participantOverlays) {
+            if (participantOverlays[p]) {
+                var participant = infos.find(e => e.uri === participantOverlays[p].uri);
+                if (participant) {
+                    // Update participant's information
+                    var newX = Math.trunc(distantRenderer.getXOffset()
+                                          + participant.x * distantRenderer.getScaledWidth())
+                    var newY = Math.trunc(distantRenderer.getYOffset()
+                                          + participant.y * distantRenderer.getScaledHeight())
+
+                    var newWidth = Math.ceil(participant.w * distantRenderer.getScaledWidth())
+                    var newHeight = Math.ceil(participant.h * distantRenderer.getScaledHeight())
+
+                    var newVisible = participant.w !== 0 && participant.h !== 0
+                    if (participantOverlays[p].x !== newX)
+                        participantOverlays[p].x = newX
+                    if (participantOverlays[p].y !== newY)
+                        participantOverlays[p].y = newY
+                    if (participantOverlays[p].width !== newWidth)
+                        participantOverlays[p].width = newWidth
+                    if (participantOverlays[p].height !== newHeight)
+                        participantOverlays[p].height = newHeight
+                    if (participantOverlays[p].visible !== newVisible)
+                        participantOverlays[p].visible = newVisible
+
+                    showMax = showMaximize(participantOverlays[p].x,
+                                           participantOverlays[p].y,
+                                           participantOverlays[p].width,
+                                           participantOverlays[p].height)
+
+                    participantOverlays[p].setMenu(participant.uri, participant.bestName,
+                                                   participant.isLocal, participant.active, showMax)
+                    if (participant.videoMuted)
+                        participantOverlays[p].setAvatar(true, participant.avatar, participant.uri, participant.isLocal, participant.isContact)
+                    else
+                        participantOverlays[p].setAvatar(false)
+                    currentUris.push(participantOverlays[p].uri)
+                } else {
+                    // Participant is no longer in conference
+                    deletedUris.push(participantOverlays[p].uri)
+                    participantOverlays[p].destroy()
+                }
+            }
+        }
+        participantOverlays = participantOverlays.filter(part => !deletedUris.includes(part.uri))
+
+        if (infos.length === 0) { // Return to normal call
+            previewRenderer.visible = !isVideoMuted
+            for (var part in participantOverlays) {
+                if (participantOverlays[part]) {
+                    participantOverlays[part].destroy()
+                }
+            }
+            participantOverlays = []
+        } else {
+            previewRenderer.visible = false
+            for (var infoVariant in infos) {
+                // Only create overlay for new participants
+                if (!currentUris.includes(infos[infoVariant].uri)) {
+                    var hover = participantComponent.createObject(root, {
+                                                                      x: Math.trunc(distantRenderer.getXOffset() + infos[infoVariant].x * distantRenderer.getScaledWidth()),
+                                                                      y: Math.trunc(distantRenderer.getYOffset() + infos[infoVariant].y * distantRenderer.getScaledHeight()),
+                                                                      width: Math.ceil(infos[infoVariant].w * distantRenderer.getScaledWidth()),
+                                                                      height: Math.ceil(infos[infoVariant].h * distantRenderer.getScaledHeight()),
+                                                                      visible: infos[infoVariant].w !== 0 && infos[infoVariant].h !== 0
+                                                                  })
+                    if (!hover) {
+                        console.log("Error when creating the hover")
+                        return
+                    }
+
+                    showMax = showMaximize(hover.x, hover.y, hover.width, hover.height)
+
+                    hover.setMenu(infos[infoVariant].uri, infos[infoVariant].bestName,
+                                  infos[infoVariant].isLocal, infos[infoVariant].active, showMax)
+                    if (infos[infoVariant].videoMuted)
+                        hover.setAvatar(true, infos[infoVariant].avatar, infos[infoVariant].uri, infos[infoVariant].isLocal, infos[infoVariant].isContact)
+                    else
+                        hover.setAvatar(false)
+                    participantOverlays.push(hover)
+                }
+            }
+        }
+    }
+}