livekit-client 1.7.1 → 1.8.0

package/src/room/track/Track.ts

@@ -42,7 +42,7 @@ export abstract class Track extends (EventEmitter as new () => TypedEventEmitter
 
   protected _mediaStreamID: string;
 
-  protected isInBackground: boolean;
+  protected isInBackground: boolean = false;
 
   private backgroundTimeout: ReturnType<typeof setTimeout> | undefined;
 
@@ -57,12 +57,6 @@ export abstract class Track extends (EventEmitter as new () => TypedEventEmitter
     this._mediaStreamTrack = mediaTrack;
     this._mediaStreamID = mediaTrack.id;
     this.source = Track.Source.Unknown;
-    if (isWeb()) {
-      this.isInBackground = document.visibilityState === 'hidden';
-      document.addEventListener('visibilitychange', this.appVisibilityChangedListener);
-    } else {
-      this.isInBackground = false;
-    }
   }
 
   /** current receive bits per second */
@@ -97,6 +91,9 @@ export abstract class Track extends (EventEmitter as new () => TypedEventEmitter
     if (this.kind === Track.Kind.Video) {
       elementType = 'video';
     }
+    if (this.attachedElements.length === 0 && Track.Kind.Video) {
+      this.addAppVisibilityListener();
+    }
     if (!element) {
       if (elementType === 'audio') {
         recycledElements.forEach((e) => {
@@ -167,37 +164,40 @@ export abstract class Track extends (EventEmitter as new () => TypedEventEmitter
    */
   detach(element: HTMLMediaElement): HTMLMediaElement;
   detach(element?: HTMLMediaElement): HTMLMediaElement | HTMLMediaElement[] {
-    // detach from a single element
-    if (element) {
-      detachTrack(this._mediaStreamTrack, element);
-      const idx = this.attachedElements.indexOf(element);
-      if (idx >= 0) {
-        this.attachedElements.splice(idx, 1);
-        this.recycleElement(element);
-        this.emit(TrackEvent.ElementDetached, element);
+    try {
+      // detach from a single element
+      if (element) {
+        detachTrack(this._mediaStreamTrack, element);
+        const idx = this.attachedElements.indexOf(element);
+        if (idx >= 0) {
+          this.attachedElements.splice(idx, 1);
+          this.recycleElement(element);
+          this.emit(TrackEvent.ElementDetached, element);
+        }
+        return element;
       }
-      return element;
-    }
 
-    const detached: HTMLMediaElement[] = [];
-    this.attachedElements.forEach((elm) => {
-      detachTrack(this._mediaStreamTrack, elm);
-      detached.push(elm);
-      this.recycleElement(elm);
-      this.emit(TrackEvent.ElementDetached, elm);
-    });
+      const detached: HTMLMediaElement[] = [];
+      this.attachedElements.forEach((elm) => {
+        detachTrack(this._mediaStreamTrack, elm);
+        detached.push(elm);
+        this.recycleElement(elm);
+        this.emit(TrackEvent.ElementDetached, elm);
+      });
 
-    // remove all tracks
-    this.attachedElements = [];
-    return detached;
+      // remove all tracks
+      this.attachedElements = [];
+      return detached;
+    } finally {
+      if (this.attachedElements.length === 0) {
+        this.removeAppVisibilityListener();
+      }
+    }
   }
 
   stop() {
     this.stopMonitor();
     this._mediaStreamTrack.stop();
-    if (isWeb()) {
-      document.removeEventListener('visibilitychange', this.appVisibilityChangedListener);
-    }
   }
 
   protected enable() {
@@ -212,7 +212,7 @@ export abstract class Track extends (EventEmitter as new () => TypedEventEmitter
   abstract startMonitor(signalClient?: SignalClient): void;
 
   /* @internal */
-  protected stopMonitor() {
+  stopMonitor() {
     if (this.monitorInterval) {
       clearInterval(this.monitorInterval);
     }
@@ -253,6 +253,21 @@ export abstract class Track extends (EventEmitter as new () => TypedEventEmitter
   protected async handleAppVisibilityChanged() {
     this.isInBackground = document.visibilityState === 'hidden';
   }
+
+  protected addAppVisibilityListener() {
+    if (isWeb()) {
+      this.isInBackground = document.visibilityState === 'hidden';
+      document.addEventListener('visibilitychange', this.appVisibilityChangedListener);
+    } else {
+      this.isInBackground = false;
+    }
+  }
+
+  protected removeAppVisibilityListener() {
+    if (isWeb()) {
+      document.removeEventListener('visibilitychange', this.appVisibilityChangedListener);
+    }
+  }
 }
 
 /** @internal */

package/src/room/types.ts

@@ -20,3 +20,9 @@ export type DataPublishOptions = {
   /** the topic under which the message gets published */
   topic?: string;
 };
+
+export type LiveKitReactNativeInfo = {
+  // Corresponds to RN's PlatformOSType
+  platform: 'ios' | 'android' | 'windows' | 'macos' | 'web' | 'native';
+  devicePixelRatio: number;
+};

package/src/room/utils.ts

@@ -4,6 +4,7 @@ import { protocolVersion, version } from '../version';
 import type LocalAudioTrack from './track/LocalAudioTrack';
 import type RemoteAudioTrack from './track/RemoteAudioTrack';
 import { getNewAudioContext } from './track/utils';
+import type { LiveKitReactNativeInfo } from './types';
 
 const separator = '|';
 
@@ -122,6 +123,54 @@ export function isWeb(): boolean {
   return typeof document !== 'undefined';
 }
 
+export function isReactNative(): boolean {
+  // navigator.product is deprecated on browsers, but will be set appropriately for react-native.
+  return navigator.product == 'ReactNative';
+}
+
+export function isCloud(serverUrl: URL) {
+  return serverUrl.hostname.endsWith('.livekit.cloud');
+}
+
+function getLKReactNativeInfo(): LiveKitReactNativeInfo | undefined {
+  // global defined only for ReactNative.
+  // @ts-ignore
+  if (global && global.LiveKitReactNativeGlobal) {
+    // @ts-ignore
+    return global.LiveKitReactNativeGlobal as LiveKitReactNativeInfo;
+  }
+
+  return undefined;
+}
+
+export function getReactNativeOs(): string | undefined {
+  if (!isReactNative()) {
+    return undefined;
+  }
+
+  let info = getLKReactNativeInfo();
+  if (info) {
+    return info.platform;
+  }
+
+  return undefined;
+}
+
+export function getDevicePixelRatio(): number {
+  if (isWeb()) {
+    return window.devicePixelRatio;
+  }
+
+  if (isReactNative()) {
+    let info = getLKReactNativeInfo();
+    if (info) {
+      return info.devicePixelRatio;
+    }
+  }
+
+  return 1;
+}
+
 export function compareVersions(v1: string, v2: string): number {
   const parts1 = v1.split('.');
   const parts2 = v2.split('.');
@@ -174,6 +223,10 @@ export function getClientInfo(): ClientInfo {
     protocol: protocolVersion,
     version,
   });
+
+  if (isReactNative()) {
+    info.os = getReactNativeOs() ?? '';
+  }
   return info;
 }