Render placeholder when inline video container width isn't known

th-downstream
Thibaut Girka 6 years ago committed by ThibG
parent e80f770118
commit b8018a1bcb

@ -120,7 +120,7 @@ export default class Video extends React.PureComponent {
setPlayerRef = c => { setPlayerRef = c => {
this.player = c; this.player = c;
if (c) { if (c && c.offsetWidth && c.offsetWidth != this.state.containerWidth) {
this.setState({ this.setState({
containerWidth: c.offsetWidth, containerWidth: c.offsetWidth,
}); });
@ -220,7 +220,7 @@ export default class Video extends React.PureComponent {
} }
componentDidUpdate (prevProps) { componentDidUpdate (prevProps) {
if (this.player && this.player.offsetWidth && !this.state.fullscreen) { if (this.player && this.player.offsetWidth && this.player.offsetWidth != this.state.containerWidth && !this.state.fullscreen) {
this.setState({ this.setState({
containerWidth: this.player.offsetWidth, containerWidth: this.player.offsetWidth,
}); });
@ -294,6 +294,8 @@ export default class Video extends React.PureComponent {
const progress = (currentTime / duration) * 100; const progress = (currentTime / duration) * 100;
const playerStyle = {}; const playerStyle = {};
const computedClass = classNames('video-player', { inactive: !revealed, detailed, inline: inline && !fullscreen, fullscreen, letterbox, 'full-width': fullwidth });
let { width, height } = this.props; let { width, height } = this.props;
if (inline && containerWidth) { if (inline && containerWidth) {
@ -302,6 +304,8 @@ export default class Video extends React.PureComponent {
playerStyle.width = width; playerStyle.width = width;
playerStyle.height = height; playerStyle.height = height;
} else if (inline) {
return (<div className={computedClass} ref={this.setPlayerRef} tabindex={0}></div>);
} }
let warning; let warning;
@ -322,7 +326,7 @@ export default class Video extends React.PureComponent {
return ( return (
<div <div
className={classNames('video-player', { inactive: !revealed, detailed, inline: inline && !fullscreen, fullscreen, letterbox, 'full-width': fullwidth })} className={computedClass}
style={playerStyle} style={playerStyle}
ref={this.setPlayerRef} ref={this.setPlayerRef}
onMouseEnter={this.handleMouseEnter} onMouseEnter={this.handleMouseEnter}

Loading…
Cancel
Save