From 9e6c4b9e7cd438dcfef0a4b97c0a4d5ce91b4e17 Mon Sep 17 00:00:00 2001 From: Kounex Date: Wed, 21 Feb 2024 21:23:33 +0100 Subject: [PATCH] chore(streaming mode): made scene buttons horizontally scrollable in streaming mode, need to fix scrollbar position --- lib/views/dashboard/dashboard.dart | 1 + .../dashboard_content_streaming.dart | 3 +- .../scenes/scene_buttons/scene_buttons.dart | 105 ++++++++++++------ .../scenes/scene_preview/scene_preview.dart | 4 + 4 files changed, 78 insertions(+), 35 deletions(-) diff --git a/lib/views/dashboard/dashboard.dart b/lib/views/dashboard/dashboard.dart index 01c4e62..17f4470 100644 --- a/lib/views/dashboard/dashboard.dart +++ b/lib/views/dashboard/dashboard.dart @@ -136,6 +136,7 @@ class _DashboardViewState extends State { @override Widget build(BuildContext context) { final DashboardStore dashboardStore = GetIt.instance(); + 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 index eb36e8f..6d04fd2 100644 --- 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 index 2585afc..a779baa 100644 --- 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(HiveKeys.HiddenScene.name) - .add(hiddenScene!); - } - }, - ); - }).toList() - : [const Text('No Scenes available')], - ); + final List? 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(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 index cf97007..f4af546 100644 --- 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 { child: Stack( alignment: Alignment.center, children: [ + Container( + width: double.infinity, + color: Colors.black, + ), if (_imageAvailable && !_fullscreen) Observer(builder: (context) { return AnimatedScale(