* use content-hashed paths for static resources (except the top-level
request), with immutable Cache-Control headers. This should improve
cache behavior in both directions: avoid preventable HTTP requests and
cause immediate refresh when needed. I had some staleness when
browsing with my phone.
* set up the favicons properly while I'm at it (closes#50). I used the
convenient favicons-webpack-plugin to build everything from a .svg.
I've hit an error similar to lovell/sharp#1593 at least once though so
I might change my mind about that part if it continues to be
problematic.
* use http-serve's new directory traversal code for static file serving.
This removes the odd behavior where files that weren't present at
server startup couldn't be served. (I wasn't comfortable switching to
the content-hashed paths before doing this.) It also means the static
files can be served compressed. JSON API responses were already served
compressed, so this closes#25.
* for a given API URL, decide if we want it to be cached or not
server-side. Stop using jQuery's kludgy cache-defeating _=<timestamp>
URL parameter. I might start setting etags on some of these things
and could serve 304 Not Modified responses if it's genuinely
unmodified.
Looks like I basically had to do this to keep up. With nodejs version 12
(current LTS), the version of fsevents I installed wouldn't build. A
"yarn upgrade" by itself resulted in a new problem as described in #69.
Conversely, the new versions don't install with nodejs 8. So I bit the
bullet and upgraded all the dev dependency stuff and the nodejs at once.
nodejs 10 seems capable of running either the old or new, fwiw.
I'm a little sad that this seems to have made the UI bundle 5% larger.
Before, "yarn build" said 350 KiB. After, 369 KiB. A little bit in
several places. For example, jquery-ui.bundle.js went from 156 KiB (in
2 chunks) to 160 KiB (in 1 chunk) for some reason.
Apparently WebPack builds in "terser", which is what the cool kids use.
Just go with the default and simplify the configuration as well as
installing fewer node modules.
"babel-minify-webpack-plugin" wasn't actually being used, and
babel-minify is still in beta anyway.
uglifyjs, according to https://github.com/webpack/webpack/issues/7923,
doesn't support ES6 and depends on a package which is no longer
maintained.
* 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>
* 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>
* Various settings in settings-nvr.js module
* settings-nvr-local.js can override settings-nvr.js
* settings-nvr-local is unchecked file
* Both files can be straight maps, or functions returning maps
* webpack env and args available to those functions
* Changes to allow active development of UI using webpack and hotloading.
* Update to webpack 4 (will make this work)
* Update webpack.config.js accordingly
* Move webpack.config.js to its own directory
* Split webpack.config.js into base.config.js, dev.config.js and prod.config.js
* Update configs to be "right" for development vs production using --mode
* Want configuration through (optional) local file that is not
checked in
* Updated package.json for newer babel-loader
* Put in a proxy to localhost port 8080 for evelopment server.
This allows "yarn start" to work on the machine where MoonFire's
server is running. This would be the default situation. Users in
a different setup can change the proxy settings.
* make "yarn build" cmd work on first run.
(it was installing a hardlinked file where the dir should go, yuck)
* remove an obsolete ui/index.html; it's ui-src/index.html now
The Javascript is pretty amateurish I'm sure but at least it's something to
iterate from. It's already much more pleasant for browsing through videos in
several ways:
* more responsive to load only a day at a time rather than 90+ days
* much easier to see the same time segment on several cameras
* more pleasant to have the videos load as a popup rather than a link
that blows away your position in an enormous list
* exposes the fancier .mp4 generation options: splitting at lengths
other than the default, trimming to an arbitrary start and end time,
including a subtitle track with timestamps.
There's a slight regression in functionality: I didn't match the former
top-level page which showed how much camera used of its disk allocation and
the total duration of video. This is exposed in the JSON API, so it shouldn't
be too hard to add back.
