Various: Added playback progress indicator for audio files (CDR, VM, etc).

This commit is contained in:
Nate Jones 2015-04-13 22:26:50 +00:00
parent 862d4bf7aa
commit bb75eeb191
7 changed files with 90 additions and 15 deletions

View File

@ -352,13 +352,17 @@ if ($_GET['act'] == "del" && permission_exists('music_on_hold_delete')) {
if ($handle = opendir($music_on_hold_dir."/".$sampling_rate_dir)) {
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != ".." && is_file($music_on_hold_dir."/".$sampling_rate_dir."/".$file)) {
$row_uuid = uuid();
$file_size = filesize($music_on_hold_dir."/".$sampling_rate_dir."/".$file);
$file_size = byte_convert($file_size);
//playback progress bar
echo "<tr id='recording_progress_bar_".$row_uuid."' style='display: none;'><td colspan='5'><span id='recording_progress_".$row_uuid."' style='background-color: #c43e42; height:1px; display: inline-block;'></span></td></tr>\n";
echo "<tr>\n";
echo " <td class='".$row_style[$c]."'>".$file."</td>\n";
if (strlen($file) > 0) {
$row_uuid = uuid();
echo " <td valign='top' class='".$row_style["2"]." ".((!$c) ? "row_style_hor_mir_grad" : null)." tr_link_void'>";
$recording_file_path = $file;
$recording_file_name = strtolower(pathinfo($recording_file_path, PATHINFO_BASENAME));
@ -368,7 +372,7 @@ if ($_GET['act'] == "del" && permission_exists('music_on_hold_delete')) {
case "mp3" : $recording_type = "audio/mpeg"; break;
case "ogg" : $recording_type = "audio/ogg"; break;
}
echo "<audio id='recording_audio_".$row_uuid."' style='display: none;' preload='none' onended=\"recording_reset('".$row_uuid."');\" src=\"".PROJECT_PATH."/app/music_on_hold/music_on_hold.php?a=download&sampling_rate=".$sampling_rate_dir."&type=moh&file_name=".base64_encode($recording_file_path)."\" type='".$recording_type."'></audio>";
echo "<audio id='recording_audio_".$row_uuid."' style='display: none;' preload='none' ontimeupdate=\"update_progress('".$row_uuid."')\" onended=\"recording_reset('".$row_uuid."');\" src=\"".PROJECT_PATH."/app/music_on_hold/music_on_hold.php?a=download&sampling_rate=".$sampling_rate_dir."&type=moh&file_name=".base64_encode($recording_file_path)."\" type='".$recording_type."'></audio>";
echo "<span id='recording_button_".$row_uuid."' onclick=\"recording_play('".$row_uuid."')\" title='".$text['label-play']." / ".$text['label-pause']."'>".$v_link_label_play."</span>";
echo "<a href=\"".PROJECT_PATH."/app/music_on_hold/music_on_hold.php?a=download&sampling_rate=".$sampling_rate_dir."&type=moh&t=bin&file_name=".base64_encode($recording_file_path)."\" title='".$text['label-download']."'>".$v_link_label_download."</a>";
}
@ -422,14 +426,17 @@ if ($_GET['act'] == "del" && permission_exists('music_on_hold_delete')) {
if ($handle = opendir($music_on_hold_category_parent_dir."/".$category_dir."/".$sampling_rate_dir)) {
while (false !== ($file = readdir($handle))) {
if ($file != "." && $file != ".." && is_file($music_on_hold_category_parent_dir."/".$category_dir."/".$sampling_rate_dir."/".$file)) {
$row_uuid = uuid();
$file_size = filesize($music_on_hold_category_parent_dir."/".$category_dir."/".$sampling_rate_dir."/".$file);
$file_size = byte_convert($file_size);
//playback progress bar
echo "<tr id='recording_progress_bar_".$row_uuid."' style='display: none;'><td colspan='5'><span class='playback_progress_bar' id='recording_progress_".$row_uuid."'></span></td></tr>\n";
echo "<tr>\n";
echo " <td class='".$row_style[$c]."'>".$file."</td>\n";
if (strlen($file) > 0) {
$row_uuid = uuid();
echo " <td valign='top' class='".$row_style["2"]." ".((!$c) ? "row_style_hor_mir_grad" : null)." tr_link_void'>";
$recording_file_path = $file;
$recording_file_name = strtolower(pathinfo($row['recording_filename'], PATHINFO_BASENAME));
@ -439,7 +446,7 @@ if ($_GET['act'] == "del" && permission_exists('music_on_hold_delete')) {
case "mp3" : $recording_type = "audio/mpeg"; break;
case "ogg" : $recording_type = "audio/ogg"; break;
}
echo "<audio id='recording_audio_".$row_uuid."' style='display: none;' preload='none' onended=\"recording_reset('".$row_uuid."');\" src=\"".PROJECT_PATH."/app/music_on_hold/music_on_hold.php?a=download&category=".$category_dir."&sampling_rate=".$sampling_rate_dir."&type=moh&file_name=".base64_encode($recording_file_path)."\" type='".$recording_type."'></audio>";
echo "<audio id='recording_audio_".$row_uuid."' style='display: none;' preload='none' ontimeupdate=\"update_progress('".$row_uuid."')\" onended=\"recording_reset('".$row_uuid."');\" src=\"".PROJECT_PATH."/app/music_on_hold/music_on_hold.php?a=download&category=".$category_dir."&sampling_rate=".$sampling_rate_dir."&type=moh&file_name=".base64_encode($recording_file_path)."\" type='".$recording_type."'></audio>";
echo "<span id='recording_button_".$row_uuid."' onclick=\"recording_play('".$row_uuid."')\" title='".$text['label-play']." / ".$text['label-pause']."'>".$v_link_label_play."</span>";
echo "<a href=\"".PROJECT_PATH."/app/music_on_hold/music_on_hold.php?a=download&category=".$category_dir."&sampling_rate=".$sampling_rate_dir."&type=moh&t=bin&file_name=".base64_encode($recording_file_path)."\" title='".$text['label-download']."'>".$v_link_label_download."</a>";
}

View File

@ -57,7 +57,7 @@ require_once "resources/check_auth.php";
header("Content-Type: audio/x-wav");
}
if ($file_ext == "mp3") {
header("Content-Type: audio/mp3");
header("Content-Type: audio/mpeg");
}
}
header('Content-Disposition: attachment; filename="'.base64_decode($_GET['filename']).'"');
@ -217,6 +217,9 @@ require_once "resources/check_auth.php";
$tmp_filesize = filesize($_SESSION['switch']['recordings']['dir'].'/'.$row['recording_filename']);
$tmp_filesize = byte_convert($tmp_filesize);
//playback progress bar
echo "<tr id='recording_progress_bar_".$row['recording_uuid']."' style='display: none;'><td colspan='5'><span class='playback_progress_bar' id='recording_progress_".$row['recording_uuid']."'></span></td></tr>\n";
$tr_link = (permission_exists('recording_edit')) ? "href='recording_edit.php?id=".$row['recording_uuid']."'" : null;
echo "<tr ".$tr_link.">\n";
echo " <td valign='top' class='".$row_style[$c]."'>";
@ -237,7 +240,7 @@ require_once "resources/check_auth.php";
case "mp3" : $recording_type = "audio/mpeg"; break;
case "ogg" : $recording_type = "audio/ogg"; break;
}
echo "<audio id='recording_audio_".$row['recording_uuid']."' style='display: none;' preload='none' onended=\"recording_reset('".$row['recording_uuid']."');\" src=\"".PROJECT_PATH."/app/recordings/recordings.php?a=download&type=rec&filename=".base64_encode($recording_file_path)."\" type='".$recording_type."'></audio>";
echo "<audio id='recording_audio_".$row['recording_uuid']."' style='display: none;' preload='none' ontimeupdate=\"update_progress('".$row['recording_uuid']."')\" onended=\"recording_reset('".$row['recording_uuid']."');\" src=\"".PROJECT_PATH."/app/recordings/recordings.php?a=download&type=rec&filename=".base64_encode($recording_file_path)."\" type='".$recording_type."'></audio>";
echo "<span id='recording_button_".$row['recording_uuid']."' onclick=\"recording_play('".$row['recording_uuid']."')\" title='".$text['label-play']." / ".$text['label-pause']."'>".$v_link_label_play."</span>";
echo "<a href=\"".PROJECT_PATH."/app/recordings/recordings.php?a=download&type=rec&t=bin&filename=".base64_encode($recording_file_path)."\" title='".$text['label-download']."'>".$v_link_label_download."</a>";
}

View File

@ -312,6 +312,10 @@ else {
foreach($result as $row) {
$tmp_filesize = filesize($v_greeting_dir.'/'.$row['greeting_name']);
$tmp_filesize = byte_convert($tmp_filesize);
//playback progress bar
echo "<tr id='recording_progress_bar_".$row['voicemail_greeting_uuid']."' style='display: none;'><td colspan='6'><span class='playback_progress_bar' id='recording_progress_".$row['voicemail_greeting_uuid']."'></span></td></tr>\n";
$tr_link = (permission_exists('voicemail_greeting_edit')) ? "href='voicemail_greeting_edit.php?id=".$row['voicemail_greeting_uuid']."&voicemail_id=".$voicemail_id."'" : null;
echo "<tr ".$tr_link.">\n";
echo " <td class='".$row_style[$c]." tr_link_void' width='30px;' valign='top'>\n";
@ -334,7 +338,7 @@ else {
case "mp3" : $recording_type = "audio/mpeg"; break;
case "ogg" : $recording_type = "audio/ogg"; break;
}
echo "<audio id='recording_audio_".$row['voicemail_greeting_uuid']."' style='display: none;' preload='none' onended=\"recording_reset('".$row['voicemail_greeting_uuid']."');\" src=\"voicemail_greetings.php?id=".$voicemail_id."&a=download&type=rec&filename=".base64_encode($recording_file_path)."\" type='".$recording_type."'></audio>";
echo "<audio id='recording_audio_".$row['voicemail_greeting_uuid']."' style='display: none;' preload='none' ontimeupdate=\"update_progress('".$row['voicemail_greeting_uuid']."')\" onended=\"recording_reset('".$row['voicemail_greeting_uuid']."');\" src=\"voicemail_greetings.php?id=".$voicemail_id."&a=download&type=rec&filename=".base64_encode($recording_file_path)."\" type='".$recording_type."'></audio>";
echo "<span id='recording_button_".$row['voicemail_greeting_uuid']."' onclick=\"recording_play('".$row['voicemail_greeting_uuid']."')\" title='".$text['label-play']." / ".$text['label-pause']."'>".$v_link_label_play."</span>";
echo "<a href=\"voicemail_greetings.php?id=".$voicemail_id."&a=download&type=rec&t=bin&filename=".base64_encode($recording_file_path)."\" title='".$text['label-download']."'>".$v_link_label_download."</a>";
}

View File

@ -138,7 +138,11 @@ if (!(check_str($_REQUEST["action"]) == "download" && check_str($_REQUEST["src"]
if (count($field['messages']) > 0) {
foreach($field['messages'] as &$row) {
if ($row['message_status'] == '') { $style = "font-weight: bold;"; } else { $style = ''; }
$style = ($row['message_status'] == '') ? "font-weight: bold;" : null;
//playback progress bar
echo "<tr id='recording_progress_bar_".$row['voicemail_message_uuid']."' style='display: none;'><td colspan='6'><span class='playback_progress_bar' id='recording_progress_".$row['voicemail_message_uuid']."'></span></td></tr>\n";
echo "<tr>\n";
echo " <td valign='top' class='".$row_style[$c]."' style=\"".$style."\" nowrap='nowrap'>".$row['created_date']."</td>\n";
echo " <td valign='top' class='".$row_style[$c]."' style=\"".$style."\">".$row['caller_id_name']."&nbsp;</td>\n";
@ -152,7 +156,7 @@ if (!(check_str($_REQUEST["action"]) == "download" && check_str($_REQUEST["src"]
case "mp3" : $recording_type = "audio/mpeg"; break;
case "ogg" : $recording_type = "audio/ogg"; break;
}
echo "<audio id='recording_audio_".$row['voicemail_message_uuid']."' style='display: none;' preload='none' onended=\"recording_reset('".$row['voicemail_message_uuid']."');\" src=\"voicemail_messages.php?action=download&type=vm&id=".$row['voicemail_id']."&voicemail_uuid=".$row['voicemail_uuid']."&uuid=".$row['voicemail_message_uuid']."\" type='".$recording_type."'></audio>";
echo "<audio id='recording_audio_".$row['voicemail_message_uuid']."' style='display: none;' ontimeupdate=\"update_progress('".$row['voicemail_message_uuid']."')\" preload='none' onended=\"recording_reset('".$row['voicemail_message_uuid']."');\" src=\"voicemail_messages.php?action=download&type=vm&id=".$row['voicemail_id']."&voicemail_uuid=".$row['voicemail_uuid']."&uuid=".$row['voicemail_message_uuid']."\" type='".$recording_type."'></audio>";
echo "<span id='recording_button_".$row['voicemail_message_uuid']."' onclick=\"recording_play('".$row['voicemail_message_uuid']."')\" title='".$text['label-play']." / ".$text['label-pause']."'>".$v_link_label_play."</span>";
echo "<a href=\"voicemail_messages.php?action=download&type=vm&t=bin&id=".$row['voicemail_id']."&voicemail_uuid=".$row['voicemail_uuid']."&uuid=".$row['voicemail_message_uuid']."\" title='".$text['label-download']."'>".$v_link_label_download."</a>";
echo " </td>\n";

View File

@ -316,21 +316,25 @@ else {
$param = substr($param, 0, strrpos($param, '&order_by=')); //remove trailing order by
//show the results
$col_count = 8;
echo "<form name='frm' method='post' action='xml_cdr_delete.php'>\n";
echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0'>\n";
echo "<table class='tr_hover' width='100%' cellpadding='0' cellspacing='0' border='0'>\n";
echo "<tr>\n";
if (permission_exists('xml_cdr_delete') && $result_count > 0) {
echo "<th style='width: 30px; text-align: center; padding: 0px;'><input type='checkbox' onchange=\"(this.checked) ? check('all') : check('none');\"></th>";
$col_count++;
}
echo "<th>&nbsp;</th>\n";
if ($_GET['showall'] && permission_exists('xml_cdr_all')) {
echo th_order_by('domain_name', $text['label-domain'], $order_by, $order, null, null, $param);
$col_count++;
}
echo th_order_by('caller_id_name', $text['label-cid-name'], $order_by, $order, null, null, $param);
echo th_order_by('caller_id_number', $text['label-source'], $order_by, $order, null, null, $param);
echo th_order_by('destination_number', $text['label-destination'], $order_by, $order, null, null, $param);
if (permission_exists('recording_play') || permission_exists('recording_download')) {
echo "<th>".$text['label-recording']."</th>\n";
$col_count++;
}
echo th_order_by('start_stamp', $text['label-start'], $order_by, $order, null, "style='text-align: center;'", $param);
echo th_order_by('tta', $text['label-tta'], $order_by, $order, null, "style='text-align: right;'", $param);
@ -338,12 +342,15 @@ else {
if (file_exists($_SERVER['DOCUMENT_ROOT'].PROJECT_PATH."/app/billing/app_config.php")){
// billing collumns
echo "<th>".$text['label-price']."</th>\n";
$col_count++;
}
if (permission_exists('xml_cdr_pdd')) {
echo th_order_by('pdd_ms', 'PDD', $order_by, $order, null, "style='text-align: right;'", $param);
$col_count++;
}
if (permission_exists('xml_cdr_mos')) {
echo th_order_by('rtp_audio_in_mos', 'MOS', $order_by, $order, null, "style='text-align: center;'", $param);
$col_count++;
}
echo th_order_by('hangup_cause', $text['label-status'], $order_by, $order, $param);
if (if_group("admin") || if_group("superadmin") || if_group("cdr")) {
@ -352,6 +359,7 @@ else {
echo "<a href='javascript:void(0);' onclick=\"if (confirm('".$text['confirm-delete']."')) { document.forms.frm.submit(); }\" alt='".$text['button-delete']."'>".$v_link_label_delete."</a>";
}
echo "</td>\n";
$col_count++;
}
echo "</tr>\n";
if (file_exists($_SERVER['DOCUMENT_ROOT'].PROJECT_PATH."/app/billing/app_config.php")){
@ -432,6 +440,11 @@ else {
}
}
//recording playback progress bar
if (permission_exists('recording_play') && $recording_file_path != '') {
echo "<tr id='recording_progress_bar_".$row['uuid']."' style='display: none;'><td colspan='".((if_group("admin") || if_group("superadmin") || if_group("cdr")) ? ($col_count - 1) : $col_count)."'><span class='playback_progress_bar' id='recording_progress_".$row['uuid']."'></span></td></tr>\n";
}
if (if_group("admin") || if_group("superadmin") || if_group("cdr")) {
$tr_link = "href='xml_cdr_details.php?uuid=".$row['uuid'].(($_GET['showall']) ? "&showall=true" : null)."'";
}
@ -517,7 +530,7 @@ else {
if ($recording_file_path != '') {
echo " <td valign='top' align='center' class='".$row_style["2"]." ".((!$c) ? "row_style_hor_mir_grad" : null)." tr_link_void' nowrap='nowrap'>";
if (permission_exists('recording_play')) {
echo "<audio id='recording_audio_".$row['uuid']."' style='display: none;' preload='none' onended=\"recording_reset('".$row['uuid']."');\" src=\"".PROJECT_PATH."/app/recordings/recordings.php?a=download&type=rec&filename=".base64_encode($recording_file_path)."\" type='".$recording_type."'></audio>";
echo "<audio id='recording_audio_".$row['uuid']."' style='display: none;' preload='none' ontimeupdate=\"update_progress('".$row['uuid']."')\" onended=\"recording_reset('".$row['uuid']."');\" src=\"".PROJECT_PATH."/app/recordings/recordings.php?a=download&type=rec&filename=".base64_encode($recording_file_path)."\" type='".$recording_type."'></audio>";
echo "<span id='recording_button_".$row['uuid']."' onclick=\"recording_play('".$row['uuid']."')\" title='".$text['label-play']." / ".$text['label-pause']."'>".$v_link_label_play."</span>";
}
if (permission_exists('recording_download')) {
@ -614,7 +627,7 @@ else {
echo " </td>\n";
}
echo "</tr>\n";
if ($c==0) { $c=1; } else { $c=0; }
$c = ($c) ? 0 : 1;
} //end foreach
unset($sql, $result, $row_count);
} //end if results

View File

@ -1171,6 +1171,12 @@ legend {
/* operator panel styles end */
SPAN.playback_progress_bar {
background-color: #c43e42;
height: 1px;
display: inline-block;
}
</style>
<script type="text/javascript">
@ -1294,6 +1300,9 @@ legend {
var recording_audio;
function recording_play(recording_id) {
if (document.getElementById('recording_progress_bar_'+recording_id)) {
document.getElementById('recording_progress_bar_'+recording_id).style.display='';
}
recording_audio = document.getElementById('recording_audio_'+recording_id)
if (recording_audio.paused) {
@ -1307,8 +1316,21 @@ legend {
}
function recording_reset(recording_id) {
if (document.getElementById('recording_progress_bar_'+recording_id)) {
document.getElementById('recording_progress_bar_'+recording_id).style.display='none';
}
document.getElementById('recording_button_'+recording_id).innerHTML = "<?php echo $v_link_label_play; ?>";
}
function update_progress(recording_id) {
recording_audio = document.getElementById('recording_audio_'+recording_id);
var recording_progress = document.getElementById('recording_progress_'+recording_id);
var value = 0;
if (recording_audio.currentTime > 0) {
value = Math.floor((100 / recording_audio.duration) * recording_audio.currentTime);
}
recording_progress.style.width = value + "%";
}
</script>
</head>

View File

@ -1165,6 +1165,12 @@ legend {
/* operator panel styles end */
SPAN.playback_progress_bar {
background-color: #c43e42;
height: 1px;
display: inline-block;
}
</style>
<script type="text/javascript">
@ -1307,20 +1313,36 @@ legend {
var recording_audio;
function recording_play(recording_id) {
if (document.getElementById('recording_progress_bar_'+recording_id)) {
document.getElementById('recording_progress_bar_'+recording_id).style.display='';
}
recording_audio = document.getElementById('recording_audio_'+recording_id)
if (recording_audio.paused) {
recording_audio.play();
document.getElementById('recording_button_'+recording_id).innerHTML = "<?php echo str_replace("class='list_control_icon'", "class='list_control_icon' style='opacity: 1;'", $v_link_label_pause)?>";
document.getElementById('recording_button_'+recording_id).innerHTML = "<?php echo str_replace("class='list_control_icon'", "class='list_control_icon' style='opacity: 1;'", $v_link_label_pause); ?>";
}
else {
recording_audio.pause();
document.getElementById('recording_button_'+recording_id).innerHTML = "<?php echo $v_link_label_play?>";
document.getElementById('recording_button_'+recording_id).innerHTML = "<?php echo $v_link_label_play; ?>";
}
}
function recording_reset(recording_id) {
document.getElementById('recording_button_'+recording_id).innerHTML = "<?php echo $v_link_label_play?>";
if (document.getElementById('recording_progress_bar_'+recording_id)) {
document.getElementById('recording_progress_bar_'+recording_id).style.display='none';
}
document.getElementById('recording_button_'+recording_id).innerHTML = "<?php echo $v_link_label_play; ?>";
}
function update_progress(recording_id) {
recording_audio = document.getElementById('recording_audio_'+recording_id);
var recording_progress = document.getElementById('recording_progress_'+recording_id);
var value = 0;
if (recording_audio.currentTime > 0) {
value = Math.floor((100 / recording_audio.duration) * recording_audio.currentTime);
}
recording_progress.style.width = value + "%";
}
</script>