| 1 | import { useId } from "react"; |
| 2 | |
| 3 | import { useT } from "../lib/i18n"; |
| 4 | import { |
| 5 | NOTIFICATION_VOLUME_MAX, |
| 6 | NOTIFICATION_VOLUME_MIN, |
| 7 | normalizeNotificationVolume, |
| 8 | } from "../lib/sound"; |
| 9 | |
| 10 | export function NotificationVolumeSlider({ |
| 11 | value, |
| 12 | onChange, |
| 13 | }: { |
| 14 | value: number; |
| 15 | onChange: (value: number) => void; |
| 16 | }) { |
| 17 | const t = useT(); |
| 18 | const inputId = useId(); |
| 19 | const normalized = normalizeNotificationVolume(value); |
| 20 | |
| 21 | return ( |
| 22 | <div className="notification-volume-control"> |
| 23 | <input |
| 24 | id={inputId} |
| 25 | type="range" |
| 26 | min={NOTIFICATION_VOLUME_MIN} |
| 27 | max={NOTIFICATION_VOLUME_MAX} |
| 28 | step={5} |
| 29 | value={normalized} |
| 30 | aria-label={t("settings.notificationVolume")} |
| 31 | aria-valuetext={`${normalized}%`} |
| 32 | onChange={(event) => onChange(normalizeNotificationVolume(event.currentTarget.value))} |
| 33 | /> |
| 34 | <output htmlFor={inputId}>{normalized}%</output> |
| 35 | </div> |
| 36 | ); |
| 37 | } |
| 38 |