Media zooming : display the thumbnail while the high res picture is downloading.

It is better to have a black screen.

matrixConsole/View/CustomImageView.h

@@ -21,8 +21,7 @@
 
 typedef void (^blockCustomImageView_onClick)(CustomImageView *imageView, NSString* title);
 
-@property (strong, nonatomic) NSString *placeholder;
+- (void)setImageURL:(NSString *)imageURL withPreviewImage:(UIImage*)previewImage;
-@property (strong, nonatomic) NSString *imageURL;
 
 // Use this boolean to hide activity indicator during image downloading
 @property (nonatomic) BOOL hideActivityIndicator;

matrixConsole/View/CustomImageView.m

@@ -85,18 +85,34 @@
 - (void)startActivityIndicator {
     // Add activity indicator if none
     if (loadingWheel == nil) {
-        loadingWheel = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleGray];
+        loadingWheel = [[UIActivityIndicatorView alloc] initWithActivityIndicatorStyle:UIActivityIndicatorViewStyleWhite];
+        
+        CGRect frame = loadingWheel.frame;
+        frame.size.width += 30;
+        frame.size.height += 30;
+        loadingWheel.bounds = frame;
+        [loadingWheel.layer setCornerRadius:5];
         [self addSubview:loadingWheel];
     }
-    // Adjust position
+    
-    CGPoint center = CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2);
-    loadingWheel.center = center;
     // Adjust color
     if ([self.backgroundColor isEqual:[UIColor blackColor]]) {
         loadingWheel.activityIndicatorViewStyle = UIActivityIndicatorViewStyleWhite;
+        // a preview image could be displayed
+        // ensure that the white spinner is visible
+        // it could be drawn on a white area
+        loadingWheel.backgroundColor = [UIColor darkGrayColor];
     } else {
         loadingWheel.activityIndicatorViewStyle = UIActivityIndicatorViewStyleGray;
     }
+    
+    // ensure that the spinner is drawn at the top
+    [loadingWheel.superview bringSubviewToFront:loadingWheel];
+    
+    // Adjust position
+    CGPoint center = CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2);
+    loadingWheel.center = center;
+    
     // Start
     [loadingWheel startAnimating];
 }
@@ -259,6 +275,15 @@
             rightButton.frame = CGRectMake(bottomBarView.frame.size.width - CUSTOM_IMAGE_VIEW_BUTTON_WIDTH, 0, CUSTOM_IMAGE_VIEW_BUTTON_WIDTH, bottomBarView.frame.size.height);
         }
     }
+    
+    if (loadingWheel.isAnimating) {
+        // ensure that the spinner is drawn at the top
+        [loadingWheel.superview bringSubviewToFront:loadingWheel];
+        
+        // Adjust position
+        CGPoint center = CGPointMake(self.frame.size.width / 2, self.frame.size.height / 2);
+        loadingWheel.center = center;
+    }
 }
 
 - (void)setHideActivityIndicator:(BOOL)hideActivityIndicator {
@@ -271,9 +296,9 @@
     }
 }
 
-- (void)setImageURL:(NSString *)imageURL {
+- (void)setImageURL:(NSString *)anImageURL withPreviewImage:(UIImage*)previewImage {
     // the displayed image is already the expected one ?
-    if ([imageURL isEqualToString:loadedImageURL]) {
+    if ([anImageURL isEqualToString:loadedImageURL]) {
         
         // check if the image content has not been released
         if (self.image.size.width && self.image.size.height) {
@@ -289,30 +314,25 @@
         imageLoader = nil;
     }
     
-    _imageURL = imageURL;
+    // preview image until the image is loaded
-    
+    self.image = previewImage;
-    // Reset image view
-    self.image = nil;
-    if (_placeholder) {
-        // Set picture placeholder
-        self.image = [UIImage imageNamed:_placeholder];
-    }
     
     // Consider provided url to update image view
-    if (imageURL) {
+    if (anImageURL) {
         // Load picture
         if (!_hideActivityIndicator) {
             [self startActivityIndicator];
         }
-        imageLoader = [MediaManager loadPicture:imageURL
+        
+        imageLoader = [MediaManager loadPicture:anImageURL
                                         success:^(UIImage *anImage) {
                                             [self stopActivityIndicator];
                                             self.image = anImage;
-                                            loadedImageURL = imageURL;
+                                            loadedImageURL = anImageURL;
                                         }
                                         failure:^(NSError *error) {
                                             [self stopActivityIndicator];
-                                            NSLog(@"Failed to download image (%@): %@", imageURL, error);
+                                            NSLog(@"Failed to download image (%@): %@", anImageURL, error);
                                         }];
     }
 }

matrixConsole/View/RoomMemberTableCell.m

@@ -156,9 +156,8 @@
         // set the user info
         self.userLabel.text = [room.state memberName:roomMember.userId];
         
-        // user
+        // user thumbnail
-        self.pictureView.placeholder = @"default-profile";
+        [self.pictureView setImageURL:roomMember.avatarUrl withPreviewImage:[UIImage imageNamed:@"default-profile"]];
-        self.pictureView.imageURL = roomMember.avatarUrl;
         
         // Round image view
         [self.pictureView.layer setCornerRadius:self.pictureView.frame.size.width / 2];

matrixConsole/ViewController/RoomViewController.m

@@ -70,7 +70,7 @@ NSString *const kCmdResetUserPowerLevel = @"/deop";
     id membersListener;
     
     // Attachment handling
-    CustomImageView *highResImage;
+    CustomImageView *highResImageView;
     NSString *AVAudioSessionCategory;
     MPMoviePlayerController *videoPlayer;
     MPMoviePlayerController *tmpVideoPlayer;
@@ -839,17 +839,17 @@ NSString *const kCmdResetUserPowerLevel = @"/deop";
     if (msgtype == RoomMessageTypeImage) {
         NSString *url = content[@"url"];
         if (url.length) {
-            highResImage = [[CustomImageView alloc] initWithFrame:self.membersView.frame];
+            highResImageView = [[CustomImageView alloc] initWithFrame:self.membersView.frame];
-            highResImage.canBeZoomed = YES;
+            highResImageView.canBeZoomed = YES;
-            highResImage.imageURL = url;
+            [highResImageView setImageURL:url withPreviewImage:attachment.image];
-            [self.view addSubview:highResImage];
+            [self.view addSubview:highResImageView];
             
             // Add tap recognizer to hide attachment
             UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(hideAttachmentView)];
             [tap setNumberOfTouchesRequired:1];
             [tap setNumberOfTapsRequired:1];
-            [highResImage addGestureRecognizer:tap];
+            [highResImageView addGestureRecognizer:tap];
-            highResImage.userInteractionEnabled = YES;
+            highResImageView.userInteractionEnabled = YES;
             
             defaultLeftBarButtonItem = self.navigationItem.leftBarButtonItem;
             
@@ -1262,7 +1262,7 @@ NSString *const kCmdResetUserPowerLevel = @"/deop";
     
     // Restore initial settings
     cell.message = message;
-    cell.attachmentView.imageURL = nil; // Cancel potential attachment loading
+    [cell.attachmentView  setImageURL:nil withPreviewImage:nil]; // Cancel potential attachment loading
     cell.attachmentView.hidden = YES;
     cell.playIconView.hidden = YES;
     // Remove all gesture recognizer
@@ -1299,8 +1299,7 @@ NSString *const kCmdResetUserPowerLevel = @"/deop";
         cell.msgTextViewTopConstraint.constant = ROOM_MESSAGE_CELL_DEFAULT_TEXTVIEW_TOP_CONST;
         cell.attachViewTopConstraint.constant = ROOM_MESSAGE_CELL_DEFAULT_ATTACHMENTVIEW_TOP_CONST;
         // Handle user's picture
-        cell.pictureView.placeholder = @"default-profile";
+        [cell.pictureView setImageURL:message.senderAvatarUrl withPreviewImage:[UIImage imageNamed:@"default-profile"]];
-        cell.pictureView.imageURL = message.senderAvatarUrl;
         [cell.pictureView.layer setCornerRadius:cell.pictureView.frame.size.width / 2];
         cell.pictureView.clipsToBounds = YES;
     }
@@ -1361,7 +1360,8 @@ NSString *const kCmdResetUserPowerLevel = @"/deop";
             cell.playIconView.hidden = NO;
         }
         
-        cell.attachmentView.imageURL = url;
+        [cell.attachmentView setImageURL:url withPreviewImage:nil];
+
         if (url && message.attachmentURL && message.attachmentInfo) {
             // Add tap recognizer to open attachment
             UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(showAttachmentView:)];
@@ -2212,9 +2212,9 @@ NSString *const kCmdResetUserPowerLevel = @"/deop";
         self.navigationItem.leftBarButtonItem = defaultLeftBarButtonItem;
     }
     
-    if (highResImage) {
+    if (highResImageView) {
-        [highResImage removeFromSuperview];
+        [highResImageView removeFromSuperview];
-        highResImage = nil;
+        highResImageView = nil;
         self.navigationItem.leftBarButtonItem = defaultLeftBarButtonItem;
     }
 }