Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

refactor: 💡 dotlottie-rs wasm bindings integration #108

Merged
merged 8 commits into from
Feb 2, 2024
Merged

refactor: 💡 dotlottie-rs wasm bindings integration #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
9e5400e
refactor: 💡 dotlottie-rs wasm bindings integration
theashraf Jan 24, 2024
eccc8df
chore: 🤖 fix failing tests
theashraf Jan 31, 2024
c66a0f5
chore: 🤖 remove unnecessary example
theashraf Jan 31, 2024
30c8746
chore: 🤖 changeset exit pre
theashraf Jan 31, 2024
accab5e
chore: 🤖 add render event
theashraf Jan 31, 2024
7b9dbf0
chore: 🤖 update changelog
theashraf Jan 31, 2024
e229ec6
chore: 🤖 revert latest wasm updates
theashraf Feb 2, 2024
1bf02cc
chore: 🤖 init changesets beta release
theashraf Feb 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/empty-owls-add.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@lottiefiles/dotlottie-web': minor
---

refactor: 💡 dotlottie-rs wasm bindings integration
5 changes: 5 additions & 0 deletions .changeset/little-dingos-happen.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@lottiefiles/dotlottie-web': minor
---

feat: 🎸 emit `render` event when a new frame is rendered
11 changes: 11 additions & 0 deletions .changeset/pre.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"mode": "pre",
"tag": "beta",
"initialVersions": {
"@lottiefiles/dotlottie-react": "0.2.3",
"@lottiefiles/dotlottie-vue": "0.1.4",
"@lottiefiles/dotlottie-wc": "0.0.7",
"@lottiefiles/dotlottie-web": "0.12.3"
},
"changesets": []
}
2 changes: 1 addition & 1 deletion .eslintignore
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,4 +42,4 @@ next-env.d.ts
# Ignore renderer releases
releases/

renderer.js
dotlottie-player.js
1 change: 1 addition & 0 deletions .github/workflows/main.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@ on:
push:
branches:
- 'main'
- 'beta'
pull_request:

jobs:
Expand Down
2 changes: 1 addition & 1 deletion .size-limit.cjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ module.exports = [
},
{
name: '@lottiefiles/dotlottie-web WASM',
path: 'packages/web/dist/wasm/*.wasm',
path: 'packages/web/dist/*.wasm',
modifyWebpackConfig: (config) => {
config.experiments = {
asyncWebAssembly: true,
Expand Down
3 changes: 1 addition & 2 deletions apps/dotlottie-vue-example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
{
"name": "dotlottie-vue-example",
"version": "0.0.0",
"name": "@lottiefiles/dotlottie-vue-example",
"type": "module",
"private": true,
"scripts": {
Expand Down
3 changes: 1 addition & 2 deletions apps/dotlottie-wc-example/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,5 @@
{
"name": "dotlottie-wc-example",
"version": "0.0.0",
"name": "@lottiefiles/dotlottie-wc-example",
"type": "module",
"private": true,
"scripts": {
Expand Down
14 changes: 9 additions & 5 deletions apps/dotlottie-web-example/src/main.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
import type { Mode } from '@lottiefiles/dotlottie-web';
import { DotLottie } from '@lottiefiles/dotlottie-web';

import wasmUrl from '../../../packages/web/dist/wasm/renderer.wasm?url';
import wasmUrl from '../../../packages/web/dist/dotlottie-player.wasm?url';

const app = document.getElementById('app') as HTMLDivElement;

Expand Down Expand Up @@ -63,7 +63,7 @@
<label for="mode">Mode: </label>
<select id="mode">
<option value="bounce">Bounce</option>
<option value="bounce-reverse">Bounce Reverse</option>
<option value="reverse-bounce">Bounce Reverse</option>
<option value="reverse">Reverse</option>
<option value="forward">Forward</option>
</select>
Expand Down Expand Up @@ -103,9 +103,11 @@
loop: true,
autoplay: true,
backgroundColor,
useFrameInterpolation: false,
// useFrameInterpolation: false,
});

dotLottie.addEventListener('loadError', console.error);

Check warning on line 109 in apps/dotlottie-web-example/src/main.ts

View workflow job for this annotation

GitHub Actions / validate 

Unexpected console statement

window.addEventListener('resize', () => {
dotLottie.resize();
});
Expand All @@ -127,9 +129,11 @@
segments: [10, 90],
speed: 1,
backgroundColor: '#800080ff',
useFrameInterpolation: false,
// useFrameInterpolation: false,
});

dotLottie.addEventListener('loadError', console.error);

Check warning on line 135 in apps/dotlottie-web-example/src/main.ts

View workflow job for this annotation

GitHub Actions / validate 

Unexpected console statement

const playPauseButton = document.getElementById('playPause') as HTMLButtonElement;
const stopButton = document.getElementById('stop') as HTMLButtonElement;
const currentFrameSpan = document.getElementById('current-frame') as HTMLSpanElement;
Expand Down Expand Up @@ -196,7 +200,7 @@
src: 'https://lottie.host/f315768c-a29b-41fd-b5a8-a1c1dfb36cd2/CRiiNg8fqQ.lottie',
loop: true,
autoplay: true,
mode: 'bounce-reverse',
mode: 'reverse-bounce',
renderConfig: {
devicePixelRatio: 0.2,
},
Expand Down Expand Up @@ -243,15 +247,15 @@
dotLottie.addEventListener('load', (event) => {
bgColorInput.value = dotLottie.backgroundColor || '#ffffff';

console.log(event);

Check warning on line 250 in apps/dotlottie-web-example/src/main.ts

View workflow job for this annotation

GitHub Actions / validate 

Unexpected console statement
});

dotLottie.addEventListener('loadError', (event) => {
console.log(event);

Check warning on line 254 in apps/dotlottie-web-example/src/main.ts

View workflow job for this annotation

GitHub Actions / validate 

Unexpected console statement
});

dotLottie.addEventListener('play', (event) => {
console.log(event);

Check warning on line 258 in apps/dotlottie-web-example/src/main.ts

View workflow job for this annotation

GitHub Actions / validate 

Unexpected console statement
frameSlider.max = dotLottie.totalFrames.toString();
playPauseButton.innerText = 'Pause';

Expand All @@ -259,7 +263,7 @@
});

dotLottie.addEventListener('pause', (event) => {
console.log(event);

Check warning on line 266 in apps/dotlottie-web-example/src/main.ts

View workflow job for this annotation

GitHub Actions / validate 

Unexpected console statement
playPauseButton.innerText = 'Play';

playbackStateSpan.textContent = `⏸ Paused`;
Expand All @@ -273,12 +277,12 @@
});

dotLottie.addEventListener('loop', (event) => {
console.log(event);

Check warning on line 280 in apps/dotlottie-web-example/src/main.ts

View workflow job for this annotation

GitHub Actions / validate 

Unexpected console statement
});

// Handle complete events
dotLottie.addEventListener('complete', (event) => {
console.log(event);

Check warning on line 285 in apps/dotlottie-web-example/src/main.ts

View workflow job for this annotation

GitHub Actions / validate 

Unexpected console statement

playPauseButton.innerText = 'Play';

Expand All @@ -286,7 +290,7 @@
});

dotLottie.addEventListener('stop', (event) => {
console.log(event);

Check warning on line 293 in apps/dotlottie-web-example/src/main.ts

View workflow job for this annotation

GitHub Actions / validate 

Unexpected console statement

playPauseButton.innerText = 'Play';

Expand All @@ -294,7 +298,7 @@
});

dotLottie.addEventListener('destroy', (event) => {
console.log(event);

Check warning on line 301 in apps/dotlottie-web-example/src/main.ts

View workflow job for this annotation

GitHub Actions / validate 

Unexpected console statement
});

dotLottie.addEventListener('freeze', (event) => {
Expand Down
4 changes: 2 additions & 2 deletions apps/dotlottie-web-node-example/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ import GIFEncoder from 'gif-encoder';
import minimist from 'minimist';

const wasmBase64 = fs
.readFileSync('./node_modules/@lottiefiles/dotlottie-web/dist/wasm/renderer.wasm')
.readFileSync('./node_modules/@lottiefiles/dotlottie-web/dist/dotlottie-player.wasm')
.toString('base64');
const wasmDataUri = `data:application/octet-stream;base64,${wasmBase64}`;

Expand Down Expand Up @@ -120,7 +120,7 @@ dotLottie.addEventListener('load', () => {
dotLottie.addEventListener('frame', (event) => {
const frame = ctx.getImageData(0, 0, args.width, args.height).data;

if (event.currentFrame >= dotLottie.totalFrames - 1) {
if (event.currentFrame >= dotLottie.totalFrames) {
console.log('Finished recording GIF');
gif.finish();
} else {
Expand Down
2 changes: 1 addition & 1 deletion packages/react/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,7 +78,7 @@ The `DotLottieReactProps` extends the `HTMLCanvasElement` Props and accepts all
| `src` | string | | undefined | URL to the animation data (`.json` or `.lottie`). | |
| `speed` | number | | 1 | Animation playback speed. 1 is regular speed. | |
| `data` | string \| ArrayBuffer | | undefined | Animation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations. | |
| `mode` | string | | "forward" | Animation play mode. Accepts "forward", "reverse", "bounce", "bounce-reverse". | |
| `mode` | string | | "forward" | Animation play mode. Accepts "forward", "reverse", "bounce", "reverse-bounce". | |
| `backgroundColor` | string | | undefined | Background color of the canvas. Accepts 6-digit or 8-digit hex color string (e.g., "#000000", "#000000FF"), | |
| `segments` | \[number, number] | | \[0, totalFrames - 1] | Animation segments. Accepts an array of two numbers, where the first number is the start frame and the second number is the end frame. | |
| `renderConfig` | RenderConfig | | `{}` | Configuration for rendering the animation. | |
Expand Down
2 changes: 1 addition & 1 deletion packages/vue/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -69,7 +69,7 @@ import { DotLottieVue } from '@lottiefiles/dotlottie-vue'
| `src` | string | | undefined | URL to the animation data (`.json` or `.lottie`). |
| `speed` | number | | 1 | Animation playback speed. 1 is regular speed. |
| `data` | string \| ArrayBuffer | | undefined | Animation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations. |
| `mode` | string | | "forward" | Animation play mode. Accepts "forward", "reverse", "bounce", "bounce-reverse". |
| `mode` | string | | "forward" | Animation play mode. Accepts "forward", "reverse", "bounce", "reverse-bounce". |
| `backgroundColor` | string | | undefined | Background color of the canvas. Accepts 6-digit or 8-digit hex color string (e.g., "#000000", "#000000FF"), |
| `segments` | \[number, number] | | \[0, totalFrames - 1] | Animation segments. Accepts an array of two numbers, where the first number is the start frame and the second number is the end frame. |
| `renderConfig` | RenderConfig | | `{}` | Configuration for rendering the animation. |
Expand Down
1 change: 0 additions & 1 deletion packages/web/.dockerignore
View file
Open in desktop

This file was deleted.

11 changes: 0 additions & 11 deletions packages/web/Dockerfile
View file
Open in desktop

This file was deleted.

29 changes: 15 additions & 14 deletions packages/web/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -121,7 +121,7 @@ The `DotLottie` constructor accepts a config object with the following propertie
| `src` | string | | undefined | URL to the animation data (`.json` or `.lottie`). |
| `speed` | number | | 1 | Animation playback speed. 1 is regular speed. |
| `data` | string \| ArrayBuffer | | undefined | Animation data provided either as a Lottie JSON string or as an ArrayBuffer for .lottie animations. |
| `mode` | string | | "forward" | Animation play mode. Accepts "forward", "reverse", "bounce", "bounce-reverse". |
| `mode` | string | | "forward" | Animation play mode. Accepts "forward", "reverse", "bounce", "reverse-bounce". |
| `backgroundColor` | string | | undefined | Background color of the canvas. Accepts 6-digit or 8-digit hex color string (e.g., "#000000", "#000000FF"), |
| `segments` | \[number, number] | | \[0, totalFrames - 1] | Animation segments. Accepts an array of two numbers, where the first number is the start frame and the second number is the end frame. |
| `renderConfig` | [RenderConfig](#renderconfig) | | `{}` | Configuration for rendering the animation. |
Expand Down Expand Up @@ -197,19 +197,20 @@ The `DotLottie` class exposes the following static methods:

The `DotLottie` instance emits the following events that can be listened to via the `addEventListener` method:

| Event | Description | Event Parameter (Type and Fields) |
| ----------- | ----------------------------------------------------------------------- | ---------------------------------------------------- |
| `load` | Emitted when the animation is loaded. | `LoadEvent { type: 'load' }` |
| `loadError` | Emitted when there's an error loading the animation. | `LoadErrorEvent { type: 'loadError', error: Error }` |
| `play` | Emitted when the animation starts playing. | `PlayEvent { type: 'play' }` |
| `pause` | Emitted when the animation is paused. | `PauseEvent { type: 'pause' }` |
| `stop` | Emitted when the animation is stopped. | `StopEvent { type: 'stop' }` |
| `loop` | Emitted when the animation completes a loop. | `LoopEvent { type: 'loop', loopCount: number }` |
| `complete` | Emitted when the animation completes. | `CompleteEvent { type: 'complete' }` |
| `frame` | Emitted when the animation reaches a new frame. | `FrameEvent { type: 'frame', currentFrame: number }` |
| `destroy` | Emitted when the animation is destroyed. | `DestroyEvent { type: 'destroy' }` |
| `freeze` | Emitted when the animation is freezed and the animation loop stops. | `FreezeEvent { type: 'freeze' }` |
| `unfreeze` | Emitted when the animation is unfreezed and the animation loop resumes. | `UnfreezeEvent { type: 'unfreeze' }` |
| Event | Description | Event Parameter (Type and Fields) |
| ----------- | ----------------------------------------------------------------------- | ------------------------------------------------------ |
| `load` | Emitted when the animation is loaded. | `LoadEvent { type: 'load' }` |
| `loadError` | Emitted when there's an error loading the animation. | `LoadErrorEvent { type: 'loadError', error: Error }` |
| `play` | Emitted when the animation starts playing. | `PlayEvent { type: 'play' }` |
| `pause` | Emitted when the animation is paused. | `PauseEvent { type: 'pause' }` |
| `stop` | Emitted when the animation is stopped. | `StopEvent { type: 'stop' }` |
| `loop` | Emitted when the animation completes a loop. | `LoopEvent { type: 'loop', loopCount: number }` |
| `complete` | Emitted when the animation completes. | `CompleteEvent { type: 'complete' }` |
| `frame` | Emitted when the animation reaches a new frame. | `FrameEvent { type: 'frame', currentFrame: number }` |
| `destroy` | Emitted when the animation is destroyed. | `DestroyEvent { type: 'destroy' }` |
| `freeze` | Emitted when the animation is freezed and the animation loop stops. | `FreezeEvent { type: 'freeze' }` |
| `unfreeze` | Emitted when the animation is unfreezed and the animation loop resumes. | `UnfreezeEvent { type: 'unfreeze' }` |
| `render` | Emitted when a new frame is rendered to the canvas. | `RenderEvent { type: 'render', currentFrame: number }` |

## Development

Expand Down
96 changes: 0 additions & 96 deletions packages/web/build_wasm.sh
View file
Open in desktop

This file was deleted.

Loading
Loading