softbuilders-react-video-player - npm Package Compare versions

Comparing version 1.1.35 to 1.1.36

dist/components/ControlBar/index.d.ts

@@ -15,4 +15,6 @@ import React from "react";
     handleControlDisplayTimer: (e: any) => void;
+    setIsQualityMenuOpen: (val: boolean) => void;
+    setIsSubtitleMenuOpen: (val: boolean) => void;
 };
-declare const ControlBar: <T>({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep, id, handleSaveNoteAction, handleControlDisplayTimer, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
+declare const ControlBar: <T>({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep, id, handleSaveNoteAction, handleControlDisplayTimer, setIsQualityMenuOpen, setIsSubtitleMenuOpen, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export default ControlBar;

dist/components/ControlBar/index.js

@@ -14,3 +14,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { BackwardIcon, ForwardIcon, FullScreenIcon, PauseIcon, PlayIcon, } from "../../images";
-const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, id, handleSaveNoteAction, handleControlDisplayTimer, }) => {
+const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, id, handleSaveNoteAction, handleControlDisplayTimer, setIsQualityMenuOpen, setIsSubtitleMenuOpen, }) => {
     const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
@@ -65,3 +65,9 @@ const [width, setWidth] = useState(0);
                         }
-                        : { width: "100%" }, className: `flex gap-2 ${width < 400 ? "absolute sb-top-1" : "-sb-translate-y-0 sb-w-full"} hover:sb-w-[45%] sb-transition-all sb-ease-in-out sb-duration-500`, children: [_jsx(CurrentTimeLabel, {}), _jsx(TimeSliderContainer, { chapters: chapters, notes: notes }), _jsx("p", { children: durationFormater(duration) })] }) }), _jsx("div", { className: "sb-h-full", children: _jsx(VolumeSlider, { volumeSliderToggler: volumeSliderToggler, width: width, setIsSeeking: (val) => setIsSeeking(val), handleControlDisplayTimer: handleControlDisplayTimer }) }), _jsx(QualityMenu, { width: width, onClick: () => setVolumeToggler(!volumeSliderToggler) }), handleSaveNoteAction && (_jsx(CreateNoteMenu, { handleSaveNoteAction: handleSaveNoteAction })), _jsx(SubtitleMenu, { width: width, onClick: () => setVolumeToggler(!volumeSliderToggler) }), _jsx("button", { onClick: (e) => {
+                        : { width: "100%" }, className: `flex gap-2 ${width < 400 ? "absolute sb-top-1" : "-sb-translate-y-0 sb-w-full"} hover:sb-w-[45%] sb-transition-all sb-ease-in-out sb-duration-500`, children: [_jsx(CurrentTimeLabel, {}), _jsx(TimeSliderContainer, { chapters: chapters, notes: notes }), _jsx("p", { children: durationFormater(duration) })] }) }), _jsx("div", { className: "sb-h-full", children: _jsx(VolumeSlider, { volumeSliderToggler: volumeSliderToggler, width: width, setIsSeeking: (val) => setIsSeeking(val), handleControlDisplayTimer: handleControlDisplayTimer }) }), _jsx(QualityMenu, { width: width, onClick: (e, isOpen) => {
+                    setVolumeToggler(!volumeSliderToggler);
+                    setIsQualityMenuOpen(isOpen);
+                } }), handleSaveNoteAction && (_jsx(CreateNoteMenu, { handleSaveNoteAction: handleSaveNoteAction })), _jsx(SubtitleMenu, { width: width, onClick: (e, isOpen) => {
+                    setVolumeToggler(!volumeSliderToggler);
+                    setIsSubtitleMenuOpen(isOpen);
+                } }), _jsx("button", { onClick: (e) => {
                     e.preventDefault();
@@ -68,0 +74,0 @@ e.stopPropagation();

dist/components/MenuButton/index.d.ts

@@ -7,5 +7,5 @@ import React from "react";
     classContainer?: string;
-    onClick?: (e: any) => void;
+    onClick?: (e: any, isOpen: boolean) => void;
 };
 declare const MenuButton: ({ buttonContent, menuContent, close, classContainer, onClick, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default MenuButton;

dist/components/MenuButton/index.js

@@ -30,3 +30,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
                     toggleMenu();
-                    onClick && onClick(e);
+                    onClick && onClick(e, !isOpen);
                 }, "aria-haspopup": "true", "aria-expanded": isOpen, "aria-label": "Open menu", children: buttonContent }), isOpen && (_jsx("div", { ref: menuRef, role: "menu", "aria-orientation": "vertical", "aria-labelledby": "Open menu", className: `sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10 ${classContainer}`, children: menuContent }))] }));
@@ -33,0 +33,0 @@ };

dist/components/QualityMenu/index.d.ts

 type QualityMenuProps = {
     width: number;
-    onClick?: () => void;
+    onClick?: (e: any, toggleMenu: boolean) => void;
 };
 declare const QualityMenu: ({ width, onClick }: QualityMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default QualityMenu;

dist/components/QualityMenu/index.js

@@ -24,4 +24,4 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
     }, [player]);
-    return (_jsx(MenuButton, { classContainer: `${width < 400 ? "!sb-top-8 -sb-left-9" : ""}`, onClick: () => {
-            onClick && onClick();
+    return (_jsx(MenuButton, { classContainer: `${width < 400 ? "!sb-top-8 -sb-left-9" : ""}`, onClick: (e, isOpen) => {
+            onClick && onClick(e, isOpen);
         }, buttonContent: _jsx(SettingsIcon, { className: "sb-w-3 sb-h-3" }), menuContent: _jsx("div", { className: `sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50  ${width > 400
@@ -28,0 +28,0 @@ ? "sb-w-[150px] sb-py-5"

dist/components/SoftBuildersVideoPlayer/index.js

@@ -32,6 +32,4 @@ import { jsx as _jsx } from "react/jsx-runtime";
     const [tracks, setTracks] = useState([]);
+    useEffect(() => { }, [isFocused]);
     useEffect(() => {
-        console.log(isFocused, "isF");
-    }, [isFocused]);
-    useEffect(() => {
         const getTracks = async () => {
@@ -38,0 +36,0 @@ const newTracks = [];

dist/components/SubtitleMenu/index.d.ts

 type SubtitleMenuProps = {
     width: number;
-    onClick: () => void;
+    onClick: (e: any, isOpen: boolean) => void;
 };
 declare const SubtitleMenu: ({ width, onClick }: SubtitleMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default SubtitleMenu;

dist/components/SubtitleMenu/index.js

@@ -9,3 +9,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
             e.stopPropagation();
-            onClick();
+            onClick(e);
         }, children: _jsxs("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2", children: [_jsx("div", { className: "sb-col-span-3", children: isSelected ? _jsx(CheckedIcon, { className: "sb-w-5 sb-h-5" }) : _jsx("div", {}) }), _jsx("p", { className: "sb-text-left sb-col-span-9", children: subtitle.label })] }) }));
@@ -36,4 +36,4 @@ };
     }, [player]);
-    return (_jsx(MenuButton, { onClick: () => {
-            onClick && onClick();
+    return (_jsx(MenuButton, { onClick: (e, isOpen) => {
+            onClick && onClick(e, isOpen);
         }, classContainer: `${width < 400 ? "!sb-top-8 -sb-left-9" : ""}`, buttonContent: _jsx(SubIcon, { className: "sb-w-4 sb-h-4 sb-text-white " }), menuContent: _jsx("div", { className: `sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 ${width > 400
@@ -40,0 +40,0 @@ ? "sb-w-[150px] sb-py-5"

dist/components/VideoPlayerComponent/index.js

@@ -1,2 +0,2 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
@@ -27,3 +27,3 @@ import ReactDOM from "react-dom/client";
 let controlBarRoot = {};
-const renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, handleSaveNoteAction, opacity = "0", handleControlDisplayTimer = () => { }, bgColor = "transparent") => {
+const renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, handleSaveNoteAction, opacity = "0", handleControlDisplayTimer = () => { }, bgColor = "transparent", setIsQualityMenuOpen, setIsSubtitleMenuOpen) => {
     const container = document.getElementById(`video-container-${id}`);
@@ -43,3 +43,3 @@ if (container) {
             element.style.alignItems = "flex-end";
-            controlBarRoot[id].render(_jsx(SoftBuildersVideoPlayerProvider, { children: _jsx(ControlBar, { id: id, player: player, isPaused: isPaused, setIsPaused: setIsPaused, duration: duration, notes: notes, chapters: chapters, seekStep: seekStep, handleSaveNoteAction: handleSaveNoteAction, handleControlDisplayTimer: handleControlDisplayTimer }) }));
+            controlBarRoot[id].render(_jsx(SoftBuildersVideoPlayerProvider, { children: _jsx(ControlBar, { id: id, player: player, isPaused: isPaused, setIsPaused: setIsPaused, duration: duration, notes: notes, chapters: chapters, seekStep: seekStep, handleSaveNoteAction: handleSaveNoteAction, handleControlDisplayTimer: handleControlDisplayTimer, setIsSubtitleMenuOpen: setIsSubtitleMenuOpen, setIsQualityMenuOpen: setIsQualityMenuOpen }) }));
         }
@@ -49,2 +49,3 @@ }
 const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, handleSaveNoteAction, poster, onPlay, onPause, }) => {
+    var _a, _b, _c;
     const videoRef = useRef(undefined);
@@ -56,3 +57,6 @@ const playerRef = useRef(undefined);
     const [opacity, setOpacity] = useState("0");
+    const [isControlBarPresent, setIsControlBarPresent] = useState(true);
     const [bgColor, setBgColor] = useState("transparent");
+    const [isQualityMenuOpen, setIsQualityMenuOpen] = useState(false);
+    const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState(false);
     const onReady = (player) => {
@@ -125,3 +129,3 @@ if (playerRef) {
                     handlePlayerClick(e, true);
-                }, bgColor);
+                }, bgColor, setIsQualityMenuOpen, setIsSubtitleMenuOpen);
             }, 500);
@@ -177,2 +181,19 @@ return () => clearTimeout(controlBarTimeout);
     const timeoutRef = useRef(null);
+    useEffect(() => {
+        if (isQualityMenuOpen || isSubtitleMenuOpen) {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            setOpacity("100");
+        }
+        else {
+            if (timeoutRef.current) {
+                clearTimeout(timeoutRef.current);
+            }
+            setOpacity("0");
+            timeoutRef.current = setTimeout(() => {
+                setIsControlBarPresent(false);
+            }, 3000);
+        }
+    }, [isQualityMenuOpen, isSubtitleMenuOpen]);
     const handlePlayerClick = async (e, isTimerOnly = false) => {
@@ -184,2 +205,3 @@ e.preventDefault();
         setOpacity("100");
+        setIsControlBarPresent(true);
         // setBgColor("rgba(200, 200, 200, 0.5)");
@@ -190,6 +212,10 @@ // not using now
             setBgColor("transparent");
-        }, 5000);
+            setIsControlBarPresent(false);
+        }, 3000);
         if (isTimerOnly) {
             return;
         }
+        if (!isControlBarPresent) {
+            return;
+        }
         if (playerRef.current) {
@@ -242,5 +268,16 @@ if (playerRef.current.paused()) {
     }, []);
-    return (_jsx("div", { ref: videoRefs, id: `video-container-${id}`, className: "sb-relative sb-rounded-md sb-overflow-hidden sb-w-full sb-h-full ", children: _jsx("div", { className: "hover:sb-cursor-pointer sb-w-full sb-h-full", "data-vjs-player": true, children: _jsx("div", { onClick: handlePlayerClick, ref: videoRef, className: "sb-h-full sb-w-full" }) }) }));
+    console.log((_a = playerRef === null || playerRef === void 0 ? void 0 : playerRef.current) === null || _a === void 0 ? void 0 : _a.currentTime(), (_b = playerRef === null || playerRef === void 0 ? void 0 : playerRef.current) === null || _b === void 0 ? void 0 : _b.duration(), "player");
+    const [timeSeeker, setTimeSeeker] = useState("0");
+    useEffect(() => {
+        var _a, _b;
+        let value = `${(((_a = playerRef === null || playerRef === void 0 ? void 0 : playerRef.current) === null || _a === void 0 ? void 0 : _a.currentTime()) / ((_b = playerRef === null || playerRef === void 0 ? void 0 : playerRef.current) === null || _b === void 0 ? void 0 : _b.duration())) * 100}%`;
+        setTimeSeeker(value);
+    }, [(_c = playerRef === null || playerRef === void 0 ? void 0 : playerRef.current) === null || _c === void 0 ? void 0 : _c.currentTime()]);
+    return (_jsx("div", { ref: videoRefs, id: `video-container-${id}`, className: "sb-relative sb-rounded-md sb-overflow-hidden sb-w-full sb-h-full ", children: _jsxs("div", { className: "hover:sb-cursor-pointer sb-w-full sb-h-full", "data-vjs-player": true, children: [_jsx("div", { className: `sb-h-[3px] sb-transition-opacity sb-duration-500 sb-delay-1000 ease-in-out sb-border-spacing-x-2 sb-absolute sb-bg-[red] -sb-bottom-[1.5px] ${opacity == "100" ? "sb-z-0" : "sb-z-10"}`, style: {
+                        width: timeSeeker,
+                        transition: "opacity 0.5s ease-in-out",
+                        transitionDelay: "1000",
+                    } }), _jsx("div", { onClick: handlePlayerClick, ref: videoRef, className: "sb-h-full sb-w-full" })] }) }));
 };
 export default VideoPlayerComponent;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "softbuilders-react-video-player",
   "description": "Standalone video player component",
-  "version": "1.1.35",
+  "version": "1.1.36",
   "main": "dist/index.js",
@@ -6,0 +6,0 @@ "types": "dist/index.d.ts",

No alert changes

Improved metrics

Total package byte prevSize

315098

increased by3.5%

Lines of code

6887

increased by3.19%

No dependency changes