✨ Implement WebSocket API client

- List ports
- Read and write mute state
- Read and write volume

lib/mixing_card.dart

@@ -1,8 +1,10 @@
 import 'package:flutter/material.dart';
+import 'package:gomix_flutter/mixer_state.dart' as mixer;
 
 class MixingCard extends StatefulWidget {
-  final String name;
-  const MixingCard({super.key, this.name = "Unknown"});
+  final mixer.Port port;
+  final Function sendAction;
+  const MixingCard({super.key, required this.port, required this.sendAction});
 
   @override
   State<MixingCard> createState() => _MixingCardState();
@@ -10,6 +12,21 @@ class MixingCard extends StatefulWidget {
 
 class _MixingCardState extends State<MixingCard> {
   double _sliderValue = 0;
+  int _debounceTimer = 0;
+  bool _sliderActive = false;
+
+  @override
+  void initState() {
+    super.initState();
+    _sliderValue = widget.port.state.volume;
+  }
+
+  @override
+  void didUpdateWidget(MixingCard oldWidget) {
+    if (_sliderActive) return;
+    _sliderValue = widget.port.state.volume;
+    super.didUpdateWidget(oldWidget);
+  }
 
   @override
   Widget build(BuildContext context) {
@@ -26,34 +43,75 @@ class _MixingCardState extends State<MixingCard> {
             padding: const EdgeInsets.only(left: 15, right: 15, top: 15),
             child: Row(
               children: [
-                Expanded(child: Text(widget.name, style: labelStyle)),
-                IconButton.filledTonal(
-                    isSelected: true,
-                    onPressed: () {},
-                    icon: const Icon(Icons.mic_off_outlined)),
+                Expanded(child: Text(widget.port.name, style: labelStyle)),
+                SizedBox(
+                    height: 40,
+                    width: 40,
+                    child: IconButton.filledTonal(
+                        iconSize: 20,
+                        isSelected: widget.port.state.mute,
+                        onPressed: () {
+                          widget.sendAction({
+                            "method": "setPortState",
+                            "UUID": widget.port.uuid,
+                            "stateData": {"mute": !widget.port.state.mute}
+                          });
+                        },
+                        icon: widget.port.state.mute
+                            ? const Icon(Icons.mic_off_outlined)
+                            : const Icon(Icons.mic_none_outlined))),
                 const SizedBox(width: 5),
-                IconButton.outlined(
-                    isSelected: false,
-                    onPressed: () {},
-                    icon: const Icon(Icons.unfold_more))
+                SizedBox(
+                    height: 40,
+                    width: 40,
+                    child: IconButton.outlined(
+                        iconSize: 20,
+                        isSelected: false,
+                        onPressed: () {},
+                        icon: const Icon(Icons.unfold_more)))
               ],
             ),
           ),
-          Transform.translate(
-            offset: Offset.fromDirection(0, 0),
-            child: SizedBox(
-              width: MediaQuery.of(context).size.width + 180,
-              child: Slider(
-                  value: _sliderValue,
-                  secondaryTrackValue: 1,
-                  min: 0,
-                  max: 4,
-                  label: _sliderValue.toStringAsFixed(2),
-                  onChanged: (val) {
-                    setState(() {
-                      _sliderValue = val;
-                    });
-                  }),
+          SizedBox(
+            width: MediaQuery.of(context).size.width + 180,
+            child: Slider(
+              value: _sliderValue,
+              min: 0,
+              max: 4,
+              label: _sliderValue.toStringAsFixed(2),
+              onChangeStart: ((val) {
+                _sliderActive = true;
+              }),
+              onChangeEnd: ((val) {
+                // Send the current state to make sure we
+                // don't miss the last value due to the debounce
+                widget.sendAction({
+                  "method": "setPortState",
+                  "UUID": widget.port.uuid,
+                  "stateData": {"volume": val}
+                });
+                // Make sure the slider value is still correct
+                // after suppressing updates
+                _sliderActive = false;
+                setState(() {
+                  _sliderValue = widget.port.state.volume;
+                });
+              }),
+              onChanged: (val) {
+                setState(() {
+                  _sliderValue = val;
+                });
+                if (DateTime.now().millisecondsSinceEpoch - _debounceTimer <
+                    30) {
+                  return;
+                }
+                _debounceTimer = DateTime.now().millisecondsSinceEpoch;
+                widget.sendAction({
+                  "method": "setPortState",
+                  "UUID": widget.port.uuid,
+                  "stateData": {"volume": val}
+                });
+              },
             ),
           ),
         ],