From a690fad1653d3a48a302fd7c62669ca9d7e953a3 Mon Sep 17 00:00:00 2001 From: Julien Wadel Date: Thu, 7 Jul 2022 18:07:04 +0200 Subject: [PATCH] Change avatar colors. Reduce mosaic quality over 9 participants. Move call quality button to top. --- .../other/colors/ColorListModel.hpp | 9 ++- .../src/components/settings/SettingsModel.cpp | 7 +- .../src/components/settings/SettingsModel.hpp | 3 + linphone-app/src/utils/Constants.cpp | 1 + linphone-app/src/utils/Constants.hpp | 3 +- .../Linphone/Sticker/AvatarSticker.qml | 6 +- .../Linphone/Sticker/DecorationSticker.qml | 1 + .../ui/modules/Linphone/Sticker/Sticker.qml | 3 +- .../Styles/Sticker/AvatarStickerStyle.qml | 4 +- .../ui/views/App/Calls/VideoConference.qml | 65 ++++++++++--------- .../Calls/VideoConferenceActiveSpeaker.qml | 22 ++----- .../views/App/Calls/VideoConferenceGrid.qml | 8 ++- .../ui/views/App/Calls/WaitingRoom.qml | 3 +- .../App/Styles/Calls/VideoConferenceStyle.qml | 44 +++++++------ .../App/Styles/Calls/WaitingRoomStyle.qml | 1 - 15 files changed, 101 insertions(+), 79 deletions(-) diff --git a/linphone-app/src/components/other/colors/ColorListModel.hpp b/linphone-app/src/components/other/colors/ColorListModel.hpp index 662726ca7..15f90805e 100644 --- a/linphone-app/src/components/other/colors/ColorListModel.hpp +++ b/linphone-app/src/components/other/colors/ColorListModel.hpp @@ -115,9 +115,16 @@ class ColorListModel : public ProxyListModel { ADD_COLOR("event_in", "#96C11F", "Event colors that are incoming") ADD_COLOR("event_out", "#18A7AF", "Event colors that are outgoing") + ADD_COLOR("avatar_initials_bg", "#AFAFAF", "Avatar : Background for initials") + ADD_COLOR("avatar_initials_sticker_bg", "transparent", "Avatar : Sticker background for avatar initials") + ADD_COLOR("conference_entry_bg", "#D0D8DE", "Conferences : Background entry") - ADD_COLOR("conference_out_avatar_bg", "#A1A1A1", "Conferences: Background avatar") + + ADD_COLOR("conference_bg", "#798791", "Conferences: Background") + ADD_COLOR("conference_avatar_sticker_bg", "#A1A1A1", "Conferences : Background for sticker avatar") + ADD_COLOR("conference_avatar_initials_bg", "#798791", "Conferences : Background for avatar initials") + ADD_COLOR("fullscreen_conference_bg", "black", "Conferences: Fullscreen background") ADD_COLOR("validation", "#96C11F", "Background for validation on buttons") diff --git a/linphone-app/src/components/settings/SettingsModel.cpp b/linphone-app/src/components/settings/SettingsModel.cpp index c9a31be43..3326e8800 100644 --- a/linphone-app/src/components/settings/SettingsModel.cpp +++ b/linphone-app/src/components/settings/SettingsModel.cpp @@ -583,7 +583,12 @@ void SettingsModel::setVideoDefinition (const QVariantMap &definition) { bool SettingsModel::getVideoSupported () const { return CoreManager::getInstance()->getCore()->videoSupported(); } - +void SettingsModel::setHighMosaicQuality(){ + mConfig->setString("video", "max_mosaic_size", ""); +} +void SettingsModel::setLimitedMosaicQuality(){ + mConfig->setString("video", "max_mosaic_size", "vga"); +} // ----------------------------------------------------------------------------- bool SettingsModel::getShowVideoCodecs () const { diff --git a/linphone-app/src/components/settings/SettingsModel.hpp b/linphone-app/src/components/settings/SettingsModel.hpp index e2e86b40b..4e5a17e2a 100644 --- a/linphone-app/src/components/settings/SettingsModel.hpp +++ b/linphone-app/src/components/settings/SettingsModel.hpp @@ -353,6 +353,9 @@ public: QVariantList getSupportedVideoDefinitions () const; + Q_INVOKABLE void setHighMosaicQuality(); + Q_INVOKABLE void setLimitedMosaicQuality(); + QVariantMap getVideoDefinition () const; Q_INVOKABLE QVariantMap getCurrentPreviewVideoDefinition () const; void setVideoDefinition (const QVariantMap &definition); diff --git a/linphone-app/src/utils/Constants.cpp b/linphone-app/src/utils/Constants.cpp index 3d8364aa4..6f731186b 100644 --- a/linphone-app/src/utils/Constants.cpp +++ b/linphone-app/src/utils/Constants.cpp @@ -113,6 +113,7 @@ constexpr char Constants::PrivatePolicyUrl[]; constexpr char Constants::ContactUrl[]; constexpr char Constants::TranslationUrl[]; +constexpr int Constants::MaxMosaicParticipants; constexpr char Constants::LinphoneBZip2_exe[]; constexpr char Constants::LinphoneBZip2_dll[]; diff --git a/linphone-app/src/utils/Constants.hpp b/linphone-app/src/utils/Constants.hpp index ed9421046..0a34fdcb0 100644 --- a/linphone-app/src/utils/Constants.hpp +++ b/linphone-app/src/utils/Constants.hpp @@ -63,7 +63,7 @@ public: static constexpr char ContactUrl[] = "https://www.linphone.org/contact"; static constexpr char TranslationUrl[] = "https://weblate.linphone.org/projects/linphone-desktop/"; - + static constexpr int MaxMosaicParticipants = 9;// From 10, the mosaic quality will be limited to avoid useless computations static constexpr char LinphoneBZip2_exe[] = "https://www.linphone.org/releases/windows/tools/bzip2/bzip2.exe"; static constexpr char LinphoneBZip2_dll[] = "https://www.linphone.org/releases/windows/tools/bzip2/bzip2.dll"; @@ -79,6 +79,7 @@ public: Q_PROPERTY(QString PrivatePolicyUrl MEMBER PrivatePolicyUrl CONSTANT) Q_PROPERTY(QString ContactUrl MEMBER ContactUrl CONSTANT) Q_PROPERTY(QString TranslationUrl MEMBER TranslationUrl CONSTANT) + Q_PROPERTY(int maxMosaicParticipants MEMBER MaxMosaicParticipants CONSTANT) static constexpr char DefaultAssistantRegistrationUrl[] = "https://subscribe.linphone.org/register"; static constexpr char DefaultAssistantLoginUrl[] = "https://subscribe.linphone.org/login"; diff --git a/linphone-app/ui/modules/Linphone/Sticker/AvatarSticker.qml b/linphone-app/ui/modules/Linphone/Sticker/AvatarSticker.qml index 38b50ecc0..1172c9c97 100644 --- a/linphone-app/ui/modules/Linphone/Sticker/AvatarSticker.qml +++ b/linphone-app/ui/modules/Linphone/Sticker/AvatarSticker.qml @@ -22,11 +22,12 @@ DecorationSticker { property bool showCloseButton: false property bool showActiveSpeakerOverlay: true property real avatarRatio : 2/3 - property color color : AvatarStickerStyle.outBackgroundColor + property color color : AvatarStickerStyle.stickerBackgroundColor property alias image: avatar.image property alias username: avatar.username property alias avatarBackgroundColor: avatar.backgroundColor + property bool showAvatarBorder: false property alias showCustomButton: mainItem._showCustomButton property alias customButtonToggled: mainItem._customButtonToggled @@ -46,6 +47,9 @@ DecorationSticker { anchors.fill: parent color: mainItem.color radius: mainItem.radius + border.color: '#40000000' + border.width: mainItem.showAvatarBorder && !mainItem.speakingOverlayDisplayed? 1 : 0 + IncallAvatar { id: avatar anchors.centerIn: parent diff --git a/linphone-app/ui/modules/Linphone/Sticker/DecorationSticker.qml b/linphone-app/ui/modules/Linphone/Sticker/DecorationSticker.qml index 80dd24b19..10f19a878 100644 --- a/linphone-app/ui/modules/Linphone/Sticker/DecorationSticker.qml +++ b/linphone-app/ui/modules/Linphone/Sticker/DecorationSticker.qml @@ -17,6 +17,7 @@ import 'qrc:/ui/scripts/Utils/utils.js' as Utils Item{ id: mainItem default property alias _content: content.data + property alias speakingOverlayDisplayed: effect.visible property ParticipantDeviceModel _currentDevice property CallModel _callModel diff --git a/linphone-app/ui/modules/Linphone/Sticker/Sticker.qml b/linphone-app/ui/modules/Linphone/Sticker/Sticker.qml index 0497ff694..8ab66e191 100644 --- a/linphone-app/ui/modules/Linphone/Sticker/Sticker.qml +++ b/linphone-app/ui/modules/Linphone/Sticker/Sticker.qml @@ -37,8 +37,9 @@ Flipable{ property alias image: avatar.image property alias username: avatar.username property alias avatarBackgroundColor: avatar.avatarBackgroundColor - property alias avatarOutBackgroundColor: avatar.color + property alias avatarStickerBackgroundColor: avatar.color property alias avatarRatio: avatar.avatarRatio + property alias showAvatarBorder: avatar.showAvatarBorder signal videoDefinitionChanged() signal customButtonClicked() diff --git a/linphone-app/ui/modules/Linphone/Styles/Sticker/AvatarStickerStyle.qml b/linphone-app/ui/modules/Linphone/Styles/Sticker/AvatarStickerStyle.qml index 6fea676b4..f531a01db 100644 --- a/linphone-app/ui/modules/Linphone/Styles/Sticker/AvatarStickerStyle.qml +++ b/linphone-app/ui/modules/Linphone/Styles/Sticker/AvatarStickerStyle.qml @@ -10,7 +10,7 @@ import ColorsList 1.0 QtObject { property string sectionName: 'AvatarSticker' - property color outBackgroundColor: ColorsList.add(sectionName+'_out_bg', 'conference_out_avatar_bg').color - property color inBackgroundColor: ColorsList.add(sectionName+'_in_bg', 'conference_bg').color + property color stickerBackgroundColor: ColorsList.add(sectionName+'_out_bg', 'avatar_initials_sticker_bg').color + property color inBackgroundColor: ColorsList.add(sectionName+'_in_bg', 'avatar_initials_bg').color property int radius : 10 } diff --git a/linphone-app/ui/views/App/Calls/VideoConference.qml b/linphone-app/ui/views/App/Calls/VideoConference.qml index 6c3eb16a6..7beb9ebd8 100644 --- a/linphone-app/ui/views/App/Calls/VideoConference.qml +++ b/linphone-app/ui/views/App/Calls/VideoConference.qml @@ -117,8 +117,41 @@ Rectangle { isCustom: true backgroundRadius: width/2 colorSet: VideoConferenceStyle.buttons.dialpad + toggled: telKeypad.visible onClicked: telKeypad.visible = !telKeypad.visible } + ActionButton { + id: callQuality + + isCustom: true + backgroundRadius: width/2 + colorSet: VideoConferenceStyle.buttons.callQuality + icon: VideoConferenceStyle.buttons.callQuality.icon_0 + toggled: callStatistics.isOpen + + onClicked: callStatistics.isOpen ? callStatistics.close() : callStatistics.open() + Timer { + interval: 500 + repeat: true + running: true + triggeredOnStart: true + onTriggered: { + // Note: `quality` is in the [0, 5] interval and -1. + var quality = callModel.quality + if(quality > 4) + callQuality.icon = VideoConferenceStyle.buttons.callQuality.icon_4 + else if(quality > 3) + callQuality.icon = VideoConferenceStyle.buttons.callQuality.icon_3 + else if(quality > 2) + callQuality.icon = VideoConferenceStyle.buttons.callQuality.icon_2 + else if(quality > 1) + callQuality.icon = VideoConferenceStyle.buttons.callQuality.icon_1 + else + callQuality.icon = VideoConferenceStyle.buttons.callQuality.icon_0 + } + } + } + // Title ColumnLayout{ Layout.fillWidth: true @@ -436,37 +469,7 @@ Rectangle { rightMenu.showParticipantsMenu() } } - ActionButton { - id: callQuality - - isCustom: true - backgroundRadius: width/2 - colorSet: VideoConferenceStyle.buttons.callQuality - icon: VideoConferenceStyle.buttons.callQuality.icon_0 - toggled: callStatistics.isOpen - - onClicked: callStatistics.isOpen ? callStatistics.close() : callStatistics.open() - Timer { - interval: 500 - repeat: true - running: true - triggeredOnStart: true - onTriggered: { - // Note: `quality` is in the [0, 5] interval and -1. - var quality = callModel.quality - if(quality > 4) - callQuality.icon = VideoConferenceStyle.buttons.callQuality.icon_4 - else if(quality > 3) - callQuality.icon = VideoConferenceStyle.buttons.callQuality.icon_3 - else if(quality > 2) - callQuality.icon = VideoConferenceStyle.buttons.callQuality.icon_2 - else if(quality > 1) - callQuality.icon = VideoConferenceStyle.buttons.callQuality.icon_1 - else - callQuality.icon = VideoConferenceStyle.buttons.callQuality.icon_0 - } - } - } + ActionButton{ isCustom: true backgroundRadius: width/2 diff --git a/linphone-app/ui/views/App/Calls/VideoConferenceActiveSpeaker.qml b/linphone-app/ui/views/App/Calls/VideoConferenceActiveSpeaker.qml index 2236802b5..e605eef38 100644 --- a/linphone-app/ui/views/App/Calls/VideoConferenceActiveSpeaker.qml +++ b/linphone-app/ui/views/App/Calls/VideoConferenceActiveSpeaker.qml @@ -52,23 +52,9 @@ Item { showCloseButton: false showActiveSpeakerOverlay: false // This is an active speaker. We don't need to show the indicator. showCustomButton: false + avatarStickerBackgroundColor: VideoConferenceStyle.container.avatar.stickerBackgroundColor + avatarBackgroundColor: VideoConferenceStyle.container.avatar.backgroundColor } - /* - CameraView{ - id: cameraView - callModel: mainItem.callModel - //enabled: mainItem.cameraEnabled - isCameraFromDevice: false - isPreview: false - anchors.fill: parent - anchors.leftMargin: isRightReducedLayout || isLeftReducedLayout? 30 : 140 - anchors.rightMargin: isRightReducedLayout ? 10 : 140 - isPaused: (callModel && callModel.pausedByUser) || (currentDevice && currentDevice.isPaused) //callModel.pausedByUser - showCloseButton: false - showActiveSpeakerOverlay: false // This is an active speaker. We don't need to show the indicator. - //color: callModel && callModel.isConference ? 'black' : 'transparent' - //color: 'black' - }*/ ScrollableListView{ id: miniViews anchors.right: parent.right @@ -104,7 +90,9 @@ Item { isPaused: mainItem.callModel.pausedByUser || currentDevice && currentDevice.isPaused showCloseButton: false showCustomButton: false - + showAvatarBorder: true + avatarStickerBackgroundColor: VideoConferenceStyle.container.avatar.stickerBackgroundColor + avatarBackgroundColor: VideoConferenceStyle.container.avatar.backgroundColor //onCloseRequested: mainItem.showMe = false } } diff --git a/linphone-app/ui/views/App/Calls/VideoConferenceGrid.qml b/linphone-app/ui/views/App/Calls/VideoConferenceGrid.qml index c5e7c14a4..d2064212f 100644 --- a/linphone-app/ui/views/App/Calls/VideoConferenceGrid.qml +++ b/linphone-app/ui/views/App/Calls/VideoConferenceGrid.qml @@ -11,7 +11,7 @@ import UtilsCpp 1.0 import App.Styles 1.0 - +import ConstantsCpp 1.0 // Temp import 'Incall.js' as Logic import 'qrc:/ui/scripts/Utils/utils.js' as Utils @@ -23,7 +23,11 @@ Mosaic { property alias callModel: participantDevices.callModel property bool cameraEnabled: true property int participantCount: gridModel.count + squaredDisplay: true + + // On grid view, we limit the quality if there are enough participants + onParticipantCountChanged: participantCount > ConstantsCpp.maxMosaicParticipants ? SettingsModel.setLimitedMosaicQuality() : SettingsModel.setHighMosaicQuality() delegateModel: DelegateModel{ id: gridModel @@ -55,6 +59,8 @@ Mosaic { isPaused: grid.callModel.pausedByUser || avatarCell.currentDevice && avatarCell.currentDevice.isPaused showCloseButton: false showCustomButton: false + avatarStickerBackgroundColor: VideoConferenceStyle.container.avatar.stickerBackgroundColor + avatarBackgroundColor: VideoConferenceStyle.container.avatar.backgroundColor //onCloseRequested: participantDevices.showMe = false } diff --git a/linphone-app/ui/views/App/Calls/WaitingRoom.qml b/linphone-app/ui/views/App/Calls/WaitingRoom.qml index 363ef0bc3..0faa9dda1 100644 --- a/linphone-app/ui/views/App/Calls/WaitingRoom.qml +++ b/linphone-app/ui/views/App/Calls/WaitingRoom.qml @@ -138,8 +138,7 @@ Rectangle { image: mainItem._sipAddressObserver && mainItem._sipAddressObserver.contact && mainItem._sipAddressObserver.contact.vcard.avatar username: mainItem.conferenceInfoModel ? mainItem.conferenceInfoModel.subject : (mainItem._sipAddressObserver ? UtilsCpp.getDisplayName(mainItem._sipAddressObserver.peerAddress) : '') - avatarRatio: 1 - avatarBackgroundColor: WaitingRoomStyle.avatar.backgroundColor + avatarRatio: 2/3 showCustomButton: true customButtonColorSet : WaitingRoomStyle.buttons.options diff --git a/linphone-app/ui/views/App/Styles/Calls/VideoConferenceStyle.qml b/linphone-app/ui/views/App/Styles/Calls/VideoConferenceStyle.qml index 20250675a..ec4456b19 100644 --- a/linphone-app/ui/views/App/Styles/Calls/VideoConferenceStyle.qml +++ b/linphone-app/ui/views/App/Styles/Calls/VideoConferenceStyle.qml @@ -88,7 +88,9 @@ QtObject { property int margins: 15 property QtObject avatar: QtObject { - property color backgroundColor: ColorsList.add(sectionName+'_container_avatar_bg', 'n').color + property color stickerBackgroundColor: ColorsList.add(sectionName+'_container_avatar_sticker_bg', 'conference_avatar_sticker_bg').color + property color backgroundColor: ColorsList.add(sectionName+'_container_avatar_initials_bg', 'conference_avatar_initials_bg').color + property int maxSize: 300 } @@ -169,9 +171,29 @@ QtObject { property color backgroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_n', icon, 's_n_b_bg').color property color backgroundHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_h', icon, 's_h_b_bg').color property color backgroundPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_p', icon, 's_p_b_bg').color + property color backgroundUpdatingColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_c', icon, 's_p_b_bg').color property color foregroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_n', icon, 's_n_b_fg').color property color foregroundHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_h', icon, 's_h_b_fg').color property color foregroundPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_p', icon, 's_p_b_fg').color + property color foregroundUpdatingColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_c', icon, 's_p_b_fg').color + } + property QtObject callQuality: QtObject { + property int iconSize: 40 + property string name : 'quality' + property string icon_0 : 'call_quality_0_custom' + property string icon_1 : 'call_quality_1_custom' + property string icon_2 : 'call_quality_2_custom' + property string icon_3 : 'call_quality_3_custom' + property string icon_4 : 'call_quality_4_custom' + + property color backgroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_n', icon_2, 's_n_b_bg').color + property color backgroundHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_h', icon_2, 's_h_b_bg').color + property color backgroundPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_p', icon_2, 's_p_b_bg').color + property color backgroundUpdatingColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_c', icon_2, 's_p_b_bg').color + property color foregroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_n', icon_2, 's_n_b_fg').color + property color foregroundHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_h', icon_2, 's_h_b_fg').color + property color foregroundPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_p', icon_2, 's_p_b_fg').color + property color foregroundUpdatingColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_c', icon_2, 's_p_b_fg').color } property QtObject screenSharing: QtObject { property int iconSize: 40 @@ -395,25 +417,7 @@ QtObject { property color foregroundPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_p', icon, 'me_p_b_inv_fg').color property color foregroundUpdatingColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_c', icon, 'me_c_b_inv_fg').color } - property QtObject callQuality: QtObject { - property int iconSize: 40 - property string name : 'quality' - property string icon_0 : 'call_quality_0_custom' - property string icon_1 : 'call_quality_1_custom' - property string icon_2 : 'call_quality_2_custom' - property string icon_3 : 'call_quality_3_custom' - property string icon_4 : 'call_quality_4_custom' - property color backgroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_n', icon_2, 'me_n_b_inv_bg').color - property color backgroundDisabledColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_d', icon_2, 'me_d_b_inv_bg').color - property color backgroundHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_h', icon_2, 'me_h_b_inv_bg').color - property color backgroundPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_p', icon_2, 'me_p_b_inv_bg').color - property color backgroundUpdatingColor : ColorsList.addImageColor(sectionName+'_'+name+'_bg_c', icon_2, 'me_c_b_inv_bg').color - property color foregroundNormalColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_n', icon_2, 'me_n_b_inv_fg').color - property color foregroundDisabledColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_d', icon_2, 'me_d_b_inv_fg').color - property color foregroundHoveredColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_h', icon_2, 'me_h_b_inv_fg').color - property color foregroundPressedColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_p', icon_2, 'me_p_b_inv_fg').color - property color foregroundUpdatingColor : ColorsList.addImageColor(sectionName+'_'+name+'_fg_c', icon_2, 'me_c_b_inv_fg').color - } + property QtObject options: QtObject { property int iconSize: 40 property string icon : 'menu_vdots_custom' diff --git a/linphone-app/ui/views/App/Styles/Calls/WaitingRoomStyle.qml b/linphone-app/ui/views/App/Styles/Calls/WaitingRoomStyle.qml index b6ecc4594..3ed1c8873 100644 --- a/linphone-app/ui/views/App/Styles/Calls/WaitingRoomStyle.qml +++ b/linphone-app/ui/views/App/Styles/Calls/WaitingRoomStyle.qml @@ -144,7 +144,6 @@ QtObject { } } property QtObject avatar: QtObject { - property color backgroundColor: ColorsList.add(sectionName+'_container_avatar_bg', 'n').color property int maxSize: 300 } // Button colors