by MiPi » Thu Sep 30, 2021 3:15 am
1) I am not sure, why do you need this. But it is defined in skin - player.html. "data-id" property is usually not needed for styling at all, as different skin can use different id. So when adding new element in some skin, you can use your own data-id (only e.g. if used in player.html, it should be unique in parent element, here in player element). Data-id is not bound to contents of the element.
2) controls on player are defined in window.playerControlsHandlers object in controls/player.js. So e.g. when you need to add bitrate to player control, you should:
add controls\player_add.js to your new skin, with:
Code: Select all
window.playerControlsHandlers.bitrate = {
title: _('Bitrate'),
setValue: function (el, playerCtrl, sd) {
let bitrate = sd.bitrate;
if (bitrate >= 0)
el.innerText = Math.round(bitrate / 1000) +' '+_('kbps');
else
el.innerText = '';
},
grouptitle: playerControlGroups.metadata
};
"grouptitle" defines section of player layout options, where new element should be displayed (sections are defined in playerControlGroups variable in player.js). And then add this control to player.html of your skin. Reference to playerControlsHandlers is done by attribute "data-player-control" containing name of the property defined above (this element will be passed to setValue function as first parameter, third parameter - "sd" - is standard SongListData object, setValue is called automatically when needed). So e.g. you can add this just after player-rating div, when you are adjusting Material Design skin:
Code: Select all
<div class="verticalCenter dynamic">
<label data-id="player-bitrate" data-player-control="bitrate" data-optional="{group: 20, order: 30}" style="display: none"></label>
</div>
As a result, bitrate will be displayed after (optional) rating, when checked in Player layout options (position in layout options defined in data-optional).
For file extension you can use exactly the same, in setValue you get extension from "sd.fileType".
1) I am not sure, why do you need this. But it is defined in skin - player.html. "data-id" property is usually not needed for styling at all, as different skin can use different id. So when adding new element in some skin, you can use your own data-id (only e.g. if used in player.html, it should be unique in parent element, here in player element). Data-id is not bound to contents of the element.
2) controls on player are defined in window.playerControlsHandlers object in controls/player.js. So e.g. when you need to add bitrate to player control, you should:
add controls\player_add.js to your new skin, with:
[code]
window.playerControlsHandlers.bitrate = {
title: _('Bitrate'),
setValue: function (el, playerCtrl, sd) {
let bitrate = sd.bitrate;
if (bitrate >= 0)
el.innerText = Math.round(bitrate / 1000) +' '+_('kbps');
else
el.innerText = '';
},
grouptitle: playerControlGroups.metadata
};
[/code]
"grouptitle" defines section of player layout options, where new element should be displayed (sections are defined in playerControlGroups variable in player.js). And then add this control to player.html of your skin. Reference to playerControlsHandlers is done by attribute "data-player-control" containing name of the property defined above (this element will be passed to setValue function as first parameter, third parameter - "sd" - is standard SongListData object, setValue is called automatically when needed). So e.g. you can add this just after player-rating div, when you are adjusting Material Design skin:
[code]
<div class="verticalCenter dynamic">
<label data-id="player-bitrate" data-player-control="bitrate" data-optional="{group: 20, order: 30}" style="display: none"></label>
</div>
[/code]
As a result, bitrate will be displayed after (optional) rating, when checked in Player layout options (position in layout options defined in data-optional).
For file extension you can use exactly the same, in setValue you get extension from "sd.fileType".