CDR: Added new HTML5 recording playback and download controls.

This commit is contained in:
Nate Jones
2014-09-11 03:14:52 +00:00
parent bf43288cb8
commit 6d049b8f5b
13 changed files with 109 additions and 24 deletions

View File

@@ -115,6 +115,11 @@
$text['label-play']['pt-pt'] = "Tocar";
$text['label-play']['fr-fr'] = "Jouer";
$text['label-pause']['en-us'] = "Pause";
$text['label-pause']['es-cl'] = "Pausa";
$text['label-pause']['pt-pt'] = "Pausa";
$text['label-pause']['fr-fr'] = "Pause";
$text['label-download']['en-us'] = "Download";
$text['label-download']['es-cl'] = "Descargar";
$text['label-download']['pt-pt'] = "Descarregar";

View File

@@ -348,7 +348,6 @@ else {
echo th_order_by('caller_id_name', $text['label-cid-name'], $order_by, $order);
echo th_order_by('caller_id_number', $text['label-source'], $order_by, $order);
echo th_order_by('destination_number', $text['label-destination'], $order_by, $order);
echo "<th>".$text['label-tools']."</th>\n";
echo th_order_by('start_stamp', $text['label-start'], $order_by, $order);
echo th_order_by('tta', 'TTA', $order_by, $order);
//echo th_order_by('end_stamp', 'End', $order_by, $order);
@@ -364,6 +363,7 @@ else {
echo th_order_by('rtp_audio_in_mos', 'MOS', $order_by, $order);
}
echo th_order_by('hangup_cause', $text['label-status'], $order_by, $order);
echo "<th>".$text['label-tools']."</th>\n";
if (if_group("admin") || if_group("superadmin") || if_group("cdr")) {
echo "<td class='list_control_icon'>&nbsp;</td>\n";
}
@@ -486,22 +486,6 @@ else {
}
echo " </a>\n";
echo " </td>\n";
echo " <td valign='top' class='".$row_style[$c]."' nowrap=\"nowrap\">";
if (strlen($tmp_name) > 0 && file_exists($_SESSION['switch']['recordings']['dir'].'/archive/'.$tmp_year.'/'.$tmp_month.'/'.$tmp_day.'/'.$tmp_name)) {
echo " <a href=\"javascript:void(0);\" onclick=\"window.open('".PROJECT_PATH."/app/recordings/recording_play.php?a=download&type=moh&filename=".base64_encode('archive/'.$tmp_year.'/'.$tmp_month.'/'.$tmp_day.'/'.$tmp_name)."', 'play',' width=420,height=150,menubar=no,status=no,toolbar=no')\">\n";
echo " ".$text['label-play']."\n";
echo " </a>\n";
echo " &nbsp;\n";
echo " <a href=\"../recordings/recordings.php?a=download&type=rec&t=bin&filename=".base64_encode("archive/".$tmp_year."/".$tmp_month."/".$tmp_day."/".$tmp_name)."\">\n";
echo " ".$text['label-download']."\n";
echo " </a>\n";
}
else {
echo " &nbsp;\n";
}
echo " </td>\n";
echo " <td valign='top' class='".$row_style[$c]."'>".$tmp_start_epoch."</td>\n";
//echo " <td valign='top' class='".$row_style[$c]."'>".$row['end_stamp']."</td>\n";
@@ -551,9 +535,28 @@ else {
echo $hangup_cause;
}
echo " </td>\n";
if (strlen($tmp_name) > 0 && file_exists($_SESSION['switch']['recordings']['dir'].'/archive/'.$tmp_year.'/'.$tmp_month.'/'.$tmp_day.'/'.$tmp_name)) {
echo " <td valign='top' class='".$row_style["2"]." tr_link_void'>";
$recording_file_path = '/archive/'.$tmp_year.'/'.$tmp_month.'/'.$tmp_day.'/'.$tmp_name;
$recording_file_name = strtolower(pathinfo($tmp_name, PATHINFO_BASENAME));
$recording_file_ext = pathinfo($recording_file_name, PATHINFO_EXTENSION);
switch ($recording_file_ext) {
case "wav" : $recording_type = "audio/wave"; break;
case "mp3" : $recording_type = "audio/mpeg"; break;
case "ogg" : $recording_type = "audio/ogg"; break;
}
echo "<audio id='recording_audio_".$row['uuid']."' style='display: none;' controls='controls' 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>";
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>";
}
else {
echo " <td valign='top' class='".$row_style[$c]." tr_link_void'>";
echo "&nbsp;";
}
echo " </td>\n";
if (if_group("admin") || if_group("superadmin") || if_group("cdr")) {
echo " <td class='list_control_icon'>";
echo " <a href='xml_cdr_details.php?uuid=".$row['uuid']."' alt='".$text['button-view']."'>$v_link_label_view</a>";
echo " <a href='xml_cdr_details.php?uuid=".$row['uuid']."' title='".$text['button-view']."'>$v_link_label_view</a>";
echo " </td>\n";
}
echo "</tr>\n";

View File

@@ -267,5 +267,6 @@ else {
$c = 0;
$row_style["0"] = "row_style0";
$row_style["1"] = "row_style1";
$row_style["2"] = "row_style2";
?>

View File

@@ -5,5 +5,8 @@
$v_link_label_add = "<img src='".PROJECT_PATH."/themes/enhanced/images/icon_add.png' class='list_control_icon'>";
$v_link_label_delete = "<img src='".PROJECT_PATH."/themes/enhanced/images/icon_delete.png' class='list_control_icon'>";
$v_link_label_view = "<img src='".PROJECT_PATH."/themes/enhanced/images/icon_view.png' class='list_control_icon'>";
$v_link_label_play = "<img src='".PROJECT_PATH."/themes/enhanced/images/icon_play.png' class='list_control_icon'>";
$v_link_label_pause = "<img src='".PROJECT_PATH."/themes/enhanced/images/icon_pause.png' class='list_control_icon'>";
$v_link_label_download = "<img src='".PROJECT_PATH."/themes/enhanced/images/icon_download.png' class='list_control_icon'>";
?>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@@ -209,7 +209,7 @@ td {
td.list_control_icons {
/* multiple icons exist (horizontally) */
padding: none;
padding-left: 3px;
padding-left: 2px;
width: 50px;
text-align: right;
vertical-align: top;
@@ -432,6 +432,16 @@ table.tr_hover tr:hover td a {
padding: 5px 7px;
}
.row_style2 {
border-bottom: 1px solid #c5d1e5;
background-color: #fff;
color: #000;
text-align: left;
padding: 0 0 0 2px;
width: 42px;
white-space: nowrap;
}
.row_stylebg {
border-bottom: 1px solid #b9c5d8;
background-color: #f0f2f6;
@@ -1065,6 +1075,31 @@ legend {
}
</script>
<script type='text/javascript'>
// preload images
img_play = new Image(); img_play.src = "<?=$v_link_label_play?>";
img_pause = new Image(); img_pause.src = "<?=$v_link_label_pause?>";
var recording_audio;
function recording_play(recording_id) {
recording_audio = document.getElementById('recording_audio_'+recording_id)
if (recording_audio.paused) {
recording_audio.play();
document.getElementById('recording_button_'+recording_id).innerHTML = "<?=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 = "<?=$v_link_label_play?>";
}
}
function recording_reset(recording_id) {
document.getElementById('recording_button_'+recording_id).innerHTML = "<?=$v_link_label_play?>";
}
</script>
</head>
<?php

View File

@@ -1,9 +1,12 @@
<?php
//define the link labels
$v_link_label_edit = "<img src='".PROJECT_PATH."/themes/enhanced/images/icon_edit.png' class='list_control_icon'>";
$v_link_label_add = "<img src='".PROJECT_PATH."/themes/enhanced/images/icon_add.png' class='list_control_icon'>";
$v_link_label_delete = "<img src='".PROJECT_PATH."/themes/enhanced/images/icon_delete.png' class='list_control_icon'>";
$v_link_label_view = "<img src='".PROJECT_PATH."/themes/enhanced/images/icon_view.png' class='list_control_icon'>";
$v_link_label_edit = "<img src='".PROJECT_PATH."/themes/minimized/images/icon_edit.png' class='list_control_icon'>";
$v_link_label_add = "<img src='".PROJECT_PATH."/themes/minimized/images/icon_add.png' class='list_control_icon'>";
$v_link_label_delete = "<img src='".PROJECT_PATH."/themes/minimized/images/icon_delete.png' class='list_control_icon'>";
$v_link_label_view = "<img src='".PROJECT_PATH."/themes/minimized/images/icon_view.png' class='list_control_icon'>";
$v_link_label_play = "<img src='".PROJECT_PATH."/themes/minimized/images/icon_play.png' class='list_control_icon'>";
$v_link_label_pause = "<img src='".PROJECT_PATH."/themes/minimized/images/icon_pause.png' class='list_control_icon'>";
$v_link_label_download = "<img src='".PROJECT_PATH."/themes/minimized/images/icon_download.png' class='list_control_icon'>";
?>

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.5 KiB

View File

@@ -209,7 +209,7 @@ td {
td.list_control_icons {
/* multiple icons exist (horizontally) */
padding: none;
padding-left: 3px;
padding-left: 2px;
width: 50px;
text-align: right;
vertical-align: top;
@@ -432,6 +432,16 @@ table.tr_hover tr:hover td a {
padding: 5px 7px;
}
.row_style2 {
border-bottom: 1px solid #c5d1e5;
background-color: #fff;
color: #000;
text-align: left;
padding: 0 0 0 2px;
width: 42px;
white-space: nowrap;
}
.row_stylebg {
border-bottom: 1px solid #b9c5d8;
background-color: #f0f2f6;
@@ -1079,6 +1089,31 @@ legend {
}
</script>
<script type='text/javascript'>
// preload images
img_play = new Image(); img_play.src = "<?=$v_link_label_play?>";
img_pause = new Image(); img_pause.src = "<?=$v_link_label_pause?>";
var recording_audio;
function recording_play(recording_id) {
recording_audio = document.getElementById('recording_audio_'+recording_id)
if (recording_audio.paused) {
recording_audio.play();
document.getElementById('recording_button_'+recording_id).innerHTML = "<?=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 = "<?=$v_link_label_play?>";
}
}
function recording_reset(recording_id) {
document.getElementById('recording_button_'+recording_id).innerHTML = "<?=$v_link_label_play?>";
}
</script>
</head>
<?php