Creating a 360 mp3 player(progress bar in a circular shape)

[koolaid]

I was just wondering if anyone has a theme where the progress bar is
in a circle and you can seek through the track by clicking on
different parts of the circular bar. Or if it is even possible to
make a theme where the progress bar goes in a circle similar to Sound
Manager 2(http://www.schillmania.com/projects/soundmanager2/demo/360-
player/), without having to edit the jquery code itself. I feel this
would make the player easier to use on small touch screen phones such
as iphones and androids.

[Mark Panaghiston]

You mean like on the jplayer.org homepage?

https://github.com/maboa/circleplayer

Online demo of is also here:
http://happyworm.com/jPlayerLab/circleplayer/v13/

[koolaid]

yes Thank you!!, that was pretty much exactly what i was looking for.
Now the only problem now is when I include my senchatouch css file the
background image of the player gets messed up as you can see here
http://cheezecurds.com/cp/ , I am currently looking into the issue
myself.

On a side note are is it possible to get the psd skins for this theme?


On Aug 9, 2:38 pm, Mark Panaghiston <mark.panaghis...@gmail.com>
wrote:

[Mark Panaghiston]

I don't appear to have the PSD files. Maboa did the original prototype for the Circle Player. I expect that he has them... But he is on holiday this week. I took the prototype and did a major review in May/June for cross-browser and made it an object so you can instance it easily on the page.

I am not sure what I am looking for in your link above. It looked ok to me in Firefox 5.

[koolaid]

it does still working in Firefox 5 for some reason but in
Chrome(13.0.782.112), IE 9, and on my IPhone 4 running iOS 4.1.

this is a screenshot of what i see in the other browsers http://xs.to/media/85935

On Aug 9, 8:02 pm, Mark Panaghiston <mark.panaghis...@gmail.com>
wrote:

[koolaid]

i meant it doesn't work for me in Chrome(13.0.782.112), IE 9, and on
my IPhone 4 running iOS 4.1. and i see http://xs.to/media/85935 in
all of those browsers

[koolaid]

So i found the problem it has to do with a few lines in the sencha
touch css. I tried to exclude the jplayer tags using " *:not(.cp-
container, .cp-jplayer, .cp-buffer-holder, .cp-circle-control)", doing
this seems to work but it also doesn't seem to apply the css to the
rest of the document. any ideas on how to fix this issue?

*, *:after, *:before {
-webkit-box-sizing: border-box;
box-sizing: border-box;
-webkit-user-select: none;
-webkit-text-size-adjust: none;
-webkit-touch-callout: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

[Mark Panaghiston]

Your link to the screen grab does not work.

Looking in Chrome, it appears to be the box-sizing:border-box; that is screwing it up.

Your "not" CSS looks incomplete. You would need to apply the not to the *:after and *:before too somehow.

An alternative would be to add to the circle player CSS the rule that returns the box-sizing to the default, whatever that is. Just make sure the rule is more specific that the *, which I doubt is hard.

http://www.w3schools.com/cssref/css3_pr_box-sizing.asp

List all the circle player classes... I just listed 2:

.cp-container,
.cp-jplayer {
  box-sizing:content-box;
}

If that is not specific enough... use div.cp-container... But It looks like you understand CSS so should know what I mean.

[koolaid]

Thanks!!, it displays correctly now, I added "-webkit-box-sizing:
content-box;" as well.

Now the only other problem is the play and pause icon appear to far
to the left, to fix this I added "margin-left:5px;" to ".cp-controls
li a", I haven't had a chance to test it in other browsers(cause i
don't have my laptop with me) but it works on my IPhone

[Mark Panaghiston]

That's great.

I looked in Firefox 5 and Chrome and the icons are now a bit to the right. Also on my iPhone it was a bit to the right. (iOS 4.3.5)

I was checking this link:
http://cheezecurds.com/cp/

[koolaid]

yeah its only need for sencha touch it must be something the
javascript does when it loads, but i mean when i use it in my app it
works/looks normal in all web-kit browsers because that's all sencha
touch supports.

[koolaid]

yeah the 5px only has to be done when you actually have a sencha touch
app loaded, so it must be something with the ajax in sencha touch.

On the other hand I know Maboa is on holiday at the moment but how
would I go about contacting him about the psd files.

[Mark Panaghiston]

Maboa reads this group. I tend to answer the questions, since I know the fine details better.

I suggest that you make a new post with a nice clear title asking for the circle player psd files.

I will be on holiday next week myself. I will try and review the support group at least once a day too.

[Maboa]

koolaid - I will send you the PSD (which I assume we have in our Italian office somewhere) when I get back to Italy next week.

If I forget feel free to ping me at ma...@happyworm.com

Mark P - maybe we should add this to the github repo for others.

Cheers

Mark B

[Maboa]

email = markb at happyworm.com