pageflow-oembed 1.0.1 → 1.1.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 768e67651b4278343646a683061082b75803f7af
-  data.tar.gz: 0c9df1cbfe40cb14740b3eb57170d7cb45304dd3
+  metadata.gz: e3ab4e28e97a30dcb8bb9a5e62ff19140d17c125
+  data.tar.gz: 9f75f2259db7007baf98103977bd5fd80601e6ca
 SHA512:
-  metadata.gz: bbc5417af0cf5e20ffed703cd89c48173625366adbe87b1fa9c0c116011151654c62301def80b64947247b303edf3965bdf30e08e10bf221517e7e003a6e5115
-  data.tar.gz: 86ba5adcc366f271755bfd02bbf8cce48463f6787cdefb38444bded60cf8a0874baa5546ea4dcae273a3a4f43f21389d1b2043b1a38aef5b148ead6245ed1e34
+  metadata.gz: 304639e97cd7959dc15b706540ce94e41e3da4ab8b6687a3e381efadcbfa0828844140c60480987b1482f0f890e2b5e87d25f36f022ab8dddd677278968fa36c
+  data.tar.gz: e5326f68776ea1b68277a7ec7eb1d631b534da1499e98e4ac93ae4b6fe53564997ef89ad8baa32592500bfcfdc00361bfd163bc3f6ad0d5f778633ea46ca85ab

data/CHANGELOG

@@ -1,3 +1,12 @@
+Version 1.1.0—16 July 2017
+
+Bugfix: NodeList to Array now considers empty Nodelist. Also, speed.
+
+Added Spotify support. Uses Oembed like the makers intended, damnit!
+
+* spotify, single track: https://open.spotify.com/track/298gs9ATwr2rD9tGYJKlQR
+* spotify, artist: https://open.spotify.com/artist/0IIPgITtEO4JJfipw57KGv
+
 Version 1.0.1—16 July 2017
 
 Bugfix: tweet ID is now correctly parsed from the link.
@@ -5,4 +14,6 @@ Bugfix: tweet ID is now correctly parsed from the link.
 Version 1.0.0—16 July 2017
 
 Twitter support. Doesn't actually use oEmbed, because the Twitter SDK
-handles everything for us.
+handles everything for us. Oh well.
+
+* twitter, single tweet: https://twitter.com/scrollytelling/status/885128273239396352

data/README.md

@@ -5,6 +5,8 @@ into embedded content when possible. For example, instead of a link to a
 [Tweet URL](https://twitter.com/scrollytelling/status/885128273239396352), people
 reading your story will see the Tweet embedded in the page.
 
+[Read the introduction on Scrollytelling](https://app.scrollytelling.io/embed-a-tweet)
+
 It usually works using [oEmbed](http://oembed.com), the standard protocol for discovering
 and showing embedded content. Although sometimes we use a JavaScript SDK, since it
 gives better results. When we do use oEmbed, the embed-code is cached in
@@ -25,16 +27,20 @@ We work with a whitelist and will convert only some links.
 
 Currently supported:
 
-* twitter: https://twitter.com/scrollytelling/status/885128273239396352
+* twitter, single tweet: https://twitter.com/scrollytelling/status/885128273239396352
+* spotify, single track: https://open.spotify.com/track/298gs9ATwr2rD9tGYJKlQR
+* spotify, artist: https://open.spotify.com/artist/0IIPgITtEO4JJfipw57KGv
 
 Note that the URL you use must look exactly like the ones above.
 
 More providers will follow.
 
-### Just use JavaScript
+### Just uses JavaScript
 
-jQuery is not used at all. This plugin contains two polyfills to get IE on board.
-And if you are using an ancient browser, well, that's your choice.
+No jQuery was created during the development of this plugin. It does mean we
+have two polyfills to get IE on board. These don't get loaded if your browser
+is up to date. And if you are using a really ancient browser, well, that's
+your choice.
 
 ### Heads up: social scripts will be included in the page
 

data/app/assets/javascript/pageflow/oembed.js

@@ -2,19 +2,19 @@
 //
 pageflow.widgetTypes.register('pageflow_oembed', {
   enhance: function(element) {
+    var embedLinks = [];
     var urls = document.querySelectorAll('.contentText a');
-    var embedLinks = Array.from(urls).filter(this.embeddable);
+    for(var i = urls.length; i--; embedLinks.unshift(urls[i]));
+
     for (var i = 0, len = embedLinks.length; i < len; i++) {
-      if( /twitter/i.test(embedLinks[i].getAttribute('href')) )
-        this.embedTwitter(embedLinks[i]);
+      var url = embedLinks[i].getAttribute('href');
+      if( /twitter/i.test(url) )
+        this.embedTwitter(embedLinks[i], url);
+      else if( /spotify/i.test(url) )
+        this.embedSpotify(embedLinks[i], url);
     };
   },
 
-  embeddable: function(link) {
-    url = link.getAttribute('href');
-    return /https?:\/\/twitter.com\/\w*\/\w*\/\d*/.test(url);
-  },
-
   token: function() {
     return document.querySelector("meta[name='csrf-token']").content;
   },
@@ -23,27 +23,26 @@ pageflow.widgetTypes.register('pageflow_oembed', {
     return link.closest('.page');
   },
 
-  embedSpotify: function(link) {
+  embedSpotify: function(anchor, url) {
     var xhr = new XMLHttpRequest();
-    var url = link.getAttribute('href');
-    var data = {oembed: {url: url, locale: pageflow.seed.locale}};
+    var data = {oembed: {url: url}};
     xhr.open("POST", '/oembed/fetch', true);
     xhr.setRequestHeader("Content-Type", "application/json");
     xhr.setRequestHeader("X-CSRF-Token", this.token());
     xhr.onload = function() {
       oembed = JSON.parse(this.responseText);
-      link.outerHTML = oembed.html;
+      anchor.insertAdjacentHTML('afterend', oembed.html);
+      anchor.style.display = 'none';
     };
     xhr.send(JSON.stringify(data));
   },
 
-  embedTwitter: function(link) {
-    var url = link.getAttribute('href');
+  embedTwitter: function(anchor, url) {
     var match = /(\d+)$/.exec(url);
     tweetId = match[0];
-    var theme = this.page(link).classList.contains('invert') ? 'light' : 'dark';
+    var theme = this.page(anchor).classList.contains('invert') ? 'light' : 'dark';
 
-    link.insertAdjacentHTML('beforebegin', '<span id="tweet-'+tweetId+'"></span>')
+    anchor.insertAdjacentHTML('beforebegin', '<span id="tweet-'+tweetId+'"></span>')
 
     var options = {omit_script: true, related: 'scrollytelling', lang: pageflow.seed.locale, theme: theme, dnt: 'true'};
     twttr.widgets.createTweet(
@@ -51,6 +50,6 @@ pageflow.widgetTypes.register('pageflow_oembed', {
       document.getElementById('tweet-'+tweetId),
       options
     );
-    link.style.display = 'none';
+    anchor.style.display = 'none';
   }
 });

data/app/models/pageflow/oembed/fetcher.rb

@@ -1,6 +1,3 @@
-require 'faraday'
-require 'faraday_middleware'
-
 module Pageflow
   module Oembed
     class Fetcher
@@ -16,26 +13,13 @@ module Pageflow
       end
 
       def fetch
-        # Twitter: GET https://publish.twitter.com/oembed?url=https%3A%2F%2Ftwitter.com%2FInterior%2Fstatus%2F507185938620219395
-        connection = Faraday.new(url: "https://publish.twitter.com") do |conn|
-          conn.request :json
-          conn.response :json, :content_type => /\bjson$/
-
-          conn.adapter Faraday.default_adapter
+        if url.include?('twitter')
+          provider = Providers::Twitter.new(url, params)
+          provider.oembed_response
+        elsif url.include?('spotify')
+          provider = Providers::Spotify.new(url, params)
+          provider.oembed_response
         end
-
-        response = connection.get "/oembed", {
-          url: url,
-          omit_script: true,
-          related: 'scrollytelling',
-          lang: params[:locale] || 'en',
-          theme: params[:theme] || 'dark',
-          dnt: 'true'
-        }
-
-        oembed = response.body
-        oembed[:cache_until] = oembed[:cache_age].seconds.from_now
-        oembed
       end
     end
   end

data/app/models/pageflow/oembed/providers/spotify.rb

@@ -0,0 +1,42 @@
+require 'faraday'
+require 'faraday_middleware'
+
+module Pageflow
+  module Oembed
+    module Providers
+      class Spotify
+        def initialize(url, params)
+          @url = url
+          @params = params
+        end
+
+        attr_reader :url, :params
+
+        def oembed_response
+          # Spotify: GET https://open.spotify.com/oembed?url=http://open.spotify.com/track/298gs9ATwr2rD9tGYJKlQR
+          connection = Faraday.new({
+            url: "https://open.spotify.com",
+            headers: {user_agent: user_agent}
+          }) do |conn|
+            conn.request :json
+            conn.response :json, :content_type => /\bjson$/
+
+            conn.adapter Faraday.default_adapter
+          end
+
+          response = connection.get "/oembed", {
+            url: url
+          }
+
+          response.body
+        end
+
+        private
+
+        def user_agent
+          "Pageflow Oembed #{Pageflow::Oembed::VERSION}/Faraday #{Faraday::VERSION}"
+        end
+      end
+    end
+  end
+end

data/app/models/pageflow/oembed/providers/twitter.rb

@@ -0,0 +1,40 @@
+require 'faraday'
+require 'faraday_middleware'
+
+module Pageflow
+  module Oembed
+    module Providers
+      class Twitter
+        def initialize(url, params)
+          @url = url
+          @params = params
+        end
+
+        attr_reader :url, :params
+
+        def oembed_response
+          # Twitter: GET https://publish.twitter.com/oembed?url=https%3A%2F%2Ftwitter.com%2FInterior%2Fstatus%2F507185938620219395
+          connection = Faraday.new(url: "https://publish.twitter.com") do |conn|
+            conn.request :json
+            conn.response :json, :content_type => /\bjson$/
+
+            conn.adapter Faraday.default_adapter
+          end
+
+          response = connection.get "/oembed", {
+            url: url,
+            omit_script: true,
+            related: 'scrollytelling',
+            lang: params[:locale] || 'en',
+            theme: params[:theme] || 'dark',
+            dnt: 'true'
+          }
+
+          oembed = response.body
+          oembed[:cache_until] = oembed[:cache_age].seconds.from_now
+          oembed
+        end
+      end
+    end
+  end
+end

data/lib/pageflow/oembed/version.rb

@@ -1,5 +1,5 @@
 module Pageflow
   module Oembed
-    VERSION = "1.0.1"
+    VERSION = "1.1.0"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: pageflow-oembed
 version: !ruby/object:Gem::Version
-  version: 1.0.1
+  version: 1.1.0
 platform: ruby
 authors:
 - Joost Baaij
@@ -134,6 +134,8 @@ files:
 - app/models/pageflow/oembed/application_record.rb
 - app/models/pageflow/oembed/fetcher.rb
 - app/models/pageflow/oembed/oembed.rb
+- app/models/pageflow/oembed/providers/spotify.rb
+- app/models/pageflow/oembed/providers/twitter.rb
 - app/views/pageflow/oembed/_head.html.erb
 - app/views/pageflow/oembed/_widget.html.erb
 - bin/console