@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.
70 lines • 2.89 kB
JavaScript
import React from 'react';
import { View, StyleSheet, TouchableOpacity, Text } from 'react-native';
import { useSelector } from 'react-redux';
import { HMSHLSPlaylistType, useIsHLSStreamLive } from '@100mslive/react-native-hms';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import { useHMSRoomStyleSheet } from '../hooks-util';
import { useIsHLSStreamingOn } from '../hooks-sdk';
export const _HLSGoLiveControl = ({
playerRef,
onPress
}) => {
const isHLSStreamingOn = useIsHLSStreamingOn();
const isDVRStream = useSelector(state => {
var _state$hmsStates$room;
return ((_state$hmsStates$room = state.hmsStates.room) === null || _state$hmsStates$room === void 0 || (_state$hmsStates$room = _state$hmsStates$room.hlsStreamingState.variants) === null || _state$hmsStates$room === void 0 || (_state$hmsStates$room = _state$hmsStates$room[0]) === null || _state$hmsStates$room === void 0 ? void 0 : _state$hmsStates$room.playlistType) === HMSHLSPlaylistType.DVR;
});
const isStreamLive = useIsHLSStreamLive();
const handleGoLivePress = () => {
var _playerRef$current;
onPress === null || onPress === void 0 || onPress();
(_playerRef$current = playerRef.current) === null || _playerRef$current === void 0 || _playerRef$current.seekToLivePosition();
};
const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
semiBoldSurfaceHigh: {
fontFamily: `${typography.font_family}-SemiBold`,
color: theme.palette.on_surface_high
},
semiBoldSurfaceMedium: {
fontFamily: `${typography.font_family}-SemiBold`,
color: theme.palette.on_surface_medium
},
liveIndicatorDot: {
backgroundColor: theme.palette.alert_error_default
},
notLiveIndicatorDot: {
backgroundColor: theme.palette.on_surface_low
}
}), []);
if (!isHLSStreamingOn || !isDVRStream) return null;
return /*#__PURE__*/React.createElement(GestureDetector, {
gesture: Gesture.Tap()
}, /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: handleGoLivePress,
style: styles.liveButton
}, /*#__PURE__*/React.createElement(View, {
style: [styles.liveIndicatorDot, isStreamLive ? hmsRoomStyles.liveIndicatorDot : hmsRoomStyles.notLiveIndicatorDot]
}), /*#__PURE__*/React.createElement(Text, {
style: [styles.liveText, isStreamLive ? hmsRoomStyles.semiBoldSurfaceHigh : hmsRoomStyles.semiBoldSurfaceMedium]
}, isStreamLive ? 'LIVE' : 'GO LIVE')));
};
export const HLSGoLiveControl = /*#__PURE__*/React.memo(_HLSGoLiveControl);
const styles = StyleSheet.create({
liveButton: {
padding: 4,
alignItems: 'center',
flexDirection: 'row'
},
liveIndicatorDot: {
width: 8,
height: 8,
borderRadius: 4,
marginRight: 8
},
liveText: {
fontSize: 16,
lineHeight: 24,
letterSpacing: 0.5
}
});
//# sourceMappingURL=HLSGoLiveControl.js.map