chore(streaming mode): made scene buttons horizontally scrollable in …

…streaming mode, need to fix scrollbar position
SputNikPlop · Feb 21, 2024 · 9e6c4b9 · 9e6c4b9
1 parent 7c4ab98
commit 9e6c4b9
Show file tree

Hide file tree

Showing 4 changed files with 78 additions and 35 deletions.
diff --git a/lib/views/dashboard/dashboard.dart b/lib/views/dashboard/dashboard.dart
@@ -136,6 +136,7 @@ class _DashboardViewState extends State<DashboardView> {
   @override
   Widget build(BuildContext context) {
     final DashboardStore dashboardStore = GetIt.instance<DashboardStore>();
+
     return ThemedCupertinoScaffold(
       body: Stack(
         alignment: Alignment.topCenter,

diff --git a/lib/views/dashboard/widgets/dashboard_content/dashboard_content_streaming.dart b/lib/views/dashboard/widgets/dashboard_content/dashboard_content_streaming.dart
@@ -20,6 +20,7 @@ class DashboardContentStreaming extends StatelessWidget {
           const SizedBox(height: 12.0),
           const SceneButtons(
             size: 64,
+            mode: SceneButtonsMode.horizontalScroll,
           ),
           const SizedBox(height: 12.0),
           const Flexible(
@@ -30,7 +31,7 @@ class DashboardContentStreaming extends StatelessWidget {
             ),
           ),
           SizedBox(
-            height: 50 + MediaQuery.viewInsetsOf(context).bottom,
+            height: MediaQuery.of(context).padding.bottom,
           ),
         ],
       ),

diff --git a/lib/views/dashboard/widgets/scenes/scene_buttons/scene_buttons.dart b/lib/views/dashboard/widgets/scenes/scene_buttons/scene_buttons.dart
@@ -1,4 +1,6 @@
+import 'package:flutter/cupertino.dart';
 import 'package:flutter/material.dart';
+import 'package:flutter/widgets.dart';
 import 'package:flutter_mobx/flutter_mobx.dart';
 import 'package:get_it/get_it.dart';
 import 'package:hive/hive.dart';
@@ -12,11 +14,20 @@ import '../../../../../types/enums/hive_keys.dart';
 import '../scenes.dart';
 import 'scene_button.dart';
 
+enum SceneButtonsMode {
+  wrap,
+  horizontalScroll,
+}
+
 class SceneButtons extends StatelessWidget {
   final double size;
+
+  final SceneButtonsMode mode;
+
   const SceneButtons({
     super.key,
     this.size = 100,
+    this.mode = SceneButtonsMode.wrap,
   });
 
   @override
@@ -74,40 +85,66 @@ class SceneButtons extends StatelessWidget {
                 (hiddenScene) => scene.sceneName != hiddenScene.sceneName));
           }
 
-          return Wrap(
-            runSpacing: kSceneButtonSpace,
-            spacing: kSceneButtonSpace,
-            children: visibleScenes != null && visibleScenes.isNotEmpty
-                ? visibleScenes.map((scene) {
-                    HiddenScene? hiddenScene;
-                    try {
-                      hiddenScene = hiddenScenes.firstWhere(
-                          (element) => element.sceneName == scene.sceneName);
-                    } catch (e) {}
-
-                    return SceneButton(
-                      scene: scene,
-                      height: size,
-                      width: size,
-                      visible: hiddenScene == null,
-                      onVisibilityTap: () {
-                        if (hiddenScene != null) {
-                          hiddenScene!.delete();
-                        } else {
-                          hiddenScene = HiddenScene(
-                            scene.sceneName,
-                            networkStore.activeSession!.connection.name,
-                            networkStore.activeSession!.connection.host,
-                          );
-
-                          Hive.box<HiddenScene>(HiveKeys.HiddenScene.name)
-                              .add(hiddenScene!);
-                        }
-                      },
-                    );
-                  }).toList()
-                : [const Text('No Scenes available')],
-          );
+          final List<Widget>? sceneButtons = visibleScenes?.map((scene) {
+            HiddenScene? hiddenScene;
+            try {
+              hiddenScene = hiddenScenes.firstWhere(
+                  (element) => element.sceneName == scene.sceneName);
+            } catch (e) {}
+
+            return SceneButton(
+              scene: scene,
+              height: size,
+              width: size,
+              visible: hiddenScene == null,
+              onVisibilityTap: () {
+                if (hiddenScene != null) {
+                  hiddenScene!.delete();
+                } else {
+                  hiddenScene = HiddenScene(
+                    scene.sceneName,
+                    networkStore.activeSession!.connection.name,
+                    networkStore.activeSession!.connection.host,
+                  );
+
+                  Hive.box<HiddenScene>(HiveKeys.HiddenScene.name)
+                      .add(hiddenScene!);
+                }
+              },
+            );
+          }).toList();
+
+          if (sceneButtons == null || sceneButtons.isEmpty) {
+            return const Center(
+              child: Text(
+                'No Scenes available',
+              ),
+            );
+          }
+
+          return switch (this.mode) {
+            SceneButtonsMode.wrap => Wrap(
+                runSpacing: kSceneButtonSpace,
+                spacing: kSceneButtonSpace,
+                children: sceneButtons,
+              ),
+            SceneButtonsMode.horizontalScroll => SizedBox(
+                height: this.size,
+                child: Scrollbar(
+                  scrollbarOrientation: ScrollbarOrientation.bottom,
+                  thumbVisibility: true,
+                  trackVisibility: true,
+                  child: ListView.separated(
+                    scrollDirection: Axis.horizontal,
+                    padding: const EdgeInsets.only(left: 12.0),
+                    itemCount: sceneButtons.length,
+                    itemBuilder: (context, index) => sceneButtons[index],
+                    separatorBuilder: (context, index) =>
+                        const SizedBox(width: 12.0),
+                  ),
+                ),
+              ),
+          };
         }),
       );
     });

diff --git a/lib/views/dashboard/widgets/scenes/scene_preview/scene_preview.dart b/lib/views/dashboard/widgets/scenes/scene_preview/scene_preview.dart
@@ -91,6 +91,10 @@ class _ScenePreviewState extends State<ScenePreview> {
         child: Stack(
           alignment: Alignment.center,
           children: [
+            Container(
+              width: double.infinity,
+              color: Colors.black,
+            ),
             if (_imageAvailable && !_fullscreen)
               Observer(builder: (context) {
                 return AnimatedScale(