fix: 🐛 pass animation data to tvg_picture_load_data as a valid C stri…

…ng (#78)

* fix: 🐛 fail to load animation data as &[u8]

* chore: 🤖 update demo player

demo-player/src/main.rs

@@ -128,17 +128,17 @@ fn main() {
     });
 
     // read dotlottie in to vec<u8>
-    let mut f = File::open("src/cartoon.json").expect("no file found");
-    let metadata = fs::metadata("src/cartoon.json").expect("unable to read metadata");
+    let mut f = File::open("src/emoji.lottie").expect("no file found");
+    let metadata = fs::metadata("src/emoji.lottie").expect("unable to read metadata");
 
     let mut buffer = vec![0; metadata.len() as usize];
     f.read(&mut buffer).expect("buffer overflow");
 
-    let string = String::from_utf8(buffer.clone()).unwrap();
-    lottie_player.load_animation_data(string.as_str(), WIDTH as u32, HEIGHT as u32);
-    println!("{:?}", Some(lottie_player.manifest()));
+    // let string = String::from_utf8(buffer.clone()).unwrap();
+    // lottie_player.load_animation_data(string.as_str(), WIDTH as u32, HEIGHT as u32);
+    // println!("{:?}", Some(lottie_player.manifest()));
 
-    // lottie_player.load_dotlottie_data(&buffer, WIDTH as u32, HEIGHT as u32);
+    lottie_player.load_dotlottie_data(&buffer, WIDTH as u32, HEIGHT as u32);
     // lottie_player.load_animation("confused", WIDTH as u32, HEIGHT as u32);
 
     let observer1: Arc<dyn Observer + 'static> = Arc::new(DummyObserver { id: 1 });
@@ -149,6 +149,8 @@ fn main() {
 
     let mut timer = Timer::new();
 
+    let mut i = 0;
+
     let mut sys = System::new_all();
 
     let cpu_memory_monitor_thread = thread::spawn(move || {
@@ -195,6 +197,22 @@ fn main() {
             lottie_player.set_config(config)
         }
 
+        if window.is_key_down(Key::Right) {
+            if let Some(manifest) = lottie_player.manifest() {
+                println!("{:?}", i);
+
+                if i >= manifest.animations.len() - 1 {
+                    i = 0;
+                } else {
+                    i += 1;
+                }
+
+                let animation_id = manifest.animations[i].id.clone();
+
+                lottie_player.load_animation(animation_id.as_str(), WIDTH as u32, HEIGHT as u32);
+            }
+        }
+
         if window.is_key_down(Key::Up) {
             lottie_player.unsubscribe(&observer1);
         }

dotlottie-rs/src/lottie_renderer/mod.rs

@@ -147,7 +147,7 @@ impl LottieRenderer {
             .map_err(LottieRendererError::ThorvgError)?;
 
         if let Some(picture) = &mut self.thorvg_picture {
-            picture.load_data(data.as_bytes(), "lottie", copy)?;
+            picture.load_data(data, "lottie", copy)?;
 
             let (pw, ph) = picture.get_size()?;
             let (scale, shift_x, shift_y) = calculate_scale_and_shift(pw, ph, width, height);

dotlottie-rs/src/thorvg.rs

@@ -173,14 +173,15 @@ impl Picture {
         convert_tvg_result(result, "tvg_picture_load")
     }
 
-    pub fn load_data(&mut self, data: &[u8], mimetype: &str, copy: bool) -> Result<(), TvgError> {
+    pub fn load_data(&mut self, data: &str, mimetype: &str, copy: bool) -> Result<(), TvgError> {
         let mimetype = CString::new(mimetype).expect("Failed to create CString");
+        let data = CString::new(data).expect("Failed to create CString");
 
         let result = unsafe {
             tvg_picture_load_data(
                 self.raw_paint,
-                data.as_ptr() as *const std::ffi::c_char,
-                data.len() as u32,
+                data.as_ptr(),
+                data.as_bytes().len() as u32,
                 mimetype.as_ptr(),
                 copy,
             )

web-example.html

@@ -30,6 +30,7 @@
     <button id="speed-up">speed +</button>
     <button id="speed-down">speed -</button>
     <button id="loop">loopToggle</button>
+    <button id="next">Next</button>
     <script type="module">
       import createDotLottiePlayerModule from "./release/wasm/DotLottiePlayer.mjs";
 
@@ -42,6 +43,7 @@
       const speedUpBtn = document.querySelector("#speed-up");
       const speedDownBtn = document.querySelector("#speed-down");
       const loopToggle = document.querySelector("#loop");
+      const nextBtn = document.querySelector("#next");
 
       const Module = await createDotLottiePlayerModule({
         locateFile: (path, prefix) => {
@@ -84,7 +86,11 @@
 
       const canvas = document.querySelector("canvas");
 
-      // const loaded = dotLottiePlayer.loadAnimationData(data, width, height);
+      // const loaded = dotLottiePlayer.loadAnimationData(
+      //   data,
+      //   canvas.width,
+      //   canvas.height
+      // );
       const loaded = dotLottiePlayer.loadDotLottieData(
         data,
         canvas.width,
@@ -220,6 +226,27 @@
           loopAnimation,
         });
       });
+
+      let i = 0;
+      nextBtn.addEventListener("click", () => {
+        const manifest = dotLottiePlayer.manifestString();
+
+        if (manifest) {
+          const animations = JSON.parse(manifest).animations;
+
+          if (i < animations.length) {
+            const animation = animations[i];
+            dotLottiePlayer.loadAnimation(
+              animation.id,
+              canvas.width,
+              canvas.height
+            );
+            i++;
+          } else {
+            i = 0;
+          }
+        }
+      });
     </script>
   </body>
 </html>