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>
2025-11-24 19:46:17 -05:00 · 2018-03-20 07:03:12 -07:00
parent caac324bd5
commit 58152e8d94
35 changed files with 4089 additions and 518 deletions
--- a/webpack/NVRSettings.js
+++ b/webpack/NVRSettings.js
@@ -1,5 +1,35 @@
-// vim: set et ts=2 sw=2:
+// 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/>.
+
 const path = require('path');
 const Settings = require('./parts/Settings');

--- a/webpack/base.config.js
+++ b/webpack/base.config.js
@@ -1,5 +1,34 @@
-// vim: set et ts=2 sw=2:
+// 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/>.

 const path = require('path');
 const webpack = require('webpack');
@@ -16,6 +45,7 @@ module.exports = (env, args) => {
    output: {
      filename: '[name].bundle.js',
      path: nvrSettings._paths.dist_dir,
+      publicPath: '/',
    },
    module: {
      rules: [{
@@ -25,7 +55,7 @@ module.exports = (env, args) => {
          'presets': ['env'],
        },
        exclude: /(node_modules|bower_components)/,
-        include: [ './ui-src'],
+        include: ['./ui-src'],
      }, {
        test: /\.png$/,
        use: ['file-loader'],
@@ -46,10 +76,14 @@ module.exports = (env, args) => {
      }],
    },
    plugins: [
+      new webpack.DefinePlugin({
+        'process.env.NODE_ENV': JSON.stringify(args.mode),
+      }),
      new webpack.IgnorePlugin(/\.\/locale$/),
      new HtmlWebpackPlugin({
        title: nvrSettings.app_title,
-        template: path.join(nvrSettings._paths.app_src_dir, 'index.html'),
+        filename: 'index.html',
+        template: path.join(nvrSettings._paths.app_src_dir, 'assets', 'index.html'),
      }),
      new webpack.NormalModuleReplacementPlugin(
        /node_modules\/moment\/moment\.js$/,
--- a/webpack/dev.config.js
+++ b/webpack/dev.config.js
@@ -1,5 +1,34 @@
-// vim: set et ts=2 sw=2:
+// 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/>.

 const webpack = require('webpack');
 const NVRSettings = require('./NVRSettings');
@@ -14,6 +43,9 @@ module.exports = (env, args) => {
      warnings: true,
    },
    devtool: 'inline-source-map',
+    optimization: {
+      namedChunks: true,
+    },
    devServer: {
      contentBase: nvrSettings.app_src_dir,
      historyApiFallback: true,
@@ -26,9 +58,6 @@ module.exports = (env, args) => {
      },
    },
    plugins: [
-      new webpack.DefinePlugin({
-        'process.env.NODE_ENV': JSON.stringify('development'),
-      }),
      new webpack.HotModuleReplacementPlugin(),
    ],
  });
--- a/webpack/parts/Settings.js
+++ b/webpack/parts/Settings.js
@@ -1,5 +1,35 @@
-// vim: set et ts=2 sw=2:
+// 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/>.
+
 const path = require('path');
 const merge = require('webpack-merge');

--- a/webpack/prod.config.js
+++ b/webpack/prod.config.js
@@ -1,7 +1,37 @@
-// vim: set et ts=2 sw=2:
+// 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/>.

 const webpack = require('webpack');
+const CompressionPlugin = require('compression-webpack-plugin');
 const NVRSettings = require('./NVRSettings');
 const baseConfig = require('./base.config.js');

@@ -12,14 +42,34 @@ module.exports = (env, args) => {
  const nvrSettings = settingsObject.settings;

  return settingsObject.webpackMerge(baseConfig, {
+    //devtool: 'cheap-module-source-map',
+    module: {
+      rules: [{
+        test: /\.html$/,
+        loader: 'html-loader',
+        query: {
+          minimize: true,
+        },
+      }],
+    },
    optimization: {
+      minimize: true,
      splitChunks: {
+        minSize: 30000,
+        minChunks: 1,
+        maxAsyncRequests: 5,
+        maxInitialRequests: 3,
        cacheGroups: {
          default: {
            minChunks: 2,
            priority: -20,
          },
          commons: {
+            name: 'commons',
+            chunks: 'all',
+            minChunks: 2,
+          },
+          vendors: {
            test: /[\\/]node_modules[\\/]/,
            name: 'vendor',
            chunks: 'all',
@@ -29,12 +79,19 @@ module.exports = (env, args) => {
      },
    },
    plugins: [
-      new webpack.DefinePlugin({
-        'process.env.NODE_ENV': JSON.stringify('production'),
-      }),
      new CleanWebpackPlugin([nvrSettings.dist_dir], {
        root: nvrSettings._paths.project_root,
      }),
+      new CompressionPlugin({
+        asset: '[path].gz[query]',
+        algorithm: 'gzip',
+        test: /\.js$|\.css$|\.html$/,
+        threshold: 10240,
+        minRatio: 0.8,
+      }),
+      new webpack.NormalModuleReplacementPlugin(
+        /node_modules\/jquery\/dist\/jquery\.js$/,
+        './jquery.min.js'),
    ],
  });
 };