[PATCH ArtworkGrid] Add support for dynamic image resizing

.env.oss

@@ -1,3 +1,4 @@
+GEMINI_CLOUDFRONT_URL=https://d7hftxdivxxvm.cloudfront.net
 METAPHYSICS_ENDPOINT=https://metaphysics-staging.artsy.net
 NODE_ENV=development
 WEBPACK_DEVTOOL=cheap-module-eval-source-map

.storybook/webpack.config.js

@@ -18,13 +18,15 @@ env.load()
  */
 const {
   WEBPACK_DEVTOOL = "cheap-module-eval-source-map",
+  GEMINI_CLOUDFRONT_URL,
   METAPHYSICS_ENDPOINT,
   USER_ID,
   USER_ACCESS_TOKEN,
   XAPP_TOKEN,
 } = process.env
 
 const sharifyPath = sharify({
+  GEMINI_CLOUDFRONT_URL,
   METAPHYSICS_ENDPOINT,
   XAPP_TOKEN,
 })
@@ -47,9 +49,11 @@ const plugins = [
 if (USER_ID && USER_ACCESS_TOKEN) {
   plugins.push(
     new webpack.DefinePlugin({
-      "process.env.USER_ID": JSON.stringify(USER_ID),
-      "process.env.USER_ACCESS_TOKEN": JSON.stringify(USER_ACCESS_TOKEN),
-      "process.env.XAPP_TOKEN": JSON.stringify(XAPP_TOKEN),
+      "process.env": {
+        USER_ID: JSON.stringify(USER_ID),
+        USER_ACCESS_TOKEN: JSON.stringify(USER_ACCESS_TOKEN),
+        XAPP_TOKEN: JSON.stringify(XAPP_TOKEN),
+      },
     })
   )
 } else {

src/Components/Artwork/GridItem.tsx

@@ -1,5 +1,6 @@
 import React from "react"
 import { createFragmentContainer, graphql } from "react-relay"
+import { data as sd } from "sharify"
 import styled from "styled-components"
 import { Responsive } from "Utils/Responsive"
 import colors from "../../Assets/Colors"
@@ -28,11 +29,55 @@ interface Props extends RelayProps, React.HTMLProps<ArtworkGridItemContainer> {
   }
 }
 
-class ArtworkGridItemContainer extends React.Component<Props, null> {
+interface State {
+  width: number
+  height: number
+}
+
+const IMAGE_QUALITY = 80
+
+class ArtworkGridItemContainer extends React.Component<Props, State> {
   static defaultProps = {
     useRelay: true,
   }
 
+  private image: HTMLImageElement = null
+
+  state = {
+    width: 0,
+    height: 0,
+  }
+
+  componentDidMount() {
+    const scale = window.devicePixelRatio
+    const width = this.image.width * scale
+    const height =
+      (this.image.width / this.props.artwork.image.aspect_ratio) * scale
+
+    this.setState({
+      width,
+      height,
+    })
+  }
+
+  get imageURL() {
+    const imageURL = this.props.artwork.image.url
+    if (imageURL) {
+      // Either scale or crop, based on if an aspect ratio is available.
+      const type = this.props.artwork.image.aspect_ratio ? "fit" : "fill"
+      const width = String(this.state.width)
+      const height = String(this.state.height)
+      // tslint:disable-next-line:max-line-length
+      return `${
+        sd.GEMINI_CLOUDFRONT_URL
+      }/?resize_to=${type}&width=${width}&height=${height}&quality=${IMAGE_QUALITY}&src=${encodeURIComponent(
+        imageURL
+      )}`
+    } else {
+      return null
+    }
+  }
+
   render() {
     const { style, className, artwork, useRelay, currentUser } = this.props
     const SaveButtonBlock = useRelay ? RelaySaveButton : SaveButton
@@ -46,7 +91,7 @@ class ArtworkGridItemContainer extends React.Component<Props, null> {
       <div className={className} style={style}>
         <Placeholder style={{ paddingBottom: artwork.image.placeholder }}>
           <a href={artwork.href}>
-            <Image src={artwork.image.url} />
+            <Image src={this.imageURL} innerRef={img => (this.image = img)} />
           </a>
           <Responsive>
             {({ hover }) =>

typings/sharify.d.ts

@@ -15,6 +15,7 @@ declare module "sharify" {
      * These properties are set by Force and configured through environment variables.
      */
     export interface GlobalData {
+      readonly GEMINI_CLOUDFRONT_URL: string
       readonly METAPHYSICS_ENDPOINT: string
       readonly XAPP_TOKEN: string
     }