Skip to content

Commit b806e4d

Browse files
souyahia-monksouyahia-monk
authored
Video Capture (#901)
* Created fullColorSVG util function * Created useDeviceOrientation hook * Created useCameraPermission hook * Created VideoCapturePermissions component and initiated the VideoCapture project * Created VideoCaptureTutorial component * Created RecordVideoButton component * Created VehicleWalkaroundIndicator component * Created VideoCaptureRecording component * Added live config support for VideoCapture apps * Created useVideoRecording hook * Added getImageData and compressImage functions to the Camera handle. * Created useFrameSelection hook * Created useVideoUploadQueue hook * Created VideoCaptureProcessing component * Start tasks on Video Capture complete and display end message * Created OrientationEnforcer component * Added fast movements warnings features * Added manual photo API call * Added tests for the VideoCaptureHUD and the VideoCapture components * Added documentation for the VideoCapture process * Created pipelines and build configs * Added missing peer dependency in documentation package * Fixed yarn lock * Fix demo-app-video NPM version * Prevent walkaround position to go beyond 360 degrees * Added a tooltip to the RecordVideoButton component * Added video recording tooltips * Added redirection to VM at the end of the recording process
1 parent c12e283 commit b806e4d

File tree

215 files changed

+8409
-877
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

215 files changed

+8409
-877
lines changed

‎.github/workflows/build-demo-app-video.yml‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
name: Build Demo App Video
2+
run-name: Build Demo App Video On Pull Request
3+
4+
on:
5+
pull_request:
6+
branches: [main]
7+
8+
jobs:
9+
build:
10+
name: Build
11+
runs-on: ubuntu-latest
12+
permissions:
13+
actions: read
14+
contents: read
15+
security-events: write
16+
17+
steps:
18+
- name: 💾 Checking out the repository
19+
uses: actions/checkout@v4
20+
- name: ⚙️ Setting up the MonkJs project
21+
uses: ./.github/actions/monkjs-set-up
22+
with:
23+
build-env: production
24+
- name: 📱 Building the demo app video
25+
run: cd apps/demo-app-video && yarn build:staging

‎.github/workflows/deploy-demo-app-video.yml‎

Lines changed: 62 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,62 @@
1+
name: Deploy Demo App Video
2+
run-name: Deploy Demo App Video To Staging After Merge
3+
4+
on:
5+
push:
6+
branches: [ main ]
7+
8+
jobs:
9+
build:
10+
name: Build
11+
runs-on: ubuntu-latest
12+
permissions:
13+
actions: read
14+
contents: read
15+
security-events: write
16+
17+
steps:
18+
- name: 💾 Checking out the repository
19+
uses: actions/checkout@v4
20+
- name: ⚙️ Setting up the MonkJs project
21+
uses: ./.github/actions/monkjs-set-up
22+
with:
23+
build-env: production
24+
- name: 📱 Building the demo app video
25+
run: cd apps/demo-app-video && yarn build:staging
26+
- name: 📦 Uploading the artifact
27+
uses: actions/[email protected]
28+
with:
29+
name: build-demo-app-video-staging
30+
path: apps/demo-app-video/build
31+
if-no-files-found: error
32+
33+
deploy:
34+
name: Deploy
35+
environment: staging
36+
needs:
37+
- build
38+
container:
39+
image: dtzar/helm-kubectl:3.14.2
40+
runs-on: ubuntu-latest
41+
steps:
42+
- name: 🔐 Authenticating to Google Cloud
43+
uses: google-github-actions/[email protected]
44+
with:
45+
credentials_json: "${{ secrets.GKE_SA_KEY }}"
46+
- name: 🔐 Obtaining GKE credentials
47+
uses: google-github-actions/[email protected]
48+
with:
49+
cluster_name: ${{ secrets.GKE_CLUSTER }}
50+
location: ${{ secrets.GKE_ZONE }}
51+
project_id: ${{ secrets.GKE_PROJECT }}
52+
- name: 📦 Downloading the artifact
53+
uses: actions/[email protected]
54+
with:
55+
name: build-demo-app-video-staging
56+
path: demo-video
57+
- name: 🧹 Cleaning up previous build
58+
run: |-
59+
kubectl -n poc exec -it $(kubectl get pods -n poc -l app.kubernetes.io/instance=poc-spa --no-headers | awk '{print $1}') -- rm -rf demo-video
60+
- name: 🌐 Deploying app
61+
run: |-
62+
kubectl -n poc cp demo-video poc/$(kubectl get pods -n poc -l app.kubernetes.io/instance=poc-spa --no-headers | awk '{print $1}'):/app/

‎apps/demo-app-video/.env-cmdrc.json‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
{
2+
"local": {
3+
"PORT": "17200",
4+
"HTTPS": "true",
5+
"ESLINT_NO_DEV_ERRORS": "true",
6+
"REACT_APP_ENVIRONMENT": "local",
7+
"REACT_APP_LIVE_CONFIG_ID": "demo-app-video-development",
8+
"REACT_APP_USE_LOCAL_CONFIG": "true",
9+
"REACT_APP_AUTH_DOMAIN": "idp.preview.monk.ai",
10+
"REACT_APP_AUTH_AUDIENCE": "https://api.monk.ai/v1/",
11+
"REACT_APP_AUTH_CLIENT_ID": "w9MTl518yqWl0dVE8oUbkxc3gnrI0sgH",
12+
"REACT_APP_SENTRY_DSN": "https://e0644a77095a58eeab6b0e32cc9d4188@o4505669501648896.ingest.us.sentry.io/4508575240290304",
13+
"REACT_APP_SENTRY_DEBUG": "true",
14+
"REACT_APP_INSPECTION_REPORT_URL": "https://demo-capture.preview.monk.ai"
15+
},
16+
"development": {
17+
"REACT_APP_ENVIRONMENT": "development",
18+
"REACT_APP_LIVE_CONFIG_ID": "demo-app-video-development",
19+
"REACT_APP_AUTH_DOMAIN": "idp.preview.monk.ai",
20+
"REACT_APP_AUTH_AUDIENCE": "https://api.monk.ai/v1/",
21+
"REACT_APP_AUTH_CLIENT_ID": "w9MTl518yqWl0dVE8oUbkxc3gnrI0sgH",
22+
"REACT_APP_SENTRY_DSN": "https://e0644a77095a58eeab6b0e32cc9d4188@o4505669501648896.ingest.us.sentry.io/4508575240290304",
23+
"REACT_APP_INSPECTION_REPORT_URL": "https://demo-capture.preview.monk.ai"
24+
},
25+
"staging": {
26+
"REACT_APP_ENVIRONMENT": "staging",
27+
"REACT_APP_LIVE_CONFIG_ID": "demo-app-video-staging",
28+
"REACT_APP_AUTH_DOMAIN": "idp.preview.monk.ai",
29+
"REACT_APP_AUTH_AUDIENCE": "https://api.monk.ai/v1/",
30+
"REACT_APP_AUTH_CLIENT_ID": "w9MTl518yqWl0dVE8oUbkxc3gnrI0sgH",
31+
"REACT_APP_SENTRY_DSN": "https://e0644a77095a58eeab6b0e32cc9d4188@o4505669501648896.ingest.us.sentry.io/4508575240290304",
32+
"REACT_APP_INSPECTION_REPORT_URL": "https://demo-capture.preview.monk.ai"
33+
},
34+
"preview": {
35+
"REACT_APP_ENVIRONMENT": "preview",
36+
"REACT_APP_LIVE_CONFIG_ID": "demo-app-video-preview",
37+
"REACT_APP_AUTH_DOMAIN": "idp.preview.monk.ai",
38+
"REACT_APP_AUTH_AUDIENCE": "https://api.monk.ai/v1/",
39+
"REACT_APP_AUTH_CLIENT_ID": "w9MTl518yqWl0dVE8oUbkxc3gnrI0sgH",
40+
"REACT_APP_SENTRY_DSN": "https://e0644a77095a58eeab6b0e32cc9d4188@o4505669501648896.ingest.us.sentry.io/4508575240290304",
41+
"REACT_APP_INSPECTION_REPORT_URL": "https://demo-capture.preview.monk.ai"
42+
},
43+
"backend-staging-qa": {
44+
"REACT_APP_ENVIRONMENT": "backend-staging-qa",
45+
"REACT_APP_LIVE_CONFIG_ID": "demo-app-video-backend-staging-qa",
46+
"REACT_APP_AUTH_DOMAIN": "idp.staging.monk.ai",
47+
"REACT_APP_AUTH_AUDIENCE": "https://api.monk.ai/v1/",
48+
"REACT_APP_AUTH_CLIENT_ID": "PLGfABs0AWNwZaokEg3GeU4m01RhIvyi",
49+
"REACT_APP_SENTRY_DSN": "https://e0644a77095a58eeab6b0e32cc9d4188@o4505669501648896.ingest.us.sentry.io/4508575240290304",
50+
"REACT_APP_INSPECTION_REPORT_URL": "https://demo-capture.staging.monk.ai"
51+
}
52+
}

‎apps/demo-app-video/.eslintignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
node_modules

‎apps/demo-app-video/.eslintrc.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
const OFF = 0;
2+
const WARN = 1;
3+
const ERROR = 2;
4+
5+
module.exports = {
6+
extends: ['@monkvision/eslint-config-typescript-react'],
7+
parserOptions: {
8+
project: ['./tsconfig.json'],
9+
},
10+
rules: {
11+
'import/no-extraneous-dependencies': OFF,
12+
'no-console': OFF,
13+
}
14+
}

‎apps/demo-app-video/.gitignore‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# builds
2+
build/
3+
lib/
4+
dist/
5+
module/
6+
commonjs/
7+
typescript/
8+
web-build/
9+
10+
# modules
11+
node_modules/
12+
coverage/
13+
.expo/
14+
.docusaurus/
15+
16+
# logs
17+
npm-debug.*
18+
npm-debug.log*
19+
yarn-debug.log*
20+
yarn-error.log*
21+
22+
# cache
23+
.eslintcache
24+
25+
# misc
26+
.DS_Store

‎apps/demo-app-video/LICENSE‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
The Clear BSD License
2+
3+
Copyright (c) [2022] [Monk](http://monk.ai)
4+
All rights reserved.
5+
6+
Redistribution and use in source and binary forms, with or without
7+
modification, are permitted (subject to the limitations in the disclaimer
8+
below) provided that the following conditions are met:
9+
10+
* Redistributions of source code must retain the above copyright notice,
11+
this list of conditions and the following disclaimer.
12+
13+
* Redistributions in binary form must reproduce the above copyright
14+
notice, this list of conditions and the following disclaimer in the
15+
documentation and/or other materials provided with the distribution.
16+
17+
* Neither the name of the copyright holder nor the names of its
18+
contributors may be used to endorse or promote products derived from this
19+
software without specific prior written permission.
20+
21+
NO EXPRESS OR IMPLIED LICENSES TO ANY PARTY'S PATENT RIGHTS ARE GRANTED BY
22+
THIS LICENSE. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND
23+
CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT
24+
LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A
25+
PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR
26+
CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
27+
EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
28+
PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR
29+
BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER
30+
IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
31+
ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
32+
POSSIBILITY OF SUCH DAMAGE.

‎apps/demo-app-video/README.md‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
# Monk Demo App
2+
This application is a demo app used to showcase how to implement the Monk workflow (authentication, inspection creation,
3+
inspection capture and inspection report) using the MonkJs SDK.
4+
5+
# Features
6+
This app contains the following features :
7+
- Authentication guards to enforce user log in
8+
- User log in with browser pop-up using Auth0 and token caching in the local storage
9+
- Automatic creation of a Monk inspection
10+
- Inspection capture using the PhotoCapture workflow
11+
- Redirection to the Monk inspection report app (since the inspection report component is not yet available in MonkJs
12+
4.0)
13+
- Possiblity of passing the following configuration in the URL search params :
14+
- Encrypted authentication token using ZLib (the user does not have to log in)
15+
- Inspection ID (instead of creating a new one automatically)
16+
- Vehicle type used for the Sights (default one is CUV)
17+
- Application language (English / French / German / Dutch)
18+
19+
# Running the App
20+
In order to run the app, you will need to have [NodeJs](https://nodejs.org/en) >= 16 and
21+
[Yarn 3](https://yarnpkg.com/getting-started/install) installed. Then, you'll need to install the required dependencies
22+
using the following command :
23+
24+
```bash
25+
yarn install
26+
```
27+
28+
You then need to copy the local environment configuration available in the `env.txt` file at the root of the directory
29+
into an env file called `.env` :
30+
31+
```bash
32+
cp env.txt .env
33+
```
34+
35+
You can then start the app by running :
36+
37+
```bash
38+
yarn start
39+
```
40+
41+
The application is by default available at `https://localhost:17200/`.
42+
43+
# Building the App
44+
To build the app, you simply need to run the following command :
45+
46+
```bash
47+
yarn build
48+
```
49+
50+
Don't forget to update the environment variables defined in your `.env` file for the target website.
51+
52+
# Testing
53+
## Running the Tests
54+
To run the tests of the app, simply run the following command :
55+
56+
```bash
57+
yarn test
58+
```
59+
60+
To run the tests as well as collecgt coverage, run the following command :
61+
62+
```bash
63+
yarn test:coverage
64+
```
65+
66+
## Analyzing Bundle Size
67+
After building the app using the `yarn build` command, you can analyze the bundle size using the following command :
68+
69+
```bash
70+
yarn analyze
71+
```
72+
73+
This will open a new window on your desktop browser where you'll be able to see the sizes of each module in the final
74+
app.

‎apps/demo-app-video/jest.config.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const { react } = require('@monkvision/jest-config');
2+
3+
module.exports = {
4+
...react({ monorepo: true }),
5+
coverageThreshold: {
6+
global: {
7+
branches: 0,
8+
functions: 0,
9+
lines: 0,
10+
statements: 0,
11+
},
12+
},
13+
};

0 commit comments

Comments
 (0)