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

@lottiefiles/lottie-player

Package Overview
Dependencies
Maintainers
4
Versions
62
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@lottiefiles/lottie-player - npm Package Compare versions

Comparing version 1.7.1 to 2.0.0

dist/lottie-player.mjs

135

dist/lottie-player.d.ts

@@ -1,4 +0,10 @@

import { LitElement } from "lit";
import { TemplateResult } from "lit/html.js";
export declare enum PlayerState {
import { LitElement, CSSResult } from 'lit';
import { TemplateResult } from 'lit/html.js';
import { AnimationItem } from 'lottie-web';
/**
* Copyright 2023 Design Barn Inc.
*/
declare enum PlayerState {
Destroyed = "destroyed",

@@ -8,2 +14,3 @@ Error = "error",

Loading = "loading",
Ready = "ready",
Paused = "paused",

@@ -13,7 +20,7 @@ Playing = "playing",

}
export declare enum PlayMode {
declare enum PlayMode {
Bounce = "bounce",
Normal = "normal"
}
export declare enum PlayerEvents {
declare enum PlayerEvents {
Complete = "complete",

@@ -32,18 +39,29 @@ Destroyed = "destroyed",

}
export interface Versions {
interface Versions {
lottiePlayerVersion: string;
lottieWebVersion: string;
}
interface InternalPlayerState {
background: string;
currentState: PlayerState;
frame: number;
seeker: number;
autoplay: boolean;
direction: number;
hover: boolean;
intermission: number;
loop: boolean;
count?: number;
playMode: PlayMode;
speed: number;
}
/**
* Parse a resource into a JSON object or a URL string
*/
export declare function parseSrc(src: string | object): string | object;
declare function parseSrc(src: string | AnimationItem): string | AnimationItem;
/**
* LottiePlayer web component class
*
* @export
* @class LottiePlayer
* @extends {LitElement}
*/
export declare class LottiePlayer extends LitElement {
declare class LottiePlayer extends LitElement {
/**

@@ -108,11 +126,7 @@ * Autoplay animation on load.

*/
renderer: "svg";
renderer: 'svg' | 'canvas';
/**
* Viewbox size for renderer settings
*/
viewBoxSize?: string;
/**
* seeker
*/
seeker: any;
seeker: number;
/**

@@ -127,2 +141,6 @@ * Animation speed.

/**
* Viewbox size for renderer settings
*/
viewBoxSize?: string;
/**
* Enable web workers

@@ -135,11 +153,14 @@ */

protected container: HTMLElement;
private _counter;
private _io;
private _lottie?;
private _prevState?;
private _counter;
/**
* Configure and initialize lottie-web player instance.
* Destroy animation and lottie-player element.
*/
load(src: string | object): Promise<void>;
destroy(): void;
/**
* Cleanup on component destroy.
*/
disconnectedCallback(): void;
/**
* Returns the lottie-web instance used in the component.

@@ -153,5 +174,5 @@ */

/**
* Start playing animation.
* Configure and initialize lottie-web player instance.
*/
play(): void;
load(src: string | AnimationItem): Promise<void>;
/**

@@ -162,9 +183,11 @@ * Pause animation play.

/**
* Stops animation play.
* Start playing animation.
*/
stop(): void;
play(): void;
getState(): InternalPlayerState;
render(): TemplateResult | void;
/**
* Destroy animation and lottie-player element.
* Resize animation.
*/
destroy(): void;
resize(): void;
/**

@@ -175,29 +198,29 @@ * Seek to a given frame.

/**
* Snapshot the current frame as SVG.
* Animation play direction.
*
* If 'download' argument is boolean true, then a download is triggered in browser.
* @param value - Direction values.
*/
snapshot(download?: boolean): string | void;
setDirection(value: 1 | -1): void;
/**
* Sets animation play speed.
* Sets the looping of the animation.
*
* @param value Playback speed.
* @param value - Whether to enable looping. Boolean true enables looping.
*/
setSpeed(value?: number): void;
setLooping(value: boolean): void;
/**
* Animation play direction.
* Sets animation play speed.
*
* @param value Direction values.
* @param value - Playback speed.
*/
setDirection(value: number): void;
setSpeed(value?: number): void;
/**
* Sets the looping of the animation.
* Snapshot the current frame as SVG.
*
* @param value Whether to enable looping. Boolean true enables looping.
* If 'download' argument is boolean true, then a download is triggered in browser.
*/
setLooping(value: boolean): void;
snapshot(download?: boolean): string;
/**
* Toggle playing state.
* Stops animation play.
*/
togglePlay(): void;
stop(): void;
/**

@@ -208,14 +231,9 @@ * Toggles animation looping.

/**
* Resize animation.
* Toggle playing state.
*/
resize(): void;
togglePlay(): void;
/**
* Returns the styles for the component.
*/
static get styles(): import("lit").CSSResult;
/**
* Cleanup on component destroy.
*/
disconnectedCallback(): void;
render(): TemplateResult | void;
static get styles(): CSSResult;
protected createRenderRoot(): Element | ShadowRoot;

@@ -225,8 +243,11 @@ /**

*/
protected firstUpdated(): void;
protected firstUpdated(): Promise<void>;
protected renderControls(): TemplateResult;
private _attachEventListeners;
/**
* Handle visibility change events.
* Freeze animation play.
* This internal state pauses animation and is used to differentiate between
* user requested pauses and component instigated pauses.
*/
private _onVisibilityChange;
private _freeze;
/**

@@ -236,10 +257,8 @@ * Handles click and drag actions on the progress track.

private _handleSeekChange;
private _attachEventListeners;
/**
* Freeze animation play.
* This internal state pauses animation and is used to differentiate between
* user requested pauses and component instigated pauses.
* Handle visibility change events.
*/
private freeze;
private _onVisibilityChange;
}
//# sourceMappingURL=lottie-player.d.ts.map
export { InternalPlayerState, LottiePlayer, PlayMode, PlayerEvents, PlayerState, Versions, parseSrc };

@@ -0,6 +1,239 @@

import { LitElement, CSSResult } from 'lit';
import { TemplateResult } from 'lit/html.js';
import { AnimationItem } from 'lottie-web';
/**
* Copyright 2022 Design Barn Inc.
* Copyright 2023 Design Barn Inc.
*/
import { LottiePlayer } from "./lottie-player";
declare enum PlayerState {
Destroyed = "destroyed",
Error = "error",
Frozen = "frozen",
Loading = "loading",
Ready = "ready",
Paused = "paused",
Playing = "playing",
Stopped = "stopped"
}
declare enum PlayMode {
Bounce = "bounce",
Normal = "normal"
}
interface Versions {
lottiePlayerVersion: string;
lottieWebVersion: string;
}
interface InternalPlayerState {
background: string;
currentState: PlayerState;
frame: number;
seeker: number;
autoplay: boolean;
direction: number;
hover: boolean;
intermission: number;
loop: boolean;
count?: number;
playMode: PlayMode;
speed: number;
}
/**
* LottiePlayer web component class
*
*/
declare class LottiePlayer extends LitElement {
/**
* Autoplay animation on load.
*/
autoplay: boolean;
/**
* Background color.
*/
background?: string;
/**
* Show controls.
*/
controls: boolean;
/**
* Number of times to loop animation.
*/
count?: number;
/**
* Player state.
*/
currentState: PlayerState;
/**
* Animation description for screen readers.
*/
description: string;
/**
* Direction of animation.
*/
direction: number;
/**
* Disable checking if the Lottie is valid before loading
*/
disableCheck?: boolean;
/**
* Disable using shadow dom as the root
*/
disableShadowDOM: boolean;
/**
* Whether to play on mouse hover
*/
hover: boolean;
/**
* Intermission
*/
intermission: number;
/**
* Whether to loop animation.
*/
loop: boolean;
/**
* Play mode.
*/
mode: PlayMode;
/**
* Aspect ratio to pass to lottie-web.
*/
preserveAspectRatio: string;
/**
* Renderer to use.
*/
renderer: 'svg' | 'canvas';
/**
* seeker
*/
seeker: number;
/**
* Animation speed.
*/
speed: number;
/**
* Bodymovin JSON data or URL to JSON.
*/
src?: string;
/**
* Viewbox size for renderer settings
*/
viewBoxSize?: string;
/**
* Enable web workers
*/
webworkers?: boolean;
/**
* Animation container.
*/
protected container: HTMLElement;
private _counter;
private _io;
private _lottie?;
/**
* Destroy animation and lottie-player element.
*/
destroy(): void;
/**
* Cleanup on component destroy.
*/
disconnectedCallback(): void;
/**
* Returns the lottie-web instance used in the component.
*/
getLottie(): any;
/**
* Returns the lottie-web version and this player's version
*/
getVersions(): Versions;
/**
* Configure and initialize lottie-web player instance.
*/
load(src: string | AnimationItem): Promise<void>;
/**
* Pause animation play.
*/
pause(): void;
/**
* Start playing animation.
*/
play(): void;
getState(): InternalPlayerState;
render(): TemplateResult | void;
/**
* Resize animation.
*/
resize(): void;
/**
* Seek to a given frame.
*/
seek(value: number | string): void;
/**
* Animation play direction.
*
* @param value - Direction values.
*/
setDirection(value: 1 | -1): void;
/**
* Sets the looping of the animation.
*
* @param value - Whether to enable looping. Boolean true enables looping.
*/
setLooping(value: boolean): void;
/**
* Sets animation play speed.
*
* @param value - Playback speed.
*/
setSpeed(value?: number): void;
/**
* Snapshot the current frame as SVG.
*
* If 'download' argument is boolean true, then a download is triggered in browser.
*/
snapshot(download?: boolean): string;
/**
* Stops animation play.
*/
stop(): void;
/**
* Toggles animation looping.
*/
toggleLooping(): void;
/**
* Toggle playing state.
*/
togglePlay(): void;
/**
* Returns the styles for the component.
*/
static get styles(): CSSResult;
protected createRenderRoot(): Element | ShadowRoot;
/**
* Initialize everything on component first render.
*/
protected firstUpdated(): Promise<void>;
protected renderControls(): TemplateResult;
private _attachEventListeners;
/**
* Freeze animation play.
* This internal state pauses animation and is used to differentiate between
* user requested pauses and component instigated pauses.
*/
private _freeze;
/**
* Handles click and drag actions on the progress track.
*/
private _handleSeekChange;
/**
* Handle visibility change events.
*/
private _onVisibilityChange;
}
/**
* Copyright 2023 Design Barn Inc.
*/
/**
* TGSPlayer web component class

@@ -12,3 +245,3 @@ *

*/
export declare class TGSPlayer extends LottiePlayer {
declare class TGSPlayer extends LottiePlayer {
/**

@@ -21,7 +254,7 @@ * Strict format checks for TGS.

*/
load(src: string | object): Promise<void>;
load(src: string | AnimationItem): Promise<void>;
/**
* Returns the styles for the component.
*/
static get styles(): import("lit").CSSResult;
static get styles(): CSSResult;
protected formatCheck(data: any): string[];

@@ -31,2 +264,3 @@ private checkLayer;

}
//# sourceMappingURL=tgs-player.d.ts.map
export { TGSPlayer };
{
"name": "@lottiefiles/lottie-player",
"version": "1.7.1",
"version": "2.0.0",
"description": "Lottie animation and Telegram Sticker player web components.",
"main": "dist/lottie-player.js",
"module": "dist/lottie-player.esm.js",
"types": "dist/lottie-player.d.ts",
"repository": "https://github.com/LottieFiles/lottie-player.git",
"homepage": "https://lottiefiles.com/web-player",
"repository": "https://github.com/LottieFiles/lottie-player.git",
"bugs": "https://github.com/LottieFiles/lottie-player/issues",
"author": "Jawish Hameed <jawish@lottiefiles.com>",
"license": "MIT",
"scripts": {
"prestart": "node -p \"'export const LOTTIE_PLAYER_VERSION = ' + JSON.stringify(require('./package.json').version) + '; \\n' + 'export const LOTTIE_WEB_VERSION = ' + JSON.stringify(require('./package.json').dependencies['lottie-web']) + ';'\" > src/versions.ts",
"start": "npm run cleanup && rollup -c --watch",
"prebuild": "node -p \"'export const LOTTIE_PLAYER_VERSION = ' + JSON.stringify(require('./package.json').version) + '; \\n' + 'export const LOTTIE_WEB_VERSION = ' + JSON.stringify(require('./package.json').dependencies['lottie-web']) + ';'\" > src/versions.ts",
"build": "npm run cleanup && npm run build-lottie && npm run build-tgs",
"build-with-coverage": "npm run cleanup && CODE_COVERAGE=true npm run build-lottie && CODE_COVERAGE=true npm run build-tgs",
"build-lottie": "rollup -c ",
"build-tgs": "rollup -c rollup-tgs.config.js",
"watch-lottie": "npm run cleanup && rollup -c --watch",
"watch-tgs": "npm run cleanup && rollup -c rollup-tgs.config.js --watch",
"cleanup": "shx rm -rf dist && shx mkdir dist",
"release": "semantic-release",
"lint": "eslint . --ext .ts,.tsx,.js",
"lint:fix": "eslint . --ext .ts,.tsx,.js --fix",
"serve": "node ./cypress/pages/server.js -p 8000 &",
"start-cypress": "yarn run cypress run && npx nyc report --reporter=text-summary",
"run-tests": "yarn run build-with-coverage && yarn run serve && yarn run start-cypress",
"postrun-tests": "kill $(lsof -t -i:8000)"
},
"dependencies": {
"@types/pako": "^1.0.1",
"lit": "^2.1.2",
"lottie-web": "^5.10.0",
"pako": "^2.0.4",
"resize-observer-polyfill": "^1.5.1"
},
"devDependencies": {
"@babel/core": "^7.11.0",
"@babel/plugin-proposal-class-properties": "^7.10.4",
"@babel/plugin-proposal-decorators": "^7.10.5",
"@babel/preset-env": "^7.11.0",
"@babel/preset-typescript": "^7.10.4",
"@commitlint/cli": "^16.1.0",
"@commitlint/config-conventional": "^16.0.0",
"@cypress/code-coverage": "^3.9.12",
"@istanbuljs/nyc-config-typescript": "^1.0.2",
"@lottiefiles/eslint-plugin": "^2.2.0",
"@rollup/plugin-babel": "^5.1.0",
"@rollup/plugin-commonjs": "^21.0.1",
"@rollup/plugin-node-resolve": "^13.1.3",
"@semantic-release/changelog": "^6.0.1",
"@semantic-release/commit-analyzer": "^9.0.2",
"@semantic-release/git": "^10.0.1",
"@semantic-release/github": "^8.0.2",
"@semantic-release/npm": "^9.0.0",
"@semantic-release/release-notes-generator": "^10.0.3",
"babel-eslint": "^10.1.0",
"babel-plugin-istanbul": "^6.1.1",
"cypress": "^9.2.1",
"cypress-real-events": "^1.6.0",
"eslint": "^7.27.0",
"eslint-plugin-only-warn": "^1.0.2",
"fastify": "^3.25.3",
"fastify-static": "^4.5.0",
"husky": ">=4",
"lerna": "^4.0.0",
"lint-staged": "^12.3.2",
"parcel-bundler": "^1.12.4",
"prettier": "^2.3.0",
"rollup": "^2.23.0",
"rollup-plugin-copy": "^3.3.0",
"rollup-plugin-filesize": "^9.0.2",
"rollup-plugin-serve": "^1.0.3",
"rollup-plugin-terser": "^7.0.2",
"rollup-plugin-typescript2": "^0.31.1",
"rollup-plugin-uglify": "^6.0.4",
"rollup-plugin-visualizer": "^5.5.4",
"semantic-release": "^19.0.2",
"shx": "^0.3.4",
"source-map-support": "^0.5.21",
"ts-node": "^10.4.0",
"typescript": "^4.5.5",
"unicode-canonical-property-names-ecmascript": "^2.0.0"
},
"main": "dist/lottie-player.js",
"module": "dist/lottie-player.mjs",
"types": "dist/lottie-player.d.ts",
"files": [

@@ -101,8 +27,36 @@ "dist/"

],
"dependencies": {
"@changesets/cli": "^2.26.1",
"@types/pako": "^1.0.4",
"lit": "^2.4.1",
"lottie-web": "^5.12.0",
"pako": "^2.1.0",
"resize-observer-polyfill": "^1.5.1"
},
"devDependencies": {
"@commitlint/cli": "^16.3.0",
"@commitlint/config-conventional": "^16.2.4",
"@lottiefiles/eslint-plugin": "^3.0.0",
"@lottiefiles/prettier-config": "^3.0.0",
"cypress": "^12.13.0",
"cypress-ct-lit": "^0.3.2",
"cypress-real-events": "^1.7.4",
"eslint": "^7.32.0",
"eslint-plugin-only-warn": "^1.0.3",
"husky": "^8.0.2",
"lint-staged": "^12.5.0",
"prettier": "^2.8.0",
"ts-node": "^10.9.1",
"tsup": "^6.7.0",
"turbo": "^1.10.2",
"typescript": "^4.9.3",
"unicode-canonical-property-names-ecmascript": "^2.0.0",
"vite": "^4.3.9"
},
"publishConfig": {
"access": "public"
},
"browserslist": [
"> 3%"
],
"publishConfig": {
"access": "public"
},
"husky": {

@@ -125,3 +79,22 @@ "hooks": {

"all": true
},
"scripts": {
"build": "tsup",
"changelog": "changeset add",
"changelog:check": "changeset status --since=main",
"dev": "tsup --watch",
"format": "pnpm run format:prettier",
"format:prettier": "prettier --loglevel=warn --no-editorconfig --write .",
"format:remark": "remark . --output --ignore-path .remarkignore --silently-ignore",
"lint": "eslint . --ext .ts,.tsx,.js",
"lint:fix": "eslint . --ext .ts,.tsx,.js --fix",
"open": "cypress open",
"preinstall": "npx only-allow pnpm",
"release": "pnpm release:version && pnpm release:publish",
"release:publish": "pnpm build && changeset publish",
"release:tag": "changeset tag",
"release:version": "changeset version",
"test": "cypress run --component",
"type-check": "turbo run type-check"
}
}
}

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is too big to display

Sorry, the diff of this file is not supported yet

Sorry, the diff of this file is not supported yet

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