Regarding mousearea
-
Hi all,
i am developing a small video application, where i am playing a video in full screen. i have close button at the top right corner of the application window. when i play the video it starts playing, i have given mousearea for the window in which i have given, onEntering, the play button is visible, onExiting, it is not. But the problem i am facing is, while paying the video when i try to close the window using the top right corner button, it is not working. what is the problem here, can anyone give me the possible solution?
my observation is, it is conflicting with the mousearea of button and window (don't know if this is the case).
here is the code:
import QtQuick 2.6 import QtQuick.Controls 1.5 import QtQuick.Controls.Styles 1.4 import QtQuick.Layouts 1.1 import QtMultimedia 5.4 import Qt.labs.folderlistmodel 1.0 ApplicationWindow { id: mainWindow visible: true width: 640 height: 480 MediaPlayer { id: player } Item { id: playerLogic property int index: -1 FolderListModel{ id: items folder: "file:///home/ubuntu/Documents/Sample_Examples_Qt_Qml/DummyMusicPlayer/VideoSongs/" nameFilters: ["*.mp4"] } function init(){ console.log("Entered init function") if(player.PlayingState===1) { console.log("playing state is 1") player.pause(); }else if(player.PlayingState===2){ console.log("playing state is 2") player.play(); } else { console.log("calling index function") setIndex(0); } } function setIndex(i){ console.log("entered setindex function") index= i if(index<0 || index> items.count){ console.log("checking if condition") index=-1; player.source=""; }else { console.log("else part") console.log("items count >>", items.count) player.source=items.get(index,"fileURL"); console.log("player souce >>" + player.source) player.play(); console.log("Song started to play ...!") } } } VideoOutput{ id: videoOutputArea source: player fillMode: VideoOutput.PreserveAspectCrop height: parent.height } Button{ id: playpausebutton anchors.bottom: parent.bottom anchors.left: parent.left width: 80 height: 40 text: "PlayMusic" state: "none" style: ButtonStyle{ background: Rectangle{ id: buttonbackground implicitHeight: parent.height implicitWidth: parent.width color: "#00bcd4" opacity: playpausebutton.pressed ? 0.5: 1.0 radius: 5 } } MouseArea { id: buttonmousearea anchors.fill: parent onClicked: { playerLogic.init() /*player.play()*/; console.log("path is >>", player.source) } } } Button{ id: fullscreenbutton anchors.top: parent.top anchors.right: parent.right width: 80 height: 40 text: "close" state: "none" style: ButtonStyle{ background: Rectangle{ id: buttonBG implicitHeight: parent.height implicitWidth: parent.width color: "#00bcd4" opacity: playpausebutton.pressed ? 0.5: 1.0 radius: 5 } } MouseArea { anchors.fill: parent onClicked: { Qt.quit() } } } MouseArea { anchors.bottom: parent.bottom anchors.bottomMargin: 100 anchors.fill: videoOutputArea hoverEnabled: true onEntered: { playpausebutton.opacity = 0 } onExited: { playpausebutton.opacity=1 } } }
Thanks
-
Hi,
let me explain it.
Every item you put in your visual scene is placed into a sort of layer.
So, if you put two rectangles, the second one will be placed on top of the first.In your code the last MouseArea has an
anchors.fill
property depending on thevideoOutputArea
. So if the video area is covering the Close button, the MouseArea of the Close button will not be responsive, because the click event will be sent to the last MouseArea.There are 3 different solutions to your problem:
- remove
anchors.fill: videoOutputArea
in the last MouseArea item - move your fullscreenbutton after the MouseArea we are talking about
- add
z: 1
property to fullscreenbutton in order to put it on the top layer
- remove
-
@Marco-Pellin Thank you for the reply and thank you for explaining the complete scenario. i got the issue resolved. :)