refactor: update TabBar and live indicator for improved connection status handling and visual feedback

This commit is contained in:
jack
2026-06-11 13:16:37 -07:00
parent 1cd54e81fc
commit f89a735d51
+17 -3
View File
@@ -37,6 +37,7 @@ Item {
// Mode toggle // Mode toggle
TabBar { TabBar {
id: modeBar id: modeBar
currentIndex: 1 // Default to "Review"
spacing: 2 spacing: 2
padding: 2 padding: 2
background: Rectangle { background: Rectangle {
@@ -47,9 +48,11 @@ Item {
} }
TabButton { TabButton {
text: "Live" text: "Live"
enabled: deviceController.connectionStatus === "Connected"
opacity: enabled ? 1.0 : 0.4
implicitWidth: 58; implicitHeight: 28 implicitWidth: 58; implicitHeight: 28
background: Rectangle { background: Rectangle {
color: parent.checked ? Theme.buttonNeutralBackground : "transparent" color: parent.checked ? Theme.tabActiveBackground : "transparent"
radius: Theme.radiusSm - 1 radius: Theme.radiusSm - 1
} }
contentItem: Text { contentItem: Text {
@@ -65,7 +68,7 @@ Item {
text: "Review" text: "Review"
implicitWidth: 64; implicitHeight: 28 implicitWidth: 64; implicitHeight: 28
background: Rectangle { background: Rectangle {
color: parent.checked ? Theme.buttonNeutralBackground : "transparent" color: parent.checked ? Theme.tabActiveBackground : "transparent"
radius: Theme.radiusSm - 1 radius: Theme.radiusSm - 1
} }
contentItem: Text { contentItem: Text {
@@ -87,10 +90,21 @@ Item {
spacing: 5 spacing: 5
// WiFi icon (Unicode approximation; swap for SVG if available) // WiFi icon (Unicode approximation; swap for SVG if available)
Label { Label {
id: liveIndicator
text: "◉" text: "◉"
color: streamController.state !== "idle" color: (deviceController.connectionStatus === "Connected" && streamController.state !== "idle")
? Theme.liveColor : Theme.bodyColor ? Theme.liveColor : Theme.bodyColor
font.pixelSize: 13 font.pixelSize: 13
SequentialAnimation on opacity {
running: deviceController.connectionStatus === "Connected" && streamController.state !== "idle"
loops: Animation.Infinite
NumberAnimation { to: 0.2; duration: 600; easing.type: Easing.InOutQuad }
NumberAnimation { to: 1.0; duration: 600; easing.type: Easing.InOutQuad }
onRunningChanged: {
if (!running) liveIndicator.opacity = 1.0
}
}
} }
Label { Label {
text: "Live stream" text: "Live stream"