CDR - Details: Display call recording playback/waveform, if allowed.

This commit is contained in:
fusionate
2025-06-23 13:24:14 -06:00
parent c53ee8c503
commit 17be5f51a3
3 changed files with 91 additions and 24 deletions

View File

@@ -500,6 +500,47 @@
echo "<br /><br />\n";
}
//call recording
if (permission_exists('xml_cdr_recording') && permission_exists('xml_cdr_recording_play')) {
//recording properties
if (!empty($record_path) && !empty($record_name) && permission_exists('xml_cdr_recording') && (permission_exists('xml_cdr_recording_play') || permission_exists('xml_cdr_recording_download'))) {
$record_extension = pathinfo($record_name, PATHINFO_EXTENSION);
switch ($record_extension) {
case "wav" : $record_type = "audio/wav"; break;
case "mp3" : $record_type = "audio/mpeg"; break;
case "ogg" : $record_type = "audio/ogg"; break;
}
}
echo "<table width='100%' border='0' cellpadding='0' cellspacing='0'>\n";
echo "<tr>\n";
echo " <td align='left'><b>".$text['label-recording']."</b>&nbsp;</td>\n";
echo " <td align='right'>\n";
//controls
if (!empty($record_path) || !empty($record_name)) {
echo "<audio id='recording_audio_".escape($xml_cdr_uuid)."' style='display: none;' preload='none' ontimeupdate=\"update_progress('".escape($xml_cdr_uuid)."')\" onended=\"recording_reset('".escape($xml_cdr_uuid)."');\" src=\"download.php?id=".escape($xml_cdr_uuid)."\" type='".escape($record_type)."'></audio>";
echo button::create(['type'=>'button','title'=>$text['label-play'].' / '.$text['label-pause'],'icon'=>$settings->get('theme', 'button_icon_play'),'label'=>$text['label-play'],'id'=>'recording_button_'.escape($xml_cdr_uuid),'onclick'=>"recording_play('".escape($xml_cdr_uuid)."', null, null, 'true')",'style'=>'margin-bottom: 8px; margin-top: -8px;']);
if (permission_exists('xml_cdr_recording_download')) {
echo button::create(['type'=>'button','title'=>$text['label-download'],'icon'=>$settings->get('theme', 'button_icon_download'),'label'=>$text['label-download'],'onclick'=>"window.location.href='download.php?id=".urlencode($xml_cdr_uuid)."&t=bin';",'style'=>'margin-bottom: 8px; margin-top: -8px;']);
}
}
echo " </td>\n";
echo "</tr>\n";
echo "</table>\n";
echo "<div class='card'>\n";
//progress bar
echo "<table width='100%' border='0' cellpadding='0' cellspacing='0'>\n";
echo "<tr class='list-row' id='recording_progress_bar_".$xml_cdr_uuid."' onclick=\"recording_seek(event,'".escape($xml_cdr_uuid)."')\">\n";
echo "<td id='playback_progress_bar_background_".escape($xml_cdr_uuid)."' class='playback_progress_bar_background' style='padding: 0; background-size: 100% 100% !important;'>\n";
echo "<span class='playback_progress_bar' id='recording_progress_".$xml_cdr_uuid."'></span>\n";
echo "</td>\n";
echo "</tr>\n";
echo "</table>\n";
echo "</div>\n";
echo "<br /><br />\n";
echo "<script>recording_load('".escape($xml_cdr_uuid)."');</script>\n";
}
//show the call flow summary
echo "<table width='100%' border='0' cellpadding='0' cellspacing='0'>\n";
echo "<tr>\n";

View File

@@ -101,6 +101,8 @@
//set template variables
//add self
$view->assign('php_self', basename($_SERVER['PHP_SELF']));
//add translations
foreach($text as $key => $value) {
$array[str_replace('-', '_', $key)] = $value;

View File

@@ -715,37 +715,55 @@
{literal}
var recording_audio, audio_clock, recording_id_playing;
function recording_play(player_id, data, audio_type) {
function recording_load(player_id, data, audio_type) {
{/literal}
//create and load waveform image
{if $settings.theme.audio_player_waveform_enabled == 'true'}
{literal}
//list playback
if (document.getElementById('playback_progress_bar_background_' + player_id)) {
// alert("waveform.php?id=" + player_id + (data !== undefined ? '&data=' + data : '') + (audio_type !== undefined ? '&type=' + audio_type : ''));
document.getElementById('playback_progress_bar_background_' + player_id).style.backgroundImage = "linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, transparent 20%), url('waveform.php?id=" + player_id + (data !== undefined ? '&data=' + data : '') + (audio_type !== undefined ? '&type=' + audio_type : '') + "')";
}
//form playback
else if (document.getElementById('recording_progress_bar_' + player_id)) {
// alert("waveform.php?id=" + player_id + (data !== undefined ? '&data=' + data : '') + (audio_type !== undefined ? '&type=' + audio_type : ''));
document.getElementById('recording_progress_bar_' + player_id).style.backgroundImage = "linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, transparent 20%), url('waveform.php?id=" + player_id + (data !== undefined ? '&data=' + data : '') + (audio_type !== undefined ? '&type=' + audio_type : '') + "')";
}
{/literal}
{else}
{literal}
//list playback
if (document.getElementById('playback_progress_bar_background_' + player_id)) {
document.getElementById('playback_progress_bar_background_' + player_id).style.backgroundImage = "linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, transparent 100%)";
}
//form playback
else if (document.getElementById('recording_progress_bar_' + player_id)) {
document.getElementById('recording_progress_bar_' + player_id).style.backgroundImage = "linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, transparent 100%)";
}
{/literal}
{/if}
{literal}
}
function recording_play(player_id, data, audio_type, label) {
if (document.getElementById('recording_progress_bar_' + player_id)) {
document.getElementById('recording_progress_bar_' + player_id).style.display='';
}
recording_audio = document.getElementById('recording_audio_' + player_id);
var label_play = "{/literal}{if $php_self == 'xml_cdr_details.php'}{literal}<span class='button-label pad'>{/literal}{$text.label_play}{literal}</span>{/literal}{/if}{literal}";
var label_pause = "{/literal}{if $php_self == 'xml_cdr_details.php'}{literal}<span class='button-label pad'>{/literal}{$text.label_pause}{literal}</span>{/literal}{/if}{literal}";
if (recording_audio.paused) {
{/literal}
//create and load waveform image
{if $settings.theme.audio_player_waveform_enabled == 'true'}
{literal}
//list playback
if (document.getElementById('playback_progress_bar_background_' + player_id)) {
// alert("waveform.php?id=" + player_id + (data !== undefined ? '&data=' + data : '') + (audio_type !== undefined ? '&type=' + audio_type : ''));
document.getElementById('playback_progress_bar_background_' + player_id).style.backgroundImage = "linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, transparent 20%), url('waveform.php?id=" + player_id + (data !== undefined ? '&data=' + data : '') + (audio_type !== undefined ? '&type=' + audio_type : '') + "')";
}
//form playback
else if (document.getElementById('recording_progress_bar_' + player_id)) {
// alert("waveform.php?id=" + player_id + (data !== undefined ? '&data=' + data : '') + (audio_type !== undefined ? '&type=' + audio_type : ''));
document.getElementById('recording_progress_bar_' + player_id).style.backgroundImage = "linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, transparent 20%), url('waveform.php?id=" + player_id + (data !== undefined ? '&data=' + data : '') + (audio_type !== undefined ? '&type=' + audio_type : '') + "')";
}
{/literal}
{/if}
{literal}
recording_load(player_id, data, audio_type);
recording_audio.volume = 1;
recording_audio.play();
recording_id_playing = player_id;
document.getElementById('recording_button_' + player_id).innerHTML = "<span class='{/literal}{$settings.theme.button_icon_pause}{literal} fa-fw'></span>";
document.getElementById('recording_button_' + player_id).innerHTML = "<span class='{/literal}{$settings.theme.button_icon_pause}{literal} fa-fw'></span>" + (label_pause ?? '');
audio_clock = setInterval(function () { update_progress(player_id); }, 20);
$('[id*=recording_button]').not('[id*=recording_button_' + player_id + ']').html("<span class='{/literal}{$settings.theme.button_icon_play}{literal} fa-fw'></span>");
$('[id*=recording_button]').not('[id*=recording_button_' + player_id + ']').html("<span class='{/literal}{$settings.theme.button_icon_play}{literal} fa-fw'></span>" + (label_play ?? ''));
$('[id*=recording_button_intro]').not('[id*=recording_button_' + player_id + ']').html("<span class='{/literal}{$settings.theme.button_icon_comment}{literal} fa-fw'></span>");
$('[id*=recording_progress_bar]').not('[id*=recording_progress_bar_' + player_id + ']').css('display', 'none');
@@ -763,7 +781,7 @@
document.getElementById('recording_button_' + player_id).innerHTML = "<span class='{/literal}{$settings.theme.button_icon_comment}{literal} fa-fw'></span>";
}
else {
document.getElementById('recording_button_' + player_id).innerHTML = "<span class='{/literal}{$settings.theme.button_icon_play}{literal} fa-fw'></span>";
document.getElementById('recording_button_' + player_id).innerHTML = "<span class='{/literal}{$settings.theme.button_icon_play}{literal} fa-fw'></span>" + (label_play ?? '');
}
clearInterval(audio_clock);
}
@@ -778,9 +796,15 @@
recording_audio = document.getElementById('recording_audio_' + player_id);
recording_audio.pause();
recording_audio.currentTime = 0;
if (document.getElementById('recording_progress_bar_' + player_id)) {
document.getElementById('recording_progress_bar_' + player_id).style.display='none';
}
{/literal}
{if $php_self <> 'xml_cdr_details.php'}
{literal}
if (document.getElementById('recording_progress_bar_' + player_id)) {
document.getElementById('recording_progress_bar_' + player_id).style.display='none';
}
{/literal}
{/if}
{literal}
if (player_id.substring(0,6) == 'intro_') {
document.getElementById('recording_button_' + player_id).innerHTML = "<span class='{/literal}{$settings.theme.button_icon_comment}{literal} fa-fw'></span>";
}