feat(puppeteer-lottie): new definition (#47464)

- definition file
- tests

https://github.com/transitive-bullshit/puppeteer-lottie

Thanks!
This commit is contained in:
Piotr Błażejewicz (Peter Blazejewicz) 2020-09-15 00:03:45 +02:00 committed by GitHub
parent 2310be52dd
commit b2ad972e50
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 250 additions and 0 deletions

166
types/puppeteer-lottie/index.d.ts vendored Normal file
View File

@ -0,0 +1,166 @@
// Type definitions for puppeteer-lottie 1.1
// Project: https://github.com/transitive-bullshit/puppeteer-lottie
// Definitions by: Piotr Błażejewicz <https://github.com/peterblazejewicz>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
import { Browser, LaunchOptions } from 'puppeteer';
import { SVGRendererConfig, CanvasRendererConfig, HTMLRendererConfig } from 'lottie-web';
/**
* Renders the given Lottie animation via Puppeteer.
*
* You must pass either `path` or `animationData` to specify the Lottie animation.
* @async
*/
declare function renderLottie(opts?: renderLottie.Options): Promise<void>;
declare namespace renderLottie {
/**
* Configuration options
*/
interface Options {
/**
* Path or pattern to store result
*/
output: string;
/**
* JSON exported animation data
*/
animationData?: object;
/**
* Relative path to the JSON file containing animation data
*/
path?: string;
/**
* Optional output width
*/
width?: number;
/**
* Optional output height
*/
height?: number;
/**
* JPEG quality for frames (does nothing if using png)
* @default 90
*/
jpegQuality?: number;
/**
* Set to true to disable console output
*/
quiet?: boolean;
/**
* Window device scale factor
* @default 1
*/
deviceScaleFactor?: number;
/**
* Which lottie-web renderer to use
* @default 'svg'
*/
renderer?: 'svg' | 'canvas' | 'html';
/**
* Optional lottie renderer settings
*/
rendererSettings?: SVGRendererConfig | CanvasRendererConfig | HTMLRendererConfig;
/**
* Optional puppeteer launch settings
*/
puppeteerOptions?: LaunchOptions;
/**
* Optional ffmpeg settings for crf, profileVideo and preset values
*/
ffmpegOptions?: FFmpegOptions;
/**
* Optional gifski settings (only for GIF outputs)
*/
gifskiOptions?: object;
/**
* Optional JS
* [CSS styles](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Properties_Reference) to apply to the animation container
*/
style?: object;
/**
* Optionally injects arbitrary string content into the head, style, or body elements.
*/
inject?: Inject;
/**
* Optional puppeteer instance to reuse
*/
browser?: Browser;
}
interface Inject {
/**
* Optionally injected into the document <head>
*/
head?: string;
/**
* Optionally injected into a <style> tag within the document <head>
*/
style?: string;
/**
* Optionally injected into the document <body>
*/
body?: string;
}
interface GifskiOptions {
/**
* Resize to max this width if set
*/
width?: number;
/**
* Resize to max this height if width is set. Note that aspect ratio is not preserved.
*/
height?: number;
/**
* 1-100, but useful range is 50-100. Recommended to set to 100.
*/
quality?: number;
/**
* If true, looping is disabled
*/
once?: boolean;
/**
* Lower quality, but faster encode
*/
fast?: boolean;
}
/**
* Optional ffmpeg settings
*/
interface FFmpegOptions {
crf?: number;
profileVideo?: 'baseline' | 'main' | 'high' | 'high10' | 'high422' | 'high444';
preset?:
| 'ultrafast'
| 'superfast'
| 'veryfast'
| 'faster'
| 'fast'
| 'medium'
| 'slow'
| 'slower'
| 'veryslow'
| 'placebo';
}
}
export = renderLottie;

View File

@ -0,0 +1,6 @@
{
"private": true,
"dependencies": {
"lottie-web": "^5.7.3"
}
}

View File

@ -0,0 +1,53 @@
import renderLottie = require('puppeteer-lottie');
(async () => {
const bodymovin = 'some/bodymovin.json';
const output = 'output/some.png';
await renderLottie({
path: 'fixtures/bodymovin.json',
output: 'example.mp4',
});
await renderLottie({
path: 'fixtures/bodymovin.json',
output: 'example.gif',
width: 640,
});
await renderLottie({
path: 'fixtures/bodymovin.json',
output: 'frame-%d.png',
height: 128,
});
await renderLottie({
path: 'fixtures/bodymovin.json',
output: 'preview.jpg',
});
await renderLottie({
path: bodymovin,
quiet: true,
ffmpegOptions: {
crf: 22,
profileVideo: 'high',
preset: 'fast',
},
output,
});
await renderLottie({
path: bodymovin,
quiet: true,
width: 640,
output,
});
await renderLottie({
path: bodymovin,
quiet: true,
height: 100,
output,
});
})();

View File

@ -0,0 +1,24 @@
{
"compilerOptions": {
"module": "commonjs",
"lib": [
"es6",
"DOM"
],
"noImplicitAny": true,
"noImplicitThis": true,
"strictFunctionTypes": true,
"strictNullChecks": true,
"baseUrl": "../",
"typeRoots": [
"../"
],
"types": [],
"noEmit": true,
"forceConsistentCasingInFileNames": true
},
"files": [
"index.d.ts",
"puppeteer-lottie-tests.ts"
]
}

View File

@ -0,0 +1 @@
{ "extends": "dtslint/dt.json" }