Display the type of each segment as an icon

[jbilcke-hf]

Context

In the early version of the Clapper prototype, we had icons for each type: prototype demo

Imho this is a mandatory feature for the MVP, because it allows to instantly recognize the type of a segment just by looking at its icon.

Since the timeline has been rewritten to WebGL, the icons has not been put back but this was still planned,.
I have investigated how we could directly use the SVG icons (read below), but I haven't finished.

Solution 1

I've started to investigate a SVG implementation here, but I wasn't able to make it work (I don't know why):
Cell.tsx and SegmentIcon

There are various components involved: see the [icons project](https://github.com/jbilcke-hf/clapper/tree/main/packages/timeline/src/components/icons =150x)

--> to be honest don't spend too much time on the SVG approach because even if you can make it work, there are limitations (we convert the SVG to a shape, but we loose some SVG featres so it will modify the final appearance) which may not be what we want.

It's great if we want to do 3D extrude and effects, but probably for simple icons.

Solution 2

Maybe we should just switch to using PNG textures, that will work for sure (eg. today we made storyboard texture work, so you can base yourself off this) and at least we will get the exact same look.