Update vjs.Component.addChild to allow an index

[erikyuzwa]

I'm trying to add "skip next" and "skip back" vjs.Buttons which are currently plugins that would be surrounding the Play button in the ControlBar Component.

the Component supports the addChild(child, [options]), but it would be nice to be able to inject a component at a specific index to help the re-arrangement in the DOM of controls that are rendered.

(my apologies if this is a FAQ)

[heff]

#2477 is actually related to this one. It would make children an array, so a plugins could just manually insert itself in the children array before init.

But also no, there isn't a way to specify that today. If you'd be interested in helping add the option, that'd be cool. I could see the third argument of addChild be the index where you want to splice the child in.

[erikyuzwa]

most excellent @heff thanks for the feedback. I'd love to take a shot.

[thijstriemstra]

I'd also be interested in this.

[thijstriemstra]

Maybe a new addChildAt?

[chemoish]

+1

[chemoish]

This is what I am currently doing.

let control_bar = this.player.getChild('controlBar');

let chapter_button = control_bar.getChild('chaptersButton');

let chapter_thumbnail_menu_button = new ChapterThumbnailMenuButton();

// add component to end of control bar
control_bar.addChild(chapter_thumbnail_menu_button);

// move component
control_bar.el().insertBefore(chapter_thumbnail_menu_button.el(), chapter_button.el());

Hope this helps as an alternative.

[gkatsev]

In 5.0 we also have a separator element you can use to insert before or after to make your components available on the right-ish or left-ish side of the control bar.

[gkatsev]

This has landed by #2540 in 5.7!