From 449dd24b7ffddb1235aa0ad5067e1aa0379f08c0 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Fri, 23 Aug 2019 00:03:17 -0400
Subject: [PATCH] Updated Video component added aspect ratio for sizing

---
 app/javascript/gabsocial/components/status.js    |  1 +
 .../report/components/status_check_box.js        |  1 +
 .../status/components/detailed_status.js         |  1 +
 app/javascript/gabsocial/features/video/index.js | 16 +++++++++++++---
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/app/javascript/gabsocial/components/status.js b/app/javascript/gabsocial/components/status.js
index 58389e1a..091ad617 100644
--- a/app/javascript/gabsocial/components/status.js
+++ b/app/javascript/gabsocial/components/status.js
@@ -344,6 +344,7 @@ class Status extends ImmutablePureComponent {
                 blurhash={video.get('blurhash')}
                 src={video.get('url')}
                 alt={video.get('description')}
+                aspectRatio={video.getIn(['meta', 'small', 'aspect'])}
                 width={this.props.cachedMediaWidth}
                 height={110}
                 inline
diff --git a/app/javascript/gabsocial/features/report/components/status_check_box.js b/app/javascript/gabsocial/features/report/components/status_check_box.js
index c29e517d..9991216d 100644
--- a/app/javascript/gabsocial/features/report/components/status_check_box.js
+++ b/app/javascript/gabsocial/features/report/components/status_check_box.js
@@ -38,6 +38,7 @@ export default class StatusCheckBox extends React.PureComponent {
                 blurhash={video.get('blurhash')}
                 src={video.get('url')}
                 alt={video.get('description')}
+                aspectRatio={video.getIn(['meta', 'small', 'aspect'])}
                 width={239}
                 height={110}
                 inline
diff --git a/app/javascript/gabsocial/features/status/components/detailed_status.js b/app/javascript/gabsocial/features/status/components/detailed_status.js
index b8f2f773..7b87b54b 100644
--- a/app/javascript/gabsocial/features/status/components/detailed_status.js
+++ b/app/javascript/gabsocial/features/status/components/detailed_status.js
@@ -111,6 +111,7 @@ export default class DetailedStatus extends ImmutablePureComponent {
             blurhash={video.get('blurhash')}
             src={video.get('url')}
             alt={video.get('description')}
+            aspectRatio={video.getIn(['meta', 'small', 'aspect'])}
             width={300}
             height={150}
             inline
diff --git a/app/javascript/gabsocial/features/video/index.js b/app/javascript/gabsocial/features/video/index.js
index 64a24cbe..17deea6a 100644
--- a/app/javascript/gabsocial/features/video/index.js
+++ b/app/javascript/gabsocial/features/video/index.js
@@ -8,6 +8,7 @@ import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/full
 import { displayMedia } from '../../initial_state';
 import Icon from 'gabsocial/components/icon';
 import { decode } from 'blurhash';
+import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from '../../utils/media_aspect_ratio';
 
 const messages = defineMessages({
   play: { id: 'video.play', defaultMessage: 'Play' },
@@ -107,6 +108,7 @@ class Video extends React.PureComponent {
     intl: PropTypes.object.isRequired,
     blurhash: PropTypes.string,
     link: PropTypes.node,
+    aspectRatio: PropTypes.number,
   };
 
   state = {
@@ -373,7 +375,7 @@ class Video extends React.PureComponent {
   }
 
   render () {
-    const { preview, src, inline, startTime, onOpenVideo, onCloseVideo, intl, alt, detailed, sensitive, link } = this.props;
+    const { preview, src, inline, startTime, onOpenVideo, onCloseVideo, intl, alt, detailed, sensitive, link, aspectRatio } = this.props;
     const { containerWidth, currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
     const progress = (currentTime / duration) * 100;
 
@@ -384,8 +386,16 @@ class Video extends React.PureComponent {
     let { width, height } = this.props;
 
     if (inline && containerWidth) {
-      width  = containerWidth;
-      height = containerWidth / (16/9);
+      width = containerWidth;
+      const minSize = containerWidth / (16/9);
+
+      if (isPanoramic(aspectRatio)) {
+        height = Math.max(Math.floor(containerWidth / maximumAspectRatio), minSize);
+      } else if (isPortrait(aspectRatio)) {
+        height = Math.max(Math.floor(containerWidth / minimumAspectRatio), minSize);
+      } else {
+        height = Math.floor(containerWidth / aspectRatio);
+      }
 
       playerStyle.height = height;
     }