MyFavMirrors/moonfire-nvr
1
0
Fork 0
mirror of https://github.com/scottlamb/moonfire-nvr.git synced 2025-11-20 01:50:24 -05:00
Code Issues Packages Projects Releases Wiki Activity

A little more UI refactor, cleanup, eslint more strict (#54)

Browse Source 
* A little more UI refactor, cleanup, eslint more strict

* Split out imports for jQuery components and put them where needed.
* No longer do all of it in application module.
* Prepares better for code splitting.
* Split out video player dialog
* Simplifies jquery-ui dependencies for code splitting
* Simplifies code
* Configure to generate more, but smaller bundles.
* Setup some more strict eslint settings
* Fix css to import rather than require
* Change settings to correctly support tree shaking in production build

Signed-off-by: Dolf Starreveld <dolf@starreveld.com>

* Remove “old” code from TimeFormatter

* Accidentally left behind due to overlapping PRs

Signed-off-by: Dolf Starreveld <dolf@starreveld.com>
This commit is contained in:
Dolf Starreveld
2018-03-25 22:18:56 -07:00
committed by Scott Lamb
parent eaae640703
commit f5aa0080bb
21 changed files with 434 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
ui-src/lib/MoonfireAPI.js
View File

@@ -59,7 +59,7 @@ export default class MoonfireAPI {
url.hostname = host;
url.port = port;
console.log('API: ' + url.origin + url.pathname);
this._builder = new URLBuilder(url.origin + url.pathname);
this._builder = new URLBuilder(url.origin + url.pathname, relativeUrls);
}
/**

2
ui-src/lib/models/CalendarTSRange.js
View File

@@ -31,7 +31,7 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import Time90kParser from '../support/Time90kParser';
import {TimeStamp90kFormatter} from '../support/TimeFormatter';
import TimeStamp90kFormatter from '../support/TimeStamp90kFormatter';
import Range90k from './Range90k';
/**

4
ui-src/lib/models/Range.js
View File

@@ -45,7 +45,7 @@ export default class Range {
*/
constructor(low, high) {
if (high < low) {
console.log('Warning range swap: ' + low + ' - ' + high);
console.warn('Warning range swap: ' + low + ' - ' + high);
[low, high] = [high, low];
}
this.low = low;
@@ -65,7 +65,7 @@ export default class Range {
* Determine if value is inside the range.
*
* @param {Number} value Value to test
* @return {Boolean}
* @return {Boolean}
*/
isInRange(value) {
return value >= this.low && value <= this.high;

5
ui-src/lib/models/Range90k.js
View File

@@ -40,9 +40,10 @@ import Range from './Range';
let _range = new WeakMap();
/**
* Subclass of Range to represent ranges over timestamps in 90k format.
* Class like Range to represent ranges over timestamps in 90k format.
*
* This mostly means added some getters with names that make more sense.
* A composed member of the Range class is use for the heavy lifting, while
* this class provides a different interface.
*/
export default class Range90k {
/**

49
ui-src/lib/support/TimeFormatter.js
View File

@@ -32,7 +32,7 @@
import moment from 'moment-timezone';
export const internalTimeFormat = 'YYYY-MM-DDTHH:mm:ss:FFFFFZ';
export const defaultTimeFormat = 'YYYY-MM-DD HH:mm:ss';
/**
@@ -117,50 +117,3 @@ export default class TimeFormatter {
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];
}
}

83
ui-src/lib/support/TimeStamp90kFormatter.js Normal file
View File

@@ -0,0 +1,83 @@
// 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';
export const internalTimeFormat = 'YYYY-MM-DDTHH:mm:ss:FFFFFZ';
/**
* Specialized class similar to TimeFormatter but forcing a specific time format
* for internal usage purposes.
*/
export default 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];
}
}

33
ui-src/lib/views/CalendarView.js
View File

@@ -31,20 +31,10 @@
// along with this program. If not, see <http://www.gnu.org/licenses/>.
import $ from 'jquery';
import 'jquery-ui/themes/base/button.css';
import 'jquery-ui/themes/base/core.css';
import 'jquery-ui/themes/base/datepicker.css';
import 'jquery-ui/themes/base/dialog.css';
import 'jquery-ui/themes/base/resizable.css';
import 'jquery-ui/themes/base/theme.css';
import 'jquery-ui/themes/base/tooltip.css';
import 'jquery-ui/ui/widgets/datepicker';
import 'jquery-ui/ui/widgets/dialog';
import 'jquery-ui/ui/widgets/tooltip';
import DatePickerView from './DatePickerView';
import CalendarTSRange from '../models/CalendarTSRange';
import {TimeStamp90kFormatter} from '../support/TimeFormatter';
import TimeStamp90kFormatter from '../support/TimeStamp90kFormatter';
import Time90kParser from '../support/Time90kParser';
/**
@@ -177,10 +167,11 @@ export default class CalendarView {
if (this._sameDay) {
fromPickerView.option({
dateFormat: $.datepicker.ISO_8601,
dateFormat: DatePickerView.datepicker.ISO_8601,
minDate: minDateStr,
maxDate: maxDateStr,
onSelect: (dateStr, picker) => this._updateRangeDates(dateStr, dateStr),
onSelect: (dateStr /* , picker */) =>
this._updateRangeDates(dateStr, dateStr),
beforeShowDay: beforeShowDay,
disabled: false,
});
@@ -188,21 +179,21 @@ export default class CalendarView {
toPickerView.activate(); // Default state, but alive
} else {
fromPickerView.option({
dateFormat: $.datepicker.ISO_8601,
dateFormat: DatePickerView.datepicker.ISO_8601,
minDate: minDateStr,
onSelect: (dateStr, picker) => {
toPickerView.option('minDate', this.fromDateISO);
onSelect: (dateStr /* , picker */) => {
toPickerView.minDate = this.fromDateISO;
this._updateRangeDates(dateStr, this.toDateISO);
},
beforeShowDay: beforeShowDay,
disabled: false,
});
toPickerView.option({
dateFormat: $.datepicker.ISO_8601,
dateFormat: DatePickerView.datepicker.ISO_8601,
minDate: fromPickerView.dateISO,
maxDate: maxDateStr,
onSelect: (dateStr, picker) => {
fromPickerView.option('maxDate', this.toDateISO);
onSelect: (dateStr /* , picker */) => {
fromPickerView.maxDate = this.toDateISO;
this._updateRangeDates(this.fromDateISO, dateStr);
},
beforeShowDay: beforeShowDay,
@@ -228,7 +219,7 @@ export default class CalendarView {
* The change requires updating the selected range and then informing
* any listeners that the range has changed (so they can update data).
*
* @param {Object} event Time Event on DOM that triggered calling this
* @param {event} event DOM event that triggered us
* @param {Boolean} isEnd True if this is for end time
*/
_pickerTimeChanged(event, isEnd) {
@@ -239,7 +230,7 @@ export default class CalendarView {
? selectedRange.setEndTime(newTimeStr)
: selectedRange.setStartTime(newTimeStr);
if (parsedTS === null) {
console.log('bad time change');
console.warn('bad time change');
$(pickerElement).addClass('ui-state-error');
return;
}

2
ui-src/lib/views/CameraView.js
View File

@@ -83,7 +83,7 @@ export default class CameraView {
this._enabled = enabled;
this.recordingsView.show = enabled;
console.log(
'Camera ',
'Camera %s %s',
this.camera.shortName,
this.enabled ? 'enabled' : 'disabled'
);

23
ui-src/lib/views/DatePickerView.js
View File

@@ -32,10 +32,27 @@
import $ from 'jquery';
import 'jquery-ui/themes/base/core.css';
import 'jquery-ui/themes/base/datepicker.css';
import 'jquery-ui/themes/base/theme.css';
import 'jquery-ui/ui/widgets/datepicker';
/**
* Class to encapsulate datepicker UI widget from jQuery.
*/
export default class DatePickerView {
/**
* Get the singleton datepicker instance.
*
* This is useful for accessing implementation constants, such as
* date formats etc.
*
* @return {jQuery.datepicker} JQuery datepicker instance
*/
static get datepicker() {
return $.datepicker;
}
/**
* Construct wapper an attach to a specified parent DOM node.
*
@@ -85,11 +102,11 @@ export default class DatePickerView {
*
* @return {Any} Function result
*/
_apply() {
_apply(...args) {
if (!this._alive) {
console.log('WARN: datepicker not constructed yet [' + this.domId + ']');
console.warn('datepicker not constructed yet [%s]', this.domId);
}
return this._pickerElement.datepicker(...arguments);
return this._pickerElement.datepicker(...args);
}
/**

4
ui-src/lib/views/RecordingsView.js
View File

@@ -267,8 +267,8 @@ export default class RecordingsView {
$('tr.r', tbody).remove();
this._recordings.forEach((r) => {
let row = $('<tr class="r" />');
row.append(_columnOrder.map((k) => $('<td/>')));
row.on('click', (e) => {
row.append(_columnOrder.map(() => $('<td/>')));
row.on('click', () => {
console.log('Video clicked');
if (this._clickHandler !== null) {
console.log('Video clicked handler call');

99
ui-src/lib/views/VideoDialogView.js Normal file
View File

@@ -0,0 +1,99 @@
// 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 $ from 'jquery';
import 'jquery-ui/themes/base/core.css';
import 'jquery-ui/themes/base/dialog.css';
import 'jquery-ui/themes/base/theme.css';
// This not needed for pure dialog, but we want it resizable
import 'jquery-ui/themes/base/resizable.css';
// Get dialog ui widget
import 'jquery-ui/ui/widgets/dialog';
/**
* Class to implement a simple jQuery dialog based video player.
*/
export default class VideoDialogView {
/**
* Construct the player.
*
* This does not attach the player to the DOM anywhere! In fact, construction
* of the necessary video element is delayed until an attach is requested.
* Since the close of the video removes all traces of it in the DOM, this
* apprach allows repeated use by calling attach again!
*/
constructor() {}
/**
* Attach the player to the specified DOM element.
*
* @param {Node} domElement DOM element to attach to
* @return {VideoDialogView} Returns "this" for chaining.
*/
attach(domElement) {
this._videoElement = $('<video controls preload="auto" autoplay="true" />');
this._dialogElement = $('<div class="playdialog" />').append(
this._videoElement
);
$(domElement).append(this._dialogElement);
return this;
}
/**
* Show the player, and start playing the given url.
*
* @param {String} title Title of the video player
* @param {Number} width Width of the player
* @param {String} url URL for source media
* @return {VideoDialogView} Returns "this" for chaining.
*/
play(title, width, url) {
this._dialogElement.dialog({
title: title,
width: width,
close: () => {
const videoDOMElement = this._videoElement[0];
videoDOMElement.pause();
videoDOMElement.src = ''; // Remove current source to stop loading
this._videoElement = null;
this._dialogElement.remove();
this._dialogElement = null;
},
});
// Now that dialog is up, set the src so video starts
console.log('Video url: ' + url);
this._videoElement.attr('src', url);
return this;
}
}