@livekit/react-native 2.0.1 → 2.1.0-0

package/src/components/VideoTrack.tsx

@@ -0,0 +1,150 @@
+import * as React from 'react';
+
+import { LayoutChangeEvent, StyleSheet, View, ViewStyle } from 'react-native';
+import {
+  ElementInfo,
+  LocalVideoTrack,
+  Track,
+  TrackEvent,
+} from 'livekit-client';
+import { RTCView } from '@livekit/react-native-webrtc';
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { RemoteVideoTrack } from 'livekit-client';
+import ViewPortDetector from './ViewPortDetector';
+import type { TrackReference } from '@livekit/components-react';
+
+export type VideoTrackProps = {
+  trackRef: TrackReference | undefined;
+  style?: ViewStyle;
+  objectFit?: 'cover' | 'contain' | undefined;
+  mirror?: boolean;
+  zOrder?: number;
+};
+
+export const VideoTrack = ({
+  style = {},
+  trackRef,
+  objectFit = 'cover',
+  zOrder,
+  mirror,
+}: VideoTrackProps) => {
+  const [elementInfo] = useState(() => {
+    let info = new VideoTrackElementInfo();
+    info.id = trackRef?.publication?.trackSid;
+    return info;
+  });
+
+  const layoutOnChange = useCallback(
+    (event: LayoutChangeEvent) => elementInfo.onLayout(event),
+    [elementInfo]
+  );
+  const visibilityOnChange = useCallback(
+    (isVisible: boolean) => elementInfo.onVisibility(isVisible),
+    [elementInfo]
+  );
+
+  const videoTrack = trackRef?.publication.track;
+
+  const shouldObserveVisibility = useMemo(() => {
+    return (
+      videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream
+    );
+  }, [videoTrack]);
+
+  const [mediaStream, setMediaStream] = useState(videoTrack?.mediaStream);
+  useEffect(() => {
+    setMediaStream(videoTrack?.mediaStream);
+    if (videoTrack instanceof LocalVideoTrack) {
+      const onRestarted = (track: Track | null) => {
+        setMediaStream(track?.mediaStream);
+      };
+      videoTrack.on(TrackEvent.Restarted, onRestarted);
+
+      return () => {
+        videoTrack.off(TrackEvent.Restarted, onRestarted);
+      };
+    } else {
+      return () => {};
+    }
+  }, [videoTrack]);
+
+  useEffect(() => {
+    if (videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream) {
+      videoTrack?.observeElementInfo(elementInfo);
+      return () => {
+        videoTrack?.stopObservingElementInfo(elementInfo);
+      };
+    } else {
+      return () => {};
+    }
+  }, [videoTrack, elementInfo]);
+
+  return (
+    <View style={{ ...style, ...styles.container }} onLayout={layoutOnChange}>
+      <ViewPortDetector
+        onChange={visibilityOnChange}
+        style={styles.videoTrack}
+        disabled={!shouldObserveVisibility}
+        propKey={videoTrack}
+      >
+        <RTCView
+          style={styles.videoTrack}
+          streamURL={mediaStream?.toURL() ?? ''}
+          objectFit={objectFit}
+          zOrder={zOrder}
+          mirror={mirror}
+        />
+      </ViewPortDetector>
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {},
+  videoTrack: {
+    flex: 1,
+    width: '100%',
+  },
+});
+
+class VideoTrackElementInfo implements ElementInfo {
+  element: object = {};
+  something?: any;
+  id?: string;
+  _width = 0;
+  _height = 0;
+  _observing = false;
+  visible: boolean = true;
+  visibilityChangedAt: number | undefined;
+  pictureInPicture = false;
+  handleResize?: (() => void) | undefined;
+  handleVisibilityChanged?: (() => void) | undefined;
+  width = () => this._width;
+  height = () => this._height;
+
+  observe(): void {
+    this._observing = true;
+  }
+  stopObserving(): void {
+    this._observing = false;
+  }
+
+  onLayout(event: LayoutChangeEvent) {
+    let { width, height } = event.nativeEvent.layout;
+    this._width = width;
+    this._height = height;
+
+    if (this._observing) {
+      this.handleResize?.();
+    }
+  }
+  onVisibility(isVisible: boolean) {
+    if (this.visible !== isVisible) {
+      this.visible = isVisible;
+      this.visibilityChangedAt = Date.now();
+      if (this._observing) {
+        this.handleVisibilityChanged?.();
+      }
+    }
+  }
+}

package/src/components/VideoView.tsx

@@ -9,10 +9,13 @@ import {
   VideoTrack,
 } from 'livekit-client';
 import { RTCView } from '@livekit/react-native-webrtc';
-import { useEffect, useState } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { RemoteVideoTrack } from 'livekit-client';
 import ViewPortDetector from './ViewPortDetector';
 
+/**
+ * @deprecated use `VideoTrack` and `VideoTrackProps` instead.
+ */
 export type Props = {
   videoTrack?: VideoTrack | undefined;
   style?: ViewStyle;
@@ -21,6 +24,9 @@ export type Props = {
   zOrder?: number;
 };
 
+/**
+ * @deprecated use `VideoTrack` and `VideoTrackProps` instead.
+ */
 export const VideoView = ({
   style = {},
   videoTrack,
@@ -35,6 +41,20 @@ export const VideoView = ({
     return info;
   });
 
+  const layoutOnChange = useCallback(
+    (event: LayoutChangeEvent) => elementInfo.onLayout(event),
+    [elementInfo]
+  );
+  const visibilityOnChange = useCallback(
+    (isVisible: boolean) => elementInfo.onVisibility(isVisible),
+    [elementInfo]
+  );
+  const shouldObserveVisibility = useMemo(() => {
+    return (
+      videoTrack instanceof RemoteVideoTrack && videoTrack.isAdaptiveStream
+    );
+  }, [videoTrack]);
+
   const [mediaStream, setMediaStream] = useState(videoTrack?.mediaStream);
   useEffect(() => {
     setMediaStream(videoTrack?.mediaStream);
@@ -64,22 +84,15 @@ export const VideoView = ({
   }, [videoTrack, elementInfo]);
 
   return (
-    <View
-      style={{ ...style, ...styles.container }}
-      onLayout={(event) => {
-        elementInfo.onLayout(event);
-      }}
-    >
+    <View style={{ ...style, ...styles.container }} onLayout={layoutOnChange}>
       <ViewPortDetector
-        onChange={(isVisible: boolean) => elementInfo.onVisibility(isVisible)}
+        onChange={visibilityOnChange}
         style={styles.videoView}
+        disabled={!shouldObserveVisibility}
+        propKey={videoTrack}
       >
         <RTCView
-          // eslint-disable-next-line react-native/no-inline-styles
-          style={{
-            flex: 1,
-            width: '100%',
-          }}
+          style={styles.videoView}
           streamURL={mediaStream?.toURL() ?? ''}
           objectFit={objectFit}
           zOrder={zOrder}

package/src/components/ViewPortDetector.tsx

@@ -1,15 +1,61 @@
 'use strict';
 
 import React, { Component, PropsWithChildren } from 'react';
-import { View, ViewStyle } from 'react-native';
+import {
+  AppState,
+  AppStateStatus,
+  NativeEventSubscription,
+  View,
+  ViewStyle,
+} from 'react-native';
+
+const DEFAULT_DELAY = 1000;
 
 export type Props = {
   disabled?: boolean;
   style?: ViewStyle;
   onChange?: (isVisible: boolean) => void;
   delay?: number;
+  propKey?: any;
 };
 
+class TimeoutHandler {
+  private handlerRef: { id: any } = { id: -1 };
+
+  get handler(): any {
+    return this.handlerRef.id;
+  }
+  set handler(n: any) {
+    this.handlerRef.id = n;
+  }
+
+  clear() {
+    clearTimeout(this.handlerRef.id as any);
+  }
+}
+
+function setIntervalWithTimeout(
+  callback: (clear: () => void) => any,
+  intervalMs: number,
+  handleWrapper = new TimeoutHandler()
+): TimeoutHandler {
+  let cleared = false;
+
+  const timeout = () => {
+    handleWrapper.handler = setTimeout(() => {
+      callback(() => {
+        cleared = true;
+        handleWrapper.clear();
+      });
+      if (!cleared) {
+        timeout();
+      }
+    }, intervalMs);
+  };
+  timeout();
+  return handleWrapper;
+}
+
 /**
  * Detects when this is in the viewport and visible.
  *
@@ -19,8 +65,10 @@ export default class ViewPortDetector extends Component<
   PropsWithChildren<Props>
 > {
   private lastValue: boolean | null = null;
-  private interval: any | null = null;
+  private interval: TimeoutHandler | null = null;
   private view: View | null = null;
+  private lastAppStateActive = false;
+  private appStateSubscription: NativeEventSubscription | null = null;
 
   constructor(props: Props) {
     super(props);
@@ -28,43 +76,84 @@ export default class ViewPortDetector extends Component<
   }
 
   componentDidMount() {
-    if (!this.props.disabled) {
+    this.lastAppStateActive = AppState.currentState === 'active';
+    this.appStateSubscription = AppState.addEventListener(
+      'change',
+      this.handleAppStateChange
+    );
+    if (this.hasValidTimeout(this.props.disabled, this.props.delay)) {
       this.startWatching();
     }
   }
 
   componentWillUnmount() {
+    this.appStateSubscription?.remove();
+    this.appStateSubscription = null;
     this.stopWatching();
   }
 
+  hasValidTimeout = (disabled?: boolean, delay?: number): boolean => {
+    let disabledValue = disabled ?? false;
+    let delayValue = delay ?? DEFAULT_DELAY;
+    return (
+      AppState.currentState === 'active' && !disabledValue && delayValue > 0
+    );
+  };
+
   UNSAFE_componentWillReceiveProps(nextProps: Props) {
-    if (nextProps.disabled) {
+    if (!this.hasValidTimeout(nextProps.disabled, nextProps.delay)) {
       this.stopWatching();
     } else {
-      this.lastValue = null;
+      if (this.props.propKey !== nextProps.propKey) {
+        this.lastValue = null;
+      }
       this.startWatching();
     }
   }
+  handleAppStateChange = (nextAppState: AppStateStatus) => {
+    let nextAppStateActive = nextAppState === 'active';
+    if (this.lastAppStateActive !== nextAppStateActive) {
+      this.checkVisibility();
+    }
+    this.lastAppStateActive = nextAppStateActive;
 
-  private startWatching() {
+    if (!this.hasValidTimeout(this.props.disabled, this.props.delay)) {
+      this.stopWatching();
+    } else {
+      this.startWatching();
+    }
+  };
+
+  startWatching = () => {
     if (this.interval) {
       return;
     }
-    this.interval = setInterval(() => {
-      if (!this.view) {
-        return;
-      }
-      this.view.measure((_x, _y, width, height, _pageX, _pageY) => {
-        this.checkInViewPort(width, height);
-      });
-    }, this.props.delay || 100);
-  }
+    this.interval = setIntervalWithTimeout(
+      this.checkVisibility,
+      this.props.delay || DEFAULT_DELAY
+    );
+  };
 
-  private stopWatching() {
-    this.interval = clearInterval(this.interval);
-  }
+  stopWatching = () => {
+    this.interval?.clear();
+    this.interval = null;
+  };
 
-  private checkInViewPort(width?: number, height?: number) {
+  checkVisibility = () => {
+    if (!this.view) {
+      return;
+    }
+
+    if (AppState.currentState !== 'active') {
+      this.updateVisibility(false);
+      return;
+    }
+
+    this.view.measure((_x, _y, width, height, _pageX, _pageY) => {
+      this.checkInViewPort(width, height);
+    });
+  };
+  checkInViewPort = (width?: number, height?: number) => {
     let isVisible: boolean;
     // Not visible if any of these are missing.
     if (!width || !height) {
@@ -72,13 +161,15 @@ export default class ViewPortDetector extends Component<
     } else {
       isVisible = true;
     }
+    this.updateVisibility(isVisible);
+  };
 
+  updateVisibility = (isVisible: boolean) => {
     if (this.lastValue !== isVisible) {
       this.lastValue = isVisible;
       this.props.onChange?.(isVisible);
     }
-  }
-
+  };
   render() {
     return (
       <View

package/src/hooks.ts

@@ -0,0 +1,40 @@
+export {
+  useConnectionState,
+  useDataChannel,
+  useIsSpeaking,
+  useLocalParticipant,
+  UseLocalParticipantOptions,
+  useLocalParticipantPermissions,
+  useParticipantInfo,
+  UseParticipantInfoOptions,
+  useParticipants,
+  UseParticipantsOptions,
+  useRemoteParticipants,
+  UseRemoteParticipantOptions,
+  useRemoteParticipant,
+  UseRemoteParticipantsOptions,
+  useSpeakingParticipants,
+  useSortedParticipants,
+  useChat,
+  useIsEncrypted,
+  useIsMuted,
+  useParticipantTracks,
+  useLiveKitRoom,
+  RoomContext,
+  useRoomContext,
+  ParticipantContext,
+  useParticipantContext,
+  TrackRefContext,
+  useTrackRefContext,
+  useTracks,
+  UseTracksOptions,
+  TrackReference,
+  TrackReferenceOrPlaceholder,
+  isTrackReference,
+  useEnsureTrackRef,
+  useTrackMutedIndicator,
+  useVisualStableUpdate,
+  UseVisualStableUpdateOptions,
+} from '@livekit/components-react';
+
+export { ReceivedDataMessage } from '@livekit/components-core';

package/src/index.tsx

@@ -74,10 +74,12 @@ function shimIterator() {
   var shim = require('well-known-symbols/Symbol.iterator/shim');
   shim();
 }
-
-export * from './components/VideoView';
-export * from './useParticipant';
-export * from './useRoom';
+export * from './hooks';
+export * from './components/LiveKitRoom';
+export * from './components/VideoTrack';
+export * from './components/VideoView'; // deprecated
+export * from './useParticipant'; // deprecated
+export * from './useRoom'; // deprecated
 export * from './logger';
 export * from './audio/AudioManager';
 

package/src/useParticipant.ts

@@ -8,6 +8,7 @@ import {
 } from 'livekit-client';
 import { useEffect, useState } from 'react';
 
+/** @deprecated use `useRemoteParticipant` or `useLocalParticipant` instead */
 export interface ParticipantState {
   isSpeaking: boolean;
   connectionQuality: ConnectionQuality;
@@ -19,7 +20,7 @@ export interface ParticipantState {
   microphonePublication?: TrackPublication;
   screenSharePublication?: TrackPublication;
 }
-
+/** @deprecated use `useRemoteParticipant` or `useLocalParticipant` instead */
 export function useParticipant(participant: Participant): ParticipantState {
   const [isAudioMuted, setAudioMuted] = useState(false);
   const [, setVideoMuted] = useState(false);

package/src/useRoom.ts

@@ -23,6 +23,7 @@ export interface RoomOptions {
   sortParticipants?: (participants: Participant[]) => void;
 }
 
+/** @deprecated wrap your components in a <LiveKitRoom> component instead and use more granular hooks to track state you're interested in */
 export function useRoom(room: Room, options?: RoomOptions): RoomState {
   const [error] = useState<Error>();
   const [participants, setParticipants] = useState<Participant[]>([]);

package/android/local.properties

@@ -1,8 +0,0 @@
-## This file must *NOT* be checked into Version Control Systems,
-# as it contains information specific to your local configuration.
-#
-# Location of the SDK. This is only used by Gradle.
-# For customization when using a Version Control System, please read the
-# header note.
-#Mon Jan 23 20:31:14 JST 2023
-sdk.dir=/Users/davidliu/Library/Android/sdk

package/ios/LivekitReactNative.xcodeproj/project.xcworkspace/contents.xcworkspacedata

@@ -1,7 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<Workspace
-   version = "1.0">
-   <FileRef
-      location = "self:">
-   </FileRef>
-</Workspace>

package/ios/LivekitReactNative.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>IDEDidComputeMac32BitWarning</key>
-	<true/>
-</dict>
-</plist>

package/ios/LivekitReactNative.xcodeproj/xcuserdata/davidliu.xcuserdatad/xcschemes/xcschememanagement.plist

@@ -1,14 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE plist PUBLIC "-//Apple//DTD PLIST 1.0//EN" "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
-<plist version="1.0">
-<dict>
-	<key>SchemeUserState</key>
-	<dict>
-		<key>LivekitReactNative.xcscheme_^#shared#^_</key>
-		<dict>
-			<key>orderHint</key>
-			<integer>0</integer>
-		</dict>
-	</dict>
-</dict>
-</plist>