Skip to content

Commit

Permalink
Merge pull request gfscott#203 from gfscott/youtube-lite-0.3.0
Browse files Browse the repository at this point in the history 
Update Lite YouTube dependency to v0.3.0 and add responsive option for lite embeds
  • Loading branch information
@gfscott
gfscott authored Oct 9, 2023
2 parents de4a4db + 888ef94 commit 7f1fac3
Show file tree
Hide file tree
Showing 7 changed files with 60 additions and 22 deletions.
6 changes: 6 additions & 0 deletions .changeset/seven-swans-grab.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"eleventy-plugin-youtube-embed": minor
"eleventy-plugin-embed-everything": minor
---

Update Lite YouTube and add responsive option for lite embeds
12 changes: 9 additions & 3 deletions packages/youtube/README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -207,7 +207,7 @@ eleventyConfig.addPlugin(embedYouTube, {
<tr>
<td><code>lite.css.path</code></td>
<td>String</td>
<td><code>https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.min.css</code></td>
<td><code>https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@0.3.0/src/lite-yt-embed.min.css</code></td>
<td>Pass a custom URL to load the necessary CSS from the source of your choice.</td>
</tr>
<tr>
Expand All @@ -225,11 +225,17 @@ eleventyConfig.addPlugin(embedYouTube, {
<tr>
<td><code>lite.js.path</code></td>
<td>String</td>
<td><code>https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.min.js</code></td>
<td><code>https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@0.3.0/src/lite-yt-embed.min.js</code></td>
<td>Pass a custom URL to load the necessary JavaScript from the source of your choice.</td>
</tr>
<tr>
<td>✨ <b>New in v1.9.0!</b><br><code>lite.thumbnailQuality</code></td>
<td>✨ <b>New in v1.10.0!</b><br><code>lite.responsive</code></td>
<td>Boolean</td>
<td><code>false</code></td>
<td>If you change this to <code>true</code>, then the plugin adds a CSS rule to override the default max-width of <code>&lt;lite-youtube&gt;</code> elements, which are <a href="https://github.com/paulirish/lite-youtube-embed/blob/f9fc3a2475ade166d0cf7bb3e3caa3ec236ee74e/src/lite-yt-embed.css#L9">hard coded</a> to a maximum of 720 pixels.</td>
</tr>
<tr>
<td><code>lite.thumbnailQuality</code></td>
<td>String</td>
<td><code>hqdefault</code></td>
<td>Override the requested <a href="https://gist.github.com/protrolium/8831763">YouTube thumbnail image file</a>. Accepted values are <code>default</code>, <code>hqdefault</code>, <code>mqdefault</code>, <code>sddefault</code>, <code>maxresdefault</code>. Note that not all sizes are available for all videos. If the requested resolution isn’t available, YouTube shows a generic placeholder instead.</td>
Expand Down
10 changes: 8 additions & 2 deletions packages/youtube/lib/buildEmbed.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,10 +72,16 @@ function liteEmbed({id, url}, options, index) {
const params = urlParams(options);

if ( liteOpt.css.enabled && index === 0 ) {
out += liteOpt.css.inline ? `<style>${inlineCss}</style>\n` : `<link rel="stylesheet" href="${liteOpt.css.path}">\n`;
out += liteOpt.css.inline ? `<style>${inlineCss}</style>` : `<link rel="stylesheet" href="${liteOpt.css.path}">`;
out += '\n';
}
if ( liteOpt.js.enabled && index === 0 ) {
out += liteOpt.js.inline ? `<script>${inlineJs}</script>\n` : `<script defer="defer" src="${liteOpt.js.path}"></script>\n`;
out += liteOpt.js.inline ? `<script>${inlineJs}</script>` : `<script defer="defer" src="${liteOpt.js.path}"></script>`;
out += '\n';
}
if ( liteOpt.responsive && index === 0 ) {
out += `<style>.${options.embedClass} lite-youtube {max-width:100%}</style>`;
out += '\n';
}
out += `<div id="${id}" class="${options.embedClass}">`;
out += `<lite-youtube videoid="${id}" style="background-image: url('https://i.ytimg.com/vi/${id}/${liteOpt.thumbnailQuality}.jpg');"`
Expand Down
5 changes: 3 additions & 2 deletions packages/youtube/lib/pluginDefaults.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,14 @@ const liteDefaults = {
css: {
enabled: true,
inline: false,
path: 'https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.min.css'
path: 'https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@0.3.0/src/lite-yt-embed.min.css'
},
js: {
enabled: true,
inline: false,
path: 'https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.min.js'
path: 'https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@0.3.0/src/lite-yt-embed.min.js'
},
responsive: false,
thumbnailQuality: thumbnails.defaultSize,
};

Expand Down
2 changes: 1 addition & 1 deletion packages/youtube/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,6 @@
"bugs": "https://github.com/gfscott/eleventy-plugin-embed-everything/issues",
"dependencies": {
"deepmerge": "^4.3.1",
"lite-youtube-embed": "^0.2.0"
"lite-youtube-embed": "^0.3.0"
}
}
29 changes: 20 additions & 9 deletions packages/youtube/test/buildEmbed.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,47 +91,47 @@ const inlineJs = fs.readFileSync(liteJsFilePath, 'utf-8');
*/
test(`Build embed lite mode, zero index, lite defaults`, t => {
t.is(buildEmbed(videoData, override({lite: true}), 0),
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.min.css">\n<script defer="defer" src="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.min.js"></script>\n<div id="hIs5StN8J-0" class="eleventy-plugin-youtube-embed"><lite-youtube videoid="hIs5StN8J-0" style="background-image: url('https://i.ytimg.com/vi/hIs5StN8J-0/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube></div>`
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@0.3.0/src/lite-yt-embed.min.css">\n<script defer="defer" src="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@0.3.0/src/lite-yt-embed.min.js"></script>\n<div id="hIs5StN8J-0" class="eleventy-plugin-youtube-embed"><lite-youtube videoid="hIs5StN8J-0" style="background-image: url('https://i.ytimg.com/vi/hIs5StN8J-0/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube></div>`
);
});
test(`Build embed lite mode, zero index, valid thumbnail quality override`, t => {
t.is(buildEmbed(videoData, override({lite: { thumbnailQuality: 'maxresdefault'}}), 0),
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.min.css">\n<script defer="defer" src="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.min.js"></script>\n<div id="hIs5StN8J-0" class="eleventy-plugin-youtube-embed"><lite-youtube videoid="hIs5StN8J-0" style="background-image: url('https://i.ytimg.com/vi/hIs5StN8J-0/maxresdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube></div>`
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@0.3.0/src/lite-yt-embed.min.css">\n<script defer="defer" src="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@0.3.0/src/lite-yt-embed.min.js"></script>\n<div id="hIs5StN8J-0" class="eleventy-plugin-youtube-embed"><lite-youtube videoid="hIs5StN8J-0" style="background-image: url('https://i.ytimg.com/vi/hIs5StN8J-0/maxresdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube></div>`
);
});
test(`Build embed lite mode, zero index, invalid thumbnail quality override`, t => {
t.is(buildEmbed(videoData, override({lite: { thumbnailQuality: 'nope'}}), 0),
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.min.css">\n<script defer="defer" src="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.min.js"></script>\n<div id="hIs5StN8J-0" class="eleventy-plugin-youtube-embed"><lite-youtube videoid="hIs5StN8J-0" style="background-image: url('https://i.ytimg.com/vi/hIs5StN8J-0/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube></div>`
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@0.3.0/src/lite-yt-embed.min.css">\n<script defer="defer" src="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@0.3.0/src/lite-yt-embed.min.js"></script>\n<div id="hIs5StN8J-0" class="eleventy-plugin-youtube-embed"><lite-youtube videoid="hIs5StN8J-0" style="background-image: url('https://i.ytimg.com/vi/hIs5StN8J-0/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube></div>`
);
});
test(`Build embed lite mode, zero index, lite defaults with URL start time param`, t => {
t.is(buildEmbed(extractMatches('<p>https://www.youtube.com/watch?v=hIs5StN8J-0&t=30s</p>'), override({lite: true}), 0),
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.min.css">\n<script defer="defer" src="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.min.js"></script>\n<div id="hIs5StN8J-0" class="eleventy-plugin-youtube-embed"><lite-youtube videoid="hIs5StN8J-0" style="background-image: url('https://i.ytimg.com/vi/hIs5StN8J-0/hqdefault.jpg');" params="start=30"><div class="lty-playbtn"></div></lite-youtube></div>`
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@0.3.0/src/lite-yt-embed.min.css">\n<script defer="defer" src="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@0.3.0/src/lite-yt-embed.min.js"></script>\n<div id="hIs5StN8J-0" class="eleventy-plugin-youtube-embed"><lite-youtube videoid="hIs5StN8J-0" style="background-image: url('https://i.ytimg.com/vi/hIs5StN8J-0/hqdefault.jpg');" params="start=30"><div class="lty-playbtn"></div></lite-youtube></div>`
);
});
test(`Build embed lite mode, zero index, css disabled`, t => {
t.is(buildEmbed(videoData, override({lite:{css:{enabled: false}}}), 0),
`<script defer="defer" src="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.min.js"></script>\n<div id="hIs5StN8J-0" class="eleventy-plugin-youtube-embed"><lite-youtube videoid="hIs5StN8J-0" style="background-image: url('https://i.ytimg.com/vi/hIs5StN8J-0/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube></div>`
`<script defer="defer" src="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@0.3.0/src/lite-yt-embed.min.js"></script>\n<div id="hIs5StN8J-0" class="eleventy-plugin-youtube-embed"><lite-youtube videoid="hIs5StN8J-0" style="background-image: url('https://i.ytimg.com/vi/hIs5StN8J-0/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube></div>`
);
});
test(`Build embed lite mode, zero index, css inline`, t => {
t.is(buildEmbed(videoData, override({lite:{css:{inline: true}}}), 0),
`<style>${inlineCss}</style>\n<script defer="defer" src="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.min.js"></script>\n<div id="hIs5StN8J-0" class="eleventy-plugin-youtube-embed"><lite-youtube videoid="hIs5StN8J-0" style="background-image: url('https://i.ytimg.com/vi/hIs5StN8J-0/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube></div>`
`<style>${inlineCss}</style>\n<script defer="defer" src="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@0.3.0/src/lite-yt-embed.min.js"></script>\n<div id="hIs5StN8J-0" class="eleventy-plugin-youtube-embed"><lite-youtube videoid="hIs5StN8J-0" style="background-image: url('https://i.ytimg.com/vi/hIs5StN8J-0/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube></div>`
);
});
test(`Build embed lite mode, zero index, css path override`, t => {
t.is(buildEmbed(videoData, override({lite:{css:{path: 'foo'}}}), 0),
`<link rel="stylesheet" href="foo">\n<script defer="defer" src="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.min.js"></script>\n<div id="hIs5StN8J-0" class="eleventy-plugin-youtube-embed"><lite-youtube videoid="hIs5StN8J-0" style="background-image: url('https://i.ytimg.com/vi/hIs5StN8J-0/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube></div>`
`<link rel="stylesheet" href="foo">\n<script defer="defer" src="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@0.3.0/src/lite-yt-embed.min.js"></script>\n<div id="hIs5StN8J-0" class="eleventy-plugin-youtube-embed"><lite-youtube videoid="hIs5StN8J-0" style="background-image: url('https://i.ytimg.com/vi/hIs5StN8J-0/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube></div>`
);
});
test(`Build embed lite mode, zero index, js disabled`, t => {
t.is(buildEmbed(videoData, override({lite:{js:{enabled: false}}}), 0),
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.min.css">\n<div id="hIs5StN8J-0" class="eleventy-plugin-youtube-embed"><lite-youtube videoid="hIs5StN8J-0" style="background-image: url('https://i.ytimg.com/vi/hIs5StN8J-0/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube></div>`
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@0.3.0/src/lite-yt-embed.min.css">\n<div id="hIs5StN8J-0" class="eleventy-plugin-youtube-embed"><lite-youtube videoid="hIs5StN8J-0" style="background-image: url('https://i.ytimg.com/vi/hIs5StN8J-0/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube></div>`
);
});
test(`Build embed lite mode, zero index, js inline`, t => {
t.is(buildEmbed(videoData, override({lite:{js:{inline: true}}}), 0),
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@master/src/lite-yt-embed.min.css">\n<script>${inlineJs}</script>\n<div id="hIs5StN8J-0" class="eleventy-plugin-youtube-embed"><lite-youtube videoid="hIs5StN8J-0" style="background-image: url('https://i.ytimg.com/vi/hIs5StN8J-0/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube></div>`
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/paulirish/lite-youtube-embed@0.3.0/src/lite-yt-embed.min.css">\n<script>${inlineJs}</script>\n<div id="hIs5StN8J-0" class="eleventy-plugin-youtube-embed"><lite-youtube videoid="hIs5StN8J-0" style="background-image: url('https://i.ytimg.com/vi/hIs5StN8J-0/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube></div>`
);
});
test(`Build embed lite mode, zero index, css AND js disabled`, t => {
Expand All @@ -149,6 +149,12 @@ test(`Build embed lite mode, zero index, css AND js inline`, t => {
`<style>${inlineCss}</style>\n<script>${inlineJs}</script>\n<div id="hIs5StN8J-0" class="eleventy-plugin-youtube-embed"><lite-youtube videoid="hIs5StN8J-0" style="background-image: url('https://i.ytimg.com/vi/hIs5StN8J-0/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube></div>`
);
});
test(`Build embed lite mode, zero index, responsive true`, t => {
t.is(buildEmbed(videoData, override({lite: { responsive: true }}), 0),
`<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/paulirish/[email protected]/src/lite-yt-embed.min.css">\n<script defer="defer" src="https://cdn.jsdelivr.net/gh/paulirish/[email protected]/src/lite-yt-embed.min.js"></script>\n<style>.eleventy-plugin-youtube-embed lite-youtube {max-width:100%}</style>\n<div id="hIs5StN8J-0" class="eleventy-plugin-youtube-embed"><lite-youtube videoid="hIs5StN8J-0" style="background-image: url('https://i.ytimg.com/vi/hIs5StN8J-0/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube></div>`
);
});


/**
* Lite mode, 1+ index (no style or script on subsequent outputs)
Expand Down Expand Up @@ -188,6 +194,11 @@ test(`Build embed lite mode, 1+ index, js inline`, t => {
`<div id="hIs5StN8J-0" class="eleventy-plugin-youtube-embed"><lite-youtube videoid="hIs5StN8J-0" style="background-image: url('https://i.ytimg.com/vi/hIs5StN8J-0/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube></div>`
);
});
test(`Build embed lite mode, 1+ index, responsive true`, t => {
t.is(buildEmbed(videoData, override({lite: { responive: true }}), 1),
`<div id="hIs5StN8J-0" class="eleventy-plugin-youtube-embed"><lite-youtube videoid="hIs5StN8J-0" style="background-image: url('https://i.ytimg.com/vi/hIs5StN8J-0/hqdefault.jpg');"><div class="lty-playbtn"></div></lite-youtube></div>`
);
});

/**
* In lite mode, test that the thumbnail size validator returns the expected values.
Expand Down
18 changes: 13 additions & 5 deletions pnpm-lock.yaml
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 7f1fac3

Please sign in to comment.