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

Render placeholder when inline video container width isn't known

remotes/1727458204337373841/tmp_refs/heads/signup-info-prompt
Thibaut Girka 2018-11-22 16:50:33 +01:00 committed by ThibG
parent 0d3612482e
commit b41d60f2d8
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

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