// vim: set et sw=2 ts=2:
//
// This file is part of Moonfire NVR, a security camera network video recorder.
// Copyright (C) 2018 The Moonfire NVR Authors
//
// This program is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// In addition, as a special exception, the copyright holders give
// permission to link the code of portions of this program with the
// OpenSSL library under certain conditions as described in each
// individual source file, and distribute linked combinations including
// the two.
//
// You must obey the GNU General Public License in all respects for all
// of the code used other than OpenSSL. If you modify file(s) with this
// exception, you may extend this exception to your version of the
// file(s), but you are not obligated to do so. If you do not wish to do
// so, delete this exception statement from your version. If you delete
// this exception statement from all source files in the program, then
// also delete it here.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import $ from 'jquery';
import Recording from '../models/Recording';
/**
* Desired column order in recordings table.
*
* The column names must correspond to the propertu names in the JSON
* representation of recordings.
*
* @todo This should be decoupled!
*
* @type {Array} Array of column names
*/
const _columnOrder = [
'start',
'end',
'resolution',
'frameRate',
'size',
'rate',
];
/**
* Labels for columns.
*/
const _columnLabels = {
start: 'Start',
end: 'End',
resolution: 'Resolution',
frameRate: 'FPS',
size: 'Storage',
rate: 'BitRate',
};
/**
* Class to encapsulate a view of a list of recordings from a single camera.
*/
export default class RecordingsView {
/**
* Construct display from camera data and use supplied formatter.
*
* @param {Camera} camera camera object (immutable)
* @param {String} streamType "main" or "sub"
* @param {RecordingFormatter} recordingFormatter Desired formatter
* @param {Boolean} trimmed True if the display should include trimmed ranges
* @param {jQuery} parent Parent to which new DOM is attached, or null
*/
constructor(camera, streamType, recordingFormatter, trimmed = false,
parent = null) {
this.cameraName_ = camera.shortName;
this.cameraRange_ = camera.range90k;
this.formatter_ = recordingFormatter;
const id = `tab-${camera.uuid}-${streamType}`;
this.element_ = this.createElement_(id, camera.shortName, streamType);
this.trimmed_ = trimmed;
this.recordings_ = null;
this.recordingsRange_ = null;
this.clickHandler_ = null;
if (parent) {
parent.append(this.element_);
}
this.timeoutId_ = null;
}
/**
* Create DOM for the recording.
*
* @param {String} id DOM id for the main element
* @param {String} cameraName Name of the corresponding camera
* @param {String} streamType "main" or "sub"
* @return {jQuery} Partial DOM as jQuery object
*/
createElement_(id, cameraName, streamType) {
const tab = $('<tbody>').attr('id', id);
tab.append(
$('<tr class="name">').append($('<th colspan=6/>')
.text(cameraName + ' ' + streamType)),
$('<tr class="hdr">').append(
$(
_columnOrder
.map((name) =>
`<th class="${name}">${_columnLabels[name]}</th>`)
.join('')
)
),
$('</tr>'),
$('<tr class="loading"><td colspan=6>loading...</td></tr>').hide()
);
return tab;
}
/**
* Update display for new recording values.
*
* Each existing row is reformatted.
*
* @param {Array} newRecordings
* @param {Boolean} trimmed True if timestamps should be trimmed
*/
updateRecordings_() {
const trimRange = this.trimmed_ ? this.recordingsRange : null;
const recordings = this.recordings_;
this.element_.children('tr.r').each((rowIndex, row) => {
const values = this.formatter_.format(recordings[rowIndex], trimRange);
$(row)
.children('td')
.each((i, e) => $(e).text(values[_columnOrder[i]]));
});
}
/**
* Get the currently remembered recordings range for this view.
*
* This range corresponds to what was in the data time range selector UI
* at the time the data for this view was selected. The value is remembered
* purely for trimming purposes.
*
* @return {Range90k} Currently remembered range
*/
get recordingsRange() {
return this.recordingsRange_ ? this.recordingsRange_.clone() : null;
}
/**
* Set the recordings range for this view.
*
* @param {Range90k} range90k Range to remember
*/
set recordingsRange(range90k) {
this.recordingsRange_ = range90k ? range90k.clone() : null;
}
/**
* Get whether time ranges in the recording list are being trimmed.
*
* @return {Boolean}
*/
get trimmed() {
return this.trimmed_;
}
/**
* Set whether recording time ranges should be trimmed.
*
* @param {Boolean} value True if trimming desired
*/
set trimmed(value) {
if (value != this.trimmed_) {
this.trimmed_ = value;
this.updateRecordings_();
}
}
/**
* Show or hide the display in the DOM.
*
* @param {Boolean} show True for show, false for hide
*/
set show(show) {
const sel = this.element_;
if (show) {
sel.show();
} else {
sel.hide();
}
}
/**
* Set whether loading indicator should be shown or not.
*
* @param {Boolean} show True if indicator should be showing
*/
set showLoading(show) {
const loading = $('tr.loading', this.element_);
if (show) {
loading.show();
} else {
if (this.timeoutId_) {
clearTimeout(this.timeoutId_);
this.timeoutId_ = null;
}
loading.hide();
}
}
/**
* Show the loading indicated after a delay, unless the timer has been
* cleared already.
*
* @param {Number} timeOutMs Delay (in ms) before indicator should appear
*/
delayedShowLoading(timeOutMs) {
this.timeoutId_ = setTimeout(() => (this.showLoading = true), timeOutMs);
}
/**
* Set a new time format string.
*
* This string is passed on to the formatter and the recordings list
* is updated (using the formatter).
*
* @param {String} formatStr Formatting string
*/
set timeFormat(formatStr) {
// Change the formatter and update recordings (view)
this.formatter_.timeFormat = formatStr;
this.updateRecordings_();
}
/**
* Set a handler to receive clicks on a recording.
*
* The handler will be called with one argument: a recording model.
*
* @param {Function} h Handler to be called.
*/
set onRecordingClicked(h) {
this.clickHandler_ = h;
}
/**
* Set the list of recordings from JSON data.
*
* The data is expected to be an array with recording objects.
*
* @param {object} recordingsJSON JSON data (object)
*/
set recordingsJSON(recordingsJSON) {
this.showLoading = false;
// Store as model objects
this.recordings_ = recordingsJSON.recordings.map(function(r) {
const vse = recordingsJSON.videoSampleEntries[r.videoSampleEntryId];
return new Recording(r, vse);
});
const tbody = this.element_;
// Remove existing rows, replace with new ones
$('tr.r', tbody).remove();
this.recordings_.forEach((r) => {
const row = $('<tr class="r" />');
row.append(_columnOrder.map((c) => $(`<td class="${c}"/>`)));
row.on('click', () => {
console.log('Video clicked');
if (this.clickHandler_ !== null) {
console.log('Video clicked handler call');
this.clickHandler_(r);
}
});
tbody.append(row);
});
// Cause formatting and date to be put in the rows
this.updateRecordings_();
}
}