Change avatar colors.

Reduce mosaic quality over 9 participants.
Move call quality button to top.
This commit is contained in:
Julien Wadel 2022-07-07 18:07:04 +02:00
parent 0b8e72710c
commit a690fad165
15 changed files with 101 additions and 79 deletions

View file

@ -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")

View file

@ -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 {

View file

@ -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);

View file

@ -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[];

View file

@ -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";

View file

@ -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

View file

@ -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

View file

@ -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()

View file

@ -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
}

View file

@ -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

View file

@ -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
}
}

View file

@ -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
}

View file

@ -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

View file

@ -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'

View file

@ -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