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

A React Native UI for @theoplayer/react-native

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.SkipButton = SkipButton;
var _ActionButton = require("./actionbutton/ActionButton");
var _react = _interopRequireWildcard(require("react"));
var _PlayerContext = require("../util/PlayerContext");
var _ForwardSvg = require("./svg/ForwardSvg");
var _reactNative = require("react-native");
var _BackwardSvg = require("./svg/BackwardSvg");
var _useSeekable = require("../../hooks/useSeekable");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
const ANIMATION_DURATION_MSEC = 100;

/**
 * The default skip button for the `react-native-theoplayer` UI.
 */
function SkipButton(props) {
  const {
    style,
    skip,
    rotate,
    icon,
    textStyle
  } = props;
  const spinValue = (0, _react.useRef)(new _reactNative.Animated.Value(0)).current;
  const {
    player,
    ui,
    style: uiStyle
  } = (0, _react.useContext)(_PlayerContext.PlayerContext);
  const seekable = (0, _useSeekable.useSeekable)();
  const spin = spinValue.interpolate({
    inputRange: [0, 1],
    outputRange: skip >= 0 ? ['0deg', '360deg'] : ['360deg', '0deg']
  });
  const doSkip = (0, _react.useCallback)(() => {
    player.currentTime = player.currentTime + skip * 1e3;
    if (rotate === true) {
      _reactNative.Animated.timing(spinValue, {
        toValue: 0.1,
        duration: ANIMATION_DURATION_MSEC,
        easing: _reactNative.Easing.linear,
        useNativeDriver: true
      }).start(() => {
        _reactNative.Animated.timing(spinValue, {
          toValue: 0,
          duration: ANIMATION_DURATION_MSEC,
          easing: _reactNative.Easing.linear,
          useNativeDriver: true
        }).start();
      });
    }
  }, [player, skip, rotate, spinValue]);
  const forwardSvg = icon?.forward ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ForwardSvg.ForwardSvg, {});
  const backwardSvg = icon?.backward ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_BackwardSvg.BackwardSvg, {});
  if (seekable.length === 0) {
    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
  }
  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
    style: [{
      height: '100%',
      aspectRatio: 1
    }, style, {
      transform: [{
        rotate: spin
      }]
    }],
    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionButton.ActionButton, {
      activeOpacity: rotate === true ? 1 : 0.2,
      style: [{
        height: '100%',
        aspectRatio: 1,
        justifyContent: 'center'
      }, style],
      testID: props.testID,
      svg: skip < 0 ? backwardSvg : forwardSvg,
      onPress: () => {
        doSkip();
        ui.onUserAction_();
      },
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
        style: [_reactNative.StyleSheet.absoluteFill, {
          justifyContent: 'center'
        }],
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
          style: [uiStyle.text, {
            color: uiStyle.colors.text
          }, textStyle],
          children: Math.abs(skip)
        })
      })
    })
  });
}
//# sourceMappingURL=SkipButton.js.map