Regarding mousearea

[Naveen_D]

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

[Marco Pellin]

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

[Naveen_D]

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

[Marco Pellin]

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