[feat] No artboards metadata (e.g. duration)

[Juliette Beaudet]

Hi there,

Observation:
There are many informations about each rive artboard / scene that we do not have access to.

Example of use case (ours, actually):
Presenting each artboard in a different instagram-like story, with a multiple progress bar, which requires to get the duration of each artboard beforehand. (Screenshot merely illustrative).

Suggestion:
It would be a great idea to integrate these extra data to the lib.
Beyond duration, there are also all the artboards, transitions, states machines, etc.

Wdyt?
Thank you!

[Arthur Vivian]

Hey @juliettebeaudet!

We do currently return some of this information in the variable contents on the rive object. See this example code to access it:

import { useRive } from "@rive-app/react-canvas";

function App() {
  const { RiveComponent, rive } = useRive({
    src: "https://public.rive.app/community/runtime-files/4354-8948-advance-arm-rig.riv",
    autoplay: true,
  });

  if (rive) {
    console.log(rive.contents);
  }

  return (
    <div style={{ height: "500px", width: "500px" }}>
      <RiveComponent />
    </div>
  );
}

export default App;

Example output:

{
  "artboards": [
    {
      "name": "Eclipse",
      "animations": [
        "Logo 1",
        "Logo 0",
        "Logo Hide",
        "Logo Reveal",
        "Moon InnerGlow Off",
        "Moon InnerGlow On",
        "Mini Flare Off",
        "Mini Flare On",
        "Flare On",
        "Flare Off"
      ],
      "stateMachines": [
        {
          "name": "State Machine 1",
          "inputs": [{ "name": "Flare", "type": 59 }]
        }
      ]
    }
  ]
}

This information could be more rich however, such as returning the duration of the animations as you pointed out here. We might need to make breaking changes to the format of contents to add this extra information. I'll discuss this with the team!