@classon/react-native v0.6.1

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.

- Connection

It is a necessary component to connect when studying online.

- ClassonPlayer

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

- BlueseaConference

The component displays a conference call between class members.

- #BlueseaItemProps

- ClassState

The component displays the status of the class.

- ClassControl

The component displays controls for the teacher in the classroom.

- #VolumeProps

- ClassInfo

The component displays class information

- AgendaCurriculum

The component displays the classroom curriculum.

API

Action type

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

• https://github.com/zmxv/react-native-sound/issues/799#issuecomment-1534340874

• https://github.com/facebook/react-native/issues/43335#issuecomment-1980246463

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