Skip to content

Commit 3982da6

Browse files
author
Shalom Meoded
authored
fix(FEC-10144): player causes form submit on button click (#512)
 When the player is nested within a form when clicking any button that is in the control bar we get redirected to any form referral.
1 parent 2d9df3b commit 3982da6

File tree

20 files changed

+70
-40
lines changed

20 files changed

+70
-40
lines changed

‎src/components/button/button.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
//@flow
2+
import {h} from 'preact';
3+
import {forwardRef} from 'preact/compat';
4+
5+
const COMPONENT_NAME = 'Button';
6+
/**
7+
* Button component
8+
*
9+
* @const Button
10+
* @example <Button/>
11+
*/
12+
const Button = forwardRef((props, ref) => <button type="button" ref={ref} {...props} />);
13+
14+
Button.displayName = COMPONENT_NAME;
15+
export {Button};

‎src/components/button/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export {Button} from './button';

‎src/components/cast-on-tv/cast-before-play.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {Icon} from '../icon/icon';
88
import {Localizer, Text} from 'preact-i18n';
99
import {withPlayer} from '../player';
1010
import {withLogger} from 'components/logger';
11+
import {Button} from 'components/button';
1112

1213
/**
1314
* mapping state to props
@@ -86,7 +87,7 @@ class CastBeforePlay extends Component {
8687
<div>
8788
<div className={rootStyle.join(' ')}>
8889
<Localizer>
89-
<button
90+
<Button
9091
tabIndex="0"
9192
aria-label={<Text id={'cast.play_on_tv'} />}
9293
onClick={() => this.onClick()}
@@ -97,7 +98,7 @@ class CastBeforePlay extends Component {
9798
<span>
9899
<Text id="cast.play_on_tv" />
99100
</span>
100-
</button>
101+
</Button>
101102
</Localizer>
102103
</div>
103104
</div>

‎src/components/error-overlay/error-overlay.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ import {actions} from '../../reducers/engine';
99
import {CopyButton} from '../copy-button';
1010
import {withLogger} from 'components/logger';
1111
import {withPlayer} from 'components/player';
12+
import {Button} from 'components/button';
1213

1314
/**
1415
* mapping state to props
@@ -101,9 +102,9 @@ class ErrorOverlay extends Component {
101102
if (this.props.player.getMediaInfo()) {
102103
return (
103104
<div className={style.controlButtonContainer} onClick={() => this.handleClick()}>
104-
<button className={[style.controlButton, style.retryBtn].join(' ')}>
105+
<Button className={[style.controlButton, style.retryBtn].join(' ')}>
105106
<Text id="error.retry" />
106-
</button>
107+
</Button>
107108
</div>
108109
);
109110
}

‎src/components/forward/forward.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {withPlayer} from '../player';
88
import {withEventDispatcher} from 'components/event-dispatcher';
99
import {withLogger} from 'components/logger';
1010
import {Tooltip} from 'components/tooltip';
11+
import {Button} from 'components/button';
1112

1213
const COMPONENT_NAME = 'Forward';
1314

@@ -66,14 +67,14 @@ class Forward extends Component {
6667
return (
6768
<div className={[style.controlButtonContainer, style.noIdleControl].join(' ')}>
6869
<Tooltip label={this.props.forwardText}>
69-
<button
70+
<Button
7071
tabIndex="0"
7172
aria-label={this.props.forwardText}
7273
className={`${style.controlButton}`}
7374
ref={this.props.innerRef}
7475
onClick={() => this.onClick()}>
7576
<Icon type={!props.step || props.step === FORWARD_DEFAULT_STEP ? IconType.Forward10 : IconType.Forward} />
76-
</button>
77+
</Button>
7778
</Tooltip>
7879
</div>
7980
);

‎src/components/fullscreen/fullscreen.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {withKeyboardEvent} from 'components/keyboard';
1010
import {withLogger} from 'components/logger';
1111
import {Tooltip} from 'components/tooltip';
1212
import {withEventDispatcher} from 'components/event-dispatcher';
13+
import {Button} from 'components/button';
1314

1415
/**
1516
* mapping state to props
@@ -115,14 +116,14 @@ class Fullscreen extends Component {
115116
return (
116117
<div className={[style.controlButtonContainer, style.controlFullscreen].join(' ')}>
117118
<Tooltip label={this.props.fullscreenText}>
118-
<button
119+
<Button
119120
tabIndex="0"
120121
aria-label={this.props.fullscreenText}
121122
className={this.props.fullscreen ? [style.controlButton, style.isFullscreen].join(' ') : style.controlButton}
122123
onClick={() => this.toggleFullscreen()}>
123124
<Icon type={IconType.Maximize} />
124125
<Icon type={IconType.Minimize} />
125-
</button>
126+
</Button>
126127
</Tooltip>
127128
</div>
128129
);

‎src/components/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,7 @@ export {PlaylistButton} from './playlist-button';
5454
export {PlaylistNextScreen} from './playlist-next-screen';
5555
export {PictureInPicture} from './picture-in-picture';
5656
export {PlaybackControls} from './playback-controls';
57+
export {Button} from './button';
5758

5859
export {Keyboard as KeyboardControl} from './keyboard';
5960
export {Cast, Cast as CastControl};

‎src/components/language/language.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {withEventDispatcher} from 'components/event-dispatcher';
1717
import {KeyMap} from 'utils/key-map';
1818
import {withKeyboardEvent} from 'components/keyboard';
1919
import {Tooltip} from 'components/tooltip';
20+
import {Button} from 'components/button';
2021

2122
/**
2223
* mapping state to props
@@ -207,14 +208,14 @@ class Language extends Component {
207208
return (
208209
<div ref={c => (this._controlLanguageElement = c)} className={[style.controlButtonContainer, style.controlLanguage].join(' ')}>
209210
<Tooltip label={this.props.buttonLabel}>
210-
<button
211+
<Button
211212
tabIndex="0"
212213
aria-haspopup="true"
213214
aria-label={this.props.buttonLabel}
214215
className={this.state.smartContainerOpen ? [style.controlButton, style.active].join(' ') : style.controlButton}
215216
onClick={() => this.onControlButtonClick()}>
216217
<Icon type={IconType.Language} />
217-
</button>
218+
</Button>
218219
</Tooltip>
219220
{!this.state.smartContainerOpen || this.state.cvaaOverlay ? (
220221
undefined

‎src/components/picture-in-picture-overlay/picture-in-picture-overlay.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ import {connect} from 'react-redux';
55
import {Localizer, Text} from 'preact-i18n';
66
import {withPlayer} from '../player';
77
import {withLogger} from 'components/logger';
8-
8+
import {Button} from 'components/button';
99
/**
1010
* mapping state to props
1111
* @param {*} state - redux store state
@@ -74,9 +74,9 @@ class PictureInPictureOverlay extends Component {
7474
</span>
7575
</Localizer>
7676
<Localizer>
77-
<button tabIndex="0" className={[style.pictureInPictureButton, style.controlButton].join(' ')} onClick={() => this._handleClick()}>
77+
<Button tabIndex="0" className={[style.pictureInPictureButton, style.controlButton].join(' ')} onClick={() => this._handleClick()}>
7878
<Text id="pictureInPicture.overlay_button" />
79-
</button>
79+
</Button>
8080
</Localizer>
8181
</div>
8282
</div>

‎src/components/picture-in-picture/picture-in-picture.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {KeyMap} from 'utils/key-map';
1111
import {withKeyboardEvent} from 'components/keyboard';
1212
import {withEventDispatcher} from 'components/event-dispatcher';
1313
import {Tooltip} from 'components/tooltip';
14+
import {Button} from 'components/button';
1415

1516
/**
1617
* mapping state to props
@@ -87,13 +88,13 @@ class PictureInPicture extends Component {
8788
return (
8889
<div className={[style.controlButtonContainer, style.pictureInPicture].join(' ')}>
8990
<Tooltip label={this.props.pipText}>
90-
<button
91+
<Button
9192
tabIndex="0"
9293
aria-label={this.props.pipText}
9394
className={`${style.controlButton} ${this.state.animation ? style.rotate : ''}`}
9495
onClick={() => this.togglePip()}>
9596
<Icon type={IconType.PictureInPicture} />
96-
</button>
97+
</Button>
9798
</Tooltip>
9899
</div>
99100
);

‎src/components/play-pause/play-pause.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {bindActions} from 'utils/bind-actions';
1414
import {actions as settingActions} from 'reducers/settings';
1515
import {actions as overlayIconActions} from 'reducers/overlay-action';
1616
import {Tooltip} from 'components/tooltip';
17+
import {Button} from 'components/button';
1718

1819
/**
1920
* mapping state to props
@@ -98,7 +99,7 @@ class PlayPause extends Component {
9899
return (
99100
<div className={[style.controlButtonContainer, style.controlPlayPause].join(' ')}>
100101
<Tooltip label={labelText}>
101-
<button tabIndex="0" aria-label={labelText} className={controlButtonClass} onClick={() => this.togglePlayPause()}>
102+
<Button tabIndex="0" aria-label={labelText} className={controlButtonClass} onClick={() => this.togglePlayPause()}>
102103
{isStartOver ? (
103104
<Icon type={IconType.StartOver} />
104105
) : (
@@ -107,7 +108,7 @@ class PlayPause extends Component {
107108
<Icon type={IconType.Pause} />
108109
</div>
109110
)}
110-
</button>
111+
</Button>
111112
</Tooltip>
112113
</div>
113114
);

‎src/components/playlist-button/playlist-button.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import {default as Icon, IconType} from '../icon';
66
import {connect} from 'react-redux';
77
import {withPlayer} from '../player';
88
import {Tooltip} from 'components/tooltip';
9-
9+
import {Button} from 'components/button';
1010
/**
1111
* mapping state to props
1212
* @param {*} state - redux store state
@@ -86,7 +86,7 @@ class PlaylistButton extends Component {
8686
*/
8787
bottomBarButton(item: any, type: string): React$Element<any> {
8888
return (
89-
<button
89+
<Button
9090
disabled={!item}
9191
tabIndex="0"
9292
aria-label={this.props[`${type}ControlsText`]}
@@ -101,7 +101,7 @@ class PlaylistButton extends Component {
101101
<Icon type={IconType.Next} />
102102
</div>
103103
)}
104-
</button>
104+
</Button>
105105
);
106106
}
107107
}

‎src/components/playlist-countdown/playlist-countdown.js

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import {withLogger} from 'components/logger';
1010
import {bindActions} from '../../utils/bind-actions';
1111
import {actions} from 'reducers/playlist';
1212
import {withEventManager} from 'event/with-event-manager';
13-
13+
import {Button} from 'components/button';
1414
/**
1515
* mapping state to props
1616
* @param {*} state - redux store state
@@ -263,7 +263,7 @@ class PlaylistCountdown extends Component {
263263
</Localizer>
264264
<div className={[style.controlButtonContainer, style.playlistCountdownCancel].join(' ')}>
265265
<Localizer>
266-
<button
266+
<Button
267267
tabIndex={this.state.focusable ? 0 : -1}
268268
aria-label={<Text id="playlist.cancel" />}
269269
className={[style.controlButton, style.playlistCountdownCancelButton].join(' ')}
@@ -274,7 +274,7 @@ class PlaylistCountdown extends Component {
274274
}
275275
}}>
276276
<Icon type={IconType.Close} />
277-
</button>
277+
</Button>
278278
</Localizer>
279279
</div>
280280
<div className={style.playlistCountdownIndicatorBar}>

‎src/components/pre-playback-play-overlay/pre-playback-play-overlay.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import {withPlayer} from '../player';
1111
import {withEventDispatcher} from 'components/event-dispatcher';
1212
import {withLogger} from 'components/logger';
1313
import {Tooltip} from 'components/tooltip';
14+
import {Button} from 'components/button';
1415

1516
/**
1617
* mapping state to props
@@ -71,7 +72,7 @@ class PrePlaybackPlayOverlay extends Component {
7172
const labelText = props.isPlaybackEnded ? props.startOverText : props.playText;
7273
return (
7374
<div className={style.prePlaybackPlayOverlay} onMouseOver={e => e.stopPropagation()} onClick={() => this.handleClick()}>
74-
<button
75+
<Button
7576
className={style.prePlaybackPlayButton}
7677
tabIndex="0"
7778
aria-label={labelText}
@@ -81,7 +82,7 @@ class PrePlaybackPlayOverlay extends Component {
8182
}
8283
}}>
8384
<Tooltip label={labelText}>{props.isPlaybackEnded ? <Icon type={IconType.StartOver} /> : <Icon type={IconType.Play} />}</Tooltip>
84-
</button>
85+
</Button>
8586
</div>
8687
);
8788
}

‎src/components/rewind/rewind.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import {withPlayer} from '../player';
88
import {withEventDispatcher} from 'components/event-dispatcher';
99
import {withLogger} from 'components/logger';
1010
import {Tooltip} from 'components/tooltip';
11+
import {Button} from 'components/button';
1112

1213
const COMPONENT_NAME = 'Rewind';
1314

@@ -65,14 +66,14 @@ class Rewind extends Component {
6566
return (
6667
<div className={[style.controlButtonContainer, style.noIdleControl].join(' ')}>
6768
<Tooltip label={this.props.rewindText}>
68-
<button
69+
<Button
6970
tabIndex="0"
7071
aria-label={this.props.rewindText}
7172
className={`${style.controlButton}`}
7273
ref={this.props.innerRef}
7374
onClick={() => this.onClick()}>
7475
<Icon type={!props.step || props.step === REWIND_DEFAULT_STEP ? IconType.Rewind10 : IconType.Rewind} />
75-
</button>
76+
</Button>
7677
</Tooltip>
7778
</div>
7879
);

‎src/components/settings/settings.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,7 @@ import {KeyMap} from 'utils/key-map';
1717
import {SpeedSelectedEvent} from 'event/events/speed-selected-event';
1818
import {actions as overlayIconActions} from 'reducers/overlay-action';
1919
import {Tooltip} from 'components/tooltip';
20+
import {Button} from 'components/button';
2021

2122
/**
2223
* mapping state to props
@@ -293,13 +294,13 @@ class Settings extends Component {
293294
return (
294295
<div ref={c => (this._controlSettingsElement = c)} className={[style.controlButtonContainer, style.controlSettings].join(' ')}>
295296
<Tooltip label={props.buttonLabel}>
296-
<button
297+
<Button
297298
tabIndex="0"
298299
aria-label={props.buttonLabel}
299300
className={this.state.smartContainerOpen ? [style.controlButton, style.active].join(' ') : style.controlButton}
300301
onClick={() => this.onControlButtonClick()}>
301302
<Icon type={IconType.Settings} />
302-
</button>
303+
</Button>
303304
</Tooltip>
304305
{!this.state.smartContainerOpen ? (
305306
''

‎src/components/share-overlay/share-overlay.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import {CopyButton} from '../copy-button/copy-button';
1212
import {withLogger} from 'components/logger';
1313
import {withKeyboardA11y} from 'utils/popup-keyboard-accessibility';
1414
import {KeyMap} from 'utils/key-map';
15+
import {Button} from 'components/button';
1516

1617
/**
1718
* mapping state to props
@@ -53,7 +54,7 @@ const ShareButton = (props: Object): React$Element<any> => {
5354
};
5455

5556
return (
56-
<button
57+
<Button
5758
ref={el => {
5859
props.addAccessibleChild(el);
5960
}}
@@ -63,7 +64,7 @@ const ShareButton = (props: Object): React$Element<any> => {
6364
className={[style.btnRounded, style[props.config.iconType], props.config.iconType].join(' ')}
6465
onClick={() => share()}>
6566
<Icon style={props.config.iconType === 'svg' ? `background-image: url(${props.config.svg})` : ``} type={props.config.iconType} />
66-
</button>
67+
</Button>
6768
);
6869
};
6970

@@ -339,7 +340,7 @@ class ShareOverlay extends Component {
339340
</a>
340341
</Localizer>
341342
<Localizer>
342-
<button
343+
<Button
343344
aria-haspopup="true"
344345
ref={el => {
345346
this.props.addAccessibleChild(el);
@@ -348,7 +349,7 @@ class ShareOverlay extends Component {
348349
onClick={() => this._transitionToState(shareOverlayView.EmbedOptions)}
349350
title={<Text id="share.embed" />}>
350351
<Icon type={IconType.Embed} />
351-
</button>
352+
</Button>
352353
</Localizer>
353354
</div>
354355
<div className={style.linkOptionsContainer}>

0 commit comments

Comments
 (0)