123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657 |
- import React from 'react';
- import styles from './Volume.css';
- import VolumeOff from './../Icon/volume_off.svg';
- import VolumeUp from './../Icon/volume_up.svg';
-
- export default ({ onChange, onClick, volume, muted, className, ariaLabelMute, ariaLabelUnmute, ariaLabelVolume }) => {
- const volumeValue = muted || !volume
- ? 0
- : +volume;
- const isSilent = muted || volume <= 0;
- return (
- <div className={[
- styles.component,
- className
- ].join(' ')}>
- <button
- aria-label={isSilent
- ? ariaLabelUnmute
- : ariaLabelMute}
- className={styles.button}
- onClick={onClick}
- type="button">
- { isSilent
- ? <VolumeOff
- height={34}
- width={34}
- className={styles.icon}
- fill="#fff" />
- : <VolumeUp
- height={34}
- width={34}
- className={styles.icon}
- fill="#fff"/> }
- </button>
- <div className={styles.slider}>
- <div className={styles.track}>
- <div
- className={styles.fill}
- style={{
- height: `${volumeValue * 100}%`
- }} />
- <input
- min="0"
- step={0.1}
- max="1"
- type="range"
- orient="vertical"
- onChange={onChange}
- aria-label={ariaLabelVolume}
- className={styles.input}
- value={volumeValue} />
- </div>
- </div>
- </div>
- );
- };
|