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 the videoOutputArea. 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


  • @Marco-Pellin Thank you for the reply and thank you for explaining the complete scenario. i got the issue resolved. :)



  • @Naveen_D
    You're welcome! Change the topic status as solved ;)


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.