Congegni/sintonia
7
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

CC-3420 : Custom UI for jplayer from CC-3395

Browse source
This commit is contained in:
Naomi Aro 2012-05-17 17:53:01 +02:00
parent ccbe4f1998
commit 45ef2af142
2 changed files with 25 additions and 170 deletions
Download patch file Download diff file Expand all files Collapse all files

12
airtime_mvc/public/js/airtime/audiopreview/preview_jplayer.js
View file

@ -50,6 +50,14 @@ $(document).ready(function(){
}else if (showID != "") { }else if (showID != "") {
playAllShow(showID, showIndex); playAllShow(showID, showIndex);
} }
$("#jp_container_1").on("mouseenter", "ul.jp-controls li", function(ev) {
$(this).addClass("ui-state-hover");
});
$("#jp_container_1").on("mouseleave", "ul.jp-controls li", function(ev) {
$(this).removeClass("ui-state-hover");
});
}); });
/** /**
@ -124,7 +132,7 @@ function buildplaylist(p_url, p_playIndex) {
_playlist_jplayer.option("autoPlay", true); _playlist_jplayer.option("autoPlay", true);
play(p_playIndex); play(p_playIndex);
var height = Math.min(80 + (23 * total), 400); var height = Math.min(90 + (26 * total), 400);
window.innerWidth = 500; window.innerWidth = 500;
window.innerHeight = height; window.innerHeight = height;
window.scrollbars = true; window.scrollbars = true;
@ -171,5 +179,5 @@ function playOne(p_audioFileID) {
_playlist_jplayer.play(0); _playlist_jplayer.play(0);
window.innerWidth = 490; window.innerWidth = 490;
window.innerHeight = 105; window.innerHeight = 120;
} }

183
airtime_mvc/public/js/jplayer/skin/jplayer.airtime.audio.preview.css
View file

@ -23,6 +23,8 @@ span.showIndex {
display:none; display:none;
} }
/* End of non-ui fields **/
div.jp-audio, div.jp-audio,
div.jp-video { div.jp-video {
@ -32,12 +34,13 @@ div.jp-video {
font-size:1em; /* 1.25em for testing in site pages */ /* No parent CSS that can effect the size in the demos ZIP */ font-size:1em; /* 1.25em for testing in site pages */ /* No parent CSS that can effect the size in the demos ZIP */
font-family:Verdana, Arial, sans-serif; font-family: Arial,Helvetica,sans-serif;
line-height:1.6; line-height:1.6;
color: #666; color: #9B9B9B;
border:1px solid #009be3;
background-color:#eee;
position:relative; position:relative;
border-color: #262526 #262526 #5E5E5E;
border-style: solid;
border-width: 1px;
} }
div.jp-audio { div.jp-audio {
@ -126,7 +129,7 @@ div.jp-time-block {
div.jp-progress { div.jp-progress {
overflow:hidden; overflow:hidden;
background-color: #ddd; background-color: #393939;
} }
div.jp-audio div.jp-progress { div.jp-audio div.jp-progress {
height: 10px; height: 10px;
@ -223,7 +226,7 @@ div.jp-volume-bar-value {
} }
div.jp-volume-max { div.jp-volume-max {
margin-left: 60px; margin-left: 65px;
} }
/* @end */ /* @end */
@ -234,7 +237,6 @@ div.jp-current-time,
div.jp-duration { div.jp-duration {
width: 60px; width: 60px;
font-size: 1em; font-size: 1em;
font-family: Arial,Helvetica,sans-serif;
} }
div.jp-current-time { div.jp-current-time {
float: left; float: left;
@ -260,8 +262,7 @@ div.jp-title {
div.jp-title, div.jp-title,
div.jp-playlist { div.jp-playlist {
width:100%; width:100%;
background-color:#ccc; background-color: #D8D8D8;
border-top:1px solid #009be3;
} }
div.jp-type-single div.jp-title, div.jp-type-single div.jp-title,
div.jp-type-playlist div.jp-title, div.jp-type-playlist div.jp-title,
@ -273,7 +274,6 @@ div.jp-playlist ul {
list-style-type:none; list-style-type:none;
margin:0; margin:0;
padding:0 20px; padding:0 20px;
font-size:.72em;
} }
div.jp-title li { div.jp-title li {
@ -296,8 +296,6 @@ div.jp-type-playlist div.jp-playlist li:last-child {
border-bottom:none; border-bottom:none;
} }
div.jp-type-playlist div.jp-playlist li.jp-playlist-current { div.jp-type-playlist div.jp-playlist li.jp-playlist-current {
list-style-type:square;
list-style-position:inside;
padding-left:7px; padding-left:7px;
} }
div.jp-type-playlist div.jp-playlist a { div.jp-type-playlist div.jp-playlist a {
@ -305,50 +303,19 @@ div.jp-type-playlist div.jp-playlist a {
text-decoration: none; text-decoration: none;
} }
div.jp-type-playlist div.jp-playlist a:hover { div.jp-type-playlist div.jp-playlist a:hover {
color:#0d88c1; color:#9B9B9B;
} }
div.jp-type-playlist div.jp-playlist a.jp-playlist-current { div.jp-type-playlist div.jp-playlist a.jp-playlist-current {
color:#0d88c1; color: #FF6F01;
}
div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove {
float:right;
display:inline;
text-align:right;
margin-right:10px;
font-weight:bold;
color:#666;
}
div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove:hover {
color:#0d88c1;
}
div.jp-type-playlist div.jp-playlist span.jp-free-media {
float:right;
display:inline;
text-align:right;
margin-right:10px;
}
div.jp-type-playlist div.jp-playlist span.jp-free-media a{
color:#666;
}
div.jp-type-playlist div.jp-playlist span.jp-free-media a:hover{
color:#0d88c1;
} }
span.jp-artist { span.jp-artist {
font-size:.8em; font-size: 90%;
color:#666; color:#9B9B9B;
margin-left: 5px;
} }
/* @end */ /* @end */
div.jp-video-play {
position:absolute;
top:0;
left:0;
width:100%;
cursor:pointer;
background-color:rgba(0,0,0,0); /* Makes IE9 work with the active area over the whole video area. IE6/7/8 only have the button as active area. */
}
div.jp-video-270p div.jp-video-play { div.jp-video-270p div.jp-video-play {
height:270px; height:270px;
} }
@ -359,27 +326,6 @@ div.jp-video-full div.jp-video-play {
height:100%; height:100%;
z-index:1000; z-index:1000;
} }
a.jp-video-play-icon {
position:relative;
display:block;
width: 112px;
height: 100px;
margin-left:-56px;
margin-top:-50px;
left:50%;
top:50%;
background: url("jplayer.blue.monday.video.play.png") 0 0 no-repeat;
text-indent:-9999px;
}
div.jp-video-play:hover a.jp-video-play-icon {
background: url("jplayer.blue.monday.video.play.png") 0 -100px no-repeat;
}
div.jp-jplayer audio, div.jp-jplayer audio,
div.jp-jplayer { div.jp-jplayer {
@ -391,105 +337,6 @@ div.jp-jplayer {
background-color: #000000; background-color: #000000;
} }
/* @group TOGGLES */
/* The audio toggles are nested inside jp-time-holder */
ul.jp-toggles {
list-style-type:none;
padding:0;
margin:0 auto;
overflow:hidden;
}
div.jp-audio .jp-type-single ul.jp-toggles {
width:25px;
}
div.jp-audio .jp-type-playlist ul.jp-toggles {
width:55px;
margin: 0;
position: absolute;
left: 325px;
top: 50px;
}
div.jp-video ul.jp-toggles {
margin-top:10px;
width:100px;
}
ul.jp-toggles li {
display:block;
float:right;
}
ul.jp-toggles li a {
display:block;
width:25px;
height:18px;
text-indent:-9999px;
line-height:100%; /* need this for IE6 */
}
a.jp-full-screen {
background: url("jplayer.blue.monday.jpg") 0 -310px no-repeat;
margin-left: 20px;
}
a.jp-full-screen:hover {
background: url("jplayer.blue.monday.jpg") -30px -310px no-repeat;
}
a.jp-restore-screen {
background: url("jplayer.blue.monday.jpg") -60px -310px no-repeat;
margin-left: 20px;
}
a.jp-restore-screen:hover {
background: url("jplayer.blue.monday.jpg") -90px -310px no-repeat;
}
a.jp-repeat {
background: url("jplayer.blue.monday.jpg") 0 -290px no-repeat;
}
a.jp-repeat:hover {
background: url("jplayer.blue.monday.jpg") -30px -290px no-repeat;
}
a.jp-repeat-off {
background: url("jplayer.blue.monday.jpg") -60px -290px no-repeat;
}
a.jp-repeat-off:hover {
background: url("jplayer.blue.monday.jpg") -90px -290px no-repeat;
}
a.jp-shuffle {
background: url("jplayer.blue.monday.jpg") 0 -270px no-repeat;
margin-left: 5px;
}
a.jp-shuffle:hover {
background: url("jplayer.blue.monday.jpg") -30px -270px no-repeat;
}
a.jp-shuffle-off {
background: url("jplayer.blue.monday.jpg") -60px -270px no-repeat;
margin-left: 5px;
}
a.jp-shuffle-off:hover {
background: url("jplayer.blue.monday.jpg") -90px -270px no-repeat;
}
/* @end */
/* @group NO SOLUTION error feedback */ /* @group NO SOLUTION error feedback */
.jp-no-solution { .jp-no-solution {