Component ordering?

[Akkuma]

Is there an easy way to control the order of the components added to the control bar? I was trying to order it through children, but that didn't alter it at all. Right now I have custom markup to handle everything, but would prefer to simply order the baked in controls and alter them with css.

I did notice I can directly alter the prototype, but that seems to be a bad way to handle this.

videojs.ControlBar.prototype.options_ = {
      loadEvent: 'play',
      children: {
        'playToggle': {},
        'muteToggle': {},
        'volumeControl': {},
        'fullscreenToggle': {}
      }
}

[gkatsev]

You can't order the components via the options.
You'll need to do this via CSS since the components get added in a specific order.

[Akkuma]

It seems like it would be pretty easy to add/change the functionality to allow ordering of components without forcing direct manipulation of the options_. CSS is not a proper solution.

[gkatsev]

Why is CSS not a proper solution? The controls are displayed where they are via CSS. So, if you want them to be in a different position, you need to change the css.

[Akkuma]

It takes more effort to position properly via CSS than to properly order the components from the get go. I want my mute on the left of volume and doing so through CSS takes more effort than simply ordering it as such. I personally hate using floats unless I must resort to them and I like to wrap them in a containing div.

Hijacking the options_ is hacky, but far simpler from my perspective.

Edit: Additionally, if I'm using a minority of controls it is far easier to explicitly state the ones I want on, rather than stating everything I want off.

[mmcc]

So this is potentially fairly easy, but only if kept to a pretty limited set of ordering. The CSS determines whether elements are floated left or right, but within those floats the ordering is determined by the order of the elements themselves. Essentially what I'm saying is, your idea for a fix works fine, but really only for ordering within their current region if that makes sense.

Reopening this for tracking. @heff will probably want to chime in when he gets back.

[Akkuma]

My simply solution would be to replace vjs.obj.each in initChildren with a call that can handle either an array or the standard children object.

This would allow one to declare

videojs('xyz', {
    children: [
        'playToggle',
        'muteToggle',
        'fullscreenToggle'
     ]
});

If I missed something in the code that would rely on the options.children later on being an object I apologize, but I didn't notice it in the source.

[mmcc]

@Akkuma that makes sense. Would you be willing to try this out and contribute a pull request?

[Akkuma]

I'll try to make time to get to this, since this is easy enough.

[mmcc]

Awesome! Just reference this in the PR when you submit it as a reminder.

[jnwng]

+1, i could use this too

[justinlevi]

Could you provide an example of what this would look like in the manual setup code? I'm able to set the display of components easily by setting the object to false but the controlBar order doesn't seem to be affected by setting the children object.

The only way I'm able to affect the order of components is by hijacking the options_ prototype. Further documentation on this would be great too.

[Akkuma]

@justinlevi As apart of your options here is an example of exactly what I have that is out there in real use:

children: {
    controlBar: {
        children: [
            'playToggle',
            'muteToggle',
            'volumeControl',
            'fullscreenToggle'
        ]
    }
}

[justinlevi]

@Akkuma - Brilliant! That seemed to do the trick.

I was trying to pass in objects of string keyed empty objects for the control bar children like so:

children: {
    controlBar: {
        children: {
            'playToggle': {},
            'muteToggle': {},
            'volumeControl': {},
            'fullscreenToggle': {}
        }
    }
}

From reading the code it seemed like you could pass in objects or arrays. Is this not the case? Cheers for the quick response.

[Akkuma]

@justinlevi Component ordering requires an array. If you use an object you cannot order the components. Your array can either contain a mix of strings (control names, when you have no options you need to pass) and objects with a key of name for the control name ie { name: 'playToggle', [otherOption]: [otherOptionVal] }. I think the most common use will be simple strings.

[apasquelin]

For order and vertical volume :

children: {
           controlBar: {
               children: [
                   {
                       name: 'liveDisplay'
                   },
                   {
                       name: 'playToggle'
                   },
                   {
                       name: 'currentTimeDisplay'
                   },
                   {
                       name: 'timeDivider'
                   },
                   {
                       name: 'durationDisplay'
                   },
                   {
                       name: 'remainingTimeDisplay'
                   },
                   {
                       name: 'progressControl'
                   },
                   {
                       name: 'fullscreenToggle'
                   },
                   {
                       name: 'volumeMenuButton',
                       volumeBar: {
                           vertical: true
                       }
                   }
               ]
           }
       }

[lupos]

this was working for me until the new 5.0 version came out. can anyone verify if its indeed broken or maybe im doing something wrong?

[etomProductions]

Would you please explain how can we add our custom button to be included same array?
Small hint will be apprciated.