|
|
|
@ -476,7 +476,7 @@ class Audio extends React.PureComponent {
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className={classNames('audio-player', { editable, inactive: !revealed })} ref={this.setPlayerRef} style={{ backgroundColor: this._getBackgroundColor(), color: this._getForegroundColor(), width: '100%', height: this.props.fullscreen ? '100%' : (this.state.height || this.props.height) }} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} tabIndex='0' onKeyDown={this.handleKeyDown}>
|
|
|
|
|
<div className={classNames('audio-player', { editable, inactive: !revealed })} ref={this.setPlayerRef} style={{ backgroundColor: this._getBackgroundColor(), color: this._getForegroundColor(), width: '100%', height: this.props.fullscreen ? '100%' : (this.state.height || this.props.height) }} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave} tabIndex={0} onKeyDown={this.handleKeyDown}>
|
|
|
|
|
|
|
|
|
|
<Blurhash
|
|
|
|
|
hash={blurhash}
|
|
|
|
@ -499,7 +499,7 @@ class Audio extends React.PureComponent {
|
|
|
|
|
|
|
|
|
|
<canvas
|
|
|
|
|
role='button'
|
|
|
|
|
tabIndex='0'
|
|
|
|
|
tabIndex={0}
|
|
|
|
|
className='audio-player__canvas'
|
|
|
|
|
width={this.state.width}
|
|
|
|
|
height={this.state.height}
|
|
|
|
@ -532,7 +532,7 @@ class Audio extends React.PureComponent {
|
|
|
|
|
|
|
|
|
|
<span
|
|
|
|
|
className={classNames('video-player__seek__handle', { active: dragging })}
|
|
|
|
|
tabIndex='0'
|
|
|
|
|
tabIndex={0}
|
|
|
|
|
style={{ left: `${progress}%`, backgroundColor: this._getAccentColor() }}
|
|
|
|
|
onKeyDown={this.handleAudioKeyDown}
|
|
|
|
|
/>
|
|
|
|
@ -549,7 +549,7 @@ class Audio extends React.PureComponent {
|
|
|
|
|
|
|
|
|
|
<span
|
|
|
|
|
className='video-player__volume__handle'
|
|
|
|
|
tabIndex='0'
|
|
|
|
|
tabIndex={0}
|
|
|
|
|
style={{ left: `${volume * 100}%`, backgroundColor: this._getAccentColor() }}
|
|
|
|
|
/>
|
|
|
|
|
</div>
|
|
|
|
|