react-native-classroom
Version:
React Native Class room
390 lines (358 loc) • 9.98 kB
JavaScript
import React, { Component } from 'react';
import { Alert, Platform } from 'react-native';
import { WebView } from 'react-native-webview';
import RNFS from 'react-native-fs';
import {
urlWithPlatform,
onLoad,
postEkpMessageToWeb,
} from '../common/Helpers';
import SoundManager from './SoundManager';
class WebviewComponent extends Component {
constructor(props) {
super(props);
this.state = {
renderedOnce: false,
serverType: 'vidu',
conferenceConfig: null,
roomName: '',
};
}
handleMessage = (event) => {
// console.log('onMessage', event.nativeEvent.data);
const { contentLoaded, classId, refConference, logInfo } = this.props;
const { connectConference, isObserve, onPaused } = this.props;
const { setModeCamera, firstConnectConference, refRecorder } = this.props;
const { clearConference, studentId, onFinishActivity } = this.props;
if (!event || !event.nativeEvent) {
return;
}
const { data } = event.nativeEvent;
if (typeof data === 'undefined' || data === null) {
return;
}
let obEvent;
try {
obEvent = JSON.parse(event.nativeEvent.data);
} catch (e) {
obEvent = null;
}
if (!obEvent) {
return;
}
const localLink = obEvent.url;
switch (obEvent.type) {
case 'EKP_GET_DATA':
onLoad(this.mWebView, contentLoaded, classId);
break;
case 'EKP_VIDEO_PLAY': {
const { loop = false, volume = 1, currentTime = 0 } = obEvent;
if (localLink) {
SoundManager.play(
localLink,
loop ? -1 : 0,
volume,
this.mWebView,
currentTime,
!!refConference,
logInfo,
);
}
break;
}
case 'EKP_VIDEO_STOP': {
if (localLink) {
SoundManager.stop(localLink, this.mWebView);
}
break;
}
case 'EKP_VIDEO_PAUSE': {
if (localLink) {
SoundManager.pause(localLink);
}
break;
}
case 'EKP_SHOW_SIDEBAR': {
if (!isObserve) {
this.props.showSideBar(obEvent.showSideBar);
}
break;
}
case 'EKP_CONFERENCE': {
const { user } = obEvent;
if (user) {
const { userId } = user;
if (userId && userId !== '' && !isObserve) {
if (userId === studentId) {
if (refConference) {
refConference.OnOffAudioVideo(obEvent.audio, obEvent.video);
}
}
}
}
break;
}
case 'EKP_CONFERENCE_MUTE_ALL': {
if (refConference && !isObserve) {
refConference.ChangeMuteAll(obEvent.audio);
}
break;
}
case 'EKP_ON_BACK': {
const { onBackPress } = this.props;
if (onBackPress) {
onBackPress();
}
break;
}
case 'EKP_FINISH_CLASS': {
const { finishClass } = this.props;
if (finishClass && !isObserve) {
finishClass();
}
break;
}
case 'EVENT_FORCE_RELOAD_WHOLE_PAGE': {
const { user } = obEvent;
if (user && !isObserve) {
const { userId, role } = user;
if (
userId &&
userId !== '' &&
parseInt(userId, 10) === studentId &&
role === 'STUDENT'
) {
if (this.mWebView) {
this.mWebView.reload();
}
}
}
break;
}
case 'EVENT_FORCE_RELOAD_CONFERENCE': {
const { user } = obEvent;
if (user && !isObserve) {
const { userId, role } = user;
if (
userId &&
userId !== '' &&
parseInt(userId, 10) === studentId &&
role === 'STUDENT'
) {
const { reloadConnect } = this.props;
if (reloadConnect) {
reloadConnect();
}
}
}
break;
}
case 'MY_INFORMATION': {
const dataConfig = obEvent.data;
if (dataConfig) {
const { conferenceConfig } = dataConfig;
if (conferenceConfig && firstConnectConference) {
const { server } = conferenceConfig;
this.setState({ conferenceConfig, serverType: server }, () => {
firstConnectConference(conferenceConfig);
});
} else {
Alert.alert('MY INFORMATION', JSON.stringify(conferenceConfig));
}
}
break;
}
case 'REFRESH_CONFERENCE':
break;
case 'CONFERENCE_ERROR':
break;
case 'REFRESH_CONFERENCE_CONFIG': {
const dataConfig = obEvent.data;
if (dataConfig && connectConference) {
const { config } = dataConfig;
const { server } = config;
if (server) {
this.setState({ dataConfig, serverType: server }, () => {
connectConference(config);
});
}
} else {
Alert.alert('Error', JSON.stringify(dataConfig));
}
break;
}
case 'LEAVE_CONFERENCE': {
if (clearConference && !isObserve) {
clearConference();
}
break;
}
// event playback
case 'EKP_PLAYBACK_NEW_CONFERENCE': {
const { onVideo } = this.props;
if (onVideo && obEvent.data.uri) {
onVideo(obEvent.data);
if (this.mWebView) {
this.mWebView.injectJavaScript(
postEkpMessageToWeb(
JSON.stringify({ type: 'EKP_PLAYBACK_PAUSE_CONFERENCE' }),
),
);
}
}
break;
}
case 'EKP_PLAYBACK_PAUSE_SDK':
if (onPaused) {
onPaused();
}
break;
case 'EKP_PLAYBACK_PAUSE':
if (onPaused) {
onPaused();
}
break;
case 'EKP_PLAYBACK_PLAY': {
const { onPlay } = this.props;
if (onPlay) {
onPlay(obEvent.data);
}
break;
}
case 'EVENT_UPDATE_MATERIAL_VOLUME': {
if (obEvent.data && Platform.OS === 'android') {
SoundManager.changeVolume(obEvent.data);
}
break;
}
case 'EVENT_TEACHER_SWITCH_CONFERENCE_MODE': {
if (obEvent.data) {
setModeCamera(obEvent.data.enable);
}
break;
}
// Record
case 'START_RECORD': {
if (refRecorder && !isObserve) {
refRecorder.onStartRecord();
}
break;
}
case 'STOP_RECORD': {
if (refRecorder && !isObserve) {
refRecorder.onStopRecord();
}
break;
}
case 'PLAY_RECORD': {
if (refRecorder && !isObserve) {
refRecorder.onStartPlay(this.mWebView, obEvent.data);
}
break;
}
case 'PAUSE_RECORD': {
if (refRecorder && !isObserve) {
refRecorder.onStopPlay(this.mWebView, obEvent.data);
}
break;
}
case 'SUBMIT_FILE': {
if (refRecorder && !isObserve) {
refRecorder.onSubmitFile(this.mWebView);
}
break;
}
case 'PLAY_SOUND_RECORD': {
if (refRecorder && obEvent.data) {
SoundManager.playSoundRecord(this.mWebView, obEvent.data.url);
}
break;
}
case 'PAUSE_SOUND_RECORD': {
if (refRecorder && obEvent.data) {
SoundManager.pause(obEvent.data.url);
}
break;
}
// Finish activity brown
case 'BROWN_FINISH': {
if (onFinishActivity) {
onFinishActivity();
}
break;
}
case 'BROWN_BACK': {
break;
}
default:
break;
}
};
postMessageToWeb = (message) => {
return `(function() {
window.dispatchEvent(new CustomEvent('ekpData', {detail: ${message}}));
})();`;
};
sendEventRefresh = () => {
if (this.mWebView) {
const refresh = { type: 'EKP_REFRESH_CONFERENCE' };
this.mWebView.injectJavaScript(
this.postMessageToWeb(JSON.stringify(refresh)),
);
}
};
sendRequestBack = () => {
if (this.mWebView) {
const msgBack = { type: 'EKP_REQUEST_BACK' };
this.mWebView.injectJavaScript(
this.postMessageToWeb(JSON.stringify(msgBack)),
);
}
};
render() {
const { urlOff, styles, logInfo } = this.props;
const { renderedOnce } = this.state;
return (
<WebView
style={styles}
ref={(ref) => (this.mWebView = ref)}
bounces={false}
originWhitelist={['*']}
allowsInlineMediaPlayback
mediaPlaybackRequiresUserAction={false}
javaScriptEnabled
scalesPageToFit={false}
allowFileAccess
domStorageEnabled
startInLoadingState
allowingReadAccessToURL={RNFS.DocumentDirectoryPath}
allowUniversalAccessFromFileURLs
allowFileAccessFromFileURLs
mixedContentMode="always"
onContentProcessDidTerminate={() => {
if (this.props.replaceWebview) {
this.props.replaceWebview();
if (logInfo) {
logInfo(200, 'onContentProcessDidTerminate');
}
}
}}
// onError={syntheticEvent => {
// const {nativeEvent} = syntheticEvent;
// logSentry(`onError - ${nativeEvent}`, classId, urlOff);
// }}
// renderError={event =>
// logSentry(`renderError - ${event.nativeEvent}`, classId, urlOff)
// }
source={urlWithPlatform(urlOff, renderedOnce)}
onLoad={() => {
if (Platform.OS === 'android') {
this.setState({ renderedOnce: true });
}
}}
onMessage={(event) => this.handleMessage(event)}
/>
);
}
}
export default WebviewComponent;