Fabric: Replace ImageLoader promise implementation with observer model

Summary: Folly promises/futures have been replaced by an observer model which keeps track of loading state. This resolves at least one crash that I can no longer repro and simplifies the code a bit (IMO).

Reviewed By: shergin

Differential Revision: D13743393

fbshipit-source-id: 2b650841525db98b2f67add85f2097f24259c6cf

Author: JoshuaGross

React/Fabric/Mounting/ComponentViews/Image/RCTImageComponentView.h

@@ -11,10 +11,18 @@
 
 NS_ASSUME_NONNULL_BEGIN
 
+@protocol RCTImageResponseDelegate <NSObject>
+
+- (void)didReceiveImage:(UIImage *)image fromObserver:(void*)observer;
+- (void)didReceiveProgress:(float)progress fromObserver:(void*)observer;
+- (void)didReceiveFailureFromObserver:(void*)observer;
+
+@end
+
 /**
  * UIView class for root <Image> component.
  */
-@interface RCTImageComponentView : RCTViewComponentView
+@interface RCTImageComponentView : RCTViewComponentView <RCTImageResponseDelegate>
 
 @end
 

React/Fabric/Mounting/ComponentViews/Image/RCTImageComponentView.mm

@@ -13,16 +13,48 @@
 #import <react/components/image/ImageShadowNode.h>
 #import <react/imagemanager/ImageRequest.h>
 #import <react/imagemanager/ImageResponse.h>
+#import <react/imagemanager/ImageResponseObserver.h>
 #import <react/imagemanager/RCTImagePrimitivesConversions.h>
 
 #import "RCTConversions.h"
 #import "MainQueueExecutor.h"
 
 using namespace facebook::react;
 
+class ImageResponseObserverProxy: public ImageResponseObserver {
+public:
+    ImageResponseObserverProxy(void* delegate): delegate_((__bridge id<RCTImageResponseDelegate>)delegate) {}
+
+    void didReceiveImage(const ImageResponse &imageResponse) override {
+      UIImage *image = (__bridge UIImage *)imageResponse.getImage().get();
+      void *this_ = this;
+      dispatch_async(dispatch_get_main_queue(), ^{
+        [delegate_ didReceiveImage:image fromObserver:this_];
+      });
+    }
+
+    void didReceiveProgress (float p) override {
+      void *this_ = this;
+      dispatch_async(dispatch_get_main_queue(), ^{
+        [delegate_ didReceiveProgress:p fromObserver:this_];
+      });
+    }
+    void didReceiveFailure() override {
+      void *this_ = this;
+      dispatch_async(dispatch_get_main_queue(), ^{
+        [delegate_ didReceiveFailureFromObserver:this_];
+      });
+    }
+
+private:
+  id<RCTImageResponseDelegate> delegate_;
+};
+
 @implementation RCTImageComponentView {
   UIImageView *_imageView;
   SharedImageLocalData _imageLocalData;
+  std::shared_ptr<const ImageResponseObserverCoordinator> _coordinator;
+  std::unique_ptr<ImageResponseObserverProxy> _imageResponseObserverProxy;
 }
 
 - (instancetype)initWithFrame:(CGRect)frame
@@ -35,6 +67,8 @@ - (instancetype)initWithFrame:(CGRect)frame
     _imageView.clipsToBounds = YES;
 
     _imageView.contentMode = (UIViewContentMode)RCTResizeModeFromImageResizeMode(defaultProps->resizeMode);
+      
+    _imageResponseObserverProxy = std::make_unique<ImageResponseObserverProxy>((__bridge void *)self);
 
     self.contentView = _imageView;
   }
@@ -78,23 +112,42 @@ - (void)updateLocalData:(SharedLocalData)localData
 {
   _imageLocalData = std::static_pointer_cast<const ImageLocalData>(localData);
   assert(_imageLocalData);
-  auto future = _imageLocalData->getImageRequest().getResponseFuture();
-  future.via(&MainQueueExecutor::instance()).thenValue([self](ImageResponse &&imageResponse) {
-    self.image = (__bridge UIImage *)imageResponse.getImage().get();
-  });
+  self.coordinator = _imageLocalData->getImageRequest().getObserverCoordinator();
+  
+  // Loading actually starts a little before this
+  std::static_pointer_cast<const ImageEventEmitter>(_eventEmitter)->onLoadStart();
+}
+
+- (void)setCoordinator:(std::shared_ptr<const ImageResponseObserverCoordinator>)coordinator {
+  if (_coordinator) {
+    _coordinator->removeObserver(_imageResponseObserverProxy.get());
+  }
+  _coordinator = coordinator;
+  if (_coordinator != nullptr) {
+    _coordinator->addObserver(_imageResponseObserverProxy.get());
+  }
 }
 
 - (void)prepareForRecycle
 {
   [super prepareForRecycle];
+  self.coordinator = nullptr;
   _imageView.image = nil;
   _imageLocalData.reset();
 }
 
-#pragma mark - Other
+-(void)dealloc
+{
+  self.coordinator = nullptr;
+  _imageResponseObserverProxy.reset();
+}
+
+#pragma mark - RCTImageResponseDelegate
 
-- (void)setImage:(UIImage *)image
+- (void)didReceiveImage:(UIImage *)image fromObserver:(void*)observer
 {
+  std::static_pointer_cast<const ImageEventEmitter>(_eventEmitter)->onLoad();
+
   const auto &imageProps = *std::static_pointer_cast<const ImageProps>(_props);
 
   if (imageProps.tintColor) {
@@ -110,11 +163,22 @@ - (void)setImage:(UIImage *)image
                                   resizingMode:UIImageResizingModeStretch];
   }
 
-  _imageView.image = image;
-
+  self->_imageView.image = image;
+  
   // Apply trilinear filtering to smooth out mis-sized images.
-  _imageView.layer.minificationFilter = kCAFilterTrilinear;
-  _imageView.layer.magnificationFilter = kCAFilterTrilinear;
+  self->_imageView.layer.minificationFilter = kCAFilterTrilinear;
+  self->_imageView.layer.magnificationFilter = kCAFilterTrilinear;
+
+  std::static_pointer_cast<const ImageEventEmitter>(self->_eventEmitter)->onLoadEnd();
 }
 
+- (void)didReceiveProgress:(float)progress fromObserver:(void*)observer {
+  std::static_pointer_cast<const ImageEventEmitter>(_eventEmitter)->onProgress(progress);
+}
+
+- (void)didReceiveFailureFromObserver:(void*)observer {
+  std::static_pointer_cast<const ImageEventEmitter>(_eventEmitter)->onError();
+}
+
+
 @end

React/Fabric/RCTScheduler.mm

@@ -47,11 +47,11 @@ @implementation RCTScheduler {
   std::shared_ptr<SchedulerDelegateProxy> _delegateProxy;
 }
 
-- (instancetype)initWithContextContainer:(std::shared_ptr<void>)contextContatiner
+- (instancetype)initWithContextContainer:(std::shared_ptr<void>)contextContainer
 {
   if (self = [super init]) {
     _delegateProxy = std::make_shared<SchedulerDelegateProxy>((__bridge void *)self);
-    _scheduler = std::make_shared<Scheduler>(std::static_pointer_cast<ContextContainer>(contextContatiner), getDefaultComponentRegistryFactory());
+    _scheduler = std::make_shared<Scheduler>(std::static_pointer_cast<ContextContainer>(contextContainer), getDefaultComponentRegistryFactory());
     _scheduler->setDelegate(_delegateProxy.get());
   }
 

ReactCommon/fabric/components/image/ImageEventEmitter.cpp

@@ -22,8 +22,12 @@ void ImageEventEmitter::onLoadEnd() const {
   dispatchEvent("loadEnd");
 }
 
-void ImageEventEmitter::onProgress() const {
-  dispatchEvent("progress");
+void ImageEventEmitter::onProgress(double progress) const {
+  dispatchEvent("progress", [=](jsi::Runtime &runtime) {
+    auto payload = jsi::Object(runtime);
+    payload.setProperty(runtime, "progress", progress);
+    return payload;
+  });
 }
 
 void ImageEventEmitter::onError() const {

ReactCommon/fabric/components/image/ImageEventEmitter.h

@@ -18,7 +18,7 @@ class ImageEventEmitter : public ViewEventEmitter {
   void onLoadStart() const;
   void onLoad() const;
   void onLoadEnd() const;
-  void onProgress() const;
+  void onProgress(double) const;
   void onError() const;
   void onPartialLoad() const;
 };

ReactCommon/fabric/imagemanager/ImageRequest.h

@@ -7,11 +7,9 @@
 
 #pragma once
 
-#include <mutex>
-
-#include <folly/futures/Future.h>
-#include <folly/futures/FutureSplitter.h>
 #include <react/imagemanager/ImageResponse.h>
+#include <react/imagemanager/ImageResponseObserver.h>
+#include <react/imagemanager/ImageResponseObserverCoordinator.h>
 #include <react/imagemanager/primitives.h>
 
 namespace facebook {
@@ -22,7 +20,6 @@ namespace react {
  * The separate object must be constructed for every single separate
  * image request. The object cannot be copied because it would make managing of
  * event listeners hard and inefficient; the object can be moved though.
- * To subscribe for notifications use `getResponseFuture()` method.
  * Destroy to cancel the underlying request.
  */
 class ImageRequest final {
@@ -33,15 +30,10 @@ class ImageRequest final {
    */
   class ImageNoLongerNeededException;
 
-  ImageRequest();
-
   /*
-   * `ImageRequest` is constructed with `ImageSource` and
-   * `ImageResponse` future which must be moved in inside the object.
+   * The default constructor
    */
-  ImageRequest(
-      const ImageSource &imageSource,
-      folly::Future<ImageResponse> &&responseFuture);
+  ImageRequest(const ImageSource &imageSource);
 
   /*
    * The move constructor.
@@ -51,32 +43,36 @@ class ImageRequest final {
   /*
    * `ImageRequest` does not support copying by design.
    */
-  ImageRequest(const ImageRequest &) = delete;
+  ImageRequest(const ImageRequest &other) = delete;
 
   ~ImageRequest();
 
-  /*
-   * Creates and returns a *new* future object with promised `ImageResponse`
-   * result. Multiple consumers can call this method many times to create
-   * their own subscriptions to promised value.
+  /**
+   * Set cancelation function.
    */
-  folly::Future<ImageResponse> getResponseFuture() const;
+  void setCancelationFunction(std::function<void(void)> cancelationFunction);
 
- private:
   /*
-   * Mutext to protect an access to the future.
+   * Get observer coordinator.
    */
-  mutable std::mutex mutex_;
+  std::shared_ptr<const ImageResponseObserverCoordinator>
+  getObserverCoordinator() const;
 
+ private:
   /*
    * Image source assosiated with the request.
    */
   ImageSource imageSource_;
 
   /*
-   * Future splitter powers factory-like `getResponseFuture()` method.
+   * Event coordinator associated with the reqest.
+   */
+  std::shared_ptr<const ImageResponseObserverCoordinator> coordinator_{};
+
+  /*
+   * Function we can call to cancel image request (see destructor).
    */
-  mutable folly::FutureSplitter<ImageResponse> responseFutureSplitter_;
+  std::function<void(void)> cancelRequest_;
 
   /*
    * Indicates that the object was moved and hence cannot be used anymore.

ReactCommon/fabric/imagemanager/ImageResponse.h

@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+#pragma once
+
 #include <memory>
 
 namespace facebook {
@@ -15,12 +17,18 @@ namespace react {
  */
 class ImageResponse final {
  public:
+  enum class Status {
+    Loading,
+    Completed,
+    Failed,
+  };
+
   ImageResponse(const std::shared_ptr<void> &image);
 
   std::shared_ptr<void> getImage() const;
 
  private:
-  std::shared_ptr<void> image_;
+  std::shared_ptr<void> image_{};
 };
 
 } // namespace react

ReactCommon/fabric/imagemanager/ImageResponseObserver.h

@@ -0,0 +1,27 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+#pragma once
+
+#include <react/imagemanager/ImageResponse.h>
+
+namespace facebook {
+namespace react {
+
+/*
+ * Represents any observer of ImageResponse progression, completion, or failure.
+ */
+class ImageResponseObserver {
+ public:
+  virtual void didReceiveProgress(float) = 0;
+  virtual void didReceiveImage(const ImageResponse &imageResponse) = 0;
+  virtual void didReceiveFailure() = 0;
+  virtual ~ImageResponseObserver() noexcept = default;
+};
+
+} // namespace react
+} // namespace facebook