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

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

import * as React from 'react';
import { StyleSheet, Text } from 'react-native';
import { useHMSRoomStyleSheet } from '../hooks-util';
import { useSelector } from 'react-redux';
export const HLSStreamStartedTime = ({
  prefix
}) => {
  const streamStartedTime = 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.startedAt;
  });
  const [streamStartedBeforeMillis, setStreamStartedBeforeMillis] = React.useState(0);
  React.useEffect(() => {
    if (streamStartedTime) {
      const beforeMilliSecs = Date.now() - streamStartedTime.getTime();
      setStreamStartedBeforeMillis(beforeMilliSecs);
      const intervalId = setInterval(() => {
        setStreamStartedBeforeMillis(secs => {
          secs += 1000;
          return secs;
        });
      }, 1000);
      return () => {
        clearInterval(intervalId);
      };
    }
  }, [streamStartedTime]);
  const hmsRoomStyles = useHMSRoomStyleSheet((theme, typography) => ({
    regularSurfaceMedium: {
      fontFamily: `${typography.font_family}-Regular`,
      color: theme.palette.on_surface_medium
    }
  }));
  if (!streamStartedTime) {
    return null;
  }
  const {
    h,
    min,
    sec
  } = msToTime(streamStartedBeforeMillis);
  return /*#__PURE__*/React.createElement(React.Fragment, null, prefix, /*#__PURE__*/React.createElement(Text, {
    style: [styles.subtitle, hmsRoomStyles.regularSurfaceMedium]
  }, "Started ", h > 0 ? `${h} h` : min > 0 ? `${min} min` : `${sec} sec`, " ago"));
};
const styles = StyleSheet.create({
  subtitle: {
    fontSize: 12,
    lineHeight: 16
  }
});
function msToTime(duration) {
  return {
    ms: duration,
    sec: Math.floor(duration / 1000),
    min: Math.floor(duration / 1000 / 60),
    h: Math.floor(duration / 1000 / 60 / 60)
  };
}
//# sourceMappingURL=HLSStreamStartedTime.js.map