[Screenshare] Migration to Zoom

deployment/configurations/node/sage3-prod.hjson

@@ -41,14 +41,6 @@
 
  // External Services
   "services": {
-    "twilio": {
-      // Your Account SID from www.twilio.com/console
-      "accountSid": "",
-      // API Key
-      "apiKey": "",
-      // API Secret
-      "apiSecret": ""
-    },
     "openai": {
       // API Key
       "apiKey": "",

webstack/apps/homebase/src/main.ts

@@ -24,7 +24,7 @@ import * as dns from 'node:dns';
 
 // Websocket
 import { WebSocket } from 'ws';
-import { SAGEnlp, SAGEPresence, SubscriptionCache } from '@sage3/backend';
+import { SAGEnlp, SAGEPresence, SAGEZoomJWTHelper, SubscriptionCache } from '@sage3/backend';
 import { setupWsforLogs } from './api/routers/custom';
 
 // YJS
@@ -53,7 +53,6 @@ import { APIClientWSMessage, ServerConfiguration } from '@sage3/shared/types';
 import { SBAuthDB, JWTPayload } from '@sage3/sagebase';
 
 // SAGE Twilio Helper Import
-import { SAGETwilio } from '@sage3/backend';
 import * as express from 'express';
 
 // Exception handling
@@ -124,17 +123,18 @@ async function startServer() {
   // Load all the models: user, board, ...
   await loadCollections();
 
-  // Twilio Setup
+  // Zoom Setup
   const screenShareTimeLimit = 3600 * 6 * 1000; // 6 hours
-  const twilio = new SAGETwilio(config.services.twilio, AppsCollection, PresenceCollection, 10000, screenShareTimeLimit);
-  app.get('/twilio/token', SAGEBase.Auth.authenticate, (req, res) => {
+  const zoom = new SAGEZoomJWTHelper(config.services.zoom, AppsCollection, PresenceCollection, 10000, screenShareTimeLimit);
+  app.get('/zoom/token', SAGEBase.Auth.authenticate, (req, res) => {
+    console.log('Zoom> token request');
     const authId = req.user.id;
     if (authId === undefined) {
       res.status(403).send();
     }
     const room = req.query.room as string;
     const identity = req.query.identity as string;
-    const token = twilio.generateVideoToken(identity, room);
+    const token = zoom.generateVideoToken(identity, room);
     res.send({ token });
   });
 

webstack/apps/webapp/proxy.conf.json

@@ -19,7 +19,7 @@
     "secure": false,
     "ws": true
   },
-  "/twilio": {
+  "/zoom": {
     "target": "http://127.0.0.1:3333",
     "secure": false,
     "ws": true

webstack/apps/webapp/src/app/pages/board/layers/background/components/Background.tsx

@@ -155,7 +155,7 @@ export function Background(props: BackgroundProps) {
   const newApp = (type: AppName, x: number, y: number) => {
     if (!user) return;
     if (type === 'Screenshare') {
-      createApp(setupApp('', type, x, y, props.roomId, props.boardId, { w: 1280, h: 720 }, { accessId }));
+      createApp(setupApp('', type, x, y, props.roomId, props.boardId, { w: 1280, h: 720 }));
     } else {
       createApp(setupApp('', type, x, y, props.roomId, props.boardId));
     }

webstack/apps/webapp/src/app/pages/board/layers/ui/UILayer.tsx

@@ -37,7 +37,6 @@ import {
   BoardContextMenu,
   ClearBoardModal,
   AppToolbar,
-  Twilio,
   LassoToolbar,
   Controller,
   AssetsPanel,
@@ -49,6 +48,7 @@ import {
   PresenceFollow,
   BoardTitle,
   KernelsPanel,
+  Zoom,
 } from './components';
 
 type UILayerProps = {
@@ -102,7 +102,7 @@ export function UILayer(props: UILayerProps) {
   const { isOpen: alfredIsOpen, onOpen: alredOnOpen, onClose: alfredOnClose } = useDisclosure();
 
   // Connect to Twilio only if there are Screenshares or Webcam apps
-  const twilioConnect = apps.filter((el) => el.data.type === 'Screenshare').length > 0;
+  const zoomConnect = apps.filter((el) => el.data.type === 'Screenshare').length > 0;
 
   /**
    * Clear the board confirmed
@@ -294,7 +294,7 @@ export function UILayer(props: UILayerProps) {
         <ClearBoardModal onClick={onClearConfirm} onClose={clearOnClose} isOpen={clearIsOpen}></ClearBoardModal>
       </Modal>
 
-      <Twilio roomName={props.boardId} connect={twilioConnect} />
+      <Zoom sessionId={props.boardId} connect={zoomConnect} />
 
       <Controller boardId={props.boardId} roomId={props.roomId} plugins={config.features ? config.features.plugins : false} />
 

webstack/apps/webapp/src/app/pages/board/layers/ui/components/BoardContextMenu.tsx

@@ -111,7 +111,6 @@ export function BoardContextMenu(props: ContextProps) {
     if (appName === 'Screenshare') {
       width = 1280;
       height = 720;
-      state.accessId = accessId;
     }
     if (appName === 'Webview') {
       height = 650;

webstack/apps/webapp/src/app/pages/board/layers/ui/components/Panels/Applications/ApplicationsPanel.tsx

@@ -77,7 +77,6 @@ export function ApplicationsPanel(props: ApplicationProps) {
     } else if (appName === 'Screenshare') {
       w = 1280;
       h = 720;
-      state.accessId = accessId;
     }
 
     const title = appName == 'Stickie' ? user.data.name : ''; // Gross

webstack/apps/webapp/src/app/pages/board/layers/ui/components/Twilio.tsx → webstack/apps/webapp/src/app/pages/board/layers/ui/components/Zoom.tsx

@@ -6,33 +6,33 @@
  * the file LICENSE, distributed as part of this software.
  */
 
-import { useTwilioStore, useUser } from '@sage3/frontend';
+import { useUser, useZoomStore } from '@sage3/frontend';
 import { useEffect } from 'react';
 
-export function Twilio(props: { roomName: string; connect: boolean }) {
+export function Zoom(props: { sessionId: string; connect: boolean }) {
   // User information
   const { user, accessId } = useUser();
 
   // Twilio Store to join and leave room when joining board
-  const { joinRoom, leaveRoom } = useTwilioStore((state) => state);
+  const { joinRoom, leaveRoom } = useZoomStore((state) => state);
 
-  // Handle joining and leaving twilio room when entering board
+  // Handle joining and leaving Zoom room when entering board
   useEffect(() => {
     // Join Twilio room
     if (user && props.connect) {
-      joinRoom(user._id, accessId, props.roomName);
+      joinRoom(user._id, props.sessionId);
     }
     // Uncmounting
     return () => {
-      // Leave twilio room
+      // Leave Zoom room
       leaveRoom();
     };
   }, []);
 
-  // Handle joining and leaving twilio room when props.connect changes
+  // Handle joining and leaving Zoom room when props.connect changes
   useEffect(() => {
     if (user && props.connect) {
-      joinRoom(user?._id, accessId, props.roomName);
+      joinRoom(user?._id, props.sessionId);
     } else {
       leaveRoom();
     }

webstack/apps/webapp/src/app/pages/board/layers/ui/components/index.ts

@@ -11,6 +11,6 @@ export * from './BoardContextMenu';
 export * from './ClearBoardModal';
 export * from './LassoToolbar';
 export * from './Panels';
-export * from './Twilio';
 export * from './PresenceFollow';
 export * from './BoardTitle';
+export * from './Zoom';

webstack/libs/applications/src/lib/apps.json

@@ -1,38 +1,38 @@
 [
-    "AIPane",
-    "BoardLink",
-    "CSVViewer",
-    "ChartGenerator",
-    "Chat",
-    "Clock",
-    "Cobrowse",
-    "CodeEditor",
-    "Counter",
-    "DeepZoomImage",
-    "EChartsViewer",
-    "GLTFViewer",
-    "HCDP",
-    "IFrame",
-    "ImageViewer",
-    "JupyterLab",
-    "LeafLet",
-    "Linker",
-    "MapGL",
-    "Notepad",
-    "PDFResult",
-    "PDFViewer",
-    "PluginApp",
-    "Poll",
-    "RTCChat",
-    "SageCell",
-    "Seer",
-    "SensorOverview",
-    "Stickie",
-    "TLDraw",
-    "TwilioScreenshare",
-    "VegaLite",
-    "VegaLiteViewer",
-    "VideoViewer",
-    "WebpageLink",
-    "Webview"
-]
+  "AIPane",
+  "BoardLink",
+  "CSVViewer",
+  "ChartGenerator",
+  "Chat",
+  "Clock",
+  "Cobrowse",
+  "CodeEditor",
+  "Counter",
+  "DeepZoomImage",
+  "EChartsViewer",
+  "GLTFViewer",
+  "HCDP",
+  "IFrame",
+  "ImageViewer",
+  "JupyterLab",
+  "LeafLet",
+  "Linker",
+  "MapGL",
+  "Notepad",
+  "PDFResult",
+  "PDFViewer",
+  "PluginApp",
+  "Poll",
+  "RTCChat",
+  "SageCell",
+  "Seer",
+  "SensorOverview",
+  "Stickie",
+  "TLDraw",
+  "ZoomScreenshare",
+  "VegaLite",
+  "VegaLiteViewer",
+  "VideoViewer",
+  "WebpageLink",
+  "Webview"
+]