@theoplayer/react-native-ui
Version:
A React Native UI for @theoplayer/react-native
92 lines (91 loc) • 2.72 kB
JavaScript
import { ActionButton } from './actionbutton/ActionButton';
import React, { useCallback, useContext, useRef } from 'react';
import { PlayerContext } from '../util/PlayerContext';
import { ForwardSvg } from './svg/ForwardSvg';
import { Animated, Easing, StyleSheet, Text, View } from 'react-native';
import { BackwardSvg } from './svg/BackwardSvg';
import { useSeekable } from '../../hooks/useSeekable';
import { jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
const ANIMATION_DURATION_MSEC = 100;
/**
* 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,
ui,
style: uiStyle
} = useContext(PlayerContext);
const seekable = useSeekable();
const spin = spinValue.interpolate({
inputRange: [0, 1],
outputRange: skip >= 0 ? ['0deg', '360deg'] : ['360deg', '0deg']
});
const doSkip = useCallback(() => {
player.currentTime = player.currentTime + skip * 1e3;
if (rotate === true) {
Animated.timing(spinValue, {
toValue: 0.1,
duration: ANIMATION_DURATION_MSEC,
easing: Easing.linear,
useNativeDriver: true
}).start(() => {
Animated.timing(spinValue, {
toValue: 0,
duration: ANIMATION_DURATION_MSEC,
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 (seekable.length === 0) {
return /*#__PURE__*/_jsx(_Fragment, {});
}
return /*#__PURE__*/_jsx(Animated.View, {
style: [{
height: '100%',
aspectRatio: 1
}, style, {
transform: [{
rotate: spin
}]
}],
children: /*#__PURE__*/_jsx(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__*/_jsx(View, {
style: [StyleSheet.absoluteFill, {
justifyContent: 'center'
}],
children: /*#__PURE__*/_jsx(Text, {
style: [uiStyle.text, {
color: uiStyle.colors.text
}, textStyle],
children: Math.abs(skip)
})
})
})
});
}
//# sourceMappingURL=SkipButton.js.map