refactor: connected device button

This commit is contained in:
Kingkor Roy Tirtho 2024-12-21 21:40:34 +06:00
parent 418a0d29bd
commit 7ee071f2e3
3 changed files with 56 additions and 108 deletions

View File

@ -1,6 +1,5 @@
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart'; import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:spotube/collections/spotube_icons.dart'; import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/extensions/context.dart'; import 'package:spotube/extensions/context.dart';
import 'package:spotube/pages/connect/connect.dart'; import 'package:spotube/pages/connect/connect.dart';
@ -14,110 +13,55 @@ class ConnectDeviceButton extends HookConsumerWidget {
@override @override
Widget build(BuildContext context, ref) { Widget build(BuildContext context, ref) {
final ThemeData(:colorScheme) = Theme.of(context);
final pixelRatio = MediaQuery.of(context).devicePixelRatio;
final connectClients = ref.watch(connectClientsProvider); final connectClients = ref.watch(connectClientsProvider);
final hasServices =
connectClients.asData?.value.services.isNotEmpty == true;
if (_sidebar) { if (_sidebar) {
return SizedBox( return SizedBox(
width: double.infinity, width: double.infinity,
child: TextButton( child: Button.primary(
onPressed: () { onPressed: () {
ServiceUtils.pushNamed(context, ConnectPage.name); ServiceUtils.pushNamed(context, ConnectPage.name);
}, },
style: FilledButton.styleFrom( trailing: const Icon(SpotubeIcons.speaker),
shape: RoundedRectangleBorder( child: Text(
borderRadius: BorderRadius.circular(8), "${context.l10n.devices}"
), "${hasServices ? " (${connectClients.asData?.value.services.length})" : ""}",
padding: const EdgeInsets.all(5),
),
child: Row(
children: [
Text(context.l10n.devices),
if (connectClients.asData?.value.services.isNotEmpty == true)
Text(
" (${connectClients.asData?.value.services.length})",
),
const Spacer(),
const Icon(SpotubeIcons.speaker),
const Gap(5),
],
), ),
), ),
); );
} }
return SizedBox( return Row(
height: 40 * pixelRatio, children: [
child: Stack( SecondaryBadge(
alignment: Alignment.centerRight, onPressed: () {
fit: StackFit.loose, ServiceUtils.pushNamed(context, ConnectPage.name);
children: [ },
Material( style: const ButtonStyle.secondary(size: ButtonSize(.8)),
type: MaterialType.transparency, leading: connectClients.asData?.value.resolvedService != null
child: Center( ? const Center(
child: ClipRect( child: DotItem(
clipBehavior: Clip.hardEdge, size: 6,
child: InkWell( borderRadius: 10,
onTap: () { color: Colors.green,
ServiceUtils.pushNamed(context, ConnectPage.name);
},
borderRadius: BorderRadius.circular(50),
child: Ink(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50),
color: colorScheme.primaryContainer,
),
padding:
const EdgeInsets.symmetric(horizontal: 10, vertical: 5),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
if (connectClients.asData?.value.resolvedService !=
null) ...[
Container(
width: 7,
height: 7,
decoration: BoxDecoration(
color: Colors.greenAccent,
borderRadius: BorderRadius.circular(50),
),
),
const Gap(5),
],
Text(context.l10n.devices),
if (connectClients.asData?.value.services.isNotEmpty ==
true)
Text(
" (${connectClients.asData?.value.services.length})",
style: TextStyle(
color: colorScheme.onPrimaryContainer
.withOpacity(0.5),
),
),
const Gap(35),
],
),
), ),
), )
), : null,
), child: Text(
"${context.l10n.devices}"
"${hasServices ? " (${connectClients.asData?.value.services.length})" : ""}",
), ),
Positioned( ),
right: -3, IconButton.primary(
child: IconButton.filled( icon: const Icon(SpotubeIcons.speaker),
icon: const Icon(SpotubeIcons.speaker), onPressed: () {
style: IconButton.styleFrom( ServiceUtils.pushNamed(context, ConnectPage.name);
visualDensity: VisualDensity.standard, },
foregroundColor: colorScheme.onPrimary, )
), ],
onPressed: () {
ServiceUtils.pushNamed(context, ConnectPage.name);
},
),
),
],
),
); );
} }
} }

View File

@ -7,7 +7,6 @@ import 'package:shadcn_flutter/shadcn_flutter.dart';
import 'package:spotube/collections/side_bar_tiles.dart'; import 'package:spotube/collections/side_bar_tiles.dart';
import 'package:spotube/extensions/constrains.dart'; import 'package:spotube/extensions/constrains.dart';
import 'package:spotube/extensions/context.dart'; import 'package:spotube/extensions/context.dart';
import 'package:spotube/hooks/utils/use_brightness_value.dart';
import 'package:spotube/models/database/database.dart'; import 'package:spotube/models/database/database.dart';
import 'package:spotube/provider/download_manager_provider.dart'; import 'package:spotube/provider/download_manager_provider.dart';
import 'package:spotube/provider/user_preferences/user_preferences_provider.dart'; import 'package:spotube/provider/user_preferences/user_preferences_provider.dart';
@ -61,6 +60,9 @@ class SpotubeNavigationBar extends HookConsumerWidget {
children: [ children: [
for (final tile in navbarTileList) for (final tile in navbarTileList)
NavigationButton( NavigationButton(
style: const ButtonStyle.muted(density: ButtonDensity.icon),
selectedStyle:
const ButtonStyle.fixed(density: ButtonDensity.icon),
child: Badge( child: Badge(
isLabelVisible: tile.id == "library" && downloadCount > 0, isLabelVisible: tile.id == "library" && downloadCount > 0,
label: Text(downloadCount.toString()), label: Text(downloadCount.toString()),

View File

@ -11,6 +11,7 @@ import 'package:spotube/modules/library/user_downloads.dart';
import 'package:spotube/modules/library/user_playlists.dart'; import 'package:spotube/modules/library/user_playlists.dart';
import 'package:spotube/extensions/context.dart'; import 'package:spotube/extensions/context.dart';
import 'package:spotube/provider/download_manager_provider.dart'; import 'package:spotube/provider/download_manager_provider.dart';
import 'package:spotube/utils/platform.dart';
class LibraryPage extends HookConsumerWidget { class LibraryPage extends HookConsumerWidget {
static const name = "library"; static const name = "library";
@ -37,22 +38,23 @@ class LibraryPage extends HookConsumerWidget {
bottom: false, bottom: false,
child: Scaffold( child: Scaffold(
headers: [ headers: [
TitleBar( if (kIsWindows || kIsLinux) const TitleBar(),
leading: [ SingleChildScrollView(
TabList( scrollDirection: Axis.horizontal,
index: index.value, child: TabList(
children: [ index: index.value,
for (final child in children) children: [
TabButton( for (final child in children)
child: child, TabButton(
onPressed: () { child: child,
index.value = children.indexOf(child); onPressed: () {
}, index.value = children.indexOf(child);
), },
], ),
) ],
], ),
) ),
const Gap(10),
], ],
child: IndexedStack( child: IndexedStack(
index: index.value, index: index.value,