Merge pull request #4856 from vector-im/doug/4855_fix_url_preview_width

Fix URL preview width on 4" devices
2024-09-29 07:42:40 +00:00 · 2021-09-16 17:54:34 +01:00 · 2021-09-16 17:54:34 +01:00 · 8510027fbf
commit 8510027fbf
parent e1d5a33c8e d956fb9b59
10 changed files with 53 additions and 25 deletions
--- a/Podfile.lock
+++ b/Podfile.lock
@ -83,11 +83,11 @@ PODS:
  - MatrixSDK/JingleCallStack (0.20.1):
    - JitsiMeetSDK (= 3.5.0)
    - MatrixSDK/Core
-  - OLMKit (3.2.4):
-    - OLMKit/olmc (= 3.2.4)
-    - OLMKit/olmcpp (= 3.2.4)
-  - OLMKit/olmc (3.2.4)
-  - OLMKit/olmcpp (3.2.4)
+  - OLMKit (3.2.5):
+    - OLMKit/olmc (= 3.2.5)
+    - OLMKit/olmcpp (= 3.2.5)
+  - OLMKit/olmc (3.2.5)
+  - OLMKit/olmcpp (3.2.5)
  - ReadMoreTextView (3.0.1)
  - Realm (10.7.6):
    - Realm/Headers (= 10.7.6)
@ -206,7 +206,7 @@ SPEC CHECKSUMS:
  MatomoTracker: 24a846c9d3aa76933183fe9d47fd62c9efa863fb
  MatrixKit: 7033539085bc94b6b8755fdab68ba6f7e6e79d56
  MatrixSDK: 37fbb6a650095387e908937b7411c4370599c90b
-  OLMKit: 2d73cd67d149b5c3e3a8eb8ecae93d0b429d8a02
+  OLMKit: 9fb4799c4a044dd2c06bda31ec31a12191ad30b5
  ReadMoreTextView: 19147adf93abce6d7271e14031a00303fe28720d
  Realm: ed860452717c8db8f4bf832b6807f7f2ce708839
  Reusable: 53a9acf5c536f229b31b5865782414b508252ddb
@ -221,4 +221,4 @@ SPEC CHECKSUMS:

 PODFILE CHECKSUM: 9478742d5244cae5112451119f9e004eae089967

-COCOAPODS: 1.10.2
+COCOAPODS: 1.10.1
--- a/Riot/Modules/Room/DataSources/RoomDataSource.m
+++ b/Riot/Modules/Room/DataSources/RoomDataSource.m
@ -388,6 +388,8 @@ const CGFloat kTypingCellHeight = 24;
                        [bubbleCell.tmpSubviews addObject:urlPreviewView];
                        
                        urlPreviewView.translatesAutoresizingMaskIntoConstraints = NO;
+                        // TODO: Use cellData.maxTextViewWidth when the view height is part of RoomBubbleCellData's additional height.
+                        urlPreviewView.availableWidth = tableView.contentSize.width;
                        [bubbleCell.contentView addSubview:urlPreviewView];
                        
                        CGFloat leftMargin = RoomBubbleCellLayout.reactionsViewLeftMargin;
--- a/Riot/Modules/Room/Views/BubbleCells/RoomIncomingTextMsgBubbleCell.m
+++ b/Riot/Modules/Room/Views/BubbleCells/RoomIncomingTextMsgBubbleCell.m
@ -47,7 +47,8 @@
    if (RiotSettings.shared.roomScreenShowsURLPreviews && bubbleData && bubbleData.showURLPreview)
    {
        CGFloat height = [super heightForCellData:cellData withMaximumWidth:maxWidth];
-        return height + RoomBubbleCellLayout.urlPreviewViewTopMargin + [URLPreviewView contentViewHeightFor:bubbleData.urlPreviewData];
+        return height + RoomBubbleCellLayout.urlPreviewViewTopMargin + [URLPreviewView contentViewHeightFor:bubbleData.urlPreviewData
+                                                                                                    fitting:maxWidth];
    }
    
    return [super heightForCellData:cellData withMaximumWidth:maxWidth];
--- a/Riot/Modules/Room/Views/BubbleCells/RoomIncomingTextMsgWithPaginationTitleBubbleCell.m
+++ b/Riot/Modules/Room/Views/BubbleCells/RoomIncomingTextMsgWithPaginationTitleBubbleCell.m
@ -53,7 +53,8 @@
    if (RiotSettings.shared.roomScreenShowsURLPreviews && bubbleData && bubbleData.showURLPreview)
    {
        CGFloat height = [super heightForCellData:cellData withMaximumWidth:maxWidth];
-        return height + RoomBubbleCellLayout.urlPreviewViewTopMargin + [URLPreviewView contentViewHeightFor:bubbleData.urlPreviewData];
+        return height + RoomBubbleCellLayout.urlPreviewViewTopMargin + [URLPreviewView contentViewHeightFor:bubbleData.urlPreviewData
+                                                                                                    fitting:maxWidth];
    }
    
    return [super heightForCellData:cellData withMaximumWidth:maxWidth];
--- a/Riot/Modules/Room/Views/BubbleCells/RoomIncomingTextMsgWithoutSenderInfoBubbleCell.m
+++ b/Riot/Modules/Room/Views/BubbleCells/RoomIncomingTextMsgWithoutSenderInfoBubbleCell.m
@ -37,7 +37,8 @@
    if (RiotSettings.shared.roomScreenShowsURLPreviews && bubbleData && bubbleData.showURLPreview)
    {
        CGFloat height = [super heightForCellData:cellData withMaximumWidth:maxWidth];
-        return height + RoomBubbleCellLayout.urlPreviewViewTopMargin + [URLPreviewView contentViewHeightFor:bubbleData.urlPreviewData];
+        return height + RoomBubbleCellLayout.urlPreviewViewTopMargin + [URLPreviewView contentViewHeightFor:bubbleData.urlPreviewData
+                                                                                                    fitting:maxWidth];
    }
    
    return [super heightForCellData:cellData withMaximumWidth:maxWidth];
--- a/Riot/Modules/Room/Views/BubbleCells/RoomOutgoingTextMsgBubbleCell.m
+++ b/Riot/Modules/Room/Views/BubbleCells/RoomOutgoingTextMsgBubbleCell.m
@ -48,7 +48,8 @@
    if (RiotSettings.shared.roomScreenShowsURLPreviews && bubbleData && bubbleData.showURLPreview)
    {
        CGFloat height = [super heightForCellData:cellData withMaximumWidth:maxWidth];
-        return height + RoomBubbleCellLayout.urlPreviewViewTopMargin + [URLPreviewView contentViewHeightFor:bubbleData.urlPreviewData];
+        return height + RoomBubbleCellLayout.urlPreviewViewTopMargin + [URLPreviewView contentViewHeightFor:bubbleData.urlPreviewData
+                                                                                                    fitting:maxWidth];
    }
    
    return [super heightForCellData:cellData withMaximumWidth:maxWidth];
--- a/Riot/Modules/Room/Views/BubbleCells/RoomOutgoingTextMsgWithoutSenderInfoBubbleCell.m
+++ b/Riot/Modules/Room/Views/BubbleCells/RoomOutgoingTextMsgWithoutSenderInfoBubbleCell.m
@ -37,7 +37,8 @@
    if (RiotSettings.shared.roomScreenShowsURLPreviews && bubbleData && bubbleData.showURLPreview)
    {
        CGFloat height = [super heightForCellData:cellData withMaximumWidth:maxWidth];
-        return height + RoomBubbleCellLayout.urlPreviewViewTopMargin + [URLPreviewView contentViewHeightFor:bubbleData.urlPreviewData];
+        return height + RoomBubbleCellLayout.urlPreviewViewTopMargin + [URLPreviewView contentViewHeightFor:bubbleData.urlPreviewData
+                                                                                                    fitting:maxWidth];
    }
    
    return [super heightForCellData:cellData withMaximumWidth:maxWidth];
--- a/Riot/Modules/Room/Views/URLPreviews/URLPreviewView.swift
+++ b/Riot/Modules/Room/Views/URLPreviews/URLPreviewView.swift
@ -33,6 +33,13 @@ class URLPreviewView: UIView, NibLoadable, Themable {
    private enum Constants {
        /// The fixed width of the preview view.
        static let width: CGFloat = 267.0
+        /// A reduced width available for use on 4" devices.
+        static let reducedWidth: CGFloat = 230
+        
+        /// The availableWidth value that the XIB file is designed against.
+        static let defaultAvailableWidth: CGFloat = 375
+        /// The threshold value for available width that triggers the view to use a reducedWidth
+        static let reducedWidthThreshold: CGFloat = 320
    }
    
    // MARK: - Properties
@ -48,22 +55,33 @@ class URLPreviewView: UIView, NibLoadable, Themable {
        }
    }
    
+    /// The total width available for the view to layout.
+    /// Note: The view's width will be the largest `Constant` that fits this size.
+    var availableWidth: CGFloat = Constants.defaultAvailableWidth {
+        didSet {
+            // TODO: adjust values when using RoomBubbleCellData's maxTextViewWidth property
+            widthConstraint.constant = availableWidth <= Constants.reducedWidthThreshold ? Constants.reducedWidth : Constants.width
+        }
+    }
+    
    weak var delegate: URLPreviewViewDelegate?
    
-    @IBOutlet weak var imageView: UIImageView!
-    @IBOutlet weak var closeButton: UIButton!
+    @IBOutlet private weak var imageView: UIImageView!
+    @IBOutlet private weak var closeButton: UIButton!
    
-    @IBOutlet weak var textContainerView: UIView!
-    @IBOutlet weak var siteNameLabel: UILabel!
-    @IBOutlet weak var titleLabel: UILabel!
-    @IBOutlet weak var descriptionLabel: UILabel!
+    @IBOutlet private weak var textContainerView: UIView!
+    @IBOutlet private weak var siteNameLabel: UILabel!
+    @IBOutlet private weak var titleLabel: UILabel!
+    @IBOutlet private weak var descriptionLabel: UILabel!
    
-    @IBOutlet weak var loadingView: UIView!
-    @IBOutlet weak var loadingActivityIndicator: UIActivityIndicatorView!
+    @IBOutlet private weak var loadingView: UIView!
+    @IBOutlet private weak var loadingActivityIndicator: UIActivityIndicatorView!
    
+    // The constraint that determines the view's width
+    @IBOutlet private weak var widthConstraint: NSLayoutConstraint!
    // Matches the label's height with the close button.
    // Use a strong reference to keep it around when deactivating.
-    @IBOutlet var siteNameLabelHeightConstraint: NSLayoutConstraint!
+    @IBOutlet private var siteNameLabelHeightConstraint: NSLayoutConstraint!
    
    /// Returns true when `titleLabel` has a non-empty string.
    private var hasTitle: Bool {
@ -114,8 +132,9 @@ class URLPreviewView: UIView, NibLoadable, Themable {
        closeButton.setImage(closeButtonAsset.image, for: .normal)
    }
    
-    static func contentViewHeight(for preview: URLPreviewData?) -> CGFloat {
-        sizingView.frame = CGRect(x: 0, y: 0, width: Constants.width, height: 1)
+    static func contentViewHeight(for preview: URLPreviewData?, fitting maxWidth: CGFloat) -> CGFloat {
+        sizingView.availableWidth = maxWidth
+        sizingView.frame = CGRect(x: 0, y: 0, width: sizingView.widthConstraint.constant, height: 1)
        
        // Call render directly to avoid storing the preview data in the sizing view
        if let preview = preview {
@ -127,7 +146,7 @@ class URLPreviewView: UIView, NibLoadable, Themable {
        sizingView.setNeedsLayout()
        sizingView.layoutIfNeeded()
        
-        let fittingSize = CGSize(width: Constants.width, height: UIView.layoutFittingCompressedSize.height)
+        let fittingSize = CGSize(width: sizingView.widthConstraint.constant, height: UIView.layoutFittingCompressedSize.height)
        let layoutSize = sizingView.systemLayoutSizeFitting(fittingSize)
        
        return layoutSize.height
--- a/Riot/Modules/Room/Views/URLPreviews/URLPreviewView.xib
+++ b/Riot/Modules/Room/Views/URLPreviews/URLPreviewView.xib
@ -19,7 +19,7 @@
                        <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" translatesAutoresizingMaskIntoConstraints="NO" id="4zc-0W-jb8">
                            <rect key="frame" x="0.0" y="0.0" width="267" height="140"/>
                            <constraints>
-                                <constraint firstAttribute="height" constant="140" id="QpS-Ys-x5s"/>
+                                <constraint firstAttribute="width" secondItem="4zc-0W-jb8" secondAttribute="height" multiplier="267:140" id="0xq-yj-vni"/>
                            </constraints>
                        </imageView>
                        <view contentMode="scaleToFill" translatesAutoresizingMaskIntoConstraints="NO" id="n9x-Yn-0qQ" userLabel="Text Container">
@ -109,6 +109,7 @@
                <outlet property="siteNameLabelHeightConstraint" destination="vhD-hz-f58" id="Bz9-ub-9UA"/>
                <outlet property="textContainerView" destination="n9x-Yn-0qQ" id="Zul-rd-vrp"/>
                <outlet property="titleLabel" destination="IVX-5S-0kr" id="PRN-5g-HiO"/>
+                <outlet property="widthConstraint" destination="f2o-yq-NFO" id="bn0-wB-66e"/>
                <outletCollection property="gestureRecognizers" destination="rSB-1V-Kev" appends="YES" id="OOJ-ft-VIj"/>
            </connections>
            <point key="canvasLocation" x="1852.8985507246377" y="14.397321428571427"/>
--- a/changelog.d/4855.bugfix
+++ b/changelog.d/4855.bugfix
@ -0,0 +1 @@
+URL Previews: Fix layout on 4" devices.