From 3aec3dc413c883af6348e70d4631dc01162d32e7 Mon Sep 17 00:00:00 2001 From: Ronan Abhamon Date: Mon, 13 Mar 2017 17:00:05 +0100 Subject: [PATCH] feat(ui/views/App/Calls/Incall): supports vu meter --- .../assets/images/camera_off_hovered.svg | 4 +- .../assets/images/camera_on_hovered.svg | 2 +- .../assets/images/chat_off_hovered.svg | 15 ---- .../assets/images/chat_off_normal.svg | 15 ---- .../assets/images/chat_off_pressed.svg | 15 ---- .../assets/images/chat_on_hovered.svg | 15 ---- .../assets/images/chat_on_normal.svg | 15 ---- .../assets/images/chat_on_pressed.svg | 15 ---- .../assets/images/speaker_off_hovered.svg | 9 ++- .../assets/images/speaker_off_normal.svg | 4 +- .../assets/images/speaker_off_pressed.svg | 5 +- .../assets/images/speaker_on_hovered.svg | 9 +-- .../assets/images/speaker_on_pressed.svg | 5 +- linphone-desktop/resources.qrc | 8 +- .../src/components/call/CallModel.cpp | 32 ++++++++ .../src/components/call/CallModel.hpp | 10 ++- .../ui/modules/Common/Indicators/VuMeter.qml | 78 +++++++++++++++++++ .../Common/Styles/Indicators/VuMeterStyle.qml | 37 +++++++++ .../ui/modules/Common/Styles/qmldir | 2 + .../Common/View/ScrollableListView.qml | 1 + linphone-desktop/ui/modules/Common/qmldir | 2 + linphone-desktop/ui/scripts/Utils/utils.js | 13 ---- .../ui/views/App/Calls/Incall.qml | 65 +++++++++++++--- .../ui/views/App/IncallFullscreenWindow.qml | 54 +++++++++++-- .../ui/views/App/Styles/Calls/CallStyle.qml | 6 +- 25 files changed, 289 insertions(+), 147 deletions(-) delete mode 100644 linphone-desktop/assets/images/chat_off_hovered.svg delete mode 100644 linphone-desktop/assets/images/chat_off_normal.svg delete mode 100644 linphone-desktop/assets/images/chat_off_pressed.svg delete mode 100644 linphone-desktop/assets/images/chat_on_hovered.svg delete mode 100644 linphone-desktop/assets/images/chat_on_normal.svg delete mode 100644 linphone-desktop/assets/images/chat_on_pressed.svg create mode 100644 linphone-desktop/ui/modules/Common/Indicators/VuMeter.qml create mode 100644 linphone-desktop/ui/modules/Common/Styles/Indicators/VuMeterStyle.qml diff --git a/linphone-desktop/assets/images/camera_off_hovered.svg b/linphone-desktop/assets/images/camera_off_hovered.svg index 61dcaf619..6ec1335ed 100644 --- a/linphone-desktop/assets/images/camera_off_hovered.svg +++ b/linphone-desktop/assets/images/camera_off_hovered.svg @@ -6,9 +6,9 @@ - + - \ No newline at end of file + diff --git a/linphone-desktop/assets/images/camera_on_hovered.svg b/linphone-desktop/assets/images/camera_on_hovered.svg index 44bc37a0b..59b356116 100644 --- a/linphone-desktop/assets/images/camera_on_hovered.svg +++ b/linphone-desktop/assets/images/camera_on_hovered.svg @@ -6,7 +6,7 @@ - + diff --git a/linphone-desktop/assets/images/chat_off_hovered.svg b/linphone-desktop/assets/images/chat_off_hovered.svg deleted file mode 100644 index 9bcf53e5a..000000000 --- a/linphone-desktop/assets/images/chat_off_hovered.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - chat_on - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/linphone-desktop/assets/images/chat_off_normal.svg b/linphone-desktop/assets/images/chat_off_normal.svg deleted file mode 100644 index 3fb74a0fa..000000000 --- a/linphone-desktop/assets/images/chat_off_normal.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - chat_off - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/linphone-desktop/assets/images/chat_off_pressed.svg b/linphone-desktop/assets/images/chat_off_pressed.svg deleted file mode 100644 index bb1ec9e89..000000000 --- a/linphone-desktop/assets/images/chat_off_pressed.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - chat_on_off_clic - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/linphone-desktop/assets/images/chat_on_hovered.svg b/linphone-desktop/assets/images/chat_on_hovered.svg deleted file mode 100644 index 3fb74a0fa..000000000 --- a/linphone-desktop/assets/images/chat_on_hovered.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - chat_off - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/linphone-desktop/assets/images/chat_on_normal.svg b/linphone-desktop/assets/images/chat_on_normal.svg deleted file mode 100644 index 9bcf53e5a..000000000 --- a/linphone-desktop/assets/images/chat_on_normal.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - chat_on - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/linphone-desktop/assets/images/chat_on_pressed.svg b/linphone-desktop/assets/images/chat_on_pressed.svg deleted file mode 100644 index bb1ec9e89..000000000 --- a/linphone-desktop/assets/images/chat_on_pressed.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - chat_on_off_clic - Created with Sketch. - - - - - - - - - - \ No newline at end of file diff --git a/linphone-desktop/assets/images/speaker_off_hovered.svg b/linphone-desktop/assets/images/speaker_off_hovered.svg index 0256a84ba..b8546381b 100644 --- a/linphone-desktop/assets/images/speaker_off_hovered.svg +++ b/linphone-desktop/assets/images/speaker_off_hovered.svg @@ -1,13 +1,14 @@ - speaker_on + speaker_off Created with Sketch. - - + + + - \ No newline at end of file + diff --git a/linphone-desktop/assets/images/speaker_off_normal.svg b/linphone-desktop/assets/images/speaker_off_normal.svg index ce2698b7e..b6f06a66d 100644 --- a/linphone-desktop/assets/images/speaker_off_normal.svg +++ b/linphone-desktop/assets/images/speaker_off_normal.svg @@ -6,9 +6,9 @@ - + - \ No newline at end of file + diff --git a/linphone-desktop/assets/images/speaker_off_pressed.svg b/linphone-desktop/assets/images/speaker_off_pressed.svg index bde08e696..ffe2b4f41 100644 --- a/linphone-desktop/assets/images/speaker_off_pressed.svg +++ b/linphone-desktop/assets/images/speaker_off_pressed.svg @@ -1,13 +1,14 @@ - speaker_on_clic + speaker_off_clic Created with Sketch. - + + \ No newline at end of file diff --git a/linphone-desktop/assets/images/speaker_on_hovered.svg b/linphone-desktop/assets/images/speaker_on_hovered.svg index ce2698b7e..5bee6cbda 100644 --- a/linphone-desktop/assets/images/speaker_on_hovered.svg +++ b/linphone-desktop/assets/images/speaker_on_hovered.svg @@ -1,14 +1,13 @@ - speaker_off + speaker_on Created with Sketch. - - + + - - \ No newline at end of file + diff --git a/linphone-desktop/assets/images/speaker_on_pressed.svg b/linphone-desktop/assets/images/speaker_on_pressed.svg index ffe2b4f41..bde08e696 100644 --- a/linphone-desktop/assets/images/speaker_on_pressed.svg +++ b/linphone-desktop/assets/images/speaker_on_pressed.svg @@ -1,14 +1,13 @@ - speaker_off_clic + speaker_on_clic Created with Sketch. - + - \ No newline at end of file diff --git a/linphone-desktop/resources.qrc b/linphone-desktop/resources.qrc index c63232605..8210dc876 100644 --- a/linphone-desktop/resources.qrc +++ b/linphone-desktop/resources.qrc @@ -43,12 +43,6 @@ assets/images/chat_error.svg assets/images/chat_hovered.svg assets/images/chat_normal.svg - assets/images/chat_off_hovered.svg - assets/images/chat_off_normal.svg - assets/images/chat_off_pressed.svg - assets/images/chat_on_hovered.svg - assets/images/chat_on_normal.svg - assets/images/chat_on_pressed.svg assets/images/chat_pressed.svg assets/images/chat_send.svg assets/images/chevron_green.svg @@ -212,6 +206,7 @@ ui/modules/Common/Helpers/InvertedMouseArea.qml ui/modules/Common/Image/Icon.qml ui/modules/Common/Image/RoundedImage.qml + ui/modules/Common/Indicators/VuMeter.qml ui/modules/Common/Menus/ActionMenuEntry.qml ui/modules/Common/Menus/ActionMenu.qml ui/modules/Common/Menus/Menu.qml @@ -252,6 +247,7 @@ ui/modules/Common/Styles/Form/Tab/TabButtonStyle.qml ui/modules/Common/Styles/Form/Tab/TabContainerStyle.qml ui/modules/Common/Styles/Form/TransparentTextInputStyle.qml + ui/modules/Common/Styles/Indicators/VuMeterStyle.qml ui/modules/Common/Styles/Menus/ActionMenuStyle.qml ui/modules/Common/Styles/Menus/MenuStyle.qml ui/modules/Common/Styles/Misc/CollapseStyle.qml diff --git a/linphone-desktop/src/components/call/CallModel.cpp b/linphone-desktop/src/components/call/CallModel.cpp index ff0d9208e..4496b7120 100644 --- a/linphone-desktop/src/components/call/CallModel.cpp +++ b/linphone-desktop/src/components/call/CallModel.cpp @@ -255,6 +255,8 @@ CallModel::CallStatus CallModel::getStatus () const { return m_linphone_call->getDir() == linphone::CallDirIncoming ? CallStatusIncoming : CallStatusOutgoing; } +// ----------------------------------------------------------------------------- + int CallModel::getDuration () const { return m_linphone_call->getDuration(); } @@ -263,6 +265,30 @@ float CallModel::getQuality () const { return m_linphone_call->getCurrentQuality(); } +// ----------------------------------------------------------------------------- + +#define VU_MIN (-20.f) +#define VU_MAX (4.f) + +inline float computeVu (float volume) { + if (volume < VU_MIN) + return 0.f; + if (volume > VU_MAX) + return 1.f; + + return (volume - VU_MIN) / (VU_MAX - VU_MIN); +} + +float CallModel::getMicroVu () const { + return computeVu(m_linphone_call->getRecordVolume()); +} + +float CallModel::getSpeakerVu () const { + return computeVu(m_linphone_call->getPlayVolume()); +} + +// ----------------------------------------------------------------------------- + bool CallModel::getMicroMuted () const { return !CoreManager::getInstance()->getCore()->micEnabled(); } @@ -276,6 +302,8 @@ void CallModel::setMicroMuted (bool status) { } } +// ----------------------------------------------------------------------------- + bool CallModel::getPausedByUser () const { return m_paused_by_user; } @@ -301,6 +329,8 @@ void CallModel::setPausedByUser (bool status) { m_linphone_call->resume(); } +// ----------------------------------------------------------------------------- + bool CallModel::getVideoEnabled () const { shared_ptr params = m_linphone_call->getCurrentParams(); return params && params->videoEnabled() && getStatus() == CallStatusConnected; @@ -324,6 +354,8 @@ void CallModel::setVideoEnabled (bool status) { m_linphone_call->update(params); } +// ----------------------------------------------------------------------------- + bool CallModel::getUpdating () const { switch (m_linphone_call->getState()) { case linphone::CallStateConnected: diff --git a/linphone-desktop/src/components/call/CallModel.hpp b/linphone-desktop/src/components/call/CallModel.hpp index 850081638..ef0e778e4 100644 --- a/linphone-desktop/src/components/call/CallModel.hpp +++ b/linphone-desktop/src/components/call/CallModel.hpp @@ -35,8 +35,12 @@ class CallModel : public QObject { Q_PROPERTY(CallStatus status READ getStatus NOTIFY statusChanged); Q_PROPERTY(bool isOutgoing READ isOutgoing CONSTANT); - Q_PROPERTY(int duration READ getDuration CONSTANT); // Constant but called with a timer in qml. - Q_PROPERTY(float quality READ getQuality CONSTANT); // Same idea. + + Q_PROPERTY(int duration READ getDuration CONSTANT); // Constants but called with a timer in qml. + Q_PROPERTY(float quality READ getQuality CONSTANT); + Q_PROPERTY(float microVu READ getMicroVu CONSTANT); + Q_PROPERTY(float speakerVu READ getSpeakerVu CONSTANT); + Q_PROPERTY(bool microMuted READ getMicroMuted WRITE setMicroMuted NOTIFY microMutedChanged); Q_PROPERTY(bool pausedByUser READ getPausedByUser WRITE setPausedByUser NOTIFY statusChanged); @@ -97,6 +101,8 @@ private: int getDuration () const; float getQuality () const; + float getMicroVu () const; + float getSpeakerVu () const; bool getMicroMuted () const; void setMicroMuted (bool status); diff --git a/linphone-desktop/ui/modules/Common/Indicators/VuMeter.qml b/linphone-desktop/ui/modules/Common/Indicators/VuMeter.qml new file mode 100644 index 000000000..938cf0ffa --- /dev/null +++ b/linphone-desktop/ui/modules/Common/Indicators/VuMeter.qml @@ -0,0 +1,78 @@ +import QtQuick 2.7 +import QtQuick.Controls 2.0 + +import Common.Styles 1.0 + +// ============================================================================= + +Column { + id: vuMeter + + property bool enabled: true + property double value: 0 + + height: VuMeterStyle.height + width: VuMeterStyle.width + + // --------------------------------------------------------------------------- + + ProgressBar { + id: high + + height: parent.height * 0.25 + width: parent.width + + from: 0.75 + to: 1.0 + + value: parent.value + + background: Rectangle { + color: vuMeter.enabled + ? VuMeterStyle.high.background.color.enabled + : VuMeterStyle.high.background.color.disabled + } + + contentItem: Item { + Rectangle { + anchors.bottom: parent.bottom + + color: VuMeterStyle.high.contentItem.color + height: high.visualPosition * parent.height + width: parent.width + + visible: vuMeter.enabled + } + } + } + + ProgressBar { + id: low + + height: parent.height * 0.75 + width: parent.width + + from: 0 + to: 0.75 + + value: parent.value + + background: Rectangle { + color: vuMeter.enabled + ? VuMeterStyle.low.background.color.enabled + : VuMeterStyle.low.background.color.disabled + } + + contentItem: Item { + Rectangle { + anchors.bottom: parent.bottom + + color: VuMeterStyle.low.contentItem.color + height: low.visualPosition * parent.height + width: parent.width + + visible: vuMeter.enabled + } + } + } +} diff --git a/linphone-desktop/ui/modules/Common/Styles/Indicators/VuMeterStyle.qml b/linphone-desktop/ui/modules/Common/Styles/Indicators/VuMeterStyle.qml new file mode 100644 index 000000000..85c999a5b --- /dev/null +++ b/linphone-desktop/ui/modules/Common/Styles/Indicators/VuMeterStyle.qml @@ -0,0 +1,37 @@ +pragma Singleton +import QtQuick 2.7 + +import Common 1.0 + +// ============================================================================= + +QtObject { + property int height: 40 + property int width: 5 + + property QtObject high: QtObject { + property QtObject background: QtObject { + property QtObject color: QtObject { + property color disabled: Colors.y + property color enabled: Colors.x + } + } + + property QtObject contentItem: QtObject { + property color color: Colors.s + } + } + + property QtObject low: QtObject { + property QtObject background: QtObject { + property QtObject color: QtObject { + property color disabled: Colors.y + property color enabled: Colors.x + } + } + + property QtObject contentItem: QtObject { + property color color: Colors.j + } + } +} diff --git a/linphone-desktop/ui/modules/Common/Styles/qmldir b/linphone-desktop/ui/modules/Common/Styles/qmldir index 9be7c90cf..ab7977193 100644 --- a/linphone-desktop/ui/modules/Common/Styles/qmldir +++ b/linphone-desktop/ui/modules/Common/Styles/qmldir @@ -38,6 +38,8 @@ singleton FormVGroupStyle 1.0 Form/Placements/FormVGroupStyle.qml singleton TabButtonStyle 1.0 Form/Tab/TabButtonStyle.qml singleton TabContainerStyle 1.0 Form/Tab/TabContainerStyle.qml +singleton VuMeterStyle 1.0 Indicators/VuMeterStyle.qml + singleton ActionMenuStyle 1.0 Menus/ActionMenuStyle.qml singleton MenuStyle 1.0 Menus/MenuStyle.qml diff --git a/linphone-desktop/ui/modules/Common/View/ScrollableListView.qml b/linphone-desktop/ui/modules/Common/View/ScrollableListView.qml index addd59e55..6e44297d3 100644 --- a/linphone-desktop/ui/modules/Common/View/ScrollableListView.qml +++ b/linphone-desktop/ui/modules/Common/View/ScrollableListView.qml @@ -33,6 +33,7 @@ ListView { // --------------------------------------------------------------------------- + // TODO: Find a solution at this bug => https://bugreports.qt.io/browse/QTBUG-31573 SequentialAnimation { id: scrollAnimation diff --git a/linphone-desktop/ui/modules/Common/qmldir b/linphone-desktop/ui/modules/Common/qmldir index 94ce2bb56..7db2eae05 100644 --- a/linphone-desktop/ui/modules/Common/qmldir +++ b/linphone-desktop/ui/modules/Common/qmldir @@ -56,6 +56,8 @@ InvertedMouseArea 1.0 Helpers/InvertedMouseArea.qml Icon 1.0 Image/Icon.qml RoundedImage 1.0 Image/RoundedImage.qml +VuMeter 1.0 Indicators/VuMeter.qml + ActionMenu 1.0 Menus/ActionMenu.qml ActionMenuEntry 1.0 Menus/ActionMenuEntry.qml Menu 1.0 Menus/Menu.qml diff --git a/linphone-desktop/ui/scripts/Utils/utils.js b/linphone-desktop/ui/scripts/Utils/utils.js index cf8407304..bb7dc2a2f 100644 --- a/linphone-desktop/ui/scripts/Utils/utils.js +++ b/linphone-desktop/ui/scripts/Utils/utils.js @@ -28,19 +28,6 @@ function clearTimeout (timer) { // ----------------------------------------------------------------------------- -// Connect a signal to a function only for one call. -function connectOnce (signal, cb) { - var func = function () { - signal.disconnect(func) - cb.apply(this, arguments) - } - - signal.connect(func) - return func -} - -// ----------------------------------------------------------------------------- - function encodeTextToQmlRichFormat (text, options) { var images = '' diff --git a/linphone-desktop/ui/views/App/Calls/Incall.qml b/linphone-desktop/ui/views/App/Calls/Incall.qml index b770007fe..de2f7bc02 100644 --- a/linphone-desktop/ui/views/App/Calls/Incall.qml +++ b/linphone-desktop/ui/views/App/Calls/Incall.qml @@ -286,24 +286,68 @@ Rectangle { verticalCenter: parent.verticalCenter } - rowSpacing: ActionBarStyle.spacing columns: incall.width < CallStyle.actionArea.lowWidth ? 2 : 4 + rowSpacing: ActionBarStyle.spacing - ActionSwitch { - enabled: !call.microMuted - icon: 'micro' - iconSize: CallStyle.actionArea.iconSize + Row { + spacing: CallStyle.actionArea.vu.spacing - onClicked: call.microMuted = enabled + VuMeter { + Timer { + interval: 50 + repeat: true + running: micro.enabled + + onTriggered: parent.value = call.microVu + } + + enabled: micro.enabled + } + + ActionSwitch { + id: micro + + enabled: !call.microMuted + icon: 'micro' + iconSize: CallStyle.actionArea.iconSize + + onClicked: call.microMuted = enabled + } + } + + Row { + spacing: CallStyle.actionArea.vu.spacing + + VuMeter { + Timer { + interval: 50 + repeat: true + running: speaker.enabled + + onTriggered: parent.value = call.speakerVu + } + + enabled: speaker.enabled + } + + ActionSwitch { + id: speaker + + enabled: true + icon: 'speaker' + iconSize: CallStyle.actionArea.iconSize + + onClicked: console.log('TODO') + } } ActionSwitch { - enabled: !call.videoEnabled + enabled: call.videoEnabled icon: 'camera' iconSize: CallStyle.actionArea.iconSize updating: call.updating - onClicked: call.videoEnabled = enabled + onClicked: call.videoEnabled = !enabled } ActionButton { @@ -360,12 +404,11 @@ Rectangle { onClicked: call.terminate() } - ActionSwitch { - enabled: window.chatIsOpened + ActionButton { icon: 'chat' onClicked: { - if (enabled) { + if (window.chatIsOpened) { window.closeChat() } else { window.openChat() diff --git a/linphone-desktop/ui/views/App/IncallFullscreenWindow.qml b/linphone-desktop/ui/views/App/IncallFullscreenWindow.qml index afadb0342..78a0c34c0 100644 --- a/linphone-desktop/ui/views/App/IncallFullscreenWindow.qml +++ b/linphone-desktop/ui/views/App/IncallFullscreenWindow.qml @@ -211,12 +211,56 @@ Window { rowSpacing: ActionBarStyle.spacing - ActionSwitch { - enabled: !call.microMuted - icon: 'micro' - iconSize: CallStyle.actionArea.iconSize + Row { + spacing: CallStyle.actionArea.vu.spacing - onClicked: call.microMuted = enabled + VuMeter { + Timer { + interval: 50 + repeat: true + running: micro.enabled + + onTriggered: parent.value = call.microVu + } + + enabled: micro.enabled + } + + ActionSwitch { + id: micro + + enabled: !call.microMuted + icon: 'micro' + iconSize: CallStyle.actionArea.iconSize + + onClicked: call.microMuted = enabled + } + } + + Row { + spacing: CallStyle.actionArea.vu.spacing + + VuMeter { + Timer { + interval: 50 + repeat: true + running: speaker.enabled + + onTriggered: parent.value = call.speakerVu + } + + enabled: speaker.enabled + } + + ActionSwitch { + id: speaker + + enabled: true + icon: 'speaker' + iconSize: CallStyle.actionArea.iconSize + + onClicked: console.log('TODO') + } } ActionSwitch { diff --git a/linphone-desktop/ui/views/App/Styles/Calls/CallStyle.qml b/linphone-desktop/ui/views/App/Styles/Calls/CallStyle.qml index d6b7d5f84..ebd3ca115 100644 --- a/linphone-desktop/ui/views/App/Styles/Calls/CallStyle.qml +++ b/linphone-desktop/ui/views/App/Styles/Calls/CallStyle.qml @@ -12,13 +12,17 @@ QtObject { property int height: 100 property int iconSize: 40 property int leftButtonsGroupMargin: 50 - property int lowWidth: 515 + property int lowWidth: 650 property int rightButtonsGroupMargin: 50 property QtObject userVideo: QtObject { property int height: 90 property int width: 130 } + + property QtObject vu: QtObject { + property int spacing: 5 + } } property QtObject container: QtObject {