├── .browserslistrc ├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── angular.json ├── e2e ├── protractor.conf.js ├── src │ ├── app.e2e-spec.ts │ └── app.po.ts └── tsconfig.json ├── karma.conf.js ├── package-lock.json ├── package.json ├── src ├── app │ ├── animations │ │ ├── fade-in-out.animation.ts │ │ ├── fade-in.animation.ts │ │ └── index.ts │ ├── app-routing.module.ts │ ├── app.component.html │ ├── app.component.scss │ ├── app.component.spec.ts │ ├── app.component.ts │ ├── app.module.ts │ ├── components │ │ ├── cam-list-selection.component.ts │ │ ├── event-cam-list.component.ts │ │ ├── event-list.component.ts │ │ ├── event.component.ts │ │ ├── header.component.ts │ │ ├── index.ts │ │ ├── live-cam-list.component.ts │ │ ├── live-info-dialog.component.ts │ │ ├── live-multiple.component.ts │ │ ├── live-set-preset-dialog.component.ts │ │ ├── live.component.ts │ │ ├── login.component.ts │ │ ├── page-admin.component.ts │ │ ├── page-events.component.ts │ │ ├── page-live-multiple.component.ts │ │ ├── page-live.component.ts │ │ ├── page-timeline.component.ts │ │ ├── pagenotfound.component.ts │ │ ├── timeline-cam-list.component.ts │ │ ├── timeline.component.ts │ │ └── video-dialog.component.ts │ ├── guards │ │ ├── auth.guard.ts │ │ └── index.ts │ ├── models │ │ ├── camerasettings.model.ts │ │ ├── eventrecord.model.ts │ │ ├── index.ts │ │ ├── ipaddress.model.ts │ │ ├── login.model.ts │ │ ├── server.model.ts │ │ ├── serverresponse.model.ts │ │ └── status.model.ts │ ├── services │ │ ├── camlist.service.ts │ │ ├── eventlist.service.ts │ │ ├── generic.service.ts │ │ ├── index.ts │ │ ├── ipaddresses.service.ts │ │ ├── iplocate.service.ts │ │ ├── login.service.ts │ │ ├── logout.service.ts │ │ ├── status.service.ts │ │ └── windowref.service.ts │ ├── utils-storage.ts │ └── utils.ts ├── assets │ ├── .gitkeep │ ├── css │ │ ├── app.css │ │ └── font-awesome-animation.min.css │ ├── img │ │ ├── applogo.png │ │ ├── loading.png │ │ └── placeholder.png │ └── js │ │ ├── all.min.js │ │ └── timeline.min.js ├── cloud-theme.scss ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.scss └── test.ts ├── tsconfig.app.json ├── tsconfig.base.json ├── tsconfig.json ├── tsconfig.spec.json └── tslint.json /.browserslistrc: -------------------------------------------------------------------------------- 1 | # This file is used by the build system to adjust CSS and JS output to support the specified browsers below. 2 | # For additional information regarding the format and rule options, please see: 3 | # https://github.com/browserslist/browserslist#queries 4 | 5 | # For the full list of supported browsers by the Angular framework, please see: 6 | # https://angular.io/guide/browser-support 7 | 8 | # You can see what browsers were selected by your queries by running: 9 | # npx browserslist 10 | 11 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # Editor configuration, see https://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | charset = utf-8 6 | indent_style = space 7 | indent_size = 2 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | 11 | [*.ts] 12 | quote_type = single 13 | 14 | [*.md] 15 | max_line_length = off 16 | trim_trailing_whitespace = false 17 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /tmp 6 | /out-tsc 7 | # Only exists if Bazel was run 8 | /bazel-out 9 | 10 | # dependencies 11 | /node_modules 12 | 13 | # profiling files 14 | chrome-profiler-events*.json 15 | speed-measure-plugin*.json 16 | 17 | # IDEs and editors 18 | /.idea 19 | .project 20 | .classpath 21 | .c9/ 22 | *.launch 23 | .settings/ 24 | *.sublime-workspace 25 | 26 | # IDE - VSCode 27 | .vscode/* 28 | !.vscode/settings.json 29 | !.vscode/tasks.json 30 | !.vscode/launch.json 31 | !.vscode/extensions.json 32 | .history/* 33 | 34 | # misc 35 | /.sass-cache 36 | /connect.lock 37 | /coverage 38 | /libpeerconnection.log 39 | npm-debug.log 40 | yarn-error.log 41 | testem.log 42 | /typings 43 | 44 | # System Files 45 | .DS_Store 46 | Thumbs.db 47 | 48 | .angular/* -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "[]" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright [yyyy] [name of copyright owner] 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # tinyCam app web client written in Angular2 2 | https://tinycammonitor.com 3 | More info is here. 4 | 5 | tinyCam web server main features: 6 | * **Live view up to 4 cameras** at the same time. 7 | * **PTZ and audio support** from live view (admin only). 8 | * **Timeline support** (multiple timelines as well) w/ slow/fast playback. 9 | * **Autoplay event on hover**. 10 | * **Sort events by date and type** (person, vehicle, etc.). 11 | * **Delete and pin events** (admin only). 12 | * Support for **playback cloud events** in web browser. 13 | * **Admin console** (admin only). 14 | 15 | PTZ keyboard controls: 16 | * Keys W/A/S/D - pan-tilt 17 | * Keys +/- - optical zoom in/out 18 | * Keys F/N - focus far/near 19 | * Keys O/C - iris open/close 20 | * Keys 1..9 - presets 21 | 22 | ## See also: 23 | - [Web timeline UI widget written in JavaScript](https://github.com/alexeyvasilyev/timeline-ui-web) 24 | - [tinyCam web server API](https://github.com/alexeyvasilyev/tinycam-api) 25 | 26 | ## Hacks: 27 | * Adding `remote=yes` to login screen will show remote server input field, e.g `http://192.168.0.3:8083/login?remote=yes` 28 | 29 | -------------------------------------------------------------------------------- /angular.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "version": 1, 4 | "newProjectRoot": "projects", 5 | "projects": { 6 | "tinycam-client-web": { 7 | "projectType": "application", 8 | "schematics": { 9 | "@schematics/angular:component": { 10 | "style": "scss" 11 | } 12 | }, 13 | "root": "", 14 | "sourceRoot": "src", 15 | "prefix": "app", 16 | "architect": { 17 | "build": { 18 | "builder": "@angular-devkit/build-angular:browser", 19 | "options": { 20 | "allowedCommonJsDependencies": [ 21 | "rxjs", 22 | "rxjs-compat", 23 | "video.js", 24 | "angular2-moment" 25 | ], 26 | "outputPath": "dist", 27 | "index": "src/index.html", 28 | "main": "src/main.ts", 29 | "polyfills": "src/polyfills.ts", 30 | "tsConfig": "tsconfig.app.json", 31 | "aot": true, 32 | "assets": [ 33 | "src/favicon.ico", 34 | "src/assets" 35 | ], 36 | "styles": [ 37 | "src/styles.scss", 38 | "src/cloud-theme.scss", 39 | "node_modules/video.js/dist/video-js.min.css" 40 | ], 41 | "scripts": [] 42 | }, 43 | "configurations": { 44 | "production": { 45 | "fileReplacements": [ 46 | { 47 | "replace": "src/environments/environment.ts", 48 | "with": "src/environments/environment.prod.ts" 49 | } 50 | ], 51 | "optimization": true, 52 | "outputHashing": "all", 53 | "sourceMap": false, 54 | "namedChunks": false, 55 | "extractLicenses": true, 56 | "vendorChunk": false, 57 | "buildOptimizer": true, 58 | "budgets": [ 59 | { 60 | "type": "initial", 61 | "maximumWarning": "2mb", 62 | "maximumError": "5mb" 63 | }, 64 | { 65 | "type": "anyComponentStyle", 66 | "maximumWarning": "6kb", 67 | "maximumError": "10kb" 68 | } 69 | ] 70 | } 71 | } 72 | }, 73 | "serve": { 74 | "builder": "@angular-devkit/build-angular:dev-server", 75 | "options": { 76 | "browserTarget": "tinycam-client-web:build" 77 | }, 78 | "configurations": { 79 | "production": { 80 | "browserTarget": "tinycam-client-web:build:production" 81 | } 82 | } 83 | }, 84 | "extract-i18n": { 85 | "builder": "@angular-devkit/build-angular:extract-i18n", 86 | "options": { 87 | "browserTarget": "tinycam-client-web:build" 88 | } 89 | }, 90 | "test": { 91 | "builder": "@angular-devkit/build-angular:karma", 92 | "options": { 93 | "main": "src/test.ts", 94 | "polyfills": "src/polyfills.ts", 95 | "tsConfig": "tsconfig.spec.json", 96 | "karmaConfig": "karma.conf.js", 97 | "assets": [ 98 | "src/favicon.ico", 99 | "src/assets" 100 | ], 101 | "styles": [ 102 | "src/styles.scss" 103 | ], 104 | "scripts": [] 105 | } 106 | }, 107 | "lint": { 108 | "builder": "@angular-devkit/build-angular:tslint", 109 | "options": { 110 | "tsConfig": [ 111 | "tsconfig.app.json", 112 | "tsconfig.spec.json", 113 | "e2e/tsconfig.json" 114 | ], 115 | "exclude": [ 116 | "**/node_modules/**" 117 | ] 118 | } 119 | }, 120 | "e2e": { 121 | "builder": "@angular-devkit/build-angular:protractor", 122 | "options": { 123 | "protractorConfig": "e2e/protractor.conf.js", 124 | "devServerTarget": "tinycam-client-web:serve" 125 | }, 126 | "configurations": { 127 | "production": { 128 | "devServerTarget": "tinycam-client-web:serve:production" 129 | } 130 | } 131 | } 132 | } 133 | }}, 134 | "defaultProject": "tinycam-client-web", 135 | "cli": { 136 | "analytics": false 137 | } 138 | } 139 | -------------------------------------------------------------------------------- /e2e/protractor.conf.js: -------------------------------------------------------------------------------- 1 | // @ts-check 2 | // Protractor configuration file, see link for more information 3 | // https://github.com/angular/protractor/blob/master/lib/config.ts 4 | 5 | const { SpecReporter, StacktraceOption } = require('jasmine-spec-reporter'); 6 | 7 | /** 8 | * @type { import("protractor").Config } 9 | */ 10 | exports.config = { 11 | allScriptsTimeout: 11000, 12 | specs: [ 13 | './src/**/*.e2e-spec.ts' 14 | ], 15 | capabilities: { 16 | browserName: 'chrome' 17 | }, 18 | directConnect: true, 19 | baseUrl: 'http://localhost:4200/', 20 | framework: 'jasmine', 21 | jasmineNodeOpts: { 22 | showColors: true, 23 | defaultTimeoutInterval: 30000, 24 | print: function() {} 25 | }, 26 | onPrepare() { 27 | require('ts-node').register({ 28 | project: require('path').join(__dirname, './tsconfig.json') 29 | }); 30 | jasmine.getEnv().addReporter(new SpecReporter({ 31 | spec: { 32 | displayStacktrace: StacktraceOption.PRETTY 33 | } 34 | })); 35 | } 36 | }; -------------------------------------------------------------------------------- /e2e/src/app.e2e-spec.ts: -------------------------------------------------------------------------------- 1 | import { AppPage } from './app.po'; 2 | import { browser, logging } from 'protractor'; 3 | 4 | describe('workspace-project App', () => { 5 | let page: AppPage; 6 | 7 | beforeEach(() => { 8 | page = new AppPage(); 9 | }); 10 | 11 | it('should display welcome message', () => { 12 | page.navigateTo(); 13 | expect(page.getTitleText()).toEqual('tinycam-client-web app is running!'); 14 | }); 15 | 16 | afterEach(async () => { 17 | // Assert that there are no errors emitted from the browser 18 | const logs = await browser.manage().logs().get(logging.Type.BROWSER); 19 | expect(logs).not.toContain(jasmine.objectContaining({ 20 | level: logging.Level.SEVERE, 21 | } as logging.Entry)); 22 | }); 23 | }); 24 | -------------------------------------------------------------------------------- /e2e/src/app.po.ts: -------------------------------------------------------------------------------- 1 | import { browser, by, element } from 'protractor'; 2 | 3 | export class AppPage { 4 | navigateTo(): Promise { 5 | return browser.get(browser.baseUrl) as Promise; 6 | } 7 | 8 | getTitleText(): Promise { 9 | return element(by.css('app-root .content span')).getText() as Promise; 10 | } 11 | } 12 | -------------------------------------------------------------------------------- /e2e/tsconfig.json: -------------------------------------------------------------------------------- 1 | /* To learn more about this file see: https://angular.io/config/tsconfig. */ 2 | { 3 | "extends": "../tsconfig.base.json", 4 | "compilerOptions": { 5 | "outDir": "../out-tsc/e2e", 6 | "module": "commonjs", 7 | "target": "es2018", 8 | "types": [ 9 | "jasmine", 10 | "jasminewd2", 11 | "node" 12 | ] 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /karma.conf.js: -------------------------------------------------------------------------------- 1 | // Karma configuration file, see link for more information 2 | // https://karma-runner.github.io/1.0/config/configuration-file.html 3 | 4 | module.exports = function (config) { 5 | config.set({ 6 | basePath: '', 7 | frameworks: ['jasmine', '@angular-devkit/build-angular'], 8 | plugins: [ 9 | require('karma-jasmine'), 10 | require('karma-chrome-launcher'), 11 | require('karma-jasmine-html-reporter'), 12 | require('karma-coverage-istanbul-reporter'), 13 | require('@angular-devkit/build-angular/plugins/karma') 14 | ], 15 | client: { 16 | clearContext: false // leave Jasmine Spec Runner output visible in browser 17 | }, 18 | coverageIstanbulReporter: { 19 | dir: require('path').join(__dirname, './coverage/tinycam-client-web'), 20 | reports: ['html', 'lcovonly', 'text-summary'], 21 | fixWebpackSourcePaths: true 22 | }, 23 | reporters: ['progress', 'kjhtml'], 24 | port: 9876, 25 | colors: true, 26 | logLevel: config.LOG_INFO, 27 | autoWatch: true, 28 | browsers: ['Chrome'], 29 | singleRun: false, 30 | restartOnFileChange: true 31 | }); 32 | }; 33 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "tinycam-client-web", 3 | "version": "0.2.0", 4 | "scripts": { 5 | "ng": "ng", 6 | "start": "ng serve", 7 | "build": "ng build", 8 | "test": "ng test", 9 | "lint": "ng lint", 10 | "e2e": "ng e2e" 11 | }, 12 | "private": true, 13 | "dependencies": { 14 | "@angular/animations": "~16.1.1", 15 | "@angular/cdk": "~16.1.1", 16 | "@angular/common": "~16.1.1", 17 | "@angular/compiler": "~16.1.1", 18 | "@angular/core": "~16.1.1", 19 | "@angular/forms": "~16.1.1", 20 | "@angular/material": "16.1.1", 21 | "@angular/platform-browser": "~16.1.1", 22 | "@angular/platform-browser-dynamic": "~16.1.1", 23 | "@angular/router": "~16.1.1", 24 | "@juggle/resize-observer": "^3.4.0", 25 | "core-js": "^3.31.0", 26 | "ngx-infinite-scroll": "~16.0.0", 27 | "ngx-moment": "~6.0.2", 28 | "nipplejs": "~0.10.1", 29 | "rxjs": "~7.8.1", 30 | "smoothie": "~1.36.1", 31 | "tslib": "~2.5.3", 32 | "video.js": "^8.3.0", 33 | "zone.js": "~0.13.1" 34 | }, 35 | "devDependencies": { 36 | "@angular-devkit/build-angular": "^16.1.0", 37 | "@angular/cli": "^16.1.0", 38 | "@angular/compiler-cli": "~16.1.1", 39 | "@types/jasmine": "~4.3.3", 40 | "@types/node": "^20.3.1", 41 | "@types/video.js": "^7.3.52", 42 | "codelyzer": "^6.0.2", 43 | "eslint": "~8.43.0", 44 | "jasmine-core": "~5.0.1", 45 | "jasmine-spec-reporter": "~7.0.0", 46 | "karma": "~6.4.2", 47 | "karma-chrome-launcher": "~3.3.0", 48 | "karma-coverage": "~2.2.0", 49 | "karma-jasmine": "~5.1.0", 50 | "karma-jasmine-html-reporter": "^2.1.0", 51 | "protractor": "^7.0.0", 52 | "ts-node": "~10.9.1", 53 | "typescript": "~5.1.3" 54 | } 55 | } 56 | -------------------------------------------------------------------------------- /src/app/animations/fade-in-out.animation.ts: -------------------------------------------------------------------------------- 1 | import { trigger, animate, transition, style } from '@angular/animations'; 2 | 3 | export const fadeInOutAnimation = 4 | trigger('fadeInOutAnimation', [ 5 | transition(':enter', [ 6 | // styles at start of transition 7 | style({ opacity: 0 }), 8 | // animation and styles at end of transition 9 | animate('.3s', style({ opacity: 1 })) 10 | ]), 11 | transition(':leave', [ 12 | // styles at start of transition 13 | style({ opacity: 1 }), 14 | // animation and styles at end of transition 15 | animate('.3s', style({ opacity: 0 })) 16 | ]), 17 | ]); 18 | -------------------------------------------------------------------------------- /src/app/animations/fade-in.animation.ts: -------------------------------------------------------------------------------- 1 | import { trigger, animate, transition, style } from '@angular/animations'; 2 | 3 | export const fadeInAnimation = 4 | trigger('fadeInAnimation', [ 5 | transition(':enter', [ 6 | // styles at start of transition 7 | style({ opacity: 0 }), 8 | // animation and styles at end of transition 9 | animate('.3s', style({ opacity: 1 })) 10 | ]), 11 | ]); 12 | -------------------------------------------------------------------------------- /src/app/animations/index.ts: -------------------------------------------------------------------------------- 1 | export * from './fade-in.animation'; 2 | export * from './fade-in-out.animation'; 3 | -------------------------------------------------------------------------------- /src/app/app-routing.module.ts: -------------------------------------------------------------------------------- 1 | import { NgModule } from '@angular/core'; 2 | import { Routes, RouterModule } from '@angular/router'; 3 | import { LoginComponent, PageAdminComponent, PageEventsComponent, PageLiveComponent, PageLiveMultipleComponent, PageNotFoundComponent, PageTimelineComponent } from './components'; 4 | import { AuthGuard } from './guards'; 5 | 6 | const routes: Routes = [ 7 | { path: '', redirectTo: 'events', pathMatch: 'full' }, 8 | { path: 'login', component: LoginComponent }, 9 | { path: 'livem', component: PageLiveMultipleComponent, canActivate: [AuthGuard] }, 10 | { path: 'live', component: PageLiveComponent, canActivate: [AuthGuard] }, 11 | { path: 'events', component: PageEventsComponent, canActivate: [AuthGuard] }, 12 | { path: 'timeline',component: PageTimelineComponent, canActivate: [AuthGuard] }, 13 | { path: 'admin', component: PageAdminComponent, canActivate: [AuthGuard] }, 14 | { path: '**', component: PageNotFoundComponent } 15 | // { path: '**', component: LoginComponent }, 16 | // { path: '', redirectTo: '/events', pathMatch: 'full' }, 17 | // { path: 'events', component: MainComponent }, 18 | // { path: '', component: MainComponent }, 19 | ]; 20 | 21 | @NgModule({ 22 | imports: [RouterModule.forRoot(routes)], 23 | exports: [RouterModule] 24 | }) 25 | export class AppRoutingModule { } 26 | -------------------------------------------------------------------------------- /src/app/app.component.html: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /src/app/app.component.scss: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/alexeyvasilyev/tinycam-client-web/6cfb12ed0077cc12338da90adcf3a747a123c3af/src/app/app.component.scss -------------------------------------------------------------------------------- /src/app/app.component.spec.ts: -------------------------------------------------------------------------------- 1 | import { TestBed, async } from '@angular/core/testing'; 2 | import { RouterTestingModule } from '@angular/router/testing'; 3 | import { AppComponent } from './app.component'; 4 | 5 | describe('AppComponent', () => { 6 | beforeEach(async(() => { 7 | TestBed.configureTestingModule({ 8 | imports: [ 9 | RouterTestingModule 10 | ], 11 | declarations: [ 12 | AppComponent 13 | ], 14 | }).compileComponents(); 15 | })); 16 | 17 | it('should create the app', () => { 18 | const fixture = TestBed.createComponent(AppComponent); 19 | const app = fixture.componentInstance; 20 | expect(app).toBeTruthy(); 21 | }); 22 | 23 | it(`should have as title 'tinycam-client-web'`, () => { 24 | const fixture = TestBed.createComponent(AppComponent); 25 | const app = fixture.componentInstance; 26 | expect(app.title).toEqual('tinycam-client-web'); 27 | }); 28 | 29 | it('should render title', () => { 30 | const fixture = TestBed.createComponent(AppComponent); 31 | fixture.detectChanges(); 32 | const compiled = fixture.nativeElement; 33 | expect(compiled.querySelector('.content span').textContent).toContain('tinycam-client-web app is running!'); 34 | }); 35 | }); 36 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'app-root', 5 | templateUrl: './app.component.html', 6 | styleUrls: ['./app.component.scss'] 7 | }) 8 | export class AppComponent { 9 | title = 'tinycam-client-web'; 10 | } 11 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; 3 | import { NgModule } from '@angular/core'; 4 | import { FormsModule } from '@angular/forms'; 5 | import { HttpClientModule } from '@angular/common/http'; 6 | import { MatButtonModule } from '@angular/material/button'; 7 | import { MatButtonToggleModule } from '@angular/material/button-toggle'; 8 | import { MatCardModule } from '@angular/material/card'; 9 | //import { MatChipsModule } from '@angular/material/chips'; 10 | // import { MatToolbarModule } from '@angular/material/toolbar'; 11 | // import { MatIconModule } from '@angular/material/icon'; 12 | import { MatInputModule } from '@angular/material/input'; 13 | import { MatDatepickerModule } from '@angular/material/datepicker'; 14 | import { MatDialogModule } from '@angular/material/dialog'; 15 | import { MatCheckboxModule } from '@angular/material/checkbox'; 16 | // import { MatRadioModule } from '@angular/material/radio'; 17 | import { MatMenuModule } from '@angular/material/menu'; 18 | import { MatNativeDateModule } from '@angular/material/core'; 19 | import { MatTooltipModule } from '@angular/material/tooltip'; 20 | import { MatSelectModule } from '@angular/material/select'; 21 | // import { MatSliderModule } from '@angular/material/slider'; 22 | import { MatSnackBarModule } from '@angular/material/snack-bar'; 23 | // import { MatTableModule } from '@angular/material/table'; 24 | import { 25 | CamListService, 26 | EventListService, 27 | GenericService, 28 | IpAddressesService, 29 | IpLocateService, 30 | LoginService, 31 | LogoutService, 32 | StatusService, 33 | WindowRefService 34 | } from './services'; 35 | import { 36 | CamListSelectionComponent, 37 | EventCamListComponent, 38 | EventListComponent, 39 | EventComponent, 40 | HeaderComponent, 41 | LiveComponent, 42 | LiveMultipleComponent, 43 | LiveCamListComponent, 44 | LiveInfoDialogComponent, 45 | LiveSetPresetDialogComponent, 46 | LoginComponent, 47 | PageAdminComponent, 48 | PageLiveComponent, 49 | PageLiveMultipleComponent, 50 | PageTimelineComponent, 51 | PageEventsComponent, 52 | PageNotFoundComponent, 53 | TimelineComponent, 54 | TimelineCamListComponent, 55 | VideoDialogComponent, 56 | } from './components'; 57 | import { AuthGuard } from './guards'; 58 | import { InfiniteScrollModule } from 'ngx-infinite-scroll'; 59 | import { AppRoutingModule } from './app-routing.module'; 60 | import { AppComponent } from './app.component'; 61 | import { MomentModule } from 'ngx-moment'; 62 | 63 | @NgModule({ 64 | declarations: [ 65 | AppComponent, 66 | CamListSelectionComponent, 67 | EventCamListComponent, 68 | EventListComponent, 69 | EventComponent, 70 | HeaderComponent, 71 | LiveComponent, 72 | LiveMultipleComponent, 73 | LiveCamListComponent, 74 | LiveInfoDialogComponent, 75 | LiveSetPresetDialogComponent, 76 | LoginComponent, 77 | PageAdminComponent, 78 | PageLiveComponent, 79 | PageLiveMultipleComponent, 80 | PageEventsComponent, 81 | PageTimelineComponent, 82 | PageNotFoundComponent, 83 | TimelineComponent, 84 | TimelineCamListComponent, 85 | VideoDialogComponent, 86 | ], 87 | imports: [ 88 | BrowserModule, 89 | BrowserAnimationsModule, 90 | InfiniteScrollModule, 91 | HttpClientModule, 92 | AppRoutingModule, 93 | MatButtonModule, 94 | MatButtonToggleModule, 95 | MatCardModule, 96 | // MatChipsModule, 97 | MatDatepickerModule, 98 | MatDialogModule, 99 | // MatToolbarModule, 100 | // MatIconModule, 101 | MatInputModule, 102 | MatCheckboxModule, 103 | MatMenuModule, 104 | MatNativeDateModule, 105 | // MatRadioModule, 106 | MatSelectModule, 107 | // MatSliderModule, 108 | MatSnackBarModule, 109 | // MatTableModule, 110 | MatTooltipModule, 111 | MomentModule, 112 | FormsModule 113 | ], 114 | providers: [ 115 | AuthGuard, 116 | CamListService, 117 | EventListService, 118 | GenericService, 119 | IpAddressesService, 120 | IpLocateService, 121 | LoginService, 122 | LogoutService, 123 | StatusService, 124 | WindowRefService, 125 | ], 126 | bootstrap: [AppComponent] 127 | }) 128 | export class AppModule {} 129 | -------------------------------------------------------------------------------- /src/app/components/cam-list-selection.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit } from '@angular/core'; 2 | import { CameraSettings } from '../models'; 3 | import { CamListService, LoginService } from '../services'; 4 | import { Router } from '@angular/router'; 5 | import { HttpErrorResponse } from '@angular/common/http'; 6 | import StorageUtils from '../utils-storage'; 7 | 8 | @Component({ 9 | template: `` 10 | }) 11 | 12 | export class CamListSelectionComponent implements OnInit { 13 | 14 | cameras: CameraSettings[] = null; 15 | cameraSelected: CameraSettings | number = null; // CameraSettings or number (-1) 16 | allCamerasSupport: boolean = false; 17 | localCloudSelected: string = 'local'; // 'local' or 'cloud' 18 | errorMessage: string = null; 19 | 20 | constructor( 21 | protected router: Router, 22 | protected loginService: LoginService, 23 | protected camListService: CamListService) { 24 | } 25 | 26 | ngOnInit() { 27 | // console.log('ngOnInit()'); 28 | this.camListService.getCamList(this.loginService.server, this.loginService.login) 29 | .subscribe({ 30 | next: (data) => this.processCamList(data), 31 | error: (e) => this.processCamListError(e) 32 | }) 33 | } 34 | 35 | ngOnDestroy() { 36 | } 37 | 38 | onSelected(camera: CameraSettings | number): void { 39 | console.log(`Selected camera: '${camera instanceof CameraSettings ? camera.name : camera}'`); 40 | this.localCloudSelected = 'local'; 41 | // this.cameraId = camId; 42 | //this.cameraSelected = camera; 43 | StorageUtils.setLastCameraSelected(camera instanceof Object ? camera.id : camera); 44 | // console.log('Selected: "' + target.value + '", camId: ' + camIdSelected); 45 | } 46 | 47 | processCamListError(error: HttpErrorResponse) { 48 | console.error('Error in getCamList()', error.message); 49 | // Token expired 50 | if (error.status == 401 || error.status == 403) 51 | this.router.navigate(['/login']); 52 | // if (!this.isConnected) { 53 | // this.errorMessage = "Check Internet connection"; 54 | // } else { 55 | this.errorMessage = error.message; 56 | // } 57 | } 58 | 59 | processCamList(cameras: CameraSettings[]) { 60 | // console.log('processCamList()'); 61 | if (cameras) { 62 | this.cameras = cameras; 63 | console.log('Total cameras: ' + cameras.length); 64 | } else { 65 | console.log('No cameras found.'); 66 | } 67 | this.camerasLoaded(); 68 | } 69 | 70 | camerasLoaded() { 71 | if (this.cameraSelected == null && this.cameras.length > 0) { 72 | // Select camera with last saved camId 73 | const camId = StorageUtils.getLastCameraSelected(); 74 | for (let camera of this.cameras) { 75 | if (camera.id === camId) { 76 | this.cameraSelected = camera; 77 | return; 78 | } 79 | } 80 | // No camId found. Try to select first enabled camera. 81 | // for (let camera of this.cameras) { 82 | // if (camera.enabled) { 83 | // this.cameraSelected = camera; 84 | // return; 85 | // } 86 | // } 87 | // Select first camera. 88 | if (this.allCamerasSupport) 89 | this.cameraSelected = -1; 90 | else 91 | this.cameraSelected = this.cameras[0]; 92 | } 93 | } 94 | 95 | getCameraName(cameraSettings: CameraSettings): string { 96 | return CameraSettings.getName(cameraSettings); 97 | } 98 | 99 | } 100 | -------------------------------------------------------------------------------- /src/app/components/event-cam-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | import { CamListSelectionComponent } from './cam-list-selection.component'; 3 | 4 | @Component({ 5 | selector: 'event-cam-list', 6 | styles: [ ` 7 | .my-card { 8 | margin-bottom: 20px; 9 | } 10 | .left { 11 | overflow: hidden; 12 | } 13 | .right { 14 | float: right; 15 | width: auto; 16 | margin-left: 10px; 17 | } 18 | `], 19 | template: ` 20 |
21 | 22 | {{this.errorMessage}} 23 | 24 |
25 | 26 |
27 | 28 | 29 |
30 | 31 | Local 32 | Cloud 33 | 34 |
35 | 36 |
37 | 38 | 39 | All cameras 40 | 41 | {{getCameraName(camera)}} 42 | 43 | 44 | 45 |
46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 |
59 |
60 | 61 | No cameras added. 62 | Loading cameras list... 63 |
64 | ` 65 | }) 66 | 67 | export class EventCamListComponent extends CamListSelectionComponent { 68 | 69 | ngOnInit() { 70 | this.allCamerasSupport = true; 71 | super.ngOnInit(); 72 | } 73 | 74 | } 75 | -------------------------------------------------------------------------------- /src/app/components/event-list.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, Input, SimpleChanges, ViewEncapsulation } from '@angular/core'; 2 | import { EventRecord, CameraSettings, } from '../models'; 3 | import { EventListService, LoginService } from '../services'; 4 | import { HttpErrorResponse } from '@angular/common/http'; 5 | import { MatDatepickerInputEvent } from '@angular/material/datepicker'; 6 | import { fadeInAnimation } from '../animations/'; 7 | 8 | //