VIDSOL-239: Release 1.3.0

.husky/pre-commit

@@ -1,4 +1,7 @@
 #!/usr/bin/env sh
 . "$(dirname "$0")/_/husky.sh"
 
-yarn lint-staged
+# Exit on error and unset variables
+set -eu
+
+yarn --silent quality-check

README.md

@@ -60,13 +60,31 @@ This application provides features for common conferencing use cases, such as:
     <summary>Input and output device selectors.</summary>
     <img src="docs/assets/DeviceSelector.png" alt="Screenshot of audio devices selector">
   </details>
-- Background blur and noise suppression toggles.
+- <details>
+    <summary>Noise suppression toggles in meeting room</summary>
+    <img src="docs/assets/NoiseSupression.png" alt="Screenshot of noise supression toggle">
+  </details>
+- <details>
+    <summary>
+      Background effects in meeting and waiting room. You can set predefined images, custom image or slight/strong background blur. Images can be uploaded from local device or URL in these formats: JPG, PNG, GIF or BMP. Background effects are not supported in non-Chromium-based browsers or on iOS.
+
+    Please see [OT.hasMediaProcessorSupport](https://vonage.github.io/video-docs/video-js-reference/latest/OT.html#hasMediaProcessorSupport) for more information.
+    </summary>
+
+    <img src="docs/assets/BGEffects.png" alt="Screenshot of background effects">
+  </details>
+- <details>
+    <summary>
+      Configurable features: adapt the app to your specific use cases and roles.
+      Configuration is handled through a <em>config.json</em> file that can be moved to the <em>frontend/public</em> folder; there's an example in the base directory, <em>config.example.json</em>. Changes to the config file will be reflected immediately in most cases, but some rooms will need to be re-joined to take effect (For example: "setting the default layout" or "audio on join").
+    </summary>
+    <img src="docs/assets/configFile.png" alt="Screenshot of a config.json">
 - <details>
     <summary>Composed archiving capabilities to record your meetings.</summary>
     <img src="docs/assets/Archiving.png" alt="Screenshot of archiving dialog box">
   </details>
 - <details>
-    <summary>In-call tools such as screen sharing, group chat function, and emoji reactions.</summary>
+    <summary>In-call tools such as screen sharing (subscriber can zoom in/out if hasMediaProcessorSupport), group chat function, and emoji reactions.</summary>
     <img src="docs/assets/Emojis.png" alt="Screenshot of emojis">
   </details>
 - Active speaker detection.
@@ -99,6 +117,8 @@ The Vonage Video API Reference App for React is currently supported on the lates
 - ![Safari icon](/docs/assets/safari.svg) Safari
 - ![Electron icon](/docs/assets/electron.svg) Electron
 
+*Note:* Some browsers such as Firefox or Safari do not support media processors like video and audio filters (e.g background effects): Please see [OT.hasMediaProcessorSupport](https://vonage.github.io/video-docs/video-js-reference/latest/OT.html#hasMediaProcessorSupport) for more information.
+
 *Note:* Mobile web views have limited supported at the moment. The minimum supported device width is `360px`.
 
 ## Requirements

backend/helpers/config.ts

@@ -13,6 +13,8 @@ const loadConfig = (): Config => {
     token: process.env.JIRA_TOKEN,
     key: process.env.JIRA_PROJECT_KEY,
     componentId: process.env.JIRA_COMPONENT_ID,
+    iOSComponentId: process.env.JIRA_iOS_COMPONENT_ID,
+    androidComponentId: process.env.JIRA_ANDROID_COMPONENT_ID,
     epicLink: process.env.JIRA_EPIC_LINK,
     epicUrl: process.env.JIRA_EPIC_URL,
   };

backend/jest/setEnvVars.js

@@ -2,6 +2,8 @@ process.env.JIRA_API_URL = 'https://example.com';
 process.env.JIRA_URL = 'https://example.com';
 process.env.JIRA_TOKEN = 'JIRA';
 process.env.JIRA_COMPONENT_ID = 'componentId';
+process.env.JIRA_iOS_COMPONENT_ID = 'iOSComponentId';
+process.env.JIRA_ANDROID_COMPONENT_ID = 'androidComponentId';
 process.env.JIRA_EPIC_LINK = 'jiraEpicLink';
 process.env.JIRA_EPIC_URL = 'jiraEpicUrl';
 process.env.VONAGE_APP_ID = 'vonageAppId';

backend/jest/setEnvVars.test.ts

@@ -21,6 +21,16 @@ describe('Environment Variables', () => {
     expect(process.env.JIRA_COMPONENT_ID).toBe(jiraComponentId);
   });
 
+  test('should have the correct JIRA_iOS_COMPONENT_ID', () => {
+    const jiraComponentId = 'iOSComponentId';
+    expect(process.env.JIRA_iOS_COMPONENT_ID).toBe(jiraComponentId);
+  });
+
+  test('should have the correct JIRA_ANDROID_COMPONENT_ID', () => {
+    const jiraComponentId = 'androidComponentId';
+    expect(process.env.JIRA_ANDROID_COMPONENT_ID).toBe(jiraComponentId);
+  });
+
   test('should have the correct JIRA_EPIC_LINK', () => {
     const jiraEpicLink = 'jiraEpicLink';
     expect(process.env.JIRA_EPIC_LINK).toBe(jiraEpicLink);

backend/package.json

@@ -1,16 +1,16 @@
 {
   "name": "backend",
-  "version": "1.2.3",
+  "version": "1.3.0",
   "description": "Express-based backend with authenticated routes.",
   "main": "index.js",
   "type": "module",
   "scripts": {
-    "dev": "tsx watch index.ts",
-    "start": "node --import tsx index.ts",
-    "debug": "node --inspect --watch --import tsx index.ts",
+    "dev": "nodemon --watch . --ext ts,tsx,json --ignore dist --exec \"sh -c 'yarn ts-check && node --import tsx index.ts'\"",
+    "start": "yarn ts-check && node --import tsx index.ts",
+    "debug": "nodemon --watch . --ext ts,tsx,json --ignore dist --exec \"sh -c 'yarn ts-check && node --inspect --import tsx index.ts'\"",
     "test": "NODE_OPTIONS=\"--experimental-vm-modules\" jest --maxWorkers=1 --coverage",
     "test:watch": "yarn test --watch",
-    "ts-check": "tsc -p tsconfig.json"
+    "ts-check": "tsc --noEmit -p tsconfig.json --pretty true"
   },
   "author": "",
   "license": "MIT",
@@ -41,6 +41,7 @@
     "@types/supertest": "^6.0.2",
     "@types/validator": "^13.15.2",
     "jest": "^29.7.0",
+    "nodemon": "^3.1.10",
     "supertest": "^7.0.0",
     "ts-jest": "^29.1.2"
   }

backend/routes/feedback.ts

@@ -1,14 +1,33 @@
 import { Request, Response, Router } from 'express';
 import getFeedbackService from '../services/getFeedbackService';
+import { FeedbackOrigin } from '../types/feedback';
 
 const feedbackRouter = Router();
 const feedbackService = getFeedbackService();
 
 feedbackRouter.post('/report', async (req: Request, res: Response) => {
+  const { headers } = req;
   const { title, name, issue, attachment } = req.body;
 
   try {
-    const feedbackData = await feedbackService.reportIssue({ title, name, issue, attachment });
+    let origin: FeedbackOrigin = 'web';
+    const useragent = headers['User-Agent'] || headers['user-agent'];
+
+    if (useragent != null) {
+      if (useragent.includes('VeraNativeiOS')) {
+        origin = 'iOS';
+      } else if (useragent.includes('VeraNativeAndroid')) {
+        origin = 'Android';
+      }
+    }
+
+    const feedbackData = await feedbackService.reportIssue({
+      title,
+      name,
+      issue,
+      attachment,
+      origin,
+    });
     if (feedbackData) {
       return res.status(200).json({ feedbackData });
     }

backend/routes/index.ts

@@ -2,11 +2,13 @@ import { Router } from 'express';
 import healthRoute from './health';
 import sessionRouter from './session';
 import feedbackRouter from './feedback';
+import wellKnownRouter from './wellKnown';
 
 const router = Router();
 
 router.use('/_', healthRoute);
 router.use('/session', sessionRouter);
 router.use('/feedback', feedbackRouter);
+router.use('/.well-known', wellKnownRouter);
 
 export default router;

backend/routes/wellKnown.ts

@@ -0,0 +1,66 @@
+import { Request, Response, Router } from 'express';
+
+const wellKnownRouter = Router();
+
+/**
+ * Serve the static file needed for Android deep linking
+ * more info: https://developer.android.com/training/app-links/verify-android-applinks#publish-json
+ */
+wellKnownRouter.get('/assetlinks.json', (_req: Request, res: Response) => {
+  res.json([
+    {
+      // Grants the target permission to handle all URLs that the source can handle
+      relation: ['delegate_permission/common.handle_all_urls'],
+      target: {
+        namespace: 'android_app',
+        // Package name for the Android app
+        package_name: 'com.vonage.android.debug',
+        // SHA-256 certificate fingerprints for the Android app
+        sha256_cert_fingerprints: [
+          'A4:26:72:80:DA:75:99:75:ED:D2:32:ED:0A:DC:2C:7C:27:78:6A:8C:9A:37:22:41:23:CF:9E:DB:03:78:FC:6C',
+        ],
+      },
+    },
+    {
+      // Grants the target permission to handle all URLs that the source can handle
+      relation: ['delegate_permission/common.handle_all_urls'],
+      target: {
+        namespace: 'android_app',
+        // Package name for the Android app
+        package_name: 'com.vonage.android',
+        // SHA-256 certificate fingerprints for the Android app
+        sha256_cert_fingerprints: [
+          'A5:77:34:82:4C:98:13:CF:88:DF:20:46:2C:B7:7E:33:C0:4C:FC:C6:A1:E4:B3:25:5F:43:49:BA:FE:B5:43:27',
+        ],
+      },
+    },
+  ]);
+});
+
+/**
+ * Serve the static file needed for iOS app site association
+ * more info: https://developer.apple.com/documentation/xcode/supporting-associated-domains
+ */
+wellKnownRouter.get('/apple-app-site-association', (_req: Request, res: Response) => {
+  res.json({
+    applinks: {
+      details: [
+        {
+          appIDs: ['PR6C39UQ38.com.vonage.VERA'],
+          components: [
+            {
+              '/': '/waiting-room/*',
+              comment: 'Matches any waiting room URL',
+            },
+            {
+              '/': '/room/*',
+              comment: 'Matches any room URL',
+            },
+          ],
+        },
+      ],
+    },
+  });
+});
+
+export default wellKnownRouter;

backend/services/jiraFeedbackService.ts

@@ -3,14 +3,16 @@ import FormData from 'form-data';
 import { FeedbackService } from './feedbackService';
 import loadConfig from '../helpers/config';
 import { Config } from '../types/config';
-import { FeedbackData, ReportIssueReturn } from '../types/feedback';
+import { FeedbackData, FeedbackOrigin, ReportIssueReturn } from '../types/feedback';
 
 class JiraFeedbackService implements FeedbackService {
   jiraApiUrl: string;
   jiraUrl: string;
   jiraToken: string;
   jiraKey: string;
   jiraComponentId: string;
+  jiraiOSComponentId: string;
+  jiraAndroidComponentId: string;
   jiraEpicUrl: string;
   jiraEpicLink: string;
   config: Config;
@@ -21,6 +23,8 @@ class JiraFeedbackService implements FeedbackService {
     this.jiraToken = this.config.token as string;
     this.jiraKey = this.config.key as string;
     this.jiraComponentId = this.config.componentId as string;
+    this.jiraiOSComponentId = this.config.iOSComponentId as string;
+    this.jiraAndroidComponentId = this.config.androidComponentId as string;
     this.jiraUrl = this.config.url as string;
     this.jiraEpicUrl = this.config.epicUrl as string;
     this.jiraEpicLink = this.config.epicLink as string;
@@ -39,7 +43,7 @@ class JiraFeedbackService implements FeedbackService {
         },
         components: [
           {
-            id: this.jiraComponentId,
+            id: this.getComponentIdByOrigin(data.origin),
           },
         ],
         [this.jiraEpicLink]: this.jiraEpicUrl,
@@ -95,5 +99,17 @@ class JiraFeedbackService implements FeedbackService {
       screenshotIncluded: true,
     };
   }
+
+  private getComponentIdByOrigin(origin: FeedbackOrigin): string {
+    switch (origin) {
+      case 'iOS':
+        return this.jiraiOSComponentId;
+      case 'Android':
+        return this.jiraAndroidComponentId;
+      case 'web':
+      default:
+        return this.jiraComponentId;
+    }
+  }
 }
 export default JiraFeedbackService;

backend/services/tests/jiraFeedbackService.test.ts

@@ -2,7 +2,7 @@ import axios from 'axios';
 import { describe, expect, it, beforeAll, afterAll, jest } from '@jest/globals';
 import FormData from 'form-data';
 import JiraFeedbackService from '../jiraFeedbackService';
-import { FeedbackData } from '../../types/feedback';
+import { FeedbackData, FeedbackOrigin } from '../../types/feedback';
 
 jest.mock('axios');
 
@@ -12,6 +12,7 @@ describe('JiraFeedbackService', () => {
     title: 'Nothing works.',
     name: 'John Doe',
     issue: 'This does not even work',
+    origin: 'web' as FeedbackOrigin,
   };
 
   const mockPost = jest.spyOn(axios, 'post');
@@ -92,4 +93,86 @@ describe('JiraFeedbackService', () => {
     const feedbackService = await jiraFeedbackService.reportIssue(feedbackData);
     expect(feedbackService).toHaveProperty('screenshotIncluded', true);
   });
+
+  it('should create a valid iOS issue and return the issue key', async () => {
+    const feedbackData: FeedbackData = {
+      ...sharedData,
+      attachment: '',
+      origin: 'iOS',
+    };
+
+    const mockTicketResponse: { data: { key: string } } = {
+      data: {
+        key: '2024',
+      },
+    };
+
+    mockPost.mockResolvedValue(mockTicketResponse);
+
+    await jiraFeedbackService.reportIssue(feedbackData);
+    expect(axios.post).toHaveBeenCalledWith(
+      jiraFeedbackService.jiraApiUrl,
+      {
+        fields: {
+          project: { key: jiraFeedbackService.jiraKey },
+          summary: 'Nothing works.',
+          description: 'Reported by: John Doe\n\n Issue description:\nThis does not even work',
+          issuetype: { name: 'Bug' },
+          components: [
+            {
+              id: jiraFeedbackService.jiraiOSComponentId,
+            },
+          ],
+          [jiraFeedbackService.jiraEpicLink]: jiraFeedbackService.jiraEpicUrl,
+        },
+      },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Basic ${jiraFeedbackService.jiraToken}`,
+        },
+      }
+    );
+  });
+
+  it('should create a valid Android issue and return the issue key', async () => {
+    const feedbackData: FeedbackData = {
+      ...sharedData,
+      attachment: '',
+      origin: 'Android',
+    };
+
+    const mockTicketResponse: { data: { key: string } } = {
+      data: {
+        key: '2024',
+      },
+    };
+
+    mockPost.mockResolvedValue(mockTicketResponse);
+
+    await jiraFeedbackService.reportIssue(feedbackData);
+    expect(axios.post).toHaveBeenCalledWith(
+      jiraFeedbackService.jiraApiUrl,
+      {
+        fields: {
+          project: { key: jiraFeedbackService.jiraKey },
+          summary: 'Nothing works.',
+          description: 'Reported by: John Doe\n\n Issue description:\nThis does not even work',
+          issuetype: { name: 'Bug' },
+          components: [
+            {
+              id: jiraFeedbackService.jiraAndroidComponentId,
+            },
+          ],
+          [jiraFeedbackService.jiraEpicLink]: jiraFeedbackService.jiraEpicUrl,
+        },
+      },
+      {
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Basic ${jiraFeedbackService.jiraToken}`,
+        },
+      }
+    );
+  });
 });