feat: improved zoom capabilities

[z16th]

As a remotion user that uses mostly Stills I found that the tool does not provide a way to zoom in smoother intervals.

Ideally the Still frame should behave as a scrollable/draggable canvas like the ones in image editing/design software.

Current state:

• added: zoom buttons and slider (similar to TimelineZoomControls)
• added: slider onWheel event to zoom in/zoom out easier
• added: StillPreview canvas just to avoid collisions with VideoPreview for future changes (not really needed right now)

Issues:

• canvas not able to scroll through the whole composition when zoomed in

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Updated
remotion	✅ Ready (Inspect)	Visit Preview	Sep 13, 2022 at 2:02PM (UTC)

[JonnyBurger]

This is super useful! Thanks a lot for kicking this off! Let me know once I should review this or help you!

[z16th]

This is super useful! Thanks a lot for kicking this off! Let me know once I should review this or help you!

I managed to use the components already created to add a new section to the general toolbar (both video and stills)

The only issue I found is that the canvas is not scrolling through the entire Composition/Still when zoomed in, I was hoping you could give it a look to make the styles/scale calcs work correctly
remotion-zoom-scroll-issue.webm

Also I'm not really good with TS, so probably typing is another issue.

Thanks beforehand
Cheers

[JonnyBurger]

I am happy to help you with that 🙌 will tackle it soon!

[JonnyBurger]

Hey @z16th! I've now worked a day on it and changed quite a bit, I hope it doesn't bother you!
I've implemented a pattern from Figma where you can zoom with the scroll wheel on the canvas directly if you press the Ctrl/Cmd key. Also you can pan around if you have a trackpad, otherwise you can control where it zooms in using your cursor.
By default, you cannot pan unless you first trigger a zoom, and there is a reset button to go back to the initial state. Hope that also makes sense to you!

Planning to merge and release it in this state now.

[z16th]

It doesn't bother me, Remotion is your tool after all. You know better how to manage it.

Thanks a lot for your help! 🙌
This will improve my workflow a lot.

[JonnyBurger]

Thanks as well for the awesome contribution! 🙌