@mux/blurup
Advanced tools
Comparing version 0.0.0 to 0.1.0
@@ -5,3 +5,4 @@ import { imageDimensionsFromData } from 'image-dimensions'; | ||
type: 'webp', | ||
precision: 1, | ||
blur: 20, | ||
quality: 1, | ||
time: undefined, | ||
@@ -14,5 +15,6 @@ thumbnailToken: undefined, | ||
export async function createBlurUp(playbackId, options) { | ||
const { | ||
let { | ||
type, | ||
precision, | ||
blur, | ||
quality, | ||
time, | ||
@@ -35,6 +37,12 @@ thumbnailToken, | ||
imageURL.searchParams.set('width', precision * 16); | ||
imageURL.searchParams.set('height', precision * 16); | ||
quality = parseFloat(quality); | ||
if (typeof time !== 'undefined') { | ||
if (quality >= 1) { | ||
imageURL.searchParams.set('width', 16 * quality); | ||
imageURL.searchParams.set('height', 16 * quality); | ||
} | ||
time = parseFloat(time); | ||
if (time >= 0) { | ||
imageURL.searchParams.set('time', time); | ||
@@ -69,2 +77,7 @@ } | ||
const { width, height } = imageDimensionsFromData(arrayBuffer); | ||
const aspectRatio = width / height; | ||
const blurDataURL = | ||
blur == 0 | ||
? imageDataURL | ||
: `data:image/svg+xml;charset=utf-8,${svgBlurImage(imageDataURL, svgWidth, svgHeight, blur)}`; | ||
@@ -74,12 +87,12 @@ return { | ||
height, | ||
aspectRatio: width / height, | ||
aspectRatio, | ||
imageURL, | ||
imageDataURL, | ||
blurDataURL: `data:image/svg+xml;charset=utf-8,${svgBlurImage(imageDataURL, svgWidth, svgHeight)}`, | ||
blurDataURL, | ||
}; | ||
} | ||
function svgBlurImage(tinyImageDataURL, width, height) { | ||
const svg = /*html*/`<svg xmlns="http://www.w3.org/2000/svg" ${width ? `width="${width}"` : ''} ${height ? `height="${height}"` : ''}><filter id="b" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="20"/><feComponentTransfer><feFuncA type="discrete" tableValues="1 1"/></feComponentTransfer></filter><g filter="url(#b)"><image width="100%" height="100%" href="${tinyImageDataURL}"/></g></svg>`; | ||
function svgBlurImage(tinyImageDataURL, width, height, stdDeviation) { | ||
const svg = /*html*/`<svg xmlns="http://www.w3.org/2000/svg" ${width ? `width="${width}"` : ''} ${height ? `height="${height}"` : ''}><filter id="b" color-interpolation-filters="sRGB"><feGaussianBlur stdDeviation="${stdDeviation}"/><feComponentTransfer><feFuncA type="discrete" tableValues="1 1"/></feComponentTransfer></filter><g filter="url(#b)"><image width="100%" height="100%" href="${tinyImageDataURL}"/></g></svg>`; | ||
return svg.replace(/#/g, '%23'); | ||
} |
{ | ||
"name": "@mux/blurup", | ||
"version": "0.0.0", | ||
"version": "0.1.0", | ||
"type": "module", | ||
@@ -19,7 +19,7 @@ "description": "Generate a blurry image placeholder for a Mux video.", | ||
"scripts": { | ||
"lint": "npx eslint *.js -c ./node_modules/wet-run/.eslintrc.json", | ||
"lint": "npx -y eslint@8 *.js -c ./node_modules/wet-run/.eslintrc.json", | ||
"dev": "wet serve --livereload --cors" | ||
}, | ||
"devDependencies": { | ||
"wet-run": "^1.2.0" | ||
"wet-run": "^1.2.1" | ||
}, | ||
@@ -26,0 +26,0 @@ "dependencies": { |
@@ -5,5 +5,5 @@ # @mux/blurup | ||
The library retrieves a tiny video poster image from the Mux API | ||
The library retrieves a tiny video poster image from the Mux API | ||
and generates a blurry image placeholder by upscaling the image and | ||
applying a Gaussian blur. | ||
applying a Gaussian blur. | ||
@@ -19,3 +19,3 @@ See the blog post for more information: | ||
## Usage | ||
## Usage ([Demo](https://blurup.vercel.app/)) | ||
@@ -25,4 +25,72 @@ ```javascript | ||
const options = {}; | ||
const muxPlaybackId = 'O6LdRc0112FEJXH00bGsN9Q31yu5EIVHTgjTKRkKtEq1k'; | ||
const { blurDataURL } = await createBlurUp(muxPlaybackId, { time: 0 }); | ||
const { blurDataURL, aspectRatio } = await createBlurUp(muxPlaybackId, options); | ||
console.log(blurDataURL, aspectRatio); | ||
// data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" ... | ||
``` | ||
### Options | ||
| Parameter | Type | Description | Default | | ||
| -------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | | ||
| time | `number` | The video timestamp from which to grab the blurhash. (If you're using a `thumbnailToken`, then the `time` option will have no effect; encode `time` in your token according to the secure video playback guide linked below) | `undefined` | | ||
| width | `string` | Width of the output blurry image placeholder. | `100%` | | ||
| height | `string` | Height of the output blurry image placeholder. | `100%` | | ||
| blur | `number` | Standard deviation of the Gaussian blur. | `20` | | ||
| quality | `number` | Quality of the output image. Increase this value to see more details but also increase the length of the data URL. | `1` | | ||
| thumbnailToken | `string` | Videos with playback restrictions may require a thumbnail token. See https://docs.mux.com/guides/video/secure-video-playback for details. | `undefined` | | ||
| type | `webp` `png` `jpg` | Image type to use in the output blurry image placeholder. | `webp` | | ||
### Using `blurDataURL` with Mux Player | ||
Be sure to escape the double quotes in the `blurDataURL` string when using it in an HTML attribute. | ||
#### mux-player element | ||
```html | ||
<mux-player placeholder="{blurDataURL}" style="aspect-ratio: {aspectRatio}"></mux-player> | ||
``` | ||
#### mux-player element with slotted poster ([Demo](https://codesandbox.io/p/sandbox/mux-player-blurup-slotted-poster-wryr46)) | ||
```html | ||
<mux-player style="aspect-ratio: {aspectRatio}"> | ||
<img | ||
slot="poster" | ||
src="{posterURL}" | ||
style=' | ||
width: 100%; | ||
background-size: cover; | ||
background-position: center; | ||
background-repeat: no-repeat; | ||
background-image: url("{blurDataURL}"); | ||
' | ||
> | ||
</mux-player> | ||
``` | ||
#### mux-player-react and mux-player-react/lazy | ||
```jsx | ||
<MuxPlayer placeholder={blurDataURL} style={{ aspectRatio }} /> | ||
``` | ||
### Using `blurDataURL` with native elements | ||
Be sure to escape the double quotes in the `blurDataURL` string when using it in an HTML attribute. | ||
#### HTML | ||
```html | ||
<img src="{blurDataURL}" width="300" style="aspect-ratio: {aspectRatio}" /> | ||
``` | ||
#### CSS | ||
```css | ||
background-image: url('{blurDataURL}'); | ||
aspect-ratio: {aspectRatio}; | ||
``` |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
8575
80
94