@100mslive/react-native-room-kit/lib/module/components/HLSClosedCaptionControl.js

100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.

import React, { useRef, useState } from 'react';
import { StyleSheet, TouchableOpacity } from 'react-native';
import { useSelector } from 'react-redux';
import { useHMSHLSPlayerPlaybackState, HMSHLSPlayerPlaybackState } from '@100mslive/react-native-hms';
import { GestureDetector, Gesture } from 'react-native-gesture-handler';
import { CCIcon } from '../Icons';
import { useIsHLSStreamingOn } from '../hooks-sdk';
export const _HLSClosedCaptionControl = ({
  playerRef,
  onPress
}) => {
  const isHLSStreamingOn = useIsHLSStreamingOn();
  const isStreamUrlPresent = 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 && _state$hmsStates$room.hlsStreamUrl);
  });
  let startedPlayingFirstTimeRef = useRef(false);
  let prevPlaybackStateRef = useRef(HMSHLSPlayerPlaybackState.UNKNOWN);
  const playbackState = useHMSHLSPlayerPlaybackState();
  if (prevPlaybackStateRef.current === HMSHLSPlayerPlaybackState.UNKNOWN && playbackState === HMSHLSPlayerPlaybackState.PLAYING) {
    prevPlaybackStateRef.current = playbackState;
    startedPlayingFirstTimeRef.current = true;
  }
  const [isCCSupported, setIsCCSupported] = useState(false);
  const [isCCEnabled, setIsCCEnabled] = useState(true);
  const handleCCBtnPress = () => {
    if (!isCCSupported || !playerRef.current) {
      return;
    }
    onPress === null || onPress === void 0 || onPress();
    if (isCCEnabled) {
      playerRef.current.disableClosedCaption();
      setIsCCEnabled(false);
    } else {
      playerRef.current.enableClosedCaption();
      setIsCCEnabled(true);
    }
  };
  React.useEffect(() => {
    if (isHLSStreamingOn && isStreamUrlPresent && startedPlayingFirstTimeRef.current && playerRef.current) {
      let mounted = true;
      playerRef.current.isClosedCaptionSupported().then(supported => {
        if (mounted) {
          setIsCCSupported(supported);
        }
      }).catch(() => {});
      playerRef.current.isClosedCaptionEnabled().then(enabled => {
        if (mounted) {
          setIsCCEnabled(enabled);
        }
      }).catch(() => {});
      return () => {
        mounted = false;
      };
    }
  }, [isHLSStreamingOn, isStreamUrlPresent, startedPlayingFirstTimeRef.current]);
  if (!isCCSupported) {
    return null;
  }
  return /*#__PURE__*/React.createElement(GestureDetector, {
    gesture: Gesture.Tap()
  }, /*#__PURE__*/React.createElement(TouchableOpacity, {
    onPress: handleCCBtnPress,
    style: [styles.icon, styles.gap]
  }, /*#__PURE__*/React.createElement(CCIcon, {
    size: "medium",
    enabled: isCCEnabled
  })));
};
export const HLSClosedCaptionControl = /*#__PURE__*/React.memo(_HLSClosedCaptionControl);
const styles = StyleSheet.create({
  detectorContainer: {
    position: 'absolute',
    width: '100%',
    height: '100%',
    zIndex: 5
  },
  container: {
    flex: 1,
    justifyContent: 'space-between'
  },
  controlsRow: {
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginHorizontal: 8
  },
  normalRow: {
    flexDirection: 'row',
    alignItems: 'center'
  },
  icon: {
    padding: 4,
    alignSelf: 'flex-start'
  },
  gap: {
    marginLeft: 16
  }
});
//# sourceMappingURL=HLSClosedCaptionControl.js.map