Problem styling Video component

[cederron]

Hello,
I want to make 'object-fit' style property editable in the ui, to apply it to a video component.
I added 'object-fit' property to StyleManager so it shows in the ui, but when I apply it to a Video component it's view isn't rendering properly in the canvas.
After some investigation, i saw the video component renders a DIV tag with a video tag inside, the 'object-fit' property is applied to the outside div instead of the video tag, so it's not rendering properly. When viewing the code and exporting it, everything is good, object-fit is applied to the video tag. But in the canvas preview is wrong because object-fit is not applied to video tag directly.
I tried a myriad of things.
I extended video component to try to listen for changes to 'object-fit' so i could copy the value to the inner video tag, but i couldn't.
For some reason, this is not working:
editor.on('component:styleUpdate:object-fit', (p1, p2) => {console.log('styleupdate') })
function is never executed.
Tried variations and other events, the closest i got is listening to StyleManager 'style:property:update', then check if property is 'object-fit', then get the current selected component and apply the property to the video.
But this looks like a hack around something I'm missing.

With a trait this could be easy (I guess), but i think it belongs to the style manager, so that's how i would like to do it if possible.

So how could i style 'object-fit' property in a video component and show a correct preview in the canvas ?

Any help appreciated thanks.

[cederron]

Well, i'm extending the video component and adding this code to view init:

editor.on('style:property:update', (p) => {
                    if (p.property.attributes.property == 'object-fit') {
                        const selcomp = editor.getSelected();
                        if (selcomp.ccid == this.model.ccid) {
                            const el =  editor.Canvas.getDocument().getElementById(selcomp.ccid).children[0];
                            el.style.objectFit = p.value;
                        }
                    }
                });

it works but i have to listen to every change in the style manager.

If someone comes up with a better solution, please share it and i will pay you a beer.