diff --git a/themes/default/app_config.php b/themes/default/app_config.php index 555e5bcc64..de53e21b81 100644 --- a/themes/default/app_config.php +++ b/themes/default/app_config.php @@ -2614,5 +2614,85 @@ $apps[$x]['default_settings'][$y]['default_setting_value'] = "FusionPBX"; $apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true"; $apps[$x]['default_settings'][$y]['default_setting_description'] = "Brand used in the browser title bar."; + $y++; + $apps[$x]['default_settings'][$y]['default_setting_uuid'] = "48c64a19-f9de-4051-88f9-67ebca6e439b"; + $apps[$x]['default_settings'][$y]['default_setting_category'] = "theme"; + $apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "audio_player_indicator_color"; + $apps[$x]['default_settings'][$y]['default_setting_name'] = "text"; + $apps[$x]['default_settings'][$y]['default_setting_value'] = "#b90004"; + $apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true"; + $apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the color of the playback progress indicator."; + $y++; + $apps[$x]['default_settings'][$y]['default_setting_uuid'] = "ca7983ef-0a72-4d88-af3a-786d6a02cf7a"; + $apps[$x]['default_settings'][$y]['default_setting_category'] = "theme"; + $apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "audio_player_scrub_seconds"; + $apps[$x]['default_settings'][$y]['default_setting_name'] = "text"; + $apps[$x]['default_settings'][$y]['default_setting_value'] = "2"; + $apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true"; + $apps[$x]['default_settings'][$y]['default_setting_description'] = "Define how many seconds to fast-forward or rewind when pressing the left and right arrow keys."; + $y++; + $apps[$x]['default_settings'][$y]['default_setting_uuid'] = "0d535c63-7115-4113-9712-fc5678f3d4fc"; + $apps[$x]['default_settings'][$y]['default_setting_category'] = "theme"; + $apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "audio_player_waveform_enabled"; + $apps[$x]['default_settings'][$y]['default_setting_name'] = "boolean"; + $apps[$x]['default_settings'][$y]['default_setting_value'] = "true"; + $apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true"; + $apps[$x]['default_settings'][$y]['default_setting_description'] = "Set whether to generate and show a waveform image when playing back audio files."; + $y++; + $apps[$x]['default_settings'][$y]['default_setting_uuid'] = "c6cb298a-2682-400f-86d5-4ad18ba35327"; + $apps[$x]['default_settings'][$y]['default_setting_category'] = "theme"; + $apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "audio_player_waveform_height"; + $apps[$x]['default_settings'][$y]['default_setting_name'] = "text"; + $apps[$x]['default_settings'][$y]['default_setting_value'] = "70px"; + $apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true"; + $apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the height of the audio waveform."; + $y++; + $apps[$x]['default_settings'][$y]['default_setting_uuid'] = "5ecdb499-1f6a-48b1-9f69-647d4f0466c6"; + $apps[$x]['default_settings'][$y]['default_setting_category'] = "theme"; + $apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "audio_player_waveform_color_a_leg"; + $apps[$x]['default_settings'][$y]['default_setting_name'] = "text"; + $apps[$x]['default_settings'][$y]['default_setting_value'] = "rgba(32,134,37,0.6)"; + $apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true"; + $apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the color of the A-leg/left channel audio waveform."; + $y++; + $apps[$x]['default_settings'][$y]['default_setting_uuid'] = "9cc1b1a5-8bf7-4c9b-8ded-63396e1d9636"; + $apps[$x]['default_settings'][$y]['default_setting_category'] = "theme"; + $apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "audio_player_waveform_color_b_leg"; + $apps[$x]['default_settings'][$y]['default_setting_name'] = "text"; + $apps[$x]['default_settings'][$y]['default_setting_value'] = "rgba(0,125,232,0.6)"; + $apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true"; + $apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the color of the B-leg/right channel audio waveform."; + $y++; + $apps[$x]['default_settings'][$y]['default_setting_uuid'] = "2f998b82-895f-4639-9aaf-5ae19ae39124"; + $apps[$x]['default_settings'][$y]['default_setting_category'] = "theme"; + $apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "audio_player_waveform_color_background"; + $apps[$x]['default_settings'][$y]['default_setting_name'] = "text"; + $apps[$x]['default_settings'][$y]['default_setting_value'] = "rgba(0,0,0,0)"; + $apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true"; + $apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the background color of the audio waveform."; + $y++; + $apps[$x]['default_settings'][$y]['default_setting_uuid'] = "a5e00428-6d2c-461a-897d-3291ef209d6a"; + $apps[$x]['default_settings'][$y]['default_setting_category'] = "theme"; + $apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "audio_player_waveform_color_axis"; + $apps[$x]['default_settings'][$y]['default_setting_name'] = "text"; + $apps[$x]['default_settings'][$y]['default_setting_value'] = "rgba(0,0,0,0.3)"; + $apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true"; + $apps[$x]['default_settings'][$y]['default_setting_description'] = "Set the axis color of the audio waveform."; + $y++; + $apps[$x]['default_settings'][$y]['default_setting_uuid'] = "27aea2f2-6b98-438c-9e98-bbc815fcb702"; + $apps[$x]['default_settings'][$y]['default_setting_category'] = "theme"; + $apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "audio_player_waveform_single_phase"; + $apps[$x]['default_settings'][$y]['default_setting_name'] = "boolean"; + $apps[$x]['default_settings'][$y]['default_setting_value'] = "false"; + $apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true"; + $apps[$x]['default_settings'][$y]['default_setting_description'] = "Display only the positive phase of the audio waveform."; + $y++; + $apps[$x]['default_settings'][$y]['default_setting_uuid'] = "979923b9-b53f-4442-8530-192e4d1046a2"; + $apps[$x]['default_settings'][$y]['default_setting_category'] = "theme"; + $apps[$x]['default_settings'][$y]['default_setting_subcategory'] = "audio_player_waveform_single_axis"; + $apps[$x]['default_settings'][$y]['default_setting_name'] = "boolean"; + $apps[$x]['default_settings'][$y]['default_setting_value'] = "true"; + $apps[$x]['default_settings'][$y]['default_setting_enabled'] = "true"; + $apps[$x]['default_settings'][$y]['default_setting_description'] = "Display A-leg/left and B-leg/right channel audio waveforms on a single axis."; -?> +?> \ No newline at end of file diff --git a/themes/default/css.php b/themes/default/css.php index 7a8b64674e..ff2820fe5b 100644 --- a/themes/default/css.php +++ b/themes/default/css.php @@ -274,6 +274,9 @@ $modal_close_background_color_hover = $_SESSION['theme']['modal_close_background $modal_message_color = $_SESSION['theme']['modal_message_color']['text'] ?? '#444'; $modal_message_alignment = $_SESSION['theme']['modal_message_alignment']['text'] ?? 'left'; $modal_message_margin = $_SESSION['theme']['modal_message_margin']['text'] ?? '0 0 20px 0'; +$audio_player_indicator_color = $_SESSION['theme']['audio_player_indicator_color']['text'] ?? '#b90004'; +$audio_player_waveform_enabled = $_SESSION['theme']['audio_player_waveform_enabled']['boolean'] ?? 'false'; +$audio_player_waveform_height = $_SESSION['theme']['audio_player_waveform_height']['text'] ?? '70px'; $custom_css_code = $_SESSION['theme']['custom_css_code']['text'] ?? null; /***********************************************************************************************************************************************/ @@ -1852,24 +1855,31 @@ else { //default: white } span.playback_progress_bar { - background-color: #b90004; - width: 17px; - height: 4px; - margin-bottom: 3px; + background-color: ; + + width: 2px; + height: ; + margin-bottom: 0; + border-radius: 0; + + width: 17px; + height: 4px; + margin-bottom: 3px; + border-radius: 0 0 6px 6px; + display: block; -moz-border-radius: 0 0 6px 6px; -webkit-border-radius: 0 0 6px 6px; -khtml-border-radius: 0 0 6px 6px; - border-radius: 0 0 6px 6px; - -webkit-box-shadow: 0 0 3px 0px rgba(255,0,0,0.9); - -moz-box-shadow: 0 0 3px 0px rgba(255,0,0,0.9); - box-shadow: 0 0 3px 0px rgba(255,0,0,0.9); + -webkit-box-shadow: 0 0 3px 0px rgba(); + -moz-box-shadow: 0 0 3px 0px rgba(); + box-shadow: 0 0 3px 0px rgba(); } td.vtable.playback_progress_bar_background, table.list tr.list-row td.playback_progress_bar_background { padding: 0; - border-bottom: none; + border: none; background-image: -ms-linear-gradient(top, rgba(0,0,0,0.10) 0%, transparent 100%); background-image: -moz-linear-gradient(top, rgba(0,0,0,0.10) 0%, transparent 100%); background-image: -o-linear-gradient(top, rgba(0,0,0,0.10) 0%, transparent 100%); @@ -1877,6 +1887,12 @@ else { //default: white background-image: -webkit-linear-gradient(top, rgba(0,0,0,0.10) 0%, transparent 100%); background-image: linear-gradient(to bottom, rgba(0,0,0,0.10) 0%, transparent 100%); overflow: hidden; + + padding-bottom: 3px; + background-size: 100% 100%; + background-repeat: no-repeat; + cursor: pointer; + } div.pwstrength_progress { diff --git a/themes/default/template.php b/themes/default/template.php index 129cb25fb8..452145e84e 100644 --- a/themes/default/template.php +++ b/themes/default/template.php @@ -746,21 +746,38 @@ {literal} var recording_audio, audio_clock, recording_id_playing; - function recording_play(recording_id) { - if (document.getElementById('recording_progress_bar_'+recording_id)) { - document.getElementById('recording_progress_bar_'+recording_id).style.display=''; + function recording_play(player_id, data, audio_type) { + if (document.getElementById('recording_progress_bar_' + player_id)) { + document.getElementById('recording_progress_bar_' + player_id).style.display=''; } - recording_audio = document.getElementById('recording_audio_'+recording_id); + recording_audio = document.getElementById('recording_audio_' + player_id); 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_audio.volume = 1; recording_audio.play(); - recording_id_playing = recording_id; - document.getElementById('recording_button_'+recording_id).innerHTML = ""; - audio_clock = setInterval(function () { update_progress(recording_id); }, 20); + recording_id_playing = player_id; + document.getElementById('recording_button_' + player_id).innerHTML = ""; + audio_clock = setInterval(function () { update_progress(player_id); }, 20); - $('[id*=recording_button]').not('[id*=recording_button_'+recording_id+']').html(""); - $('[id*=recording_progress_bar]').not('[id*=recording_progress_bar_'+recording_id+']').css('display', 'none'); + $('[id*=recording_button]').not('[id*=recording_button_' + player_id + ']').html(""); + $('[id*=recording_progress_bar]').not('[id*=recording_progress_bar_' + player_id + ']').css('display', 'none'); $('audio').each(function(){ if ($(this).get(0) != recording_audio) { @@ -772,33 +789,33 @@ else { recording_audio.pause(); recording_id_playing = ''; - document.getElementById('recording_button_'+recording_id).innerHTML = ""; + document.getElementById('recording_button_' + player_id).innerHTML = ""; clearInterval(audio_clock); } } - function recording_stop(recording_id) { - recording_reset(recording_id); + function recording_stop(player_id) { + recording_reset(player_id); clearInterval(audio_clock); } - function recording_reset(recording_id) { - recording_audio = document.getElementById('recording_audio_'+recording_id); + function recording_reset(player_id) { + recording_audio = document.getElementById('recording_audio_' + player_id); recording_audio.pause(); recording_audio.currentTime = 0; - if (document.getElementById('recording_progress_bar_'+recording_id)) { - document.getElementById('recording_progress_bar_'+recording_id).style.display='none'; + if (document.getElementById('recording_progress_bar_' + player_id)) { + document.getElementById('recording_progress_bar_' + player_id).style.display='none'; } - document.getElementById('recording_button_'+recording_id).innerHTML = ""; + document.getElementById('recording_button_' + player_id).innerHTML = ""; clearInterval(audio_clock); } - function update_progress(recording_id) { - recording_audio = document.getElementById('recording_audio_'+recording_id); - var recording_progress = document.getElementById('recording_progress_'+recording_id); + function update_progress(player_id) { + recording_audio = document.getElementById('recording_audio_' + player_id); + var recording_progress = document.getElementById('recording_progress_' + player_id); var value = 0; if (recording_audio != null && recording_audio.currentTime > 0) { - value = (100 / recording_audio.duration) * recording_audio.currentTime; + value = Number(((100 / recording_audio.duration) * recording_audio.currentTime).toFixed(1)); } if (recording_progress) { recording_progress.style.marginLeft = value + '%'; @@ -810,14 +827,14 @@ function recording_fast_forward() { if (recording_audio) { - recording_audio.currentTime += 5; + recording_audio.currentTime += {/literal}{if !empty($settings.theme.audio_player_scrub_seconds) }{$settings.theme.audio_player_scrub_seconds}{else}2{/if}{literal}; update_progress(recording_id_playing); } } function recording_rewind() { if (recording_audio) { - recording_audio.currentTime -= 5; + recording_audio.currentTime -= {/literal}{if !empty($settings.theme.audio_player_scrub_seconds) }{$settings.theme.audio_player_scrub_seconds}{else}2{/if}{literal}; update_progress(recording_id_playing); } }