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

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;
}
}