quickshell restruct and work

quickshell/bar/widgets/player/PlayerWidgetV2.qml

@@ -0,0 +1,151 @@
+import Quickshell
+import Quickshell.Io
+import QtQuick
+import QtQuick.Layouts
+import Quickshell.Widgets
+import QtQuick.Effects
+import "../common" as Common
+
+// import playbutton.svg
+
+    Item {
+        property PlayerControllerV2 player: PlayerControllerV2;
+        id: root
+        Layout.fillHeight: true
+        Layout.preferredWidth: mainLayout.width + 10
+        Loader {
+            id: audioPopupLoader
+            active: true
+            sourceComponent: PlayerPopupV2 {
+                id: audioPopup
+            }
+        }
+        RowLayout {
+            id: mainLayout
+            Layout.fillHeight: true
+            anchors {
+                verticalCenter: parent.verticalCenter
+                horizontalCenter: parent.horizontalCenter
+            }
+            Common.Meow {
+                id: commons
+            }
+            Item {
+                implicitWidth: text.width
+                implicitHeight: text.height
+                Rectangle {
+                    id: hoverColor
+                    anchors.centerIn: parent
+                    visible: false
+                    radius: 7
+                    width: parent.width + 5
+                    height: parent.height + 2.5
+                    color: "grey"
+                }
+                Text {
+                    id: text
+                    text: (root.player.activePlayer == undefined) ? "Nothing" : player.activePlayer.trackTitle
+                    color: "white"
+                    font.pointSize: 10
+                    font.italic: (root.player.activePlayer == undefined) ? true : false
+                }
+                MouseArea {
+                    anchors.fill: parent
+                    hoverEnabled: true
+
+                    onEntered: event => {
+                        hoverColor.visible = true
+                    }
+                    onExited: event => {
+                        hoverColor.visible = false
+                    }
+                    onClicked: event => {
+                        audioPopupLoader.item.visible = !audioPopupLoader.item.visible;
+                    }
+                }
+            }
+            Common.Dot {}
+            Item {
+                id: mediaPositionControls
+                implicitWidth: positionText.width
+                implicitHeight: positionText.height
+                Text {
+                    id: positionText
+                    text: root.player.activeTrackPositionFormated + "/" + player.activeTrackLengthFormated // returns float of seconds of length
+                    color: "white"
+                    font.pointSize: 10
+                }
+                RowLayout {
+                    visible: !positionText.visible
+                    // enable: !positionText.visible
+                    anchors {
+                        left: parent.left
+                        right: parent.right
+                    }
+                    anchors.verticalCenter: parent.verticalCenter
+                    Item {
+                        width: 20
+                        height: 20
+                        IconImage {
+                            anchors.fill: parent
+                            implicitSize: 20
+                            source: "root:/assets/media_player/skip_previous.svg"
+                        }
+                    }
+                    Item {
+                        width: 20
+                        height: 20
+                        MouseArea {
+                            anchors.fill: parent
+                            width: 20
+                            height: 20
+                            hoverEnabled: true
+                            onClicked: event => {
+                                root.player.activePlayer.togglePlaying()
+                            }
+                        }
+                        IconImage {
+                            anchors.fill: parent
+                            implicitSize: 20
+                            source: (root.player.activePlayer.isPlaying) ? "root:/assets/media_player/pausebutton.svg" : "root:/assets/media_player/playbutton.svg"
+                        }
+                    }
+                    Item {
+                        width: 20
+                        height: 20
+                        IconImage {
+                            anchors.fill: parent
+                            implicitSize: 20
+                            source: "root:/assets/media_player/skip_next.svg"
+                        }
+                    }
+                }
+                MouseArea {
+                    z: 1
+                    id: mouseAreaMediaButtons
+                    height: parent.height + 15
+                    anchors.fill: parent
+                    hoverEnabled: true
+
+                    propagateComposedEvents: true // allows events to transparently go through to an overlapping mouseArea
+
+                    onEntered: event => {
+                        positionText.visible = false;
+                    }
+                    onExited: event => {
+                        positionText.visible = true;
+                    }
+                }
+            }
+        }
+        Rectangle {
+            z: -1
+            color: "black"
+            anchors {
+                verticalCenter: parent.verticalCenter
+            }
+            height: 25
+            width: parent.width
+            radius: 7
+        }
+    }