Themes [Default]: Audio waveform support and new setting integration.
This commit is contained in:
fusionate
parent
0be7204762
commit
adf8062378
|
|
@ -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.";
|
||||
|
||||
?>
|
||||
?>
|
||||
|
|
@ -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: <?=$audio_player_indicator_color?>;
|
||||
<?php if ($audio_player_waveform_enabled === 'true') { ?>
|
||||
width: 2px;
|
||||
height: <?=$audio_player_waveform_height?>;
|
||||
margin-bottom: 0;
|
||||
border-radius: 0;
|
||||
<?php } else { ?>
|
||||
width: 17px;
|
||||
height: 4px;
|
||||
margin-bottom: 3px;
|
||||
border-radius: 0 0 6px 6px;
|
||||
<?php } ?>
|
||||
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(<?=hex_to_rgb($audio_player_indicator_color,',',true,0.8)?>);
|
||||
-moz-box-shadow: 0 0 3px 0px rgba(<?=hex_to_rgb($audio_player_indicator_color,',',true,0.8)?>);
|
||||
box-shadow: 0 0 3px 0px rgba(<?=hex_to_rgb($audio_player_indicator_color,',',true,0.8)?>);
|
||||
}
|
||||
|
||||
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;
|
||||
<?php if ($audio_player_waveform_enabled === 'true') { ?>
|
||||
padding-bottom: 3px;
|
||||
background-size: 100% 100%;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
<?php } ?>
|
||||
}
|
||||
|
||||
div.pwstrength_progress {
|
||||
|
|
|
|||
|
|
@ -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 = "<span class='{/literal}{$settings.theme.button_icon_pause}{literal} fa-fw'></span>";
|
||||
audio_clock = setInterval(function () { update_progress(recording_id); }, 20);
|
||||
recording_id_playing = player_id;
|
||||
document.getElementById('recording_button_' + player_id).innerHTML = "<span class='{/literal}{$settings.theme.button_icon_pause}{literal} fa-fw'></span>";
|
||||
audio_clock = setInterval(function () { update_progress(player_id); }, 20);
|
||||
|
||||
$('[id*=recording_button]').not('[id*=recording_button_'+recording_id+']').html("<span class='{/literal}{$settings.theme.button_icon_play}{literal} fa-fw'></span>");
|
||||
$('[id*=recording_progress_bar]').not('[id*=recording_progress_bar_'+recording_id+']').css('display', 'none');
|
||||
$('[id*=recording_button]').not('[id*=recording_button_' + player_id + ']').html("<span class='{/literal}{$settings.theme.button_icon_play}{literal} fa-fw'></span>");
|
||||
$('[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 = "<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>";
|
||||
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 = "<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>";
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue