video-transport typescript formatting

examples/p2p-webrtc/video-transform/client/typescript/src/app.ts

@@ -1,10 +1,12 @@
+import { SmallWebRTCTransport } from '@pipecat-ai/small-webrtc-transport';
 import {
-    SmallWebRTCTransport
+  Participant,
-} from "@pipecat-ai/small-webrtc-transport";
+  RTVIClient,
-import {Participant, RTVIClient, RTVIClientOptions, Transport} from "@pipecat-ai/client-js";
+  RTVIClientOptions,
+  Transport,
+} from '@pipecat-ai/client-js';
 
 class WebRTCApp {
-
   private declare connectBtn: HTMLButtonElement;
   private declare disconnectBtn: HTMLButtonElement;
   private declare muteBtn: HTMLButtonElement;
@@ -26,7 +28,7 @@ class WebRTCApp {
   constructor() {
     this.setupDOMElements();
     this.setupDOMEventListeners();
-        this.initializeRTVIClient()
+    this.initializeRTVIClient();
     void this.populateDevices();
   }
 
@@ -34,96 +36,114 @@ class WebRTCApp {
     const transport = new SmallWebRTCTransport();
     const RTVIConfig: RTVIClientOptions = {
       params: {
-                baseUrl: "/api/offer"
+        baseUrl: '/api/offer',
       },
       transport: transport as Transport,
       enableMic: true,
       enableCam: true,
       callbacks: {
         onTransportStateChanged: (state) => {
-                    this.log(`Transport state: ${state}`)
+          this.log(`Transport state: ${state}`);
         },
         onConnected: () => {
-                    this.onConnectedHandler()
+          this.onConnectedHandler();
         },
         onBotReady: () => {
-                    this.log("Bot is ready.")
+          this.log('Bot is ready.');
         },
         onDisconnected: () => {
-                    this.onDisconnectedHandler()
+          this.onDisconnectedHandler();
         },
         onUserStartedSpeaking: () => {
-                    this.log("User started speaking.")
+          this.log('User started speaking.');
         },
         onUserStoppedSpeaking: () => {
-                    this.log("User stopped speaking.")
+          this.log('User stopped speaking.');
         },
         onBotStartedSpeaking: () => {
-                    this.log("Bot started speaking.")
+          this.log('Bot started speaking.');
         },
         onBotStoppedSpeaking: () => {
-                    this.log("Bot stopped speaking.")
+          this.log('Bot stopped speaking.');
         },
         onUserTranscript: (transcript) => {
           if (transcript.final) {
-                        this.log(`User transcript: ${transcript.text}`)
+            this.log(`User transcript: ${transcript.text}`);
           }
         },
         onBotTranscript: (transcript) => {
-                    this.log(`Bot transcript: ${transcript.text}`)
+          this.log(`Bot transcript: ${transcript.text}`);
         },
-                onTrackStarted: (track: MediaStreamTrack, participant?: Participant) => {
+        onTrackStarted: (
+          track: MediaStreamTrack,
+          participant?: Participant
+        ) => {
           if (participant?.local) {
-                        return
+            return;
           }
-                    this.onBotTrackStarted(track)
+          this.onBotTrackStarted(track);
         },
         onServerMessage: (msg) => {
-                    this.log(`Server message: ${msg}`)
+          this.log(`Server message: ${msg}`);
-                }
         },
-        }
+      },
+    };
     RTVIConfig.customConnectHandler = () => Promise.resolve();
     this.rtviClient = new RTVIClient(RTVIConfig);
-        this.smallWebRTCTransport = transport
+    this.smallWebRTCTransport = transport;
   }
 
   private setupDOMElements(): void {
-        this.connectBtn = document.getElementById('connect-btn') as HTMLButtonElement;
+    this.connectBtn = document.getElementById(
-        this.disconnectBtn = document.getElementById('disconnect-btn') as HTMLButtonElement;
+      'connect-btn'
+    ) as HTMLButtonElement;
+    this.disconnectBtn = document.getElementById(
+      'disconnect-btn'
+    ) as HTMLButtonElement;
     this.muteBtn = document.getElementById('mute-btn') as HTMLButtonElement;
 
-        this.audioInput = document.getElementById('audio-input') as HTMLSelectElement;
+    this.audioInput = document.getElementById(
-        this.videoInput = document.getElementById('video-input') as HTMLSelectElement;
+      'audio-input'
-        this.audioCodec = document.getElementById('audio-codec') as HTMLSelectElement;
+    ) as HTMLSelectElement;
-        this.videoCodec = document.getElementById('video-codec') as HTMLSelectElement;
+    this.videoInput = document.getElementById(
+      'video-input'
+    ) as HTMLSelectElement;
+    this.audioCodec = document.getElementById(
+      'audio-codec'
+    ) as HTMLSelectElement;
+    this.videoCodec = document.getElementById(
+      'video-codec'
+    ) as HTMLSelectElement;
 
-        this.videoElement = document.getElementById('bot-video') as HTMLVideoElement;
+    this.videoElement = document.getElementById(
-        this.audioElement = document.getElementById('bot-audio') as HTMLAudioElement;
+      'bot-video'
+    ) as HTMLVideoElement;
+    this.audioElement = document.getElementById(
+      'bot-audio'
+    ) as HTMLAudioElement;
 
     this.debugLog = document.getElementById('debug-log');
     this.statusSpan = document.getElementById('connection-status');
   }
 
   private setupDOMEventListeners(): void {
-        this.connectBtn.addEventListener("click", () => this.start());
+    this.connectBtn.addEventListener('click', () => this.start());
-        this.disconnectBtn.addEventListener("click", () => this.stop());
+    this.disconnectBtn.addEventListener('click', () => this.stop());
-        this.audioInput.addEventListener("change", (e) => {
+    this.audioInput.addEventListener('change', (e) => {
       // @ts-ignore
-            let audioDevice = e.target?.value
+      let audioDevice = e.target?.value;
-            this.rtviClient.updateMic(audioDevice)
+      this.rtviClient.updateMic(audioDevice);
-        })
+    });
-        this.videoInput.addEventListener("change", (e) => {
+    this.videoInput.addEventListener('change', (e) => {
       // @ts-ignore
-            let videoDevice = e.target?.value
+      let videoDevice = e.target?.value;
-            this.rtviClient.updateCam(videoDevice)
+      this.rtviClient.updateCam(videoDevice);
-        })
+    });
     this.muteBtn.addEventListener('click', () => {
-            let isCamEnabled = this.rtviClient.isCamEnabled
+      let isCamEnabled = this.rtviClient.isCamEnabled;
-            this.rtviClient.enableCam(!isCamEnabled)
+      this.rtviClient.enableCam(!isCamEnabled);
       this.muteBtn.textContent = isCamEnabled ? '📵' : '📷';
     });
-
   }
 
   private log(message: string): void {
@@ -140,7 +160,7 @@ class WebRTCApp {
   }
 
   private clearAllLogs() {
-        this.debugLog!.innerText = ''
+    this.debugLog!.innerText = '';
   }
 
   private updateStatus(status: string): void {
@@ -171,12 +191,15 @@ class WebRTCApp {
   }
 
   private async populateDevices(): Promise<void> {
-        const populateSelect = (select: HTMLSelectElement, devices: MediaDeviceInfo[]): void => {
+    const populateSelect = (
+      select: HTMLSelectElement,
+      devices: MediaDeviceInfo[]
+    ): void => {
       let counter = 1;
       devices.forEach((device) => {
         const option = document.createElement('option');
         option.value = device.deviceId;
-                option.text = device.label || ('Device #' + counter);
+        option.text = device.label || 'Device #' + counter;
         select.appendChild(option);
         counter += 1;
       });
@@ -193,24 +216,23 @@ class WebRTCApp {
   }
 
   private async start(): Promise<void> {
-        this.clearAllLogs()
+    this.clearAllLogs();
 
     this.connectBtn.disabled = true;
-        this.updateStatus("Connecting")
+    this.updateStatus('Connecting');
 
-        this.smallWebRTCTransport.setAudioCodec(this.audioCodec.value)
+    this.smallWebRTCTransport.setAudioCodec(this.audioCodec.value);
-        this.smallWebRTCTransport.setVideoCodec(this.videoCodec.value)
+    this.smallWebRTCTransport.setVideoCodec(this.videoCodec.value);
     try {
-            await this.rtviClient.connect()
+      await this.rtviClient.connect();
     } catch (e) {
-            console.log(`Failed to connect ${e}`)
+      console.log(`Failed to connect ${e}`);
-            this.stop()
+      this.stop();
     }
-
   }
 
   private stop(): void {
-        void this.rtviClient.disconnect()
+    void this.rtviClient.disconnect();
   }
 }