diff --git a/airtime_mvc/application/controllers/PlaylistController.php b/airtime_mvc/application/controllers/PlaylistController.php index a0911f636..b68a280ff 100644 --- a/airtime_mvc/application/controllers/PlaylistController.php +++ b/airtime_mvc/application/controllers/PlaylistController.php @@ -15,7 +15,7 @@ class PlaylistController extends Zend_Controller_Action ->addActionContext('new', 'json') ->addActionContext('edit', 'json') ->addActionContext('delete', 'json') - ->addActionContext('play', 'json') + ->addActionContext('play', 'json') ->addActionContext('set-playlist-fades', 'json') ->addActionContext('get-playlist-fades', 'json') ->addActionContext('set-playlist-name', 'json') @@ -112,10 +112,10 @@ class PlaylistController extends Zend_Controller_Action $baseUrl = $request->getBaseUrl(); $this->view->headScript()->appendFile($baseUrl.'/js/airtime/library/spl.js?'.$CC_CONFIG['airtime_version'],'text/javascript'); - $this->view->headScript()->appendFile($baseUrl.'/js/airtime/library/playlist_jplayer_preview.js?'.filemtime($baseDir.'/js/airtime/library/playlist_jplayer_preview.js'), 'text/javascript'); - $this->view->headLink()->appendStylesheet($baseUrl.'/css/playlist_builder.css?'.$CC_CONFIG['airtime_version']); + $this->view->headScript()->appendFile($baseUrl.'/js/airtime/library/preview.js?'.filemtime($baseDir.'/js/airtime/library/preview.js'), 'text/javascript'); + $this->view->headLink()->appendStylesheet($baseUrl.'/css/playlist_builder.css?'.$CC_CONFIG['airtime_version']); - $this->_helper->viewRenderer->setResponseSegment('spl'); + $this->_helper->viewRenderer->setResponseSegment('spl'); try { if (isset($this->pl_sess->id)) { @@ -199,18 +199,20 @@ class PlaylistController extends Zend_Controller_Action public function audioPreviewPlayerAction() { - Logging::log("PlaylistControler::in the play action"); - - $fileName = $this->_getParam('elementFilename'); - $playlistIndex = $this->_getParam('elemIndexString'); - - $request = $this->getRequest(); + Logging::log("PlaylistControler::in the play action"); + + $fileName = $this->_getParam('filename'); + $playlistIndex = $this->_getParam('index'); + + $request = $this->getRequest(); $baseUrl = $request->getBaseUrl(); $baseDir = dirname($_SERVER['SCRIPT_FILENAME']); - - $this->view->headScript()->appendFile($baseUrl.'/js/airtime/library/playlist_jplayer_preview.js?'.filemtime($baseDir.'/js/airtime/library/playlist_jplayer_preview.js'),'text/javascript'); + + $this->view->headScript()->appendFile($baseUrl.'/js/airtime/library/preview_jplayer.js?'.filemtime($baseDir.'/js/airtime/library/preview_jplayer.js'),'text/javascript'); + $this->view->headScript()->appendFile($baseUrl.'/js/jplayer/jquery.jplayer.min.js?'.filemtime($baseDir.'/js/jplayer/jquery.jplayer.min.js'),'text/javascript'); + //$this->view->headScript()->appendFile($baseUrl.'/js/jplayer/jquery.jplayer.inspector.js?'.filemtime($baseDir.'/js/jplayer/jquery.jplayer.inspector.js'),'text/javascript'); $this->view->headLink()->appendStylesheet($baseUrl.'/js/jplayer/skin/jplayer.blue.monday.css?'.filemtime($baseDir.'/js/jplayer/skin/jplayer.blue.monday.css')); - $this->_helper->layout->setLayout('bare'); + $this->_helper->layout->setLayout('audioPlayer'); $logo = Application_Model_Preference::GetStationLogo(); if($logo){ @@ -218,8 +220,8 @@ class PlaylistController extends Zend_Controller_Action } else { $this->view->logo = "$baseUrl/css/images/airtime_logo_jp.png"; } - $this->view->fileName = $fileName; - $this->view->playlistIndex= $playlistIndex; + $this->view->fileName = $fileName; + $this->view->playlistIndex= $playlistIndex; } public function addItemsAction() diff --git a/airtime_mvc/application/models/StoredFile.php b/airtime_mvc/application/models/StoredFile.php index 83a0bf068..fe9515ed2 100644 --- a/airtime_mvc/application/models/StoredFile.php +++ b/airtime_mvc/application/models/StoredFile.php @@ -395,6 +395,7 @@ class Application_Model_StoredFile { } private function constructGetFileUrl($p_serverName, $p_serverPort){ +Logging::log("getting media! - 2"); return "http://$p_serverName:$p_serverPort/api/get-media/file/".$this->getGunId().".".$this->getFileExtension(); } @@ -404,6 +405,7 @@ class Application_Model_StoredFile { */ public function getRelativeFileUrl($baseUrl) { + Logging::log("getting media!"); return $baseUrl."/api/get-media/file/".$this->getGunId().".".$this->getFileExtension(); } @@ -656,7 +658,8 @@ class Application_Model_StoredFile { if($type == "au") { $audioFile = $audioResults[$row['id']-1]['gunid'].".".pathinfo($audioResults[$row['id']-1]['filepath'], PATHINFO_EXTENSION); - $row['image'] = ''; + $row['image'] = ''; + } else { $row['image'] = ''; diff --git a/airtime_mvc/application/views/scripts/playlist/audio-preview-player.phtml b/airtime_mvc/application/views/scripts/playlist/audio-preview-player.phtml new file mode 100644 index 000000000..ab33c2eca --- /dev/null +++ b/airtime_mvc/application/views/scripts/playlist/audio-preview-player.phtml @@ -0,0 +1,33 @@ +
+ fileName" ?> +
+
+ \ No newline at end of file diff --git a/airtime_mvc/public/js/jplayer/skin/jplayer.blue.monday.css b/airtime_mvc/public/js/jplayer/skin/jplayer.blue.monday.css index d8ed35bc1..78db55abd 100644 --- a/airtime_mvc/public/js/jplayer/skin/jplayer.blue.monday.css +++ b/airtime_mvc/public/js/jplayer/skin/jplayer.blue.monday.css @@ -1 +1,623 @@ -@charset "utf-8";/* * Skin for jPlayer Plugin (jQuery JavaScript Library) * http://www.happyworm.com/jquery/jplayer * * Skin Name:Blue Monday * * Copyright (c) 2010 Happyworm Ltd * Dual licensed under the MIT and GPL licenses. * - http://www.opensource.org/licenses/mit-license.php * - http://www.gnu.org/copyleft/gpl.html * * Author:Silvia Benvenuti * Skin Version:3.0 (jPlayer 2.0.0) * Date:20th December 2010 */.jp-container{background:#282828; height:100%; margin:0; padding:0;width:400px;position:relative}.jp-container h1{ color:#CCC; font-size:20px; font-weight:normal; margin:0; padding:8px 0; position:absolute; right:16px; text-align:center; text-shadow:0 -1px 1px #000; top:12px}.jp-logo{width:400px;height:67px; background:#282828 no-repeat 120px 14px;background:no-repeat 120px 14px,-moz-radial-gradient(200px 0px,circle cover,rgba(70,70,70,1) 0%,rgba(40,40,40,1) 90%);background:no-repeat 120px 14px,-webkit-radial-gradient(170px 20px,rgba(70,70,70,1) 0%,rgba(40,40,40,1) 70%);display:block}.jp-logo img{ display:block; display:block; padding:14px 0 0 16px}.jp-stream{height:27px;display:block;border-top:1px solid #050505;color:#ff5d1a;font-size:12px;padding:6px 4px 4px 16px;background:#313131;background:-moz-linear-gradient(top,#292929 0,#3a3a3a 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#292929),color-stop(100%,#3a3a3a));box-shadow:rgba(248,248,248,.3) 0px 1px 0px,rgba(0,0,0,0.2) 0 2px 2px inset;-moz-box-shadow:rgba(0,0,0,0.7) 0 0 5px inset;-webkit-box-shadow:rgba(0,0,0,0.7) 0 0 5px inset;line-height:23px}.jp-stream-text,.jp-stream form{float:left}.jp-stream form{margin-left:10px;width:283px}.jp-stream label{color:#ababab;padding:0 10px 0 0;font-size:12px}.jp-stream label input[type="radio"]{}.jp-stream form input[type="text"],.jp-stream form select{ background-color:#212121; border:1px solid #1a1a1a; box-shadow:inset 0 2px 2px rgba(0,0,0,0.5);-moz-box-shadow:inset 0 2px 2px rgba(0,0,0,0.5);-webkit-box-shadow:inset 0 2px 2px rgba(0,0,0,0.5); color:#767676; font-family:Arial,Helvetica,sans-serif; font-size:12px; height:25px; margin:0; padding:2px 2px 2px 0; vertical-align:top;width:100%}div.jp-audio,div.jp-video{/* Edit the font-size to counteract inherited font sizing. * Eg. 1.25em = 1 / 0.8em */font-size:1em;/* No parent CSS that can effect the size in these demos */font-family:Verdana,Arial,sans-serif;line-height:1.6;color:#666}div.jp-audio{/*width:180px;*/}div.jp-video-270p{width:480px}div.jp-video-360p{width:640px}div.jp-interface{position:relative;background-color:#3D3D3D;background:-moz-linear-gradient(top,#4e4e4e 0,#3a3a3a 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#4e4e4e),color-stop(100%,#3a3a3a));width:100%;border-top:1px solid #5a5a5a;border-bottom:1px solid #1a1a1a}div.jp-audio div.jp-type-single div.jp-interface{height:70px}div.jp-audio div.jp-type-playlist div.jp-interface{height:80px}div.jp-video div.jp-type-single div.jp-interface{height:60px;border-bottom:none}div.jp-video div.jp-type-playlist div.jp-interface{height:60px}div.jp-interface ul.jp-controls{list-style-type:none;padding:0;margin:0}div.jp-interface ul.jp-controls li{/* position:absolute;*/display:inline}div.jp-interface ul.jp-controls a{position:absolute;overflow:hidden;text-indent:-9999px}a.jp-play,a.jp-pause{width:75px;height:40px;z-index:1}div.jp-audio div.jp-type-single a.jp-play,div.jp-audio div.jp-type-single a.jp-pause{top:15px;left:15px}div.jp-audio div.jp-type-playlist a.jp-play,div.jp-audio div.jp-type-playlist a.jp-pause{top:20px;left:48px}div.jp-video a.jp-play,div.jp-video a.jp-pause{top:15px}div.jp-video-270p div.jp-type-single a.jp-play,div.jp-video-270p div.jp-type-single a.jp-pause{left:195px}div.jp-video-270p div.jp-type-playlist a.jp-play,div.jp-video-270p div.jp-type-playlist a.jp-pause{left:220px}div.jp-video-360p div.jp-type-single a.jp-play,div.jp-video-360p div.jp-type-single a.jp-pause{left:275px}div.jp-video-360p div.jp-type-playlist a.jp-play,div.jp-video-360p div.jp-type-playlist a.jp-pause{left:300px}a.jp-play{background:url(jplayer.png) 0 0 no-repeat}a.jp-play:hover{background:url(jplayer.png) -75px 0 no-repeat}a.jp-pause{background:url(jplayer.png) 0 -40px no-repeat;display:none}a.jp-pause:hover{background:url(jplayer.png) -75px -40px no-repeat}div.jp-audio div.jp-type-single a.jp-stop{top:26px;left:90px}div.jp-audio div.jp-type-playlist a.jp-stop{top:26px;left:126px}div.jp-video a.jp-stop{top:21px}div.jp-video-270p div.jp-type-single a.jp-stop{left:245px}div.jp-video-270p div.jp-type-playlist a.jp-stop{left:298px}div.jp-video-360p div.jp-type-single a.jp-stop{left:325px}div.jp-video-360p div.jp-type-playlist a.jp-stop{left:378px}a.jp-stop{background:url(jplayer.png) 0 -83px no-repeat;width:28px;height:28px;z-index:1}a.jp-stop:hover{background:url(jplayer.png) -29px -83px no-repeat}div.jp-audio div.jp-type-playlist a.jp-previous{left:20px;top:26px}div.jp-video div.jp-type-playlist a.jp-previous{top:21px}div.jp-video-270p div.jp-type-playlist a.jp-previous{left:192px}div.jp-video-360p div.jp-type-playlist a.jp-previous{left:272px}a.jp-previous{background:url(jplayer.png) 0 -112px no-repeat;width:28px;height:28px}a.jp-previous:hover{background:url(jplayer.png) -29px -112px no-repeat}div.jp-audio div.jp-type-playlist a.jp-next{left:88px;top:26px}div.jp-video div.jp-type-playlist a.jp-next{top:21px}div.jp-video-270p div.jp-type-playlist a.jp-next{left:260px}div.jp-video-360p div.jp-type-playlist a.jp-next{left:340px}a.jp-next{background:url(jplayer.png) 0 -141px no-repeat;width:28px;height:28px}a.jp-next:hover{background:url(jplayer.png) -29px -141px no-repeat}div.jp-progress{position:absolute;overflow:hidden;background-color:#ddd}div.jp-audio div.jp-type-single div.jp-progress{top:32px;left:130px;width:122px;height:15px}div.jp-audio div.jp-type-playlist div.jp-progress{top:32px;left:164px;width:122px;height:15px}div.jp-video div.jp-progress{top:0px;left:0px;width:100%;height:10px}div.jp-seek-bar{background:url(jplayer.png) 0 -202px repeat-x;width:0px;/* height:15px;*/height:100%;cursor:pointer}div.jp-play-bar{background:url(jplayer.png) 0 -218px repeat-x;width:0px;/* height:15px;*/height:100%}/* The seeking class is added/removed inside jPlayer */div.jp-seeking-bg{background:url(pbar-ani.gif)}a.jp-mute,a.jp-unmute,a.jp-volume-max{width:20px;height:20px}div.jp-audio div.jp-type-single a.jp-mute,div.jp-audio div.jp-type-single a.jp-unmute{top:30px;left:227px}div.jp-audio div.jp-type-playlist a.jp-mute,div.jp-audio div.jp-type-playlist a.jp-unmute{top:32px;left:296px}div.jp-video a.jp-mute,div.jp-video a.jp-unmute{top:27px}div.jp-video-270p div.jp-type-single a.jp-mute,div.jp-video-270p div.jp-type-single a.jp-unmute{left:304px}div.jp-video-270p div.jp-type-playlist a.jp-unmute,div.jp-video-270p div.jp-type-playlist a.jp-mute{left:363px}div.jp-video-360p div.jp-type-single a.jp-mute,div.jp-video-360p div.jp-type-single a.jp-unmute{left:384px}div.jp-video-360p div.jp-type-playlist a.jp-mute,div.jp-video-360p div.jp-type-playlist a.jp-unmute{left:443px}a.jp-mute{background:url(jplayer.png) 0 -90px no-repeat}a.jp-mute:hover{background:url(jplayer.png) -30px -90px no-repeat}a.jp-unmute{background:url(jplayer.png) -61px -90px no-repeat;display:none}a.jp-unmute:hover{background:url(jplayer.png) -91px -90px no-repeat}div.jp-interface ul.jp-controls a.jp-volume-max{ background:url(jplayer.png) no-repeat scroll 0 -110px transparent}div.jp-interface ul.jp-controls a.jp-volume-max:hover{ background:url(jplayer.png) no-repeat scroll -30px -110px transparent}div.jp-audio ul.jp-controls a.jp-volume-max{ left:371px; top:28px}div.jp-volume-bar{position:absolute;overflow:hidden;background:#393939;-moz-box-shadow:rgba(0,0,0,0.5) 0 0 1px inset;-webkit-box-shadow:rgba(0,0,0,0.5) 0 0 1px inset;border-bottom:1px solid #5e5e5e;border-top:1px solid #262526;border-left:1px solid #262526;border-right:1px solid #262526;width:160px;height:4px;cursor:pointer}div.jp-audio div.jp-type-single div.jp-volume-bar{top:48px;left:225px}div.jp-audio div.jp-type-playlist div.jp-volume-bar{top:37px;left:324px}div.jp-video div.jp-volume-bar{top:32px}div.jp-video-270p div.jp-type-single div.jp-volume-bar{left:332px}div.jp-video-270p div.jp-type-playlist div.jp-volume-bar{left:391px}div.jp-video-360p div.jp-type-single div.jp-volume-bar{left:412px}div.jp-video-360p div.jp-type-playlist div.jp-volume-bar{left:471px}div.jp-volume-bar-value{background-color:#fb7018; background:-moz-linear-gradient(top,#fc9318 0,#e56815 100%); background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#fc9318),color-stop(100%,#e56815));width:0px;height:3px}div.jp-current-time,div.jp-duration{position:absolute;font-size:.64em;font-style:oblique}div.jp-duration{text-align:right}div.jp-audio div.jp-type-single div.jp-current-time,div.jp-audio div.jp-type-single div.jp-duration{top:49px;left:130px;width:122px}div.jp-audio div.jp-type-playlist div.jp-current-time,div.jp-audio div.jp-type-playlist div.jp-duration{top:49px;left:164px;width:122px}div.jp-video div.jp-current-time,div.jp-video div.jp-duration{top:10px;left:0px;width:98%;padding:0 1%}div.jp-playlist{/* width:418px;*/width:100%;background-color:#ccc;/*border:1px solid #009be3;*/border-top:none}div.jp-playlist ul{list-style-type:none;margin:0;padding:0 20px;/* background-color:#ccc;*//* border:1px solid #009be3;*//* border-top:none;*//* width:378px;*/font-size:.72em}div.jp-type-single div.jp-playlist li{padding:5px 0 5px 20px;font-weight:bold}div.jp-type-playlist div.jp-playlist li{padding:5px 0 4px 20px;border-bottom:1px solid #eee}div.jp-type-playlist div.jp-playlist li.jp-playlist-last{padding:5px 0 5px 20px;border-bottom:none}div.jp-type-playlist div.jp-playlist li.jp-playlist-current{list-style-type:square;list-style-position:inside;padding-left:8px}div.jp-type-playlist div.jp-playlist a{color:#666;text-decoration:none}div.jp-type-playlist div.jp-playlist a:hover{color:#0d88c1}div.jp-type-playlist div.jp-playlist a.jp-playlist-current{color:#0d88c1}div.jp-type-playlist div.jp-playlist div.jp-free-media{display:inline;margin-left:20px}div.jp-video div.jp-video-play{background:transparent url(jplayer.blue.monday.video.play.png) no-repeat center;/* position:relative;*/position:absolute;cursor:pointer;z-index:2}div.jp-video div.jp-video-play:hover{background:transparent url(jplayer.blue.monday.video.play.hover.png) no-repeat center}div.jp-video-270p div.jp-video-play{top:-270px;width:480px;height:270px}div.jp-video-360p div.jp-video-play{top:-360px;width:640px;height:360px}div.jp-jplayer{width:0px;height:0px}div.jp-video div.jp-jplayer{border:1px solid #009be3;border-bottom:none;z-index:1}div.jp-video-270p div.jp-jplayer{width:480px;height:270px}div.jp-video-360p div.jp-jplayer{width:640px;height:360px}div.jp-jplayer{background-color:#000}div.jp-now-playing{height:19px;padding:3px 0 0 15px;color:#a7a7a7;font-size:12px;border-top:1px solid #515151;border-bottom:1px solid #2c2c2c;background-color:#353535;background:-moz-linear-gradient(top,#3e3e3e 0,#353535 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0,#3e3e3e),color-stop(100%,#353535))}div.jp-now-playing span{color:#898989} \ No newline at end of file +/* + * Skin for jPlayer Plugin (jQuery JavaScript Library) + * http://www.happyworm.com/jquery/jplayer + * + * Skin Name: Blue Monday + * + * Copyright (c) 2010-2011 Happyworm Ltd + * Dual licensed under the MIT and GPL licenses. + * - http://www.opensource.org/licenses/mit-license.php + * - http://www.gnu.org/copyleft/gpl.html + * + * Author: Silvia Benvenuti + * Skin Version: 4.0 (jPlayer 2.1.0) + * Date: 1st September 2011 + */ + +div.jp-audio, +div.jp-video { + + /* Edit the font-size to counteract inherited font sizing. + * Eg. 1.25em = 1 / 0.8em + */ + + 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; + line-height:1.6; + color: #666; + border:1px solid #009be3; + background-color:#eee; + position:relative; +} +div.jp-audio { + width:420px; +} +div.jp-video-270p { + width:480px; +} +div.jp-video-360p { + width:640px; +} +div.jp-video-full { + /* Rules for IE6 (full-screen) */ + width:480px; + height:270px; + /* Rules for IE7 (full-screen) - Otherwise the relative container causes other page items that are not position:static (default) to appear over the video/gui. */ + position:static !important; position:relative +} + +div.jp-video-full div.jp-jplayer { + top: 0; + left: 0; + position: fixed !important; position: relative; /* Rules for IE6 (full-screen) */ + overflow: hidden; + z-index:1000; +} + +div.jp-video-full div.jp-gui { + position: fixed !important; position: static; /* Rules for IE6 (full-screen) */ + top: 0; + left: 0; + width:100%; + height:100%; + z-index:1000; +} + +div.jp-video-full div.jp-interface { + position: absolute !important; position: relative; /* Rules for IE6 (full-screen) */ + bottom: 0; + left: 0; + z-index:1000; +} + +div.jp-interface { + position: relative; + background-color:#eee; + width:100%; +} + +div.jp-audio div.jp-type-single div.jp-interface { + height:80px; +} +div.jp-audio div.jp-type-playlist div.jp-interface { + height:80px; +} + +div.jp-video div.jp-interface { + border-top:1px solid #009be3; +} + +/* @group CONTROLS */ + +div.jp-controls-holder { + clear: both; + width:440px; + margin:0 auto; + position: relative; + overflow:hidden; + top:-8px; /* This negative value depends on the size of the text in jp-currentTime and jp-duration */ +} + +div.jp-interface ul.jp-controls { + list-style-type:none; + margin:0; + padding: 0; + overflow:hidden; +} + +div.jp-audio ul.jp-controls { + width: 380px; + padding:20px 20px 0 20px; +} + +div.jp-video div.jp-type-single ul.jp-controls { + width: 78px; + margin-left: 200px; +} + +div.jp-video div.jp-type-playlist ul.jp-controls { + width: 134px; + margin-left: 172px; +} +div.jp-video ul.jp-controls, +div.jp-interface ul.jp-controls li { + display:inline; + float: left; +} + +div.jp-interface ul.jp-controls a { + display:block; + overflow:hidden; + text-indent:-9999px; +} +a.jp-play, +a.jp-pause { + width:40px; + height:40px; +} + +a.jp-play { + background: url("jplayer.blue.monday.jpg") 0 0 no-repeat; +} +a.jp-play:hover { + background: url("jplayer.blue.monday.jpg") -41px 0 no-repeat; +} +a.jp-pause { + background: url("jplayer.blue.monday.jpg") 0 -42px no-repeat; + display: none; +} +a.jp-pause:hover { + background: url("jplayer.blue.monday.jpg") -41px -42px no-repeat; +} + +a.jp-stop, a.jp-previous, a.jp-next { + width:28px; + height:28px; + margin-top:6px; +} + +a.jp-stop { + background: url("jplayer.blue.monday.jpg") 0 -83px no-repeat; + margin-left:10px; +} + +a.jp-stop:hover { + background: url("jplayer.blue.monday.jpg") -29px -83px no-repeat; +} + +a.jp-previous { + background: url("jplayer.blue.monday.jpg") 0 -112px no-repeat; +} +a.jp-previous:hover { + background: url("jplayer.blue.monday.jpg") -29px -112px no-repeat; +} + +a.jp-next { + background: url("jplayer.blue.monday.jpg") 0 -141px no-repeat; +} +a.jp-next:hover { + background: url("jplayer.blue.monday.jpg") -29px -141px no-repeat; +} + +/* @end */ + +/* @group progress bar */ + +div.jp-progress { + overflow:hidden; + background-color: #ddd; +} +div.jp-audio div.jp-progress { + position: absolute; + top:32px; + height:15px; +} +div.jp-audio div.jp-type-single div.jp-progress { + left:110px; + width:186px; +} +div.jp-audio div.jp-type-playlist div.jp-progress { + left:166px; + width:130px; +} +div.jp-video div.jp-progress { + top:0px; + left:0px; + width:100%; + height:10px; +} +div.jp-seek-bar { + background: url("jplayer.blue.monday.jpg") 0 -202px repeat-x; + width:0px; + height:100%; + cursor: pointer; +} +div.jp-play-bar { + background: url("jplayer.blue.monday.jpg") 0 -218px repeat-x ; + width:0px; + height:100%; +} + +/* The seeking class is added/removed inside jPlayer */ +div.jp-seeking-bg { + background: url("jplayer.blue.monday.seeking.gif"); +} + +/* @end */ + +/* @group volume controls */ + + +a.jp-mute, +a.jp-unmute, +a.jp-volume-max { + width:18px; + height:15px; + margin-top:12px; +} + +div.jp-audio div.jp-type-single a.jp-mute, +div.jp-audio div.jp-type-single a.jp-unmute { + margin-left: 210px; +} + +div.jp-audio div.jp-type-playlist a.jp-mute, +div.jp-audio div.jp-type-playlist a.jp-unmute { + margin-left: 154px; +} + +div.jp-audio a.jp-volume-max { + margin-left: 56px; +} + +div.jp-video a.jp-mute, +div.jp-video a.jp-unmute, +div.jp-video a.jp-volume-max { + position: absolute; + top:12px; + margin-top:0; +} + +div.jp-video a.jp-mute, +div.jp-video a.jp-unmute { + left: 50px; +} + +div.jp-video a.jp-volume-max { + left: 134px; +} + +a.jp-mute { + background: url("jplayer.blue.monday.jpg") 0 -170px no-repeat; +} +a.jp-mute:hover { + background: url("jplayer.blue.monday.jpg") -19px -170px no-repeat; +} +a.jp-unmute { + background: url("jplayer.blue.monday.jpg") -60px -170px no-repeat; + display: none; +} +a.jp-unmute:hover { + background: url("jplayer.blue.monday.jpg") -79px -170px no-repeat; +} + a.jp-volume-max { + background: url("jplayer.blue.monday.jpg") 0 -186px no-repeat; +} +a.jp-volume-max:hover { + background: url("jplayer.blue.monday.jpg") -19px -186px no-repeat; +} + +div.jp-volume-bar { + position: absolute; + overflow:hidden; + background: url("jplayer.blue.monday.jpg") 0 -250px repeat-x; + width:46px; + height:5px; + cursor: pointer; +} +div.jp-audio div.jp-volume-bar { + top:37px; + left:330px; +} +div.jp-video div.jp-volume-bar { + top:17px; + left:72px; +} +div.jp-volume-bar-value { + background: url("jplayer.blue.monday.jpg") 0 -256px repeat-x; + width:0px; + height:5px; +} + +/* @end */ + +/* @group current time and duration */ + +div.jp-audio div.jp-time-holder { + position:absolute; + top:50px; +} +div.jp-audio div.jp-type-single div.jp-time-holder { + left:110px; + width:186px; +} +div.jp-audio div.jp-type-playlist div.jp-time-holder { + left:166px; + width:130px; +} + +div.jp-current-time, +div.jp-duration { + width:60px; + font-size:.64em; + font-style:oblique; +} +div.jp-current-time { + float: left; + display:inline; +} +div.jp-duration { + float: right; + display:inline; + text-align: right; +} + +div.jp-video div.jp-current-time { + margin-left:20px; +} +div.jp-video div.jp-duration { + margin-right:20px; +} + +/* @end */ + +/* @group playlist */ + +div.jp-title { + font-weight:bold; + text-align:center; +} + +div.jp-title, +div.jp-playlist { + width:100%; + background-color:#ccc; + border-top:1px solid #009be3; +} +div.jp-type-single div.jp-title, +div.jp-type-playlist div.jp-title, +div.jp-type-single div.jp-playlist { + border-top:none; +} +div.jp-title ul, +div.jp-playlist ul { + list-style-type:none; + margin:0; + padding:0 20px; + font-size:.72em; +} + +div.jp-title li { + padding:5px 0; + font-weight:bold; +} +div.jp-playlist li { + padding:5px 0 4px 20px; + border-bottom:1px solid #eee; +} + +div.jp-playlist li div { + display:inline; +} + +/* Note that the first-child (IE6) and last-child (IE6/7/8) selectors do not work on IE */ + +div.jp-type-playlist div.jp-playlist li:last-child { + padding:5px 0 5px 20px; + 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 { + color: #333; + text-decoration: none; +} +div.jp-type-playlist div.jp-playlist a:hover { + color:#0d88c1; +} +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; +} +span.jp-artist { + font-size:.8em; + color:#666; +} + +/* @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; +} +div.jp-video-360p div.jp-video-play { + height:360px; +} +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 { + width:0px; + height:0px; +} + +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 { + position:absolute; + width:390px; + margin-left:-202px; + left:50%; + top: 10px; + + padding:5px; + font-size:.8em; + background-color:#eee; + border:2px solid #009be3; + color:#000; + display:none; +} + +.jp-no-solution a { + color:#000; +} + +.jp-no-solution span { + font-size:1em; + display:block; + text-align:center; + font-weight:bold; +} + +/* @end */