feat: release v0.0.1
This commit is contained in:
10
dist/react/video-player/components/with-observation/index.d.ts
vendored
Normal file
10
dist/react/video-player/components/with-observation/index.d.ts
vendored
Normal file
@@ -0,0 +1,10 @@
|
||||
import type { JSX } from "react";
|
||||
import Player from "video.js/dist/types/player";
|
||||
import { IWithMouseEventsProps } from "../with-mouse-events";
|
||||
export interface IWithObservationProps extends IWithMouseEventsProps {
|
||||
onShow?: (player: Player | null) => void;
|
||||
onHide?: (player: Player | null) => void;
|
||||
children: JSX.Element;
|
||||
}
|
||||
export declare const WithObservation: ({ children, onShow, onHide, onReady, ...props }: IWithObservationProps) => import("react/jsx-runtime").JSX.Element;
|
||||
//# sourceMappingURL=index.d.ts.map
|
||||
1
dist/react/video-player/components/with-observation/index.d.ts.map
vendored
Normal file
1
dist/react/video-player/components/with-observation/index.d.ts.map
vendored
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/react/video-player/components/with-observation/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAKjC,OAAO,MAAM,MAAM,4BAA4B,CAAC;AAGhD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sBAAsB,CAAC;AAG7D,MAAM,WAAW,qBAAsB,SAAQ,qBAAqB;IACnE,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,MAAM,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,GAAG,IAAI,KAAK,IAAI,CAAC;IACzC,QAAQ,EAAE,GAAG,CAAC,OAAO,CAAC;CACtB;AAED,eAAO,MAAM,eAAe,GAAI,iDAM7B,qBAAqB,4CAsDvB,CAAC"}
|
||||
46
dist/react/video-player/components/with-observation/index.js
vendored
Normal file
46
dist/react/video-player/components/with-observation/index.js
vendored
Normal file
@@ -0,0 +1,46 @@
|
||||
import { jsx as _jsx } from "react/jsx-runtime";
|
||||
import React, { useCallback, useEffect, useRef, useState } from "react";
|
||||
import { throttle } from "lodash";
|
||||
import styles from "./with-observation.module.scss";
|
||||
export const WithObservation = ({ children, onShow, onHide, onReady, ...props }) => {
|
||||
const videoContainerRef = useRef(null);
|
||||
const playerRef = useRef(null);
|
||||
const [isVisible, setIsVisible] = useState(false);
|
||||
const handlePlayer = useCallback((player) => {
|
||||
playerRef.current = player;
|
||||
onReady && onReady(player);
|
||||
}, []);
|
||||
const hide = useCallback(() => {
|
||||
onHide && onHide(playerRef.current);
|
||||
}, [onHide]);
|
||||
const show = useCallback(() => {
|
||||
onShow && onShow(playerRef.current);
|
||||
}, [onShow]);
|
||||
// Throttle для обработки видимости
|
||||
const handleVisibility = throttle((entry) => {
|
||||
if (entry.isIntersecting && !isVisible) {
|
||||
setIsVisible(true);
|
||||
show();
|
||||
}
|
||||
else if (!entry.isIntersecting && isVisible) {
|
||||
setIsVisible(false);
|
||||
hide();
|
||||
}
|
||||
}, 200);
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(([entry]) => handleVisibility(entry), {
|
||||
threshold: 0.75,
|
||||
});
|
||||
if (videoContainerRef.current) {
|
||||
observer.observe(videoContainerRef.current);
|
||||
}
|
||||
return () => {
|
||||
if (videoContainerRef.current) {
|
||||
observer.unobserve(videoContainerRef.current);
|
||||
}
|
||||
handleVisibility.cancel();
|
||||
};
|
||||
}, [handleVisibility]);
|
||||
return (_jsx("div", { ref: videoContainerRef, className: styles.videoArea, children: React.cloneElement(children, { ...props, onReady: handlePlayer }) }));
|
||||
};
|
||||
//# sourceMappingURL=index.js.map
|
||||
1
dist/react/video-player/components/with-observation/index.js.map
vendored
Normal file
1
dist/react/video-player/components/with-observation/index.js.map
vendored
Normal file
@@ -0,0 +1 @@
|
||||
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/react/video-player/components/with-observation/index.tsx"],"names":[],"mappings":";AAEA,OAAO,KAAK,EAAE,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExE,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAKlC,OAAO,MAAM,MAAM,gCAAgC,CAAC;AAQpD,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,EAC/B,QAAQ,EACR,MAAM,EACN,MAAM,EACN,OAAO,EACP,GAAG,KAAK,EACe,EAAE,EAAE;IAC3B,MAAM,iBAAiB,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;IACvC,MAAM,SAAS,GAAG,MAAM,CAAgB,IAAI,CAAC,CAAC;IAC9C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAElD,MAAM,YAAY,GAAG,WAAW,CAAC,CAAC,MAAqB,EAAE,EAAE;QAC1D,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;QAC3B,OAAO,IAAI,OAAO,CAAC,MAAM,CAAC,CAAC;IAC5B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,MAAM,IAAI,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,MAAM,IAAI,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,MAAM,IAAI,MAAM,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,mCAAmC;IACnC,MAAM,gBAAgB,GAAG,QAAQ,CAAC,CAAC,KAAgC,EAAE,EAAE;QACtE,IAAI,KAAK,CAAC,cAAc,IAAI,CAAC,SAAS,EAAE,CAAC;YACxC,YAAY,CAAC,IAAI,CAAC,CAAC;YACnB,IAAI,EAAE,CAAC;QACR,CAAC;aAAM,IAAI,CAAC,KAAK,CAAC,cAAc,IAAI,SAAS,EAAE,CAAC;YAC/C,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,IAAI,EAAE,CAAC;QACR,CAAC;IACF,CAAC,EAAE,GAAG,CAAC,CAAC;IAER,SAAS,CAAC,GAAG,EAAE;QACd,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACxC,CAAC,CAAC,KAAK,CAAC,EAAE,EAAE,CAAC,gBAAgB,CAAC,KAAK,CAAC,EACpC;YACC,SAAS,EAAE,IAAI;SACf,CACD,CAAC;QAEF,IAAI,iBAAiB,CAAC,OAAO,EAAE,CAAC;YAC/B,QAAQ,CAAC,OAAO,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;QAC7C,CAAC;QAED,OAAO,GAAG,EAAE;YACX,IAAI,iBAAiB,CAAC,OAAO,EAAE,CAAC;gBAC/B,QAAQ,CAAC,SAAS,CAAC,iBAAiB,CAAC,OAAO,CAAC,CAAC;YAC/C,CAAC;YACD,gBAAgB,CAAC,MAAM,EAAE,CAAC;QAC3B,CAAC,CAAC;IACH,CAAC,EAAE,CAAC,gBAAgB,CAAC,CAAC,CAAC;IAEvB,OAAO,CACN,cAAK,GAAG,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,CAAC,SAAS,YACtD,KAAK,CAAC,YAAY,CAAC,QAAQ,EAAE,EAAE,GAAG,KAAK,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,GAC7D,CACN,CAAC;AACH,CAAC,CAAC"}
|
||||
4
dist/react/video-player/components/with-observation/with-observation.module.scss
vendored
Normal file
4
dist/react/video-player/components/with-observation/with-observation.module.scss
vendored
Normal file
@@ -0,0 +1,4 @@
|
||||
.videoArea {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
Reference in New Issue
Block a user