@selfcommunity/react-ui/lib/esm/shared/AutoPlayer/index.js

React UI Components to integrate a Community created with SelfCommunity Platform.

import { __rest } from "tslib";
import { jsx as _jsx } from "react/jsx-runtime";
// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
// @ts-nocheck
import { useEffect, useState } from 'react';
import { Waypoint } from 'react-waypoint';
import ReactPlayer from 'react-player';
import { styled } from '@mui/material/styles';
const PREFIX = 'SCAutoPlayer';
const Root = styled(Waypoint, {
    name: PREFIX,
    slot: 'Root',
    overridesResolver: (props, styles) => styles.root
})(() => ({}));
export default function AutoPlayer(props) {
    // PROPS
    const { enableAutoplay = true, loop = false, muted = true, playsinline = true, controls = true, stopOnUnmount = true, pip = true, onVideoWatch } = props, rest = __rest(props, ["enableAutoplay", "loop", "muted", "playsinline", "controls", "stopOnUnmount", "pip", "onVideoWatch"]);
    // STATE
    const [shouldPlay, setShouldPlay] = useState(false);
    const [played, setPlayed] = useState(0);
    useEffect(() => {
        if (played >= 10 && played <= 11) {
            onVideoWatch === null || onVideoWatch === void 0 ? void 0 : onVideoWatch();
        }
    }, [played]);
    /**
     * Handle viewport enter
     */
    function handleEnterViewport() {
        if (enableAutoplay) {
            setShouldPlay(true);
        }
    }
    /**
     * Handles viewport exit
     */
    function handleExitViewport() {
        setShouldPlay(false);
    }
    /**
     * Renders root object
     */
    return (_jsx(Root, Object.assign({ scrollableAncestor: window, onEnter: handleEnterViewport, onLeave: handleExitViewport }, { children: _jsx("div", { children: _jsx(ReactPlayer, Object.assign({ loop: loop, controls: controls, stopOnUnmount: stopOnUnmount, pip: pip, playing: shouldPlay, muted: muted, onProgress: (progress) => {
                    setPlayed(progress.playedSeconds);
                }, playsinline: playsinline, config: {
                    youtube: {
                        embedOptions: {
                            host: 'https://www.youtube-nocookie.com'
                        },
                        playerVars: { rel: 0 }
                    }
                } }, rest)) }) })));
}