UNPKG

@selfcommunity/react-ui

Version:

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

57 lines (56 loc) 2.45 kB
"use strict"; Object.defineProperty(exports, "__esModule", { value: true }); const tslib_1 = require("tslib"); const jsx_runtime_1 = require("react/jsx-runtime"); // eslint-disable-next-line @typescript-eslint/ban-ts-ignore // @ts-nocheck const react_1 = require("react"); const react_waypoint_1 = require("react-waypoint"); const react_player_1 = tslib_1.__importDefault(require("react-player")); const styles_1 = require("@mui/material/styles"); const PREFIX = 'SCAutoPlayer'; const Root = (0, styles_1.styled)(react_waypoint_1.Waypoint, { name: PREFIX, slot: 'Root', overridesResolver: (props, styles) => styles.root })(() => ({})); function AutoPlayer(props) { // PROPS const { enableAutoplay = true, loop = false, muted = true, playsinline = true, controls = true, stopOnUnmount = true, pip = true, onVideoWatch } = props, rest = tslib_1.__rest(props, ["enableAutoplay", "loop", "muted", "playsinline", "controls", "stopOnUnmount", "pip", "onVideoWatch"]); // STATE const [shouldPlay, setShouldPlay] = (0, react_1.useState)(false); const [played, setPlayed] = (0, react_1.useState)(0); (0, react_1.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 ((0, jsx_runtime_1.jsx)(Root, Object.assign({ scrollableAncestor: window, onEnter: handleEnterViewport, onLeave: handleExitViewport }, { children: (0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)(react_player_1.default, 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)) }) }))); } exports.default = AutoPlayer;