widgets/mediacontrols: Fix usage in action drawer and height animation

Fixes an issue where if the media controls were active and the action drawer was flicked opened, sometimes it would not fully open.

Changes include:
1. Media controls will now no longer animate its height if `implicitHeight` is 0
2. The action drawer animation code was reworked to allow its height to change dynamically.

components/mobileshell/qml/actiondrawer/ActionDrawer.qml

@@ -19,6 +19,8 @@ import org.kde.plasma.private.mobileshell.quicksettingsplugin as QS
 Item {
     id: root
 
+    visible: false
+
     /**
      * The model for the notification widget.
      */
@@ -133,44 +135,45 @@ Item {
         oldOffset = offset;
 
         // close panel immediately after panel is not shown, and the flickable is not being dragged
-        if (opened && root.offset <= 0 && !swipeArea.moving && !closeAnim.running && !openAnim.running) {
+        if (opened && root.offset <= 0 && !swipeArea.moving && !drawerAnimation.running) {
-            root.updateState();
+            root.state = "";
+            offset = 0;
             focus = false;
+            root.opened = false;
+            root.updateState();
         }
     }
 
     function cancelAnimations() {
-        closeAnim.stop();
+        root.state = "";
-        openAnim.stop();
      }
 
     function open() {
         cancelAnimations();
         if (openToPinnedMode) {
-            openAnim.restart(); // go to pinned height
+            root.state = "open"; // go to pinned height
         } else {
-            expandAnim.restart(); // go to maximized height
+            root.state = "expand"; // go to maximized height
         }
     }
 
     function closeImmediately() {
         cancelAnimations();
         offset = 0;
-        closeAnim.finished();
+        root.state = "close";
     }
 
     function close() {
         cancelAnimations();
-        closeAnim.restart();
+        root.state = "close";
     }
 
     function expand() {
         cancelAnimations();
-        expandAnim.restart();
+        root.state = "expand";
     }
 
     function updateState() {
-        cancelAnimations();
         let openThreshold = Kirigami.Units.gridUnit;
 
         if (root.offset <= 0) {
@@ -208,29 +211,55 @@ Item {
         onTriggered: updateState()
     }
 
-    PropertyAnimation on offset {
+    state: "close"
-        id: closeAnim
+
-        duration: Kirigami.Units.veryLongDuration
+    states: [
-        easing.type: Easing.OutExpo
+        State {
-        to: 0
+            name: ""
-        onFinished: {
+            PropertyChanges {
+                target: root; offset: offset
+            }
+        },
+        State {
+            name: "close"
+            PropertyChanges {
+                target: root; offset: 0
+            }
+        },
+        State {
+            name: "open"
+            PropertyChanges {
+                target: root; offset: contentContainerLoader.minimizedQuickSettingsOffset
+            }
+        },
+        State {
+            name: "expand"
+            PropertyChanges {
+                target: root; offset: contentContainerLoader.maximizedQuickSettingsOffset
+            }
+        }
+    ]
+
+    transitions: Transition {
+        SequentialAnimation {
+            PropertyAnimation {
+                id: drawerAnimation
+                properties: "offset"; easing.type: Easing.OutExpo; duration: root.state != "" ? Kirigami.Units.veryLongDuration : 0
+            }
+            ScriptAction {
+                script: {
+                    if (root.state != "") {
+                        if (root.offset <= 0) {
                             root.visible = false;
                             root.opened = false;
+                            root.state = "";
+                        } else {
+                            root.opened = true;
+                        }
+                    }
                 }
             }
-    PropertyAnimation on offset {
-        id: openAnim
-        duration: Kirigami.Units.veryLongDuration
-        easing.type: Easing.OutExpo
-        to: contentContainerLoader.minimizedQuickSettingsOffset
-        onFinished: root.opened = true
         }
-    PropertyAnimation on offset {
-        id: expandAnim
-        duration: Kirigami.Units.veryLongDuration
-        easing.type: Easing.OutExpo
-        to: contentContainerLoader.maximizedQuickSettingsOffset
-        onFinished: root.opened = true;
     }
 
     MobileShell.SwipeArea {

components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml

@@ -21,15 +21,17 @@ Item {
     visible: sourceRepeater.count > 0
 
     property bool detailledView: false
-    readonly property real heightMultiplier: detailledView ? 2 : 1
 
     readonly property real padding: Kirigami.Units.gridUnit
-    readonly property real contentHeight: Kirigami.Units.gridUnit * 2 * heightMultiplier
+    readonly property real contentHeight: {
+        let heightMultiplier = detailledView ? 2 : 1
+        Kirigami.Units.gridUnit * 2 * heightMultiplier
+    }
     implicitHeight: visible ? padding * 2 + contentHeight : 0
 
     Behavior on implicitHeight {
        NumberAnimation {
-            duration: Kirigami.Units.shortDuration
+           duration: implicitHeight == 0 ? 0 : Kirigami.Units.shortDuration
            easing.type: Easing.InOutQuad
        }
     }