TeaWeb/shared/js/ui/modal/ModalChangeLatency.ts
2019-11-09 16:17:48 +01:00

114 lines
No EOL
4.2 KiB
TypeScript

/// <reference path="../../ui/elements/modal.ts" />
/// <reference path="../../ConnectionHandler.ts" />
/// <reference path="../../proto.ts" />
namespace Modals {
let modal: Modal;
export function spawnChangeLatency(client: ClientEntry, current: connection.voice.LatencySettings, reset: () => connection.voice.LatencySettings, apply: (settings: connection.voice.LatencySettings) => any, callback_flush?: () => any) {
if(modal) modal.close();
const begin = Object.assign({}, current);
current = Object.assign({}, current);
modal = createModal({
header: tr("Change playback latency"),
body: function () {
let tag = $("#tmpl_change_latency").renderTag({
client: htmltags.generate_client_object({
add_braces: false,
client_name: client.clientNickName(),
client_unique_id: client.properties.client_unique_identifier,
client_id: client.clientId()
}),
have_flush: (typeof(callback_flush) === "function")
});
const update_value = () => {
const valid = current.min_buffer < current.max_buffer;
modal.htmlTag.find(".modal-body").toggleClass("modal-red", !valid);
modal.htmlTag.find(".modal-body").toggleClass("modal-green", valid);
if(!valid)
return;
apply(current);
};
let slider_min: Slider, slider_max: Slider;
{
const container = tag.find(".container-min");
const tag_value = container.find(".value");
const slider_tag = container.find(".container-slider");
slider_min = sliderfy(slider_tag, {
initial_value: current.min_buffer,
step: 20,
max_value: 1000,
min_value: 0,
unit: 'ms'
});
slider_tag.on('change', event => {
current.min_buffer = parseInt(slider_tag.attr("value"));
tag_value.text(current.min_buffer + "ms");
update_value();
});
tag_value.text(current.min_buffer + "ms");
}
{
const container = tag.find(".container-max");
const tag_value = container.find(".value");
const slider_tag = container.find(".container-slider");
slider_max = sliderfy(slider_tag, {
initial_value: current.max_buffer,
step: 20,
max_value: 1020,
min_value: 20,
unit: 'ms'
});
slider_tag.on('change', event => {
current.max_buffer = parseInt(slider_tag.attr("value"));
tag_value.text(current.max_buffer + "ms");
update_value();
});
tag_value.text(current.max_buffer + "ms");
}
setTimeout(update_value, 0);
tag.find(".button-close").on('click', event => {
modal.close();
});
tag.find(".button-cancel").on('click', event => {
apply(begin);
modal.close();
});
tag.find(".button-reset").on('click', event => {
current = Object.assign({}, reset());
slider_max.value(current.max_buffer);
slider_min.value(current.min_buffer);
});
tag.find(".button-flush").on('click', event => callback_flush());
return tag.children();
},
footer: null,
width: 600
});
modal.close_listener.push(() => modal = undefined);
modal.open();
modal.htmlTag.find(".modal-body").addClass("modal-latency");
}
}