Skip to content
Snippets Groups Projects
Commit 4adc59ad authored by Ming Rui Zhang's avatar Ming Rui Zhang Committed by Andreas Traczyk
Browse files

mainview: add call recording and full screen mode in audio call 

Call view context menu now should always has menu items in audio call

Gitlab: #125
Change-Id: I9bea26d1f95d898c12d8ac2149545273b1494447
parent 695dff39
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
qml.qrc
+ 1
− 1
View file @ 4adc59ad
...@@ -115,7 +115,7 @@ ...@@ -115,7 +115,7 @@
<file>src/mainview/js/selectscreenwindowcreation.js</file> <file>src/mainview/js/selectscreenwindowcreation.js</file>
<file>src/mainview/components/ScreenRubberBand.qml</file> <file>src/mainview/components/ScreenRubberBand.qml</file>
<file>src/mainview/js/screenrubberbandcreation.js</file> <file>src/mainview/js/screenrubberbandcreation.js</file>
<file>src/mainview/js/videocallfullscreenwindowcontainercreation.js</file> <file>src/mainview/js/callfullscreenwindowcontainercreation.js</file>
<file>src/mainview/components/VideoCallFullScreenWindowContainer.qml</file> <file>src/mainview/components/VideoCallFullScreenWindowContainer.qml</file>
<file>src/mainview/components/ContactPicker.qml</file> <file>src/mainview/components/ContactPicker.qml</file>
<file>src/mainview/components/MediaHandlerPicker.qml</file> <file>src/mainview/components/MediaHandlerPicker.qml</file>
......
src/mainview/components/AudioCallPage.qml
+ 106
− 93
View file @ 4adc59ad
...@@ -34,6 +34,8 @@ Rectangle { ...@@ -34,6 +34,8 @@ Rectangle {
property var linkedWebview: null property var linkedWebview: null
signal showFullScreenReqested
function updateUI(accountId, convUid) { function updateUI(accountId, convUid) {
contactImgSource = "data:image/png;base64," + UtilsAdapter.getContactImageString( contactImgSource = "data:image/png;base64," + UtilsAdapter.getContactImageString(
accountId, convUid) accountId, convUid)
...@@ -87,135 +89,146 @@ Rectangle { ...@@ -87,135 +89,146 @@ Rectangle {
SplitView.minimumHeight: audioCallPageRect.height / 2 + 20 SplitView.minimumHeight: audioCallPageRect.height / 2 + 20
SplitView.fillWidth: true SplitView.fillWidth: true
CallOverlay { MouseArea {
id: audioCallOverlay
anchors.fill: parent anchors.fill: parent
Connections { hoverEnabled: true
target: CallAdapter propagateComposedEvents: true
function onUpdateTimeText(time) { acceptedButtons: Qt.LeftButton
audioCallOverlay.timeText = time
}
function onUpdateOverlay(isPaused, isAudioOnly, isAudioMuted, isVideoMuted, isRecording, isSIP, isConferenceCall, bestName) { onDoubleClicked: showFullScreenReqested()
audioCallOverlay.showOnHoldImage(isPaused)
audioCallPageRectCentralRect.visible = !isPaused CallOverlay {
audioCallOverlay.updateButtonStatus(isPaused, id: audioCallOverlay
isAudioOnly,
isAudioMuted, anchors.fill: parent
isVideoMuted,
isRecording, isSIP, Connections {
isConferenceCall) target: CallAdapter
audioCallPageRect.bestName = bestName
} function onUpdateTimeText(time) {
audioCallOverlay.timeText = time
audioCallOverlay.setRecording(CallAdapter.isRecordingThisCall())
}
function onUpdateOverlay(isPaused, isAudioOnly, isAudioMuted, isVideoMuted, isRecording, isSIP, isConferenceCall, bestName) {
audioCallOverlay.showOnHoldImage(isPaused)
audioCallPageRectCentralRect.visible = !isPaused
audioCallOverlay.updateButtonStatus(isPaused,
isAudioOnly,
isAudioMuted,
isVideoMuted,
isRecording, isSIP,
isConferenceCall)
audioCallPageRect.bestName = bestName
}
function onShowOnHoldLabel(isPaused) { function onShowOnHoldLabel(isPaused) {
audioCallOverlay.showOnHoldImage(isPaused) audioCallOverlay.showOnHoldImage(isPaused)
audioCallPageRectCentralRect.visible = !isPaused audioCallPageRectCentralRect.visible = !isPaused
}
} }
}
onOverlayChatButtonClicked: { onOverlayChatButtonClicked: {
if (inAudioCallMessageWebViewStack.visible) { if (inAudioCallMessageWebViewStack.visible) {
linkedWebview.resetMessagingHeaderBackButtonSource( linkedWebview.resetMessagingHeaderBackButtonSource(
true) true)
linkedWebview.setMessagingHeaderButtonsVisible( linkedWebview.setMessagingHeaderButtonsVisible(
true) true)
inAudioCallMessageWebViewStack.visible = false inAudioCallMessageWebViewStack.visible = false
inAudioCallMessageWebViewStack.clear() inAudioCallMessageWebViewStack.clear()
} else { } else {
linkedWebview.resetMessagingHeaderBackButtonSource( linkedWebview.resetMessagingHeaderBackButtonSource(
false) false)
linkedWebview.setMessagingHeaderButtonsVisible( linkedWebview.setMessagingHeaderButtonsVisible(
false) false)
inAudioCallMessageWebViewStack.visible = true inAudioCallMessageWebViewStack.visible = true
inAudioCallMessageWebViewStack.push( inAudioCallMessageWebViewStack.push(
linkedWebview) linkedWebview)
}
} }
} }
}
Rectangle { Rectangle {
id: audioCallPageRectCentralRect id: audioCallPageRectCentralRect
anchors.centerIn: parent anchors.centerIn: parent
width: audioCallPageRect.width width: audioCallPageRect.width
height: audioCallPageRegisteredNameText.height height: audioCallPageRegisteredNameText.height
+ audioCallPageIdText.height + contactImage.height + 10 + audioCallPageIdText.height + contactImage.height + 10
ColumnLayout { ColumnLayout {
id: audioCallPageRectColumnLayout id: audioCallPageRectColumnLayout
Image { Image {
id: contactImage id: contactImage
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
Layout.preferredWidth: 100 Layout.preferredWidth: 100
Layout.preferredHeight: 100 Layout.preferredHeight: 100
fillMode: Image.PreserveAspectFit fillMode: Image.PreserveAspectFit
source: contactImgSource source: contactImgSource
asynchronous: true asynchronous: true
} }
Text { Text {
id: audioCallPageRegisteredNameText id: audioCallPageRegisteredNameText
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
Layout.preferredWidth: audioCallPageRectCentralRect.width Layout.preferredWidth: audioCallPageRectCentralRect.width
Layout.preferredHeight: 50 Layout.preferredHeight: 50
font.pointSize: JamiTheme.textFontSize + 3 font.pointSize: JamiTheme.textFontSize + 3
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
text: textMetricsAudioCallPageRegisteredNameText.elidedText text: textMetricsAudioCallPageRegisteredNameText.elidedText
color: "white" color: "white"
TextMetrics { TextMetrics {
id: textMetricsAudioCallPageRegisteredNameText id: textMetricsAudioCallPageRegisteredNameText
font: audioCallPageRegisteredNameText.font font: audioCallPageRegisteredNameText.font
text: bestName text: bestName
elideWidth: audioCallPageRectCentralRect.width - 50 elideWidth: audioCallPageRectCentralRect.width - 50
elide: Qt.ElideMiddle elide: Qt.ElideMiddle
}
} }
}
Text { Text {
id: audioCallPageIdText id: audioCallPageIdText
Layout.alignment: Qt.AlignCenter Layout.alignment: Qt.AlignCenter
Layout.preferredWidth: audioCallPageRectCentralRect.width Layout.preferredWidth: audioCallPageRectCentralRect.width
Layout.preferredHeight: 30 Layout.preferredHeight: 30
font.pointSize: JamiTheme.textFontSize font.pointSize: JamiTheme.textFontSize
horizontalAlignment: Text.AlignHCenter horizontalAlignment: Text.AlignHCenter
verticalAlignment: Text.AlignVCenter verticalAlignment: Text.AlignVCenter
text: textMetricsAudioCallPageIdText.elidedText text: textMetricsAudioCallPageIdText.elidedText
color: "white" color: "white"
TextMetrics { TextMetrics {
id: textMetricsAudioCallPageIdText id: textMetricsAudioCallPageIdText
font: audioCallPageIdText.font font: audioCallPageIdText.font
text: bestId text: bestId
elideWidth: audioCallPageRectCentralRect.width - 50 elideWidth: audioCallPageRectCentralRect.width - 50
elide: Qt.ElideMiddle elide: Qt.ElideMiddle
}
} }
} }
}
color: "transparent" color: "transparent"
}
} }
color: "transparent" color: "transparent"
} }
......
src/mainview/components/CallStackView.qml
+ 21
− 16
View file @ 4adc59ad
...@@ -25,7 +25,7 @@ import net.jami.Models 1.0 ...@@ -25,7 +25,7 @@ import net.jami.Models 1.0
import net.jami.Adapters 1.0 import net.jami.Adapters 1.0
import "../js/incomingcallpagecreation.js" as IncomingCallPageCreation import "../js/incomingcallpagecreation.js" as IncomingCallPageCreation
import "../js/videocallfullscreenwindowcontainercreation.js" as VideoCallFullScreenWindowContainerCreation import "../js/callfullscreenwindowcontainercreation.js" as CallFullScreenWindowContainerCreation
Rectangle { Rectangle {
id: callStackViewWindow id: callStackViewWindow
...@@ -50,7 +50,7 @@ Rectangle { ...@@ -50,7 +50,7 @@ Rectangle {
// Close potential window, context menu releated windows. // Close potential window, context menu releated windows.
audioCallPage.closeContextMenuAndRelatedWindows() audioCallPage.closeContextMenuAndRelatedWindows()
VideoCallFullScreenWindowContainerCreation.closeVideoCallFullScreenWindowContainer() CallFullScreenWindowContainerCreation.closeVideoCallFullScreenWindowContainer()
videoCallPage.closeContextMenuAndRelatedWindows() videoCallPage.closeContextMenuAndRelatedWindows()
} }
...@@ -120,6 +120,20 @@ Rectangle { ...@@ -120,6 +120,20 @@ Rectangle {
videoCallPage.setDistantRendererId(callId) videoCallPage.setDistantRendererId(callId)
} }
function toogleFullScreen(callPage){
callPage.isFullscreen = !callPage.isFullscreen
CallFullScreenWindowContainerCreation.createvideoCallFullScreenWindowContainerObject()
if (!CallFullScreenWindowContainerCreation.checkIfVisible()) {
CallFullScreenWindowContainerCreation.setAsContainerChild(
callPage)
CallFullScreenWindowContainerCreation.showVideoCallFullScreenWindowContainer()
} else {
callPage.parent = callStackMainView
CallFullScreenWindowContainerCreation.closeVideoCallFullScreenWindowContainer()
}
}
Connections { Connections {
target: CallAdapter target: CallAdapter
...@@ -168,6 +182,9 @@ Rectangle { ...@@ -168,6 +182,9 @@ Rectangle {
id: audioCallPage id: audioCallPage
property int stackNumber: 0 property int stackNumber: 0
property bool isFullscreen: false
onShowFullScreenReqested: toogleFullScreen(this)
} }
OutgoingCallPage { OutgoingCallPage {
...@@ -186,20 +203,8 @@ Rectangle { ...@@ -186,20 +203,8 @@ Rectangle {
property int stackNumber: 2 property int stackNumber: 2
property bool isFullscreen: false property bool isFullscreen: false
onNeedToShowInFullScreen: { onShowFullScreenReqested: {
toogleFullScreen(this)
isFullscreen = !isFullscreen
VideoCallFullScreenWindowContainerCreation.createvideoCallFullScreenWindowContainerObject()
if (!VideoCallFullScreenWindowContainerCreation.checkIfVisible()) {
VideoCallFullScreenWindowContainerCreation.setAsContainerChild(
videoCallPage)
VideoCallFullScreenWindowContainerCreation.showVideoCallFullScreenWindowContainer()
} else {
videoCallPage.parent = callStackMainView
VideoCallFullScreenWindowContainerCreation.closeVideoCallFullScreenWindowContainer()
}
videoCallPage.handleParticipantsInfo(CallAdapter.getConferencesInfos()) videoCallPage.handleParticipantsInfo(CallAdapter.getConferencesInfos())
} }
} }
......
src/mainview/components/CallViewContextMenu.qml
+ 17
− 6
View file @ 4adc59ad
...@@ -65,20 +65,31 @@ Item { ...@@ -65,20 +65,31 @@ Item {
ContextMenuGenerator.addMenuSeparator() ContextMenuGenerator.addMenuSeparator()
} }
if (!isAudioOnly && !isPaused) { ContextMenuGenerator.addMenuItem(isRecording ? JamiStrings.stopRec :
ContextMenuGenerator.addMenuItem(isRecording ? JamiStrings.stopRec : JamiStrings.startRec,
JamiStrings.startRec, "qrc:/images/icons/av_icons/fiber_manual_record-24px.svg",
"qrc:/images/icons/av_icons/fiber_manual_record-24px.svg", function (){
CallAdapter.recordThisCallToggle()
})
if (isAudioOnly && !isPaused)
ContextMenuGenerator.addMenuItem(audioCallPage.isFullscreen ? JamiStrings.exitFullScreen :
JamiStrings.fullScreen,
audioCallPage.isFullscreen ?
"qrc:/images/icons/close_fullscreen-24px.svg" :
"qrc:/images/icons/open_in_full-24px.svg",
function (){ function (){
CallAdapter.recordThisCallToggle() audioCallPage.showFullScreenReqested()
}) })
if (!isAudioOnly && !isPaused) {
ContextMenuGenerator.addMenuItem(videoCallPage.isFullscreen ? JamiStrings.exitFullScreen : ContextMenuGenerator.addMenuItem(videoCallPage.isFullscreen ? JamiStrings.exitFullScreen :
JamiStrings.fullScreen, JamiStrings.fullScreen,
videoCallPage.isFullscreen ? videoCallPage.isFullscreen ?
"qrc:/images/icons/close_fullscreen-24px.svg" : "qrc:/images/icons/close_fullscreen-24px.svg" :
"qrc:/images/icons/open_in_full-24px.svg", "qrc:/images/icons/open_in_full-24px.svg",
function (){ function (){
videoCallPageRect.needToShowInFullScreen() videoCallPage.showFullScreenReqested()
}) })
ContextMenuGenerator.addMenuSeparator() ContextMenuGenerator.addMenuSeparator()
......
src/mainview/components/VideoCallPage.qml
+ 2
− 4
View file @ 4adc59ad
...@@ -40,7 +40,7 @@ Rectangle { ...@@ -40,7 +40,7 @@ Rectangle {
property var linkedWebview: null property var linkedWebview: null
signal needToShowInFullScreen signal showFullScreenReqested
function updateUI(accountId, convUid) { function updateUI(accountId, convUid) {
videoCallOverlay.handleParticipantsInfo(CallAdapter.getConferencesInfos()) videoCallOverlay.handleParticipantsInfo(CallAdapter.getConferencesInfos())
...@@ -155,9 +155,7 @@ Rectangle { ...@@ -155,9 +155,7 @@ Rectangle {
acceptedButtons: Qt.LeftButton acceptedButtons: Qt.LeftButton
onDoubleClicked: { onDoubleClicked: showFullScreenReqested()
needToShowInFullScreen()
}
CallOverlay { CallOverlay {
id: videoCallOverlay id: videoCallOverlay
......
src/mainview/js/videocallfullscreenwindowcontainercreation.js → src/mainview/js/callfullscreenwindowcontainercreation.js
+ 80
− 0
View file @ 4adc59ad
...@@ -16,81 +16,65 @@ ...@@ -16,81 +16,65 @@
* along with this program. If not, see <https://www.gnu.org/licenses/>. * along with this program. If not, see <https://www.gnu.org/licenses/>.
*/ */
// Global call full screen window container, object variable for creation.
/* var callFullScreenWindowContainerComponent
* Global video call full screen window container, object variable for creation. var callFullScreenWindowContainerObject
*/
var videoCallFullScreenWindowContainerComponent
var videoCallFullScreenWindowContainerObject
function createvideoCallFullScreenWindowContainerObject() { function createvideoCallFullScreenWindowContainerObject() {
if (videoCallFullScreenWindowContainerObject) if (callFullScreenWindowContainerObject)
return return
videoCallFullScreenWindowContainerComponent = Qt.createComponent( callFullScreenWindowContainerComponent = Qt.createComponent(
"../components/VideoCallFullScreenWindowContainer.qml") "../components/VideoCallFullScreenWindowContainer.qml")
if (videoCallFullScreenWindowContainerComponent.status === Component.Ready) if (callFullScreenWindowContainerComponent.status === Component.Ready)
finishCreation() finishCreation()
else if (videoCallFullScreenWindowContainerComponent.status === Component.Error) else if (callFullScreenWindowContainerComponent.status === Component.Error)
console.log("Error loading component:", console.log("Error loading component:",
videoCallFullScreenWindowContainerComponent.errorString()) callFullScreenWindowContainerComponent.errorString())
} }
function finishCreation() { function finishCreation() {
videoCallFullScreenWindowContainerObject callFullScreenWindowContainerObject
= videoCallFullScreenWindowContainerComponent.createObject() = callFullScreenWindowContainerComponent.createObject()
if (videoCallFullScreenWindowContainerObject === null) { if (callFullScreenWindowContainerObject === null) {
// Error Handling.
/*
* Error Handling.
*/
console.log("Error creating video call full screen window container object") console.log("Error creating video call full screen window container object")
} }
// Signal connection.
/* callFullScreenWindowContainerObject.onClosing.connect(
* Signal connection.
*/
videoCallFullScreenWindowContainerObject.onClosing.connect(
destoryVideoCallFullScreenWindowContainer) destoryVideoCallFullScreenWindowContainer)
} }
function checkIfVisible() { function checkIfVisible() {
if (!videoCallFullScreenWindowContainerObject) if (!callFullScreenWindowContainerObject)
return false return false
return videoCallFullScreenWindowContainerObject.visible return callFullScreenWindowContainerObject.visible
} }
function setAsContainerChild(obj) { function setAsContainerChild(obj) {
if (videoCallFullScreenWindowContainerObject) if (callFullScreenWindowContainerObject)
videoCallFullScreenWindowContainerObject.setAsChild(obj) callFullScreenWindowContainerObject.setAsChild(obj)
} }
// Destroy and reset callFullScreenWindowContainerObject when window is closed.
/*
* Destroy and reset videoCallFullScreenWindowContainerObject when window is closed.
*/
function destoryVideoCallFullScreenWindowContainer() { function destoryVideoCallFullScreenWindowContainer() {
if (!videoCallFullScreenWindowContainerObject) if (!callFullScreenWindowContainerObject)
return return
videoCallFullScreenWindowContainerObject.destroy() callFullScreenWindowContainerObject.destroy()
videoCallFullScreenWindowContainerObject = false callFullScreenWindowContainerObject = false
} }
function showVideoCallFullScreenWindowContainer() { function showVideoCallFullScreenWindowContainer() {
if (videoCallFullScreenWindowContainerObject) { if (callFullScreenWindowContainerObject) {
/* // Hack: show first, then showFullScreen to make sure that the showFullScreen
* Hack: show first, then showFullScreen to make sure that the showFullScreen // display on the correct screen.
* display on the correct screen. callFullScreenWindowContainerObject.show()
*/ callFullScreenWindowContainerObject.showFullScreen()
videoCallFullScreenWindowContainerObject.show()
videoCallFullScreenWindowContainerObject.showFullScreen()
} }
} }
function closeVideoCallFullScreenWindowContainer() { function closeVideoCallFullScreenWindowContainer() {
if (videoCallFullScreenWindowContainerObject) if (callFullScreenWindowContainerObject)
videoCallFullScreenWindowContainerObject.close() callFullScreenWindowContainerObject.close()
} }
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment