From 066b77e7894cb74bc12a64fe72ebaddba82e34e5 Mon Sep 17 00:00:00 2001 From: Abdelrahman Ashraf Date: Tue, 17 Dec 2024 12:57:30 +0700 Subject: [PATCH] fix: events tracking --- dotlottie-ffi/emscripten_bindings.cpp | 3 +- dotlottie-ffi/emscripten_library.js | 36 ++++++------ dotlottie-ffi/src/dotlottie_player_cpp.udl | 2 + dotlottie-rs/src/dotlottie_player.rs | 55 +++++++++++++------ web-example.html | 64 ++++++++++++---------- 5 files changed, 93 insertions(+), 67 deletions(-) diff --git a/dotlottie-ffi/emscripten_bindings.cpp b/dotlottie-ffi/emscripten_bindings.cpp index 392ef9b4..219097ee 100644 --- a/dotlottie-ffi/emscripten_bindings.cpp +++ b/dotlottie-ffi/emscripten_bindings.cpp @@ -125,5 +125,6 @@ EMSCRIPTEN_BINDINGS(DotLottiePlayer) .function("postPointerMoveEvent", &DotLottiePlayer::post_pointer_move_event) .function("postPointerEnterEvent", &DotLottiePlayer::post_pointer_enter_event) .function("postPointerExitEvent", &DotLottiePlayer::post_pointer_exit_event) - .function("postSetNumericContext", &DotLottiePlayer::post_set_numeric_context); + .function("postSetNumericContext", &DotLottiePlayer::post_set_numeric_context) + .function("instanceId", &DotLottiePlayer::instance_id); } diff --git a/dotlottie-ffi/emscripten_library.js b/dotlottie-ffi/emscripten_library.js index 5650d501..552f5040 100644 --- a/dotlottie-ffi/emscripten_library.js +++ b/dotlottie-ffi/emscripten_library.js @@ -3,31 +3,31 @@ mergeInto(LibraryManager.library, { _emscripten_get_now: function () { return Date.now(); }, - observer_on_load() { - _DOTLOTTIE_BRIDGE_JS.observer_on_load(); + observer_on_load(dotlottie_instance_id) { + _DOTLOTTIE_BRIDGE_JS.observer_on_load(dotlottie_instance_id); }, - observer_on_load_error: function () { - _DOTLOTTIE_BRIDGE_JS.observer_on_load_error(); + observer_on_load_error(dotlottie_instance_id) { + _DOTLOTTIE_BRIDGE_JS.observer_on_load_error(dotlottie_instance_id); }, - observer_on_play: function () { - _DOTLOTTIE_BRIDGE_JS.observer_on_play(); + observer_on_play(dotlottie_instance_id) { + _DOTLOTTIE_BRIDGE_JS.observer_on_play(dotlottie_instance_id); }, - observer_on_pause: function () { - _DOTLOTTIE_BRIDGE_JS.observer_on_pause(); + observer_on_pause(dotlottie_instance_id) { + _DOTLOTTIE_BRIDGE_JS.observer_on_pause(dotlottie_instance_id); }, - observer_on_stop: function () { - _DOTLOTTIE_BRIDGE_JS.observer_on_stop(); + observer_on_stop(dotlottie_instance_id) { + _DOTLOTTIE_BRIDGE_JS.observer_on_stop(dotlottie_instance_id); }, - observer_on_frame: function (frame_no) { - _DOTLOTTIE_BRIDGE_JS.observer_on_frame(frame_no); + observer_on_frame(dotlottie_instance_id, frame_no) { + _DOTLOTTIE_BRIDGE_JS.observer_on_frame(dotlottie_instance_id, frame_no); }, - observer_on_render: function (frame_no) { - _DOTLOTTIE_BRIDGE_JS.observer_on_render(frame_no); + observer_on_render(dotlottie_instance_id, frame_no) { + _DOTLOTTIE_BRIDGE_JS.observer_on_render(dotlottie_instance_id, frame_no); }, - observer_on_loop: function (loop_count) { - _DOTLOTTIE_BRIDGE_JS.observer_on_loop(loop_count); + observer_on_loop(dotlottie_instance_id, loop_count) { + _DOTLOTTIE_BRIDGE_JS.observer_on_loop(dotlottie_instance_id, loop_count); }, - observer_on_complete: function () { - _DOTLOTTIE_BRIDGE_JS.observer_on_complete(); + observer_on_complete(dotlottie_instance_id) { + _DOTLOTTIE_BRIDGE_JS.observer_on_complete(dotlottie_instance_id); }, }); diff --git a/dotlottie-ffi/src/dotlottie_player_cpp.udl b/dotlottie-ffi/src/dotlottie_player_cpp.udl index cabc1ab7..288eaff3 100644 --- a/dotlottie-ffi/src/dotlottie_player_cpp.udl +++ b/dotlottie-ffi/src/dotlottie_player_cpp.udl @@ -102,4 +102,6 @@ interface DotLottiePlayer { i32 post_pointer_enter_event(f32 x, f32 y); i32 post_pointer_exit_event(f32 x, f32 y); i32 post_set_numeric_context([ByRef] string key, f32 value); + + u32 instance_id(); }; diff --git a/dotlottie-rs/src/dotlottie_player.rs b/dotlottie-rs/src/dotlottie_player.rs index 51d02bda..aa5850e4 100644 --- a/dotlottie-rs/src/dotlottie_player.rs +++ b/dotlottie-rs/src/dotlottie_player.rs @@ -29,15 +29,15 @@ pub trait Observer: Send + Sync { #[cfg(target_arch = "wasm32")] mod wasm_observer_callbacks_ffi { extern "C" { - pub fn observer_on_load(); - pub fn observer_on_load_error(); - pub fn observer_on_play(); - pub fn observer_on_pause(); - pub fn observer_on_stop(); - pub fn observer_on_frame(frame_no: f32); - pub fn observer_on_render(frame_no: f32); - pub fn observer_on_loop(loop_count: u32); - pub fn observer_on_complete(); + pub fn observer_on_load(dotlottie_instance_id: u32); + pub fn observer_on_load_error(dotlottie_instance_id: u32); + pub fn observer_on_play(dotlottie_instance_id: u32); + pub fn observer_on_pause(dotlottie_instance_id: u32); + pub fn observer_on_stop(dotlottie_instance_id: u32); + pub fn observer_on_frame(dotlottie_instance_id: u32, frame_no: f32); + pub fn observer_on_render(dotlottie_instance_id: u32, frame_no: f32); + pub fn observer_on_loop(dotlottie_instance_id: u32, loop_count: u32); + pub fn observer_on_complete(dotlottie_instance_id: u32); } } @@ -900,15 +900,22 @@ pub struct DotLottiePlayerContainer { runtime: RwLock, observers: RwLock>>, state_machine: Rc>>, + #[cfg(target_arch = "wasm32")] + instance_id: u32, } impl DotLottiePlayerContainer { #[cfg(feature = "thorvg")] pub fn new(config: Config) -> Self { + static NEXT_INSTANCE_ID: std::sync::atomic::AtomicU32 = + std::sync::atomic::AtomicU32::new(1); + DotLottiePlayerContainer { runtime: RwLock::new(DotLottieRuntime::new(config)), observers: RwLock::new(Vec::new()), state_machine: Rc::new(RwLock::new(None)), + #[cfg(target_arch = "wasm32")] + instance_id: NEXT_INSTANCE_ID.fetch_add(1, std::sync::atomic::Ordering::Relaxed), } } @@ -917,6 +924,8 @@ impl DotLottiePlayerContainer { runtime: RwLock::new(DotLottieRuntime::with_renderer(config, renderer)), observers: RwLock::new(Vec::new()), state_machine: Rc::new(RwLock::new(None)), + #[cfg(target_arch = "wasm32")] + instance_id: 0, } } @@ -931,7 +940,7 @@ impl DotLottiePlayerContainer { #[cfg(target_arch = "wasm32")] { unsafe { - wasm_observer_callbacks_ffi::observer_on_load(); + wasm_observer_callbacks_ffi::observer_on_load(self.instance_id); } } } @@ -947,7 +956,7 @@ impl DotLottiePlayerContainer { #[cfg(target_arch = "wasm32")] { unsafe { - wasm_observer_callbacks_ffi::observer_on_load_error(); + wasm_observer_callbacks_ffi::observer_on_load_error(self.instance_id); } } } @@ -963,7 +972,7 @@ impl DotLottiePlayerContainer { #[cfg(target_arch = "wasm32")] { unsafe { - wasm_observer_callbacks_ffi::observer_on_play(); + wasm_observer_callbacks_ffi::observer_on_play(self.instance_id); } } } @@ -979,7 +988,7 @@ impl DotLottiePlayerContainer { #[cfg(target_arch = "wasm32")] { unsafe { - wasm_observer_callbacks_ffi::observer_on_pause(); + wasm_observer_callbacks_ffi::observer_on_pause(self.instance_id); } } } @@ -995,7 +1004,7 @@ impl DotLottiePlayerContainer { #[cfg(target_arch = "wasm32")] { unsafe { - wasm_observer_callbacks_ffi::observer_on_stop(); + wasm_observer_callbacks_ffi::observer_on_stop(self.instance_id); } } } @@ -1011,7 +1020,7 @@ impl DotLottiePlayerContainer { #[cfg(target_arch = "wasm32")] { unsafe { - wasm_observer_callbacks_ffi::observer_on_frame(frame_no); + wasm_observer_callbacks_ffi::observer_on_frame(self.instance_id, frame_no); } } } @@ -1027,7 +1036,7 @@ impl DotLottiePlayerContainer { #[cfg(target_arch = "wasm32")] { unsafe { - wasm_observer_callbacks_ffi::observer_on_render(frame_no); + wasm_observer_callbacks_ffi::observer_on_render(self.instance_id, frame_no); } } } @@ -1043,7 +1052,7 @@ impl DotLottiePlayerContainer { #[cfg(target_arch = "wasm32")] { unsafe { - wasm_observer_callbacks_ffi::observer_on_loop(loop_count); + wasm_observer_callbacks_ffi::observer_on_loop(self.instance_id, loop_count); } } } @@ -1059,7 +1068,7 @@ impl DotLottiePlayerContainer { #[cfg(target_arch = "wasm32")] { unsafe { - wasm_observer_callbacks_ffi::observer_on_complete(); + wasm_observer_callbacks_ffi::observer_on_complete(self.instance_id); } } } @@ -1395,6 +1404,11 @@ impl DotLottiePlayerContainer { Err(_) => None, } } + + #[cfg(target_arch = "wasm32")] + pub fn instance_id(&self) -> u32 { + self.instance_id + } } pub struct DotLottiePlayer { @@ -1944,6 +1958,11 @@ impl DotLottiePlayer { pub fn animation_size(&self) -> Vec { self.player.read().unwrap().animation_size() } + + #[cfg(target_arch = "wasm32")] + pub fn instance_id(&self) -> u32 { + self.player.read().unwrap().instance_id() + } } unsafe impl Send for DotLottiePlayer {} diff --git a/web-example.html b/web-example.html index 1ea19ff6..dd669a98 100644 --- a/web-example.html +++ b/web-example.html @@ -98,36 +98,6 @@

Test

}, }); - globalThis._DOTLOTTIE_BRIDGE_JS = { - observer_on_load: () => { - console.log("Loaded"); - }, - observer_on_load_error: () => { - console.log("Error"); - }, - observer_on_play: () => { - console.log("Play"); - }, - observer_on_pause: () => { - console.log("Pause"); - }, - observer_on_stop: () => { - console.log("Stop"); - }, - observer_on_frame: (frame_no) => { - console.log("Frame", frame_no); - }, - observer_on_render: (frame_no) => { - console.log("Render", frame_no); - }, - observer_on_loop: (loop_count) => { - console.log("Loop", loop_count); - }, - observer_on_complete: () => { - console.log("Complete"); - }, - }; - function createSegment(startFrame, endFrame) { const vector = new Module.VectorFloat(); @@ -159,6 +129,40 @@

Test

marker: "feather", }); + const instances = {}; + + instances[dotLottiePlayer.instanceId()] = dotLottiePlayer; + + globalThis._DOTLOTTIE_BRIDGE_JS = { + observer_on_load: (dotlottie_instance_id) => { + console.log("Loaded", instances[dotlottie_instance_id]); + }, + observer_on_load_error: (dotlottie_instance_id) => { + console.log("Error", instances[dotlottie_instance_id]); + }, + observer_on_play: (dotlottie_instance_id) => { + console.log("Play", instances[dotlottie_instance_id]); + }, + observer_on_pause: (dotlottie_instance_id) => { + console.log("Pause", instances[dotlottie_instance_id]); + }, + observer_on_stop: (dotlottie_instance_id) => { + console.log("Stop", instances[dotlottie_instance_id]); + }, + observer_on_frame: (dotlottie_instance_id, frame_no) => { + console.log("Frame", instances[dotlottie_instance_id], frame_no); + }, + observer_on_render: (dotlottie_instance_id, frame_no) => { + console.log("Render", instances[dotlottie_instance_id], frame_no); + }, + observer_on_loop: (dotlottie_instance_id, loop_count) => { + console.log("Loop", instances[dotlottie_instance_id], loop_count); + }, + observer_on_complete: (dotlottie_instance_id) => { + console.log("Complete", instances[instance_id]); + }, + }; + const data = await fetch( // "https://lottie.host/5c89381e-0d1a-4422-8247-f5b7e4b3c4e2/mqs5juC4PW.lottie" "./examples/demo-player/src/v2/gradient.json"