feat(Spotify): Add support for Spotify (#29)

* feat: add support for spotify * Add docs & fix export * fix: remove invalid URL * feat: add support for embedding spotify track * fix: add separate method for fetching Iframe url and more support of spotify url * Cleanup docs * Cleanup code * Update + add tests * fix: tests and refactor code * Update snapshots * fix: requested change * fix: requested changes
MichaelDeBoey · Nov 11, 2019 · 55aa248 · 55aa248
1 parent 5cdb453
commit 55aa248
Show file tree

Hide file tree

Showing 8 changed files with 198 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -43,6 +43,7 @@ and replace it with the proper embed-code.
  - [CodeSandbox](#codesandbox)
  - [Slides](#slides)
  - [SoundCloud](#soundcloud)
+ - [Spotify](#spotify)
  - [Twitter](#twitter)
  - [YouTube](#youtube)
 - [Inspiration](#inspiration)
@@ -161,6 +162,27 @@ https://soundcloud.com/clemenswenners/africa
 ></iframe>
 ```
 
+### Spotify
+
+#### Usage
+
+```md
+https://open.spotify.com/track/0It2bnTdLl2vyymzOkBI3L
+```
+
+#### Result
+
+```html
+<iframe
+ src="https://open.spotify.com/embed/track/0It2bnTdLl2vyymzOkBI3L"
+ width="100%"
+ height="380"
+ frameborder="0"
+ allowtransparency="true"
+ allow="encrypted-media"
+></iframe>
+```
+
 ### Twitter
 
 The returned HTML snippet from the Twitter transformer will only be

diff --git a/src/Spotify.js b/src/Spotify.js
@@ -0,0 +1,39 @@
+import { URL } from 'url';
+
+const includesSomeOfArray = (string, array) =>
+ array.some(item => string.includes(item));
+
+export const shouldTransform = url => {
+ const { host, pathname } = new URL(url);
+
+ return (
+ host === 'open.spotify.com' &&
+ !includesSomeOfArray(pathname, ['embed', 'embed-podcast']) &&
+ includesSomeOfArray(pathname, [
+ '/album/',
+ '/artist/',
+ '/episode/',
+ '/show/',
+ '/track/',
+ '/playlist/',
+ ])
+ );
+};
+
+export const getSpotifyIFrameSrc = urlString => {
+ const { pathname } = new URL(urlString);
+ const type = pathname.split('/')[1].toLowerCase();
+
+ const podcastTypes = ['episode', 'show'];
+ if (podcastTypes.includes(type)) {
+ return urlString.replace(type, `embed-podcast/${type}`);
+ }
+
+ return urlString.replace(type, `embed/${type}`);
+};
+
+export const getHTML = url => {
+ const iframeSrc = getSpotifyIFrameSrc(url);
+
+ return `<iframe src="${iframeSrc}" width="100%" height="380" frameborder="0" allowtransparency="true" allow="encrypted-media"></iframe>`;
+};
diff --git a/src/__tests__/Spotify.js b/src/__tests__/Spotify.js
@@ -0,0 +1,116 @@
+import cases from 'jest-in-case';
+
+import { getHTML, getSpotifyIFrameSrc, shouldTransform } from '../Spotify';
+
+cases(
+ 'url validation',
+ ({ url, valid }) => {
+ expect(shouldTransform(url)).toBe(valid);
+ },
+ {
+ 'non-Spotify url': {
+ url: 'https://not-a-spotify-url.com',
+ valid: false,
+ },
+ "non-Spotify url ending with 'spotify.com'": {
+ url: 'https://this-is-not-spotify.com',
+ valid: false,
+ },
+ "api url having '/album/'": {
+ url: 'https://api.spotify.com/album/1DFixLWuPkv3KT3TnV35m3',
+ valid: false,
+ },
+ 'embed album url': {
+ url: 'https://open.spotify.com/embed/album/254Y0CD07dB40q84db89EB',
+ valid: false,
+ },
+ 'embed artist url': {
+ url: 'https://open.spotify.com/embed/artist/0QaSiI5TLA4N7mcsdxShDO',
+ valid: false,
+ },
+ 'embed episode url': {
+ url:
+ 'https://open.spotify.com/embed-podcast/episode/0j9RE1H47GSmBnRqOtf1dx',
+ valid: false,
+ },
+ 'embed playlist url': {
+ url: 'https://open.spotify.com/embed/playlist/37i9dQZF1DX5wDmLW735Yd',
+ valid: false,
+ },
+ 'embed show url': {
+ url: 'https://open.spotify.com/embed-podcast/show/7GkO2poedjbltWT5lduL5w',
+ valid: false,
+ },
+ 'embed track url': {
+ url: 'https://open.spotify.com/embed/track/0It2bnTdLl2vyymzOkBI3L',
+ valid: false,
+ },
+ 'album url': {
+ url: 'https://open.spotify.com/album/254Y0CD07dB40q84db89EB',
+ valid: true,
+ },
+ 'artist url': {
+ url: 'https://open.spotify.com/artist/0QaSiI5TLA4N7mcsdxShDO',
+ valid: true,
+ },
+ 'episode url': {
+ url: 'https://open.spotify.com/episode/0j9RE1H47GSmBnRqOtf1dx',
+ valid: true,
+ },
+ 'playlist url': {
+ url: 'https://open.spotify.com/playlist/37i9dQZF1DX5wDmLW735Yd',
+ valid: true,
+ },
+ 'show url': {
+ url: 'https://open.spotify.com/show/7GkO2poedjbltWT5lduL5w',
+ valid: true,
+ },
+ 'track url': {
+ url: 'https://open.spotify.com/track/0It2bnTdLl2vyymzOkBI3L',
+ valid: true,
+ },
+ }
+);
+
+cases(
+ 'get spotify iframe',
+ ({ url, iframe }) => {
+ expect(getSpotifyIFrameSrc(url)).toBe(iframe);
+ },
+ {
+ 'album url': {
+ url: 'https://open.spotify.com/album/254Y0CD07dB40q84db89EB',
+ iframe: 'https://open.spotify.com/embed/album/254Y0CD07dB40q84db89EB',
+ },
+ 'artist url': {
+ url: 'https://open.spotify.com/artist/0QaSiI5TLA4N7mcsdxShDO',
+ iframe: 'https://open.spotify.com/embed/artist/0QaSiI5TLA4N7mcsdxShDO',
+ },
+ 'episode url': {
+ url: 'https://open.spotify.com/episode/0j9RE1H47GSmBnRqOtf1dx',
+ iframe:
+ 'https://open.spotify.com/embed-podcast/episode/0j9RE1H47GSmBnRqOtf1dx',
+ },
+ 'playlist url': {
+ url: 'https://open.spotify.com/playlist/37i9dQZF1DX5wDmLW735Yd',
+ iframe: 'https://open.spotify.com/embed/playlist/37i9dQZF1DX5wDmLW735Yd',
+ },
+ 'show url': {
+ url: 'https://open.spotify.com/show/7GkO2poedjbltWT5lduL5w',
+ iframe:
+ 'https://open.spotify.com/embed-podcast/show/7GkO2poedjbltWT5lduL5w',
+ },
+ 'track url': {
+ url: 'https://open.spotify.com/track/0It2bnTdLl2vyymzOkBI3L',
+ iframe: 'https://open.spotify.com/embed/track/0It2bnTdLl2vyymzOkBI3L',
+ },
+ }
+);
+
+test('Gets the correct Spotify iframe for Track', () => {
+ const html = getHTML('https://open.spotify.com/track/0It2bnTdLl2vyymzOkBI3L');
+
+ expect(html).toMatchInlineSnapshot(
+ `"<iframe src=\\"https://open.spotify.com/embed/track/0It2bnTdLl2vyymzOkBI3L\\" width=\\"100%\\" height=\\"380\\" frameborder=\\"0\\" allowtransparency=\\"true\\" allow=\\"encrypted-media\\"></iframe>"`
+ );
+});
diff --git a/src/__tests__/__fixtures__/Spotify.md b/src/__tests__/__fixtures__/Spotify.md
@@ -0,0 +1 @@
+https://open.spotify.com/track/0It2bnTdLl2vyymzOkBI3L
diff --git a/src/__tests__/__fixtures__/kitchensink.md b/src/__tests__/__fixtures__/kitchensink.md
@@ -23,6 +23,8 @@ https://slides.com/kentcdodds/oss-we-want
 
 https://soundcloud.com/clemenswenners/africa
 
+https://open.spotify.com/track/0It2bnTdLl2vyymzOkBI3L
+
 https://twitter.com/kentcdodds/status/1078755736455278592
 
 https://youtu.be/dQw4w9WgXcQ
diff --git a/src/__tests__/__snapshots__/plugin.js.snap b/src/__tests__/__snapshots__/plugin.js.snap
@@ -20,6 +20,11 @@ exports[`gatsby-remark-embedder can transform SoundCloud links 1`] = `
 "
 `;
 
+exports[`gatsby-remark-embedder can transform Spotify links 1`] = `
+"<iframe src=\\"https://open.spotify.com/embed/track/0It2bnTdLl2vyymzOkBI3L\\" width=\\"100%\\" height=\\"380\\" frameborder=\\"0\\" allowtransparency=\\"true\\" allow=\\"encrypted-media\\"></iframe>
+"
+`;
+
 exports[`gatsby-remark-embedder can transform Twitter links 1`] = `
 "<blockquote class=\\"twitter-tweet-mocked-fetch\\"><p lang=\\"en\\" dir=\\"ltr\\">example</p>&mdash; Kent C. Dodds (@kentcdodds) <a href=\\"https://twitter.com/kentcdodds/status/1078755736455278592\\">December 28, 2018</a></blockquote>
 "
@@ -56,6 +61,8 @@ This is a paragraph with a [link](https://example.com).
 
 <iframe width=\\"100%\\" height=\\"300\\" scrolling=\\"no\\" frameborder=\\"no\\" src=https://w.soundcloud.com/player?url=https://soundcloud.com/clemenswenners/africa&color=ff5500&auto_play=false&hide_related=true&show_comments=true&show_user=true&show_reposts=false&show_teaser=false&visual=true></iframe>
 
+<iframe src=\\"https://open.spotify.com/embed/track/0It2bnTdLl2vyymzOkBI3L\\" width=\\"100%\\" height=\\"380\\" frameborder=\\"0\\" allowtransparency=\\"true\\" allow=\\"encrypted-media\\"></iframe>
+
 <blockquote class=\\"twitter-tweet-from-cache\\"><p lang=\\"en\\" dir=\\"ltr\\">example</p>&mdash; Kent C. Dodds (@kentcdodds) <a href=\\"https://twitter.com/kentcdodds/status/1078755736455278592?ref_src=twsrc%5Etfw\\">December 28, 2018</a></blockquote>
 
 <iframe width=\\"100%\\" height=\\"315\\" src=\\"https://www.youtube-nocookie.com/embed/dQw4w9WgXcQ?rel=0\\" frameBorder=\\"0\\" allow=\\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\\" allowFullScreen></iframe>

diff --git a/src/__tests__/plugin.js b/src/__tests__/plugin.js
@@ -78,6 +78,14 @@ describe('gatsby-remark-embedder', () => {
  expect(remark.stringify(processedAST)).toMatchSnapshot();
  });
 
+ it('can transform Spotify links', async () => {
+ const markdownAST = getMarkdownASTForFile('Spotify');
+
+ const processedAST = await plugin({ cache, markdownAST });
+
+ expect(remark.stringify(processedAST)).toMatchSnapshot();
+ });
+
  it('can transform Twitter links', async () => {
  fetchMock.mockResolvedValue({
  json: () =>

diff --git a/src/index.js b/src/index.js
@@ -2,15 +2,17 @@ import visit from 'unist-util-visit';
 
 import * as CodePenTransformer from './CodePen';
 import * as CodeSandboxTransformer from './CodeSandbox';
-import * as SoundCloudTransformer from './SoundCloud';
 import * as SlidesTransformer from './Slides';
+import * as SoundCloudTransformer from './SoundCloud';
+import * as SpotifyTransformer from './Spotify';
 import * as TwitterTransformer from './Twitter';
 import * as YouTubeTransformer from './YouTube';
 
 const transformers = [
  CodePenTransformer,
  CodeSandboxTransformer,
  SlidesTransformer,
+ SpotifyTransformer,
  SoundCloudTransformer,
  TwitterTransformer,
  YouTubeTransformer,