File manager - Edit - /var/www/payraty/helpdesk/common/resources/client/player/ui/controls/volume-controls.tsx
Back
import {Slider} from '@common/ui/forms/slider/slider'; import {usePlayerActions} from '@common/player/hooks/use-player-actions'; import {usePlayerStore} from '@common/player/hooks/use-player-store'; import {IconButton} from '@common/ui/buttons/icon-button'; import {BaseSliderProps} from '@common/ui/forms/slider/base-slider'; import {ButtonProps} from '@common/ui/buttons/button'; import {MediaMuteIcon} from '@common/icons/media/media-mute'; import {MediaVolumeLowIcon} from '@common/icons/media/media-volume-low'; import {MediaVolumeHighIcon} from '@common/icons/media/media-volume-high'; import {Tooltip} from '@common/ui/tooltip/tooltip'; import {Trans} from '@common/i18n/trans'; import clsx from 'clsx'; interface Props { trackColor?: BaseSliderProps['trackColor']; fillColor?: BaseSliderProps['fillColor']; buttonColor?: ButtonProps['color']; className?: string; } export function VolumeControls({ trackColor, fillColor, buttonColor, className, }: Props) { const volume = usePlayerStore(s => s.volume); const player = usePlayerActions(); const playerReady = usePlayerStore(s => s.providerReady); return ( <div className={clsx('flex w-min items-center gap-4', className)}> <ToggleMuteButton color={buttonColor} /> <Slider isDisabled={!playerReady} showThumbOnHoverOnly thumbSize="w-14 h-14" trackColor={trackColor} fillColor={fillColor} minValue={0} maxValue={100} className="flex-auto" width="w-96" value={volume} onChange={value => { player.setVolume(value); }} /> </div> ); } interface ToggleMuteButtonProps { color?: ButtonProps['color']; size?: ButtonProps['size']; iconSize?: ButtonProps['size']; } export function ToggleMuteButton({ color, size = 'sm', iconSize = 'md', }: ToggleMuteButtonProps) { const isMuted = usePlayerStore(s => s.muted); const volume = usePlayerStore(s => s.volume); const player = usePlayerActions(); const playerReady = usePlayerStore(s => s.providerReady); if (isMuted) { return ( <Tooltip label={<Trans message="Unmute" />} usePortal={false}> <IconButton disabled={!playerReady} color={color} size={size} iconSize={iconSize} onClick={() => player.setMuted(false)} > <MediaMuteIcon /> </IconButton> </Tooltip> ); } return ( <Tooltip label={<Trans message="Mute" />}> <IconButton disabled={!playerReady} color={color} size={size} iconSize={iconSize} onClick={() => player.setMuted(true)} > {volume < 40 ? <MediaVolumeLowIcon /> : <MediaVolumeHighIcon />} </IconButton> </Tooltip> ); }
| ver. 1.4 |
Github
|
.
| PHP 8.3.30 | Generation time: 0 |
proxy
|
phpinfo
|
Settings