spotube/lib/components/player/volume_slider.dart
Akash Pattnaik 8fad2251b3
feat(player): add volume slider floating label showing percentage (#1445)
* docs: broken link in README.md (fixes #1310) (#1311)

* docs: remove appimage link in readme #1082 (#1171)

* Updating Readme according to #1082

Updating Readme according to #1082

* Added explanation

The explanation is now given and the expression is more formal and explanatory, instead of just linking the issue.

* add volume level tooltip in volume_slider

---------

Co-authored-by: MerkomassDev <70111455+MerkomassDev@users.noreply.github.com>
Co-authored-by: Karim <37943746+ksaadDE@users.noreply.github.com>
Co-authored-by: Kingkor Roy Tirtho <krtirtho@gmail.com>
2024-05-10 23:16:10 +06:00

74 lines
1.9 KiB
Dart

import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:spotube/collections/spotube_icons.dart';
class VolumeSlider extends HookConsumerWidget {
final bool fullWidth;
final double value;
final ValueChanged<double> onChanged;
const VolumeSlider({
super.key,
this.fullWidth = false,
required this.value,
required this.onChanged,
});
@override
Widget build(BuildContext context, ref) {
var slider = Listener(
onPointerSignal: (event) async {
if (event is PointerScrollEvent) {
if (event.scrollDelta.dy > 0) {
final newValue = value - .2;
onChanged(newValue < 0 ? 0 : newValue);
} else {
final newValue = value + .2;
onChanged(newValue > 1 ? 1 : newValue);
}
}
},
child: SliderTheme(
data: const SliderThemeData(
showValueIndicator: ShowValueIndicator.always,
),
child: Slider(
min: 0,
max: 1,
label: (value * 100).toStringAsFixed(0),
value: value,
onChanged: onChanged,
),
),
);
return Row(
mainAxisAlignment:
!fullWidth ? MainAxisAlignment.center : MainAxisAlignment.start,
children: [
IconButton(
icon: Icon(
value == 0
? SpotubeIcons.volumeMute
: value <= 0.2
? SpotubeIcons.volumeLow
: value <= 0.6
? SpotubeIcons.volumeMedium
: SpotubeIcons.volumeHigh,
size: 16,
),
onPressed: () {
if (value == 0) {
onChanged(1);
} else {
onChanged(0);
}
},
),
if (fullWidth) Expanded(child: slider) else slider,
],
);
}
}