Merge pull request #5677 from matrix-org/jryans/revert-url-image-layout

Revert "Improve URL preview formatting and image upload thumbnail size"

Author: jryans

res/css/views/messages/_MVideoBody.scss

@@ -17,7 +17,7 @@ limitations under the License.
 span.mx_MVideoBody {
     video.mx_MVideoBody {
         max-width: 100%;
-        max-height: 300px;
+        height: auto;
         border-radius: 4px;
     }
 }

res/css/views/rooms/_LinkPreviewWidget.scss

@@ -19,8 +19,6 @@ limitations under the License.
     margin-right: 15px;
     margin-bottom: 15px;
     display: flex;
-    flex-direction: column;
-    max-width: 360px;
     border-left: 4px solid $preview-widget-bar-color;
     color: $preview-widget-fg-color;
 }
@@ -57,9 +55,6 @@ limitations under the License.
     cursor: pointer;
     width: 18px;
     height: 18px;
-    padding: 0px 5px 5px 5px;
-    margin-left: auto;
-    margin-right: 0px;
 
     img {
         flex: 0 0 40px;

src/components/views/messages/MImageBody.js

@@ -362,7 +362,7 @@ export default class MImageBody extends React.Component {
         }
 
         // The maximum height of the thumbnail as it is rendered as an <img>
-        const maxHeight = Math.min(this.props.maxImageHeight || 240, infoHeight);
+        const maxHeight = Math.min(this.props.maxImageHeight || 600, infoHeight);
         // The maximum width of the thumbnail, as dictated by its natural
         // maximum height.
         const maxWidth = infoWidth * maxHeight / infoHeight;

src/components/views/rooms/LinkPreviewWidget.js

@@ -107,7 +107,7 @@ export default class LinkPreviewWidget extends React.Component {
         if (!SettingsStore.getValue("showImages")) {
             image = null; // Don't render a button to show the image, just hide it outright
         }
-        const imageMaxWidth = 320; const imageMaxHeight = 240;
+        const imageMaxWidth = 100; const imageMaxHeight = 100;
         if (image && image.startsWith("mxc://")) {
             image = MatrixClientPeg.get().mxcUrlToHttp(image, imageMaxWidth, imageMaxHeight);
         }
@@ -134,10 +134,6 @@ export default class LinkPreviewWidget extends React.Component {
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
         return (
             <div className="mx_LinkPreviewWidget">
-                <AccessibleButton className="mx_LinkPreviewWidget_cancel" onClick={this.props.onCancelClick} aria-label={_t("Close preview")}>
-                    <img className="mx_filterFlipColor" alt="" role="presentation"
-                        src={require("../../../../res/img/cancel.svg")} width="18" height="18" />
-                </AccessibleButton>
                 { img }
                 <div className="mx_LinkPreviewWidget_caption">
                     <div className="mx_LinkPreviewWidget_title"><a href={this.props.link} target="_blank" rel="noreferrer noopener">{ p["og:title"] }</a></div>
@@ -146,6 +142,10 @@ export default class LinkPreviewWidget extends React.Component {
                         { description }
                     </div>
                 </div>
+                <AccessibleButton className="mx_LinkPreviewWidget_cancel" onClick={this.props.onCancelClick} aria-label={_t("Close preview")}>
+                    <img className="mx_filterFlipColor" alt="" role="presentation"
+                        src={require("../../../../res/img/cancel.svg")} width="18" height="18" />
+                </AccessibleButton>
             </div>
         );
     }