relottie-metadata

A relottie plugin to extract Lottie metadata from the document and store them in vfile.data.

Use

yarn add @lottiefiles/relottie-metadata

import relottieParse, { type ParseFileData } from '@lottiefiles/relottie-parse';
import relottieStringify, { type StringifyFileData } from '@lottiefiles/relottie-stringify';
import relottieMetadata, { type MetadataFileData } from '@lottiefiles/relottie-metadata';
import { unified } from 'unified';

type FileData = ParseFileData & StringifyFileData & MetadataFileData

// The Lottie source: __fixtures__/features/auto-orient.json
const lottieJson = '...';

const vfile = unified()
  .use(relottieParse)
  .use(relottieMetadata)
  .use(relottieStringify)
  .processSync(lottieJson);

const data = vfile.data as FileData
const output = data['metadata']

output:

{
  "colors": Set {
    "#3250b0",
  },
  "fileSize": {
    "bytes": 2653,
    "formated": {
      "exponent": 1,
      "symbol": "KiB",
      "unit": "KiB",
      "value": "2.59",
    },
  },
  "framerate": 60,
  "frames": 180,
  "generator": "Glaxnimate 0.4.6-26-g7b05e75c",
  "height": 512,
  "inPoint": 0,
  "outPoint": 180,
  "version": "5.5.7",
  "width": 512,
}
...

FileData

export interface MetadataFileData extends Data {
  metadata: {
    /**
     * Set of hex colors used in the animation.
     */
    colors: Set<string>;
    /** *
     * Size of the Lottie JSON
     */
    fileSize?: FileSizeValue;
    /**
     * Framerate in frames per second
     */
    framerate: number;
    /**
     * Total number of frames in the animation.
     */
    frames: number;
    /**
     * Generator of the animation.
     */
    generator: string;
    /**
     * Height of the animation.
     */
    height: number;
    /**
     * Which frame the animation starts at (usually 0)
     */
    inPoint: number;
    /**
     * Which frame the animation stops/loops at, which makes this the duration in frames
     */
    outPoint: number;
    /**
     * Version of the Lottie JSON.
     */
    version: string;
    /**
     * Width of the animation.
     */
    width: number;  
  };
}

Start

1. pnpm install
2. pnpm ts-node playground.ts for testing playground environment (if you are in the root folder you have to enter the package directory cd packages/relottie-metadata)
3. for testing pnpm test

Legal

MIT © LottieFiles