FEATURE: Support Spotify Onebox (#27540)

config/site_settings.yml

@@ -1996,7 +1996,7 @@ security:
     allow_any: false
     choices: "['*'] + Onebox::Engine.all_iframe_origins"
   allowed_iframes:
-    default: "https://www.google.com/maps/embed?|https://www.openstreetmap.org/export/embed.html?|https://calendar.google.com/calendar/embed?|https://codepen.io/|https://www.instagram.com"
+    default: "https://www.google.com/maps/embed?|https://www.openstreetmap.org/export/embed.html?|https://calendar.google.com/calendar/embed?|https://codepen.io/|https://www.instagram.com|https://open.spotify.com"
     type: list
     list_type: simple
     client: true

lib/onebox/engine/spotify_onebox.rb

@@ -0,0 +1,31 @@
+# frozen_string_literal: true
+
+module Onebox
+  module Engine
+    class SpotifyOnebox
+      include Engine
+      include StandardEmbed
+
+      matches_regexp(%r{^https?://open\.spotify/\.com})
+      requires_iframe_origins "https://open.spotify.com"
+      always_https
+
+      def to_html
+        oembed = get_oembed
+        oembed.html
+      end
+
+      def placeholder_html
+        oembed = get_oembed
+        return if oembed.thumbnail_url.blank?
+        "<img src='#{oembed.thumbnail_url}' title='#{oembed.title}' alt='#{oembed.title}' height='#{oembed.thumbnail_height}' width='#{oembed.thumbnail_width}'>"
+      end
+
+      protected
+
+      def get_oembed_url
+        "https://open.spotify.com/oembed?url=#{url}"
+      end
+    end
+  end
+end

spec/fixtures/onebox/spotify.response

@@ -0,0 +1,14 @@
+{
+    "html": "<iframe style=\"border-radius: 12px\" width=\"100%\" height=\"152\" title=\"Spotify Embed: NerdOut@Spotify\" frameborder=\"0\" allowfullscreen allow=\"autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture\" loading=\"lazy\" src=\"https://open.spotify.com/embed/show/5eXZwvvxt3K2dxha3BSaAe?utm_source=oembed\"></iframe>",
+    "iframe_url": "https://open.spotify.com/embed/show/5eXZwvvxt3K2dxha3BSaAe?utm_source=oembed",
+    "width": 456,
+    "height": 152,
+    "version": "1.0",
+    "provider_name": "Spotify",
+    "provider_url": "https://spotify.com",
+    "type": "rich",
+    "title": "NerdOut@Spotify",
+    "thumbnail_url": "https://i.scdn.co/image/ab67656300005f1f3ed9a52396207aad8858a28a",
+    "thumbnail_width": 300,
+    "thumbnail_height": 300
+  }

spec/lib/onebox/engine/spotify_onebox_spec.rb

@@ -0,0 +1,39 @@
+# frozen_string_literal: true
+
+RSpec.describe Onebox::Engine::SpotifyOnebox do
+  let(:link) { "https://open.spotify.com/show/5eXZwvvxt3K2dxha3BSaAe" }
+  let(:api_link) do
+    "https://open.spotify.com/oembed?url=https%3A%2F%2Fopen.spotify.com%2Fshow%2F5eXZwvvxt3K2dxha3BSaAe"
+  end
+  let(:html) { described_class.new(link).to_html }
+  let(:placeholder_html) { described_class.new(link).placeholder_html }
+
+  before { stub_request(:get, api_link).to_return(status: 200, body: onebox_response("spotify")) }
+
+  describe "#placeholder_html" do
+    it "returns an image as the placeholder" do
+      expect(placeholder_html).to include(
+        "https://i.scdn.co/image/ab67656300005f1f3ed9a52396207aad8858a28a",
+      )
+    end
+
+    it "has a fixed height" do
+      expect(placeholder_html).to include("height='300'")
+    end
+  end
+
+  describe "#to_html" do
+    it "returns iframe embed" do
+      expect(html).to include(URI(link).path)
+      expect(html).to include("iframe")
+    end
+
+    it "has object id" do
+      expect(html).to include("5eXZwvvxt3K2dxha3BSaAe")
+    end
+
+    it "has the a fixed height" do
+      expect(html).to include('height="152"')
+    end
+  end
+end