treehouse
/
mastodon
22
8
Fork 5
Code Issues 32 Pull Requests Projects 1 Releases Wiki Activity

[Glitch] Add variable autoFocus to video 

Port 2195f21524 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>
pull/53/head
Akira Ouchi 2023-01-09 11:52:37 +09:00 committed by Claire
parent 9765d2b3f8
commit b6a928cd04
2 changed files with 4 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/javascript/flavours/glitch/features/ui/components/video_modal.js
View File

@ -50,6 +50,7 @@ export default class VideoModal extends ImmutablePureComponent {
autoPlay={options.autoPlay}
volume={options.defaultVolume}
onCloseVideo={onClose}
autoFocus
detailed
alt={media.get('description')}
/>

5
app/javascript/flavours/glitch/features/video/index.js
View File

@ -124,6 +124,7 @@ class Video extends React.PureComponent {
volume: PropTypes.number,
muted: PropTypes.bool,
componentIndex: PropTypes.number,
autoFocus: PropTypes.bool,
};
static defaultProps = {
@ -537,7 +538,7 @@ class Video extends React.PureComponent {
}
render () {
const { preview, src, inline, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth, detailed, sensitive, editable, blurhash } = this.props;
const { preview, src, inline, onOpenVideo, onCloseVideo, intl, alt, letterbox, fullwidth, detailed, sensitive, editable, blurhash, autoFocus } = this.props;
const { containerWidth, currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
const progress = Math.min((currentTime / duration) * 100, 100);
const playerStyle = {};
@ -635,7 +636,7 @@ class Video extends React.PureComponent {
<div className='video-player__buttons-bar'>
<div className='video-player__buttons left'>
<button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay} autoFocus={detailed}><Icon id={paused ? 'play' : 'pause'} fixedWidth /></button>
<button type='button' title={intl.formatMessage(paused ? messages.play : messages.pause)} aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} className='player-button' onClick={this.togglePlay} autoFocus={autoFocus}><Icon id={paused ? 'play' : 'pause'} fixedWidth /></button>
<button type='button' title={intl.formatMessage(muted ? messages.unmute : messages.mute)} aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} className='player-button' onClick={this.toggleMute}><Icon id={muted ? 'volume-off' : 'volume-up'} fixedWidth /></button>
<div className={classNames('video-player__volume', { active: this.state.hovered })} onMouseDown={this.handleVolumeMouseDown} ref={this.setVolumeRef}>