chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Adding jplayer to preview flv, mp4 and ogv see #4491 in documents

Browse Source
skala
Julio Montoya 14 years ago
parent e75b640566
commit 09fa6bc5b2
9 changed files with 537 additions and 262 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 3
      main/document/document.php
  2. 136
      main/document/showinframes.php
  3. 51
      main/inc/lib/document.lib.php
  4. 609
      main/inc/lib/javascript/jquery-jplayer/skins/blue/jplayer.blue.monday.css
  5. BIN
      main/inc/lib/javascript/jquery-jplayer/skins/blue/jplayer.blue.monday.jpg
  6. BIN
      main/inc/lib/javascript/jquery-jplayer/skins/blue/jplayer.blue.monday.seeking.gif
  7. BIN
      main/inc/lib/javascript/jquery-jplayer/skins/blue/jplayer.blue.monday.video.play.hover.png
  8. BIN
      main/inc/lib/javascript/jquery-jplayer/skins/blue/jplayer.blue.monday.video.play.png
  9. BIN
      main/inc/lib/javascript/jquery-jplayer/skins/blue/pbar-ani.gif

3
main/document/document.php
Unescape View File

@ -38,7 +38,6 @@ require_once '../inc/global.inc.php';
$current_course_tool = TOOL_DOCUMENT; $current_course_tool = TOOL_DOCUMENT;
$this_section = SECTION_COURSES; $this_section = SECTION_COURSES;
require_once 'document.inc.php'; require_once 'document.inc.php';
$lib_path = api_get_path(LIBRARY_PATH); $lib_path = api_get_path(LIBRARY_PATH);
@ -478,7 +477,7 @@ $lang_yoxview = isset($yoxview_code_translation_table[$lang_yoxview]) ? $yoxview
*/ */
$docs_and_folders = DocumentManager::get_all_document_data($_course, $curdirpath, $to_group_id, null, $is_allowed_to_edit || $group_member_with_upload_rights, false); $docs_and_folders = DocumentManager::get_all_document_data($_course, $curdirpath, $to_group_id, null, $is_allowed_to_edit || $group_member_with_upload_rights, false);
$file_list = $format_list = ''; $format_list = '';
$count = 1; $count = 1;
if (!empty($docs_and_folders)) if (!empty($docs_and_folders))

136
main/document/showinframes.php
Unescape View File

@ -26,9 +26,6 @@
*/ */
$language_file[] = 'document'; $language_file[] = 'document';
require_once '../inc/global.inc.php'; require_once '../inc/global.inc.php';
require_once api_get_path(LIBRARY_PATH).'document.lib.php';
require_once api_get_path(LIBRARY_PATH).'glossary.lib.php';
require_once api_get_path(LIBRARY_PATH).'groupmanager.lib.php';
// Protection // Protection
api_protect_course_script(); api_protect_course_script();
@ -86,11 +83,19 @@ if ($is_allowed_in_course == false) {
//$is_visible = DocumentManager::is_visible_by_id($document_id, $course_info, api_get_session_id(), api_get_user_id()); //$is_visible = DocumentManager::is_visible_by_id($document_id, $course_info, api_get_session_id(), api_get_user_id());
$is_visible = DocumentManager::check_visibility_tree($document_id, api_get_course_id(), api_get_session_id(), api_get_user_id()); $is_visible = DocumentManager::check_visibility_tree($document_id, api_get_course_id(), api_get_session_id(), api_get_user_id());
if (!api_is_allowed_to_edit() && !$is_visible) { if (!api_is_allowed_to_edit() && !$is_visible) {
api_not_allowed(true); api_not_allowed(true);
} }
$pathinfo = pathinfo($header_file);
$jplayer_supported_files = array('mp4', 'ogv','flv');
$jplayer_supported = false;
if (in_array(strtolower($pathinfo['extension']), $jplayer_supported_files)) {
$jplayer_supported = true;
}
$group_id = api_get_group_id(); $group_id = api_get_group_id();
$current_group = GroupManager::get_group_properties($group_id); $current_group = GroupManager::get_group_properties($group_id);
$current_group_name=$current_group['name']; $current_group_name=$current_group['name'];
@ -169,52 +174,95 @@ if (api_get_setting('show_glossary_in_documents') == 'ismanual') {
// });'; // });';
} }
$htmlHeadXtra[] = '<script type="text/javascript"> if (!$jplayer_supported) {
<!-- $htmlHeadXtra[] = '<script type="text/javascript">
var jQueryFrameReadyConfigPath = \''.api_get_path(WEB_LIBRARY_PATH).'javascript/jquery.min.js\'; <!--
--> var jQueryFrameReadyConfigPath = \''.api_get_path(WEB_LIBRARY_PATH).'javascript/jquery.min.js\';
</script>'; -->
$htmlHeadXtra[] = '<script type="text/javascript" src="'.api_get_path(WEB_LIBRARY_PATH).'javascript/jquery.frameready.js"></script>'; </script>';
$htmlHeadXtra[] = '<script type="text/javascript" src="'.api_get_path(WEB_LIBRARY_PATH).'javascript/jquery.frameready.js"></script>';
$htmlHeadXtra[] = '
$htmlHeadXtra[] = '<script>
<script type="text/javascript"> <!--
<!-- var updateContentHeight = function() {
var updateContentHeight = function() { //HeaderHeight = document.getElementById("header").offsetHeight;
//HeaderHeight = document.getElementById("header").offsetHeight; //FooterHeight = document.getElementById("footer").offsetHeight;
//FooterHeight = document.getElementById("footer").offsetHeight; //document.getElementById("mainFrame").style.height = ((docHeight-(parseInt(HeaderHeight)+parseInt(FooterHeight)))+60)+"px";
//document.getElementById("mainFrame").style.height = ((docHeight-(parseInt(HeaderHeight)+parseInt(FooterHeight)))+60)+"px"; my_iframe = document.getElementById("mainFrame");
my_iframe = document.getElementById("mainFrame"); //this doesnt seem to work in IE 7,8,9
//this doesnt seem to work in IE 7,8,9 new_height = my_iframe.contentWindow.document.body.scrollHeight;
new_height = my_iframe.contentWindow.document.body.scrollHeight; my_iframe.height = my_iframe.contentWindow.document.body.scrollHeight + "px";
my_iframe.height = my_iframe.contentWindow.document.body.scrollHeight + "px"; };
};
// Fixes the content height of the frame
// Fixes the content height of the frame window.onload = function() {
window.onload = function() { updateContentHeight();
updateContentHeight(); '.$js_glossary_in_documents.'
'.$js_glossary_in_documents.' }
} -->
--> </script>';
</script>'; }
$pathinfo = pathinfo($header_file);
$web_odf_supported_files = DocumentManager::get_web_odf_extension_list(); $web_odf_supported_files = DocumentManager::get_web_odf_extension_list();
if (in_array(strtolower($pathinfo['extension']), $web_odf_supported_files)) { if (in_array(strtolower($pathinfo['extension']), $web_odf_supported_files)) {
$show_web_odf = true; $show_web_odf = true;
} }
if ($jplayer_supported) {
$extension = api_strtolower($pathinfo['extension']);
$js_path = api_get_path(WEB_LIBRARY_PATH).'javascript/';
$htmlHeadXtra[] = '<link rel="stylesheet" href="'.$js_path.'jquery-jplayer/skins/blue/jplayer.blue.monday.css" type="text/css">';
$htmlHeadXtra[] = '<script type="text/javascript" src="'.$js_path.'jquery-jplayer/jquery.jplayer.min.js"></script>';
$jquery = ' $("#jquery_jplayer_1").jPlayer({
ready: function() {
$(this).jPlayer("setMedia", {
'.$extension.' : "'.$document_data['direct_url'].'"
});
},
errorAlerts: true,
warningAlerts: true,
//swfPath: "../inc/lib/javascript/jquery-jplayer",
swfPath: "'.$js_path.'jquery-jplayer",
//supplied: "m4a, oga, mp3, ogg, wav",
supplied: "'.$extension.'",
//wmode: "window",
solution: "flash, html", // Do not change this setting
cssSelectorAncestor: "#jp_container_1",
});';
$htmlHeadXtra[] = '<script>
$(document).ready( function() {
//Experimental changes to preview mp3, ogg files
'.$jquery.'
});
</script>';
}
Display::display_header(''); Display::display_header('');
echo "<div align=\"center\">"; if ($jplayer_supported) {
$file_url_web = api_get_path(WEB_COURSE_PATH).$_course['path'].'/document'.$header_file.'?'.api_get_cidreq(); echo '<div align="center">';
echo '<a class="btn" href="'.$file_url_web.'" target="_blank">'.get_lang('_cut_paste_link').'</a>'; $file_url_web = api_get_path(WEB_COURSE_PATH).$_course['path'].'/document'.$header_file.'?'.api_get_cidreq();
echo '<a class="btn" href="'.$file_url_web.'" target="_blank">'.get_lang('Download').'</a>';
echo '</div>';
echo '<br /><div class="span12" style="margin:0 auto; width:100%; text-align:center;">';
echo DocumentManager::generate_video_preview($document_data);
echo '</div>';
} else {
echo '<div align="center">';
$file_url_web = api_get_path(WEB_COURSE_PATH).$_course['path'].'/document'.$header_file.'?'.api_get_cidreq();
echo '<a class="btn" href="'.$file_url_web.'" target="_blank">'.get_lang('_cut_paste_link').'</a>';
if ($show_web_odf) { if ($show_web_odf) {
//echo Display::url(get_lang('Show'), api_get_path(WEB_CODE_PATH).'document/edit_odf.php?id='.$document_data['id'], array('class' => 'btn')); //echo Display::url(get_lang('Show'), api_get_path(WEB_CODE_PATH).'document/edit_odf.php?id='.$document_data['id'], array('class' => 'btn'));
}
echo "</div>";
} }
echo "</div>";
if ($pathinfo['extension']=='wav' && preg_match('/_chnano_.wav/i', $file_url_web) && api_get_setting('enable_nanogong') == 'true'){ if ($pathinfo['extension']=='wav' && preg_match('/_chnano_.wav/i', $file_url_web) && api_get_setting('enable_nanogong') == 'true'){
echo '<div align="center">'; echo '<div align="center">';
@ -226,8 +274,8 @@ if ($pathinfo['extension']=='wav' && preg_match('/_chnano_.wav/i', $file_url_web
echo '<param name="ShowRecordButton" value="false" />'; echo '<param name="ShowRecordButton" value="false" />';
echo '</applet>'; echo '</applet>';
echo '</div>'; echo '</div>';
} else {
//echo '<iframe border="0" frameborder="0" scrolling="no" style="width:100%;" height="600" id="mainFrame" name="mainFrame" src="'.$file_url_web.'&amp;rand='.mt_rand(1, 10000).'" height="500"></iframe>';
} }
else{
echo '<iframe border="0" frameborder="0" scrolling="no" style="width:100%;" height="600" id="mainFrame" name="mainFrame" src="'.$file_url_web.'&amp;rand='.mt_rand(1, 10000).'" height="500"></iframe>'; Display::display_footer();
}
Display::display_footer();

51
main/inc/lib/document.lib.php
Unescape View File

@ -2436,6 +2436,57 @@ class DocumentManager {
return $html; return $html;
} }
function generate_video_preview($document_data = array()) {
$html = '
<div id="jp_container_1" class="jp-video">
<div class="jp-type-single">
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div class="jp-gui">
<div class="jp-video-play">
<a href="javascript:;" class="jp-video-play-icon" tabindex="1">play</a>
</div>
<div class="jp-interface">
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-current-time"></div>
<div class="jp-controls-holder">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">play</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a></li>
</ul>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-full-screen" tabindex="1" title="full screen">full screen</a></li>
<li><a href="javascript:;" class="jp-restore-screen" tabindex="1" title="restore screen">restore screen</a></li>
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a></li>
</ul>
</div>
<div class="jp-title">
<ul>
<li>'.$document_data['title'].'</li>
</ul>
</div>
</div>
</div>
<div class="jp-no-solution">
<span>'.get_lang('UpdateRequire').'</span>
'.get_lang("ToPlayTheMediaYouWillNeedToUpdateYourBrowserToARecentVersionYouCanAlsoDownloadTheFile").'
</div>
</div>
</div>';
return $html;
}
function get_document_preview($course_info, $lp_id = false, $target = '', $session_id = 0, $add_move_button = false) { function get_document_preview($course_info, $lp_id = false, $target = '', $session_id = 0, $add_move_button = false) {
if (empty($course_info['real_id']) || empty($course_info['code']) || !is_array($course_info)) { if (empty($course_info['real_id']) || empty($course_info['code']) || !is_array($course_info)) {
return ''; return '';

609
main/inc/lib/javascript/jquery-jplayer/skins/blue/jplayer.blue.monday.css
Unescape View File

@ -4,14 +4,14 @@
* *
* Skin Name: Blue Monday * Skin Name: Blue Monday
* *
* Copyright (c) 2010 Happyworm Ltd * Copyright (c) 2010-2011 Happyworm Ltd
* Dual licensed under the MIT and GPL licenses. * Dual licensed under the MIT and GPL licenses.
* - http://www.opensource.org/licenses/mit-license.php * - http://www.opensource.org/licenses/mit-license.php
* - http://www.gnu.org/copyleft/gpl.html * - http://www.gnu.org/copyleft/gpl.html
* *
* Author: Silvia Benvenuti * Author: Silvia Benvenuti
* Skin Version: 3.0 (jPlayer 2.0.0) * Skin Version: 4.0 (jPlayer 2.1.0)
* Date: 20th December 2010 * Date: 1st September 2011
*/ */
div.jp-audio, div.jp-audio,
@ -21,11 +21,14 @@ div.jp-video {
* Eg. 1.25em = 1 / 0.8em * Eg. 1.25em = 1 / 0.8em
*/ */
font-size:1.25em; font-size:1.25em; /* 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:Verdana, Arial, sans-serif;
line-height:1.6; line-height:1.6;
color: #666; color: #666;
border:1px solid #009be3;
background-color:#eee;
position:relative;
} }
div.jp-audio { div.jp-audio {
width:420px; width:420px;
@ -36,38 +39,95 @@ div.jp-video-270p {
div.jp-video-360p { div.jp-video-360p {
width:640px; 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 { div.jp-interface {
position: relative; position: relative;
background-color:#eee; background-color:#eee;
/* width:418px; */
width:100%; width:100%;
border:1px solid #009be3;
} }
div.jp-audio div.jp-type-single div.jp-interface { div.jp-audio div.jp-type-single div.jp-interface {
height:80px; height:80px;
border-bottom:none;
} }
div.jp-audio div.jp-type-playlist div.jp-interface { div.jp-audio div.jp-type-playlist div.jp-interface {
height:80px; height:80px;
} }
div.jp-video div.jp-type-single div.jp-interface {
height:60px; div.jp-video div.jp-interface {
border-bottom:none; border-top:1px solid #009be3;
} }
div.jp-video div.jp-type-playlist div.jp-interface {
height:60px; /* @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 { div.jp-interface ul.jp-controls {
list-style-type:none; list-style-type:none;
padding:0; margin:0;
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 { div.jp-interface ul.jp-controls li {
/* position: absolute; */
display:inline; display:inline;
float: left;
} }
div.jp-interface ul.jp-controls a { div.jp-interface ul.jp-controls a {
position: absolute; display:block;
overflow:hidden; overflow:hidden;
text-indent:-9999px; text-indent:-9999px;
} }
@ -75,38 +135,8 @@ a.jp-play,
a.jp-pause { a.jp-pause {
width:40px; width:40px;
height:40px; 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:20px;
left:40px;
}
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 { a.jp-play {
background: url("jplayer.blue.monday.jpg") 0 0 no-repeat; background: url("jplayer.blue.monday.jpg") 0 0 no-repeat;
} }
@ -120,96 +150,56 @@ a.jp-pause {
a.jp-pause:hover { a.jp-pause:hover {
background: url("jplayer.blue.monday.jpg") -41px -42px no-repeat; background: url("jplayer.blue.monday.jpg") -41px -42px no-repeat;
} }
div.jp-audio div.jp-type-single a.jp-stop {
top:26px; a.jp-stop, a.jp-previous, a.jp-next {
left:90px; width:28px;
} height:28px;
div.jp-audio div.jp-type-playlist a.jp-stop { margin-top:6px;
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 { a.jp-stop {
background: url("jplayer.blue.monday.jpg") 0 -83px no-repeat; background: url("jplayer.blue.monday.jpg") 0 -83px no-repeat;
width:28px; margin-left:10px;
height:28px;
z-index:1;
} }
a.jp-stop:hover { a.jp-stop:hover {
background: url("jplayer.blue.monday.jpg") -29px -83px no-repeat; background: url("jplayer.blue.monday.jpg") -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 { a.jp-previous {
background: url("jplayer.blue.monday.jpg") 0 -112px no-repeat; background: url("jplayer.blue.monday.jpg") 0 -112px no-repeat;
width:28px;
height:28px;
} }
a.jp-previous:hover { a.jp-previous:hover {
background: url("jplayer.blue.monday.jpg") -29px -112px no-repeat; background: url("jplayer.blue.monday.jpg") -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 { a.jp-next {
background: url("jplayer.blue.monday.jpg") 0 -141px no-repeat; background: url("jplayer.blue.monday.jpg") 0 -141px no-repeat;
width:28px;
height:28px;
} }
a.jp-next:hover { a.jp-next:hover {
background: url("jplayer.blue.monday.jpg") -29px -141px no-repeat; background: url("jplayer.blue.monday.jpg") -29px -141px no-repeat;
} }
/* @end */
/* @group progress bar */
div.jp-progress { div.jp-progress {
position: absolute;
overflow:hidden; overflow:hidden;
background-color: #ddd; background-color: #ddd;
} }
div.jp-audio div.jp-type-single div.jp-progress { div.jp-audio div.jp-progress {
position: absolute;
top:32px; top:32px;
left:130px;
width:122px;
height:15px; 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 { div.jp-audio div.jp-type-playlist div.jp-progress {
top:32px; left:166px;
left:164px; width:130px;
width:122px;
height:15px;
} }
div.jp-video div.jp-progress { div.jp-video div.jp-progress {
top:0px; top:0px;
@ -220,70 +210,86 @@ div.jp-video div.jp-progress {
div.jp-seek-bar { div.jp-seek-bar {
background: url("jplayer.blue.monday.jpg") 0 -202px repeat-x; background: url("jplayer.blue.monday.jpg") 0 -202px repeat-x;
width:0px; width:0px;
/* height:15px; */
height:100%; height:100%;
cursor: pointer; cursor: pointer;
} }
div.jp-play-bar { div.jp-play-bar {
background: url("jplayer.blue.monday.jpg") 0 -218px repeat-x ; background: url("jplayer.blue.monday.jpg") 0 -218px repeat-x ;
width:0px; width:0px;
/* height:15px; */
height:100%; height:100%;
} }
/* The seeking class is added/removed inside jPlayer */ /* The seeking class is added/removed inside jPlayer */
div.jp-seeking-bg { div.jp-seeking-bg {
background: url("pbar-ani.gif"); background: url("jplayer.blue.monday.seeking.gif");
} }
/* @end */
/* @group volume controls */
a.jp-mute, a.jp-mute,
a.jp-unmute { a.jp-unmute,
a.jp-volume-max {
width:18px; width:18px;
height:15px; height:15px;
margin-top:12px;
} }
div.jp-audio div.jp-type-single a.jp-mute, div.jp-audio div.jp-type-single a.jp-mute,
div.jp-audio div.jp-type-single a.jp-unmute { div.jp-audio div.jp-type-single a.jp-unmute {
top:32px; margin-left: 210px;
left:274px;
} }
div.jp-audio div.jp-type-playlist a.jp-mute, div.jp-audio div.jp-type-playlist a.jp-mute,
div.jp-audio div.jp-type-playlist a.jp-unmute { div.jp-audio div.jp-type-playlist a.jp-unmute {
top:32px; margin-left: 154px;
left:296px;
} }
div.jp-video a.jp-mute,
div.jp-video a.jp-unmute { div.jp-audio a.jp-volume-max {
top:27px; margin-left: 56px;
}
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 { div.jp-video a.jp-mute,
left:363px; div.jp-video a.jp-unmute,
div.jp-video a.jp-volume-max {
position: absolute;
top:12px;
margin-top:0;
} }
div.jp-video-360p div.jp-type-single a.jp-mute,
div.jp-video-360p div.jp-type-single a.jp-unmute { div.jp-video a.jp-mute,
left:384px; div.jp-video a.jp-unmute {
left: 50px;
} }
div.jp-video-360p div.jp-type-playlist a.jp-mute,
div.jp-video-360p div.jp-type-playlist a.jp-unmute {
left:443px; div.jp-video a.jp-volume-max {
left: 134px;
} }
a.jp-mute { a.jp-mute {
background: url("jplayer.blue.monday.jpg") 0 -186px no-repeat; background: url("jplayer.blue.monday.jpg") 0 -170px no-repeat;
} }
a.jp-mute:hover { a.jp-mute:hover {
background: url("jplayer.blue.monday.jpg") -19px -170px no-repeat; background: url("jplayer.blue.monday.jpg") -19px -170px no-repeat;
} }
a.jp-unmute { a.jp-unmute {
background: url("jplayer.blue.monday.jpg") 0 -170px no-repeat; background: url("jplayer.blue.monday.jpg") -60px -170px no-repeat;
display: none; display: none;
} }
a.jp-unmute:hover { 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; background: url("jplayer.blue.monday.jpg") -19px -186px no-repeat;
} }
div.jp-volume-bar { div.jp-volume-bar {
position: absolute; position: absolute;
overflow:hidden; overflow:hidden;
@ -292,106 +298,114 @@ div.jp-volume-bar {
height:5px; height:5px;
cursor: pointer; cursor: pointer;
} }
div.jp-audio div.jp-type-single div.jp-volume-bar { div.jp-audio div.jp-volume-bar {
top:37px;
left:302px;
}
div.jp-audio div.jp-type-playlist div.jp-volume-bar {
top:37px; top:37px;
left:324px; left:330px;
} }
div.jp-video div.jp-volume-bar { div.jp-video div.jp-volume-bar {
top:32px; top:17px;
} left:72px;
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 { div.jp-volume-bar-value {
background: url("jplayer.blue.monday.jpg") 0 -256px repeat-x; background: url("jplayer.blue.monday.jpg") 0 -256px repeat-x;
width:0px; width:0px;
height:5px; 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-current-time,
div.jp-duration { div.jp-duration {
position: absolute; width:60px;
font-size:.64em; font-size:.64em;
font-style:oblique; font-style:oblique;
} }
div.jp-current-time {
float: left;
display:inline;
}
div.jp-duration { div.jp-duration {
float: right;
display:inline;
text-align: right; text-align: right;
} }
div.jp-audio div.jp-type-single div.jp-current-time,
div.jp-audio div.jp-type-single div.jp-duration { div.jp-video div.jp-current-time {
top:49px; margin-left:20px;
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 { div.jp-video div.jp-duration {
top:10px; margin-right:20px;
left:0px; }
width:98%;
padding:0 1%; /* @end */
/* @group playlist */
div.jp-title {
font-weight:bold;
text-align:center;
} }
div.jp-title,
div.jp-playlist { div.jp-playlist {
/* width:418px; */
width:100%; width:100%;
background-color:#ccc; background-color:#ccc;
border:1px solid #009be3; 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; border-top:none;
} }
div.jp-title ul,
div.jp-playlist ul { div.jp-playlist ul {
list-style-type:none; list-style-type:none;
margin:0; margin:0;
padding:0 20px; padding:0 20px;
/* background-color:#ccc; */
/* border:1px solid #009be3; */
/* border-top:none; */
/* width:378px; */
font-size:.72em; font-size:.72em;
} }
div.jp-title li {
div.jp-type-single div.jp-playlist li { padding:5px 0;
padding:5px 0 5px 20px;
font-weight:bold; font-weight:bold;
} }
div.jp-type-playlist div.jp-playlist li { div.jp-playlist li {
padding:5px 0 4px 20px; padding:5px 0 4px 20px;
border-bottom:1px solid #eee; border-bottom:1px solid #eee;
} }
/*
div.jp-video div.jp-playlist li { div.jp-playlist li div {
padding:5px 0 5px 20px; display:inline;
font-weight:bold;
} }
*/
div.jp-type-playlist div.jp-playlist li.jp-playlist-last { /* 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; padding:5px 0 5px 20px;
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-type:square;
list-style-position:inside; list-style-position:inside;
padding-left:8px; padding-left:7px;
} }
div.jp-type-playlist div.jp-playlist a { div.jp-type-playlist div.jp-playlist a {
color: #666; color: #333;
text-decoration: none; text-decoration: none;
} }
div.jp-type-playlist div.jp-playlist a:hover { div.jp-type-playlist div.jp-playlist a:hover {
@ -400,49 +414,212 @@ div.jp-type-playlist div.jp-playlist a:hover {
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:#0d88c1;
} }
div.jp-type-playlist div.jp-playlist div.jp-free-media {
div.jp-type-playlist div.jp-playlist a.jp-playlist-item-remove {
float:right;
display:inline; display:inline;
margin-left:20px; 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;
} }
div.jp-video div.jp-video-play { /* @end */
background: transparent url("jplayer.blue.monday.video.play.png") no-repeat center;
/* position: relative; */ div.jp-video-play {
position: absolute; position:absolute;
top:0;
left:0;
width:100%;
cursor:pointer; cursor:pointer;
z-index:2; 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 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 { div.jp-video-270p div.jp-video-play {
top:-270px;
width:480px;
height:270px; height:270px;
} }
div.jp-video-360p div.jp-video-play { div.jp-video-360p div.jp-video-play {
top:-360px;
width:640px;
height:360px; 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 { div.jp-jplayer {
width:0px; width:0px;
height:0px; height:0px;
} }
div.jp-video div.jp-jplayer {
border:1px solid #009be3; div.jp-jplayer {
border-bottom:none; background-color: #000000;
z-index:1;
} }
div.jp-video-270p div.jp-jplayer {
width:480px;
height:270px;
/* @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-video-360p div.jp-jplayer {
width:640px; div.jp-audio .jp-type-single ul.jp-toggles {
height:360px; width:25px;
} }
div.jp-jplayer { div.jp-audio .jp-type-playlist ul.jp-toggles {
background-color: #000000; 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 */

BIN
main/inc/lib/javascript/jquery-jplayer/skins/blue/jplayer.blue.monday.jpg
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 23 KiB

BIN
main/inc/lib/javascript/jquery-jplayer/skins/blue/jplayer.blue.monday.seeking.gif
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.2 KiB

BIN
main/inc/lib/javascript/jquery-jplayer/skins/blue/jplayer.blue.monday.video.play.hover.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 6.8 KiB

BIN
main/inc/lib/javascript/jquery-jplayer/skins/blue/jplayer.blue.monday.video.play.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 15 KiB

BIN
main/inc/lib/javascript/jquery-jplayer/skins/blue/pbar-ani.gif
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 297 KiB

Write Preview
Loading…
Cancel
Save