classon-react-native

classon react native sdk

Table of Contents

1. Install
2. Usage
3. Components
4. API
5. Example

Install

• classon react native is reuqired, install by running:

npm install @classon/react-native --save

or

yarn add @classon/react-native

• For IOS install by running :

npx pod-install

Note that you need to save the key into file info.plist

NSURLIsExcludedFromBackupKey

(IOS only): The NSURLIsExcludedFromBackupKey property can be provided to set this attribute on iOS platforms. Apple will reject apps for storing offline cache data that does not have this attribute.

Note: The classon-react-native package uses several other library packages to build and support such as:

• react-natie-video
• react-native-webview
• react-native-sound
• react-native-svg
• react-native-reanimated
• react-native-fs
• @shopify/react-native-skia
• react-native-gesture-handler
• react-native-keyboard-aware-scroll-view
• react-native-fast-image
• @babel/plugin-proposal-export-namespace-from

So during the integration and testing process, if any errors arise, please check if the above packages are installed in the project or not. If not, please install the required package and try again.

Usage

Basic

A simple usage:

import { ClassOn } from '@classon/react-native';

<ClassOn
  classId={classId}
  token={token}
  live={true}
  user={user}
/>

Custom view

Customize the display view Example

import { ClassonPlayer, Connection } from '@classon/react-native';

// Some components are only visible in the teacher role: 
import { ClassState, AgendaCurriculum, ScriptAction, ClassControl, ClassInfo } from '@classon/react-native';

<View style={styles.container}>
  {isTeacher && live && (
    <View style={styles.vControl}>
      <ClassState isTeacher={isTeacher} live={live} />
      <ClassControl />
      <ClassInfo />
    </View>
  )}

  <KeyboardAwareScrollView
    contentContainerStyle={{ width: '100%', height: '100%' }}
    scrollEnabled={false}
    nestedScrollEnabled
  >
    <View style={styles.vRow}>
      <View style={{ width: '100%', height: '100%' }}>
        <View style={styles.container}>
          {live ? (
            <Connection classId={classId} token={token} conferenceType={0}>
              <ClassonPlayer classId={classId} token={token} live={true} user={user} />
            </Connection>
          ) : (
            <ClassonPlayer classId={classId} token={token} user={user} />
          )}
        </View>

        {isTeacher && live && (
          <View>
            <AgendaCurriculum live={live} />
          </View>
        )}

        {isTeacher && live && <ScriptAction />}
      </View>
    </View>
  </KeyboardAwareScrollView>
</View>

Components

- ClassOn

Default component of sdk. It contains full control buttons and status displays for learning and teaching.

Name	Description	Type
classId (required)	ID of the lesson or class	string
token (required)	Is the application token to connect to the socket server	string
user (required)	User information	Object ({id: number, role: string, fullname?:string})
live (required)	Set class status online or offline	Boolean

- Connection

It is a necessary component to connect when studying online.

Name	Description	Type
classId (required)	ID of the lesson or class	string
token (required)	Is the application token to connect to the socket server	string
conferenceType (required)	Use the conference type for classes	number (0: no conference, 1: bluesea conference )
children (required)	Is a child component wrapped by Connection. It is ClassonPlayer	JSX.Element

- ClassonPlayer

The component displays the status interface waiting for data processing and lesson display.

Name	Description	Type
classId (required)	ID of the lesson or class	string
token (required)	Is the application token to connect to the socket server	string
user (required)	User information	Object ({id: number, role: string, fullname?:string})
render (optional)	Render progress component while waiting for the data to completed	JSX.Element
live (optional)	Set class status online or offline	Boolean

- BlueseaConference

The component displays a conference call between class members.

Name	Description	Type
horizontal (optional)	List displays horizontally or vertically	Boolean
onlyAudio (optional)	Allow only audio, no video	Boolean
containerStyles (optional)	A style object that allow you to customize the BlueseaView container style	ViewStyle
listContainerStyle (optional)	A style object that allow you to customize list container style	ViewStyle
itemStyles (optional)	Customize view video item	BlueseaItemProps
renderBlueseaItem (optional)	Customize view video item conference	JSX.Element
renderBluseaView (optional)	Customize video conference container	JSX.Element

- #BlueseaItemProps

Name	Description	Type
itemContainerStyle (optional)	Style object to customize item container	ViewStyle
videoStyle (optional)	Style object to customize video item view	ViewStyle

- ClassState

The component displays the status of the class.

Name	Description	Type
containerStyles	Style object to customize container view	ViewStyle
buttonStyles	Style object to customize button	ViewStyle
logoStyles	Style object to customize logo	Boolean
isTeacher	Set teacher or student	Boolean
live	Class status online or offline	Boolean
logo	Customize logo	ImageRequireSource

- ClassControl

The component displays controls for the teacher in the classroom.

Name	Description	Type
containerStyles	Style object to customize container view	ViewStyle
buttonStyles	Style object to customize button	ViewStyle
iconStyles	Style object to customize icon	ViewStyle
volumeStyles	Style object to customize volume view	VolumeProps)

- #VolumeProps

Name	Description	Type
viewContent	Style object to customize container view	ViewStyle
volumeIcon	Customize volume icon	ImageRequireSource
iconStyles	Style object to customize icon	ViewStyle
sliderStyles	Style object to customize volume view	MultiSliderProps

- ClassInfo

The component displays class information

Name	Description	Type
containerStyles	Style object to customize container view	ViewStyle
placement	Where to position the tooltip	top, bottom, left, right, center
render (optional)	Customize class info view	JSX.Element

- AgendaCurriculum

The component displays the classroom curriculum.

Name	Description	Type
containerStyles	Style object to customize container view	ViewStyle
labelButtonStyles	Style object to customize button label	ViewStyle
buttonStyles	Style object to customize button	ViewStyle
agendaItemStyles	Style object to customize item view	ItemProps
live	Class status online or offline	Boolean
render	Customize agenda/curriculum view	JSX.Element

API

Action type

Name	Description
LoadingProcess	The process of downloading lesson data
LoadingComplete	The process of downloadig lesson data is completed
LoadingError	Error message while downloading lesson data
LoadingRetry	Reload lesson data failed
StartClassroom	Start the lesson
FinishClassroom	End of lesson

Methods

• Call to reload file that failed during data download

pubsubClient.publish('control', { type: ActionClientType.LoadingRetry });

• Call to start the lesson

pubsubClient.publish('control', { type: ActionClientType.StartClassroom }); // Offline

pubsub.publish('general', { type: ActionType.StartClass, payload: { action: 'request' } }); // Online

• Call when next/previous page the lesson

pubsub.publish('general', { type: 'next-page' }); // next page

pubsub.publish('general', { type: 'prev-page' }); // previous page

pubsub.publish('general', { type: 'jump-page', payload: { sectionId, pageId }}); // jump page

• Call to skip downloading file when trying to download the file many times and still has an error message

pubsubClient.publish('load-source', { type: ActionClientType.LoadingIgnore, payload: { url: string }});

Events listen

• Data download progress

useEffect(() => {
  const fnc = (a: ActionClient) => { 
    switch(a.type){
      case ActionClientType.LoadingProcess
      //TODO Loading...
      // a.payload: {
      //   url: string;
      //   process: number;
      // }
      break;

      case ActionClientType.LoadingComplete:
      //TODO Complete
      // a.payload: {}
      break;

      case ActionClientType.LoadingError:
      //TODO Error: You can call the method LoadingRetry or LoadingIgnore
      // a.payload: {
      //   url: string;
      //   process: number;
      //   message?: string;
      // }
      break;
    }
  };

  const subscription = pubsubClient.subscribe('load-source', fnc);

  return subscription.unsubscribe;
}, []);

• Listen at the end of the lesson

useEffect(() => {
  const fnc = (a: ActionClient) => {
    if (a.type === ActionClientType.FinishClassroom) {
      //TODO
    }
  };

  const subscriptionControl = pubsubClient.subscribe('control', fnc);

  return subscriptionControl.unsubscribe;
}, []);

• Listen at the ready to start class

useEffect(() => {
  const fnc = (action: Action) => {
    if (action.type !== ActionType.ReadyToStart) {
      return;
    }
    if (action.payload.action === 'response') {
      // ready to start
    }
  
    if (action.payload.action === 'error') {
      Alert.alert('Error', action.payload.message);
      return;
    }
  };
  
  pubsub.subscribe('general', fnc);
  
  return () => {
    pubsub.unsubscribe('general', fnc);
  };
}, []);

Fix issues

• zmxv/react-native-sound#799 (comment)

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT

---

Commit Lint:

https://github.com/conventional-changelog/commitlint/#what-is-commitlint