Fix song list layout (PLAYRTS-5494) (#456)

SRGSSR · Apr 15, 2024 · 7cd4a24 · 7cd4a24
1 parent ea68542
commit 7cd4a24
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 11 deletions.
diff --git a/Application/Sources/Player/SongTableViewCell.h b/Application/Sources/Player/SongTableViewCell.h
@@ -15,7 +15,7 @@ NS_ASSUME_NONNULL_BEGIN
 
 @property (nonatomic, readonly, getter=isPlayable) BOOL playable;
 
-- (void)setSong:(nullable SRGSong *)song playing:(BOOL)playing;
+- (void)setSong:(nullable SRGSong *)song playing:(BOOL)playing withCellWidth:(CGFloat)width;
 - (void)updateProgressForDateInterval:(nullable NSDateInterval *)dateInterval;
 
 @end

diff --git a/Application/Sources/Player/SongTableViewCell.m b/Application/Sources/Player/SongTableViewCell.m
@@ -13,6 +13,9 @@
 @import SRGAppearance;
 
 static const CGFloat SongTableViewMargin = 42.f;
+static const CGFloat SongTableViewWaveformViewWidth = 34.f;
+static const CGFloat SongTableViewWaveformViewLeading = 8.f;
+static const CGFloat SongTableViewWaveformViewTrailing = 22.f;
 
 @interface SongTableViewCell ()
 
@@ -30,6 +33,10 @@ @interface SongTableViewCell ()
 
 @property (nonatomic) IBOutletCollection(NSLayoutConstraint) NSArray<NSLayoutConstraint *> *marginWidthConstraints;
 
+@property (nonatomic) IBOutlet NSLayoutConstraint *waveformViewWidthConstraint;
+@property (nonatomic) IBOutlet NSLayoutConstraint *waveformViewLeadingConstraint;
+@property (nonatomic) IBOutlet NSLayoutConstraint *waveformViewTrailingConstraint;
+
 @end
 
 @implementation SongTableViewCell
@@ -55,11 +62,16 @@ + (CGFloat)heightForSong:(SRGSong *)song withCellWidth:(CGFloat)width
 {
     // Add variable contribution depending on the number of lines required to properly display a song title
     // (maximum of 2 lines)
-    // Remark: We do not take the waveform into account. We namely do not want to change the height of the
-    //         cell whether or not the waveform is displayed. We therefore calculate the layout in the nominal
-    //         case, i.e. without waveform.
+    // Remark: We namely do not want to change the height of the cell whether or not the waveform is displayed. We
+    //         therefore calculate the layout in the nominal case, i.e. without waveform.
+    return [self heightForSong:song withCellWidth:width waveformDisplayed:NO];
+}
+
++ (CGFloat)heightForSong:(SRGSong *)song withCellWidth:(CGFloat)width waveformDisplayed:(BOOL)waveformDisplayed
+{
     UIFont *font = [self titleLabelFont];
-    CGFloat textWidth = fmaxf(width - 2 * SongTableViewMargin, 0.f);
+    CGFloat textMargins = waveformDisplayed ? SongTableViewMargin + SongTableViewWaveformViewLeading + SongTableViewWaveformViewWidth + SongTableViewWaveformViewTrailing : 2 * SongTableViewMargin;
+    CGFloat textWidth = fmaxf(width - textMargins, 0.f);
     CGRect boundingRect = [song.title boundingRectWithSize:CGSizeMake(textWidth, CGFLOAT_MAX)
                                                    options:NSStringDrawingUsesLineFragmentOrigin
                                                 attributes:@{ NSFontAttributeName : font }
@@ -73,6 +85,11 @@ + (CGFloat)heightForSong:(SRGSong *)song withCellWidth:(CGFloat)width
     return [self timeLabelFont].lineHeight + [self artistLabelFont].lineHeight + titleHeight;
 }
 
++ (NSInteger)titleNumberOfLinesForSong:(SRGSong *)song withCellWidth:(CGFloat)width
+{
+    return [self heightForSong:song withCellWidth:width waveformDisplayed:NO] == [self heightForSong:song withCellWidth:width waveformDisplayed:YES] ? 2 : 1;
+}
+
 #pragma mark Overrides
 
 - (void)awakeFromNib
@@ -86,6 +103,10 @@ - (void)awakeFromNib
         constraint.constant = SongTableViewMargin;
     }];
 
+    self.waveformViewWidthConstraint.constant = SongTableViewWaveformViewWidth;
+    self.waveformViewLeadingConstraint.constant = SongTableViewWaveformViewLeading;
+    self.waveformViewTrailingConstraint.constant = SongTableViewWaveformViewTrailing;
+
     self.waveformView.hidden = YES;
     self.rightMarginView.hidden = NO;
 
@@ -107,14 +128,15 @@ - (void)setSelected:(BOOL)selected animated:(BOOL)animated
 
 #pragma mark Attached data
 
-- (void)setSong:(SRGSong *)song playing:(BOOL)playing
+- (void)setSong:(SRGSong *)song playing:(BOOL)playing withCellWidth:(CGFloat)width
 {
     self.song = song;
     self.playing = playing;
 
     self.timeLabel.text = [NSDateFormatter.play_time stringFromDate:song.date];
     self.timeLabel.font = [SongTableViewCell timeLabelFont];
 
+    self.titleLabel.numberOfLines = [SongTableViewCell titleNumberOfLinesForSong:song withCellWidth:width];
     self.titleLabel.text = song.title;
     self.titleLabel.font = [SongTableViewCell titleLabelFont];
 

diff --git a/Application/Sources/Player/SongTableViewCell.xib b/Application/Sources/Player/SongTableViewCell.xib
@@ -1,7 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="18122" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.XIB" version="3.0" toolsVersion="32700.99.1234" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES">
+    <device id="retina6_12" orientation="portrait" appearance="light"/>
     <dependencies>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="18093"/>
+        <deployment identifier="iOS"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="22684"/>
         <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
     </dependencies>
     <objects>
@@ -57,7 +59,7 @@
                                                 <rect key="frame" x="308" y="0.0" width="64" height="54"/>
                                                 <subviews>
                                                     <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="252" verticalHuggingPriority="251" horizontalCompressionResistancePriority="751" image="waveform_animation-0" translatesAutoresizingMaskIntoConstraints="NO" id="Msg-dq-g9i">
-                                                        <rect key="frame" x="8" y="-37" width="34" height="128"/>
+                                                        <rect key="frame" x="8" y="10" width="34" height="34"/>
                                                         <color key="tintColor" white="1" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
                                                         <constraints>
                                                             <constraint firstAttribute="width" constant="34" id="tO5-GP-UH3"/>
@@ -105,13 +107,16 @@
                 <outlet property="titleLabel" destination="9i6-JI-bLq" id="x3p-6c-WAo"/>
                 <outlet property="waveformImageView" destination="Msg-dq-g9i" id="IvZ-9k-vrd"/>
                 <outlet property="waveformView" destination="1rh-f6-w0B" id="Tqz-b6-4i9"/>
+                <outlet property="waveformViewLeadingConstraint" destination="PKd-eI-pPX" id="ZRc-V2-bXi"/>
+                <outlet property="waveformViewTrailingConstraint" destination="6in-QA-oke" id="IYx-TE-4AN"/>
+                <outlet property="waveformViewWidthConstraint" destination="tO5-GP-UH3" id="Jnj-4k-CK9"/>
                 <outletCollection property="marginWidthConstraints" destination="MyP-WU-aUc" id="Igq-wL-KUN"/>
                 <outletCollection property="marginWidthConstraints" destination="y7s-P1-YZs" id="tOb-db-jQg"/>
             </connections>
             <point key="canvasLocation" x="-107.24637681159422" y="99.441964285714278"/>
         </tableViewCell>
     </objects>
     <resources>
-        <image name="waveform_animation-0" width="128" height="128"/>
+        <image name="waveform_animation-0" width="34" height="34"/>
     </resources>
 </document>
diff --git a/Application/Sources/Player/SongsViewController.m b/Application/Sources/Player/SongsViewController.m
@@ -263,7 +263,7 @@ - (void)tableView:(UITableView *)tableView willDisplayCell:(SongTableViewCell *)
 {
     SRGSong *song = self.items[indexPath.row];
     BOOL playing = (self.letterboxController.playbackState == SRGMediaPlayerPlaybackStatePlaying);
-    [cell setSong:song playing:playing];
+    [cell setSong:song playing:playing withCellWidth:CGRectGetWidth(tableView.frame)];
     [cell updateProgressForDateInterval:self.letterboxController.play_dateInterval];
 }