lilith/jami-client-qt
1
0
Fork 0
mirror of https://git.jami.net/savoirfairelinux/jami-client-qt.git synced 2025-08-03 14:25:38 +02:00
Code Activity

mainOverlay: add mosaic button

Browse source 
Gitlab: #409

Change-Id: I65e1c91184a95453c10633340a74f50cc4de7032
This commit is contained in:
Ming Rui Zhang 2021-05-26 16:35:07 -04:00
parent 77aae84786
commit b6aadb1277
12 changed files with 215 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
images/icons/mozaic_black_24dp.svg Normal file
View file

@ -0,0 +1,11 @@
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 24.3.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
<style type="text/css">
.st0{fill:#231F20;}
</style>
<path class="st0" d="M20.5,1.5h-17c-1.1,0-2,0.9-2,2v17c0,1.1,0.9,2,2,2h17c1.1,0,2-0.9,2-2v-17C22.5,2.4,21.6,1.5,20.5,1.5z
M21.1,3.5v7.8h-8.4V2.9h7.8C20.8,2.9,21.1,3.2,21.1,3.5z M3.5,2.9h7.8v8.4H2.9V3.5C2.9,3.2,3.2,2.9,3.5,2.9z M2.9,20.5v-7.8h8.4
v8.4H3.5C3.2,21.1,2.9,20.8,2.9,20.5z M20.5,21.1h-7.8v-8.4h8.4v7.8C21.1,20.8,20.8,21.1,20.5,21.1z"/>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 755 B

1
resources.qrc
View file

@ -6,6 +6,7 @@
<file>images/jami_rolling_spinner.gif</file>
<file>images/icons/baseline-close-24px.svg</file>
<file>images/icons/cross_black_24dp.svg</file>
<file>images/icons/mozaic_black_24dp.svg</file>
<file>images/icons/baseline-done-24px.svg</file>
<file>images/icons/baseline-error_outline-24px.svg</file>
<file>projectcredits.html</file>

19
src/calladapter.cpp
View file

@ -629,6 +629,9 @@ CallAdapter::updateCallOverlay(const lrc::api::conversation::Info& convInfo)
bool isAudioMuted = call->audioMuted && (call->status != lrc::api::call::Status::PAUSED);
bool isVideoMuted = call->videoMuted && !isPaused && !call->isAudioOnly;
bool isRecording = isRecordingThisCall();
bool isConferenceCall = !convInfo.confId.isEmpty()
|| (convInfo.confId.isEmpty() && call->participantsInfos.size() != 0);
bool isGrid = call->layout == lrc::api::call::Layout::GRID;
auto bestName = convInfo.participants.isEmpty()
? QString()
: accInfo.contactModel->bestNameForContact(convInfo.participants[0]);
@ -639,6 +642,8 @@ CallAdapter::updateCallOverlay(const lrc::api::conversation::Info& convInfo)
isVideoMuted,
isRecording,
accInfo.profileInfo.type == lrc::api::profile::Type::SIP,
isConferenceCall,
isGrid,
bestName);
}
@ -712,6 +717,20 @@ CallAdapter::minimizeParticipant(const QString& uri)
}
}
void
CallAdapter::showGridConferenceLayout()
{
auto* callModel = lrcInstance_->getAccountInfo(accountId_).callModel.get();
const auto& convInfo
= lrcInstance_->getConversationFromConvUid(lrcInstance_->get_selectedConvUid(), accountId_);
auto confId = convInfo.confId;
if (confId.isEmpty())
confId = convInfo.callId;
callModel->setConferenceLayout(confId, lrc::api::call::Layout::GRID);
}
void
CallAdapter::hangUpThisCall()
{

3
src/calladapter.h
View file

@ -59,6 +59,7 @@ public:
Q_INVOKABLE void hangUpCall(const QString& callId);
Q_INVOKABLE void maximizeParticipant(const QString& uri);
Q_INVOKABLE void minimizeParticipant(const QString& uri);
Q_INVOKABLE void showGridConferenceLayout();
Q_INVOKABLE void hangUpThisCall();
Q_INVOKABLE bool isCurrentHost() const;
Q_INVOKABLE bool participantIsHost(const QString& uri) const;
@ -95,6 +96,8 @@ Q_SIGNALS:
bool isVideoMuted,
bool isRecording,
bool isSIP,
bool isConferenceCall,
bool isGrid,
const QString& bestName);
void remoteRecordingChanged(const QStringList& peers, bool state);
void eraseRemoteRecording();

7
src/commoncomponents/PhotoboothView.qml
View file

@ -240,9 +240,6 @@ ColumnLayout {
Layout.alignment: Qt.AlignHCenter
text: ""
font.pointSize: 10
font.kerning: true
imageColor: JamiTheme.textColor
toolTipText: JamiStrings.takePhoto
@ -284,10 +281,6 @@ ColumnLayout {
Layout.preferredHeight: JamiTheme.preferredFieldHeight
Layout.alignment: Qt.AlignHCenter
text: ""
font.pointSize: 10
font.kerning: true
radius: height / 6
source: "qrc:/images/icons/round-folder-24px.svg"

127
src/commoncomponents/PushButton.qml
View file

@ -37,17 +37,18 @@ AbstractButton {
// Shape will default to a 15px circle
// but can be sized accordingly.
property int preferredSize: 30
property int preferredWidth: preferredSize
property int preferredHeight: preferredSize
property int preferredMargin: 16
property alias textHAlign: textContent.horizontalAlignment
// Note the radius will default to preferredSize
property alias radius: background.radius
// Text properties
property alias buttonText: textContent.text
property alias buttonTextHeight: textContent.height
readonly property alias buttonTextWidth: textContent.width
property alias buttonTextFont: textContent.font
property alias buttonTextColor: textContent.color
property alias fontPointSize: textContent.font.pointSize
property alias textHAlign: textContent.horizontalAlignment
property bool buttonTextEnableElide: false
property string toolTipText: ""
@ -61,6 +62,8 @@ AbstractButton {
property int duration: JamiTheme.shortFadeDuration
// Image properties
property alias imageContainerWidth: image.containerWidth
property alias imageContainerHeight: image.containerHeight
property alias source: image.source
property var imageColor: null
property string normalImageSource
@ -81,6 +84,63 @@ AbstractButton {
ToolTip.visible: hovered && (toolTipText.length > 0)
ToolTip.text: toolTipText
ResponsiveImage {
id: image
anchors.centerIn: textContent.text ? undefined : root
anchors.left: textContent.text ? root.left : undefined
anchors.leftMargin: textContent.text ? preferredMargin : 0
anchors.verticalCenter: root.verticalCenter
containerHeight: preferredSize
containerWidth: preferredSize
source: {
if (checkable && checkedImageSource)
return checked ? checkedImageSource : normalImageSource
else
return normalImageSource
}
layer {
enabled: imageColor || checkedColor
effect: ColorOverlay {
id: overlay
color: {
if (checked && checkedImageColor)
return checkedImageColor
else if (imageColor)
return imageColor
else
return JamiTheme.transparentColor
}
}
// Mipmap does not render correctly on linux
mipmap: false
smooth: true
}
}
Text {
id: textContent
anchors.left: image.right
anchors.leftMargin: preferredMargin
anchors.verticalCenter: root.verticalCenter
anchors.right: buttonTextEnableElide ? root.right : undefined
anchors.rightMargin: preferredMargin
visible: text ? true : false
horizontalAlignment: Text.AlignHCenter
color: JamiTheme.primaryForegroundColor
font.kerning: true
font.pointSize: 9
elide: Qt.ElideRight
}
background: Rectangle {
id: background
@ -119,64 +179,5 @@ AbstractButton {
ColorAnimation { duration: root.duration }
}
]
ResponsiveImage {
id: image
containerWidth: preferredSize
containerHeight: preferredSize
anchors.verticalCenter: background.verticalCenter
anchors.horizontalCenter: textContent.text ? undefined : parent.horizontalCenter
anchors.left: textContent.text ? parent.left : undefined
anchors.leftMargin: preferredMargin
source: {
if (checkable && checkedImageSource)
return checked ? checkedImageSource : normalImageSource
else
return normalImageSource
}
layer {
enabled: imageColor || checkedColor
effect: ColorOverlay {
id: overlay
color: {
if (checked && checkedImageColor)
return checkedImageColor
else if (imageColor)
return imageColor
else
return JamiTheme.transparentColor
}
}
// Mipmap does not render correctly on linux
mipmap: false
smooth: true
}
}
Text {
id: textContent
anchors.left: {
if (image.source.toString() !== '')
return image.right
else
return background.left
}
anchors.leftMargin: preferredMargin
anchors.right: background.right
anchors.rightMargin: preferredMargin
anchors.verticalCenter: background.verticalCenter
horizontalAlignment: Text.AlignHCenter
color: JamiTheme.primaryForegroundColor
font.kerning: true
font.pointSize: 9
elide: Qt.ElideRight
}
}
}

1
src/constant/JamiStrings.qml
View file

@ -197,6 +197,7 @@ Item {
property string addParticipants: qsTr("Add participants")
property string chat: qsTr("Chat")
property string moreOptions: qsTr("More options")
property string mozaic: qsTr("Mozaic")
// CallViewContextMenu
property string hold: qsTr("Hold")

9
src/constant/JamiTheme.qml
View file

@ -91,6 +91,7 @@ Item {
property color acceptGreenTransparency: rgba256(11, 130, 113, 56)
property color refuseRed: rgba256(204, 0, 34, 100)
property color refuseRedTransparent: rgba256(204, 0, 34, 56)
property color mozaicButtonNormalColor: "#272727"
property color closeButtonLighterBlack: "#4c4c4c"
@ -204,6 +205,14 @@ Item {
property int participantCallInStatusFontSize: 9
property int participantCallInStatusTextWidthLimit: 100
property int participantCallInStatusTextWidth: 68
property int mozaicButtonRadius: 5
property int mozaicButtonPreferredMargin: 5
property real mozaicButtonOpacity: 0.77
property int mozaicButtonTextPreferredWidth: 40
property int mozaicButtonTextPreferredHeight: 16
property int mozaicButtonTextPointSize: 8
property int mozaicButtonPreferredWidth: 70
property int mozaicButtonMaxWidth: 100
property real maximumWidthSettingsView: 600
property real settingsHeaderpreferredHeight: 64

20
src/mainview/components/CallOverlay.qml
View file

@ -47,12 +47,17 @@ Item {
property bool isRecording
property bool isSIP
property bool isModerator
property bool isConferenceCall
property bool isGrid
property string bestName: ""
signal chatButtonClicked
onVisibleChanged: if (!visible) callViewContextMenu.close()
onVisibleChanged: {
if (!visible)
callViewContextMenu.close()
}
ParticipantsLayer {
id: __participantsLayer
@ -66,7 +71,8 @@ Item {
}
function updateUI(isPaused, isAudioOnly, isAudioMuted,
isVideoMuted, isRecording, isSIP) {
isVideoMuted, isRecording, isSIP,
isConferenceCall, isGrid) {
if (isPaused !== undefined) {
root.isPaused = isPaused
root.isAudioOnly = isAudioOnly
@ -74,9 +80,10 @@ Item {
root.isVideoMuted = isVideoMuted
root.isRecording = isRecording
root.isSIP = isSIP
root.isConferenceCall = isConferenceCall
root.isGrid = isGrid
mainOverlay.recordingVisible = isRecording
}
root.isModerator = CallAdapter.isCurrentModerator()
}
@ -110,13 +117,10 @@ Item {
label += ", "
i += 1
}
label += " " + ((peers.length > 1)? JamiStrings.areRecording
: JamiStrings.isRecording)
label += " " + ((peers.length > 1) ? JamiStrings.areRecording : JamiStrings.isRecording)
}
mainOverlay.remoteRecordingLabel = state ?
label :
JamiStrings.peerStoppedRecording
mainOverlay.remoteRecordingLabel = state ? label : JamiStrings.peerStoppedRecording
callViewContextMenu.peerIsRecording = state
mainOverlay.recordingVisible = callViewContextMenu.localIsRecording
|| callViewContextMenu.peerIsRecording

120
src/mainview/components/MainOverlay.qml
View file

@ -51,9 +51,10 @@ Item {
// (un)subscribe to an app-wide mouse move event trap filtered
// for the overlay's geometry
onVisibleChanged: visible ?
CallOverlayModel.registerFilter(appWindow, this) :
CallOverlayModel.unregisterFilter(appWindow, this)
onVisibleChanged: visible ? CallOverlayModel.registerFilter(
appWindow,
this) : CallOverlayModel.unregisterFilter(
appWindow, this)
Connections {
target: CallOverlayModel
@ -104,80 +105,117 @@ Item {
RowLayout {
anchors.fill: parent
spacing: 0
Text {
id: jamiBestNameText
Layout.alignment: Qt.AlignVCenter | Qt.AlignLeft
Layout.preferredWidth: overlayUpperPartRect.width / 3
Layout.preferredWidth: overlayUpperPartRect.width / 2
Layout.preferredHeight: 50
leftPadding: 16
font.pointSize: JamiTheme.textFontSize
leftPadding: 16
horizontalAlignment: Text.AlignLeft
verticalAlignment: Text.AlignVCenter
text: textMetricsjamiBestNameText.elidedText
color: "white"
TextMetrics {
id: textMetricsjamiBestNameText
font: jamiBestNameText.font
text: {
if (!root.isAudioOnly) {
if (remoteRecordingLabel === "") {
return root.bestName
} else {
return remoteRecordingLabel
}
font.pointSize: JamiTheme.textFontSize
text: {
if (!root.isAudioOnly) {
if (remoteRecordingLabel === "") {
return root.bestName
} else {
return remoteRecordingLabel
}
return ""
}
elideWidth: overlayUpperPartRect.width / 3
elide: Qt.ElideRight
return ""
}
color: JamiTheme.whiteColor
elide: Qt.ElideRight
}
PushButton {
id: mozaicButton
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
Layout.preferredWidth: JamiTheme.mozaicButtonPreferredWidth
Layout.preferredHeight: 30
Layout.rightMargin: 5
visible: isConferenceCall && !isGrid
preferredMargin: JamiTheme.mozaicButtonPreferredMargin
radius: JamiTheme.mozaicButtonRadius
opacity: JamiTheme.mozaicButtonOpacity
buttonText: JamiStrings.mozaic
buttonTextColor: JamiTheme.whiteColor
buttonTextHeight: JamiTheme.mozaicButtonTextPreferredHeight
buttonTextFont.weight: Font.DemiBold
buttonTextFont.pointSize: JamiTheme.mozaicButtonTextPointSize
textHAlign: Text.AlignLeft
imageColor: JamiTheme.whiteColor
imageContainerHeight: 20
imageContainerWidth: 20
source: "qrc:/images/icons/mozaic_black_24dp.svg"
normalColor: JamiTheme.mozaicButtonNormalColor
onButtonTextWidthChanged: {
if (buttonTextWidth > JamiTheme.mozaicButtonTextPreferredWidth) {
if (mozaicButton.Layout.preferredWidth + buttonTextWidth
- JamiTheme.mozaicButtonTextPreferredWidth
> JamiTheme.mozaicButtonMaxWidth) {
mozaicButton.Layout.preferredWidth = JamiTheme.mozaicButtonMaxWidth
buttonTextEnableElide = true
} else
mozaicButton.Layout.preferredWidth += buttonTextWidth
- JamiTheme.mozaicButtonTextPreferredWidth
}
}
onClicked: CallAdapter.showGridConferenceLayout()
}
Text {
id: callTimerText
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
Layout.preferredWidth: 64
Layout.minimumWidth: 64
Layout.preferredHeight: 48
Layout.rightMargin: recordingRect.visible?
0 : JamiTheme.preferredMarginSize
Layout.rightMargin: recordingRect.visible ? 0 : JamiTheme.preferredMarginSize
font.pointSize: JamiTheme.textFontSize
horizontalAlignment: Text.AlignRight
verticalAlignment: Text.AlignVCenter
text: textMetricscallTimerText.elidedText
color: "white"
TextMetrics {
id: textMetricscallTimerText
font: callTimerText.font
text: timeText
elideWidth: overlayUpperPartRect.width / 4
elide: Qt.ElideRight
}
text: timeText
color: JamiTheme.whiteColor
elide: Qt.ElideRight
}
Rectangle {
id: recordingRect
Layout.alignment: Qt.AlignVCenter | Qt.AlignRight
Layout.rightMargin: JamiTheme.preferredMarginSize
height: 16
width: 16
radius: height / 2
color: "red"
color: JamiTheme.recordIconColor
SequentialAnimation on color {
loops: Animation.Infinite
running: true
ColorAnimation {
from: "red"; to: "transparent";
from: JamiTheme.recordIconColor
to: "transparent"
duration: JamiTheme.recordBlinkDuration
}
ColorAnimation {
from: "transparent"; to: "red";
from: "transparent"
to: JamiTheme.recordIconColor
duration: JamiTheme.recordBlinkDuration
}
}
@ -206,5 +244,9 @@ Item {
height: 55
}
Behavior on opacity { NumberAnimation { duration: JamiTheme.overlayFadeDuration }}
Behavior on opacity {
NumberAnimation {
duration: JamiTheme.overlayFadeDuration
}
}
}

22
src/mainview/components/OngoingCallPage.qml
View file

@ -30,7 +30,7 @@ import net.jami.Constants 1.0
import "../../commoncomponents"
Rectangle {
Rectangle {
id: root
property var accountPeerPair: ["", ""]
@ -50,15 +50,17 @@ Rectangle {
onAccountPeerPairChanged: {
if (accountPeerPair[0] === "" || accountPeerPair[1] === "")
return;
return
contactImage.updateImage(accountPeerPair[1])
callOverlay.participantsLayer.update(CallAdapter.getConferencesInfos())
bestName = UtilsAdapter.getBestName(accountPeerPair[0], accountPeerPair[1])
bestName = UtilsAdapter.getBestName(accountPeerPair[0],
accountPeerPair[1])
var id = UtilsAdapter.getBestId(accountPeerPair[0], accountPeerPair[1])
bestId = (bestName !== id) ? id : ""
root.callId = UtilsAdapter.getCallId(accountPeerPair[0], accountPeerPair[1])
root.callId = UtilsAdapter.getCallId(accountPeerPair[0],
accountPeerPair[1])
}
function setLinkedWebview(webViewId) {
@ -262,11 +264,10 @@ Rectangle {
onPositionChanged: {
// Calculate mouse position relative change.
var delta = Qt.point(mouse.x - clickPos.x,
mouse.y - clickPos.y)
mouse.y - clickPos.y)
var deltaW = previewRenderer.x + delta.x + previewRenderer.width
var deltaH = previewRenderer.y + delta.y + previewRenderer.height
// Check if the previewRenderer exceeds the border of callPageMainRect.
if (deltaW < callPageMainRect.width
&& previewRenderer.x + delta.x > 1)
@ -303,11 +304,14 @@ Rectangle {
target: CallAdapter
function onUpdateOverlay(isPaused, isAudioOnly, isAudioMuted, isVideoMuted,
isRecording, isSIP, bestName) {
isRecording, isSIP, isConferenceCall, isGrid,
bestName) {
callOverlay.showOnHoldImage(isPaused)
audioCallPageRectCentralRect.visible = !isPaused && root.isAudioOnly
callOverlay.updateUI(isPaused, isAudioOnly, isAudioMuted, isVideoMuted,
isRecording, isSIP)
callOverlay.updateUI(isPaused, isAudioOnly,
isAudioMuted, isVideoMuted,
isRecording, isSIP,
isConferenceCall, isGrid)
root.bestName = bestName
callOverlay.participantsLayer.update(CallAdapter.getConferencesInfos())
}

2
src/settingsview/components/SettingsMenu.qml
View file

@ -78,7 +78,7 @@ Rectangle {
pressedColor: Qt.lighter(JamiTheme.pressedButtonColor, 1.25)
checkedColor: JamiTheme.selectedColor
hoveredColor: JamiTheme.hoverColor
fontPointSize: JamiTheme.textFontSize + 2
buttonTextFont.pointSize: JamiTheme.textFontSize + 2
duration: 0
textHAlign: Text.AlignLeft
preferredMargin: 24