MyFavMirrors
/
moonfire-nvr
mirror of https://github.com/scottlamb/moonfire-nvr.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

fix incorrect Javascript private variable style 

It's supposed to be a trailing underscore, not a leading underscore, as
described here:

https://google.github.io/styleguide/jsguide.html#naming-method-names
https://google.github.io/styleguide/jsguide.html#naming-non-constant-field-names

and discussed in an earlier PR:

https://github.com/scottlamb/moonfire-nvr/pull/48#discussion_r175678736

I fixed these mechanically:

rg -l0 'this[.]_' | xargs -0 perl -pi -e 's/this[.]_(\w+)/this.$1_/g'
rg -l0 '\s_\w+\(' | xargs -0 perl -pi -e 's/_(\w+)\(/$1_(/g'
This commit is contained in:
Scott Lamb 2020-03-14 15:20:18 -07:00
parent 038aebe0fd
commit 9d6dec2565
13 changed files with 223 additions and 223 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -59,7 +59,7 @@ export default class MoonfireAPI {
url.hostname = host; url.hostname = host;
url.port = port; url.port = port;
console.log('API: ' + url.origin + url.pathname); console.log('API: ' + url.origin + url.pathname);
this._builder = new URLBuilder(url.origin + url.pathname, relativeUrls); this.builder_ = new URLBuilder(url.origin + url.pathname, relativeUrls);
} }
/** /**
@ -70,7 +70,7 @@ export default class MoonfireAPI {
* @return {String} Constructed url * @return {String} Constructed url
*/ */
nvrUrl(days = true) { nvrUrl(days = true) {
return this._builder.makeUrl('', {days: days}); return this.builder_.makeUrl('', {days: days});
} }
/** /**
@ -92,7 +92,7 @@ export default class MoonfireAPI {
if (split90k != Infinity) { if (split90k != Infinity) {
query.split90k = split90k; query.split90k = split90k;
} }
return this._builder.makeUrl( return this.builder_.makeUrl(
'cameras/' + cameraUUID + '/' + streamType + '/recordings', 'cameras/' + cameraUUID + '/' + streamType + '/recordings',
query query
); );
@ -135,7 +135,7 @@ export default class MoonfireAPI {
s: sParam, s: sParam,
ts: timestampTrack, ts: timestampTrack,
}); });
return this._builder.makeUrl('cameras/' + cameraUUID + '/' + streamType + return this.builder_.makeUrl('cameras/' + cameraUUID + '/' + streamType +
'/view.mp4', { '/view.mp4', {
s: sParam, s: sParam,
ts: timestampTrack, ts: timestampTrack,
@ -167,7 +167,7 @@ export default class MoonfireAPI {
* @return {Request} * @return {Request}
*/ */
login(username, password) { login(username, password) {
return $.ajax(this._builder.makeUrl('login'), { return $.ajax(this.builder_.makeUrl('login'), {
data: JSON.stringify({ data: JSON.stringify({
username: username, username: username,
password: password, password: password,
@ -185,7 +185,7 @@ export default class MoonfireAPI {
* @return {Request} * @return {Request}
*/ */
logout(csrf) { logout(csrf) {
return $.ajax(this._builder.makeUrl('logout'), { return $.ajax(this.builder_.makeUrl('logout'), {
data: JSON.stringify({ data: JSON.stringify({
csrf: csrf, csrf: csrf,
}), }),

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

@ -53,11 +53,11 @@ export default class CalendarTSRange {
* @param {String} timeZone Desired timezone, e.g. 'America/Los_Angeles' * @param {String} timeZone Desired timezone, e.g. 'America/Los_Angeles'
*/ */
constructor(timeZone) { constructor(timeZone) {
this._start = {dateStr: null, timeStr: '', ts90k: null}; this.start_ = {dateStr: null, timeStr: '', ts90k: null};
this._end = {dateStr: null, timeStr: '', ts90k: null}; this.end_ = {dateStr: null, timeStr: '', ts90k: null};
// Don't need to keep timezone, but need parser and formatter // Don't need to keep timezone, but need parser and formatter
this._timeFormatter = new TimeStamp90kFormatter(timeZone); this.timeFormatter_ = new TimeStamp90kFormatter(timeZone);
this._timeParser = new Time90kParser(timeZone); this.timeParser_ = new Time90kParser(timeZone);
} }
/** /**
@ -93,7 +93,7 @@ export default class CalendarTSRange {
* @return {object} Object containing dateStr, timeStr, and ts90k components * @return {object} Object containing dateStr, timeStr, and ts90k components
*/ */
get start() { get start() {
return this._start; return this.start_;
} }
/** /**
@ -102,7 +102,7 @@ export default class CalendarTSRange {
* @return {object} Object containing dateStr, timeStr, and ts90k components * @return {object} Object containing dateStr, timeStr, and ts90k components
*/ */
get end() { get end() {
return this._end; return this.end_;
} }
/** /**
@ -165,8 +165,8 @@ export default class CalendarTSRange {
* not present in the range. * not present in the range.
* @return {Number} New timestamp if succesfully parsed, null otherwise * @return {Number} New timestamp if succesfully parsed, null otherwise
*/ */
_setRangeTime(range, dateStr, timeStr, dateOnlyThenEndOfDay) { setRangeTime_(range, dateStr, timeStr, dateOnlyThenEndOfDay) {
const newTs90k = this._timeParser.parseDateTime90k( const newTs90k = this.timeParser_.parseDateTime90k(
dateStr, dateStr,
timeStr, timeStr,
dateOnlyThenEndOfDay dateOnlyThenEndOfDay
@ -189,7 +189,7 @@ export default class CalendarTSRange {
* @return {Number} New timestamp if succesfully parsed, null otherwise * @return {Number} New timestamp if succesfully parsed, null otherwise
*/ */
setStartDate(dateStr) { setStartDate(dateStr) {
return this._setRangeTime(this._start, dateStr, this._start.timeStr, false); return this.setRangeTime_(this.start_, dateStr, this.start_.timeStr, false);
} }
/** /**
@ -201,7 +201,7 @@ export default class CalendarTSRange {
* @return {Number} New timestamp if succesfully parsed, null otherwise * @return {Number} New timestamp if succesfully parsed, null otherwise
*/ */
setStartTime(timeStr) { setStartTime(timeStr) {
return this._setRangeTime(this._start, this._start.dateStr, timeStr, false); return this.setRangeTime_(this.start_, this.start_.dateStr, timeStr, false);
} }
/** /**
@ -213,7 +213,7 @@ export default class CalendarTSRange {
* @return {Number} New timestamp if succesfully parsed, null otherwise * @return {Number} New timestamp if succesfully parsed, null otherwise
*/ */
setEndDate(dateStr) { setEndDate(dateStr) {
return this._setRangeTime(this._end, dateStr, this._end.timeStr, true); return this.setRangeTime_(this.end_, dateStr, this.end_.timeStr, true);
} }
/** /**
@ -225,7 +225,7 @@ export default class CalendarTSRange {
* @return {Number} New timestamp if succesfully parsed, null otherwise * @return {Number} New timestamp if succesfully parsed, null otherwise
*/ */
setEndTime(timeStr) { setEndTime(timeStr) {
return this._setRangeTime(this._end, this._end.dateStr, timeStr, true); return this.setRangeTime_(this.end_, this.end_.dateStr, timeStr, true);
} }
/** /**
@ -236,6 +236,6 @@ export default class CalendarTSRange {
* @return {String} Formatted string * @return {String} Formatted string
*/ */
formatTimeStamp90k(ts90k) { formatTimeStamp90k(ts90k) {
return this._timeFormatter.formatTimeStamp90k(ts90k); return this.timeFormatter_.formatTimeStamp90k(ts90k);
} }
} }

10
ui-src/lib/support/RecordingFormatter.js
View File

@ -59,8 +59,8 @@ export default class RecordingFormatter {
* @param {String} tz Timezone * @param {String} tz Timezone
*/ */
constructor(formatStr, tz) { constructor(formatStr, tz) {
this._timeFormatter = new TimeFormatter(formatStr, tz); this.timeFormatter_ = new TimeFormatter(formatStr, tz);
this._singleDateStr = null; this.singleDateStr_ = null;
} }
/** /**
@ -69,7 +69,7 @@ export default class RecordingFormatter {
* @param {String} formatStr Time format string * @param {String} formatStr Time format string
*/ */
set timeFormat(formatStr) { set timeFormat(formatStr) {
this._timeFormatter = new TimeFormatter(formatStr, this._timeFormatter.tz); this.timeFormatter_ = new TimeFormatter(formatStr, this.timeFormatter_.tz);
} }
/** /**
@ -85,8 +85,8 @@ export default class RecordingFormatter {
const duration = recording.duration; const duration = recording.duration;
const trimmedRange = recording.range90k(trimRange); const trimmedRange = recording.range90k(trimRange);
return { return {
start: this._timeFormatter.formatTimeStamp90k(trimmedRange.startTime90k), start: this.timeFormatter_.formatTimeStamp90k(trimmedRange.startTime90k),
end: this._timeFormatter.formatTimeStamp90k(trimmedRange.endTime90k), end: this.timeFormatter_.formatTimeStamp90k(trimmedRange.endTime90k),
resolution: resolution:
recording.videoSampleEntryWidth + recording.videoSampleEntryWidth +
'x' + 'x' +

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

@ -57,8 +57,8 @@ export default class TimeFormatter {
* @param {String} tz Timezone, e.g. "America/Los_Angeles" * @param {String} tz Timezone, e.g. "America/Los_Angeles"
*/ */
constructor(formatStr, tz) { constructor(formatStr, tz) {
this._formatStr = formatStr || defaultTimeFormat; this.formatStr_ = formatStr || defaultTimeFormat;
this._tz = tz; this.tz_ = tz;
} }
/** /**
@ -67,7 +67,7 @@ export default class TimeFormatter {
* @return {String} Format specification string * @return {String} Format specification string
*/ */
get formatStr() { get formatStr() {
return this._formatStr; return this.formatStr_;
} }
/** /**
@ -76,7 +76,7 @@ export default class TimeFormatter {
* @return {String} Timezone * @return {String} Timezone
*/ */
get tz() { get tz() {
return this._tz; return this.tz_;
} }
/** /**
@ -103,7 +103,7 @@ export default class TimeFormatter {
* @return {String} Formatted timestamp * @return {String} Formatted timestamp
*/ */
formatTimeStamp90k(ts90k) { formatTimeStamp90k(ts90k) {
let format = this._formatStr; let format = this.formatStr_;
const ms = ts90k / 90.0; const ms = ts90k / 90.0;
const fracFmt = 'FFFFF'; const fracFmt = 'FFFFF';
const fracLoc = format.indexOf(fracFmt); const fracLoc = format.indexOf(fracFmt);
@ -114,6 +114,6 @@ export default class TimeFormatter {
String(100000 + frac).substr(1) + String(100000 + frac).substr(1) +
format.substr(fracLoc + fracFmt.length); format.substr(fracLoc + fracFmt.length);
} }
return moment.tz(ms, this._tz).format(format); return moment.tz(ms, this.tz_).format(format);
} }
} }

6
ui-src/lib/support/TimeStamp90kFormatter.js
View File

@ -46,7 +46,7 @@ export default class TimeStamp90kFormatter {
* @param {String} tz Timezone * @param {String} tz Timezone
*/ */
constructor(tz) { constructor(tz) {
this._formatter = new TimeFormatter(internalTimeFormat, tz); this.formatter_ = new TimeFormatter(internalTimeFormat, tz);
} }
/** /**
@ -56,7 +56,7 @@ export default class TimeStamp90kFormatter {
* @return {String} Formatted timestamp * @return {String} Formatted timestamp
*/ */
formatTimeStamp90k(ts90k) { formatTimeStamp90k(ts90k) {
return this._formatter.formatTimeStamp90k(ts90k); return this.formatter_.formatTimeStamp90k(ts90k);
} }
/** /**
@ -70,7 +70,7 @@ export default class TimeStamp90kFormatter {
formatSameDayShortened(ts1, ts2) { formatSameDayShortened(ts1, ts2) {
let ts1Formatted = this.formatTimeStamp90k(ts1); let ts1Formatted = this.formatTimeStamp90k(ts1);
let ts2Formatted = this.formatTimeStamp90k(ts2); let ts2Formatted = this.formatTimeStamp90k(ts2);
const timePos = this._formatter.formatStr.indexOf('T'); const timePos = this.formatter_.formatStr.indexOf('T');
if (timePos != -1) { if (timePos != -1) {
const datePortion = ts1Formatted.substr(0, timePos); const datePortion = ts1Formatted.substr(0, timePos);
ts1Formatted = datePortion + ' ' + ts1Formatted.substr(timePos + 1); ts1Formatted = datePortion + ' ' + ts1Formatted.substr(timePos + 1);

12
ui-src/lib/support/URLBuilder.js
View File

@ -44,8 +44,8 @@ export default class URLBuilder {
* @param {Boolean} relative True if relative urls desired * @param {Boolean} relative True if relative urls desired
*/ */
constructor(base, relative = true) { constructor(base, relative = true) {
this._baseUrl = base; this.baseUrl_ = base;
this._relative = relative; this.relative_ = relative;
} }
/** /**
@ -58,7 +58,7 @@ export default class URLBuilder {
* @param {Object} query Object with parameter name/value pairs * @param {Object} query Object with parameter name/value pairs
* @return {URL} URL where query params have been added * @return {URL} URL where query params have been added
*/ */
_addQuery(url, query = {}) { addQuery_(url, query = {}) {
Object.entries(query).forEach(([k, v]) => url.searchParams.set(k, v)); Object.entries(query).forEach(([k, v]) => url.searchParams.set(k, v));
return url; return url;
} }
@ -74,8 +74,8 @@ export default class URLBuilder {
* @return {String} Formatted url, relative if so configured * @return {String} Formatted url, relative if so configured
*/ */
makeUrl(path, query = {}) { makeUrl(path, query = {}) {
const url = new URL(path || '', this._baseUrl); const url = new URL(path || '', this.baseUrl_);
this._addQuery(url, query); this.addQuery_(url, query);
return this._relative ? url.pathname + url.search : url.href; return this.relative_ ? url.pathname + url.search : url.href;
} }
} }

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

@ -105,12 +105,12 @@ export default class CalendarView {
} = {}) { } = {}) {
// Lookup all by id, check and remember // Lookup all by id, check and remember
[ [
this._fromPickerView, this.fromPickerView_,
this._toPickerView, this.toPickerView_,
this._sameDayElement, this.sameDayElement_,
this._otherDayElement, this.otherDayElement_,
this._startTimeElement, this.startTimeElement_,
this._endTimeElement, this.endTimeElement_,
] = [ ] = [
fromPickerId, fromPickerId,
toPickerId, toPickerId,
@ -125,20 +125,20 @@ export default class CalendarView {
} }
return el; return el;
}); });
this._fromPickerView = new DatePickerView(this._fromPickerView); this.fromPickerView_ = new DatePickerView(this.fromPickerView_);
this._toPickerView = new DatePickerView(this._toPickerView); this.toPickerView_ = new DatePickerView(this.toPickerView_);
this._timeFormatter = new TimeStamp90kFormatter(timeZone); this.timeFormatter_ = new TimeStamp90kFormatter(timeZone);
this._timeParser = new Time90kParser(timeZone); this.timeParser_ = new Time90kParser(timeZone);
this._selectedRange = new CalendarTSRange(timeZone); this.selectedRange_ = new CalendarTSRange(timeZone);
this._sameDay = true; // Start in single day view this.sameDay_ = true; // Start in single day view
this._sameDayElement.prop('checked', this._sameDay); this.sameDayElement_.prop('checked', this.sameDay_);
this._otherDayElement.prop('checked', !this._sameDay); this.otherDayElement_.prop('checked', !this.sameDay_);
this._availableDates = null; this.availableDates_ = null;
this._minDateStr = null; this.minDateStr_ = null;
this._maxDateStr = null; this.maxDateStr_ = null;
this._singleDateStr = null; this.singleDateStr_ = null;
this._streamViews = null; this.streamViews_ = null;
this._rangeChangedHandler = null; this.rangeChangedHandler_ = null;
} }
/** /**
@ -147,31 +147,31 @@ export default class CalendarView {
* @param {String} tz New timezone * @param {String} tz New timezone
*/ */
set tz(tz) { set tz(tz) {
this._timeParser.tz = tz; this.timeParser_.tz = tz;
} }
/** /**
* (Re)configure the datepickers and other calendar range inputs to reflect * (Re)configure the datepickers and other calendar range inputs to reflect
* available dates. * available dates.
*/ */
_configureDatePickers() { configureDatePickers_() {
const dateSet = this._availableDates; const dateSet = this.availableDates_;
const minDateStr = this._minDateStr; const minDateStr = this.minDateStr_;
const maxDateStr = this._maxDateStr; const maxDateStr = this.maxDateStr_;
const fromPickerView = this._fromPickerView; const fromPickerView = this.fromPickerView_;
const toPickerView = this._toPickerView; const toPickerView = this.toPickerView_;
const beforeShowDay = function(date) { const beforeShowDay = function(date) {
const dateStr = date.toISOString().substr(0, 10); const dateStr = date.toISOString().substr(0, 10);
return [dateSet.has(dateStr), '', '']; return [dateSet.has(dateStr), '', ''];
}; };
if (this._sameDay) { if (this.sameDay_) {
fromPickerView.option({ fromPickerView.option({
dateFormat: DatePickerView.datepicker.ISO_8601, dateFormat: DatePickerView.datepicker.ISO_8601,
minDate: minDateStr, minDate: minDateStr,
maxDate: maxDateStr, maxDate: maxDateStr,
onSelect: (dateStr /* , picker */) => onSelect: (dateStr /* , picker */) =>
this._updateRangeDates(dateStr, dateStr), this.updateRangeDates_(dateStr, dateStr),
beforeShowDay: beforeShowDay, beforeShowDay: beforeShowDay,
disabled: false, disabled: false,
}); });
@ -183,7 +183,7 @@ export default class CalendarView {
minDate: minDateStr, minDate: minDateStr,
onSelect: (dateStr /* , picker */) => { onSelect: (dateStr /* , picker */) => {
toPickerView.minDate = this.fromDateISO; toPickerView.minDate = this.fromDateISO;
this._updateRangeDates(dateStr, this.toDateISO); this.updateRangeDates_(dateStr, this.toDateISO);
}, },
beforeShowDay: beforeShowDay, beforeShowDay: beforeShowDay,
disabled: false, disabled: false,
@ -194,7 +194,7 @@ export default class CalendarView {
maxDate: maxDateStr, maxDate: maxDateStr,
onSelect: (dateStr /* , picker */) => { onSelect: (dateStr /* , picker */) => {
fromPickerView.maxDate = this.toDateISO; fromPickerView.maxDate = this.toDateISO;
this._updateRangeDates(this.fromDateISO, dateStr); this.updateRangeDates_(this.fromDateISO, dateStr);
}, },
beforeShowDay: beforeShowDay, beforeShowDay: beforeShowDay,
disabled: false, disabled: false,
@ -207,9 +207,9 @@ export default class CalendarView {
/** /**
* Call an installed handler (if any) to inform that range has changed. * Call an installed handler (if any) to inform that range has changed.
*/ */
_informRangeChange() { informRangeChange_() {
if (this._rangeChangedHandler !== null) { if (this.rangeChangedHandler_ !== null) {
this._rangeChangedHandler(this._selectedRange); this.rangeChangedHandler_(this.selectedRange_);
} }
} }
@ -222,10 +222,10 @@ export default class CalendarView {
* @param {event} event DOM event that triggered us * @param {event} event DOM event that triggered us
* @param {Boolean} isEnd True if this is for end time * @param {Boolean} isEnd True if this is for end time
*/ */
_pickerTimeChanged(event, isEnd) { pickerTimeChanged_(event, isEnd) {
const pickerElement = event.currentTarget; const pickerElement = event.currentTarget;
const newTimeStr = pickerElement.value; const newTimeStr = pickerElement.value;
const selectedRange = this._selectedRange; const selectedRange = this.selectedRange_;
const parsedTS = isEnd ? const parsedTS = isEnd ?
selectedRange.setEndTime(newTimeStr) : selectedRange.setEndTime(newTimeStr) :
selectedRange.setStartTime(newTimeStr); selectedRange.setStartTime(newTimeStr);
@ -240,10 +240,10 @@ export default class CalendarView {
' time changed to: ' + ' time changed to: ' +
parsedTS + parsedTS +
' (' + ' (' +
this._timeFormatter.formatTimeStamp90k(parsedTS) + this.timeFormatter_.formatTimeStamp90k(parsedTS) +
')' ')'
); );
this._informRangeChange(); this.informRangeChange_();
} }
/** /**
@ -253,9 +253,9 @@ export default class CalendarView {
* *
* @param {Boolean} isSameDay True if the same day radio button was activated * @param {Boolean} isSameDay True if the same day radio button was activated
*/ */
_pickerSameDayChanged(isSameDay) { pickerSameDayChanged_(isSameDay) {
// Prevent change if not real change (can happen on initial setup) // Prevent change if not real change (can happen on initial setup)
if (this._sameDay != isSameDay) { if (this.sameDay_ != isSameDay) {
/** /**
* This is called when the status of the same/other day radio buttons * This is called when the status of the same/other day radio buttons
* changes. We need to determine a new selected range and activiate it. * changes. We need to determine a new selected range and activiate it.
@ -264,11 +264,11 @@ export default class CalendarView {
const endDate = isSameDay ? const endDate = isSameDay ?
this.selectedRange.start.dateStr : this.selectedRange.start.dateStr :
this.selectedRange.end.dateStr; this.selectedRange.end.dateStr;
this._updateRangeDates(this.selectedRange.start.dateStr, endDate); this.updateRangeDates_(this.selectedRange.start.dateStr, endDate);
this._sameDay = isSameDay; this.sameDay_ = isSameDay;
// Switch between single day and multi-day // Switch between single day and multi-day
this._configureDatePickers(); this.configureDatePickers_();
} }
} }
@ -281,8 +281,8 @@ export default class CalendarView {
* @param {String} startDateStr New starting date * @param {String} startDateStr New starting date
* @param {String} endDateStr New ending date * @param {String} endDateStr New ending date
*/ */
_updateRangeDates(startDateStr, endDateStr) { updateRangeDates_(startDateStr, endDateStr) {
const newRange = this._selectedRange; const newRange = this.selectedRange_;
const originalStart = Object.assign({}, newRange.start); const originalStart = Object.assign({}, newRange.start);
const originalEnd = Object.assign({}, newRange.end); const originalEnd = Object.assign({}, newRange.end);
newRange.setStartDate(startDateStr); newRange.setStartDate(startDateStr);
@ -300,7 +300,7 @@ export default class CalendarView {
!isSameRange(newRange.end, originalEnd) !isSameRange(newRange.end, originalEnd)
) { ) {
console.log('New range: ' + startDateStr + ' - ' + endDateStr); console.log('New range: ' + startDateStr + ' - ' + endDateStr);
this._informRangeChange(); this.informRangeChange_();
} }
} }
@ -309,18 +309,18 @@ export default class CalendarView {
* time input boxes as both need to result in an update of the calendar * time input boxes as both need to result in an update of the calendar
* view. * view.
*/ */
_wireControls() { wireControls_() {
// If same day status changed, update the view // If same day status changed, update the view
this._sameDayElement.change(() => this._pickerSameDayChanged(true)); this.sameDayElement_.change(() => this.pickerSameDayChanged_(true));
this._otherDayElement.change(() => this._pickerSameDayChanged(false)); this.otherDayElement_.change(() => this.pickerSameDayChanged_(false));
// Handle changing of a time input (either from or to) // Handle changing of a time input (either from or to)
const handler = (e, isEnd) => { const handler = (e, isEnd) => {
console.log('Time changed for: ' + (isEnd ? 'end' : 'start')); console.log('Time changed for: ' + (isEnd ? 'end' : 'start'));
this._pickerTimeChanged(e, isEnd); this.pickerTimeChanged_(e, isEnd);
}; };
this._startTimeElement.change((e) => handler(e, false)); this.startTimeElement_.change((e) => handler(e, false));
this._endTimeElement.change((e) => handler(e, true)); this.endTimeElement_.change((e) => handler(e, true));
} }
/** /**
@ -332,18 +332,18 @@ export default class CalendarView {
* @param {Iterable} streamViews Collection of camera views * @param {Iterable} streamViews Collection of camera views
*/ */
initializeWith(streamViews) { initializeWith(streamViews) {
this._streamViews = streamViews; this.streamViews_ = streamViews;
[this._availableDates, this._minDateStr, this._maxDateStr] = minMaxDates( [this.availableDates_, this.minDateStr_, this.maxDateStr_] = minMaxDates(
streamViews streamViews
); );
this._configureDatePickers(); this.configureDatePickers_();
// Initialize the selected range to the from picker's date // Initialize the selected range to the from picker's date
// if we do not have a selected range yet // if we do not have a selected range yet
if (!this.selectedRange.hasStart()) { if (!this.selectedRange.hasStart()) {
const date = this.fromDateISO; const date = this.fromDateISO;
this._updateRangeDates(date, date); this.updateRangeDates_(date, date);
this._wireControls(); this.wireControls_();
} }
} }
@ -357,7 +357,7 @@ export default class CalendarView {
* @param {Function} handler Function that will be called * @param {Function} handler Function that will be called
*/ */
set onRangeChange(handler) { set onRangeChange(handler) {
this._rangeChangedHandler = handler; this.rangeChangedHandler_ = handler;
} }
/** /**
@ -366,7 +366,7 @@ export default class CalendarView {
* @return {Date} Date value of the "to"date picker * @return {Date} Date value of the "to"date picker
*/ */
get toDate() { get toDate() {
return this._toPickerView.date; return this.toPickerView_.date;
} }
/** /**
@ -375,7 +375,7 @@ export default class CalendarView {
* @return {Date} Date value of the "from"date picker * @return {Date} Date value of the "from"date picker
*/ */
get fromDate() { get fromDate() {
return this._fromPickerView.date; return this.fromPickerView_.date;
} }
/** /**
@ -385,7 +385,7 @@ export default class CalendarView {
* @return {String} Date value (YYYY-MM-D) of the "to" date picker * @return {String} Date value (YYYY-MM-D) of the "to" date picker
*/ */
get toDateISO() { get toDateISO() {
return this._toPickerView.dateISO; return this.toPickerView_.dateISO;
} }
/** /**
@ -395,7 +395,7 @@ export default class CalendarView {
* @return {String} Date value (YYYY-MM-D) of the "from" date picker * @return {String} Date value (YYYY-MM-D) of the "from" date picker
*/ */
get fromDateISO() { get fromDateISO() {
return this._fromPickerView.dateISO; return this.fromPickerView_.dateISO;
} }
/** /**
@ -404,6 +404,6 @@ export default class CalendarView {
* @return {CalendarTSRange} Range object * @return {CalendarTSRange} Range object
*/ */
get selectedRange() { get selectedRange() {
return this._selectedRange; return this.selectedRange_;
} }
} }

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

@ -60,7 +60,7 @@ export default class DatePickerView {
* @param {Object} options Options to pass to datepicker * @param {Object} options Options to pass to datepicker
*/ */
constructor(parent, options = null) { constructor(parent, options = null) {
this._pickerElement = $(parent); this.pickerElement_ = $(parent);
/* /*
* The widget is somewhat peculiar in that its functionality does * The widget is somewhat peculiar in that its functionality does
* not exist until it has been called with a settings/options argument * not exist until it has been called with a settings/options argument
@ -68,7 +68,7 @@ export default class DatePickerView {
* So, unless some are passed in here explicitly, we create a default * So, unless some are passed in here explicitly, we create a default
* and disabled date picker. * and disabled date picker.
*/ */
this._initWithOptions(options); this.initWithOptions_(options);
} }
/** /**
@ -80,15 +80,15 @@ export default class DatePickerView {
* *
* @param {Object} options Options for datepicker, or null to just enable * @param {Object} options Options for datepicker, or null to just enable
*/ */
_initWithOptions(options = null) { initWithOptions_(options = null) {
this._alive = true; this.alive_ = true;
options = options =
options !== null ? options !== null ?
options : options :
{ {
disabled: true, disabled: true,
}; };
this._pickerElement.datepicker(options); this.pickerElement_.datepicker(options);
} }
/** /**
@ -102,26 +102,26 @@ export default class DatePickerView {
* *
* @return {Any} Function result * @return {Any} Function result
*/ */
_apply(...args) { apply_(...args) {
if (!this._alive) { if (!this.alive_) {
console.warn('datepicker not constructed yet [%s]', this.domId); console.warn('datepicker not constructed yet [%s]', this.domId);
} }
return this._pickerElement.datepicker(...args); return this.pickerElement_.datepicker(...args);
} }
/** /**
* Activate the datepicker if not already attached. * Activate the datepicker if not already attached.
* *
* Basically calls _initWithOptions({disabled: disabled}), but only if not * Basically calls initWithOptions_({disabled: disabled}), but only if not
* already attached. Otherwise just sets the disabled status. * already attached. Otherwise just sets the disabled status.
* *
* @param {Boolean} disabled True if datepicker needs to be disabled * @param {Boolean} disabled True if datepicker needs to be disabled
*/ */
activate(disabled = true) { activate(disabled = true) {
if (this._alive) { if (this.alive_) {
this.disabled = disabled; this.disabled = disabled;
} else { } else {
this._initWithOptions({ this.initWithOptions_({
disabled: disabled, disabled: disabled,
}); });
} }
@ -133,7 +133,7 @@ export default class DatePickerView {
* @return {jQuery} jQuery element * @return {jQuery} jQuery element
*/ */
get element() { get element() {
return this._pickerElement; return this.pickerElement_;
} }
/** /**
@ -153,10 +153,10 @@ export default class DatePickerView {
* settings, when the picker is not alive. That really should translate * settings, when the picker is not alive. That really should translate
* to a constructor call to the datepicker. * to a constructor call to the datepicker.
*/ */
if (!this._alive && args.length === 0 && typeof arg0 === 'object') { if (!this.alive_ && args.length === 0 && typeof arg0 === 'object') {
return this._initWithOptions(arg0); return this.initWithOptions_(arg0);
} }
return this._apply('option', arg0, ...args); return this.apply_('option', arg0, ...args);
} }
/** /**
@ -176,7 +176,7 @@ export default class DatePickerView {
* @return {Boolean} * @return {Boolean}
*/ */
get isDisabled() { get isDisabled() {
return this._apply('isDisabled'); return this.apply_('isDisabled');
} }
/** /**
@ -194,7 +194,7 @@ export default class DatePickerView {
* @return {Date} Selected date * @return {Date} Selected date
*/ */
get date() { get date() {
return this._apply('getDate'); return this.apply_('getDate');
} }
/** /**
@ -203,7 +203,7 @@ export default class DatePickerView {
* @param {String|Date} date Desired date as string or Date * @param {String|Date} date Desired date as string or Date
*/ */
set date(date) { set date(date) {
this._apply('setDate', date); this.apply_('setDate', date);
} }
/** /**
@ -262,28 +262,28 @@ export default class DatePickerView {
* @param {varargs} dialogArgs Variable argument list * @param {varargs} dialogArgs Variable argument list
*/ */
dialog(...dialogArgs) { dialog(...dialogArgs) {
this._apply('option', dialogArgs); this.apply_('option', dialogArgs);
} }
/** /**
* Make the picker visible. * Make the picker visible.
*/ */
show() { show() {
this._apply('show'); this.apply_('show');
} }
/** /**
* Hide the picker. * Hide the picker.
*/ */
hide() { hide() {
this._apply('hide'); this.apply_('hide');
} }
/** /**
* Refresh the picker. * Refresh the picker.
*/ */
refresh() { refresh() {
this._apply('refresh'); this.apply_('refresh');
} }
/** /**
@ -293,8 +293,8 @@ export default class DatePickerView {
* Sets the status in this object to !alive. * Sets the status in this object to !alive.
*/ */
destroy() { destroy() {
this._alive = true; this.alive_ = true;
this._apply('destroy'); this.apply_('destroy');
this._alive = false; this.alive_ = false;
} }
} }

80
ui-src/lib/views/NVRSettingsView.js
View File

@ -50,16 +50,16 @@ export default class NVRSettingsView {
tsTrackId = 'ts', tsTrackId = 'ts',
timeFmtId = 'timefmt', timeFmtId = 'timefmt',
} = {}) { } = {}) {
this._ids = {videoLenId, trimCheckId, tsTrackId, timeFmtId}; this.ids_ = {videoLenId, trimCheckId, tsTrackId, timeFmtId};
this._videoLength = null; this.videoLength_ = null;
this._videoLengthHandler = null; this.videoLengthHandler_ = null;
this._trim = null; this.trim_ = null;
this._trimHandler = null; this.trimHandler_ = null;
this._timeFmtStr = null; this.timeFmtStr_ = null;
this._timeFmtHandler = null; this.timeFmtHandler_ = null;
this._tsTrack = null; this.tsTrack_ = null;
this._tsTrackHandler = null; this.tsTrackHandler_ = null;
this._wireControls(); this.wireControls_();
} }
/** /**
@ -70,7 +70,7 @@ export default class NVRSettingsView {
* @param {jQuery} selectEl jQuery element for the <select> * @param {jQuery} selectEl jQuery element for the <select>
* @return {String} Value of the selected/first option * @return {String} Value of the selected/first option
*/ */
_findSelectedOrFirst(selectEl) { findSelectedOrFirst_(selectEl) {
let value = selectEl.find(':selected').val(); let value = selectEl.find(':selected').val();
if (!value) { if (!value) {
value = selectEl.find('option:first-child').val(); value = selectEl.find('option:first-child').val();
@ -82,42 +82,42 @@ export default class NVRSettingsView {
* Wire up all controls and handlers. * Wire up all controls and handlers.
* *
*/ */
_wireControls() { wireControls_() {
const videoLengthEl = $(`#${this._ids.videoLenId}`); const videoLengthEl = $(`#${this.ids_.videoLenId}`);
this._videoLength = this._findSelectedOrFirst(videoLengthEl); this.videoLength_ = this.findSelectedOrFirst_(videoLengthEl);
videoLengthEl.change((e) => { videoLengthEl.change((e) => {
const newValueStr = e.currentTarget.value; const newValueStr = e.currentTarget.value;
this._videoLength = this.videoLength_ =
newValueStr == 'infinite' ? Infinity : Number(newValueStr); newValueStr == 'infinite' ? Infinity : Number(newValueStr);
if (this._videoLengthHandler) { if (this.videoLengthHandler_) {
this._videoLengthHandler(this._videoLength); this.videoLengthHandler_(this.videoLength_);
} }
}); });
const trimEl = $(`#${this._ids.trimCheckId}`); const trimEl = $(`#${this.ids_.trimCheckId}`);
this._trim = trimEl.is(':checked'); this.trim_ = trimEl.is(':checked');
trimEl.change((e) => { trimEl.change((e) => {
this._trim = e.currentTarget.checked; this.trim_ = e.currentTarget.checked;
if (this._trimHandler) { if (this.trimHandler_) {
this._trimHandler(this._trim); this.trimHandler_(this.trim_);
} }
}); });
const timeFmtEl = $(`#${this._ids.timeFmtId}`); const timeFmtEl = $(`#${this.ids_.timeFmtId}`);
this._timeFmtStr = this._findSelectedOrFirst(timeFmtEl); this.timeFmtStr_ = this.findSelectedOrFirst_(timeFmtEl);
timeFmtEl.change((e) => { timeFmtEl.change((e) => {
this._timeFmtStr = e.target.value; this.timeFmtStr_ = e.target.value;
if (this._timeFmtHandler) { if (this.timeFmtHandler_) {
this._timeFmtHandler(this._timeFmtStr); this.timeFmtHandler_(this.timeFmtStr_);
} }
}); });
const trackEl = $(`#${this._ids.tsTrackId}`); const trackEl = $(`#${this.ids_.tsTrackId}`);
this._tsTrack = trackEl.is(':checked'); this.tsTrack_ = trackEl.is(':checked');
trackEl.change((e) => { trackEl.change((e) => {
this._tsTrack = e.target.checked; this.tsTrack_ = e.target.checked;
if (this._tsTrackHandler) { if (this.tsTrackHandler_) {
this._tsTrackHandler(this._tsTrack); this.tsTrackHandler_(this.tsTrack_);
} }
}); });
} }
@ -128,7 +128,7 @@ export default class NVRSettingsView {
* @return {Number} Video length value * @return {Number} Video length value
*/ */
get videoLength() { get videoLength() {
return this._videoLength; return this.videoLength_;
} }
/** /**
@ -137,7 +137,7 @@ export default class NVRSettingsView {
* @return {String} Format string * @return {String} Format string
*/ */
get timeFormatString() { get timeFormatString() {
return this._timeFmtStr; return this.timeFmtStr_;
} }
/** /**
@ -146,7 +146,7 @@ export default class NVRSettingsView {
* @return {Boolean} * @return {Boolean}
*/ */
get trim() { get trim() {
return this._trim; return this.trim_;
} }
/** /**
@ -155,7 +155,7 @@ export default class NVRSettingsView {
* @return {Boolean} * @return {Boolean}
*/ */
get timeStampTrack() { get timeStampTrack() {
return this._tsTrack; return this.tsTrack_;
} }
/** /**
@ -166,7 +166,7 @@ export default class NVRSettingsView {
* @param {Function} handler Format change handler * @param {Function} handler Format change handler
*/ */
set onTimeFormatChange(handler) { set onTimeFormatChange(handler) {
this._timeFmtHandler = handler; this.timeFmtHandler_ = handler;
} }
/** /**
@ -177,7 +177,7 @@ export default class NVRSettingsView {
* @param {Function} handler Video Length change handler * @param {Function} handler Video Length change handler
*/ */
set onVideoLengthChange(handler) { set onVideoLengthChange(handler) {
this._videoLengthHandler = handler; this.videoLengthHandler_ = handler;
} }
/** /**
@ -188,7 +188,7 @@ export default class NVRSettingsView {
* @param {Function} handler Trim change handler * @param {Function} handler Trim change handler
*/ */
set onTrimChange(handler) { set onTrimChange(handler) {
this._trimHandler = handler; this.trimHandler_ = handler;
} }
/** /**
@ -200,6 +200,6 @@ export default class NVRSettingsView {
* @param {Function} handler Timestamp track change handler * @param {Function} handler Timestamp track change handler
*/ */
set onTimeStampTrackChange(handler) { set onTimeStampTrackChange(handler) {
this._tsTrackHandler = handler; this.tsTrackHandler_ = handler;
} }
} }

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

@ -80,20 +80,20 @@ export default class RecordingsView {
*/ */
constructor(camera, streamType, recordingFormatter, trimmed = false, constructor(camera, streamType, recordingFormatter, trimmed = false,
parent = null) { parent = null) {
this._cameraName = camera.shortName; this.cameraName_ = camera.shortName;
this._cameraRange = camera.range90k; this.cameraRange_ = camera.range90k;
this._formatter = recordingFormatter; this.formatter_ = recordingFormatter;
const id = `tab-${camera.uuid}-${streamType}`; const id = `tab-${camera.uuid}-${streamType}`;
this._element = this._createElement(id, camera.shortName, streamType); this.element_ = this.createElement_(id, camera.shortName, streamType);
this._trimmed = trimmed; this.trimmed_ = trimmed;
this._recordings = null; this.recordings_ = null;
this._recordingsRange = null; this.recordingsRange_ = null;
this._clickHandler = null; this.clickHandler_ = null;
if (parent) { if (parent) {
parent.append(this._element); parent.append(this.element_);
} }
this._timeoutId = null; this.timeoutId_ = null;
} }
/** /**
@ -104,7 +104,7 @@ export default class RecordingsView {
* @param {String} streamType "main" or "sub" * @param {String} streamType "main" or "sub"
* @return {jQuery} Partial DOM as jQuery object * @return {jQuery} Partial DOM as jQuery object
*/ */
_createElement(id, cameraName, streamType) { createElement_(id, cameraName, streamType) {
const tab = $('<tbody>').attr('id', id); const tab = $('<tbody>').attr('id', id);
tab.append( tab.append(
$('<tr class="name">').append($('<th colspan=6/>') $('<tr class="name">').append($('<th colspan=6/>')
@ -130,11 +130,11 @@ export default class RecordingsView {
* @param {Array} newRecordings * @param {Array} newRecordings
* @param {Boolean} trimmed True if timestamps should be trimmed * @param {Boolean} trimmed True if timestamps should be trimmed
*/ */
_updateRecordings() { updateRecordings_() {
const trimRange = this._trimmed ? this.recordingsRange : null; const trimRange = this.trimmed_ ? this.recordingsRange : null;
const recordings = this._recordings; const recordings = this.recordings_;
this._element.children('tr.r').each((rowIndex, row) => { this.element_.children('tr.r').each((rowIndex, row) => {
const values = this._formatter.format(recordings[rowIndex], trimRange); const values = this.formatter_.format(recordings[rowIndex], trimRange);
$(row) $(row)
.children('td') .children('td')
.each((i, e) => $(e).text(values[_columnOrder[i]])); .each((i, e) => $(e).text(values[_columnOrder[i]]));
@ -151,7 +151,7 @@ export default class RecordingsView {
* @return {Range90k} Currently remembered range * @return {Range90k} Currently remembered range
*/ */
get recordingsRange() { get recordingsRange() {
return this._recordingsRange ? this._recordingsRange.clone() : null; return this.recordingsRange_ ? this.recordingsRange_.clone() : null;
} }
/** /**
@ -160,7 +160,7 @@ export default class RecordingsView {
* @param {Range90k} range90k Range to remember * @param {Range90k} range90k Range to remember
*/ */
set recordingsRange(range90k) { set recordingsRange(range90k) {
this._recordingsRange = range90k ? range90k.clone() : null; this.recordingsRange_ = range90k ? range90k.clone() : null;
} }
/** /**
@ -169,7 +169,7 @@ export default class RecordingsView {
* @return {Boolean} * @return {Boolean}
*/ */
get trimmed() { get trimmed() {
return this._trimmed; return this.trimmed_;
} }
/** /**
@ -178,9 +178,9 @@ export default class RecordingsView {
* @param {Boolean} value True if trimming desired * @param {Boolean} value True if trimming desired
*/ */
set trimmed(value) { set trimmed(value) {
if (value != this._trimmed) { if (value != this.trimmed_) {
this._trimmed = value; this.trimmed_ = value;
this._updateRecordings(); this.updateRecordings_();
} }
} }
@ -190,7 +190,7 @@ export default class RecordingsView {
* @param {Boolean} show True for show, false for hide * @param {Boolean} show True for show, false for hide
*/ */
set show(show) { set show(show) {
const sel = this._element; const sel = this.element_;
if (show) { if (show) {
sel.show(); sel.show();
} else { } else {
@ -204,13 +204,13 @@ export default class RecordingsView {
* @param {Boolean} show True if indicator should be showing * @param {Boolean} show True if indicator should be showing
*/ */
set showLoading(show) { set showLoading(show) {
const loading = $('tr.loading', this._element); const loading = $('tr.loading', this.element_);
if (show) { if (show) {
loading.show(); loading.show();
} else { } else {
if (this._timeoutId) { if (this.timeoutId_) {
clearTimeout(this._timeoutId); clearTimeout(this.timeoutId_);
this._timeoutId = null; this.timeoutId_ = null;
} }
loading.hide(); loading.hide();
} }
@ -223,7 +223,7 @@ export default class RecordingsView {
* @param {Number} timeOutMs Delay (in ms) before indicator should appear * @param {Number} timeOutMs Delay (in ms) before indicator should appear
*/ */
delayedShowLoading(timeOutMs) { delayedShowLoading(timeOutMs) {
this._timeoutId = setTimeout(() => (this.showLoading = true), timeOutMs); this.timeoutId_ = setTimeout(() => (this.showLoading = true), timeOutMs);
} }
/** /**
@ -236,8 +236,8 @@ export default class RecordingsView {
*/ */
set timeFormat(formatStr) { set timeFormat(formatStr) {
// Change the formatter and update recordings (view) // Change the formatter and update recordings (view)
this._formatter.timeFormat = formatStr; this.formatter_.timeFormat = formatStr;
this._updateRecordings(); this.updateRecordings_();
} }
/** /**
@ -248,7 +248,7 @@ export default class RecordingsView {
* @param {Function} h Handler to be called. * @param {Function} h Handler to be called.
*/ */
set onRecordingClicked(h) { set onRecordingClicked(h) {
this._clickHandler = h; this.clickHandler_ = h;
} }
/** /**
@ -261,27 +261,27 @@ export default class RecordingsView {
set recordingsJSON(recordingsJSON) { set recordingsJSON(recordingsJSON) {
this.showLoading = false; this.showLoading = false;
// Store as model objects // Store as model objects
this._recordings = recordingsJSON.recordings.map(function(r) { this.recordings_ = recordingsJSON.recordings.map(function(r) {
const vse = recordingsJSON.videoSampleEntries[r.videoSampleEntryId]; const vse = recordingsJSON.videoSampleEntries[r.videoSampleEntryId];
return new Recording(r, vse); return new Recording(r, vse);
}); });
const tbody = this._element; const tbody = this.element_;
// Remove existing rows, replace with new ones // Remove existing rows, replace with new ones
$('tr.r', tbody).remove(); $('tr.r', tbody).remove();
this._recordings.forEach((r) => { this.recordings_.forEach((r) => {
const row = $('<tr class="r" />'); const row = $('<tr class="r" />');
row.append(_columnOrder.map(() => $('<td/>'))); row.append(_columnOrder.map(() => $('<td/>')));
row.on('click', () => { row.on('click', () => {
console.log('Video clicked'); console.log('Video clicked');
if (this._clickHandler !== null) { if (this.clickHandler_ !== null) {
console.log('Video clicked handler call'); console.log('Video clicked handler call');
this._clickHandler(r); this.clickHandler_(r);
} }
}); });
tbody.append(row); tbody.append(row);
}); });
// Cause formatting and date to be put in the rows // Cause formatting and date to be put in the rows
this._updateRecordings(); this.updateRecordings_();
} }
} }

12
ui-src/lib/views/StreamSelectorView.js
View File

@ -49,7 +49,7 @@ export default class StreamSelectorView {
* @param {jQuery} parent jQuery parent element to append to * @param {jQuery} parent jQuery parent element to append to
*/ */
constructor(cameras, parent) { constructor(cameras, parent) {
this._cameras = cameras; this.cameras_ = cameras;
if (cameras.length !== 0) { if (cameras.length !== 0) {
// Add a header row. // Add a header row.
@ -60,7 +60,7 @@ export default class StreamSelectorView {
parent.append(hdr); parent.append(hdr);
} }
this._cameras.forEach((c) => { this.cameras_.forEach((c) => {
const row = $('<tr/>').append($('<td>').text(c.camera.shortName)); const row = $('<tr/>').append($('<td>').text(c.camera.shortName));
let firstStreamType = true; let firstStreamType = true;
for (const streamType of allStreamTypes) { for (const streamType of allStreamTypes) {
@ -81,8 +81,8 @@ export default class StreamSelectorView {
cb.change((e) => { cb.change((e) => {
streamView.enabled = e.target.checked; streamView.enabled = e.target.checked;
if (this._onChangeHandler) { if (this.onChangeHandler_) {
this._onChangeHandler(); this.onChangeHandler_();
} }
}); });
row.append($('<td/>').append(cb)); row.append($('<td/>').append(cb));
@ -91,11 +91,11 @@ export default class StreamSelectorView {
parent.append(row); parent.append(row);
}); });
this._onChangeHandler = null; this.onChangeHandler_ = null;
} }
/** @param {function()} handler a handler to run after toggling a stream */ /** @param {function()} handler a handler to run after toggling a stream */
set onChange(handler) { set onChange(handler) {
this._onChangeHandler = handler; this.onChangeHandler_ = handler;
} }
} }

6
ui-src/lib/views/StreamView.js
View File

@ -60,7 +60,7 @@ export default class StreamView {
trimmed, trimmed,
recordingsParent recordingsParent
); );
this._enabled = true; this.enabled_ = true;
this.recordingsUrl = null; this.recordingsUrl = null;
this.recordingsReq = null; this.recordingsReq = null;
} }
@ -71,7 +71,7 @@ export default class StreamView {
* @return {Boolean} * @return {Boolean}
*/ */
get enabled() { get enabled() {
return this._enabled; return this.enabled_;
} }
/** /**
@ -80,7 +80,7 @@ export default class StreamView {
* @param {Boolean} enabled Whether view should be enabled * @param {Boolean} enabled Whether view should be enabled
*/ */
set enabled(enabled) { set enabled(enabled) {
this._enabled = enabled; this.enabled_ = enabled;
this.recordingsView.show = enabled; this.recordingsView.show = enabled;
console.log('Stream %s-%s %s', this.camera.shortName, this.streamType, console.log('Stream %s-%s %s', this.camera.shortName, this.streamType,
this.enabled ? 'enabled' : 'disabled'); this.enabled ? 'enabled' : 'disabled');

20
ui-src/lib/views/VideoDialogView.js
View File

@ -63,11 +63,11 @@ export default class VideoDialogView {
* @return {VideoDialogView} Returns "this" for chaining. * @return {VideoDialogView} Returns "this" for chaining.
*/ */
attach(domElement) { attach(domElement) {
this._videoElement = $('<video controls preload="auto" autoplay="true" />'); this.videoElement_ = $('<video controls preload="auto" autoplay="true" />');
this._dialogElement = $('<div class="playdialog" />').append( this.dialogElement_ = $('<div class="playdialog" />').append(
this._videoElement this.videoElement_
); );
$(domElement).append(this._dialogElement); $(domElement).append(this.dialogElement_);
return this; return this;
} }
@ -80,21 +80,21 @@ export default class VideoDialogView {
* @return {VideoDialogView} Returns "this" for chaining. * @return {VideoDialogView} Returns "this" for chaining.
*/ */
play(title, width, url) { play(title, width, url) {
this._dialogElement.dialog({ this.dialogElement_.dialog({
title: title, title: title,
width: width, width: width,
close: () => { close: () => {
const videoDOMElement = this._videoElement[0]; const videoDOMElement = this.videoElement_[0];
videoDOMElement.pause(); videoDOMElement.pause();
videoDOMElement.src = ''; // Remove current source to stop loading videoDOMElement.src = ''; // Remove current source to stop loading
this._videoElement = null; this.videoElement_ = null;
this._dialogElement.remove(); this.dialogElement_.remove();
this._dialogElement = null; this.dialogElement_ = null;
}, },
}); });
// Now that dialog is up, set the src so video starts // Now that dialog is up, set the src so video starts
console.log('Video url: ' + url); console.log('Video url: ' + url);
this._videoElement.attr('src', url); this.videoElement_.attr('src', url);
return this; return this;
} }
} }