@theoplayer/react-native-ui
Version:
A React Native UI for @theoplayer/react-native
114 lines (113 loc) • 4.8 kB
JavaScript
;
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 _reactNativeTheoplayer = require("react-native-theoplayer");
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); }
/**
* 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
} = (0, _react.useContext)(_PlayerContext.PlayerContext);
const spin = spinValue.interpolate({
inputRange: [0, 1],
outputRange: skip >= 0 ? ['0deg', '360deg'] : ['360deg', '0deg']
});
const [enabled, setEnabled] = (0, _react.useState)(false);
(0, _react.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([_reactNativeTheoplayer.PlayerEventType.PROGRESS, _reactNativeTheoplayer.PlayerEventType.SOURCE_CHANGE], onUpdateEnabled);
player.addEventListener(_reactNativeTheoplayer.PlayerEventType.PLAYING, onPlaying);
return () => {
player.removeEventListener([_reactNativeTheoplayer.PlayerEventType.PROGRESS, _reactNativeTheoplayer.PlayerEventType.SOURCE_CHANGE], onUpdateEnabled);
player.removeEventListener(_reactNativeTheoplayer.PlayerEventType.PLAYING, onPlaying);
};
}, [player]);
const onPress = (0, _react.useCallback)(() => {
player.currentTime = player.currentTime + skip * 1e3;
if (rotate === true) {
_reactNative.Animated.timing(spinValue, {
toValue: 0.1,
duration: 900,
easing: _reactNative.Easing.linear,
useNativeDriver: true
}).start(() => {
_reactNative.Animated.timing(spinValue, {
toValue: 0,
duration: 100,
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 (!enabled) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_jsxRuntime.Fragment, {});
}
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlayerContext.PlayerContext.Consumer, {
children: context => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Animated.View, {
style: [{
height: '100%',
aspectRatio: 1
}, style, {
transform: [{
rotate: spin
}]
}],
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.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__*/(0, _jsxRuntime.jsx)(_ActionButton.ActionButton, {
touchable: false,
svg: skip < 0 ? backwardSvg : forwardSvg
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [_reactNative.StyleSheet.absoluteFill, {
justifyContent: 'center'
}],
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: [context.style.text, {
color: context.style.colors.text
}, textStyle],
children: Math.abs(skip)
})
})]
})
})
});
}
//# sourceMappingURL=SkipButton.js.map