mirror of
https://github.com/scottlamb/moonfire-nvr.git
synced 2025-11-21 10:16:04 -05:00
Major refactoring of UI code, small UI changes. (#48)
* Major refactoring of UI code, small UI changes. * Single file index.js split up into separate modules * Modules for handling UI view components * Modules for handling JSON/Model data * Modules for support tasks * Module to encapsulate Moonfire API * Main application module * index.js simplified to just activating main app * Settings file functionality expanded * UI adds "Time Format" popup to allow changing time representation * CSS changes/additions to streamline looks * Recordings loading indicator only appears after 500ms delay, if at all * Address first set of PR change requests from Scott. * Add copyright headers to all files (except JSON files) * Fix bug with entering time values in range pickers * Fixed an erroneous comment and/or spelling error here and there * Fixed JSDoc comments where [description] was not filled in * Removed a TODO from NVRApplication as it no longer applies * Fixed bug handling "infinite" case of video segment lengths * Fixed bug in "trim" handler and trim execution * Retrofit video continues loading from separate PR Signed-off-by: Dolf Starreveld <dolf@starreveld.com> * Address PR comments Signed-off-by: Dolf Starreveld <dolf@starreveld.com> * Address PR comments Signed-off-by: Dolf Starreveld <dolf@starreveld.com>
This commit is contained in:
Dolf Starreveld
committed by
Scott Lamb
Scott Lamb
parent
caac324bd5
commit
58152e8d94
101
ui-src/lib/support/RecordingFormatter.js
Normal file
101
ui-src/lib/support/RecordingFormatter.js
Normal file
@@ -0,0 +1,101 @@
|
||||
// vim: set et sw=2 ts=2:
|
||||
//
|
||||
// This file is part of Moonfire NVR, a security camera digital video recorder.
|
||||
// Copyright (C) 2018 Dolf Starreveld <dolf@starreveld.com>
|
||||
//
|
||||
// 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 TimeFormatter from './TimeFormatter';
|
||||
|
||||
/**
|
||||
* Formatter for framerates
|
||||
* @type {Intl} Formatter
|
||||
*/
|
||||
const frameRateFmt = new Intl.NumberFormat([], {
|
||||
maximumFractionDigits: 0,
|
||||
});
|
||||
|
||||
/**
|
||||
* Formatter for sizes
|
||||
* @type {Intl} Formatter
|
||||
*/
|
||||
const sizeFmt = new Intl.NumberFormat([], {
|
||||
maximumFractionDigits: 1,
|
||||
});
|
||||
|
||||
/**
|
||||
* Class encapsulating formatting of recording time ranges.
|
||||
*/
|
||||
export default class RecordingFormatter {
|
||||
/**
|
||||
* Construct with desired time format and timezone.
|
||||
*
|
||||
* @param {String} formatStr Time format string
|
||||
* @param {String} tz Timezone
|
||||
*/
|
||||
constructor(formatStr, tz) {
|
||||
this._timeFormatter = new TimeFormatter(formatStr, tz);
|
||||
this._singleDateStr = null;
|
||||
}
|
||||
|
||||
/**
|
||||
* Change time format string, preserving timezone.
|
||||
*
|
||||
* @param {String} formatStr Time format string
|
||||
*/
|
||||
set timeFormat(formatStr) {
|
||||
this._timeFormatter = new TimeFormatter(formatStr, this._timeFormatter.tz);
|
||||
}
|
||||
|
||||
/**
|
||||
* Produce an object whose properties are individual pieces of a recording's
|
||||
* data, formatted for display purposes.
|
||||
*
|
||||
* @param {Recording} recording Recording to be formatted
|
||||
* @param {Range90k} trimRange Optional time range for trimming the
|
||||
* recording's interval
|
||||
* @return {Object} Map, keyed by _columnOrder element
|
||||
*/
|
||||
format(recording, trimRange = null) {
|
||||
const duration = recording.duration;
|
||||
const trimmedRange = recording.range90k(trimRange);
|
||||
return {
|
||||
start: this._timeFormatter.formatTimeStamp90k(trimmedRange.startTime90k),
|
||||
end: this._timeFormatter.formatTimeStamp90k(trimmedRange.endTime90k),
|
||||
resolution:
|
||||
recording.videoSampleEntryWidth +
|
||||
'x' +
|
||||
recording.videoSampleEntryHeight,
|
||||
frameRate: frameRateFmt.format(recording.frameCount / duration),
|
||||
size: sizeFmt.format(recording.sampleFileBytes / 1048576) + ' MB',
|
||||
rate:
|
||||
sizeFmt.format(recording.sampleFileBytes / duration * 0.000008) +
|
||||
' Mbps',
|
||||
};
|
||||
}
|
||||
}
|
||||
134
ui-src/lib/support/Time90kParser.js
Normal file
134
ui-src/lib/support/Time90kParser.js
Normal file
@@ -0,0 +1,134 @@
|
||||
// vim: set et sw=2 ts=2:
|
||||
//
|
||||
// This file is part of Moonfire NVR, a security camera digital video recorder.
|
||||
// Copyright (C) 2018 Dolf Starreveld <dolf@starreveld.com>
|
||||
//
|
||||
// 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 moment from 'moment-timezone';
|
||||
|
||||
/**
|
||||
* Regular expression for parsing time format from timestamps.
|
||||
*
|
||||
* These regex captures groups:
|
||||
* 0: whole match or null if none
|
||||
* 1: HH:MM portion, or undefined
|
||||
* 2: :ss portion, or undefined
|
||||
* 3: FFFFF portion, or undefined
|
||||
* 4: [+-]hh[:mm] portion, or undefined
|
||||
*
|
||||
* @type {RegExp}
|
||||
*/
|
||||
const timeRe = new RegExp(
|
||||
[
|
||||
'^', // Start
|
||||
'([0-9]{1,2}:[0-9]{2})', // Capture HH:MM
|
||||
'(?:(:[0-9]{2})(?::([0-9]{5}))?)?', // Capture [:ss][:FFFFF]
|
||||
'([+-][0-9]{1,2}:?(?:[0-9]{2})?)?', // Capture [+-][zone]
|
||||
'$', // End
|
||||
].join('')
|
||||
);
|
||||
|
||||
/**
|
||||
* Class to parse time strings that possibly contain fractional
|
||||
* seconds in 90k units into a Number representation.
|
||||
*
|
||||
* The general format:
|
||||
* Expected timestamps are in this format:
|
||||
* HH:MM[:ss][:FFFFF][[+-]hh[:mm]]
|
||||
* where
|
||||
* HH = hours in one or two digits
|
||||
* MM = minutes in one or two digits
|
||||
* ss = seconds in one or two digits
|
||||
* FFFFF = fractional seconds in 90k units in exactly 5 digits
|
||||
* hh = hours of timezone offset in one or two digits
|
||||
* mm = minutes of timezone offset in one or two digits
|
||||
*
|
||||
*/
|
||||
export default class Time90kParser {
|
||||
/**
|
||||
* Construct with specific timezone.
|
||||
*
|
||||
* @param {String} tz Timezone
|
||||
*/
|
||||
constructor(tz) {
|
||||
self._tz = tz;
|
||||
}
|
||||
|
||||
/**
|
||||
* Set (another) timezone.
|
||||
*
|
||||
* @param {String} tz Timezone
|
||||
*/
|
||||
set tz(tz) {
|
||||
self._tz = tz;
|
||||
}
|
||||
|
||||
/**
|
||||
* Parses the given date and time string into a valid time90k or null.
|
||||
*
|
||||
* The date and time strings must be compatible with the partial ISO-8601
|
||||
* formats for each, or acceptable to the standard Date object.
|
||||
*
|
||||
* If only a date is specified and dateOnlyThenEndOfDay is false, the 00:00
|
||||
* timestamp for that day is returned. If dateOnlyThenEndOfDay is true, the
|
||||
* 00:00 of the very next day is returned.
|
||||
*
|
||||
* @param {String} dateStr String representing date
|
||||
* @param {String} timeStr String representing time
|
||||
* @param {Boolean} dateOnlyThenEndOfDay If only a date was specified and
|
||||
* this is true, then return time
|
||||
* for the end of day
|
||||
* @return {Number} Timestamp in 90k units, or null if parsing failed
|
||||
*/
|
||||
parseDateTime90k(dateStr, timeStr, dateOnlyThenEndOfDay) {
|
||||
// If just date, no special handling needed
|
||||
if (!timeStr) {
|
||||
const m = moment.tz(dateStr, self._tz);
|
||||
if (dateOnlyThenEndOfDay) {
|
||||
m.add({days: 1});
|
||||
}
|
||||
return m.valueOf() * 90;
|
||||
}
|
||||
|
||||
const [match, hhmm, ss, fffff, tz] = timeRe.exec(timeStr) || [];
|
||||
if (!match) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const orBlank = (s) => s || '';
|
||||
const datetimeStr = dateStr + 'T' + hhmm + orBlank(ss) + orBlank(tz);
|
||||
const m = moment.tz(datetimeStr, self._tz);
|
||||
if (!m.isValid()) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const frac = fffff === undefined ? 0 : parseInt(fffff, 10);
|
||||
return m.valueOf() * 90 + frac;
|
||||
}
|
||||
}
|
||||
166
ui-src/lib/support/TimeFormatter.js
Normal file
166
ui-src/lib/support/TimeFormatter.js
Normal file
@@ -0,0 +1,166 @@
|
||||
// vim: set et sw=2 ts=2:
|
||||
//
|
||||
// This file is part of Moonfire NVR, a security camera digital video recorder.
|
||||
// Copyright (C) 2018 Dolf Starreveld <dolf@starreveld.com>
|
||||
//
|
||||
// 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 moment from 'moment-timezone';
|
||||
|
||||
export const internalTimeFormat = 'YYYY-MM-DDTHH:mm:ss:FFFFFZ';
|
||||
export const defaultTimeFormat = 'YYYY-MM-DD HH:mm:ss';
|
||||
|
||||
/**
|
||||
* Class for formatting timestamps.
|
||||
*
|
||||
* There are methods for formatting timestamp in three different unit systems:
|
||||
* - 90k: The units are multiples of 1/90,000th of a second
|
||||
* - Sec: The units are multiples of seconds
|
||||
* - Ms: The units are multiples of milliseconds
|
||||
*
|
||||
* The object is initialized with a format string and a timezone. The timezone
|
||||
* is necessary to format times in that timezone.
|
||||
*
|
||||
* The format string is based on those accepted by moment.js with one addition
|
||||
* detailed in formatTimeStamp90k.
|
||||
*/
|
||||
export default class TimeFormatter {
|
||||
/**
|
||||
* Construct with specific format string and timezone.
|
||||
*
|
||||
* @param {String} formatStr Format specification string
|
||||
* @param {String} tz Timezone, e.g. "America/Los_Angeles"
|
||||
*/
|
||||
constructor(formatStr, tz) {
|
||||
this._formatStr = formatStr || defaultTimeFormat;
|
||||
this._tz = tz;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get current format string
|
||||
*
|
||||
* @return {String} Format specification string
|
||||
*/
|
||||
get formatStr() {
|
||||
return this._formatStr;
|
||||
}
|
||||
|
||||
/**
|
||||
* Get current timezone
|
||||
*
|
||||
* @return {String} Timezone
|
||||
*/
|
||||
get tz() {
|
||||
return this._tz;
|
||||
}
|
||||
|
||||
/**
|
||||
* Produces a human-readable timestamp in 90k units.
|
||||
*
|
||||
* The format is anything understood by moment's format function,
|
||||
* with the addition of one special format indicator consisting of
|
||||
* five successive Fs. If this pattern is used more than once,
|
||||
* only the first one will be handled. Subsequent ones will become
|
||||
* literal strings with five Fs.
|
||||
*
|
||||
* Using normal format codes, precision of up the three S (SSS) is
|
||||
* supported by moment to display decimal seconds. "moment" truncates
|
||||
* the value passed in to its constructor, effectively truncating
|
||||
* any fractional values in the timestamp. This function rounds
|
||||
* to compensate for that, except in the case of the FFFFF pattern,
|
||||
* where rounding is left out for historical reasons.
|
||||
*
|
||||
* FFFFF produces a string indicating how many 90k units are present
|
||||
* in the sub-second portion of the timestamp. Therefore this is *not*
|
||||
* a decimal fraction!
|
||||
*
|
||||
* @param {Number} ts90k timestamp in 90,000ths of a second resolution
|
||||
* @return {String} Formatted timestamp
|
||||
*/
|
||||
formatTimeStamp90k(ts90k) {
|
||||
let format = this._formatStr;
|
||||
const ms = ts90k / 90.0;
|
||||
const fracFmt = 'FFFFF';
|
||||
let fracLoc = format.indexOf(fracFmt);
|
||||
if (fracLoc != -1) {
|
||||
const frac = ts90k % 90000;
|
||||
format =
|
||||
format.substr(0, fracLoc) +
|
||||
String(100000 + frac).substr(1) +
|
||||
format.substr(fracLoc + fracFmt.length);
|
||||
}
|
||||
return moment.tz(ms, this._tz).format(format);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Specialized class similar to TimeFormatter but forcing a specific time format
|
||||
* for internal usage purposes.
|
||||
*/
|
||||
export class TimeStamp90kFormatter {
|
||||
/**
|
||||
* Construct from just a timezone specification.
|
||||
*
|
||||
* @param {String} tz Timezone
|
||||
*/
|
||||
constructor(tz) {
|
||||
this._formatter = new TimeFormatter(internalTimeFormat, tz);
|
||||
}
|
||||
|
||||
/**
|
||||
* Format a timestamp in 90k units using internal format.
|
||||
*
|
||||
* @param {Number} ts90k timestamp in 90,000ths of a second resolution
|
||||
* @return {String} Formatted timestamp
|
||||
*/
|
||||
formatTimeStamp90k(ts90k) {
|
||||
return this._formatter.formatTimeStamp90k(ts90k);
|
||||
}
|
||||
|
||||
/**
|
||||
* Given two timestamp return formatted versions of both, where the second
|
||||
* one may have been shortened if it falls on the same date as the first one.
|
||||
*
|
||||
* @param {Number} ts1 First timestamp in 90k units
|
||||
* @param {Number} ts2 Secodn timestamp in 90k units
|
||||
* @return {Array} Array with two elements: [ ts1Formatted, ts2Formatted ]
|
||||
*/
|
||||
formatSameDayShortened(ts1, ts2) {
|
||||
let ts1Formatted = this.formatTimeStamp90k(ts1);
|
||||
let ts2Formatted = this.formatTimeStamp90k(ts2);
|
||||
let timePos = this._formatter.formatStr.indexOf('T');
|
||||
if (timePos != -1) {
|
||||
const datePortion = ts1Formatted.substr(0, timePos);
|
||||
ts1Formatted = datePortion + ' ' + ts1Formatted.substr(timePos + 1);
|
||||
if (ts2Formatted.startsWith(datePortion)) {
|
||||
ts2Formatted = ts2Formatted.substr(timePos + 1);
|
||||
}
|
||||
}
|
||||
return [ts1Formatted, ts2Formatted];
|
||||
}
|
||||
}
|
||||
81
ui-src/lib/support/URLBuilder.js
Normal file
81
ui-src/lib/support/URLBuilder.js
Normal file
@@ -0,0 +1,81 @@
|
||||
// vim: set et sw=2 ts=2:
|
||||
//
|
||||
// This file is part of Moonfire NVR, a security camera digital video recorder.
|
||||
// Copyright (C) 2018 Dolf Starreveld <dolf@starreveld.com>
|
||||
//
|
||||
// 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/>.
|
||||
|
||||
/**
|
||||
* Class to help with URL construction.
|
||||
*/
|
||||
export default class URLBuilder {
|
||||
/**
|
||||
* Construct builder with a base url.
|
||||
*
|
||||
* It is possible to indicate the we only want to extract relative
|
||||
* urls. In that case, pass a dummy scheme and host.
|
||||
*
|
||||
* @param {String} base Base url, including scheme and host
|
||||
* @param {Boolean} relative True if relative urls desired
|
||||
*/
|
||||
constructor(base, relative = true) {
|
||||
this._baseUrl = base;
|
||||
this._relative = relative;
|
||||
}
|
||||
|
||||
/**
|
||||
* Append query parameters from a map to a URL.
|
||||
*
|
||||
* This is cumulative, so if you call this multiple times on the same URL
|
||||
* the resulting URL will have the combined query parameters and values.
|
||||
*
|
||||
* @param {URL} url URL to add query parameters to
|
||||
* @param {Object} query Object with parameter name/value pairs
|
||||
* @return {URL} URL where query params have been added
|
||||
*/
|
||||
_addQuery(url, query = {}) {
|
||||
Object.entries(query).forEach(([k, v]) => url.searchParams.set(k, v));
|
||||
return url;
|
||||
}
|
||||
|
||||
/**
|
||||
* Construct a String url based on an initial path and an optional set
|
||||
* of query parameters.
|
||||
*
|
||||
* The url will be constructed based on the base url, with path appended.
|
||||
*
|
||||
* @param {String} path Path to be added to base url
|
||||
* @param {Object} query Object with query parameters
|
||||
* @return {String} Formatted url, relative if so configured
|
||||
*/
|
||||
makeUrl(path, query = {}) {
|
||||
const url = new URL(path || '', this._baseUrl);
|
||||
this._addQuery(url, query);
|
||||
return this._relative ? url.pathname + url.search : url.href;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user