Formatting of OnDemand Widget

B

brothwel

Member
I am trying to implement the OnDemand widget, and am seeing odd formatting issues:

  • The name of each track is actually the "filename" and not the MP3 meta tag "title".
    • Can this be changed?
    • If so, how?
    • If not, why?
  • The on longer filenames, the filename is truncated to what seems to be a predetermined inadequate length, when there is plenty of room.
See attached image:

ondemand_formatting_issue.png
 
Yes this will display only the filenames. As the files sit in your "ondemand" folder then the meta-data titles won't be displayed as meta-data is only shown in media players.

All you can do is rename the files. Unfortunately where the filenames are truncated there is nothing that we can do about that. That is something you would need to address with the Centovacast software developers.
 
If I had to use the on demand widget, I would just make a new one. The Jquery method limits the code to file names. I would rewrite in php and parse the mp3 using id3_get_tag php command.
 
Ok, I'm bored, lets see what I can come up with here:

well we can clean things up, and remove the trailing dots because that is an overflow statement in the in coming css with the widget.

here is the css for the widget. We put this in the <style> tag and modify it. I will modify the trailing dots out by setting overflow:none; instead of text-overflow:ellipisis;


.ccfilerow{margin-bottom:1px;padding:2px 8px}
.ccfilebox{float:right}
.ccfilename{height:18px;background-repeat:no-repeat;background-position:4px 0;text-overflow:none;overflow:none;white-space:nowrap;width:250px;padding:2px 0 0 22px}
.ccfilename a,.ccfilename a:link,.ccfilename a:active,.ccfilename a:visited,.ccfilename a:hover{font-weight:400;text-decoration:none;color:#606060}
.ccfilename a:hover{text-decoration:underline}
.ccfiletype_folder .ccfilename{background-image:url(images/startpage/ondemand-folder.gif)}
.ccfiletype_media .ccfilename{background-image:url(images/startpage/ondemand-media.gif)}
.ccfilesize{padding-top:2px;float:right;text-align:right;width:35px}.ccfilem3u{text-align:center;padding:5px}
.cc_ondemand_loading,#cc_on_demand_loading{background-image:url(images/loadingbg.png);background-repeat:no-repeat;width:144px;height:44px;padding-top:12px;text-align:center}
.ccfilerow_odd,.ccfilerow_even{background-color:#FFF}



so we change the body tag to apply the settings after the widget loads:

<body onload="setTimeout('goclear()', 2000);">


insert a trigger object (I found this to be the best in cross browser compliance)

<button id="plrclr" style="display:none;" class="bb"> remove property</button>

then somewhere below the script file for the widget, and above all external javascript pages loaded at the bottom before the </body> tag:
<script>
function goclear() {
document.getElementById("plrclr").click();
}
</script>
this is the listener you can put this in the body anywhere. Change the "control.internet-radio.com:1234" to your server's url+port.

<script>
$(document).ready(function(){
$("button.bb").click(function(){
$('link[rel=stylesheet][href~="https://control.internet-radio.com:1234/theme/widget_ondemand.css"]').remove();
});


});
</script>

you should be able to change the underscores to spaces if this is within the document.ready.(function()) and after the button.click() ]);

$(".ccfilename").contents().each(function() {
if (this.nodeType == 3)
this.textContent = this.textContent.replace('_', ' ');
});
 
@dooly -- I have no idea why I never noticed your response, or if I did, why I failed to acknowledge it.

Thank you for the code to try out!
 
You must log in or register to reply here.
Top