Render placeholder when inline video container width isn't known

1 files changed, 7 insertions, 3 deletions

diff --git a/app/javascript/flavours/glitch/features/video/index.js b/app/javascript/flavours/glitch/features/video/index.js
index 4f95aea96..4c2e5e62b 100644
--- a/app/javascript/flavours/glitch/features/video/index.js
+++ b/app/javascript/flavours/glitch/features/video/index.js
@@ -120,7 +120,7 @@ export default class Video extends React.PureComponent {
   setPlayerRef = c => {
     this.player = c;
 
-    if (c) {
+    if (c && c.offsetWidth && c.offsetWidth != this.state.containerWidth) {
       this.setState({
         containerWidth: c.offsetWidth,
       });
@@ -220,7 +220,7 @@ export default class Video extends React.PureComponent {
   }
 
   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({
         containerWidth: this.player.offsetWidth,
       });
@@ -294,6 +294,8 @@ export default class Video extends React.PureComponent {
     const progress = (currentTime / duration) * 100;
     const playerStyle = {};
 
+    const computedClass = classNames('video-player', { inactive: !revealed, detailed, inline: inline && !fullscreen, fullscreen, letterbox, 'full-width': fullwidth });
+
     let { width, height } = this.props;
 
     if (inline && containerWidth) {
@@ -302,6 +304,8 @@ export default class Video extends React.PureComponent {
 
       playerStyle.width  = width;
       playerStyle.height = height;
+    } else if (inline) {
+      return (<div className={computedClass} ref={this.setPlayerRef} tabindex={0}></div>);
     }
 
     let warning;
@@ -322,7 +326,7 @@ export default class Video extends React.PureComponent {
 
     return (
       <div
-        className={classNames('video-player', { inactive: !revealed, detailed, inline: inline && !fullscreen, fullscreen, letterbox, 'full-width': fullwidth })}
+        className={computedClass}
         style={playerStyle}
         ref={this.setPlayerRef}
         onMouseEnter={this.handleMouseEnter}