Dynamically sized image fetching.

Pod/Classes/Core/RCTScrollView+EnclosingScrollView.m

@@ -51,12 +51,6 @@ - (instancetype)initWithType:(RCTScrollEventType)type
   return self;
 }
 
-// TODO: For now, as I have no clue what that needs yet
-- (BOOL)canCoalesce
-{
-  return NO;
-}
-
 - (NSDictionary *)body
 {
   CGPoint originOffset = [__scrollView convertPoint:CGPointZero toView:_enclosingScrollView];

lib/components/artist/articles/article.js

@@ -12,13 +12,16 @@ import ImageView from '../../opaque_image_view';
 class Article extends React.Component {
   render() {
     const article = this.props.article
+    // TODO The outer wrapping view is currently only there because setting `marginRight: 20` on the Article from the
+    //      Articles component isn’t working.
     return (
-      <View style={{ width: 300 }}>
-        <ImageView style={{ height: 175, marginRight: 20 }}
-                     aspectRatio={1.7}
-                     imageURL={article.thumbnail_image.cropped.url} />
-        <Text style={styles.serifText} numberOfLines={5}>{article.title}</Text>
-        <Text style={styles.sansSerifText}>{article.author.name.toUpperCase()}</Text>
+      <View style={{ width: 320 }}>
+        <View style={{ width: 300 }}>
+          <ImageView style={{ width: 300, height: 175 }}
+                    imageURL={article.thumbnail_image.cropped.url} />
+          <Text style={styles.serifText} numberOfLines={5}>{article.title}</Text>
+          <Text style={styles.sansSerifText}>{article.author.name.toUpperCase()}</Text>
+        </View>
       </View>
     );
   }

lib/components/artist/articles/index.js

@@ -15,11 +15,11 @@ class Articles extends React.Component {
   render() {
     const articles = this.props.articles;
     return (
-      <View style={styles.container}>
+      <View>
         <Separator/>
         <SerifText style={styles.heading}>Featured Articles</SerifText>
         <ScrollView horizontal={true} style={{ overflow: 'visible', marginBottom:40 }}>
-          { articles.map(article => <Article key={article.id} article={article} />) }
+          { articles.map(article => <Article key={article.id} article={article} style={styles.article} />) }
         </ScrollView>
       </View>
     );
@@ -30,6 +30,10 @@ const styles = StyleSheet.create({
   heading: {
     marginBottom: 20,
     fontSize: 20,
+  },
+  article: {
+    // TODO: Why doesn’t this work? Currently working around it by making the Article internal view 20pt wider.
+    // marginRight: 20,
   }
 });
 

lib/components/artworks/index.js

@@ -187,7 +187,7 @@ const artworksQuery = (artistID, page) => {
           title
           sale_message
           image {
-            url
+            url(version: "large")
             aspect_ratio
           }
           artist {
@@ -209,7 +209,7 @@ export default Relay.createContainer(Artworks, {
         title
         sale_message
         image {
-          url
+          url(version: "large")
           aspect_ratio
         }
         artist {

lib/components/opaque_image_view.js

@@ -2,21 +2,63 @@
 'use strict';
 
 import React from 'react-native';
+const { PixelRatio } = React;
+
+const GeminiHost = 'd7hftxdivxxvm.cloudfront.net';
+const ImageQuality = 85;
 
 export default class OpaqueImageView extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {};
+  }
+
+  // Unless `aspectRatio` was not specified at all, default the ration to 1 to prevent illegal layout calculations.
+  aspectRatio() {
+    const ratio = this.props.aspectRatio;
+    return ratio === undefined ? undefined : (ratio || 1);
+  }
+
+  imageURL() {
+    if (this.aspectRatio()) {
+      return `https://${GeminiHost}/?resize_to=fit&width=${this.state.width}&height=${this.state.height}&quality=${ImageQuality}&src=${encodeURIComponent(this.props.imageURL)}`;
+    } else {
+      return this.props.imageURL;
+    }
+  }
+
+  onLayout(event) {
+    const { width, height } = event.nativeEvent.layout;
+    this.setState({
+      width: width * PixelRatio.get(),
+      height: height * PixelRatio.get(),
+    });
+  }
+
   render() {
-    return <NativeOpaqueImageView {...this.props} />;
+    const isLaidOut = !!(this.state.width && this.state.height);
+    const props = Object.assign({}, this.props, {
+      aspectRatio: this.aspectRatio(),
+      imageURL: isLaidOut ? this.imageURL() : null,
+      onLayout: isLaidOut ? null : this.onLayout.bind(this),
+    });
+    return <NativeOpaqueImageView {...props} />;
   }
 }
 
 OpaqueImageView.propTypes = {
   /**
    * The URL from where to fetch the image.
    */
-  imageURL: React.PropTypes.string.isRequired,
+  imageURL: React.PropTypes.string,
 
   /**
    * An aspect ratio created with: width / height.
+   *
+   * When specified:
+   * - The view will be sized in such a way that it maintains the aspect ratio of the image.
+   * - The imageURL will be modified so that it resizes the image to the exact size at which the view has been laid out,
+   *   thus never fetching more data than absolutely necessary.
    */
   aspectRatio: React.PropTypes.number,