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

A React Native UI for @theoplayer/react-native

import { ActionButton } from './actionbutton/ActionButton';
import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
import { PlayerContext } from '../util/PlayerContext';
import { ForwardSvg } from './svg/ForwardSvg';
import { Animated, Easing, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import { BackwardSvg } from './svg/BackwardSvg';
import { PlayerEventType } from 'react-native-theoplayer';
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
/**
 * The default skip button for the `react-native-theoplayer` UI.
 */
export function SkipButton(props) {
  const {
    style,
    skip,
    rotate,
    icon,
    textStyle
  } = props;
  const spinValue = useRef(new Animated.Value(0)).current;
  const {
    player
  } = useContext(PlayerContext);
  const spin = spinValue.interpolate({
    inputRange: [0, 1],
    outputRange: skip >= 0 ? ['0deg', '360deg'] : ['360deg', '0deg']
  });
  const [enabled, setEnabled] = useState(false);
  useEffect(() => {
    const onUpdateEnabled = () => {
      setEnabled(player.seekable.length > 0 || player.buffered.length > 0);
    };
    const onPlaying = () => {
      const isCasting = player.cast.chromecast?.casting ?? false;
      setEnabled(player.seekable.length > 0 || player.buffered.length > 0 || isCasting);
    };
    player.addEventListener([PlayerEventType.PROGRESS, PlayerEventType.SOURCE_CHANGE], onUpdateEnabled);
    player.addEventListener(PlayerEventType.PLAYING, onPlaying);
    return () => {
      player.removeEventListener([PlayerEventType.PROGRESS, PlayerEventType.SOURCE_CHANGE], onUpdateEnabled);
      player.removeEventListener(PlayerEventType.PLAYING, onPlaying);
    };
  }, [player]);
  const onPress = useCallback(() => {
    player.currentTime = player.currentTime + skip * 1e3;
    if (rotate === true) {
      Animated.timing(spinValue, {
        toValue: 0.1,
        duration: 900,
        easing: Easing.linear,
        useNativeDriver: true
      }).start(() => {
        Animated.timing(spinValue, {
          toValue: 0,
          duration: 100,
          easing: Easing.linear,
          useNativeDriver: true
        }).start();
      });
    }
  }, [player, skip, rotate, spinValue]);
  const forwardSvg = icon?.forward ?? /*#__PURE__*/_jsx(ForwardSvg, {});
  const backwardSvg = icon?.backward ?? /*#__PURE__*/_jsx(BackwardSvg, {});
  if (!enabled) {
    return /*#__PURE__*/_jsx(_Fragment, {});
  }
  return /*#__PURE__*/_jsx(PlayerContext.Consumer, {
    children: context => /*#__PURE__*/_jsx(Animated.View, {
      style: [{
        height: '100%',
        aspectRatio: 1
      }, style, {
        transform: [{
          rotate: spin
        }]
      }],
      children: /*#__PURE__*/_jsxs(TouchableOpacity, {
        activeOpacity: rotate === true ? 1 : 0.2,
        style: [{
          height: '100%',
          aspectRatio: 1,
          justifyContent: 'center'
        }, style],
        testID: props.testID,
        onPress: () => {
          onPress();
          context.ui.onUserAction_();
        },
        children: [/*#__PURE__*/_jsx(ActionButton, {
          touchable: false,
          svg: skip < 0 ? backwardSvg : forwardSvg
        }), /*#__PURE__*/_jsx(View, {
          style: [StyleSheet.absoluteFill, {
            justifyContent: 'center'
          }],
          children: /*#__PURE__*/_jsx(Text, {
            style: [context.style.text, {
              color: context.style.colors.text
            }, textStyle],
            children: Math.abs(skip)
          })
        })]
      })
    })
  });
}
//# sourceMappingURL=SkipButton.js.map