Force videos to be set dimensions.

web/react/components/view_image.jsx

@@ -1,10 +1,11 @@
 // Copyright (c) 2015 Spinpunch, Inc. All Rights Reserved.
 // See License.txt for license information.
 
-var Client = require('../utils/client.jsx');
+const Client = require('../utils/client.jsx');
-var Utils = require('../utils/utils.jsx');
+const Utils = require('../utils/utils.jsx');
-var ViewImagePopoverBar = require('./view_image_popover_bar.jsx');
+const Constants = require('../utils/constants.jsx');
-var Modal = ReactBootstrap.Modal;
+const ViewImagePopoverBar = require('./view_image_popover_bar.jsx');
+const Modal = ReactBootstrap.Modal;
 
 export default class ViewImageModal extends React.Component {
     constructor(props) {
@@ -200,11 +201,20 @@ export default class ViewImageModal extends React.Component {
                     </a>
                 );
             } else if (fileType === 'video' || fileType === 'audio') {
+                let width = Constants.WEB_VIDEO_WIDTH;
+                let height = Constants.WEB_VIDEO_HEIGHT;
+                if (Utils.isMobile()) {
+                    width = Constants.MOBILE_VIDEO_WIDTH;
+                    height = Constants.MOBILE_VIDEO_HEIGHT;
+                }
+
                 content = (
                     <video
                         ref='video'
                         data-setup='{}'
                         controls='controls'
+                        width={width}
+                        height={height}
                     >
                         <source src={Utils.getWindowLocationOrigin() + '/api/v1/files/get' + filename} />
                     </video>

web/react/utils/constants.jsx

@@ -72,6 +72,10 @@ module.exports = {
     MAX_FILE_SIZE: 50000000, // 50 MB
     THUMBNAIL_WIDTH: 128,
     THUMBNAIL_HEIGHT: 100,
+    WEB_VIDEO_WIDTH: 640,
+    WEB_VIDEO_HEIGHT: 480,
+    MOBILE_VIDEO_WIDTH: 480,
+    MOBILE_VIDEO_HEIGHT: 360,
     DEFAULT_CHANNEL: 'town-square',
     OFFTOPIC_CHANNEL: 'off-topic',
     GITLAB_SERVICE: 'gitlab',