From df81d9107492287829ce1346cc49e591188e7d78 Mon Sep 17 00:00:00 2001 From: Abdelrahman Ashraf Date: Fri, 25 Oct 2024 13:36:01 +0700 Subject: [PATCH] chore: convert to dotLottie v1/v2 --- .github/workflows/main.yml | 2 +- packages/dotlottie-js/src/index.browser.ts | 57 ++++++++++++++++++-- packages/dotlottie-js/src/index.node.ts | 63 +++++++++++++++++++--- packages/dotlottie-js/src/utils.ts | 19 +++++++ 4 files changed, 127 insertions(+), 14 deletions(-) create mode 100644 packages/dotlottie-js/src/utils.ts diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index 40ede2f..b79b37b 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -68,7 +68,7 @@ jobs: - name: ⎔ Setup pnpm@9 uses: pnpm/action-setup@v2 with: - version: 8 + version: 9 - name: ⎔ Setup Node@18 uses: actions/setup-node@v3 diff --git a/packages/dotlottie-js/src/index.browser.ts b/packages/dotlottie-js/src/index.browser.ts index 00f573f..c9965be 100644 --- a/packages/dotlottie-js/src/index.browser.ts +++ b/packages/dotlottie-js/src/index.browser.ts @@ -2,6 +2,7 @@ * Copyright 2024 Design Barn Inc. */ +import { getDotLottieVersion } from './utils'; import { DotLottieV1 } from './v1/browser'; import type { DotLottieV1Options } from './v1/common'; import { DotLottie } from './v2/browser'; @@ -18,12 +19,58 @@ export function makeDotLottie( return new DotLottie(options as DotLottieOptions) as T extends 'v1' ? DotLottieV1 : DotLottie; } -// export function fromArrayBuffer(arrayBuffer: ArrayBuffer): DotLottieV1 | DotLottie { -// // check the manifest to determine the version -// } +export async function fromArrayBuffer(arrayBuffer: ArrayBuffer): Promise { + const version = getDotLottieVersion(new Uint8Array(arrayBuffer)); -// export function toDotLottieV2(dotLottie: DotLottieV1): DotLottie {} + if (version === '2.0.0') { + return new DotLottie().fromArrayBuffer(arrayBuffer); + } + + return new DotLottieV1().fromArrayBuffer(arrayBuffer); +} + +export async function toDotLottieV2(dotLottie: DotLottieV1): Promise { + const dotLottieV2 = new DotLottie(); + + const animationIds = dotLottie.animations.map((animation) => animation.id); -// export function toDotLottieV1(dotLottie: DotLottie): DotLottieV1 {} + for (const animationId of animationIds) { + const animation = await dotLottieV2.getAnimation(animationId, { inlineAssets: true }); + + if (animation && animation.data) { + dotLottieV2.addAnimation({ + data: animation.data, + id: animationId, + }); + } + } + + await dotLottieV2.build(); + + return dotLottieV2; +} + +export async function toDotLottieV1(dotLottie: DotLottie): Promise { + await dotLottie.build(); + + const dotLottieV1 = new DotLottieV1(); + + const animationIds = dotLottie.animations.map((animation) => animation.id); + + for (const animationId of animationIds) { + const animation = await dotLottie.getAnimation(animationId); + + if (animation && animation.data) { + dotLottieV1.addAnimation({ + data: animation.data, + id: animationId, + }); + } + } + + await dotLottieV1.build(); + + return dotLottieV1; +} export * from './v2/browser'; diff --git a/packages/dotlottie-js/src/index.node.ts b/packages/dotlottie-js/src/index.node.ts index ad8b9b9..c9965be 100644 --- a/packages/dotlottie-js/src/index.node.ts +++ b/packages/dotlottie-js/src/index.node.ts @@ -2,10 +2,11 @@ * Copyright 2024 Design Barn Inc. */ +import { getDotLottieVersion } from './utils'; +import { DotLottieV1 } from './v1/browser'; import type { DotLottieV1Options } from './v1/common'; -import { DotLottieV1 } from './v1/node'; +import { DotLottie } from './v2/browser'; import type { DotLottieOptions } from './v2/common'; -import { DotLottie } from './v2/node'; export function makeDotLottie( version: T, @@ -18,12 +19,58 @@ export function makeDotLottie( return new DotLottie(options as DotLottieOptions) as T extends 'v1' ? DotLottieV1 : DotLottie; } -// export function fromArrayBuffer(arrayBuffer: ArrayBuffer): DotLottieV1 | DotLottie { -// // check the manifest to determine the version -// } +export async function fromArrayBuffer(arrayBuffer: ArrayBuffer): Promise { + const version = getDotLottieVersion(new Uint8Array(arrayBuffer)); -// export function toDotLottieV2(dotLottie: DotLottieV1): DotLottie {} + if (version === '2.0.0') { + return new DotLottie().fromArrayBuffer(arrayBuffer); + } + + return new DotLottieV1().fromArrayBuffer(arrayBuffer); +} + +export async function toDotLottieV2(dotLottie: DotLottieV1): Promise { + const dotLottieV2 = new DotLottie(); + + const animationIds = dotLottie.animations.map((animation) => animation.id); -// export function toDotLottieV1(dotLottie: DotLottie): DotLottieV1 {} + for (const animationId of animationIds) { + const animation = await dotLottieV2.getAnimation(animationId, { inlineAssets: true }); + + if (animation && animation.data) { + dotLottieV2.addAnimation({ + data: animation.data, + id: animationId, + }); + } + } + + await dotLottieV2.build(); + + return dotLottieV2; +} + +export async function toDotLottieV1(dotLottie: DotLottie): Promise { + await dotLottie.build(); + + const dotLottieV1 = new DotLottieV1(); + + const animationIds = dotLottie.animations.map((animation) => animation.id); + + for (const animationId of animationIds) { + const animation = await dotLottie.getAnimation(animationId); + + if (animation && animation.data) { + dotLottieV1.addAnimation({ + data: animation.data, + id: animationId, + }); + } + } + + await dotLottieV1.build(); + + return dotLottieV1; +} -export * from './v2/node'; +export * from './v2/browser'; diff --git a/packages/dotlottie-js/src/utils.ts b/packages/dotlottie-js/src/utils.ts new file mode 100644 index 0000000..dd5c757 --- /dev/null +++ b/packages/dotlottie-js/src/utils.ts @@ -0,0 +1,19 @@ +/** + * Copyright 2024 Design Barn Inc. + */ + +import { unzipSync } from 'fflate'; + +export function getDotLottieVersion(dotLottie: Uint8Array): string { + const files = unzipSync(dotLottie); + + const manifest = files['manifest.json']; + + if (!manifest) { + throw new Error('manifest.json not found'); + } + + const manifestJson = JSON.parse(manifest.toString()); + + return manifestJson.version ?? '1.0.0'; +}