From d42d36129df95473d41445e0736b08fbedf60ce9 Mon Sep 17 00:00:00 2001
From: Micah Stanley <stanleymicah@proton.me>
Date: Wed, 31 Jul 2024 14:16:13 +0000
Subject: [PATCH] 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.
---
 .../qml/actiondrawer/ActionDrawer.qml         | 95 ++++++++++++-------
 .../mediacontrols/MediaControlsWidget.qml     | 14 +--
 2 files changed, 70 insertions(+), 39 deletions(-)

diff --git a/components/mobileshell/qml/actiondrawer/ActionDrawer.qml b/components/mobileshell/qml/actiondrawer/ActionDrawer.qml
index 152e4241..f4035530 100644
--- a/components/mobileshell/qml/actiondrawer/ActionDrawer.qml
+++ b/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) {
-            root.updateState();
+        if (opened && root.offset <= 0 && !swipeArea.moving && !drawerAnimation.running) {
+            root.state = "";
+            offset = 0;
             focus = false;
+            root.opened = false;
+            root.updateState();
         }
     }
 
     function cancelAnimations() {
-        closeAnim.stop();
-        openAnim.stop();
-    }
+        root.state = "";
+     }
 
     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 {
-        id: closeAnim
-        duration: Kirigami.Units.veryLongDuration
-        easing.type: Easing.OutExpo
-        to: 0
-        onFinished: {
-            root.visible = false;
-            root.opened = false;
+    state: "close"
+
+    states: [
+        State {
+            name: ""
+            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 {
diff --git a/components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml b/components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml
index e3d170c9..9eabeace 100644
--- a/components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml
+++ b/components/mobileshell/qml/widgets/mediacontrols/MediaControlsWidget.qml
@@ -21,17 +21,19 @@ 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
-            easing.type: Easing.InOutQuad
-        }
+       NumberAnimation {
+           duration: implicitHeight == 0 ? 0 : Kirigami.Units.shortDuration
+           easing.type: Easing.InOutQuad
+       }
     }
 
     MediaControlsSource {