Audioplayer not responsive

[MartinSandberg]

Hi,

Trying to use audio with the media element in my Adapt course. It's working but the player is not responsive. It gets a fixed size and stays like that on all widths of the screen.

Having the player in a component with _layout "right". The width of the audioplayer does not change even if I set it in _layout "full".

This leads to the problem that as the component gets a smaller width the player starts to stick out on the side of the component.

Updated to the latest code from here and it is still not working. How can I get it to become responsive?

BR,
Martin

[LukaszGrela]

In the postRender of adapt-contrib-media.js you can put following to teh config object:

            audioWidth: '100%',

It resolves this issue (however I've noticed that in layout right (or left) of the component the time part is wrapped and goes out of the box).
EDIT this is the issue with media element player, however above should be added to the media component

EDIT2 the issue with media component in the "half" width (layout right) can be fixed with following rule

.mejs-time {
    padding-left: 0px !important;
    padding-right: 0px !important;
}

EDIT3 It works when you do it in the developer tools, the MEP is setting the rails width with pixels calculated from button and time, so if you remove padding it will take more space for rails - I will try to resolve it:)

[LukaszGrela]

The media component is using MEP 2.13.2, you can pull this branch and edit the mep-player.js in the setControlsSize function

// fit the rail into the remaining space
railWidth = Math.floor(t.controls.width() - usedWidth - (rail.outerWidth(true) - rail.width())) - 1;

I have added Math.floor and substracted 1 px from this, this will resolve this issue

ofcourse you have to then compile it and take the js into the media component source folder.

[zenduo]

Moved to https://adaptlearning.atlassian.net/browse/ABU-486