@theoplayer/react-native-ui/lib/module/ui/components/button/GoToLiveButton.js

A React Native UI for @theoplayer/react-native

import React, { useCallback, useContext } from 'react';
import { PlayerContext } from '../util/PlayerContext';
import { ActionButton } from './actionbutton/ActionButton';
import { useCurrentTime, useDuration, useSeekable } from '../../hooks/barrel';
import { isAtLive, isLiveDuration } from '../util/LiveUtils';
import { Text, View } from 'react-native';
import { TestIDs } from '../../utils/TestIDs';
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * The default go to live button for the `react-native-theoplayer` UI.
 */
export function GoToLiveButton(props) {
  const context = useContext(PlayerContext);
  const {
    style,
    textStyle,
    atLiveColor = context.style.colors.liveIndicatorAtLiveEdge,
    behindLiveColor = context.style.colors.liveIndicatorBehindLiveEdge
  } = props;
  const duration = useDuration();
  const currentTime = useCurrentTime();
  const seekable = useSeekable();
  const goToLive = useCallback(() => {
    context.player.currentTime = Infinity;
  }, [context.player]);
  const liveIndicatorColor = isAtLive(duration, currentTime, seekable) ? atLiveColor : behindLiveColor;
  if (isNaN(duration) || !isLiveDuration(duration)) {
    return /*#__PURE__*/_jsx(_Fragment, {});
  }
  return /*#__PURE__*/_jsx(ActionButton, {
    style: [props.style, {
      justifyContent: 'center',
      aspectRatio: 1.5
    }, style],
    testID: props.testID ?? TestIDs.GO_TO_LIVE_BUTTON,
    onPress: goToLive,
    touchable: true,
    children: /*#__PURE__*/_jsxs(View, {
      style: {
        flexDirection: 'row',
        alignItems: 'center'
      },
      children: [/*#__PURE__*/_jsx(Text, {
        style: [context.style.text, {
          color: liveIndicatorColor,
          marginRight: 6
        }],
        children: "\u25CF"
      }), /*#__PURE__*/_jsx(Text, {
        style: [context.style.text, {
          color: context.style.colors.text
        }, textStyle],
        children: context.locale.liveLabel
      })]
    })
  });
}
//# sourceMappingURL=GoToLiveButton.js.map