@100mslive/react-native-room-kit
Version:
100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.
136 lines (134 loc) • 8.46 kB
JavaScript
import { useEffect, useMemo } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { HMSTrackSource, HMSUpdateListenerActions } from '@100mslive/react-native-hms';
import { ModalTypes } from './types';
import { addLeaderboard, setRTCStats } from '../redux/actions';
import { useHMSInstance } from '../hooks-util';
export const useRTCStatsListeners = () => {
const dispatch = useDispatch();
const hmsInstance = useSelector(state => state.user.hmsInstance);
const addListeners = useSelector(state => state.app.joinConfig.showStats || state.app.modalType === ModalTypes.RTC_STATS);
useEffect(() => {
if (hmsInstance && addListeners) {
hmsInstance.addEventListener(HMSUpdateListenerActions.ON_LOCAL_AUDIO_STATS, data => {
const audioStatId = data.track.source && data.track.source !== HMSTrackSource.REGULAR ? data.peer.peerID + data.track.source : data.peer.peerID;
// Saving Audio Track Stats by "peerId" plus "track source" if source is not regular
dispatch(setRTCStats(audioStatId, data.localAudioStats));
});
hmsInstance.addEventListener(HMSUpdateListenerActions.ON_LOCAL_VIDEO_STATS, data => {
dispatch(setRTCStats(data.track.trackId, data.localVideoStats));
});
hmsInstance.addEventListener(HMSUpdateListenerActions.ON_REMOTE_AUDIO_STATS, data => {
const audioStatId = data.track.source && data.track.source !== HMSTrackSource.REGULAR ? data.peer.peerID + data.track.source : data.peer.peerID;
// Saving Audio Track Stats by "peerId" plus "track source" if source is not regular
dispatch(setRTCStats(audioStatId, data.remoteAudioStats));
});
hmsInstance.addEventListener(HMSUpdateListenerActions.ON_REMOTE_VIDEO_STATS, data => {
dispatch(setRTCStats(data.track.trackId, data.remoteVideoStats));
});
return () => {
hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_LOCAL_AUDIO_STATS);
hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_LOCAL_VIDEO_STATS);
hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_REMOTE_AUDIO_STATS);
hmsInstance.removeEventListener(HMSUpdateListenerActions.ON_REMOTE_VIDEO_STATS);
};
}
}, [hmsInstance, addListeners]);
};
export const useFetchLeaderboardResponse = pollId => {
const dispatch = useDispatch();
const hmsInstance = useHMSInstance();
const localPeerPollInitiator = useSelector(state => {
var _state$hmsStates$loca, _state$polls$polls$po;
if (!pollId) return null;
const localPeerUserId = (_state$hmsStates$loca = state.hmsStates.localPeer) === null || _state$hmsStates$loca === void 0 ? void 0 : _state$hmsStates$loca.customerUserID;
const pollInitiatorUserID = (_state$polls$polls$po = state.polls.polls[pollId]) === null || _state$polls$polls$po === void 0 || (_state$polls$polls$po = _state$polls$polls$po.createdBy) === null || _state$polls$polls$po === void 0 ? void 0 : _state$polls$polls$po.customerUserID;
return localPeerUserId && pollInitiatorUserID && localPeerUserId === pollInitiatorUserID;
});
const leaderboardData = useSelector(state => {
if (!pollId) return null;
return state.polls.leaderboards[pollId] || null;
});
const leaderboardDataExist = !!leaderboardData;
useEffect(() => {
if (!!leaderboardData) return;
let mounted = true;
async function fetchLeaderboard() {
if (pollId) {
const response = await hmsInstance.interactivityCenter.fetchLeaderboard(pollId, 5, 1,
// Indexing starts from 1
!localPeerPollInitiator // fetchCurrentUser only if user is voter, and not poll initiator
);
if (mounted) {
dispatch(addLeaderboard(pollId, response));
}
}
}
fetchLeaderboard();
return () => {
mounted = false;
};
}, [pollId, leaderboardDataExist, localPeerPollInitiator]);
return leaderboardData;
};
export const useLeaderboardSummaryData = pollId => {
const localPeerUserId = useSelector(state => {
var _state$hmsStates$loca2;
return (_state$hmsStates$loca2 = state.hmsStates.localPeer) === null || _state$hmsStates$loca2 === void 0 ? void 0 : _state$hmsStates$loca2.customerUserID;
});
const localPeerPollInitiator = useSelector(state => {
var _state$polls$polls$po2;
if (!pollId) return null;
const pollInitiatorUserID = (_state$polls$polls$po2 = state.polls.polls[pollId]) === null || _state$polls$polls$po2 === void 0 || (_state$polls$polls$po2 = _state$polls$polls$po2.createdBy) === null || _state$polls$polls$po2 === void 0 ? void 0 : _state$polls$polls$po2.customerUserID;
return localPeerUserId && pollInitiatorUserID && localPeerUserId === pollInitiatorUserID;
});
const leaderboardData = useSelector(state => {
if (!pollId) return null;
return state.polls.leaderboards[pollId] || null;
});
const pollQuestionsLength = useSelector(state => {
var _state$polls$polls$po3;
if (!pollId) return null;
return (_state$polls$polls$po3 = state.polls.polls[pollId]) === null || _state$polls$polls$po3 === void 0 || (_state$polls$polls$po3 = _state$polls$polls$po3.questions) === null || _state$polls$polls$po3 === void 0 ? void 0 : _state$polls$polls$po3.length;
});
const leaderboardSummary = leaderboardData === null || leaderboardData === void 0 ? void 0 : leaderboardData.summary;
const pollInitiatorSummaryData = useMemo(() => {
if (!localPeerPollInitiator) {
return null;
}
return [[{
label: 'ANSWERED',
value: leaderboardSummary && typeof leaderboardSummary.respondedPeersCount === 'number' && typeof leaderboardSummary.totalPeersCount === 'number' ? `${Math.round(leaderboardSummary.respondedPeersCount / leaderboardSummary.totalPeersCount * 100)}% (${leaderboardSummary.respondedPeersCount}/${leaderboardSummary.totalPeersCount})` : '-'
}, {
label: 'CORRECT ANSWERS',
value: leaderboardSummary && typeof leaderboardSummary.respondedCorrectlyPeersCount === 'number' && typeof leaderboardSummary.totalPeersCount === 'number' ? `${Math.round(leaderboardSummary.respondedCorrectlyPeersCount / (leaderboardSummary === null || leaderboardSummary === void 0 ? void 0 : leaderboardSummary.totalPeersCount) * 100)}% (${leaderboardSummary.respondedCorrectlyPeersCount}/${leaderboardSummary.totalPeersCount})` : '-'
}], [{
label: 'AVG. TIME TAKEN',
value: leaderboardSummary && typeof leaderboardSummary.averageTime === 'number' ? `${(leaderboardSummary.averageTime / 1000).toFixed(2)}s` : '-' // averageTime is in milliseconds
}, {
label: 'AVG. SCORE',
value: leaderboardSummary && typeof leaderboardSummary.averageScore === 'number' ? leaderboardSummary.averageScore.toFixed(2) : '-'
}]];
}, [leaderboardSummary, localPeerPollInitiator]);
const localLeaderboardEntry = localPeerUserId && leaderboardData && Array.isArray(leaderboardData.entries) ? leaderboardData.entries.find(entry => {
var _entry$peer;
return ((_entry$peer = entry.peer) === null || _entry$peer === void 0 ? void 0 : _entry$peer.customerUserId) === localPeerUserId;
}) : null;
const voterSummaryData = useMemo(() => {
return [[{
label: 'YOUR RANK',
value: localLeaderboardEntry && typeof localLeaderboardEntry.totalResponses === 'number' && leaderboardSummary && typeof leaderboardSummary.totalPeersCount === 'number' ? `${localLeaderboardEntry.position}/${leaderboardSummary.totalPeersCount}` : '-'
}, {
label: 'CORRECT ANSWERS',
value: localLeaderboardEntry && typeof localLeaderboardEntry.correctResponses === 'number' && typeof pollQuestionsLength === 'number' ? `${Math.round(localLeaderboardEntry.correctResponses / pollQuestionsLength * 100)}% (${localLeaderboardEntry.correctResponses}/${pollQuestionsLength})` : '-'
}], [{
label: 'TIME TAKEN',
value: localLeaderboardEntry && typeof localLeaderboardEntry.duration === 'number' ? `${(localLeaderboardEntry.duration / 1000).toFixed(2)}s` : '-'
}, {
label: 'YOUR POINTS',
value: localLeaderboardEntry && typeof localLeaderboardEntry.score === 'number' ? localLeaderboardEntry.score : '-'
}]];
}, [localLeaderboardEntry, leaderboardSummary === null || leaderboardSummary === void 0 ? void 0 : leaderboardSummary.totalPeersCount]);
return localPeerPollInitiator ? pollInitiatorSummaryData : voterSummaryData ? voterSummaryData : null;
};
//# sourceMappingURL=hooks.js.map