Skip to content

Commit 9655fde

Browse files
author
user
committed
Added SoundManager2 Support.
1 parent 80418a5 commit 9655fde

File tree

222 files changed

+20119
-18
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

222 files changed

+20119
-18
lines changed

‎SoundManager2/demo/360-player/360 button.psd

37.8 KB
Binary file not shown.

‎SoundManager2/demo/360-player/360-button-pause-light.gif

333 Bytes
Loading

‎SoundManager2/demo/360-player/360-button-pause-light.png

445 Bytes
Loading

‎SoundManager2/demo/360-player/360-button-pause.gif

333 Bytes
Loading

‎SoundManager2/demo/360-player/360-button-pause.png

440 Bytes
Loading

‎SoundManager2/demo/360-player/360-button-play-light.gif

442 Bytes
Loading

‎SoundManager2/demo/360-player/360-button-play-light.png

501 Bytes
Loading

‎SoundManager2/demo/360-player/360-button-play.gif

442 Bytes
Loading

‎SoundManager2/demo/360-player/360-button-play.png

487 Bytes
Loading

‎SoundManager2/demo/360-player/360player-visualization.css

+88
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
/* larger canvas, spectrum + EQ visualization and other items */
2+
3+
.ui360,
4+
.sm2-360ui {
5+
/* size of the container for the circle, etc. */
6+
width:256px;
7+
height:256px;
8+
}
9+
10+
.ui360 {
11+
position:relative;
12+
/* a little extra spacing */
13+
padding-top:1px;
14+
padding-bottom:1px;
15+
margin-bottom:-18px; /* approximate "line height" we want */
16+
padding-left:248px;
17+
margin-left:0px;
18+
background-position:22.6% 50%; /* (~109px) initial play button position */
19+
}
20+
21+
.ui360 a {
22+
font:14px "helvetica neue",helvetica,monaco,lucida,terminal,monospace;
23+
white-space:nowrap;
24+
line-height:256px;
25+
}
26+
27+
.sm2-360ui {
28+
margin-left:-256px;
29+
}
30+
31+
.ui360 .sm2-timing {
32+
line-height:256px;
33+
}
34+
35+
.ui360 .sm2-timing {
36+
font:bold 24px "helvetica neue",helvetica,monaco,lucida,terminal,monospace;
37+
color:#333;
38+
text-align:center;
39+
line-height:256px;
40+
text-indent:0px;
41+
}
42+
43+
.sm2-inline-list .ui360,
44+
.sm2-inline-list .sm2-360ui {
45+
margin-left:0px;
46+
}
47+
48+
.sm2-inline-list .ui360 {
49+
margin:8px 13px 7px 0px;
50+
padding-left:0px;
51+
background-position:50% 50%; /* initial play button position */
52+
}
53+
54+
.sm2-inline-list .sm2-360ui {
55+
border:1px solid #eee;
56+
}
57+
58+
.sm2-inline-list .ui360 a {
59+
position:absolute;
60+
left:0px;
61+
bottom:0px;
62+
margin-left:1px;
63+
width:100%; /* 2px padding in box */
64+
height:auto;
65+
font-size:x-small;
66+
padding:2px 0px;
67+
color:#999;
68+
line-height:15px;
69+
text-align:center;
70+
display:inline;
71+
-moz-border-radius:0px;
72+
-khtml-border-radius:0px;
73+
border-radius:0px;
74+
}
75+
76+
.sm2-inline-list .ui360 a:focus,
77+
.sm2-inline-list .ui360 a:active {
78+
background-color:transparent;
79+
}
80+
81+
/* Use a bigger loading image for this layout */
82+
83+
.ui360 .sm2-360ui.sm2_buffering .sm2-360btn,
84+
.ui360 .sm2-360ui.sm2_buffering .sm2-360btn:hover {
85+
background:transparent url(icon_loading_spinner_bigger.gif) no-repeat 50% 50%;
86+
opacity:0.5;
87+
visibility:visible;
88+
}

‎SoundManager2/demo/360-player/360player.css

+258
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,258 @@
1+
/* General warning: Beta-ish. Code could be a bit cleaner. */
2+
3+
.ui360,
4+
.ui360 * {
5+
position:relative;
6+
}
7+
8+
.ui360,
9+
.sm2-360ui {
10+
/* size of the container for the circle, etc. */
11+
width:50px;
12+
height:50px;
13+
}
14+
15+
.ui360 {
16+
position:relative;
17+
/* a little extra spacing */
18+
padding-top:1px;
19+
padding-bottom:1px;
20+
margin-bottom:-18px; /* approximate "line height" we want */
21+
padding-left:42px; /* 50px, with a few off - margin used for visualization UI */
22+
}
23+
24+
.ui360 a {
25+
line-height:50px;
26+
}
27+
28+
.sm2-360ui {
29+
margin-left:-50px;
30+
}
31+
32+
.ui360 {
33+
width:auto;
34+
}
35+
36+
.ui360,
37+
.ui360 * {
38+
vertical-align:middle;
39+
}
40+
41+
.sm2-360ui {
42+
position:relative;
43+
display:inline-block; /* firefox 3 et al */
44+
float:left; /* firefox 2 needs this, inline-block would work with fx3 and others */
45+
*float:left; /* IE 6+7 */
46+
*display:inline;
47+
*clear:left;
48+
}
49+
50+
.sm2-360ui.sm2_playing,
51+
.sm2-360ui.sm2_paused {
52+
/* bump on top when active */
53+
z-index:10;
54+
}
55+
56+
.ui360 a.sm2_link { /* this class added to playable links by SM2 */
57+
position:relative;
58+
}
59+
60+
.ui360 a {
61+
color:#000;
62+
text-decoration:none;
63+
}
64+
65+
.ui360 a,
66+
.ui360 a:hover,
67+
.ui360 a:focus {
68+
padding:2px;
69+
margin-left:-2px;
70+
margin-top:-2px;
71+
}
72+
73+
.ui360 a:hover,
74+
.ui360 a:focus {
75+
background:#eee;
76+
-moz-border-radius:3px;
77+
-webkit-border-radius:3px;
78+
-khtml-border-radius:3px;
79+
border-radius:3px;
80+
outline:none;
81+
}
82+
83+
.ui360 .sm2-canvas {
84+
position:absolute;
85+
left:0px;
86+
top:0px;
87+
}
88+
89+
.ui360 .sm2-timing {
90+
position:absolute;
91+
display:block;
92+
left:0px;
93+
top:0px;
94+
width:100%;
95+
height:100%;
96+
margin:0px;
97+
font:11px "helvetica neue",helvetica,monaco,lucida,terminal,monospace;
98+
color:#666;
99+
text-align:center;
100+
line-height:50px;
101+
}
102+
103+
.ui360 .sm2-timing.alignTweak {
104+
text-indent:1px; /* devious center-alignment tweak for Safari (might break things for others.) */
105+
}
106+
107+
.ui360 .sm2-cover {
108+
position:absolute;
109+
left:0px;
110+
top:0px;
111+
z-index:2;
112+
display:none;
113+
}
114+
115+
.ui360 .sm2-360btn {
116+
position:absolute;
117+
top:50%;
118+
left:50%;
119+
width:22px;
120+
height:22px;
121+
margin-left:-11px;
122+
margin-top:-11px;
123+
cursor:pointer;
124+
z-index:3;
125+
}
126+
127+
.ui360 .sm2-360btn-default {
128+
}
129+
130+
.ui360 .sm2-360data {
131+
display:inline-block;
132+
font-family:helvetica;
133+
}
134+
135+
.ui360 .sm2-360ui.sm2_playing .sm2-cover,
136+
.ui360 .sm2-360ui.sm2_paused .sm2-cover {
137+
display:block;
138+
}
139+
140+
/* this could be optimized a fair bit. */
141+
142+
.ui360,
143+
.ui360 .sm2-360btn-default {
144+
background:transparent url(360-button-play.png) no-repeat 50% 50%;
145+
_background:transparent url(360-button-play.gif) no-repeat 50% 50%; /* IE 6-only: special crap GIF */
146+
cursor:pointer;
147+
}
148+
149+
.ui360 {
150+
/*
151+
"fake" button shown before SM2 has started, non-JS/non-SM2 case etc.
152+
background image will be removed via JS, in threeSixyPlayer.init()
153+
*/
154+
background-position:6px 50%;
155+
}
156+
157+
.ui360 .sm2-360ui.sm2_paused .sm2-360btn {
158+
background:transparent url(360-button-play.png) no-repeat 50% 50%;
159+
_background:transparent url(360-button-play.gif) no-repeat 50% 50%;
160+
cursor:pointer;
161+
}
162+
163+
.ui360 .sm2-360btn-default:hover,
164+
.ui360 .sm2-360ui.sm2_paused .sm2-360btn:hover {
165+
background:transparent url(360-button-play-light.png) no-repeat 50% 50%;
166+
_background:transparent url(360-button-play.gif) no-repeat 50% 50%;
167+
cursor:pointer;
168+
}
169+
170+
.ui360 .sm2-360ui.sm2_playing .sm2-360btn:hover,
171+
.ui360 .sm2-360btn-playing:hover {
172+
background:transparent url(360-button-pause-light.png) no-repeat 50% 50%;
173+
_background:transparent url(360-button-pause-light.gif) no-repeat 50% 50%;
174+
cursor:pointer;
175+
}
176+
177+
178+
.ui360 .sm2-360ui.sm2_playing .sm2-timing {
179+
visibility:visible;
180+
}
181+
182+
.ui360 .sm2-360ui.sm2_buffering .sm2-timing {
183+
visibility:hidden;
184+
}
185+
186+
.ui360 .sm2-360ui .sm2-timing,
187+
.ui360 .sm2-360ui .sm2-360btn:hover + .sm2-timing,
188+
.ui360 .sm2-360ui.sm2_paused .sm2-timing {
189+
visibility:hidden;
190+
}
191+
192+
.ui360 .sm2-360ui.sm2_dragging .sm2-timing,
193+
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn:hover + .sm2-timing {
194+
/* paused + dragging */
195+
visibility:visible;
196+
}
197+
198+
.ui360 .sm2-360ui.sm2_playing .sm2-360btn,
199+
x.ui360 .sm2-360btn-playing,
200+
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn,
201+
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn:hover,
202+
.ui360 .sm2-360ui.sm2_dragging .sm2-360btn-playing:hover {
203+
/* don't let pause button show on hover when dragging (or paused and dragging) */
204+
background:transparent;
205+
cursor:auto;
206+
}
207+
208+
.ui360 .sm2-360ui.sm2_buffering .sm2-360btn,
209+
.ui360 .sm2-360ui.sm2_buffering .sm2-360btn:hover {
210+
background:transparent url(icon_loading_spinner.gif) no-repeat 50% 50%;
211+
opacity:0.5;
212+
visibility:visible;
213+
}
214+
215+
/* inline list style */
216+
217+
.sm2-inline-list .ui360,
218+
.sm2-inline-block .ui360 {
219+
position:relative;
220+
display:inline-block;
221+
float:left;
222+
_display:inline;
223+
margin-bottom:-15px;
224+
}
225+
226+
.sm2-inline-list .ui360 {
227+
margin-bottom:0px;
228+
}
229+
230+
.sm2-inline-block .ui360 {
231+
margin-right:8px;
232+
}
233+
234+
.sm2-inline-list .ui360 a {
235+
display:none;
236+
}
237+
238+
/* annotations */
239+
240+
ul.ui360playlist {
241+
list-style-type:none;
242+
}
243+
244+
ul.ui360playlist,
245+
ul.ui360playlist li {
246+
margin:0px;
247+
padding:0px;
248+
}
249+
250+
div.ui360 div.metadata {
251+
display:none;
252+
}
253+
254+
div.ui360 a span.metadata,
255+
div.ui360 a span.metadata * {
256+
/* name of track, note etc. */
257+
vertical-align:baseline;
258+
}

0 commit comments

Comments
 (0)