Skip to content

Commit

Permalink
feat: reactive volume slider and slicker bottom bar with lowered height
Browse files Browse the repository at this point in the history
  • Loading branch information
@KRTirtho
KRTirtho committed Jun 10, 2023
1 parent 6ae8964 commit 9d14517
Show file tree
Hide file tree
Showing 4 changed files with 91 additions and 73 deletions.
4 changes: 4 additions & 0 deletions lib/collections/spotube_icons.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,4 +82,8 @@ abstract class SpotubeIcons {
static const piped = FeatherIcons.cloud;
static const magic = Icons.auto_fix_high_outlined;
static const selectionCheck = Icons.checklist_rounded;
static const volumeHigh = FeatherIcons.volume2;
static const volumeMedium = FeatherIcons.volume1;
static const volumeLow = FeatherIcons.volume;
static const volumeMute = FeatherIcons.volumeX;
}
4 changes: 2 additions & 2 deletions lib/components/player/player_track_details.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,8 @@ class PlayerTrackDetails extends HookConsumerWidget {
Container(
padding: const EdgeInsets.all(6),
constraints: const BoxConstraints(
maxWidth: 70,
maxHeight: 70,
maxWidth: 80,
maxHeight: 80,
),
child: ClipRRect(
borderRadius: BorderRadius.circular(4),
Expand Down
155 changes: 84 additions & 71 deletions lib/components/root/bottom_player.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -71,90 +71,103 @@ class BottomPlayer extends HookConsumerWidget {
type: MaterialType.transparency,
textStyle: theme.textTheme.bodyMedium!,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(child: PlayerTrackDetails(albumArt: albumArt)),
// controls
Flexible(
flex: 3,
child: PlayerControls(),
child: Padding(
padding: const EdgeInsets.only(top: 5),
child: PlayerControls(),
),
),
// add to saved tracks
Expanded(
flex: 1,
child: Wrap(
alignment: WrapAlignment.center,
runAlignment: WrapAlignment.center,
children: [
Container(
height: 20,
constraints: const BoxConstraints(maxWidth: 200),
child: HookBuilder(builder: (context) {
final volumeState =
useStream(audioPlayer.volumeStream).data ??
audioPlayer.volume;
final volume = useState(volumeState);

useEffect(() {
if (volume.value != volumeState) {
volume.value = volumeState;
Column(
children: [
PlayerActions(
extraActions: [
IconButton(
tooltip: context.l10n.mini_player,
icon: const Icon(SpotubeIcons.miniPlayer),
onPressed: () async {
await DesktopTools.window.setMinimumSize(
const Size(300, 300),
);
await DesktopTools.window.setAlwaysOnTop(true);
if (!kIsLinux) {
await DesktopTools.window.setHasShadow(false);
}
return null;
}, [volumeState]);
await DesktopTools.window
.setAlignment(Alignment.topRight);
await DesktopTools.window
.setSize(const Size(400, 500));
await Future.delayed(
const Duration(milliseconds: 100),
() async {
GoRouter.of(context).go('/mini-player');
},
);
},
),
],
),
Container(
height: 40,
constraints: const BoxConstraints(maxWidth: 250),
child: HookBuilder(builder: (context) {
final volume =
useStream(audioPlayer.volumeStream).data ??
audioPlayer.volume;

return Listener(
onPointerSignal: (event) async {
if (event is PointerScrollEvent) {
if (event.scrollDelta.dy > 0) {
final value = volume.value - .2;
audioPlayer.setVolume(value < 0 ? 0 : value);
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
IconButton(
icon: Icon(
volume == 0
? SpotubeIcons.volumeMute
: volume <= 0.2
? SpotubeIcons.volumeLow
: volume <= 0.6
? SpotubeIcons.volumeMedium
: SpotubeIcons.volumeHigh,
size: 16,
),
onPressed: () {
if (volume == 0) {
audioPlayer.setVolume(1);
} else {
final value = volume.value + .2;
audioPlayer.setVolume(value > 1 ? 1 : value);
audioPlayer.setVolume(0);
}
}
},
child: Slider(
min: 0,
max: 1,
value: volume.value,
onChanged: (v) {
volume.value = v;
},
onChangeEnd: audioPlayer.setVolume,
),
);
}),
),
PlayerActions(
extraActions: [
IconButton(
tooltip: context.l10n.mini_player,
icon: const Icon(SpotubeIcons.miniPlayer),
onPressed: () async {
await DesktopTools.window.setMinimumSize(
const Size(300, 300),
);
await DesktopTools.window.setAlwaysOnTop(true);
if (!kIsLinux) {
await DesktopTools.window.setHasShadow(false);
}
await DesktopTools.window
.setAlignment(Alignment.topRight);
await DesktopTools.window
.setSize(const Size(400, 500));
await Future.delayed(
const Duration(milliseconds: 100),
() async {
GoRouter.of(context).go('/mini-player');
},
);
},
),
],
)
],
),
Listener(
onPointerSignal: (event) async {
if (event is PointerScrollEvent) {
if (event.scrollDelta.dy > 0) {
final value = volume - .2;
audioPlayer
.setVolume(value < 0 ? 0 : value);
} else {
final value = volume + .2;
audioPlayer
.setVolume(value > 1 ? 1 : value);
}
}
},
child: Slider(
min: 0,
max: 1,
value: volume,
onChanged: audioPlayer.setVolume,
),
),
],
);
}),
)
],
)
],
),
Expand Down
1 change: 1 addition & 0 deletions lib/themes/theme.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -48,5 +48,6 @@ ThemeData theme(Color seed, Brightness brightness) {
backgroundColor: scheme.onSurface,
contentTextStyle: TextStyle(color: scheme.surface),
),
sliderTheme: SliderThemeData(overlayShape: SliderComponentShape.noOverlay),
);
}

0 comments on commit 9d14517

Please sign in to comment.