|
|
|
@ -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> |
|
|
|
|