调整一下js代码,尽量避免全局变量。

pull/105/head
Apex Liu 2017-12-23 00:25:36 +08:00
parent 6cb3821321
commit 9305953218
1 changed files with 209 additions and 212 deletions

View File

@ -1,43 +1,15 @@
"use strict"; "use strict";
var g_header = null;
var g_data = [];
var g_data_offset = 0;
var g_played_pkg_count = 0;
var g_timer = null;
var g_playing = false;
var g_need_stop = false;
var g_skip = true;
var g_console_term = null;
var g_current_time;
var g_finish = false;
var g_record_tick = 50;
var speed_table = [
{speed: 1, name: '正常速度'},
{speed: 2, name: '快进 x2'},
{speed: 4, name: '快进 x4'},
{speed: 8, name: '快进 x8'},
{speed: 16, name: '快进 x16'}
];
var speed_offset = 0;
$app.req_record_data = function (record_id, offset) { $app.req_record_data = function (record_id, offset) {
$tp.ajax_post_json('/audit/get-record-data', {id: record_id, offset: offset}, $tp.ajax_post_json('/audit/get-record-data', {id: record_id, offset: offset},
function (ret) { function (ret) {
if (ret.code === TPE_OK) { if (ret.code === TPE_OK) {
// console.log('data', ret.data); // console.log('data', ret.data);
g_data = g_data.concat(ret.data.data_list); $app.record_data = $app.record_data.concat(ret.data.data_list);
g_data_offset += ret.data.data_size; $app.record_data_offset += ret.data.data_size;
if (g_data.length < g_header.pkg_count) { if ($app.record_data.length < $app.record_hdr.pkg_count) {
$app.req_record_data(record_id, g_data_offset); $app.req_record_data(record_id, $app.record_data_offset);
} }
} else { } else {
$app.dom.status.text("读取录像数据失败:" + tp_error_msg(ret.code)); $app.dom.status.text("读取录像数据失败:" + tp_error_msg(ret.code));
@ -55,6 +27,30 @@ $app.req_record_data = function (record_id, offset) {
$app.on_init = function (cb_stack) { $app.on_init = function (cb_stack) {
var record_id = $app.options.record_id; var record_id = $app.options.record_id;
$app.record_hdr = null;
$app.record_data = [];
$app.record_data_offset = 0;
$app.played_pkg_count = 0;
$app.player_timer = null;
$app.is_playing = false;
$app.is_need_stop = false;
$app.need_skip = true;
$app.player_console_term = null;
$app.player_current_time = null;
$app.is_finished = false;
$app.record_tick = 50;
$app.speed_table = [
{speed: 1, name: '正常速度'},
{speed: 2, name: '快进 x2'},
{speed: 4, name: '快进 x4'},
{speed: 8, name: '快进 x8'},
{speed: 16, name: '快进 x16'}
];
$app.speed_offset = 0;
$app.dom = { $app.dom = {
time: $('#play-time'), time: $('#play-time'),
btn_play: $('#btn-play'), btn_play: $('#btn-play'),
@ -77,20 +73,20 @@ $app.on_init = function (cb_stack) {
$tp.ajax_post_json('/audit/get-record-header', {id: record_id}, $tp.ajax_post_json('/audit/get-record-header', {id: record_id},
function (ret) { function (ret) {
if (ret.code === TPE_OK) { if (ret.code === TPE_OK) {
g_header = ret.data; $app.record_hdr = ret.data;
if(g_header.width === 0) if ($app.record_hdr.width === 0)
g_header.width = 80; $app.record_hdr.width = 80;
if(g_header.height === 0) if ($app.record_hdr.height === 0)
g_header.height = 24; $app.record_hdr.height = 24;
console.log('header', g_header); console.log('header', $app.record_hdr);
$('#recorder-info').html(tp_format_datetime(g_header.start) + ': ' + g_header.user_name + '@' + g_header.client_ip + ' 访问 ' + g_header.account + '@' + g_header.conn_ip + ':' + g_header.conn_port); $('#recorder-info').html(tp_format_datetime($app.record_hdr.start) + ': ' + $app.record_hdr.user_name + '@' + $app.record_hdr.client_ip + ' 访问 ' + $app.record_hdr.account + '@' + $app.record_hdr.conn_ip + ':' + $app.record_hdr.conn_port);
$app.req_record_data(record_id, 0); $app.req_record_data(record_id, 0);
g_current_time = 0; $app.player_current_time = 0;
//setTimeout(init, 500); //setTimeout(init, 500);
init_and_play(); $app.init_and_play();
} else { } else {
$tp.notify_error('读取录像信息失败:' + tp_error_msg(ret.code, ret.message)); $tp.notify_error('读取录像信息失败:' + tp_error_msg(ret.code, ret.message));
console.error('load init info error ', ret.code); console.error('load init info error ', ret.code);
@ -110,7 +106,7 @@ $app.on_init = function (cb_stack) {
$app.dom.xterm_terminal.css('font-size', _size + 1); $app.dom.xterm_terminal.css('font-size', _size + 1);
g_console_term.charMeasure.measure(); $app.player_console_term.charMeasure.measure();
$app.adjust_viewport(); $app.adjust_viewport();
}); });
@ -124,58 +120,58 @@ $app.on_init = function (cb_stack) {
$app.dom.xterm_terminal.css('font-size', _size - 1); $app.dom.xterm_terminal.css('font-size', _size - 1);
g_console_term.charMeasure.measure(); $app.player_console_term.charMeasure.measure();
$app.adjust_viewport(); $app.adjust_viewport();
}); });
$app.dom.btn_play.click(function () { $app.dom.btn_play.click(function () {
if (g_playing) if ($app.is_playing)
pause(); $app.pause();
else else
play(); $app.play();
}); });
$app.dom.btn_skip.click(function () { $app.dom.btn_skip.click(function () {
var obj = $('#btn-skip i'); var obj = $('#btn-skip i');
if (g_skip) { if ($app.need_skip) {
g_skip = false; $app.need_skip = false;
obj.removeClass('fa-check-square-o').addClass('fa-square-o'); obj.removeClass('fa-check-square-o').addClass('fa-square-o');
} else { } else {
g_skip = true; $app.need_skip = true;
obj.removeClass('fa-square-o').addClass('fa-check-square-o'); obj.removeClass('fa-square-o').addClass('fa-check-square-o');
} }
// console.log('skip:', g_skip); // console.log('skip:', $app.need_skip);
}); });
$app.dom.btn_restart.click(function () { $app.dom.btn_restart.click(function () {
restart(); $app.restart();
}); });
speed_offset = 0; $app.speed_offset = 0;
$app.dom.btn_speed.text(speed_table[speed_offset].name); $app.dom.btn_speed.text($app.speed_table[$app.speed_offset].name);
$app.dom.btn_speed.click(function () { $app.dom.btn_speed.click(function () {
var length = speed_table.length; var length = $app.speed_table.length;
speed_offset += 1; $app.speed_offset += 1;
if (speed_offset === length) { if ($app.speed_offset === length) {
speed_offset = 0; $app.speed_offset = 0;
} }
$app.dom.btn_speed.text(speed_table[speed_offset].name); $app.dom.btn_speed.text($app.speed_table[$app.speed_offset].name);
}); });
$app.dom.progress.mousedown(function () { $app.dom.progress.mousedown(function () {
pause(); $app.pause();
}); });
$app.dom.progress.mouseup(function () { $app.dom.progress.mouseup(function () {
g_current_time = parseInt(g_header.time_used * $app.dom.progress.val() / 100); $app.player_current_time = parseInt($app.record_hdr.time_used * $app.dom.progress.val() / 100);
setTimeout(function () { setTimeout(function () {
init_and_play(); $app.init_and_play();
}, 100); }, 100);
}); });
$app.dom.progress.mousemove(function () { $app.dom.progress.mousemove(function () {
g_current_time = parseInt(g_header.time_used * $app.dom.progress.val() / 100); $app.player_current_time = parseInt($app.record_hdr.time_used * $app.dom.progress.val() / 100);
$app.dom.time.text(parseInt((g_current_time) / 1000) + '/' + parseInt(g_header.time_used / 1000) + '秒'); $app.dom.time.text(parseInt(($app.player_current_time) / 1000) + '/' + parseInt($app.record_hdr.time_used / 1000) + '秒');
}); });
$app.adjust_viewport = function () { $app.adjust_viewport = function () {
@ -185,154 +181,155 @@ $app.on_init = function (cb_stack) {
} }
}; };
function init_and_play() {
if (_.isNull(g_console_term)) {
g_console_term = new Terminal({
cols: g_header.width,
rows: g_header.height
});
g_console_term.on('refresh', function () {
$app.adjust_viewport();
});
g_console_term.open(document.getElementById('xterm-box'), true);
$app.dom.xterm_terminal = $('#xterm-box .terminal');
$app.dom.xterm_rows = $('#xterm-box .terminal .xterm-rows');
$app.dom.xterm_viewport = $('#xterm-box .terminal .xterm-viewport');
} else {
g_console_term.reset(g_header.width, g_header.height);
}
if(g_header.pkg_count === 0)
return;
$app.dom.progress.val(0);
// $app.dom.status.text("正在播放");
$app.dom.btn_play.children().removeClass().addClass('fa fa-pause').text(' 暂停');
g_need_stop = false;
g_playing = true;
g_finish = false;
g_played_pkg_count = 0;
//setTimeout(do_play, g_record_tick);
do_play();
}
function do_play() {
if (g_need_stop) {
g_playing = false;
return;
}
if (g_data.length <= g_played_pkg_count) {
$app.dom.status.text("正在缓存数据...");
g_timer = setTimeout(do_play, g_record_tick);
return;
}
$app.dom.status.text("正在播放");
g_current_time += g_record_tick * speed_table[speed_offset].speed;
var _record_tick = g_record_tick;
for (var i = g_played_pkg_count; i < g_data.length; i++) {
if (g_need_stop)
break;
var play_data = g_data[i];
if (play_data.t < g_current_time) {
if (play_data.a === 1) {
g_console_term.resize(play_data.w, play_data.h);
} else if (play_data.a === 2) {
g_console_term.write(play_data.d);
}
else {
g_console_term.write(tp_base64_decode(play_data.d));
}
if ((g_played_pkg_count + 1) === g_header.pkg_count) {
$app.dom.progress.val(100);
$app.dom.status.text('播放完成');
$app.dom.time.text(parseInt(g_header.time_used / 1000) + '秒');
g_finish = true;
g_playing = false;
$app.dom.btn_play.children().removeClass().addClass('fa fa-play').text(' 播放');
return;
} else {
g_played_pkg_count++;
}
} else {
break;
}
}
if (g_need_stop)
return;
if (g_skip) {
if (play_data.t - g_current_time > 800) {
g_current_time = play_data.t; // - g_record_tick * speed_table[speed_offset].speed;
_record_tick = 800;
}
}
// sync progress bar.
var _progress = parseInt(g_current_time * 100 / g_header.time_used);
$app.dom.progress.val(_progress);
var temp = parseInt(g_current_time / 1000);
$app.dom.time.text(temp + '/' + parseInt(g_header.time_used / 1000) + '秒');
// if all packages played
if (g_played_pkg_count >= g_header.pkg_count) {
$app.dom.progress.val(100);
$app.dom.status.text('播放完成');
$app.dom.time.text(parseInt(g_header.time_used / 1000) + '秒');
g_finish = true;
g_playing = false;
$app.dom.btn_play.children().removeClass().addClass('fa fa-play').text(' 播放');
} else {
if (!g_need_stop)
g_timer = setTimeout(do_play, _record_tick);
}
}
function play() {
if (g_playing) {
return;
}
if (g_finish) {
restart();
return;
}
$app.dom.btn_play.children().removeClass().addClass('fa fa-pause').text(' 暂停');
g_need_stop = false;
g_playing = true;
g_timer = setTimeout(do_play, g_record_tick);
}
function pause() {
if (!_.isNull(g_timer))
clearTimeout(g_timer);
$app.dom.btn_play.children().removeClass().addClass('fa fa-play').text(' 播放');
g_need_stop = true;
g_playing = false;
$app.dom.status.text("已暂停");
}
function restart() {
if (!_.isNull(g_timer))
clearTimeout(g_timer);
g_current_time = 0;
init_and_play();
}
cb_stack.exec(); cb_stack.exec();
}; };
$app.init_and_play = function() {
if (_.isNull($app.player_console_term)) {
$app.player_console_term = new Terminal({
cols: $app.record_hdr.width,
rows: $app.record_hdr.height
});
$app.player_console_term.on('refresh', function () {
$app.adjust_viewport();
});
$app.player_console_term.open(document.getElementById('xterm-box'), true);
$app.dom.xterm_terminal = $('#xterm-box .terminal');
$app.dom.xterm_rows = $('#xterm-box .terminal .xterm-rows');
$app.dom.xterm_viewport = $('#xterm-box .terminal .xterm-viewport');
} else {
$app.player_console_term.reset($app.record_hdr.width, $app.record_hdr.height);
}
if ($app.record_hdr.pkg_count === 0)
return;
$app.dom.progress.val(0);
// $app.dom.status.text("正在播放");
$app.dom.btn_play.children().removeClass().addClass('fa fa-pause').text(' 暂停');
$app.is_need_stop = false;
$app.is_playing = true;
$app.is_finished = false;
$app.played_pkg_count = 0;
//setTimeout(do_play, $app.record_tick);
$app.do_play();
};
$app.do_play = function() {
if ($app.is_need_stop) {
$app.is_playing = false;
return;
}
if ($app.record_data.length <= $app.played_pkg_count) {
$app.dom.status.text("正在缓存数据...");
$app.player_timer = setTimeout($app.do_play, $app.record_tick);
return;
}
$app.dom.status.text("正在播放");
$app.player_current_time += $app.record_tick * $app.speed_table[$app.speed_offset].speed;
var _record_tick = $app.record_tick;
for (var i = $app.played_pkg_count; i < $app.record_data.length; i++) {
if ($app.is_need_stop)
break;
var play_data = $app.record_data[i];
if (play_data.t < $app.player_current_time) {
if (play_data.a === 1) {
$app.player_console_term.resize(play_data.w, play_data.h);
} else if (play_data.a === 2) {
$app.player_console_term.write(play_data.d);
}
else {
$app.player_console_term.write(tp_base64_decode(play_data.d));
}
if (($app.played_pkg_count + 1) === $app.record_hdr.pkg_count) {
$app.dom.progress.val(100);
$app.dom.status.text('播放完成');
$app.dom.time.text(parseInt($app.record_hdr.time_used / 1000) + '秒');
$app.is_finished = true;
$app.is_playing = false;
$app.dom.btn_play.children().removeClass().addClass('fa fa-play').text(' 播放');
return;
} else {
$app.played_pkg_count++;
}
} else {
break;
}
}
if ($app.is_need_stop)
return;
if ($app.need_skip) {
if (play_data.t - $app.player_current_time > 800) {
$app.player_current_time = play_data.t; // - $app.record_tick * $app.speed_table[$app.speed_offset].speed;
_record_tick = 800;
}
}
// sync progress bar.
var _progress = parseInt($app.player_current_time * 100 / $app.record_hdr.time_used);
$app.dom.progress.val(_progress);
var temp = parseInt($app.player_current_time / 1000);
$app.dom.time.text(temp + '/' + parseInt($app.record_hdr.time_used / 1000) + '秒');
// if all packages played
if ($app.played_pkg_count >= $app.record_hdr.pkg_count) {
$app.dom.progress.val(100);
$app.dom.status.text('播放完成');
$app.dom.time.text(parseInt($app.record_hdr.time_used / 1000) + '秒');
$app.is_finished = true;
$app.is_playing = false;
$app.dom.btn_play.children().removeClass().addClass('fa fa-play').text(' 播放');
} else {
if (!$app.is_need_stop)
$app.player_timer = setTimeout($app.do_play, _record_tick);
}
};
$app.play = function() {
if ($app.is_playing) {
return;
}
if ($app.is_finished) {
$app.restart();
return;
}
$app.dom.btn_play.children().removeClass().addClass('fa fa-pause').text(' 暂停');
$app.is_need_stop = false;
$app.is_playing = true;
$app.player_timer = setTimeout($app.do_play, $app.record_tick);
};
$app.pause = function() {
if (!_.isNull($app.player_timer))
clearTimeout($app.player_timer);
$app.dom.btn_play.children().removeClass().addClass('fa fa-play').text(' 播放');
$app.is_need_stop = true;
$app.is_playing = false;
$app.dom.status.text("已暂停");
};
$app.restart = function() {
if (!_.isNull($app.player_timer))
clearTimeout($app.player_timer);
$app.player_current_time = 0;
$app.init_and_play();
};