Reduce discrepancies with upstream in Video component (#3018)

app/javascript/flavours/glitch/components/status.jsx

@@ -602,6 +602,7 @@ class Status extends ImmutablePureComponent {
             {Component => (<Component
               preview={attachment.get('preview_url')}
               frameRate={attachment.getIn(['meta', 'original', 'frame_rate'])}
+              aspectRatio={`${attachment.getIn(['meta', 'original', 'width'])} / ${attachment.getIn(['meta', 'original', 'height'])}`}
               blurhash={attachment.get('blurhash')}
               src={attachment.get('url')}
               alt={description}

app/javascript/flavours/glitch/features/status/components/detailed_status.tsx

@@ -238,7 +238,6 @@ export const DetailedStatus: React.FC<{
           src={attachment.get('url')}
           alt={description}
           lang={language}
-          inline
           width={300}
           height={150}
           onOpenVideo={handleOpenVideo}
@@ -248,7 +247,6 @@ export const DetailedStatus: React.FC<{
           matchedFilters={status.get('matched_media_filters')}
           letterbox={letterboxMedia}
           fullwidth={fullwidthMedia}
-          preventPlayback={!expanded}
         />
       );
       mediaIcons.push('video-camera');

app/javascript/flavours/glitch/features/video/index.jsx

@@ -115,6 +115,7 @@ class Video extends PureComponent {
   static propTypes = {
     preview: PropTypes.string,
     frameRate: PropTypes.string,
+    aspectRatio: PropTypes.string,
     src: PropTypes.string.isRequired,
     alt: PropTypes.string,
     lang: PropTypes.string,
@@ -123,13 +124,11 @@ class Video extends PureComponent {
     onOpenVideo: PropTypes.func,
     onCloseVideo: PropTypes.func,
     detailed: PropTypes.bool,
-    inline: PropTypes.bool,
     editable: PropTypes.bool,
     alwaysVisible: PropTypes.bool,
     visible: PropTypes.bool,
     letterbox: PropTypes.bool,
     fullwidth: PropTypes.bool,
-    preventPlayback: PropTypes.bool,
     onToggleVisibility: PropTypes.func,
     deployPictureInPicture: PropTypes.func,
     intl: PropTypes.object.isRequired,
@@ -399,8 +398,8 @@ class Video extends PureComponent {
     }
   }
 
-  componentDidUpdate (prevProps) {
+  componentDidUpdate (prevProps, prevState) {
-    if (this.video && this.state.revealed && this.props.preventPlayback && !prevProps.preventPlayback) {
+    if (prevState.revealed && !this.state.revealed && this.video) {
       this.video.pause();
     }
   }
@@ -471,10 +470,6 @@ class Video extends PureComponent {
   };
 
   toggleReveal = () => {
-    if (this.state.revealed) {
-      this.setState({ paused: true });
-    }
-
     if (this.props.onToggleVisibility) {
       this.props.onToggleVisibility();
     } else {
@@ -543,17 +538,11 @@ class Video extends PureComponent {
   }
 
   render () {
-    const { preview, src, inline, onOpenVideo, onCloseVideo, intl, alt, lang, letterbox, fullwidth, detailed, sensitive, editable, blurhash, autoFocus, matchedFilters } = this.props;
+    const { preview, src, aspectRatio, onOpenVideo, onCloseVideo, intl, alt, lang, letterbox, fullwidth, detailed, sensitive, editable, blurhash, autoFocus, matchedFilters } = this.props;
     const { currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, revealed } = this.state;
     const progress = Math.min((currentTime / duration) * 100, 100);
     const muted = this.state.muted || volume === 0;
 
-    const playerStyle = {};
-
-    if (inline) {
-      playerStyle.aspectRatio = '16 / 9';
-    }
-
     let preload;
 
     if (this.props.currentTime || fullscreen || dragging) {
@@ -564,11 +553,13 @@ class Video extends PureComponent {
       preload = 'none';
     }
 
+    // The outer wrapper is necessary to avoid reflowing the layout when going into full screen
     return (
+      <div style={{ aspectRatio }}>
         <div
           role='menuitem'
-        className={classNames('video-player', { inactive: !revealed, detailed, inline: inline && !fullscreen, fullscreen, editable, letterbox, 'full-width': fullwidth })}
+          className={classNames('video-player', { inactive: !revealed, detailed, fullscreen, editable, letterbox, 'full-width': fullwidth })}
-        style={playerStyle}
+          style={{ aspectRatio }}
           ref={this.setPlayerRef}
           onMouseEnter={this.handleMouseEnter}
           onMouseLeave={this.handleMouseLeave}
@@ -601,7 +592,7 @@ class Video extends PureComponent {
             onLoadedData={this.handleLoadedData}
             onProgress={this.handleProgress}
             onVolumeChange={this.handleVolumeChange}
-          style={{ ...playerStyle, width: '100%' }}
+            style={{ width: '100%' }}
           />}
 
           <SpoilerButton hidden={revealed || editable} sensitive={sensitive} onClick={this.toggleReveal} matchedFilters={matchedFilters} />
@@ -652,6 +643,7 @@ class Video extends PureComponent {
             </div>
           </div>
         </div>
+      </div>
     );
   }