softbuilders-react-video-player
Advanced tools
softbuilders-react-video-player - npm Package Compare versions
Comparing version 1.1.24 to 1.1.25
@@ -14,4 +14,5 @@ import React from "react"; | ||
| handleSaveNoteAction?: (time: number, note: string) => Promise<T>; | ||
| handleControlDisplayTimer: (e: any) => void; | ||
| }; | ||
| declare const ControlBar: <T>({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep, id, handleSaveNoteAction, }: Props<T>) => import("react/jsx-runtime").JSX.Element; | ||
| declare const ControlBar: <T>({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep, id, handleSaveNoteAction, handleControlDisplayTimer, }: Props<T>) => import("react/jsx-runtime").JSX.Element; | ||
| export default ControlBar; |
@@ -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, }) => { | ||
| const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, id, handleSaveNoteAction, handleControlDisplayTimer, }) => { | ||
| const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext(); | ||
@@ -64,3 +64,3 @@ 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, { width: width, setIsSeeking: (val) => setIsSeeking(val) }) }), _jsx(QualityMenu, { width: width }), handleSaveNoteAction && (_jsx(CreateNoteMenu, { handleSaveNoteAction: handleSaveNoteAction })), _jsx(SubtitleMenu, { width: width }), _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, { width: width, setIsSeeking: (val) => setIsSeeking(val), handleControlDisplayTimer: handleControlDisplayTimer }) }), _jsx(QualityMenu, { width: width }), handleSaveNoteAction && (_jsx(CreateNoteMenu, { handleSaveNoteAction: handleSaveNoteAction })), _jsx(SubtitleMenu, { width: width }), _jsx("button", { onClick: (e) => { | ||
| e.preventDefault(); | ||
@@ -67,0 +67,0 @@ e.stopPropagation(); |
@@ -25,3 +25,3 @@ import { jsx as _jsx } from "react/jsx-runtime"; | ||
| let controlBarRoot = {}; | ||
| const renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, handleSaveNoteAction, opacity = "0") => { | ||
| const renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, handleSaveNoteAction, opacity = "0", handleControlDisplayTimer = () => { }) => { | ||
| const container = document.getElementById(`video-container-${id}`); | ||
@@ -38,3 +38,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 }) })); | ||
| 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 }) })); | ||
| } | ||
@@ -113,3 +113,5 @@ } | ||
| const controlBarTimeout = setTimeout(() => { | ||
| renderControlBar(id, playerRef.current, isPaused, setIsPaused, duration, notes, chapters, 5, handleSaveNoteAction, opacity); | ||
| renderControlBar(id, playerRef.current, isPaused, setIsPaused, duration, notes, chapters, 5, handleSaveNoteAction, opacity, (e) => { | ||
| handlePlayerClick(e, true); | ||
| }); | ||
| }, 500); | ||
@@ -165,3 +167,3 @@ return () => clearTimeout(controlBarTimeout); | ||
| const timeoutRef = useRef(null); | ||
| const handlePlayerClick = async (e) => { | ||
| const handlePlayerClick = async (e, isTimerOnly = false) => { | ||
| e.preventDefault(); | ||
@@ -175,2 +177,5 @@ if (timeoutRef.current) { | ||
| }, 5000); | ||
| if (isTimerOnly) { | ||
| return; | ||
| } | ||
| if (playerRef.current) { | ||
@@ -177,0 +182,0 @@ if (playerRef.current.paused()) { |
| type Props = { | ||
| width?: number; | ||
| setIsSeeking: (val: boolean) => void; | ||
| handleControlDisplayTimer: (e: any) => void; | ||
| }; | ||
| declare const VolumeSlider: ({ width, setIsSeeking }: Props) => import("react/jsx-runtime").JSX.Element; | ||
| declare const VolumeSlider: ({ width, setIsSeeking, handleControlDisplayTimer, }: Props) => import("react/jsx-runtime").JSX.Element; | ||
| export default VolumeSlider; |
@@ -7,3 +7,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime"; | ||
| const MIN = 0, MAX = 100; | ||
| const VolumeSlider = ({ width = 0, setIsSeeking }) => { | ||
| const VolumeSlider = ({ width = 0, setIsSeeking, handleControlDisplayTimer, }) => { | ||
| const { player } = useSoftBuildersVideoPlayerContext(); | ||
@@ -19,2 +19,3 @@ const [isVisible, setVisible] = useState(false); | ||
| e.stopPropagation(); | ||
| handleControlDisplayTimer(e); | ||
| setIsSeeking(isVisible); | ||
@@ -42,5 +43,5 @@ if (timeoutRef.current) { | ||
| }; | ||
| return (_jsxs("div", { className: `sb-flex ${isVisible ? "" : "-sb-ml-2"} ${width > 400 ? "sb-flex-col-reverse " : "sb-flex-col !sb-justify-start"} ${false ? "!sb-flex-row !sb-items-start " : ""} sb-items-center sb-gap-1 sb-h-full`, children: [_jsx("div", { className: `sb-flex sb-relative ${width < 400 ? "-sb-top-1" : "sb-top-1"} `, onClick: toggleVisiblity, children: volume === 0 || (player === null || player === void 0 ? void 0 : player.muted()) ? (_jsx(MuteIcon, { className: `sb-w-3 sb-h-3 ${width < 400 ? " " : ""} sb-h-5 sb-w-5` })) : (_jsx(UnmuteIcon, { className: `sb-w-3 sb-h-3 ${width < 400 ? "" : ""} sb-h-5 sb-w-5` })) }), _jsx("div", { className: "sb-flex sb-items-center sb-justify-center", children: _jsx("div", { className: `sb-transition-all sb-ease-in-out sb-duration-500 ${isVisible | ||
| return (_jsxs("div", { className: `sb-flex ${isVisible ? "" : ""} ${width > 400 ? "sb-flex-col-reverse " : "sb-flex-col !sb-justify-start"} ${false ? "!sb-flex-row !sb-items-start " : ""} sb-items-center sb-gap-1 sb-h-full`, children: [_jsx("div", { className: `sb-flex sb-relative ${width < 400 ? "-sb-top-1" : "sb-top-1"} `, onClick: toggleVisiblity, children: volume === 0 || (player === null || player === void 0 ? void 0 : player.muted()) ? (_jsx(MuteIcon, { className: `sb-w-3 sb-h-3 ${width < 400 ? " " : ""} sb-h-5 sb-w-5` })) : (_jsx(UnmuteIcon, { className: `sb-w-3 sb-h-3 ${width < 400 ? "" : ""} sb-h-5 sb-w-5` })) }), _jsx("div", { className: "sb-flex sb-items-center sb-justify-center", children: _jsx("div", { className: `sb-transition-all sb-ease-in-out sb-duration-500 ${isVisible | ||
| ? "sb-w-[22px] sb-opacity-100 sb-visible" | ||
| : "sb-w-0 sb-opacity-0 sb-invisible"} ${width > 400 | ||
| : " sb-w-[22px] sb-opacity-0 sb-invisible"} ${width > 400 | ||
| ? "-sb-rotate-90 -sb-translate-y-1" | ||
@@ -47,0 +48,0 @@ : "sb-rotate-90 sb-translate-y-1"} sb-relative ${false ? "sb-static sb-w-16 sb-rotate-0 sb-translate-y-0 " : ""}`, children: _jsx(Slider, { value: volume, handleValueChange: handleValueChange, min: MIN, max: MAX, className: "!sb-w-16" }) }) })] })); |
| { | ||
| "name": "softbuilders-react-video-player", | ||
| "description": "Standalone video player component", | ||
| "version": "1.1.24", | ||
| "version": "1.1.25", | ||
| "main": "dist/index.js", | ||
@@ -6,0 +6,0 @@ "types": "dist/index.d.ts", |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.57%
298765
- Lines of code
- increased by0.57%
6555