"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.SeekBar = SeekBar;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_native_1 = require("react-native");
const react_native_gesture_handler_1 = require("react-native-gesture-handler");
const player_store_1 = require("../../../player-store");
const TRACK_HEIGHT = 3;
const THUMB_SIZE = 14;
const TOUCH_HEIGHT = 16;
// Native VOD scrub bar. The old implementation leaned on @rn-primitives/slider
// driven by web pointer events (onPointerUp/onPointerEnter), which never fire
// on Android — so it didn't scrub and its tall internal layout floated the bar
// toward the middle. This is a plain gesture-handler Pan/Tap over a measured
// track: drag updates a local scrub position, release commits via seekTo (which
// drives the native player through the store).
function SeekBar() {
    const mode = (0, player_store_1.usePlayerStore)((x) => x.mode);
    const playTime = (0, player_store_1.usePlayerStore)((x) => x.playTime);
    const duration = (0, player_store_1.usePlayerStore)((x) => x.duration);
    const bufferedEnd = (0, player_store_1.usePlayerStore)((x) => x.bufferedEnd);
    const seekTo = (0, player_store_1.usePlayerStore)((x) => x.seekTo);
    const [trackWidth, setTrackWidth] = (0, react_1.useState)(0);
    const [scrubbing, setScrubbing] = (0, react_1.useState)(false);
    const [scrubTime, setScrubTime] = (0, react_1.useState)(0);
    if (mode !== "vod" || duration <= 0) {
        return null;
    }
    const timeAt = (x) => {
        if (trackWidth <= 0)
            return 0;
        const clamped = Math.max(0, Math.min(trackWidth, x));
        return (clamped / trackWidth) * duration;
    };
    const pan = react_native_gesture_handler_1.Gesture.Pan()
        .runOnJS(true)
        .onBegin((e) => {
        setScrubbing(true);
        setScrubTime(timeAt(e.x));
    })
        .onUpdate((e) => {
        setScrubTime(timeAt(e.x));
    })
        .onEnd((e) => {
        seekTo(timeAt(e.x));
    })
        .onFinalize(() => {
        setScrubbing(false);
    });
    const tap = react_native_gesture_handler_1.Gesture.Tap()
        .runOnJS(true)
        .onEnd((e) => {
        seekTo(timeAt(e.x));
    });
    const gesture = react_native_gesture_handler_1.Gesture.Race(pan, tap);
    const current = scrubbing ? scrubTime : playTime;
    const progressPct = Math.max(0, Math.min(1, current / duration)) * 100;
    const bufferedPct = Math.max(0, Math.min(1, bufferedEnd / duration)) * 100;
    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { paddingHorizontal: 16, paddingTop: 2, marginBottom: -2 }, children: (0, jsx_runtime_1.jsx)(react_native_gesture_handler_1.GestureDetector, { gesture: gesture, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { onLayout: (e) => setTrackWidth(e.nativeEvent.layout.width), style: { height: TOUCH_HEIGHT, justifyContent: "center" }, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
                            height: TRACK_HEIGHT,
                            borderRadius: 999,
                            backgroundColor: "rgba(255,255,255,0.25)",
                        }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
                                    position: "absolute",
                                    top: 0,
                                    bottom: 0,
                                    left: 0,
                                    width: `${bufferedPct}%`,
                                    borderRadius: 999,
                                    backgroundColor: "rgba(255,255,255,0.4)",
                                } }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
                                    position: "absolute",
                                    top: 0,
                                    bottom: 0,
                                    left: 0,
                                    width: `${progressPct}%`,
                                    borderRadius: 999,
                                    backgroundColor: "#fff",
                                } })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: {
                            position: "absolute",
                            left: `${progressPct}%`,
                            marginLeft: -THUMB_SIZE / 2,
                            width: THUMB_SIZE,
                            height: THUMB_SIZE,
                            borderRadius: THUMB_SIZE / 2,
                            backgroundColor: "#fff",
                        } })] }) }) }));
}
//# sourceMappingURL=seek-bar.js.map