@theoplayer/react-native-ui
Version:
A React Native UI for @theoplayer/react-native
111 lines (110 loc) • 5.13 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.SeekBar = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _PlayerContext = require("../util/PlayerContext");
var _reactNativeSlider = require("@miblanchard/react-native-slider");
var _barrel = require("../../hooks/barrel");
var _SingleThumbnailView = require("./thumbnail/SingleThumbnailView");
var _useSliderTime = require("./useSliderTime");
var _TestIDs = require("../../utils/TestIDs");
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 delay in milliseconds before an actual seek is executed while scrubbing the SeekBar.
*/
const DEBOUNCE_SEEK_DELAY = 250;
const renderThumbnailView = (isScrubbing, scrubberTime, seekBarWidth) => {
return isScrubbing && scrubberTime !== undefined && /*#__PURE__*/(0, _jsxRuntime.jsx)(_SingleThumbnailView.SingleThumbnailView, {
currentTime: scrubberTime,
seekBarWidth: seekBarWidth
});
};
const SeekBar = props => {
const {
onScrubbing,
renderAboveThumbComponent: customRenderAboveThumbComponent
} = props;
const {
player
} = (0, _react.useContext)(_PlayerContext.PlayerContext);
const [isScrubbing, setIsScrubbing] = (0, _react.useState)(false);
const [scrubberTime, setScrubberTime] = (0, _react.useState)(undefined);
const [width, setWidth] = (0, _react.useState)(0);
const duration = (0, _barrel.useDuration)();
const seekable = (0, _barrel.useSeekable)();
const sliderTime = (0, _useSliderTime.useSliderTime)();
const chapters = (0, _barrel.useChaptersTrack)();
const chapterMarkerTimes = chapters?.cues?.map(cue => cue.endTime).slice(0, -1) ?? [];
// Do not continuously seek while dragging the slider
const debounceSeek = (0, _barrel.useDebounce)(value => {
player.currentTime = value;
}, DEBOUNCE_SEEK_DELAY);
const onSlidingStart = value => {
setIsScrubbing(true);
debounceSeek(value[0]);
};
const onSlidingValueChange = value => {
if (isScrubbing) {
if (onScrubbing) onScrubbing(value[0]);
setScrubberTime(value[0]);
debounceSeek(value[0]);
}
};
const onSlidingComplete = value => {
setScrubberTime(undefined);
if (onScrubbing) onScrubbing(undefined);
setIsScrubbing(false);
debounceSeek(value[0], true);
};
const normalizedDuration = isNaN(duration) || !isFinite(duration) ? 0 : Math.max(0, duration);
const seekableRange = {
start: seekable.length > 0 ? seekable[0].start : 0,
end: seekable.length > 0 ? seekable[seekable.length - 1].end : normalizedDuration
};
const renderAboveThumbComponent = (_index, value) => {
if (customRenderAboveThumbComponent) {
return customRenderAboveThumbComponent(isScrubbing, value, width);
}
return renderThumbnailView(isScrubbing, value, width);
};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_PlayerContext.PlayerContext.Consumer, {
children: context => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: [props.style ?? {
flex: 1
}],
testID: props.testID ?? _TestIDs.TestIDs.SEEK_BAR,
onLayout: event => {
setWidth(event.nativeEvent.layout.width);
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNativeSlider.Slider, {
disabled: !(duration > 0) && seekable.length > 0 || context.adInProgress,
minimumValue: seekableRange.start,
maximumValue: seekableRange.end,
containerStyle: props.sliderContainerStyle ?? {
marginHorizontal: 8
},
minimumTrackStyle: props.sliderMinimumTrackStyle ?? {},
maximumTrackStyle: props.sliderMaximumTrackStyle ?? {},
step: 1000,
renderAboveThumbComponent: renderAboveThumbComponent,
onSlidingStart: onSlidingStart,
onValueChange: onSlidingValueChange,
onSlidingComplete: onSlidingComplete,
value: isScrubbing && scrubberTime !== undefined ? scrubberTime : sliderTime,
minimumTrackTintColor: context.style.colors.seekBarMinimum,
maximumTrackTintColor: context.style.colors.seekBarMaximum,
thumbTintColor: context.style.colors.seekBarDot,
thumbStyle: _reactNative.StyleSheet.flatten(props.thumbStyle),
thumbTouchSize: props.thumbTouchSize,
renderTrackMarkComponent: chapterMarkerTimes.length ? props.chapterMarkers : undefined,
trackMarks: chapterMarkerTimes
})
})
});
};
exports.SeekBar = SeekBar;
//# sourceMappingURL=SeekBar.js.map