mirror of
https://github.com/KRTirtho/spotube.git
synced 2025-09-14 16:25:16 +00:00
feat(mini_player): show/hide UI on hover toggle
This commit is contained in:
parent
bd3b7f9e73
commit
2e8b647a51
@ -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;
|
||||
}
|
||||
|
@ -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');
|
||||
}
|
||||
}
|
||||
},
|
||||
),
|
||||
],
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user