Skip to content
GitLab
Menu
Projects
Groups
Snippets
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
Menu
Open sidebar
Simon Daron
panikweb
Commits
379bb8ea
Commit
379bb8ea
authored
Aug 30, 2013
by
Simon Daron
Browse files
give the player the hability to keep focus on sound when closing browser etc...
parent
760ad2b2
Changes
5
Hide whitespace changes
Inline
Side-by-side
panikweb_templates/static/css/specifics.css
View file @
379bb8ea
...
...
@@ -278,36 +278,31 @@ body{
#player-container
{
background-color
:
#ff6633
;
border-color
:
#fff
;
color
:
white
!important
;}
#player-container
*
{
border-color
:
#fff
;
color
:
white
!important
;
background-color
:
transparent
;}
#player-container
.metas
,
#player-container
img
{
border-color
:
#fff
;}
#player-container
.metas
{
padding-left
:
0.5em
;
border-width
:
0
0
0
2px
;
border-style
:
solid
;}
#player-container
.padded
{
padding
:
1em
;}
#player-container
{
fon-size
:
90%
;
border-top
:
2px
solid
black
;
border-bottom
:
2px
solid
black
;
}
#player
#CurrentlyPlaying
{
margin-top
:
0.5em
;
font-size
:
0.8em
;
}
#player-container
.fixed
{
z-index
:
500
;
position
:
fixed
;
width
:
100%
;
top
:
2em
;
font-size
:
90%
;
}
#player-container
.fixed
.padded
{
padding
:
0.2em
;
font-size
:
90%
;
padding
:
0.5em
;
}
#Listen
.withPlaylist
#player-container
#audioPlayer
{
float
:
left
;
width
:
45%
;
padding-right
:
5%
;
width
:
50%
;
border-right
:
2px
solid
white
;
}
#Listen
.withPlaylist
#player-container
#Playlist
{
float
:
right
;
width
:
45%
;
margin-left
:
51%
;
text-align
:
left
;
}
#PlayerHelp
{
...
...
@@ -329,7 +324,8 @@ body{
#Playlist
{
}
#Playlist
button
{
font-size
:
1em
;
#Playlist
button
{
font-size
:
1em
;
}
#Playlist
.label
{
float
:
right
;
...
...
@@ -359,20 +355,25 @@ body{
#Playlist
.active
.title
{
font-weight
:
bold
;
}
#Playlist
[
data-player-focus
]
{
text-transform
:
uppercase
;
}
#player-container
#Playlist
ol
{
font-size
:
0.8em
;
}
#player-container
#Playlist
ol
{
margin-top
:
1em
;
margin-top
:
0.8em
;
clear
:
right
;
padding
:
0
0
0
2em
;
}
#player-container
#Playlist
ol
{
height
:
2
em
;
height
:
1.5
em
;
overflow
:
hidden
;
}
#player-container
#Playlist
ol
li
{
height
:
2em
!important
;
line-height
:
1.5em
;
padding
:
0
;
margin
:
0
;
}
#Playlist
ol
li
.title
{
max-width
:
70%
;
...
...
panikweb_templates/static/js/audioPlayer.js
View file @
379bb8ea
...
...
@@ -50,10 +50,10 @@
this
.
playlistContainer
.
find
(
'
audio
'
).
each
(
function
(){
thePlaylist
.
playlist
.
push
(
thePlaylist
.
jsonifyAudio
(
$
(
this
)));
});
this
.
savePlaylist
();
this
.
debugContainer
.
text
(
JSON
.
stringify
(
this
.
playlist
,
null
,
'
\t
'
)
);
this
.
savePlaylist
();
this
.
options
.
onUpdate
(
this
);
return
this
.
playlist
;
},
...
...
@@ -72,13 +72,24 @@
var
sound
=
{
source
:{},
title
:
audio
.
attr
(
'
title
'
),
id
:
audio
.
attr
(
'
id
'
)
id
:
audio
.
attr
(
'
id
'
),
focus
:
audio
.
attr
(
'
data-player-focus
'
)
};
audio
.
children
(
'
source
'
).
each
(
function
(){
sound
.
source
[
$
(
this
).
attr
(
'
type
'
)]
=
$
(
this
).
attr
(
'
src
'
);
});
return
sound
;
},
// Play next sound
setFocus
:
function
(
element
)
{
this
.
isActive
=
element
;
this
.
playlistContainer
.
find
(
'
li
'
).
each
(
function
(){
$
(
this
).
removeClass
(
'
active
'
);
$
(
this
).
find
(
'
audio
'
).
removeAttr
(
'
data-player-focus
'
);
});
this
.
isActive
.
addClass
(
'
active
'
).
find
(
'
audio
'
).
attr
(
'
data-player-focus
'
,
true
);
this
.
_update
();
},
// Transform JSON sound object to HTML container for playlist.
_htmlifyJsonSound
:
function
(
sound
)
{
var
container
=
$
(
'
<li>
'
);
...
...
@@ -90,9 +101,8 @@
audio
.
attr
(
'
title
'
,
sound
.
title
)
.
attr
(
'
data-origin
'
,
sound
.
id
)
.
on
(
'
play
'
,
function
(){
thePlaylist
.
isActive
=
container
;
thePlaylist
.
setFocus
(
container
)
;
container
.
addClass
(
'
playing
'
);
container
.
addClass
(
'
active
'
);
playpause
.
addClass
(
'
icon-pause
'
).
removeClass
(
'
icon-play
'
);
thePlaylist
.
playpause
.
removeClass
(
'
icon-play
'
).
addClass
(
'
icon-pause
'
);
thePlaylist
.
afterPlay
();
...
...
@@ -101,16 +111,13 @@
playpause
.
addClass
(
'
icon-play
'
).
removeClass
(
'
icon-pause
'
);
thePlaylist
.
playpause
.
removeClass
(
'
icon-pause
'
).
addClass
(
'
icon-play
'
);
}).
on
(
'
stop
'
,
function
(){
container
.
removeClass
(
'
active
'
);
$
(
this
).
trigger
(
'
pause
'
);
$
(
this
)[
0
].
currentTime
=
0
;
container
.
removeClass
(
'
active
'
);
}).
on
(
"
ended
"
,
function
(){
thePlaylist
.
playNext
();
}).
on
(
'
beforePause
'
,
function
(){
return
this
;
}).
on
(
'
beforePlay
'
,
function
(){
thePlaylist
.
playlistContainer
.
find
(
'
.active
'
).
removeClass
(
'
active
'
);
thePlaylist
.
pauseSounds
();
return
this
;
});
...
...
@@ -138,6 +145,7 @@
return
false
;
}});
container
.
append
(
controls
).
append
(
title
).
append
(
audio
);
if
(
sound
.
focus
){
thePlaylist
.
setFocus
(
container
);}
return
container
;
},
// Create a public method.
...
...
@@ -145,7 +153,7 @@
var
htmlAudio
=
this
.
_htmlifyJsonSound
(
this
.
jsonifyAudio
(
audio
));
this
.
playlistContainer
.
append
(
htmlAudio
);
this
.
isLastAdd
=
htmlAudio
;
if
(
!
this
.
isActive
){
this
.
isActive
=
this
.
isLastAdd
;}
if
(
!
this
.
isActive
){
this
.
setFocus
(
this
.
isLastAdd
)
;}
this
.
options
.
onAdd
(
this
);
if
(
success
){
success
();}
this
.
_update
();
...
...
@@ -155,7 +163,12 @@
this
.
controls
=
$
(
'
<div>
'
,{
class
:
'
playlistControls controls
'
});
this
.
toggleList
=
$
(
'
<button>
'
,{
class
:
"
icon-list
"
,
click
:
function
(){
thePlaylist
.
playlistContainer
.
toggle
();
}}).
hide
();
this
.
clearList
=
$
(
'
<button>
'
,{
class
:
"
icon-trash
"
,
click
:
function
(){
thePlaylist
.
playlistContainer
.
empty
();
thePlaylist
.
_update
();
}});
this
.
playpause
=
$
(
'
<button>
'
,{
class
:
"
icon-play
"
,
click
:
function
(){
thePlaylist
.
playPauseList
();
}});
...
...
@@ -168,7 +181,7 @@
this
.
previous
=
$
(
'
<button>
'
,{
class
:
"
icon-step-backward
"
,
click
:
function
(){
thePlaylist
.
playPrevious
();
}});
this
.
controls
.
append
(
this
.
toggleList
).
append
(
this
.
previous
).
append
(
this
.
stop
).
append
(
this
.
playpause
).
append
(
this
.
next
);
this
.
controls
.
append
(
this
.
toggleList
).
append
(
this
.
clearList
).
append
(
this
.
previous
).
append
(
this
.
stop
).
append
(
this
.
playpause
).
append
(
this
.
next
);
this
.
controlContainer
.
append
(
this
.
controls
);
return
true
;
},
...
...
@@ -183,24 +196,24 @@
// Play next sound
playPauseList
:
function
()
{
if
(
this
.
playpause
.
hasClass
(
'
icon-play
'
)){
if
(
this
.
playlistContainer
.
find
(
'
.active
'
)[
0
]
){
this
.
playlistContainer
.
find
(
'
.a
ctive
'
)
.
find
(
'
audio
'
).
trigger
(
'
beforePlay
'
).
trigger
(
'
play
'
);
if
(
this
.
isActive
){
this
.
isA
ctive
.
find
(
'
audio
'
).
trigger
(
'
beforePlay
'
).
trigger
(
'
play
'
);
}
else
{
this
.
playlistContainer
.
children
(
'
li
'
).
first
().
find
(
'
audio
'
).
trigger
(
'
beforePlay
'
).
trigger
(
'
play
'
);
}
}
else
{
this
.
playlistContainer
.
find
(
'
.a
ctive
'
)
.
find
(
'
audio
'
).
trigger
(
'
pause
'
);
this
.
isA
ctive
.
find
(
'
audio
'
).
trigger
(
'
pause
'
);
}
return
true
;
},
// Play next sound
playPrevious
:
function
()
{
this
.
playlistContainer
.
find
(
'
.a
ctive
'
)
.
prev
().
find
(
'
audio
'
).
trigger
(
'
beforePlay
'
).
trigger
(
'
play
'
);
this
.
isA
ctive
.
prev
().
find
(
'
audio
'
).
trigger
(
'
beforePlay
'
).
trigger
(
'
play
'
);
return
true
;
},
// Play next sound
playNext
:
function
()
{
this
.
playlistContainer
.
find
(
'
.a
ctive
'
)
.
next
().
find
(
'
audio
'
).
trigger
(
'
beforePlay
'
).
trigger
(
'
play
'
);
this
.
isA
ctive
.
next
().
find
(
'
audio
'
).
trigger
(
'
beforePlay
'
).
trigger
(
'
play
'
);
return
true
;
},
// Pause all sounds.
...
...
panikweb_templates/static/js/specifics.js
View file @
379bb8ea
...
...
@@ -22,9 +22,10 @@ $(function() {
},
onAdd
:
function
(
self
){
//self.isLastAdd[0].scrollIntoView();
self
.
playlistContainer
.
scrollTo
(
self
.
isLastAdd
,
800
).
delay
(
1000
).
scrollTo
(
self
.
isActive
,
800
);
self
.
playlistContainer
.
scrollTo
(
self
.
isLastAdd
,
800
).
delay
(
1000
).
scrollTo
(
self
.
isActive
,
800
).
clearQueue
(
);
},
onUpdate
:
function
(
self
){
onUpdate
:
function
(
self
){
//doLog(JSON.stringify(self.playlist, null, '\t'));
if
(
self
.
playlist
.
length
>=
1
){
self
.
element
.
show
();
$
(
'
#Listen
'
).
addClass
(
'
withPlaylist
'
);
...
...
panikweb_templates/templates/base.html
View file @
379bb8ea
...
...
@@ -4,7 +4,7 @@
<meta
charset=
"UTF-8"
/>
<title>
Radio Panik {% block title %}{% endblock %}
</title>
<meta
name=
"viewport"
content=
"width=device-width, initial-scale=1.0"
>
<link
rel=
"
shortcut
icon"
href=
"{{ STATIC_URL }}img/favicon.png"
type=
"image/png"
>
<link
rel=
"icon"
href=
"{{ STATIC_URL }}img/favicon.png"
type=
"image/png"
>
<link
rel=
"apple-touch-icon"
href=
"{{ STATIC_URL}}img/touch-icon.png"
>
<link
rel=
"apple-touch-icon-precomposed"
href=
"{{ STATIC_URL}}img/touch-icon.png"
>
<script
type=
"text/javascript"
src=
"{{ STATIC_URL }}js/jquery.js"
></script>
...
...
panikweb_templates/templates/includes/player.html
View file @
379bb8ea
...
...
@@ -3,7 +3,7 @@
<div
id=
"player"
class=
"wrapper cf"
>
<div
id=
"audioPlayer"
class=
"cf"
>
<div
class=
"padded"
>
<ul
class=
"metas custom right"
>
<ul
class=
"metas custom
inline
right"
>
<li><a
class=
"button resymbol icon-download inBlock"
title=
"Get the stream on your player!"
href=
"http://streaming.domainepublic.net:8000/radiopanik.ogg.m3u"
></a></li>
<!--<li><button class="icon-eye-open " title="Show/Hidden HTML5 audio player" onclick="$('#DirectStreamPanik').toggleClass('hidden');$(this).toggleClass('icon-eye-open icon-eye-close');return false;"></button></li>-->
<li><button
title=
"Need some help?"
onclick=
"$('#PlayerHelp').toggle();"
class=
"icon-question-sign"
></button></li>
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment