feat(Call): add a multimedia parameters dialog to select micro/speaker/camera device

assets/images/camera.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="14" viewBox="0 0 23 14">
+    <path fill="none" fill-rule="evenodd" stroke="#6B7A86" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M16.494 13V8.314l5.756 4.363V1.323l-5.756 4.363V1H.75v11.853L.923 13z"/>
+</svg>

assets/images/micro.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="26" viewBox="0 0 16 26">
+    <path fill="none" fill-rule="evenodd" stroke="#6B7A86" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.171 13.81c0 2.053 1.715 3.718 3.829 3.718 2.115 0 3.83-1.665 3.83-3.718V4.47C11.83 2.414 10.114.75 8 .75 5.886.75 4.17 2.415 4.17 4.47v9.34zM15.25 9.276v4.058c0 3.889-3.246 7.04-7.25 7.04m0 0v4.386-4.385zM5.744 25.25h4.513-4.513zM.75 9.276v4.058c0 3.889 3.246 7.04 7.25 7.04"/>
+</svg>

assets/images/speaker.svg

+<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20">
+    <path fill="none" fill-rule="evenodd" stroke="#6B7A86" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M.906 13.774h5.728L13.086 19V1L6.634 6.226H.75v7.548h.156zm15.354-2.006a2.585 2.585 0 0 0 0-3.7m2.464 5.186a4.663 4.663 0 0 0 0-6.672"/>
+</svg>

assets/languages/en.ts

@@ -961,6 +961,13 @@ your friend&apos;s SIP address or username.</translation>
         <translation>Play me!</translation>
     </message>
 </context>
+<context>
+    <name>MultimediaParameters</name>
+    <message>
+        <source>ok</source>
+        <translation>OK</translation>
+    </message>
+</context>
 <context>
     <name>Notifier</name>
     <message>

assets/languages/fr.ts

@@ -959,6 +959,13 @@ Cliquez ici : <a href="%1">%1</a>
         <translation>Joue-moi !</translation>
     </message>
 </context>
+<context>
+    <name>MultimediaParameters</name>
+    <message>
+        <source>ok</source>
+        <translation>OK</translation>
+    </message>
+</context>
 <context>
     <name>Notifier</name>
     <message>

resources.qrc

@@ -52,6 +52,7 @@
     <file>assets/images/camera_on_normal.svg</file>
     <file>assets/images/camera_on_pressed.svg</file>
     <file>assets/images/camera_on_updating.svg</file>
+    <file>assets/images/camera.svg</file>
     <file>assets/images/cancel_hovered.svg</file>
     <file>assets/images/cancel_normal.svg</file>
     <file>assets/images/cancel_pressed.svg</file>
@@ -132,6 +133,7 @@
     <file>assets/images/micro_on_hovered.svg</file>
     <file>assets/images/micro_on_normal.svg</file>
     <file>assets/images/micro_on_pressed.svg</file>
+    <file>assets/images/micro.svg</file>
     <file>assets/images/missed_incoming_call.svg</file>
     <file>assets/images/missed_outgoing_call.svg</file>
     <file>assets/images/new_call_hovered.svg</file>
@@ -178,6 +180,7 @@
     <file>assets/images/speaker_on_hovered.svg</file>
     <file>assets/images/speaker_on_normal.svg</file>
     <file>assets/images/speaker_on_pressed.svg</file>
+    <file>assets/images/speaker.svg</file>
     <file>assets/images/splash_screen.svg</file>
     <file>assets/images/tel_keypad_hovered.svg</file>
     <file>assets/images/tel_keypad_normal.svg</file>
@@ -380,6 +383,7 @@
     <file>ui/views/App/Calls/Dialogs/CallSipAddress.qml</file>
     <file>ui/views/App/Calls/Dialogs/CallTransfer.qml</file>
     <file>ui/views/App/Calls/Dialogs/ConferenceManager.qml</file>
+    <file>ui/views/App/Calls/Dialogs/MultimediaParameters.qml</file>
     <file>ui/views/App/Calls/EndedCall.qml</file>
     <file>ui/views/App/Calls/IncallAvatar.qml</file>
     <file>ui/views/App/Calls/IncallFullscreenWindow.qml</file>
@@ -437,6 +441,7 @@
     <file>ui/views/App/Styles/Calls/Dialogs/CallSipAddressStyle.qml</file>
     <file>ui/views/App/Styles/Calls/Dialogs/CallTransferStyle.qml</file>
     <file>ui/views/App/Styles/Calls/Dialogs/ConferenceManagerStyle.qml</file>
+    <file>ui/views/App/Styles/Calls/Dialogs/MultimediaParametersStyle.qml</file>
     <file>ui/views/App/Styles/Main/Assistant/ActivateLinphoneSipAccountWithEmailStyle.qml</file>
     <file>ui/views/App/Styles/Main/Assistant/ActivateLinphoneSipAccountWithPhoneNumberStyle.qml</file>
     <file>ui/views/App/Styles/Main/Assistant/AssistantAbstractViewStyle.qml</file>

ui/views/App/Calls/Dialogs/MultimediaParameters.qml

+import QtQuick 2.7
+import QtQuick.Layouts 1.3
+
+import Common 1.0
+import Linphone 1.0
+import Utils 1.0
+
+import App.Styles 1.0
+
+// =============================================================================
+
+DialogPlus {
+  buttons: [
+    TextButtonB {
+      text: qsTr('ok')
+
+      onClicked: exit(0)
+    }
+  ]
+
+  centeredButtons: true
+
+  height: MultimediaParametersStyle.height
+  width: MultimediaParametersStyle.width
+
+  // ---------------------------------------------------------------------------
+
+  Column {
+    anchors.fill: parent
+    spacing: MultimediaParametersStyle.column.spacing
+
+    RowLayout {
+      spacing: MultimediaParametersStyle.column.entry.spacing
+      width: parent.width
+
+      Icon {
+        icon: 'speaker'
+        iconSize: MultimediaParametersStyle.column.entry.iconSize
+      }
+
+      ComboBox {
+        Layout.fillWidth: true
+
+        currentIndex: Utils.findIndex(model, function (device) {
+          return device === SettingsModel.playbackDevice
+        })
+        model: SettingsModel.playbackDevices
+
+        onActivated: SettingsModel.playbackDevice = model[index]
+      }
+    }
+
+    RowLayout {
+      spacing: MultimediaParametersStyle.column.entry.spacing
+      width: parent.width
+
+      Icon {
+        icon: 'micro'
+        iconSize: MultimediaParametersStyle.column.entry.iconSize
+      }
+
+      ComboBox {
+        Layout.fillWidth: true
+
+        currentIndex: Utils.findIndex(model, function (device) {
+          return device === SettingsModel.captureDevice
+        })
+        model: SettingsModel.captureDevices
+
+        onActivated: SettingsModel.captureDevice = model[index]
+      }
+    }
+
+    RowLayout {
+      spacing: MultimediaParametersStyle.column.entry.spacing
+      width: parent.width
+
+      Icon {
+        icon: 'camera'
+        iconSize: MultimediaParametersStyle.column.entry.iconSize
+      }
+
+      ComboBox {
+        Layout.fillWidth: true
+
+        currentIndex: Number(Utils.findIndex(model, function (device) {
+          return device === SettingsModel.videoDevice
+        }))
+        model: SettingsModel.videoDevices
+
+        onActivated: SettingsModel.videoDevice = model[index]
+      }
+    }
+  }
+}

ui/views/App/Calls/Incall.js

@@ -52,6 +52,11 @@ function handleStatusChanged (status) {
 }
 
 function handleVideoRequested () {
+  if (window.virtualWindowVisible) {
+    call.rejectVideoRequest()
+    return
+  }
+
   var call = incall.call
 
   // Close dialog after 10s.
@@ -100,6 +105,10 @@ function openCallStatistics () {
   callStatistics.open()
 }
 
+function openMediaParameters () {
+  window.attachVirtualWindow(Qt.resolvedUrl('Dialogs/MultimediaParameters.qml'))
+}
+
 function showFullscreen () {
   if (incall._fullscreen) {
     return

ui/views/App/Calls/Incall.qml

@@ -354,9 +354,10 @@ Rectangle {
           Layout.preferredHeight: CallStyle.actionArea.iconSize
           Layout.preferredWidth: CallStyle.actionArea.iconSize
 
-          icon: 'options' // TODO: display options.
+          icon: 'options'
           iconSize: CallStyle.actionArea.iconSize
-          visible: false // TODO: V2
+
+          onClicked: Logic.openMediaParameters()
         }
       }
 

ui/views/App/Calls/IncallFullscreenWindow.qml

@@ -9,10 +9,12 @@ import Utils 1.0
 
 import App.Styles 1.0
 
+import 'Incall.js' as Logic
+
 // =============================================================================
 
 Window {
-  id: incall
+  id: window
 
   // ---------------------------------------------------------------------------
 
@@ -24,16 +26,16 @@ Window {
 
   function exit (cb) {
     // `exit` is called by `Incall.qml`.
-    // The `incall` id can be null if the window was closed in this view.
-    if (!incall) {
+    // The `window` id can be null if the window was closed in this view.
+    if (!window) {
       return
     }
 
     // It's necessary to call `showNormal` before close on MacOs
     // because the dock will be hidden forever!
-    incall.visible = false
-    incall.showNormal()
-    incall.close()
+    window.visible = false
+    window.showNormal()
+    window.close()
 
     if (cb) {
       cb()
@@ -43,15 +45,15 @@ Window {
   // ---------------------------------------------------------------------------
 
   Component.onCompleted: {
-    incall.call = caller.call
+    window.call = caller.call
     var show = function (visibility) {
       if (visibility === Window.Windowed) {
-        incall.visibilityChanged.disconnect(show)
-        incall.showFullScreen()
+        window.visibilityChanged.disconnect(show)
+        window.showFullScreen()
       }
     }
 
-    incall.visibilityChanged.connect(show)
+    window.visibilityChanged.connect(show)
   }
 
   visible: false
@@ -60,7 +62,7 @@ Window {
 
   Shortcut {
     sequence: StandardKey.Close
-    onActivated: incall.exit()
+    onActivated: window.exit()
   }
 
   // ---------------------------------------------------------------------------
@@ -70,13 +72,13 @@ Window {
     color: '#000000' // Not a style.
     focus: true
 
-    Keys.onEscapePressed: incall.exit()
+    Keys.onEscapePressed: window.exit()
 
     Loader {
       anchors.fill: parent
 
       active: {
-        var caller = incall.caller
+        var caller = window.caller
         return caller && !caller.cameraActivated
       }
 
@@ -86,7 +88,7 @@ Window {
         id: camera
 
         Camera {
-          call: incall.call
+          call: window.call
         }
       }
     }
@@ -191,7 +193,7 @@ Window {
           horizontalAlignment: Text.AlignHCenter
           verticalAlignment: Text.AlignVCenter
 
-          visible: !incall.hideButtons
+          visible: !window.hideButtons
 
           // Not a customizable style.
           color: 'white'
@@ -200,7 +202,7 @@ Window {
 
           Component.onCompleted: {
             var updateDuration = function () {
-              var call = incall.caller.call
+              var call = window.caller.call
               text = Utils.formatElapsedTime(call.duration)
               Utils.setTimeout(elapsedTime, 1000, updateDuration)
             }
@@ -249,7 +251,7 @@ Window {
           ActionButton {
             icon: 'fullscreen'
 
-            onClicked: incall.exit()
+            onClicked: window.exit()
           }
         }
       }
@@ -331,16 +333,17 @@ Window {
             iconSize: CallStyle.actionArea.iconSize
             updating: call.updating
 
-            onClicked: incall.exit(function () { call.videoEnabled = false })
+            onClicked: window.exit(function () { call.videoEnabled = false })
           }
 
           ActionButton {
             Layout.preferredHeight: CallStyle.actionArea.iconSize
             Layout.preferredWidth: CallStyle.actionArea.iconSize
+
             icon: 'options'
             iconSize: CallStyle.actionArea.iconSize
 
-            visible: false // TODO: V2
+            onClicked: Logic.openMediaParameters()
           }
         }
 
@@ -357,13 +360,13 @@ Window {
             icon: 'pause'
             updating: call.updating
 
-            onClicked: incall.exit(function () { call.pausedByUser = enabled })
+            onClicked: window.exit(function () { call.pausedByUser = enabled })
           }
 
           ActionButton {
             icon: 'hangup'
 
-            onClicked: incall.exit(call.terminate)
+            onClicked: window.exit(call.terminate)
           }
         }
       }
@@ -376,7 +379,7 @@ Window {
 
   Loader {
     active: {
-      var caller = incall.caller
+      var caller = window.caller
       return caller && !caller.cameraActivated
     }
 
@@ -389,21 +392,21 @@ Window {
         property bool scale: false
 
         function xPosition () {
-          return incall.width / 2 - width / 2
+          return window.width / 2 - width / 2
         }
 
         function yPosition () {
-          return incall.height - height
+          return window.height - height
         }
 
-        call: incall.call
+        call: window.call
         isPreview: true
 
         height: CallStyle.actionArea.userVideo.height * (scale ? 2 : 1)
         width: CallStyle.actionArea.userVideo.width * (scale ? 2 : 1)
 
         DragBox {
-          container: incall
+          container: window
           draggable: parent
 
           xPosition: parent.xPosition
@@ -422,7 +425,7 @@ Window {
   TelKeypad {
     id: telKeypad
 
-    call: incall.call
+    call: window.call
     visible: false
   }
 }

ui/views/App/Styles/Calls/Dialogs/MultimediaParametersStyle.qml

+pragma Singleton
+import QtQml 2.2
+
+// =============================================================================
+
+QtObject {
+  property int height: 262
+  property int width: 450
+
+  property QtObject column: QtObject {
+    property int spacing: 24
+
+    property QtObject entry: QtObject {
+      property int iconSize: 24
+      property int spacing: 10
+    }
+  }
+}

ui/views/App/Styles/qmldir

@@ -13,6 +13,7 @@ singleton ConferenceStyle                                1.0 Calls/ConferenceSty
 singleton CallSipAddressStyle                            1.0 Calls/Dialogs/CallSipAddressStyle.qml
 singleton CallTransferStyle                              1.0 Calls/Dialogs/CallTransferStyle.qml
 singleton ConferenceManagerStyle                         1.0 Calls/Dialogs/ConferenceManagerStyle.qml
+singleton MultimediaParametersStyle                      1.0 Calls/Dialogs/MultimediaParametersStyle.qml
 
 # Main Window ------------------------------------------------------------------