Skip to content

Commit 314de7e

Browse files
MichaelDeBoeyMichaelDeBoey
authored
fix(Twitch): Fix Twitch embed (#131)
BREAKING CHANGE: You'll now need to pass a required `parent` option whenever you're using the Twitch service BREAKING CHANGE: Twitch embeds can only be embedded on HTTPS websites. Check out the Gatsby docs for setting this up when developing locally.
1 parent 77658d0 commit 314de7e

File tree

4 files changed

+139
-21
lines changed

4 files changed

+139
-21
lines changed

‎README.md‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -532,6 +532,9 @@ https://streamable.com/moo
532532

533533
### Twitch
534534

535+
Twitch embeds can only be embedded on HTTPS websites. Check out [the Gatsby
536+
docs][gatsby-https-docs] for setting this up when developing locally.
537+
535538
#### Usage
536539

537540
```md
@@ -554,6 +557,70 @@ https://twitch.tv/videos/546761743
554557

555558
</details>
556559

560+
#### Options
561+
562+
All options should go under the `Twitch` namespace.
563+
564+
| name | Type | Required | Default | Description |
565+
| ------ | --------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------- |
566+
| parent | `string` / `string[]` | ✅ | | Domain(s) that will be embedding Twitch. You must have one parent key for each domain your site uses. |
567+
568+
##### parent
569+
570+
You could either put in (a) hardcoded value(s) _or_ you could use environment
571+
variables that are available during the build process.
572+
573+
###### Netlify
574+
575+
Netlify has the `URL`, `DEPLOY_URL` and `DEPLOY_PRIME_URL` environment
576+
variables. Take a look at [the Netlify docs][netlify-environment-variables-docs]
577+
for more info.
578+
579+
<details>
580+
<summary><b>Example</b></summary>
581+
582+
```js
583+
const GatsbyRemarkEmbedderOptions = {
584+
services: {
585+
Twitch: {
586+
parent: [
587+
env.process.URL,
588+
env.process.DEPLOY_URL,
589+
env.process.DEPLOY_PRIME_URL,
590+
591+
// Other domains here...
592+
],
593+
},
594+
},
595+
};
596+
```
597+
598+
</details>
599+
600+
###### Vercel
601+
602+
Vercel has the `VERCEL_URL` environment variable. Take a look at [the Vercel
603+
docs][vercel-environment-variables-docs] for more info.
604+
605+
<details>
606+
<summary><b>Example</b></summary>
607+
608+
```js
609+
const GatsbyRemarkEmbedderOptions = {
610+
services: {
611+
Twitch: {
612+
parent: [
613+
env.process.VERCEL_URL,
614+
615+
// Other domains here...
616+
],
617+
},
618+
},
619+
};
620+
```
621+
622+
</details>
623+
557624
### Twitter
558625

559626
The returned HTML snippet from the Twitter transformer will only be
@@ -796,6 +863,7 @@ MIT
796863
[codesandbox]: https://codesandbox.io
797864
[embedded-tweet-docs]: https://developer.twitter.com/web/embedded-tweets
798865
[gatsby]: https://github.com/gatsbyjs/gatsby
866+
[gatsby-https-docs]: https://gatsbyjs.org/docs/local-https
799867
[gatsby-plugin-instagram-embed]: https://github.com/MichaelDeBoey/gatsby-plugin-instagram-embed
800868
[gatsby-plugin-mdx]: https://github.com/gatsbyjs/gatsby/tree/master/packages/gatsby-plugin-mdx
801869
[gatsby-plugin-pinterest]: https://github.com/robinmetral/gatsby-plugin-pinterest
@@ -805,6 +873,7 @@ MIT
805873
[instagram]: https://instagram.com
806874
[kentcdodds.com-repo]: https://github.com/kentcdodds/kentcdodds.com
807875
[lichess]: https://lichess.org
876+
[netlify-environment-variable-docs]: https://docs.netlify.com/configure-builds/environment-variables/#deploy-urls-and-metadata
808877
[pinterest]: https://pinterest.com
809878
[slides]: https://slides.com
810879
[soundcloud]: https://soundcloud.com
@@ -813,5 +882,6 @@ MIT
813882
[twitch]: https://twitch.tv
814883
[twitter]: https://twitter.com
815884
[twitter-widget-javascript-docs]: https://developer.twitter.com/en/docs/twitter-for-websites/javascript-api/overview
885+
[vercel-environment-variable-docs]: https://vercel.com/docs/v2/build-step?query=Build#system-environment-variables
816886
[youtube]: https://youtube.com
817887
<!-- prettier-ignore-end -->

‎src/__tests__/plugin.js‎

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,16 @@ describe('gatsby-remark-embedder', () => {
2323
});
2424
const markdownAST = getMarkdownASTForFile('kitchensink', true);
2525

26-
const processedAST = await plugin({ cache, markdownAST });
26+
const processedAST = await plugin(
27+
{ cache, markdownAST },
28+
{
29+
services: {
30+
Twitch: {
31+
parent: 'embed.example.com',
32+
},
33+
},
34+
}
35+
);
2736

2837
expect(parseASTToMarkdown(processedAST)).toMatchInlineSnapshot(`
2938
"# Heading 1
@@ -65,7 +74,7 @@ describe('gatsby-remark-embedder', () => {
6574
6675
<iframe class=\\"streamable-embed-from-cache\\" src=\\"https://streamable.com/o/moo\\" frameborder=\\"0\\" scrolling=\\"no\\" width=\\"1920\\" height=\\"1080\\" allowfullscreen></iframe>
6776
68-
<iframe src=\\"https://player.twitch.tv?video=546761743\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
77+
<iframe src=\\"https://player.twitch.tv?video=546761743&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
6978
7079
<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\\">December 28, 2018</a></blockquote>
7180

‎src/__tests__/transformers/Twitch.js‎

Lines changed: 44 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import plugin from '../..';
44
import {
55
getHTML,
66
getTwitchIFrameSrc,
7+
normalizeParent,
78
shouldTransform,
89
} from '../../transformers/Twitch';
910

@@ -179,18 +180,44 @@ cases(
179180
}
180181
);
181182

183+
cases(
184+
'normalizeParent',
185+
({ normalizedParent, parent }) => {
186+
expect(normalizeParent(parent)).toBe(normalizedParent);
187+
},
188+
[
189+
{ parent: 'embed.example.com', normalizedParent: 'embed.example.com' },
190+
{ parent: ['embed.example.com'], normalizedParent: 'embed.example.com' },
191+
{
192+
parent: ['embed.example.com', 'streamernews.example.com'],
193+
normalizedParent: 'embed.example.com&parent=streamernews.example.com',
194+
},
195+
]
196+
);
197+
182198
test('Gets the correct Twitch iframe', () => {
183-
const html = getHTML('https://twitch.tv/videos/546761743');
199+
const html = getHTML('https://twitch.tv/videos/546761743', {
200+
parent: 'embed.example.com',
201+
});
184202

185203
expect(html).toMatchInlineSnapshot(
186-
`"<iframe src=\\"https://player.twitch.tv?video=546761743\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>"`
204+
`"<iframe src=\\"https://player.twitch.tv?video=546761743&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>"`
187205
);
188206
});
189207

190208
test('Plugin can transform Twitch links', async () => {
191209
const markdownAST = getMarkdownASTForFile('Twitch');
192210

193-
const processedAST = await plugin({ cache, markdownAST });
211+
const processedAST = await plugin(
212+
{ cache, markdownAST },
213+
{
214+
services: {
215+
Twitch: {
216+
parent: 'embed.example.com',
217+
},
218+
},
219+
}
220+
);
194221

195222
expect(parseASTToMarkdown(processedAST)).toMatchInlineSnapshot(`
196223
"<https://not-a-twitch-url.tv>
@@ -209,33 +236,33 @@ test('Plugin can transform Twitch links', async () => {
209236
210237
<https://clips.twitch.tv/embed?clip=PeacefulAbstrusePorcupineDansGame>
211238
212-
<iframe src=\\"https://player.twitch.tv?channel=jlengstorf\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
239+
<iframe src=\\"https://player.twitch.tv?channel=jlengstorf&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
213240
214-
<iframe src=\\"https://player.twitch.tv?channel=jlengstorf\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
241+
<iframe src=\\"https://player.twitch.tv?channel=jlengstorf&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
215242
216-
<iframe src=\\"https://player.twitch.tv?channel=jlengstorf\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
243+
<iframe src=\\"https://player.twitch.tv?channel=jlengstorf&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
217244
218-
<iframe src=\\"https://clips.twitch.tv/embed?clip=PeacefulAbstrusePorcupineDansGame\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
245+
<iframe src=\\"https://clips.twitch.tv/embed?clip=PeacefulAbstrusePorcupineDansGame&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
219246
220-
<iframe src=\\"https://clips.twitch.tv/embed?clip=PeacefulAbstrusePorcupineDansGame\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
247+
<iframe src=\\"https://clips.twitch.tv/embed?clip=PeacefulAbstrusePorcupineDansGame&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
221248
222-
<iframe src=\\"https://clips.twitch.tv/embed?clip=PeacefulAbstrusePorcupineDansGame\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
249+
<iframe src=\\"https://clips.twitch.tv/embed?clip=PeacefulAbstrusePorcupineDansGame&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
223250
224-
<iframe src=\\"https://player.twitch.tv?collection=DHetedhyqBSVMg\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
251+
<iframe src=\\"https://player.twitch.tv?collection=DHetedhyqBSVMg&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
225252
226-
<iframe src=\\"https://player.twitch.tv?collection=DHetedhyqBSVMg\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
253+
<iframe src=\\"https://player.twitch.tv?collection=DHetedhyqBSVMg&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
227254
228-
<iframe src=\\"https://player.twitch.tv?collection=DHetedhyqBSVMg\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
255+
<iframe src=\\"https://player.twitch.tv?collection=DHetedhyqBSVMg&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
229256
230-
<iframe src=\\"https://player.twitch.tv?collection=DHetedhyqBSVMg\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
257+
<iframe src=\\"https://player.twitch.tv?collection=DHetedhyqBSVMg&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
231258
232-
<iframe src=\\"https://player.twitch.tv?collection=DHetedhyqBSVMg\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
259+
<iframe src=\\"https://player.twitch.tv?collection=DHetedhyqBSVMg&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
233260
234-
<iframe src=\\"https://player.twitch.tv?video=546761743\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
261+
<iframe src=\\"https://player.twitch.tv?video=546761743&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
235262
236-
<iframe src=\\"https://player.twitch.tv?video=546761743\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
263+
<iframe src=\\"https://player.twitch.tv?video=546761743&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
237264
238-
<iframe src=\\"https://player.twitch.tv?video=546761743\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
265+
<iframe src=\\"https://player.twitch.tv?video=546761743&parent=embed.example.com\\" height=\\"300\\" width=\\"100%\\" frameborder=\\"0\\" scrolling=\\"no\\" allowfullscreen></iframe>
239266
"
240267
`);
241268
});

‎src/transformers/Twitch.js‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -83,8 +83,20 @@ export const getTwitchIFrameSrc = (urlString) => {
8383
)}`;
8484
};
8585

86-
export const getHTML = (url) => {
87-
const iframeUrl = getTwitchIFrameSrc(url);
86+
export const normalizeParent = (parent) => {
87+
if (Array.isArray(parent)) {
88+
return parent.join('&parent=');
89+
}
90+
91+
return parent;
92+
};
93+
94+
export const getHTML = (url, { parent }) => {
95+
const iframeUrl = `${getTwitchIFrameSrc(url)}&parent=${normalizeParent(
96+
parent
97+
)}`;
8898

8999
return `<iframe src="${iframeUrl}" height="300" width="100%" frameborder="0" scrolling="no" allowfullscreen></iframe>`;
90100
};
101+
102+
export const name = 'Twitch';

0 commit comments

Comments
 (0)