Integrate jplayer in the document for mp3, ogg and wav files, adding chamilo jplayer skin

skala
Julio Montoya 15 years ago
parent ab4c201fdc
commit 909c9014fd
  1. 70
      main/document/document.inc.php
  2. 29
      main/document/document.php
  3. 449
      main/inc/lib/javascript/jquery-jplayer/skins/chamilo/jplayer.blue.monday.css
  4. BIN
      main/inc/lib/javascript/jquery-jplayer/skins/chamilo/jplayer.blue.monday.jpg
  5. BIN
      main/inc/lib/javascript/jquery-jplayer/skins/chamilo/jplayer.blue.monday.png
  6. BIN
      main/inc/lib/javascript/jquery-jplayer/skins/chamilo/jplayer.blue.monday.video.play.hover.png
  7. BIN
      main/inc/lib/javascript/jquery-jplayer/skins/chamilo/jplayer.blue.monday.video.play.png
  8. BIN
      main/inc/lib/javascript/jquery-jplayer/skins/chamilo/pbar-ani.gif

@ -100,7 +100,7 @@ function build_directory_selector($folders, $curdirpath, $group_dir = '', $chang
* @param int $show_as_icon - if it is true, only a clickable icon will be shown
* @return string url
*/
function create_document_link($document_data, $show_as_icon = false) {
function create_document_link($document_data, $show_as_icon = false, $counter = null) {
global $dbl_click_id;
if (isset($_SESSION['_gid'])) {
$req_gid = '&gidReq='.$_SESSION['_gid'];
@ -233,49 +233,79 @@ function create_document_link($document_data, $show_as_icon = false) {
}
//target="'.$target.'"
if ($filetype == 'file') {
if(preg_match('/swf$/', urldecode($url)) || preg_match('/html$/', urldecode($url)) || preg_match('/htm$/', urldecode($url)) || (preg_match('/wav$/', urldecode($url)) && api_get_setting('enable_nanogong') == 'true')){
//Sound preview with jplayer
if ( preg_match('/mp3$/', urldecode($url)) ||
preg_match('/wav$/', urldecode($url)) ||
preg_match('/ogg$/', urldecode($url))) {
return '<span style="float:left" '.$visibility_class.' style="float:left">'.$title.'</span>'.$force_download_html.$copy_to_myfiles.$open_in_new_window_link.$pdf_icon;
} elseif (
//Show preview sith yoxview
preg_match('/swf$/', urldecode($url)) ||
preg_match('/html$/', urldecode($url)) ||
preg_match('/htm$/', urldecode($url)) //|| (preg_match('/wav$/', urldecode($url)) && api_get_setting('enable_nanogong') == 'true')
) {
$url = 'showinframesmin.php?'.api_get_cidreq().'&id='.$document_data['id'].$req_gid;
return '<a href="'.$url.'" class="yoxview" title="'.$tooltip_title_alt.'" target="yoxview" style="float:left" '.$visibility_class.' style="float:left">'.$title.'</a>'.$force_download_html.$copy_to_myfiles.$open_in_new_window_link.$pdf_icon;
}else{
} else {
//Show preview sith yoxview
return '<a href="'.$url.'" class="yoxview" title="'.$tooltip_title_alt.'" target="yoxview" style="float:left" '.$visibility_class.' style="float:left">'.$title.'</a>'.$force_download_html.$copy_to_myfiles.$open_in_new_window_link.$pdf_icon;
}
} else {
return '<a href="'.$url.'" title="'.$tooltip_title_alt.'" '.$visibility_class.' style="float:left">'.$title.'</a>'.$force_download_html.$copy_to_myfiles.$open_in_new_window_link.$pdf_icon;
}
//end copy files to users myfiles
}
else {
//icons colum
if(preg_match('/shared_folder/', urldecode($url)) && preg_match('/shared_folder$/', urldecode($url))==false && preg_match('/shared_folder_session_'.$current_session_id.'$/', urldecode($url))==false){
if($filetype == 'file') {
if(preg_match('/swf$/', urldecode($url)) || preg_match('/html$/', urldecode($url)) || preg_match('/htm$/', urldecode($url)) || (preg_match('/wav$/', urldecode($url)) && api_get_setting('enable_nanogong') == 'true')){
} else {
//Icon column
if (preg_match('/shared_folder/', urldecode($url)) && preg_match('/shared_folder$/', urldecode($url))==false && preg_match('/shared_folder_session_'.$current_session_id.'$/', urldecode($url))==false){
if ($filetype == 'file') {
//Sound preview with jplayer
if ( preg_match('/mp3$/', urldecode($url)) ||
preg_match('/wav$/', urldecode($url)) ||
preg_match('/ogg$/', urldecode($url))) {
$sound_preview = DocumentManager::generate_mp3_preview($counter);
return $sound_preview ;
} elseif (
//Show preview sith yoxview
preg_match('/swf$/', urldecode($url)) ||
preg_match('/html$/', urldecode($url)) ||
preg_match('/htm$/', urldecode($url)) //|| (preg_match('/wav$/', urldecode($url)) && api_get_setting('enable_nanogong') == 'true')
) {
$url = 'showinframesmin.php?'.api_get_cidreq().'&id='.$document_data['id'].$req_gid;
return '<a href="'.$url.'" class="yoxview" title="'.$tooltip_title_alt.'" target="yoxview"'.$visibility_class.' style="float:left">'.build_document_icon_tag($filetype, $path).Display::return_icon('shared.png', get_lang('ResourceShared'), array('hspace' => '5', 'align' => 'middle', 'height' => 22, 'width' => 22)).'</a>';
}else{
} else {
return '<a href="'.$url.'" class="yoxview" title="'.$tooltip_title_alt.'" target="yoxview"'.$visibility_class.' style="float:left">'.build_document_icon_tag($filetype, $path).Display::return_icon('shared.png', get_lang('ResourceShared'), array('hspace' => '5', 'align' => 'middle', 'height' => 22, 'width' => 22)).'</a>';
}
}
else {
} else {
return '<a href="'.$url.'" title="'.$tooltip_title_alt.'" target="'.$target.'"'.$visibility_class.' style="float:left">'.build_document_icon_tag($filetype, $path).Display::return_icon('shared.png', get_lang('ResourceShared'), array('hspace' => '5', 'align' => 'middle', 'height' => 22, 'width' => 22)).'</a>';
}
}
else{
if($filetype == 'file') {
if(preg_match('/swf$/', urldecode($url)) || preg_match('/html$/', urldecode($url)) || preg_match('/htm$/', urldecode($url)) || (preg_match('/wav$/', urldecode($url)) && api_get_setting('enable_nanogong') == 'true')){
} else {
if ($filetype == 'file') {
//Sound preview with jplayer
if ( preg_match('/mp3$/', urldecode($url)) ||
preg_match('/wav$/', urldecode($url)) ||
preg_match('/ogg$/', urldecode($url))) {
$sound_preview = DocumentManager::generate_mp3_preview($counter);
return $sound_preview ;
} elseif (
//Show preview sith yoxview
preg_match('/swf$/', urldecode($url)) ||
preg_match('/html$/', urldecode($url)) ||
preg_match('/htm$/', urldecode($url)) //|| (preg_match('/wav$/', urldecode($url)) && api_get_setting('enable_nanogong') == 'true')
) {
$url = 'showinframesmin.php?'.api_get_cidreq().'&id='.$document_data['id'].$req_gid;
return '<a href="'.$url.'" class="yoxview" title="'.$tooltip_title_alt.'" target="yoxview"'.$visibility_class.' style="float:left">'.build_document_icon_tag($filetype, $path).'</a>';
}else{
} else {
return '<a href="'.$url.'" class="yoxview" title="'.$tooltip_title_alt.'" target="yoxview"'.$visibility_class.' style="float:left">'.build_document_icon_tag($filetype, $path).'</a>';
}
}
else {
} else {
return '<a href="'.$url.'" title="'.$tooltip_title_alt.'" target="'.$target.'"'.$visibility_class.' style="float:left">'.build_document_icon_tag($filetype, $path).'</a>';
}
}
}
}
/**
* Builds an img html tag for the filetype
*

@ -110,13 +110,8 @@ if (isset($_GET['curdirpath']) && $_GET['curdirpath'] == '/certificates' && isse
$new_content_html = str_replace('/main/default_course_document', $path_image_in_default_course, $new_content_html);
$new_content_html = str_replace('/main/img/', api_get_path(WEB_IMG_PATH), $new_content_html);
echo '
<style media="print" type="text/css">
#imprimir {
visibility:hidden;
}
</style>';
echo '<a href="javascript:window.print();" style="float:right; padding:4px;" id="imprimir"><img src="../img/printmgr.gif" alt="' . get_lang('Print') . '" /> ' . get_lang('Print') . '</a>';
echo '<style media="print" type="text/css"> #print_div { visibility:hidden; } </style>';
echo '<a href="javascript:window.print();" style="float:right; padding:4px;" id="print_div"><img src="../img/printmgr.gif" alt="' . get_lang('Print') . '" /> ' . get_lang('Print') . '</a>';
print_r($new_content_html);
exit;
}
@ -383,7 +378,7 @@ $htmlHeadXtra[] = api_get_js('yoxview/yoxview-init.js');
$js_path = api_get_path(WEB_LIBRARY_PATH).'javascript/';
$htmlHeadXtra[] = '<link rel="stylesheet" href="'.$js_path.'yoxview/yoxview.css" type="text/css">';
$htmlHeadXtra[] = '<link rel="stylesheet" href="'.$js_path.'jquery-jplayer/skins/blue/jplayer.blue.monday.css" type="text/css">';
$htmlHeadXtra[] = '<link rel="stylesheet" href="'.$js_path.'jquery-jplayer/skins/chamilo/jplayer.blue.monday.css" type="text/css">';
$htmlHeadXtra[] = '<script type="text/javascript" src="'.$js_path.'jquery-jplayer/jquery.jplayer.min.js"></script>';
$mediaplayer_path = api_get_path(WEB_LIBRARY_PATH).'mediaplayer/player.swf';
@ -401,9 +396,10 @@ if (!empty($docs_and_folders))
foreach ($docs_and_folders as $file) {
if ($file['filetype'] == 'file') {
$path_info = pathinfo($file['path']);
//@todo use a js loop to autogenerate this code
if (in_array($path_info['extension'], array('ogg', 'mp3', 'wav'))) {
$document_data = DocumentManager::get_document_data_by_id($file['id'], api_get_course_id());
if ($path_info['extension'] == 'ogg') {
$path_info['extension'] = 'oga';
}
@ -436,7 +432,6 @@ $(document).ready( function() {
//Experimental changes to preview mp3, ogg files
'.$jquery.'
//Keep this down otherwise the jquery player will not work
for (i=0;i<$(".actions").length;i++) {
if ($(".actions:eq("+i+")").html()=="<table border=\"0\"></table>" || $(".actions:eq("+i+")").html()=="" || $(".actions:eq("+i+")").html()==null) {
@ -965,24 +960,18 @@ if (isset($docs_and_folders) && is_array($docs_and_folders)) {
}
// Icons (clickable)
$row[] = create_document_link($document_data, true);
// Validacion when belongs to a session
$session_img = api_get_session_image($document_data['session_id'], $_user['status']);
$row[] = create_document_link($document_data, true, $count);
$path_info = pathinfo($document_data['path']);
if (in_array($path_info['extension'], array('ogg', 'mp3','wav'))) {
$sound_preview = DocumentManager::generate_mp3_preview($count);
$count ++;
} else {
$sound_preview = '';
}
// Validacion when belongs to a session
$session_img = api_get_session_image($document_data['session_id'], $_user['status']);
// Document title with hyperlink
$row[] = create_document_link($document_data).$session_img.'<br />'.$invisibility_span_open.'<i>'.nl2br(htmlspecialchars($document_data['comment'],ENT_QUOTES,$charset)).'</i>'.$invisibility_span_close.$user_link.$sound_preview;
$row[] = create_document_link($document_data).$session_img.'<br />'.$invisibility_span_open.'<i>'.nl2br(htmlspecialchars($document_data['comment'],ENT_QUOTES,$charset)).'</i>'.$invisibility_span_close.$user_link;
// Comments => display comment under the document name
$display_size = format_file_size($size);

@ -0,0 +1,449 @@
/*
* 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
*/
div.jp-audio,
div.jp-video {
/* Edit the font-size to counteract inherited font sizing.
* Eg. 1.25em = 1 / 0.8em
*/
font-size:1.25em;
font-family:Verdana, Arial, sans-serif;
line-height:1.6;
color: #666;
}
div.jp-audio {
width:20px;
}
div.jp-video-270p {
width:480px;
}
div.jp-video-360p {
width:640px;
}
div.jp-interface {
position: relative;
/*background-color:#fff;
* border:1px solid #fff;
* width:418px; */
width:100%;
}
div.jp-audio div.jp-type-single div.jp-interface {
height:30px;
border-bottom:none;
}
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: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:-8px;
left:-5px;
}
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.blue.monday.png") 0 0 no-repeat;
}
a.jp-play:hover {
background: url("jplayer.blue.monday.png") -41px 0 no-repeat;
}
a.jp-pause {
background: url("jplayer.blue.monday.png") 0 -42px no-repeat;
display: none;
}
a.jp-pause:hover {
background: url("jplayer.blue.monday.png") -41px -42px 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.blue.monday.png") 0 -83px no-repeat;
width:28px;
height:28px;
z-index:1;
}
a.jp-stop:hover {
background: url("jplayer.blue.monday.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.blue.monday.png") 0 -112px no-repeat;
width:28px;
height:28px;
}
a.jp-previous:hover {
background: url("jplayer.blue.monday.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.blue.monday.png") 0 -141px no-repeat;
width:28px;
height:28px;
}
a.jp-next:hover {
background: url("jplayer.blue.monday.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.blue.monday.png") 0 -202px repeat-x;
width:0px;
/* height:15px; */
height:100%;
cursor: pointer;
}
div.jp-play-bar {
background: url("jplayer.blue.monday.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 {
width:18px;
height:15px;
}
div.jp-audio div.jp-type-single a.jp-mute,
div.jp-audio div.jp-type-single a.jp-unmute {
top:32px;
left:274px;
}
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.blue.monday.png") 0 -186px no-repeat;
}
a.jp-mute:hover {
background: url("jplayer.blue.monday.png") -19px -170px no-repeat;
}
a.jp-unmute {
background: url("jplayer.blue.monday.png") 0 -170px no-repeat;
display: none;
}
a.jp-unmute:hover {
background: url("jplayer.blue.monday.png") -19px -186px no-repeat;
}
div.jp-volume-bar {
position: absolute;
overflow:hidden;
background: url("jplayer.blue.monday.png") 0 -250px repeat-x;
width:46px;
height:5px;
cursor: pointer;
}
div.jp-audio div.jp-type-single div.jp-volume-bar {
top:37px;
left:302px;
}
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: url("jplayer.blue.monday.png") 0 -256px repeat-x;
width:0px;
height:5px;
}
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-video div.jp-playlist li {
padding:5px 0 5px 20px;
font-weight:bold;
}
*/
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: #000000;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 11 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.6 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.8 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 297 KiB

Loading…
Cancel
Save