From 45ef2af142d05c1487ef94edb0223a2aeb2df219 Mon Sep 17 00:00:00 2001 From: Naomi Aro Date: Thu, 17 May 2012 17:53:01 +0200 Subject: [PATCH] CC-3420 : Custom UI for jplayer from CC-3395 --- .../airtime/audiopreview/preview_jplayer.js | 12 +- .../skin/jplayer.airtime.audio.preview.css | 183 ++---------------- 2 files changed, 25 insertions(+), 170 deletions(-) diff --git a/airtime_mvc/public/js/airtime/audiopreview/preview_jplayer.js b/airtime_mvc/public/js/airtime/audiopreview/preview_jplayer.js index cfcbe2c86..71f053a8f 100644 --- a/airtime_mvc/public/js/airtime/audiopreview/preview_jplayer.js +++ b/airtime_mvc/public/js/airtime/audiopreview/preview_jplayer.js @@ -50,6 +50,14 @@ $(document).ready(function(){ }else if (showID != "") { 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); play(p_playIndex); - var height = Math.min(80 + (23 * total), 400); + var height = Math.min(90 + (26 * total), 400); window.innerWidth = 500; window.innerHeight = height; window.scrollbars = true; @@ -171,5 +179,5 @@ function playOne(p_audioFileID) { _playlist_jplayer.play(0); window.innerWidth = 490; - window.innerHeight = 105; + window.innerHeight = 120; } \ No newline at end of file diff --git a/airtime_mvc/public/js/jplayer/skin/jplayer.airtime.audio.preview.css b/airtime_mvc/public/js/jplayer/skin/jplayer.airtime.audio.preview.css index 9fca01d98..b40407a19 100644 --- a/airtime_mvc/public/js/jplayer/skin/jplayer.airtime.audio.preview.css +++ b/airtime_mvc/public/js/jplayer/skin/jplayer.airtime.audio.preview.css @@ -23,6 +23,8 @@ span.showIndex { display:none; } +/* End of non-ui fields **/ + div.jp-audio, 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-family:Verdana, Arial, sans-serif; + font-family: Arial,Helvetica,sans-serif; line-height:1.6; - color: #666; - border:1px solid #009be3; - background-color:#eee; + color: #9B9B9B; position:relative; + border-color: #262526 #262526 #5E5E5E; + border-style: solid; + border-width: 1px; } div.jp-audio { @@ -126,7 +129,7 @@ div.jp-time-block { div.jp-progress { overflow:hidden; - background-color: #ddd; + background-color: #393939; } div.jp-audio div.jp-progress { height: 10px; @@ -223,7 +226,7 @@ div.jp-volume-bar-value { } div.jp-volume-max { - margin-left: 60px; + margin-left: 65px; } /* @end */ @@ -234,7 +237,6 @@ div.jp-current-time, div.jp-duration { width: 60px; font-size: 1em; - font-family: Arial,Helvetica,sans-serif; } div.jp-current-time { float: left; @@ -260,8 +262,7 @@ div.jp-title { div.jp-title, div.jp-playlist { width:100%; - background-color:#ccc; - border-top:1px solid #009be3; + background-color: #D8D8D8; } div.jp-type-single div.jp-title, div.jp-type-playlist div.jp-title, @@ -273,7 +274,6 @@ div.jp-playlist ul { list-style-type:none; margin:0; padding:0 20px; - font-size:.72em; } div.jp-title li { @@ -296,8 +296,6 @@ div.jp-type-playlist div.jp-playlist li:last-child { border-bottom:none; } div.jp-type-playlist div.jp-playlist li.jp-playlist-current { - list-style-type:square; - list-style-position:inside; padding-left:7px; } div.jp-type-playlist div.jp-playlist a { @@ -305,50 +303,19 @@ div.jp-type-playlist div.jp-playlist a { text-decoration: none; } div.jp-type-playlist div.jp-playlist a:hover { - color:#0d88c1; + color:#9B9B9B; } div.jp-type-playlist div.jp-playlist a.jp-playlist-current { - color:#0d88c1; -} - -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; + color: #FF6F01; } span.jp-artist { - font-size:.8em; - color:#666; + font-size: 90%; + color:#9B9B9B; + margin-left: 5px; } /* @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 { height:270px; } @@ -359,27 +326,6 @@ div.jp-video-full div.jp-video-play { height:100%; 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 { @@ -391,105 +337,6 @@ div.jp-jplayer { 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 */ .jp-no-solution {