in progress No Volume Control in Mobile View

Ken Rich
Ken Rich
@ken-rich
11 years ago
926 posts
Why is the volume slider missing in mobile views of the players? Is that by design or a "glitch" on my site?

If by design how do I add them because a client REALLY wants them.


--

Ken Rich
indiegospel.net

updated by @ken-rich: 01/28/15 07:43:00PM
brian
@brian
11 years ago
10,148 posts
It's by design - on a mobile phone you adjust the volume by turning the volume up and down on the device.

You can modify the audio player templates to suit your needs - they are in:

modules/jrAudio/templates

Jamroom uses jPlayer so you can find a comprehensive guide to customizing here:

http://jplayer.org/latest/developer-guide/

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Ken Rich
Ken Rich
@ken-rich
11 years ago
926 posts
Thanks Brian... I'll have a go at a CSS mod...


--

Ken Rich
indiegospel.net
gary.moncrieff
gary.moncrieff
@garymoncrieff
11 years ago
865 posts
Brian, just on this point is it possible to add new player designs without having to edit the core to register them first, I looked at this a while ago and seen I would have to edit the core to register the new player template.
michael
@michael
11 years ago
7,772 posts
gary.moncrieff:
Brian, just on this point is it possible to add new player designs without having to edit the core to register them first, I looked at this a while ago and seen I would have to edit the core to register the new player template.

You don't need to edit the core at all. Don't edit the core. ;)

A skin defines what player it wants to use if there are options eg: in jrElastic
/skins/jrElastic/includes.php

You'll find this:
// Our default media player skins
jrCore_register_module_feature('jrCore', 'media_player_skin', 'jrElastic', 'jrAudio', 'jrAudio_player_dark');
jrCore_register_module_feature('jrCore', 'media_player_skin', 'jrElastic', 'jrVideo', 'jrVideo_player_dark');
jrCore_register_module_feature('jrCore', 'media_player_skin', 'jrElastic', 'jrPlaylist', 'jrPlaylist_player_dark');

That is the elastic skin registering that it wants to use:
* jrAudio_player_dark as the default player for jrAudio
* jrVideo_player_dark as the default player for jrVideo
* jrPlaylist_player_dark as the default player for jrPlaylist

So if no type="xxxxxxxxxxxx" is defined for the {jrCore_media_player .....} call then the default will be used.

You can define to use any player you want in that location by adding it as the value.
{jrCore_media_player type="jrPlaylist_blue_monday" module="jrPlaylist" item=$item}

If you don't like the way jrPlaylist_blue_monday looks at the skin level and want to customize it for your skin you can over-ride it in all locations by defining a template over-ride at:
/skins/jrElastic/jrPlaylist_jrPlaylist_blue_monday.tpl and that will be used instead.

Is that enough to get you where your going? What are you thinking?
Ken Rich
Ken Rich
@ken-rich
11 years ago
926 posts
I for one would love to have a player that has more features, not just a different CSS look.

For instance, a "popout" embed code button, and social share buttons, so the player has a chance of going viral. Buy now buttons on the songs. Link backs to the artists profiles.

For a non programmer to do a substitution this way, is "daunting" to say the least. I hope a one click module install will come out at some point.

The player features I'm looking for already exist here - http://html5.svnlabs.com/


--

Ken Rich
indiegospel.net
gary.moncrieff
gary.moncrieff
@garymoncrieff
11 years ago
865 posts
Thanks Michael, I knew at the time I was missing something obvious.
michael
@michael
11 years ago
7,772 posts
gary.moncrieff:
Thanks Michael, I knew at the time I was missing something obvious.

If your thinking about a module to replace another modules player with a different player that would take a bit of research and fiddling. Not sure if the best way would be 'events and listeners' or template overrides.
Ken Rich
Ken Rich
@ken-rich
11 years ago
926 posts
brian:
It's by design - on a mobile phone you adjust the volume by turning the volume up and down on the device.

You can modify the audio player templates to suit your needs - they are in:

modules/jrAudio/templates

Jamroom uses jPlayer so you can find a comprehensive guide to customizing here:

<a href="http://jplayer.org/latest/developer-guide/" target="_blank" rel="nofollow">http://jplayer.org/latest/developer-guide/</a>

Hope this helps!

I was up the whole night looking for the control and never did find it. I see this in the JPlayer Developer Guide.

noVolume †
Object : Defines the user agent blocklist, which contains regular expressions, which cause the volume controls to be hidden if a match is found.

The default object is:

[code] noVolume: {
ipad: /ipad/,
iphone: /iphone/,
ipod: /ipod/,
android_pad: /android(?!.*?mobile)/,
android_phone: /android.*?mobile/,
blackberry: /blackberry/,
windows_ce: /windows ce/,
iemobile: /iemobile/,
webos: /webos/,
playbook: /playbook/
}[/code}

However, I can't find the corresponding version of that the in the audio Module.

========================================================

I also found this in the jrAudio Dark Player CSS

[code] .jp-volume-bar .jp-mute .jp-unmute .jp-volume-max {
visibility:hidden;
} [/code]

I changed it to visible, even deleted it - still no volume buttons.

==============================================================

Is anyone able to tell me how to get volume controls working in mobile views.


--

Ken Rich
indiegospel.net
brian
@brian
11 years ago
10,148 posts
Modify the modules/jrAudio/css/jrAudio_player_dark.css and find the mobile section - i.e.:

/* Mobile */
@media handheld, only screen and (max-width: 767px) {
    .jp-seek-holder{
        visibility:hidden;
    }
    .jp-volume-bar .jp-mute .jp-unmute .jp-volume-max {
        visibility:hidden;
    }
    .jp-shuffle .jp-shuffle-off .jp-repeat .jp-repeat-off  {
        visibility:hidden;
    }
}

Change it to:

/* Mobile */
@media handheld, only screen and (max-width: 767px) {
    .jp-seek-holder{
        visibility:hidden;
    }
    .jp-mute .jp-unmute .jp-volume-max {
        visibility:hidden;
    }
    .jp-shuffle .jp-shuffle-off .jp-repeat .jp-repeat-off  {
        visibility:hidden;
    }
}

Do you see how I removed the .jp-volume.bar from the second set of classes? That will make it so it will show.

Everything in the players is controlled by CSS.

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Ken Rich
Ken Rich
@ken-rich
11 years ago
926 posts
Hi Brian,

Thanks - I'll try and let you know.

As I already indicated above, I changed that section to visible, and I also tried deleting that whole section, but both attempts failed to restore the volume control.


--

Ken Rich
indiegospel.net
Ken Rich
Ken Rich
@ken-rich
11 years ago
926 posts
Yup - that seems to be it. I can't see the controls in the emulator but someone who has a smartphone confirmed it's working.

Maybe my attempts were working last night too, but because the emulator is not showing the buttons, I didn't know I was succeeding???

At any rate, thanks very much Brian, that's a "biggie" off my plate.


--

Ken Rich
indiegospel.net
brian
@brian
11 years ago
10,148 posts
No problem - glad to hear it.

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Ken Rich
Ken Rich
@ken-rich
11 years ago
926 posts
Believe it or not he wants volume controls on the mini play buttons too lol

I told him no one has those, all I can do is turn them down since he's complaining that they are too load initially. Default is .8 I'm trying .5 for now.


--

Ken Rich
indiegospel.net
brian
@brian
11 years ago
10,148 posts
Ken_Rich:
Believe it or not he wants volume controls on the mini play buttons too lol

I told him no one has those, all I can do is turn them down since he's complaining that they are too load initially. Default is .8 I'm trying .5 for now.

Just a suggestion: I would avoid customizing your site for one user. If multiple users complain then you know it is an issue, but having run a large site for many, many years you will be working 24/7 if you try to please 100% of the people 100% of the time, and you'll end up making no one happy :)


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Ken Rich
Ken Rich
@ken-rich
11 years ago
926 posts
Yup - you are probably right about that...


--

Ken Rich
indiegospel.net
Ken Rich
Ken Rich
@ken-rich
11 years ago
926 posts
brian:
Modify the modules/jrAudio/css/jrAudio_player_dark.css and find the mobile section - i.e.:
Change it to:
/* Mobile */
@media handheld, only screen and (max-width: 767px) {
    .jp-seek-holder{
        visibility:hidden;
    }
    .jp-mute .jp-unmute .jp-volume-max {
        visibility:hidden;
    }
    .jp-shuffle .jp-shuffle-off .jp-repeat .jp-repeat-off  {
        visibility:hidden;
    }
}

Do you see how I removed the .jp-volume.bar from the second set of classes? That will make it so it will show.
Everything in the players is controlled by CSS.
Hope this helps!

Hi Brian,

I broke down and got a smart phone for checking this stuff. I am still not seeing a volume control even though I have the code installed the way you suggested.

I'm using a Samsung with Chrome.


--

Ken Rich
indiegospel.net
gary.moncrieff
gary.moncrieff
@garymoncrieff
11 years ago
865 posts
The volume buttons on the phone are what regulate it.
Ken Rich
Ken Rich
@ken-rich
11 years ago
926 posts
Yes but I have a client who wants to do it with a slider. Other mobile players like youtube, and my radio station player have sliders.

Apparently, the player comes with a slider but it is shut-off by Jamroom. I just need to know what makes it show again.


--

Ken Rich
indiegospel.net
brian
@brian
11 years ago
10,148 posts
Ken_Rich:
Yes but I have a client who wants to do it with a slider. Other mobile players like youtube, and my radio station player have sliders.

Apparently, the player comes with a slider but it is shut-off by Jamroom. I just need to know what makes it show again.

I outlined above how it is controlled in the CSS - i.e. modules/jrAudio/templates/jrAudio_player_dark.css.

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Ken Rich
Ken Rich
@ken-rich
11 years ago
926 posts
Hi Brian,

I did what you said to do but it still didn't show the volume control. That CSS doesn't seem to effect it.


--

Ken Rich
indiegospel.net
brian
@brian
11 years ago
10,148 posts
Hmmm.. well that's the part that is hiding it, so I'm not sure what else it would be. I don't have an Android phone here to test with. Douglas - can you see if you see an issue with this?

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Ken Rich
Ken Rich
@ken-rich
11 years ago
926 posts
I would certainly appreciate it. I can't seem to get anywhere with it.

I put visible in the seek bar control and that shows, but volume appears to be shut off somewhere else.

Possibly with this command I found on the player site, but I don't know where to find it in Jamroom. Javascript or PHP maybe?

noVolume †
Object : Defines the user agent blocklist, which contains regular expressions, which cause the volume controls to be hidden if a match is found.

noVolume: {
  ipad: /ipad/,
  iphone: /iphone/,
  ipod: /ipod/,
  android_pad: /android(?!.*?mobile)/,
  android_phone: /android.*?mobile/,
  blackberry: /blackberry/,
  windows_ce: /windows ce/,
  iemobile: /iemobile/,
  webos: /webos/,
  playbook: /playbook/
}



--

Ken Rich
indiegospel.net

updated by @ken-rich: 12/23/14 02:14:00PM
brian
@brian
11 years ago
10,148 posts
No - don't use that, that's not going to help ;)

What skin are you test with so I can test it here?

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Ken Rich
Ken Rich
@ken-rich
11 years ago
926 posts
I am using Ningja in profiles, Elastic in Admin, NingNova2 in Active.

I can't put Ningja in Admin, because it creates CSS issues with NingNova2.


--

Ken Rich
indiegospel.net
brian
@brian
11 years ago
10,148 posts
I'm only going to focus on Ningja then, which is where the players would be. Is there a reason why you don't run Ningja in the ACP? That would at least let you simplify a little bit..

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Ken Rich
Ken Rich
@ken-rich
11 years ago
926 posts
Hi Brian,

As I indicated above, I can't run Ningja in the admin section (ACP) because it messes with the CSS in NingNova2.

I don't know what the technical term is, but I call it "cross-pollination" of the CSS.

Link colors change and block titles are effected in such a way as to put a flat rectangle in the 3D headers.

I haven't had a chance to investigate, but Paul mentioned that one is not supposed to effect the other like that. That is something Jamroom has a checking process for, if I am understanding correctly.

BTW - Merry Christmas...


--

Ken Rich
indiegospel.net
brian
@brian
11 years ago
10,148 posts
Ken_Rich:
Hi Brian,

As I indicated above, I can't run Ningja in the admin section (ACP) because it messes with the CSS in NingNova2.

I don't know what the technical term is, but I call it "cross-pollination" of the CSS.

Link colors change and block titles are effected in such a way as to put a flat rectangle in the 3D headers.

I haven't had a chance to investigate, but Paul mentioned that one is not supposed to effect the other like that. That is something Jamroom has a checking process for, if I am understanding correctly.

BTW - Merry Christmas...

Merry Christmas to you as well!

Jamroom has no checking for it - unfortunately your "on your own" in this regard since we don't design Jamroom to be run like you're running it.

Sorry!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
Ken Rich
Ken Rich
@ken-rich
11 years ago
926 posts
OK - I must have misunderstood Paul. No worries, I'll get to it eventually. I just got a couple other things higher up on the list.


--

Ken Rich
indiegospel.net
Ken Rich
Ken Rich
@ken-rich
11 years ago
926 posts
brian:
I'm only going to focus on Ningja then, which is where the players would be. Is there a reason why you don't run Ningja in the ACP? That would at least let you simplify a little bit..

Thanks!

I managed to overcome the CSS difficulties and now have Ningja running in both admin and profile sections, with NingNova in theactive sectin.

Some internal and inline CSS with "!important" resolved the issues. Still no volume showing on mobile players though.


--

Ken Rich
indiegospel.net

updated by @ken-rich: 12/29/14 05:35:20PM