From 2ced0c902e0a18ddac74d5f223651485d84045d2 Mon Sep 17 00:00:00 2001
From: James Graham <james.h.graham@protonmail.com>
Date: Mon, 17 Oct 2022 20:26:58 +0100
Subject: [PATCH] Fix the play slider and time label so that they don't
 overflow the bubble when thin. The time label now appears below the duration
 slider when very thin. Remove unnecessary padding from the audio inner
 object, including deleting the outer control which added padding but little
 else.

---
 .../Component/Timeline/AudioDelegate.qml      | 65 ++++++++++---------
 1 file changed, 35 insertions(+), 30 deletions(-)

diff --git a/imports/NeoChat/Component/Timeline/AudioDelegate.qml b/imports/NeoChat/Component/Timeline/AudioDelegate.qml
index ca43fe227..89dfca9a4 100644
--- a/imports/NeoChat/Component/Timeline/AudioDelegate.qml
+++ b/imports/NeoChat/Component/Timeline/AudioDelegate.qml
@@ -21,8 +21,7 @@ TimelineContainer {
     onDownloadedChanged: audio.play()
 
     hoverComponent: hoverActions
-    innerObject: Control {
-        Layout.fillWidth: true
+    innerObject: ColumnLayout {
         Layout.maximumWidth: audioDelegate.contentMaxWidth
 
         Audio {
@@ -82,41 +81,47 @@ TimelineContainer {
             }
         ]
 
-        contentItem: ColumnLayout {
-            RowLayout {
-                ToolButton {
-                    id: playButton
-                }
-                Label {
-                    text: model.display
-                    wrapMode: Text.Wrap
-                    Layout.fillWidth: true
-                }
+        RowLayout {
+            ToolButton {
+                id: playButton
             }
-            ProgressBar {
-                id: downloadBar
-                visible: false
+            Label {
+                text: model.display
+                wrapMode: Text.Wrap
+                Layout.fillWidth: true
+            }
+        }
+        ProgressBar {
+            id: downloadBar
+            visible: false
+            Layout.fillWidth: true
+            from: 0
+            to: model.content.info.size
+            value: model.progressInfo.progress
+        }
+        RowLayout {
+            visible: audio.hasAudio
+
+            Slider {
                 Layout.fillWidth: true
                 from: 0
-                to: model.content.info.size
-                value: model.progressInfo.progress
+                to: audio.duration
+                value: audio.position
+                onMoved: audio.seek(value)
             }
-            RowLayout {
-                visible: audio.hasAudio
-                Layout.leftMargin: Kirigami.Units.largeSpacing
-                Layout.rightMargin: Kirigami.Units.largeSpacing
 
-                Slider {
-                    from: 0
-                    to: audio.duration
-                    value: audio.position
-                    onMoved: audio.seek(value)
-                }
+            Label {
+                visible: audioDelegate.contentMaxWidth > Kirigami.Units.gridUnit * 12
 
-                Label {
-                    text: Controller.formatDuration(audio.position) + "/" + Controller.formatDuration(audio.duration)
-                }
+                text: Controller.formatDuration(audio.position) + "/" + Controller.formatDuration(audio.duration)
             }
         }
+        Label {
+            Layout.alignment: Qt.AlignRight
+            Layout.rightMargin: Kirigami.Units.smallSpacing
+            visible: audio.hasAudio && audioDelegate.contentMaxWidth < Kirigami.Units.gridUnit * 12
+
+            text: Controller.formatDuration(audio.position) + "/" + Controller.formatDuration(audio.duration)
+        }
     }
 }