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:shadcn_flutter/shadcn_flutter.dart';
import 'package:spotube/collections/spotube_icons.dart';
import 'package:spotube/extensions/context.dart';
import 'package:spotube/pages/connect/connect.dart';
@ -14,110 +13,55 @@ class ConnectDeviceButton extends HookConsumerWidget {
@override
Widget build(BuildContext context, ref) {
final ThemeData(:colorScheme) = Theme.of(context);
final pixelRatio = MediaQuery.of(context).devicePixelRatio;
final connectClients = ref.watch(connectClientsProvider);
final hasServices =
connectClients.asData?.value.services.isNotEmpty == true;
if (_sidebar) {
return SizedBox(
width: double.infinity,
child: TextButton(
child: Button.primary(
onPressed: () {
ServiceUtils.pushNamed(context, ConnectPage.name);
},
style: FilledButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
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),
],
trailing: const Icon(SpotubeIcons.speaker),
child: Text(
"${context.l10n.devices}"
"${hasServices ? " (${connectClients.asData?.value.services.length})" : ""}",
),
),
);
}
return SizedBox(
height: 40 * pixelRatio,
child: Stack(
alignment: Alignment.centerRight,
fit: StackFit.loose,
children: [
Material(
type: MaterialType.transparency,
child: Center(
child: ClipRect(
clipBehavior: Clip.hardEdge,
child: InkWell(
onTap: () {
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),
],
),
return Row(
children: [
SecondaryBadge(
onPressed: () {
ServiceUtils.pushNamed(context, ConnectPage.name);
},
style: const ButtonStyle.secondary(size: ButtonSize(.8)),
leading: connectClients.asData?.value.resolvedService != null
? const Center(
child: DotItem(
size: 6,
borderRadius: 10,
color: Colors.green,
),
),
),
),
)
: null,
child: Text(
"${context.l10n.devices}"
"${hasServices ? " (${connectClients.asData?.value.services.length})" : ""}",
),
Positioned(
right: -3,
child: IconButton.filled(
icon: const Icon(SpotubeIcons.speaker),
style: IconButton.styleFrom(
visualDensity: VisualDensity.standard,
foregroundColor: colorScheme.onPrimary,
),
onPressed: () {
ServiceUtils.pushNamed(context, ConnectPage.name);
},
),
),
],
),
),
IconButton.primary(
icon: const Icon(SpotubeIcons.speaker),
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/extensions/constrains.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/provider/download_manager_provider.dart';
import 'package:spotube/provider/user_preferences/user_preferences_provider.dart';
@ -61,6 +60,9 @@ class SpotubeNavigationBar extends HookConsumerWidget {
children: [
for (final tile in navbarTileList)
NavigationButton(
style: const ButtonStyle.muted(density: ButtonDensity.icon),
selectedStyle:
const ButtonStyle.fixed(density: ButtonDensity.icon),
child: Badge(
isLabelVisible: tile.id == "library" && downloadCount > 0,
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/extensions/context.dart';
import 'package:spotube/provider/download_manager_provider.dart';
import 'package:spotube/utils/platform.dart';
class LibraryPage extends HookConsumerWidget {
static const name = "library";
@ -37,22 +38,23 @@ class LibraryPage extends HookConsumerWidget {
bottom: false,
child: Scaffold(
headers: [
TitleBar(
leading: [
TabList(
index: index.value,
children: [
for (final child in children)
TabButton(
child: child,
onPressed: () {
index.value = children.indexOf(child);
},
),
],
)
],
)
if (kIsWindows || kIsLinux) const TitleBar(),
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: TabList(
index: index.value,
children: [
for (final child in children)
TabButton(
child: child,
onPressed: () {
index.value = children.indexOf(child);
},
),
],
),
),
const Gap(10),
],
child: IndexedStack(
index: index.value,