disable timeknob and coverart if webradio

waves

I want to disable the timeknob and coverart on the playback tab when playing webradio. The timeknob is of no use for live streams and the webradios I listen to have no coverart so that box only wastes space (extra scrolling to reach the volume knob on android device).

To do this I need to add some conditional statements to playback.php, similar to this

<?php if ($this->coverart == 1): ?>

but instead of checking for coverart I want to check if the currently playing item is not a webstream. Can you describe the php syntax for such a check?

I posted in "feature request" since I found no better forum category for this post. And I do request an option to disable timeknob and coverart for webstreams. But for know I mostly want to know the syntax so I can myself manually modify the playback.php on my pi.

ACX

You should do that on the client side with Javascript, as the webradio info comes in realtime from the Nginx Pushtream Module channel and the UI updates consequently.

Go in this file:
https://github.com/RuneAudio/RuneUI/blob/master/assets/js/runeui.js

Look inside the function

function refreshState()

You'll find some conditionals around like this:

if (GUI.stream === 'radio')

Use that to show/hide the parts of the UI that you don't need, using the jQuery method addClass('hide') to hide and removeClass('hide') to show them.

ACX

Oh, I forgot that you have to minify the file into this one
https://github.com/RuneAudio/RuneUI/blob/master/assets/js/runeui.min.js
after the mod.

waves

Thanks, I'll give that a try and report back here later. I've been poking around the code and that js file already tried out a few modifications. Mostly disabling stuff to make the UI even more minimal. That is one great thing with local server/browser software - users can jump right in and start change things up on their local install very easily. (... and also break things. But reinstalls are cheap

waves

I'm new to javascript compression. I did a quick test with http://jscompress.com/ but RA then seems to overwrite the resulting runeui.min.js file on boot with a default one. What tool should I use to minify?

Once I've figured out minify I will try these commands:
$('#timeknob').addClass('hide');
$('#timeknob').removeClass('hide');

waves

Ok, took another stab at minify and got it working now with http://gpbmike.github.io/refresh-sf/ .

There are two active

if (GUI.stream === 'radio')

checks in runeui.js (a third is commented out and can be ignored). For both of the active checks I added

$('#timeknob, #repeat, #random, #single, #cover-art').addClass('hide');

to the if actions and

$('#timeknob, #repeat, #random, #single, #cover-art').removeClass('hide');

to the else actions.
Minify the code and save (overwrite) runeui.min.js

ACX

Yes. Have you managed to get the desired result?

waves

Yes! The above edits to runeui.js + minifying did the trick. The timeknob and coverart are autohidden when playing a stream and autoshown again when playing a file from usb storage.

Not that using the online minify tool is any problem or anything but just out of curiousity is there a command line tool bundled with RuneAudio for minifying?

ACX

I use UglifyJS with Grunt to automate the process on every edit.
If you want to perform that manually, here's a online tool:
https://marijnhaverbeke.nl/uglifyjs

robertinjo

waves wroteYes! The above edits to runeui.js + minifying did the trick. The timeknob and coverart are autohidden when playing a stream and autoshown again when playing a file from usb storage.

Not that using the online minify tool is any problem or anything but just out of curiousity is there a command line tool bundled with RuneAudio for minifying?

waves, can You share the files edited or process in detail, so that I, without knowledge in JS can replace them or edit them to achieve same thing?

I have problem with CPU usage when playing radio streams, so that could be a hack so solve it...

Thanks

waves

robertinjo: I don't think the CPU issue you are seeing could be related to the timeknob and coverart. Anyway I've made other changes to my runeui.js file that in turn go together with other file changes so it would not work for you to simply plug that file in as is. That said I did describe all (timeknob and coverart related) changes I made to the file in my posts above.

waves

Here comes another question on hide/tweak of UI elements. I place it here instead of in new thread since not far off from the above discussion.

How do I change the click action for the volume wheel?

The background is that I want to hide all three buttons below the wheel. Vol up/down buttons are hidden with this add to the refreshstate() function in runeui.js (then saved, minified)

$('#volumedn, #volumeup').addClass('hide');

I can hide the mute button the same. But that would leave me without mute so I want to tweak the volume wheel to toggle mute instead.

I've browsed the code in playback.php ( near <input id="volume" ) and parts of runeui.js concerning volume but haven't figured out what controls the text input (in contrast to clicks/drags on the circle).

jpfelgueiras

Can't this be commited to Git?
I think that is an improvment that evry one will like.

waves

jpfelgueiras wroteCan't this be commited to Git?
I think that is an improvment that evry one will like.

This is only a tweak I did for own use. I haven't test driven it on a proper set of different systems/browser, etc. I can also imagine that some do not want my disable-timeknob-coverart-if-webradio tweak when viewing in landscape mode since it (temporarily) removes the nice symmetric look of the two left/right side circles. (It would look nicer to add a landscape/portraid mode check and in landscape mode show the progress circle without movement and only the eternal icon in the middle.) I'm also pretty new to RuneAudio and will for now simply tweak stuff on my local install while I learn more. Though I will forum post small tweaks I think others may like. Later on they could perhaps be put into a "minimal mode" if the RA developers come around to that idea.

waves

I now figured out how to do volume knob click actions.

how to: disable buttons under volume wheel and make click on digits in volume wheel toggle mute on/off
In runeui.js find these lines

// update info and status on Playback tab
function refreshState() {

and add this new code bit above those lines

$('#volumedn, #volumeup, #volumemute').addClass('hide');  
$("#volume").bind("click", function () { 
$(':focus').blur();
$("#volumemute").click(); 
 });

minify runeui.js into runeui.min.js ( select all text in runeui.js and copy , go http://gpbmike.github.io/refresh-sf/ and paste in box, click javascript , copy result, open runeui.min.js and select all and paste in the new minified text from the clipboard, save) and reload runeaudio in the browser.

ACX

jpfelgueiras wroteCan't this be commited to Git?
I think that is an improvment that evry one will like.

This is a hack, not a feature that can be released, so use it if you need it.

LC1

Could the left knob become a tuner, like on a "proper" old radio, to flick through all stations? I would like that.