cobrowse-sdk-react-native 2.15.0 → 2.17.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/build.gradle

@@ -30,5 +30,5 @@ android {
 
 dependencies {
     implementation 'com.facebook.react:react-native:+' // support react-native-v0.22-rc+
-    implementation 'io.cobrowse:cobrowse-sdk-android:2.25.1'
+    implementation 'io.cobrowse:cobrowse-sdk-android:2.28.1'
 }

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

@@ -79,6 +79,32 @@ 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 webviewRedactedViews(ReadableArray redactionSelectors) {
+    String[] redactionSelectorsArray = new String[redactionSelectors.size()];
+    for (int i = 0; i < redactionSelectors.size(); i++) {
+      try {
+        redactionSelectorsArray[i] = redactionSelectors.getString(i);
+      } catch (UnexpectedNativeTypeException e) {
+        Log.w("CobrowseIO", "Failed to process webviewRedactedViews: " + e.getMessage());
+      }
+    }
+    CobrowseIO.instance().webviewRedactedViews(redactionSelectorsArray);
+  }
+
   @ReactMethod
   public void deviceToken(String token) {
     if (getReactApplicationContext().getCurrentActivity() != null)
@@ -240,4 +266,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/cobrowse-sdk-react-native.podspec

@@ -11,7 +11,7 @@ Pod::Spec.new do |s|
   s.homepage      = package["homepage"]
   s.source        = { :git => 'https://github.com/cobrowseio/cobrowse-sdk-react-native.git' }
   s.platform      = :ios, '11.0'
-  s.dependency      'CobrowseIO/XCFramework', '2.25.0'
+  s.dependency      'CobrowseIO/XCFramework', '2.28.1'
   s.dependency      'React'
   s.source_files =  'ios/*.{h,m}'
 end

package/ios/RCTCobrowseIO.m

@@ -161,6 +161,14 @@ RCT_EXPORT_METHOD(customData: (NSDictionary*) customData) {
     CobrowseIO.instance.customData = customData;
 }
 
+RCT_EXPORT_METHOD(capabilities: (NSArray*) capabilities) {
+    CobrowseIO.instance.capabilities = capabilities;
+}
+
+RCT_EXPORT_METHOD(webviewRedactedViews: (NSArray*) redactionSelectors) {
+    CobrowseIO.instance.webviewRedactedViews = redactionSelectors;
+}
+
 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,161 @@
+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 webviewRedactedViews (redactionSelectors: string[]) {
+    CobrowseIONative.webviewRedactedViews(redactionSelectors)
+  }
+
+  // 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
+  }
+}