New update from dolbyio-samples/comms-react-examples main

voxeet · Jul 12, 2023 · 679efd3 · 679efd3
1 parent 68d116e
commit 679efd3
Show file tree

Hide file tree

Showing 28 changed files with 240 additions and 82 deletions.
diff --git a/.gitignore b/.gitignore
@@ -6,4 +6,4 @@ dist-ssr
 
 .env
 # Local Netlify folder
-.netlify
+.netlify
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,60 @@
 # comms-app-react-videocall
 
+## 1.10.2
+
+### Patch Changes
+
+- 5cb17c87: Enable Live recording so that we can record conferences
+- Updated dependencies [5ac6e7a2]
+- Updated dependencies [5cb17c87]
+- Updated dependencies [bb70d96d]
+  - @dolbyio/comms-uikit-react@1.2.0
+
+## 1.10.1
+
+### Patch Changes
+
+- 5cb17c87: Enable Live recording so that we can record conferences
+- Updated dependencies [5cb17c87]
+  - @dolbyio/comms-uikit-react@1.1.1
+
+## 1.10.0
+
+### Minor Changes
+
+- 6ed11ae1: Add 15 minutes limit
+- 9616f186: Upgraded Voxeet-Web-SDK to 3.10 and enabled RTMP by default for video call app
+- 04c6893d: Videocall is not template-set for deploying on netlify
+- 83882344: Updated SDK to 3.10.0 and Added multi-screen-share support for 2 hosts
+
+### Patch Changes
+
+- 05503b00: Changed RTMP endpoints
+- 029f01c2: Add in tooltips
+- 253ec2f9: Added a brand new exit screen
+- 52268866: Add in component name tracking
+- 6431b247: Fix layut for multi-screen share
+- Updated dependencies [05503b00]
+- Updated dependencies [e04db747]
+- Updated dependencies [ec90eec7]
+- Updated dependencies [27237560]
+- Updated dependencies [c5338020]
+- Updated dependencies [27c15032]
+- Updated dependencies [9616f186]
+- Updated dependencies [11775255]
+- Updated dependencies [f2f3a860]
+- Updated dependencies [b424d0c3]
+- Updated dependencies [83882344]
+- Updated dependencies [4a39e616]
+- Updated dependencies [f4afd837]
+- Updated dependencies [6431b247]
+- Updated dependencies [a51111c4]
+- Updated dependencies [1c3cb640]
+- Updated dependencies [c422c01f]
+- Updated dependencies [238185f6]
+- Updated dependencies [00a51d4d]
+  - @dolbyio/comms-uikit-react@1.1.0
+
 ## 1.9.2
 
 ### Patch Changes

diff --git a/backend/package.json b/backend/package.json
@@ -27,7 +27,7 @@
     "@types/pubnub": "^7.2.1",
     "concurrently": "^7.6.0",
     "nodemon": "^2.0.20",
-    "typescript": "4.9.5",
+    "typescript": "^5.1.5",
     "wait-on": "^6.0.1"
   }
 }
diff --git a/documentation/Events-built.png b/documentation/Events-built.png
diff --git a/documentation/app_keys.png b/documentation/app_keys.png
diff --git a/documentation/apps-dashboard.png b/documentation/apps-dashboard.png
diff --git a/documentation/assets/Dashboard.png b/documentation/assets/Dashboard.png
diff --git a/documentation/assets/app_keys.png b/documentation/assets/app_keys.png
diff --git a/documentation/assets/apps-dashboard.png b/documentation/assets/apps-dashboard.png
diff --git a/documentation/assets/banner.jpeg b/documentation/assets/banner.jpeg
diff --git a/documentation/assets/banner.jpg b/documentation/assets/banner.jpg
diff --git a/documentation/assets/dashboard-events.png b/documentation/assets/dashboard-events.png
diff --git a/documentation/assets/open-beta.png b/documentation/assets/open-beta.png
diff --git a/documentation/banner.jpeg b/documentation/banner.jpeg
diff --git a/documentation/banner.jpg b/documentation/banner.jpg
diff --git a/documentation/client_access_token.png b/documentation/client_access_token.png
diff --git a/documentation/create-app.png b/documentation/create-app.png
diff --git a/documentation/create.png b/documentation/create.png
diff --git a/documentation/dashboard-events.png b/documentation/dashboard-events.png
diff --git a/documentation/dashboard.png b/documentation/dashboard.png
diff --git a/documentation/home.png b/documentation/home.png
diff --git a/documentation/open-beta.png b/documentation/open-beta.png
diff --git a/package.json b/package.json
@@ -1,19 +1,23 @@
 {
   "name": "comms-app-react-videocall",
-  "version": "1.9.2",
+  "version": "1.10.2",
   "private": true,
   "scripts": {
     "dev": "yarn netlify dev --offline",
-    "dev-proxy": "concurrently --kill-others \"cd ../backend && yarn dev\" \"yarn dev\"",
-    "build": "cross-env ENV=web && vite build"
+    "dev:deprecated": "cross-env ENV=web && vite",
+    "dev-proxy": "concurrently --kill-others \"cd ../api-proxy && yarn dev\" \"yarn dev\"",
+    "dev-proxy-host": "concurrently --kill-others \"cd api && yarn dev\" \"yarn dev --host --https\"",
+    "build": "cross-env ENV=web && vite build",
+    "preview": "cross-env ENV=web && vite preview",
+    "license-checker": "license-checker --json --out third-party-licenses.json --relativeLicensePath"
   },
   "license": "MIT",
   "repository": {
     "type": "git",
     "url": "https://github.com/dolbyio-samples/comms-app-react-videocall"
   },
   "dependencies": {
-    "@dolbyio/comms-uikit-react": "<2.0.0",
+    "@dolbyio/comms-uikit-react": "1.2.0",
     "@emotion/react": "^11.9.0",
     "@voxeet/voxeet-web-sdk": "^3.10.0",
     "axios": "^0.26.1",
@@ -35,7 +39,7 @@
     "@types/color": "3.0.3",
     "@types/react": "^18.0.6",
     "@types/react-dom": "^18.0.6",
-    "@vitejs/plugin-react": "^1.0.7",
+    "@vitejs/plugin-react": "^4.0.0",
     "concurrently": "^7.6.0",
     "cross-env": "^7.0.3",
     "license-checker": "^25.0.1",
@@ -44,4 +48,4 @@
   "workspaces": [
     "backend"
   ]
-}
+}
diff --git a/src/App.tsx b/src/App.tsx
@@ -4,20 +4,28 @@ import React, { useEffect } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter } from 'react-router-dom';
 
+import styles from './App.module.scss';
 import PhoneLandscapeCurtain from './components/PhoneLandscapeCurtain';
 import TranslationProvider from './components/TranslationProvider';
-import './App.module.scss';
 import { ConferenceCreateProvider } from './context/ConferenceCreateContext';
 import useToken from './hooks/useToken';
 import { Navigator } from './routes/Navigator';
 
 const App = () => {
+  const { YOUR_TOKEN, getToken, error } = useToken();
+
   // Register the component name so that we can estimate the app's usage
   useEffect(() => {
     VoxeetSDK.registerComponentVersion(import.meta.env.VITE_APP_NAME, import.meta.env.VITE_APP_VERSION);
   }, []);
 
-  const { YOUR_TOKEN, getToken } = useToken();
+  if (error) {
+    return (
+      <ThemeProvider>
+        <div className={styles.fallbackContainer}>Error : {error}</div>;
+      </ThemeProvider>
+    );
+  }
 
   if (!YOUR_TOKEN) {
     return null;

diff --git a/src/hooks/useToken.ts b/src/hooks/useToken.ts
@@ -1,35 +1,41 @@
 import getProxyUrl from '@src/utils/getProxyUrl';
-import { useMemo, useState, useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
+import { useState, useEffect, useCallback } from 'react';
 
 import fetch from '../utils/fetch';
 
 const useToken = () => {
-  const location = useLocation();
+  const [error, setError] = useState<string | undefined>();
 
-  const accessToken = useMemo(() => {
-    return encodeURIComponent(
-      new URLSearchParams(window.location.search).get('token') || import.meta.env.VITE_CLIENT_ACCESS_TOKEN || '',
-    );
-  }, [location]);
+  const accessToken = import.meta.env.VITE_CLIENT_ACCESS_TOKEN || '';
 
   const [YOUR_TOKEN, setToken] = useState<string | null>(null);
 
-  const getToken = async () => {
+  const getToken = useCallback(async () => {
     if (accessToken && accessToken.length) {
       return accessToken;
     }
-    const res = await fetch(`${getProxyUrl()}/client-access-token`, { method: 'GET' });
-    return res.data.access_token;
-  };
+    try {
+      const res = await fetch(`${getProxyUrl()}/client-access-token`);
+
+      if (!res.data.access_token) {
+        setError(`Invalid Dolby.io token, please refer to Readme to set it correctly`);
+      } else {
+        setError(undefined);
+      }
+      return res.data.access_token;
+    } catch (e) {
+      setError(`Invalid Dolby.io token, please refer to Readme to set it correctly`);
+      return null;
+    }
+  }, [accessToken]);
 
   useEffect(() => {
     (async () => {
       setToken(await getToken());
     })();
-  }, []);
+  }, [getToken]);
 
-  return { YOUR_TOKEN, getToken };
+  return { YOUR_TOKEN, getToken, error };
 };
 
 export default useToken;
diff --git a/src/routes/ConferenceCreate/DeviceSetup/MobileContent/MobileContent.tsx b/src/routes/ConferenceCreate/DeviceSetup/MobileContent/MobileContent.tsx
@@ -12,7 +12,6 @@ import {
 import ToggleMicrophoneButton from '@src/routes/ConferenceCreate/DeviceSetup/ToggleMicrophoneButton';
 import ToggleVideoButton from '@src/routes/ConferenceCreate/DeviceSetup/ToggleVideoButton';
 import { splitMeetingAlias } from '@src/utils/misc';
-
 import React, { useMemo } from 'react';
 
 import styles from './MobileContent.module.scss';

diff --git a/src/utils/env.ts b/src/utils/env.ts
@@ -6,7 +6,8 @@ const defaults = {
   VITE_RTMP_STREAMING: 'true',
   VITE_MUSIC_MODE: 'true',
   VITE_BLUR_OPTION: 'true',
-  VITE_CONFERENCE_RECORDING: 'false',
+  VITE_CONFERENCE_RECORDING: 'true',
+  VITE_VIDEO_FORWARDING_OPTION: 'true',
 } satisfies Record<string, string | undefined>;
 // The type above allows us to define the value type while still being strongly typed
 // For example, the type for defaults.VITE_ENABLE_UNGATED_FEATURES is undefined rather