Merge pull request #725 from kanaabe/remove-embedly

@craigspaeth Remove Embedly

.env.example

@@ -15,6 +15,5 @@ API_PAGE_SIZE=10
 
 ARTSY_ID=REPLACE
 ARTSY_SECRET=REPLACE
-EMBEDLY_KEY=REPLACE
 GEMINI_KEY=REPLACE
 SEGMENT_WRITE_KEY=REPLACE

api/apps/articles/model/save.coffee

@@ -20,9 +20,8 @@ Article = require './index'
 { ObjectId } = require 'mongojs'
 cloneDeep = require 'lodash.clonedeep'
 { ARTSY_URL, SAILTHRU_KEY, SAILTHRU_SECRET,
-EMBEDLY_KEY, FORCE_URL, ARTSY_EDITORIAL_ID, SECURE_IMAGES_URL } = process.env
+FORCE_URL, ARTSY_EDITORIAL_ID, SECURE_IMAGES_URL, GEMINI_CLOUDFRONT_URL } = process.env
 sailthru = require('sailthru-client').createSailthruClient(SAILTHRU_KEY,SAILTHRU_SECRET)
-{ crop } = require('embedly-view-helpers')(EMBEDLY_KEY)
 artsyXapp = require('artsy-xapp').token or ''
 
 @validate = (input, callback) ->
@@ -288,3 +287,7 @@ getTextSections = (article) ->
   for section in article.sections when section.type is 'text'
     condensedHTML = condensedHTML.concat section.body
   condensedHTML
+
+crop = (url, options = {}) ->
+  { width, height } = options
+  "#{GEMINI_CLOUDFRONT_URL}/?resize_to=fill&width=#{width}&height=#{height}&quality=95&src=#{encodeURIComponent(url)}"

api/apps/articles/test/model/save.coffee

@@ -65,8 +65,8 @@ describe 'Save', ->
         @sailthru.apiPost.args[0][1].vars.credit_line.should.containEql 'Artsy Credit'
         @sailthru.apiPost.args[0][1].vars.credit_url.should.containEql 'artsy.net'
         @sailthru.apiPost.args[0][1].author.should.containEql 'Kana Abe'
-        @sailthru.apiPost.args[0][1].images.full.url.should.containEql 'https://i.embed.ly/1/display/crop?width=1200&height=706&quality=95&key=&url=imageurl.com%2Fimage.jpg'
-        @sailthru.apiPost.args[0][1].images.thumb.url.should.containEql 'https://i.embed.ly/1/display/crop?width=900&height=530&quality=95&key=&url=imageurl.com%2Fimage.jpg'
+        @sailthru.apiPost.args[0][1].images.full.url.should.containEql '&width=1200&height=706&quality=95&src=imageurl.com%2Fimage.jpg'
+        @sailthru.apiPost.args[0][1].images.thumb.url.should.containEql '&width=900&height=530&quality=95&src=imageurl.com%2Fimage.jpg'
         done()
 
     it 'sends the article text body', (done) ->

client/apps/edit/components/admin/index.coffee

@@ -7,7 +7,7 @@ sd = require('sharify').data
 _s = require 'underscore.string'
 moment = require 'moment'
 ImageUploadForm = require '../../../../components/image_upload_form/index.coffee'
-{ crop } = require('embedly-view-helpers')(sd.EMBEDLY_KEY)
+{ crop } = require '../../../../components/resizer/index.coffee'
 
 module.exports = class EditAdmin extends Backbone.View
 

client/apps/edit/components/section_callout/index.coffee

@@ -10,7 +10,7 @@ sd = require('sharify').data
 gemup = require 'gemup'
 Autocomplete = require '../../../../components/autocomplete/index.coffee'
 { div, section, input, a, h1, h2, button, img, p, strong, span } = React.DOM
-{ crop } = require('embedly-view-helpers')(sd.EMBEDLY_KEY)
+{ crop } = require '../../../../components/resizer/index.coffee'
 Article = require '../../../../models/article.coffee'
 
 module.exports = React.createClass

client/apps/edit/components/section_embed/index.coffee

@@ -1,21 +1,17 @@
 #
-# Artworks section that shows artwork images in various layouts. A user can
-# add artworks from urls or search via autocomplete.
+# Embed section for supporting external content via iframes
 #
 
 _ = require 'underscore'
 React = require 'react'
 sd = require('sharify').data
-{ oembed } = require('embedly-view-helpers')(sd.EMBEDLY_KEY)
 { div, section, label, nav, input, a, h1, p, strong, span, form, button, iframe } = React.DOM
 
 module.exports = React.createClass
 
   getInitialState: ->
     errorMessage: ''
     url: @props.section.get('url')
-    embeddable: null
-    iframe: ''
     height: @props.section.get('height')
     mobile_height: @props.section.get('mobile_height')
     layout: @props.section.get('layout') or 'column_width'
@@ -38,11 +34,9 @@ module.exports = React.createClass
     @updateIframe url, height
 
   updateIframe: (url, height = '') ->
-    $.get oembed(url, { maxwidth: @getWidth() }), (response) =>
-      @setState iframe: response.html if response.html
-      @setState url: url, height: height, embeddable: response.html?
-      @forceUpdate()
-      @setState loading: false
+    @setState url: url, height: height
+    @forceUpdate()
+    @setState loading: false
 
   changeLayout: (layout) -> =>
     @props.section.set layout: layout
@@ -123,12 +117,6 @@ module.exports = React.createClass
       }
         (if @state.url is ''
           div { className: 'ese-empty-placeholder' }, 'Add URL above'
-        else if @state.embeddable and @state.iframe
-          div {
-            className: 'ese-embed-content'
-            dangerouslySetInnerHTML: __html: @state.iframe
-            style: { 'height': @state.height if @state.height?.length }
-          }
         else
           div {
             className: 'ese-embed-content'

client/apps/edit/components/section_embed/test/index.coffee

@@ -22,27 +22,20 @@ describe 'SectionEmbed', ->
         setEditing: ->
         changeLayout: ->
       ), (@$el = $ "<div></div>")[0], => setTimeout =>
-        sinon.stub $, 'get'
         sinon.stub @component, 'setState'
         sinon.stub @component, 'forceUpdate'
         sinon.stub Backbone, 'sync'
         done()
 
   afterEach ->
     Backbone.sync.restore()
-    $.get.restore()
     benv.teardown()
 
   it 'destroys the section when clicking off', ->
     @component.props.section.on 'destroy', spy = sinon.spy()
     @component.onClickOff()
     spy.called.should.be.ok
 
-  it 'fetches embedly iframe on init', ->
-    @component.props.section.set url: 'http://google.com'
-    @component.componentDidMount()
-    $.get.args[0][0].should.containEql 'https://api.embed.ly/1/oembed?maxwidth=500&key=&url=http%3A%2F%2Fgoogle.com'
-
   it 'gets width for overflow styling', ->
     @component.props.section.set layout: 'overflow'
     @component.getWidth().should.equal 1060

client/apps/edit/components/section_image/index.coffee

@@ -16,7 +16,7 @@ toggleScribePlaceholder = require '../../lib/toggle_scribe_placeholder.coffee'
 sd = require('sharify').data
 icons = -> require('./icons.jade') arguments...
 { div, section, h1, h2, span, img, header, input, nav, a, button, p } = React.DOM
-{ crop, resize, fill } = require('embedly-view-helpers')(sd.EMBEDLY_KEY)
+{ crop, resize, fill } = require '../../../../components/resizer/index.coffee'
 
 module.exports = React.createClass
 

client/apps/edit/components/section_image_set/index.coffee

@@ -11,7 +11,7 @@ Autocomplete = require '../../../../components/autocomplete/index.coffee'
 Artwork = require '../../../../models/artwork.coffee'
 Input = React.createFactory require './input.coffee'
 { div, section, h1, h2, span, img, header, input, a, button, p, ul, li, strong } = React.DOM
-{ crop, resize, fill } = embedly = require('embedly-view-helpers')(sd.EMBEDLY_KEY)
+{ resize } = require '../../../../components/resizer/index.coffee'
 
 module.exports = React.createClass
 

client/components/resizer/index.coffee

@@ -0,0 +1,80 @@
+{ NODE_ENV, GEMINI_CLOUDFRONT_URL } = require('sharify').data
+qs = require 'qs'
+{ compact } = require 'underscore'
+
+warn = (message) ->
+  console.warn message if NODE_ENV is 'development'
+
+endpoint = GEMINI_CLOUDFRONT_URL
+
+defaults =
+  quality: 95
+  color: 'fff'
+
+module.exports = gemini =
+
+  resize: (url, options = {}) =>
+
+    resize_to = if width? and not height?
+        'width'
+      else if height? and not width?
+        'height'
+      else
+        'fit'
+
+    { width, height, quality } = options
+
+    unless width? or height?
+      warn 'requires `width || height`'
+      return url
+
+    if width? and width is 0
+      warn '`width` must be non-zero'
+      return url
+
+    if height? and height is 0
+      warn '`height` must be non-zero'
+      return url
+
+    resize_to = if width? and not height?
+      'width'
+    else if height? and not width?
+      'height'
+    else
+      'fit'
+
+    options =
+      resize_to: resize_to
+      src: url
+      width: width if width?
+      height: height if height?
+      quality: quality or defaults.quality
+
+    [endpoint , qs.stringify options].join '?'
+
+  crop: (url, options = {}) =>
+    { width, height, quality } = options
+
+    unless width? and height?
+      warn 'requires `width && height`'
+      return url
+
+    if width is 0
+      warn '`width` must be non-zero'
+      return url
+
+    if height is 0
+      warn '`height` must be non-zero'
+      return url
+
+    options =
+      resize_to: 'fill'
+      src: url
+      width: width
+      height: height
+      quality: quality or defaults.quality
+
+    [endpoint , qs.stringify options].join '?'
+
+  fill: (url, options = {}) =>
+    gemini.crop(url, options)

client/components/resizer/test/index.coffee

@@ -0,0 +1,35 @@
+{ extend } = require 'underscore'
+sinon = require 'sinon'
+rewire = require 'rewire'
+resizer = rewire '../index'
+
+describe 'resizer', ->
+
+  before ->
+    @src = 'https://d32dm0rphc51dk.cloudfront.net/RhCPuRWITO6WFW2Zu_u3EQ/large.jpg'
+    resizer.__set__ 'endpoint', 'https://d7hftxdivxxvm.cloudfront.net'
+
+  describe 'using the gemini proxy', ->
+
+    describe '#resize', ->
+      it 'returns the appropriate URL when no width is specified', ->
+        resizer.resize @src, height: 300
+          .should.equal 'https://d7hftxdivxxvm.cloudfront.net?resize_to=height&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FRhCPuRWITO6WFW2Zu_u3EQ%2Flarge.jpg&height=300&quality=95'
+
+      it 'returns the appropriate URL when no height is specified', ->
+        resizer.resize @src, width: 300
+          .should.equal 'https://d7hftxdivxxvm.cloudfront.net?resize_to=width&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FRhCPuRWITO6WFW2Zu_u3EQ%2Flarge.jpg&width=300&quality=95'
+
+      it 'returns the appropriate URL when both a height and width are specified', ->
+        resizer.resize @src, width: 300, height: 200
+          .should.equal 'https://d7hftxdivxxvm.cloudfront.net?resize_to=fit&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FRhCPuRWITO6WFW2Zu_u3EQ%2Flarge.jpg&width=300&height=200&quality=95'
+
+    describe '#crop', ->
+      it 'returns the appropriate URL', ->
+        resizer.crop @src, width: 32, height: 32
+          .should.equal 'https://d7hftxdivxxvm.cloudfront.net?resize_to=fill&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FRhCPuRWITO6WFW2Zu_u3EQ%2Flarge.jpg&width=32&height=32&quality=95'
+
+    describe '#fill', ->
+      it 'is not really supported and falls back to crop', ->
+        resizer.fill @src, width: 32, height: 32
+          .should.equal 'https://d7hftxdivxxvm.cloudfront.net?resize_to=fill&src=https%3A%2F%2Fd32dm0rphc51dk.cloudfront.net%2FRhCPuRWITO6WFW2Zu_u3EQ%2Flarge.jpg&width=32&height=32&quality=95'

client/lib/setup/sharify.coffee

@@ -13,4 +13,4 @@ sharify = require 'sharify'
 
 sharify.data = _.pick process.env,
   'APP_URL', 'API_URL', 'NODE_ENV', 'FORCE_URL', 'ARTSY_URL', 'GEMINI_KEY',
-  'EMBEDLY_KEY', 'SEGMENT_WRITE_KEY', 'EDITORIAL_TEAM', 'EDITORIAL_EMAIL'
+  'SEGMENT_WRITE_KEY', 'EDITORIAL_TEAM', 'EDITORIAL_EMAIL', 'GEMINI_CLOUDFRONT_URL'

client/lib/view_helpers.coffee

@@ -8,4 +8,4 @@ sd = require('sharify').data
 @moment = require 'moment'
 @_ = require 'underscore'
 @_s = require 'underscore.string'
-{ @crop, @resize, @fill } = require('embedly-view-helpers')(sd.EMBEDLY_KEY)
+{ @crop, @resize, @fill } = require '../components/resizer/index.coffee'