feat(mini_player): show/hide UI on hover toggle

This commit is contained in:
Kingkor Roy Tirtho 2023-04-25 22:30:07 +06:00
parent bd3b7f9e73
commit 2e8b647a51
2 changed files with 182 additions and 130 deletions

View File

@ -72,4 +72,6 @@ abstract class SpotubeIcons {
static const maximize = FeatherIcons.maximize2;
static const pinOn = Icons.push_pin_rounded;
static const pinOff = Icons.push_pin_outlined;
static const hoverOn = Icons.back_hand_rounded;
static const hoverOff = Icons.back_hand_outlined;
}

View File

@ -29,6 +29,9 @@ class MiniLyricsPage extends HookConsumerWidget {
final playlistQueue = ref.watch(PlaylistQueueNotifier.provider);
final areaActive = useState(false);
final hoverMode = useState(true);
useEffect(() {
WidgetsBinding.instance.addPostFrameCallback((_) async {
prevSize.value = await DesktopTools.window.getSize();
@ -46,13 +49,30 @@ class MiniLyricsPage extends HookConsumerWidget {
);
}
return DefaultTabController(
return MouseRegion(
onEnter: !hoverMode.value
? null
: (event) {
areaActive.value = true;
},
onExit: !hoverMode.value
? null
: (event) {
areaActive.value = false;
},
child: DefaultTabController(
length: 2,
child: Scaffold(
backgroundColor: theme.colorScheme.surface.withOpacity(0.4),
appBar: PreferredSize(
preferredSize: const Size.fromHeight(60),
child: DragToMoveArea(
child: AnimatedCrossFade(
duration: const Duration(milliseconds: 200),
crossFadeState: areaActive.value
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
secondChild: const SizedBox(),
firstChild: DragToMoveArea(
child: Row(
children: [
const SizedBox(width: 10),
@ -70,6 +90,24 @@ class MiniLyricsPage extends HookConsumerWidget {
),
),
const Spacer(),
IconButton(
tooltip: 'Show/Hide UI on hover',
icon: hoverMode.value
? const Icon(SpotubeIcons.hoverOn)
: const Icon(SpotubeIcons.hoverOff),
style: ButtonStyle(
foregroundColor: hoverMode.value
? MaterialStateProperty.all(
theme.colorScheme.primary)
: null,
),
onPressed: () async {
if (!hoverMode.value == true) {
areaActive.value = true;
}
hoverMode.value = !hoverMode.value;
},
),
FutureBuilder(
future: DesktopTools.window.isAlwaysOnTop(),
builder: (context, snapshot) {
@ -95,36 +133,13 @@ class MiniLyricsPage extends HookConsumerWidget {
update();
},
);
}),
IconButton(
tooltip: 'Exit Mini Player',
icon: const Icon(SpotubeIcons.maximize),
onPressed: () async {
try {
await DesktopTools.window
.setMinimumSize(const Size(300, 700));
await DesktopTools.window.setAlwaysOnTop(false);
if (wasMaximized.value) {
await DesktopTools.window.maximize();
} else {
await DesktopTools.window.setSize(prevSize.value!);
}
await DesktopTools.window.setAlignment(Alignment.center);
if (!kIsLinux) {
await DesktopTools.window.setHasShadow(true);
}
await Future.delayed(const Duration(milliseconds: 200));
} finally {
if (context.mounted) {
GoRouter.of(context).go('/lyrics');
}
}
},
),
],
),
),
),
),
body: Column(
children: [
if (playlistQueue != null)
@ -148,7 +163,13 @@ class MiniLyricsPage extends HookConsumerWidget {
],
),
),
Row(
AnimatedCrossFade(
crossFadeState: areaActive.value
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
duration: const Duration(milliseconds: 200),
secondChild: const SizedBox(),
firstChild: Row(
children: [
IconButton(
icon: const Icon(SpotubeIcons.queue),
@ -176,12 +197,41 @@ class MiniLyricsPage extends HookConsumerWidget {
}
: null,
),
Flexible(child: PlayerControls(compact: true))
Flexible(child: PlayerControls(compact: true)),
IconButton(
tooltip: 'Exit Mini Player',
icon: const Icon(SpotubeIcons.maximize),
onPressed: () async {
try {
await DesktopTools.window
.setMinimumSize(const Size(300, 700));
await DesktopTools.window.setAlwaysOnTop(false);
if (wasMaximized.value) {
await DesktopTools.window.maximize();
} else {
await DesktopTools.window.setSize(prevSize.value!);
}
await DesktopTools.window
.setAlignment(Alignment.center);
if (!kIsLinux) {
await DesktopTools.window.setHasShadow(true);
}
await Future.delayed(
const Duration(milliseconds: 200));
} finally {
if (context.mounted) {
GoRouter.of(context).go('/lyrics');
}
}
},
),
],
),
)
],
),
),
),
);
}
}