How can I do something totally unsupported with the widgets?

Read 20414 times
In response to numerous inquiries about how to do things that the built-in code snippets simply are not capable of, here's a brief example of how to pull Centova Cast's widget content into your own JavaScript code and do with it as you see fit.

Note that this is totally unsupported, and I won't be monitoring this thread frequently, but should give you a good starting point for writing your own custom widgets using data from your stream.

Code: [Select]
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script language="javascript">

// helper code, only used for this example (not needed in your own scripts)
function var_dump(v,indent) { var s = '(' + typeof v + ')', t = (typeof indent != 'number'); if (t) indent = 2;
if (typeof v == 'Array' || typeof v == 'object') { s += " {\n"; for (var key in v) { if  (typeof v[key] !=
'function') { s += Array(indent+1).join(' ') + key + ': '; indent += 2; try { s += var_dump(v[key],indent); }
catch(e) { s +=  "[error]\n"; } indent -= 2; } } s +=  Array(indent-2+1).join(' ') + "}\n"; } else { s += " \"" +
v + "\"\n"; } return s; }


// Fetches a widget content URL and sends the data to your callback
function get_centovacast_widget_content(url,callback) {
var req = url.match(/js\.php\/[^\/]+\/([^\/]+)/);
if (!req) alert('This is not a valid Centova Cast widget content URL.');
var method = req[1];
window['cc_'+((method.indexOf('.')==-1) ? method+'_get' : method.replace(/\./,'_'))+'_callback'] = callback;

$.ajax({
url: url,
type: 'GET',
cache: true,
dataType: 'script',
error: function(jqxhr,status,error) {
alert('AJAX request failed: '+status+' - '+error);
}
});
};

// This is your custom function that handles the widget data; you can call it
// whatever you like and do whatever you want with the data.  In this example
// we choose to simply output the number of arguments and their content to a
// <pre> block in the page.
function your_custom_widget_handler() {
var result = 'Widget content handler called with '+arguments.length+' argument(s)\n';

for (var i=0; i<arguments.length; i++) {
result += '\nArgument '+i+':\n';
result += var_dump(arguments[i]);
}

$('#argdump').text(result);
};

$(function(){
// here, we pass the widget's content URL and the name of our custom handler
// function to the get_centovacast_widget_content() function
get_centovacast_widget_content('http://example.com/js.php/username/streaminfo/rnd0',your_custom_widget_handler);
});
</script>
</head>
<body>
<h1>Centova Cast Widget Test</h1>
<pre id="argdump">Loading...</pre>
</body>
</html>


Breaking that down a bit:
  • The var_dump function is just a helper function that you don't need in your own scripts.
  • The get_centovacast_widget_content function actually pulls the widget content from your Centova Cast server and invokes your custom handler (callback) function. 
  • The your_custom_widget_handler function is the function you'll write to receive the data from Centova Cast.  It will be called with a varying number of parameters depending on which widget URL you use; the example page above will display the arguments for you so you can see what they contain.

To find the URL to pass to the get_centovacast_widget_content() function, log in to your Centova Cast client account, look on the "Code Snippets" page, and find the widget you want to obtain content from.  Then, take the URL from that widget's SECOND <script> tag and pass it to this function.  So for example, if you see the following on the Code Snippets page for your selected widget:
Code: [Select]
Place the following code at the bottom of the web page, just before your </body> tag:
<script language="javascript" type="text/javascript" src="http://example.com/system/recenttracks.js"></script>
<script language="javascript" type="text/javascript" src="http://example.com/js.php/username/recenttracks/rnd0"></script>

Then the URL you want is the second one -- http://example.com/js.php/username/recenttracks/rnd0.

What you do with the data in your your_custom_widget_handler function is entirely up to you.  In this example we just dump all the arguments into the page so you can see what they contain... that's helpful as the AJAX responses for the widgets are not documented, and likely won't ever be.

As a simple example of a useful application for this code, a forum user recently requested a way to remove the artist portion of the current song before displaying it.  That could be accomplished passing an URL of http://example.com/js.php/username/streaminfo/rnd0 and implementing the your_custom_widget_handler as follows:

Code: [Select]
function your_custom_widget_handler(streaminfo) {
var song_without_title = streaminfo.song.replace(/^[^\-]+- /,'');
alert(song_without_title);
};

Enjoy. :)
Great info, it should come handy.

Thanks steve.
I found this page very interesting & I have been trying to get the example to work until I realized the instructions are based on an older version of Centovacast. The "second part of the url" that you refer to does not exist in my version (v3) of Centovacast.

Would it be possible to update the instructions for v3?

Thanks
Well I haven't looked at their widgets in a while. I modified a htnl5 player widget I got from internet-radio.com who is hosting my centova3.
mine is at www.knkl.net

Which one are you interesting in beautifying?