cobrowse-sdk-react-native 2.15.0 → 2.16.0

package/.github/workflows/lint.yaml

@@ -18,5 +18,3 @@ jobs:
       - run: npm ci
 
       - run: npm run lint
-
-      - run: npm run test:types

package/android/src/main/java/io/cobrowse/reactnative/CobrowseIOModule.java

@@ -79,6 +79,19 @@ public class CobrowseIOModule extends ReactContextBaseJavaModule {
     CobrowseIO.instance().customData(customData.toHashMap());
   }
 
+  @ReactMethod
+  public void capabilities(ReadableArray capabilities) {
+    String[] capabilitiesArray = new String[capabilities.size()];
+    for (int i = 0; i < capabilities.size(); i++) {
+      try {
+        capabilitiesArray[i] = capabilities.getString(i);
+      } catch (UnexpectedNativeTypeException e) {
+        Log.w("CobrowseIO", "Failed to process capabilities: " + e.getMessage());
+      }
+    }
+    CobrowseIO.instance().capabilities(capabilitiesArray);
+  }
+
   @ReactMethod
   public void deviceToken(String token) {
     if (getReactApplicationContext().getCurrentActivity() != null)
@@ -240,4 +253,14 @@ public class CobrowseIOModule extends ReactContextBaseJavaModule {
 
     CobrowseIO.instance().setDelegate(delegatesWithSessionControls);
   }
+
+  @ReactMethod
+  public void addListener(String eventName) {
+    // Keep: Required for RN built in Event Emitter Calls.
+  }
+
+  @ReactMethod
+  public void removeListeners(Integer count) {
+    // Keep: Required for RN built in Event Emitter Calls.
+  }
 }

package/ios/RCTCobrowseIO.m

@@ -161,6 +161,10 @@ RCT_EXPORT_METHOD(customData: (NSDictionary*) customData) {
     CobrowseIO.instance.customData = customData;
 }
 
+RCT_EXPORT_METHOD(capabilities: (NSArray*) capabilities) {
+    CobrowseIO.instance.capabilities = capabilities;
+}
+
 RCT_EXPORT_METHOD(deviceToken: (NSString*) token) {
     CobrowseIO.instance.device.token = [token dataUsingEncoding:NSUTF16StringEncoding];
 }

package/js/CBIOBroadcastPickerView.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Platform, requireNativeComponent, type ViewProps } from 'react-native'
+
+const CBIOBroadcastPickerViewNativeView = requireNativeComponent(
+  'CBIOBroadcastPickerView'
+)
+
+type CBIOBroadcastPickerViewProps = {
+  buttonColor: string
+} & ViewProps
+
+export default function CBIOBroadcastPickerView (props: CBIOBroadcastPickerViewProps): JSX.Element | null {
+  // this native component is only available on iOS
+  return Platform.OS === 'ios' ? <CBIOBroadcastPickerViewNativeView {...props} /> : null
+}

package/js/CobrowseAccessibilityService.ts

@@ -0,0 +1,15 @@
+import { NativeModules } from 'react-native'
+const CobrowseIONative = NativeModules.CobrowseIO
+
+export function showSetup (): void {
+  return CobrowseIONative.accessibilityServiceShowSetup()
+}
+
+export function isRunning (): boolean {
+  return CobrowseIONative.accessibilityServiceIsRunning()
+}
+
+export default {
+  showSetup,
+  isRunning
+}

package/js/CobrowseIO.ts

@@ -0,0 +1,156 @@
+import { Platform, Alert, NativeEventEmitter, EmitterSubscription, NativeModules } from 'react-native'
+import Session, { type CobrowseSessionEvents, type SessionLike } from './Session'
+const CobrowseIONative = NativeModules.CobrowseIO
+
+const emitter = new NativeEventEmitter(CobrowseIONative)
+
+// eslint-disable-next-line @typescript-eslint/no-extraneous-class
+export default class CobrowseIO {
+  private static sessionRequestShown = false
+  private static remoteControlRequestShown = false
+
+  /** @deprecated */
+  static get SESSION_UPDATED (): 'session.updated' {
+    return 'session.updated' as const
+  }
+
+  /** @deprecated */
+  static get SESSION_ENDED (): 'session.ended' {
+    return 'session.ended' as const
+  }
+
+  static handleSessionRequest (session: Session): void {
+    if (this.sessionRequestShown) return
+    this.sessionRequestShown = true
+    Alert.alert(
+      'Support Request',
+      'A support agent would like to use this app with you. Do you accept?',
+      [{
+        text: 'Reject',
+        onPress: () => {
+          this.sessionRequestShown = false
+          void session.end()
+        },
+        style: 'cancel'
+      }, {
+        text: 'Accept',
+        onPress: () => {
+          this.sessionRequestShown = false
+          void session.activate()
+        }
+      }], { cancelable: false })
+  }
+
+  static handleRemoteControlRequest (session: Session): void {
+    if (this.remoteControlRequestShown) return
+    this.remoteControlRequestShown = true
+    Alert.alert(
+      'Remote Control Request',
+      'A support agent would like to take remote control of this app. Do you accept?',
+      [{
+        text: 'Reject',
+        onPress: () => {
+          this.remoteControlRequestShown = false
+          void session.setRemoteControl('rejected')
+        },
+        style: 'cancel'
+      }, {
+        text: 'Accept',
+        onPress: () => {
+          this.remoteControlRequestShown = false
+          void session.setRemoteControl('on')
+        }
+      }], { cancelable: false })
+  }
+
+  static addListener (event: CobrowseSessionEvents | 'session.requested', cb: (session: Session) => void): EmitterSubscription {
+    return emitter.addListener(event, (session: SessionLike) => cb(new Session(session)))
+  }
+
+  static start (): void {
+    CobrowseIONative.start()
+  }
+
+  static stop (): void {
+    CobrowseIONative.stop()
+  }
+
+  // eslint-disable-next-line accessor-pairs
+  static set api (api: string) {
+    CobrowseIONative.api(api)
+  }
+
+  // eslint-disable-next-line accessor-pairs
+  static set license (license: string) {
+    CobrowseIONative.license(license)
+  }
+
+  // eslint-disable-next-line accessor-pairs
+  static set customData (customData: Record<string, unknown>) {
+    CobrowseIONative.customData(customData)
+  }
+
+  // eslint-disable-next-line accessor-pairs
+  static set capabilities (capabilities: Array<'drawing' | 'full_device' | 'keypress' | 'laser' | 'pointer'>) {
+    CobrowseIONative.capabilities(capabilities)
+  }
+
+  // eslint-disable-next-line accessor-pairs
+  static set deviceToken (token: string) {
+    CobrowseIONative.deviceToken(token)
+  }
+
+  static currentSession (): Session | null {
+    return CobrowseIONative.currentSession().then((session: SessionLike | null) => (session != null) ? new Session(session) : null)
+  }
+
+  static createSession (): Session | null {
+    return CobrowseIONative.createSession().then((session: SessionLike | null) => (session != null) ? new Session(session) : null)
+  }
+
+  static getSession (codeOrId: string): Session | null {
+    return CobrowseIONative.getSession(codeOrId).then((session: SessionLike | null) => (session != null) ? new Session(session) : null)
+  }
+
+  /** @deprecated */
+  static activateSession (): Session | null {
+    return CobrowseIONative.activateSession().then((session: SessionLike | null) => (session != null) ? new Session(session) : null)
+  }
+
+  /** @deprecated */
+  static endSession (): void {
+    return CobrowseIONative.endSession()
+  }
+
+  static showSessionControls: Boolean | null = null
+  static handleFullDeviceRequest: null | ((s: Session) => void) = null
+}
+
+// the session.requested event is considered internal, it should
+// not be used outside these bindings
+CobrowseIO.addListener('session.requested', (session) => {
+  if (CobrowseIO.showSessionControls === false) {
+    CobrowseIONative.overwriteSessionIndicator()
+  }
+
+  if (Platform.OS === 'ios' && (CobrowseIO.handleFullDeviceRequest != null)) {
+    CobrowseIONative.overwriteFullControlUI()
+  }
+
+  CobrowseIO.handleSessionRequest(session)
+})
+
+CobrowseIO.addListener('session.updated', (session) => {
+  if (session.isActive() && session.remote_control === 'requested') {
+    CobrowseIO.handleRemoteControlRequest(session)
+  }
+
+  if (session.isActive() && session.full_device_state === 'requested') {
+    if (CobrowseIO.handleFullDeviceRequest != null) {
+      CobrowseIO.handleFullDeviceRequest(session)
+    } else if (Platform.OS === 'android') {
+      // accept the incoming connection by default
+      void session.setFullDevice('on')
+    }
+  }
+})

package/js/CobrowseView.tsx

@@ -0,0 +1,150 @@
+import React, { Component } from 'react'
+import {
+  View,
+  Text,
+  ActivityIndicator,
+  TouchableOpacity,
+  StyleSheet,
+  EmitterSubscription
+} from 'react-native'
+import CobrowseIO from './CobrowseIO'
+import type Session from './Session'
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'flex-end'
+  },
+  text: {
+    textAlign: 'center',
+    margin: 15,
+    fontSize: 15,
+    lineHeight: 20
+  },
+  code: {
+    fontSize: 29,
+    padding: 20,
+    fontWeight: 'bold',
+    textAlign: 'center'
+  },
+  button: {
+    color: 'rgb(0, 122, 255)',
+    fontSize: 18,
+    margin: 10
+  }
+})
+
+interface CobrowseViewProps {
+  // @deprecated
+  license?: string
+  onEnded?: () => void
+}
+
+interface CobrowseViewState {
+  error: Error | null
+  session: Session | null
+}
+
+export default class CobrowseView extends Component<CobrowseViewProps, CobrowseViewState> {
+  private _updateListener: EmitterSubscription | null = null
+  private _endListener: EmitterSubscription | null = null
+
+  constructor (props: CobrowseViewProps) {
+    super(props)
+    this.state = { error: null, session: null }
+  }
+
+  async componentDidMount (): Promise<void> {
+    if (this.props.license != null) {
+      console.warn('Passing license to view is deprecated. Use CobrowseIO.license = "..." instead')
+      CobrowseIO.license = this.props.license
+    }
+
+    try {
+      const current = await CobrowseIO.currentSession()
+      if (current != null) this.setState({ session: current })
+      else {
+        const session = await CobrowseIO.createSession()
+        this.setState({ session })
+      }
+    } catch (error) {
+      this.setState({ error: error as Error })
+    }
+
+    this._updateListener = CobrowseIO.addListener('session.updated', (session) => {
+      this.setState({ session })
+    })
+    this._endListener = CobrowseIO.addListener('session.ended', () => {
+      if (this.props.onEnded != null) this.props.onEnded()
+      this.setState({ session: null })
+    })
+  }
+
+  componentWillUnmount (): void {
+    if (this._updateListener != null) this._updateListener.remove()
+    if (this._endListener != null) this._endListener.remove()
+  }
+
+  async endSession (): Promise<void> {
+    try {
+      const { session } = this.state
+
+      if (session == null) {
+        throw new Error('No session to end')
+      }
+
+      await session.end()
+      this.setState({ session: null })
+    } catch (error) {
+      this.setState({ error: error as Error })
+    }
+  }
+
+  renderError (error: Error): JSX.Element {
+    return (
+      <Text style={[styles.text]}>{error.message}</Text>
+    )
+  }
+
+  renderCode (): JSX.Element {
+    let code = this.state.session?.code
+    if (code != null) code = code.substr(0, 3) + '-' + code.substr(3)
+    return (
+      <View>
+        <Text style={[styles.code, { opacity: code != null ? 1 : 0.2 }]}>{code ?? '000-000'}</Text>
+        <Text style={[styles.text]}>Provide this code to your support agent to begin screen sharing.</Text>
+        <ActivityIndicator />
+      </View>
+    )
+  }
+
+  renderManageSession (): JSX.Element {
+    return (
+      <View>
+        <Text style={[styles.text]}>You're sharing screens from this app with a support agent.</Text>
+        <TouchableOpacity onPress={() => this.endSession}>
+          <Text style={[styles.text, styles.button]}>End Session</Text>
+        </TouchableOpacity>
+      </View>
+    )
+  }
+
+  renderContent (): JSX.Element {
+    const { error, session } = this.state
+    if (error != null) {
+      return this.renderError(error)
+    } else if ((session == null) || (session.state === 'pending' || session.state === 'authorizing')) {
+      return this.renderCode()
+    } else {
+      return this.renderManageSession()
+    }
+  }
+
+  render (): JSX.Element {
+    return (
+      <View style={styles.container}>
+        {this.renderContent()}
+      </View>
+    )
+  }
+}

package/js/{Redacted.js → Redacted.tsx}

@@ -1,7 +1,8 @@
 import React from 'react'
-import { requireNativeComponent } from 'react-native'
+import { requireNativeComponent, type ViewProps } from 'react-native'
+
 const CBIOCobrowseRedacted = requireNativeComponent('CBIOCobrowseRedacted')
 
-module.exports = function (props) {
+export default function Redacted (props: ViewProps): JSX.Element {
   return <CBIOCobrowseRedacted {...props}>{props.children}</CBIOCobrowseRedacted>
 }

package/js/Session.ts

@@ -0,0 +1,128 @@
+import { EmitterSubscription, NativeEventEmitter, NativeModules } from 'react-native'
+const CobrowseIONative = NativeModules.CobrowseIO
+
+const emitter = new NativeEventEmitter(CobrowseIONative)
+
+export type SessionEvent = 'updated' | 'ended'
+export type CobrowseSessionEvents = `session.${SessionEvent}`
+export type SessionState = 'active' | 'authorizing' | 'ended' | 'pending'
+export type RemoteControlState = 'on' | 'requested' | 'rejected' | 'off'
+export type FullDeviceState = 'on' | 'requested' | 'rejected' | 'off'
+
+export interface Agent {
+  id: string
+  name: string
+}
+
+export interface SessionLike {
+  id: string
+  code: string
+  state: SessionState
+  full_device: boolean
+  remote_control: RemoteControlState
+  agent: Agent
+  full_device_state: FullDeviceState
+}
+
+export default class Session {
+  constructor (private session: SessionLike | Record<string, never> = {}) {
+    this._listen()
+  }
+
+  private _update (session: SessionLike, onMatch?: () => void): void {
+    if (this.session.id === undefined || (session != null && this.session.id === session.id)) {
+      this.session = session
+      if (typeof onMatch === 'function') onMatch()
+    }
+  }
+
+  _listen (): void {
+    const updates = emitter.addListener('session.updated', (session: SessionLike) => this._update(session))
+    const ended = emitter.addListener('session.ended', (session: SessionLike) => {
+      this._update(session, () => {
+        updates.remove()
+        ended.remove()
+      })
+    })
+  }
+
+  addListener (eventType: SessionEvent, listener: (session: Session) => void): EmitterSubscription {
+    let mappedEventsType: CobrowseSessionEvents
+    // TODO: this class should extend EventEmitter and forward
+    //       on the non-namespaced versions of these events
+    switch (eventType) {
+      case 'ended':
+        mappedEventsType = 'session.updated'
+        break
+      case 'updated':
+        mappedEventsType = 'session.ended'
+        break
+    }
+
+    return emitter.addListener(mappedEventsType ?? eventType, (session: SessionLike) => {
+      this._update(session, () => {
+        listener(this)
+      })
+    })
+  }
+
+  get id (): string | null {
+    return this.session.id
+  }
+
+  get code (): string | null {
+    return this.session.code
+  }
+
+  get state (): SessionState | null {
+    return this.session.state
+  }
+
+  get full_device (): boolean {
+    return this.session.full_device ?? false
+  }
+
+  get full_device_state (): FullDeviceState {
+    return this.session.full_device_state ?? 'off'
+  }
+
+  get remote_control (): RemoteControlState | null {
+    return this.session.remote_control
+  }
+
+  get agent (): Agent | null {
+    return this.session.agent
+  }
+
+  async activate (): Promise<void> {
+    return CobrowseIONative.activateSession().then(() => {})
+  }
+
+  async end (): Promise<void> {
+    return CobrowseIONative.endSession()
+  }
+
+  isActive (): boolean {
+    return this.session.state === 'active'
+  }
+
+  isAuthorizing (): boolean {
+    return this.session.state === 'authorizing'
+  }
+
+  isPending (): boolean {
+    return this.session.state === 'pending'
+  }
+
+  isEnded (): boolean {
+    return this.session.state === 'ended'
+  }
+
+  async setFullDevice (state: boolean | FullDeviceState): Promise<void> {
+    return CobrowseIONative.updateSession({ full_device: state })
+  }
+
+  async setRemoteControl (state: RemoteControlState): Promise<void> {
+    return CobrowseIONative.updateSession({ remote_control: state })
+  }
+}

package/js/SessionControl.ts

@@ -0,0 +1,38 @@
+import React, { Component } from 'react'
+import CobrowseIO from './CobrowseIO'
+import type { EmitterSubscription } from 'react-native'
+import type Session from './Session'
+
+interface SessionControlProps {
+  children: React.ReactNode
+}
+
+interface SessionControlState {
+  session: Session | null
+}
+
+export default class SessionControl extends Component<SessionControlProps, SessionControlState> {
+  private _updateListener: EmitterSubscription | null = null
+
+  constructor (props: SessionControlProps) {
+    super(props)
+    this.state = { session: null }
+  }
+
+  async componentDidMount (): Promise<void> {
+    this.setState({ session: await CobrowseIO.currentSession() })
+    this._updateListener = CobrowseIO.addListener(CobrowseIO.SESSION_UPDATED, (session) => {
+      this.setState({ session })
+    })
+  }
+
+  componentWillUnmount (): void {
+    if (this._updateListener != null) this._updateListener.remove()
+  }
+
+  render (): React.ReactNode | null {
+    const { session } = this.state
+    if (session?.isActive() === true) return this.props.children
+    else return null
+  }
+}

package/js/Unredacted.tsx

@@ -0,0 +1,106 @@
+import React, {
+  forwardRef,
+  useMemo,
+  useRef,
+  useCallback,
+  useEffect,
+  Component as ReactComponentType,
+  PropsWithoutRef,
+  type ForwardRefExoticComponent,
+  type RefAttributes,
+  type ComponentClass,
+  type Ref,
+  type PropsWithChildren,
+  type ForwardedRef
+} from 'react'
+import { ScrollView, Text, View, SectionList, FlatList, Image, findNodeHandle, NativeModules } from 'react-native'
+import { throttle } from 'lodash'
+
+const CobrowseIONative = NativeModules.CobrowseIO
+
+type RefHandlingComponent<T, P> =
+  | ComponentClass<P & { ref?: Ref<T> }, any>
+  | ForwardRefExoticComponent<PropsWithChildren<P> & RefAttributes<T>>
+
+function mergeRefs<T> (refs: Array<ForwardedRef<T>>): Ref<T> {
+  return (value) => {
+    refs.forEach((ref) => {
+      if (typeof ref === 'function') {
+        ref(value)
+      } else if (ref != null) {
+        ref.current = value
+      }
+    })
+  }
+}
+
+const unredactedTags = new Set()
+const sendUnredactionUpdates = throttle(() => {
+  CobrowseIONative.setUnredactedTags([...unredactedTags])
+}, 50, { leading: false })
+
+function removeUnredactedView (view: number | null): void {
+  if (view != null) {
+    unredactedTags.delete(view)
+    sendUnredactionUpdates()
+  }
+}
+
+export function useUnredaction<C extends ComponentClass | ReactComponentType = View | ScrollView | Text | Image | FlatList | SectionList> (shouldWarnUnhandledRefs = true, componentName = ''): ForwardedRef<C> {
+  const ref = useRef<number | null>(null)
+
+  const setRef = useCallback((node: C | null) => {
+    let hasRemovedRef = false
+    if (ref.current != null) {
+      hasRemovedRef = true
+      removeUnredactedView(ref.current)
+    }
+
+    if (node != null) {
+      const view = findNodeHandle(node)
+
+      if (view != null) {
+        unredactedTags.add(view)
+        sendUnredactionUpdates()
+
+        ref.current = view
+      } else {
+        console.warn(`Failed to apply unredact() to ${componentName} due to view not found`)
+      }
+    } else if (!hasRemovedRef) {
+      console.warn(
+        `Failed to apply unredact() to ${componentName} due to null node handle – make sure you are forwarding refs`
+      )
+    }
+  }, [])
+
+  useEffect(() => {
+    if (shouldWarnUnhandledRefs && ref.current == null) {
+      console.warn(
+        `Failed to apply unredact() to ${componentName} due to null node handle – make sure the setRef function is called with the ref`
+      )
+    }
+
+    return () => removeUnredactedView(ref.current)
+  }, [])
+
+  return setRef
+}
+
+export function unredact<T, P extends {}> (
+  Component: RefHandlingComponent<T, P>
+): ForwardRefExoticComponent<PropsWithoutRef<P> & RefAttributes<T>> {
+  return forwardRef<T, P>(
+    function ComponentFromHOC (props, ref) {
+      const localRef = useUnredaction(true, Component?.displayName) as ForwardedRef<T>
+      const refs = useMemo(() => mergeRefs([localRef, ref]), [localRef, ref])
+
+      return (
+        <Component {...(props)} ref={refs} />
+      )
+    }
+  )
+}
+
+const Unredacted = unredact(View)
+export default Unredacted

package/js/{index.js → index.ts}

@@ -6,3 +6,4 @@ export { default as SessionControl } from './SessionControl'
 export { default as CobrowseAccessibilityService } from './CobrowseAccessibilityService'
 export { default as CBIOBroadcastPickerView } from './CBIOBroadcastPickerView'
 export { useSession } from './useSession'
+export type { default as Session, CobrowseSessionEvents } from './Session'