Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@mux/blurup

Package Overview
Dependencies
Maintainers
28
Versions
6
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@mux/blurup - npm Package Compare versions

Comparing version 0.0.0 to 0.1.0

33

blurup.js

@@ -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};
```
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc