@vime/react/dist/esm/hooks.js

React bindings for the Vime media player.

var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
    return new (P || (P = Promise))(function (resolve, reject) {
        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
        step((generator = generator.apply(thisArg, _arguments || [])).next());
    });
};
import { useCallback, useLayoutEffect, useState } from 'react';
import { createDispatcher, usePlayerContext as useContext, findPlayer, } from '@vime/core';
const noop = () => { };
/**
 * Returns the closest ancestor player to the given `ref`.
 */
export const usePlayer = (ref) => {
    const [player, setPlayer] = useState(null);
    useLayoutEffect(() => {
        function find() {
            var _a;
            return __awaiter(this, void 0, void 0, function* () {
                setPlayer(ref.current ? (_a = (yield findPlayer(ref.current))) !== null && _a !== void 0 ? _a : null : null);
            });
        }
        find();
    }, [ref.current]);
    return player;
};
/**
 * Binds the given `prop` to the closest ancestor player of the given `ref`. When the property
 * changes on the player, this hook will trigger a re-render with the new value.
 *
 * @param ref The ref to start searching from.
 * @param prop The property to bind to.
 * @param defaultValue The initial value of the property until the the player context is bound.
 */
export const usePlayerContext = (ref, prop, defaultValue) => {
    const [value, setValue] = useState(defaultValue);
    const dispatch = useCallback(ref.current === null ? noop : createDispatcher(ref.current), [ref.current]);
    const setter = useCallback(
    // eslint-disable-next-line @typescript-eslint/no-shadow
    (value) => {
        dispatch(prop, value);
    }, [dispatch, prop]);
    useLayoutEffect(() => {
        if (ref.current === null)
            return undefined;
        let cleanup;
        function connect() {
            return __awaiter(this, void 0, void 0, function* () {
                cleanup = yield useContext(ref.current, [prop], (_, newValue) => {
                    setValue(newValue);
                });
            });
        }
        connect();
        return () => {
            cleanup === null || cleanup === void 0 ? void 0 : cleanup();
        };
    }, [ref.current, prop]);
    return [value, setter];
};