getBoundingClientRect calculate wrong value on studio mode

[mnlbox]

Hi,

Thanks for this awesome tool. I used getBoundingClientRect function to calculate some object locations but the values are calculating wrong when I try to use studio command. It happened because the viewport and base div is different on Remotion studio but everything is OK when I run the render command.

Is there any helper function to get the location (top, left, right, bottom) of an element correct on both studio and render?

[JonnyBurger]

It's a good question!

Let me get back to it tomorrow

[JonnyBurger]

I now created some documentation on how you can do it, and an example: https://www.remotion.dev/docs/measuring

[mnlbox]

Thanks @JonnyBurger for quick answer.
I tried to get "top" and "left" (not width and height) of element with the same method but it didn't work. I'll check again today and try to create a reproduce sample if it didn't work again.

One more question:
Is there any chance to have this logic somewhere as a helper function in future?
Maybe in @remotion/layout-utils package. 🤔
I'm asking because I guess it can be a nice and useful thing to have.

[JonnyBurger]

Did you ensure to update to v4.0.103? This is required to not get zeroes.

[mnlbox]

@JonnyBurger I still think there is some issue for the calculation, you can see even the ruler value from "studio" is not same as ruler from browser devtools: 🤔

The top right of the composition shows "1250" for x (or top) on studio ruler while it should be "0" or am I missed something for measuring?

[JonnyBurger]

It's not meant to be the same - the rulers show the pixels of the video dimensions!

You are rendering a 4K video it appears so the ruler goes from 0-3840 and 0-2160 respectively.

The canvas can be scaled arbitrary with pinch, Ctrl+Scrollwheel or the "%" underneath the canvas, only at 100% the pixels will match up.

[mnlbox]

@JonnyBurger I prepared a sample repo about the ruler and DOM measuring issue that I'm facing now:

https://github.com/mnlbox/remotion-ruler-and-dom-measuring-issue

I guess it's a bug on studio only because everything is working as expected after render the video. I even tried to use the measurer trick that you described in the docs here:
https://www.remotion.dev/docs/measuring

[mnlbox]

@JonnyBurger can you please take a look to the above repo to see if it's even an Remotion issue or not?
Maybe I missed something in my code 🤔
I'm a bit confused now because everything is OK in the rendered video.

[JonnyBurger]

There is now also https://www.remotion.dev/docs/use-current-scale!
Updated the measuring docs too: https://www.remotion.dev/docs/measuring

[mnlbox]

Woooo I like it. This new hook is so neat. Thanks for that. ❤️
But I got the error bellow when I change the current frame on the player or when I play the video.
It's working great when I refresh the Remotion Player. Maybe I'm using it wrong 🤔

[JonnyBurger]

Hi @mnlbox, I could not reproduce this in my testing.
Did you upgrade everything, including @remotion/cli?

Can you also try rm -rf node_modules/.cache once and tell me if that resolves the issue?

[mnlbox]

Thanks @JonnyBurger yeah after removing the node_modules and fresh pnpm install everything works now.
I also removed pnpm store cache.

Thanks for this awesome tool.
I'm learning new stuff from Remotion every day and I really like the idea behind that.
Thanks for all of your great works.

[JonnyBurger]

@mnlbox Super happy to hear that! 🙌🏼
Thanks a lot for helping shape Remotion!