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

Comparing version 1.0.6 to 1.0.7

dist/components/BigPlayButton/index.d.ts

@@ -8,3 +8,3 @@ import React from "react";
 };
-declare const BigPlayButton: ({ player, isPaused, setIsPaused }: Props) => React.JSX.Element;
+declare const BigPlayButton: ({ player, isPaused, setIsPaused }: Props) => import("react/jsx-runtime").JSX.Element;
 export default BigPlayButton;

dist/components/BigPlayButton/index.js

@@ -1,2 +0,2 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { PauseIcon, PlayIcon } from "../../images";
@@ -11,6 +11,5 @@ const BigPlayButton = ({ player, isPaused, setIsPaused }) => {
     };
-    return (React.createElement("button", { onClick: togglePlay },
-        React.createElement("div", { className: "sb-w-16 sb-h-16 sb-rounded-full sb-bg-white/30 sb-backdrop-blur-lg sb-flex sb-items-center sb-justify-center " }, isPaused ? (React.createElement(PlayIcon, { className: "sb-w-4 sb-h-4" })) : (React.createElement(PauseIcon, { className: "sb-w-4 sb-h-4" })))));
+    return (_jsx("button", { onClick: togglePlay, children: _jsx("div", { className: "sb-w-16 sb-h-16 sb-rounded-full sb-bg-white/30 sb-backdrop-blur-lg sb-flex sb-items-center sb-justify-center ", children: isPaused ? (_jsx(PlayIcon, { className: "sb-w-4 sb-h-4" })) : (_jsx(PauseIcon, { className: "sb-w-4 sb-h-4" })) }) }));
 };
 export default BigPlayButton;
 //# sourceMappingURL=index.js.map

dist/components/BufferTracker/index.d.ts

@@ -1,3 +0,2 @@
-import React from "react";
-declare const BufferTracker: () => React.JSX.Element;
+declare const BufferTracker: () => import("react/jsx-runtime").JSX.Element;
 export default BufferTracker;

dist/components/BufferTracker/index.js

@@ -1,2 +0,3 @@
-import React, { useEffect } from "react";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
 import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
@@ -13,5 +14,5 @@ const BufferTracker = () => {
     }, [player]);
-    return React.createElement(React.Fragment, null);
+    return _jsx(_Fragment, {});
 };
 export default BufferTracker;
 //# sourceMappingURL=index.js.map

dist/components/ChaptersPanal/index.d.ts

@@ -1,2 +0,1 @@
-import React from "react";
 import { SoftBuildersVideoPlayerChapter } from "../../types";
@@ -6,3 +5,3 @@ type Props = {
 };
-declare const ChaptersPanal: ({ chapters }: Props) => React.JSX.Element;
+declare const ChaptersPanal: ({ chapters }: Props) => import("react/jsx-runtime").JSX.Element;
 export default ChaptersPanal;

dist/components/ChaptersPanal/index.js

@@ -1,2 +0,3 @@
-import React, { useEffect, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import ChapterTooltip from "../ChapterTooltip";
@@ -16,5 +17,5 @@ import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
     }, [chapters, duration]);
-    return (React.createElement("div", { id: "chapters-panal", className: "sb-w-full sb-h-full sb-relative " }, cs.map((c, i) => (React.createElement(ChapterTooltip, { key: `chapter-${i}-${c.startTime}`, chapter: c })))));
+    return (_jsx("div", { id: "chapters-panal", className: "sb-w-full sb-h-full sb-relative ", children: cs.map((c, i) => (_jsx(ChapterTooltip, { chapter: c }, `chapter-${i}-${c.startTime}`))) }));
 };
 export default ChaptersPanal;
 //# sourceMappingURL=index.js.map

dist/components/ChapterTooltip/index.d.ts

@@ -1,2 +0,1 @@
-import React from "react";
 import { SoftBuildersVideoPlayerChapter } from "../../types";
@@ -10,3 +9,3 @@ type Chapter = SoftBuildersVideoPlayerChapter & {
 };
-declare const ChapterTooltip: ({ chapter }: Props) => React.JSX.Element;
+declare const ChapterTooltip: ({ chapter }: Props) => import("react/jsx-runtime").JSX.Element;
 export default ChapterTooltip;

dist/components/ChapterTooltip/index.js

@@ -1,2 +0,3 @@
-import React, { useEffect, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import Tooltip from "../Tooltip";
@@ -20,18 +21,8 @@ import { durationFormater } from "../../utils";
     };
-    return (React.createElement("div", { id: `ii-section-${chapter.title}`, className: "sb-flex sb-items-center sb-w-full sb-h-full sb-absolute sb-z-20", style: {
+    return (_jsx("div", { id: `ii-section-${chapter.title}`, className: "sb-flex sb-items-center sb-w-full sb-h-full sb-absolute sb-z-20", style: {
             left: `${chapter.startPercentage}%`,
             width: `${chapter.endPercentage - chapter.startPercentage}%`,
-        }, onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false) },
-        React.createElement("button", { id: `section-${chapter.title}`, className: "sb-h-full sb-w-full", onClick: handleClickChapter },
-            React.createElement("div", { className: "sb-relative sb-flex sb-h-full sb-w-full sb-justify-between sb-items-center" },
-                React.createElement(Tooltip, { open: open },
-                    React.createElement("div", { className: "sb-flex sb-flex-col sb-gap-2 sb-items-center" },
-                        React.createElement("p", null, chapter.title),
-                        React.createElement("p", { className: "sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md" },
-                            durationFormater(chapter.startTime),
-                            " -",
-                            " ",
-                            durationFormater(chapter.endTime))))))));
+        }, onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false), children: _jsx("button", { id: `section-${chapter.title}`, className: "sb-h-full sb-w-full", onClick: handleClickChapter, children: _jsx("div", { className: "sb-relative sb-flex sb-h-full sb-w-full sb-justify-between sb-items-center", children: _jsx(Tooltip, { open: open, children: _jsxs("div", { className: "sb-flex sb-flex-col sb-gap-2 sb-items-center", children: [_jsx("p", { children: chapter.title }), _jsxs("p", { className: "sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md", children: [durationFormater(chapter.startTime), " -", " ", durationFormater(chapter.endTime)] })] }) }) }) }) }));
 };
 export default ChapterTooltip;
 //# sourceMappingURL=index.js.map

dist/components/ControlBar/index.d.ts

@@ -14,3 +14,3 @@ import React from "react";
 };
-declare const ControlBar: <T>({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep, handleSaveNoteAction, }: Props<T>) => React.JSX.Element;
+declare const ControlBar: <T>({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep, handleSaveNoteAction, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export default ControlBar;

dist/components/ControlBar/index.js

@@ -1,2 +0,3 @@
-import React, { useEffect } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect } from "react";
 import CurrentTimeLabel from "../CurrentTimeLabel";
@@ -32,34 +33,16 @@ import { durationFormater } from "../../utils";
     }, [duration]);
-    return (React.createElement("div", { className: "sb-flex sb-items-center sb-justify-center sb-gap-3 sb-w-full" },
-        React.createElement(BufferTracker, null),
-        React.createElement(CurrentTimeTracker, null),
-        React.createElement("button", { onClick: () => {
-                seek(-seekStep);
-            } },
-            React.createElement(BackwardIcon, { className: "sb-w-3 sb-h-3" })),
-        React.createElement("button", { onClick: togglePlay }, isPaused ? (React.createElement(PlayIcon, { className: "sb-w-3 sb-h-3" })) : (React.createElement(PauseIcon, { className: "sb-w-3 sb-h-3" }))),
-        React.createElement("button", { onClick: () => {
-                seek(seekStep);
-            } },
-            React.createElement(ForwardIcon, { className: "sb-w-3 sb-h-3" })),
-        React.createElement(CurrentTimeLabel, null),
-        React.createElement("div", { className: "sb-w-[30%] hover:sb-w-[45%] sb-transition-all sb-ease-in-out sb-duration-500" },
-            React.createElement(TimeSliderContainer, { chapters: chapters, notes: notes })),
-        React.createElement("p", null, durationFormater(duration)),
-        React.createElement("div", { className: "sb-w-[10%]" },
-            React.createElement(VolumeSlider, null)),
-        React.createElement(QualityMenu, null),
-        React.createElement("button", { onClick: () => {
-                if (player === null || player === void 0 ? void 0 : player.isFullscreen()) {
-                    player === null || player === void 0 ? void 0 : player.exitFullscreen();
-                }
-                else {
-                    player === null || player === void 0 ? void 0 : player.requestFullscreen();
-                }
-            } },
-            React.createElement(FullScreenIcon, { className: "sb-w-3 sb-h-3" })),
-        handleSaveNoteAction && (React.createElement(CreateNoteMenu, { handleSaveNoteAction: handleSaveNoteAction })),
-        React.createElement(SubtitleMenu, null)));
+    return (_jsxs("div", { className: "sb-flex sb-items-center sb-justify-center sb-gap-3 sb-w-full", children: [_jsx(BufferTracker, {}), _jsx(CurrentTimeTracker, {}), _jsx("button", { onClick: () => {
+                    seek(-seekStep);
+                }, children: _jsx(BackwardIcon, { className: "sb-w-3 sb-h-3" }) }), _jsx("button", { onClick: togglePlay, children: isPaused ? (_jsx(PlayIcon, { className: "sb-w-3 sb-h-3" })) : (_jsx(PauseIcon, { className: "sb-w-3 sb-h-3" })) }), _jsx("button", { onClick: () => {
+                    seek(seekStep);
+                }, children: _jsx(ForwardIcon, { className: "sb-w-3 sb-h-3" }) }), _jsx(CurrentTimeLabel, {}), _jsx("div", { className: "sb-w-[30%] hover:sb-w-[45%] sb-transition-all sb-ease-in-out sb-duration-500", children: _jsx(TimeSliderContainer, { chapters: chapters, notes: notes }) }), _jsx("p", { children: durationFormater(duration) }), _jsx("div", { className: "sb-w-[10%]", children: _jsx(VolumeSlider, {}) }), _jsx(QualityMenu, {}), _jsx("button", { onClick: () => {
+                    if (player === null || player === void 0 ? void 0 : player.isFullscreen()) {
+                        player === null || player === void 0 ? void 0 : player.exitFullscreen();
+                    }
+                    else {
+                        player === null || player === void 0 ? void 0 : player.requestFullscreen();
+                    }
+                }, children: _jsx(FullScreenIcon, { className: "sb-w-3 sb-h-3" }) }), handleSaveNoteAction && (_jsx(CreateNoteMenu, { handleSaveNoteAction: handleSaveNoteAction })), _jsx(SubtitleMenu, {})] }));
 };
 export default ControlBar;
 //# sourceMappingURL=index.js.map

dist/components/CreateNoteMenu/index.d.ts

@@ -1,6 +0,5 @@
-import React from "react";
 type Props<T> = {
     handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
 };
-declare const CreateNoteMenu: <T>({ handleSaveNoteAction }: Props<T>) => React.JSX.Element;
+declare const CreateNoteMenu: <T>({ handleSaveNoteAction }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export default CreateNoteMenu;

dist/components/CreateNoteMenu/index.js

@@ -1,2 +0,3 @@
-import React, { useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import MenuButton from "../MenuButton";
@@ -19,12 +20,5 @@ import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
     };
-    return (React.createElement(MenuButton, { buttonContent: React.createElement(ClosedNoteIcon, { className: "sb-w-3 sb-h-3" }), menuContent: React.createElement("div", { className: "sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[220px]" },
-            React.createElement("div", { className: "sb-flex sb-flex-col sb-gap-3" },
-                React.createElement("h3", { className: "sb-px-5" }, "Add Note"),
-                React.createElement("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
-                React.createElement("div", { className: "sb-px-5 sb-flex sb-flex-col sb-gap-4 sb-items-start" },
-                    React.createElement("input", { name: "note", type: "text", placeholder: "Add a note", value: note, onChange: (e) => setNote(e.target.value), required: true, className: "sb-text-white placeholder:sb-text-white sb-w-full sb-bg-transparent sb-px-4 sb-py-3 sb-border sb-border-[#AAAAAA] sb-rounded-md" }),
-                    React.createElement("button", { className: "sb-w-full", onClick: handleSaveNote },
-                        React.createElement("div", { className: "sb-px-4 sb-py-3 sb-text-center sb-font-bold sb-bg-orange-500 sb-rounded-md" }, "Save"))))) }));
+    return (_jsx(MenuButton, { buttonContent: _jsx(ClosedNoteIcon, { className: "sb-w-3 sb-h-3" }), menuContent: _jsx("div", { className: "sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[220px]", children: _jsxs("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [_jsx("h3", { className: "sb-px-5", children: "Add Note" }), _jsx("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }), _jsxs("div", { className: "sb-px-5 sb-flex sb-flex-col sb-gap-4 sb-items-start", children: [_jsx("input", { name: "note", type: "text", placeholder: "Add a note", value: note, onChange: (e) => setNote(e.target.value), required: true, className: "sb-text-white placeholder:sb-text-white sb-w-full sb-bg-transparent sb-px-4 sb-py-3 sb-border sb-border-[#AAAAAA] sb-rounded-md" }), _jsx("button", { className: "sb-w-full", onClick: handleSaveNote, children: _jsx("div", { className: "sb-px-4 sb-py-3 sb-text-center sb-font-bold sb-bg-orange-500 sb-rounded-md", children: "Save" }) })] })] }) }) }));
 };
 export default CreateNoteMenu;
 //# sourceMappingURL=index.js.map

dist/components/CurrentTimeLabel/index.d.ts

@@ -1,4 +0,3 @@
-import React from "react";
 type Props = {};
-declare const CurrentTimeLabel: ({}: Props) => React.JSX.Element;
+declare const CurrentTimeLabel: ({}: Props) => import("react/jsx-runtime").JSX.Element;
 export default CurrentTimeLabel;

dist/components/CurrentTimeLabel/index.js

 "use client";
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import { durationFormater } from "../../utils";
@@ -7,5 +7,5 @@ import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
     const { currentTime } = useSoftBuildersVideoPlayerContext();
-    return React.createElement("p", null, durationFormater(currentTime));
+    return _jsx("p", { children: durationFormater(currentTime) });
 };
 export default CurrentTimeLabel;
 //# sourceMappingURL=index.js.map

dist/components/CurrentTimeTracker/index.d.ts

@@ -1,3 +0,2 @@
-import React from "react";
-declare const CurrentTimeTracker: () => React.JSX.Element;
+declare const CurrentTimeTracker: () => import("react/jsx-runtime").JSX.Element;
 export default CurrentTimeTracker;

dist/components/CurrentTimeTracker/index.js

@@ -1,2 +0,3 @@
-import React, { useEffect } from "react";
+import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
+import { useEffect } from "react";
 import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
@@ -12,5 +13,5 @@ const CurrentTimeTracker = () => {
     }, [player]);
-    return React.createElement(React.Fragment, null);
+    return _jsx(_Fragment, {});
 };
 export default CurrentTimeTracker;
 //# sourceMappingURL=index.js.map

dist/components/Menu/index.d.ts

@@ -1,6 +0,5 @@
-import React from "react";
 type Props = {
     name: string;
 };
-declare const Menu: ({ name }: Props) => React.JSX.Element;
+declare const Menu: ({ name }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Menu;

dist/components/Menu/index.js

@@ -1,11 +0,6 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const Menu = ({ name }) => {
-    return (React.createElement("div", { className: "absolute right-0 z-10 w-48 mt-2 origin-top-right bg-white border border-gray-300 rounded-md shadow-lg focus:outline-none" },
-        React.createElement("div", { className: "py-1", role: "menu", "aria-orientation": "vertical", "aria-labelledby": `${name}-button` },
-            React.createElement("a", { href: "#", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900", role: "menuitem" }, "Dashboard"),
-            React.createElement("a", { href: "#", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900", role: "menuitem" }, "Settings"),
-            React.createElement("a", { href: "#", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900", role: "menuitem" }, "Profile"),
-            React.createElement("a", { href: "#", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900", role: "menuitem" }, "Logout"))));
+    return (_jsx("div", { className: "absolute right-0 z-10 w-48 mt-2 origin-top-right bg-white border border-gray-300 rounded-md shadow-lg focus:outline-none", children: _jsxs("div", { className: "py-1", role: "menu", "aria-orientation": "vertical", "aria-labelledby": `${name}-button`, children: [_jsx("a", { href: "#", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900", role: "menuitem", children: "Dashboard" }), _jsx("a", { href: "#", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900", role: "menuitem", children: "Settings" }), _jsx("a", { href: "#", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900", role: "menuitem", children: "Profile" }), _jsx("a", { href: "#", className: "block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900", role: "menuitem", children: "Logout" })] }) }));
 };
 export default Menu;
 //# sourceMappingURL=index.js.map

dist/components/MenuButton/index.d.ts

@@ -7,3 +7,3 @@ import React from "react";
 };
-declare const MenuButton: ({ buttonContent, menuContent, close }: Props) => React.JSX.Element;
+declare const MenuButton: ({ buttonContent, menuContent, close }: Props) => import("react/jsx-runtime").JSX.Element;
 export default MenuButton;

dist/components/MenuButton/index.js

@@ -1,2 +0,3 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
 const MenuButton = ({ buttonContent, menuContent, close }) => {
@@ -26,7 +27,5 @@ const [isOpen, setIsOpen] = useState(false);
     }, [close, closeMenu]);
-    return (React.createElement("div", { className: "sb-relative" },
-        React.createElement("button", { ref: buttonRef, onClick: toggleMenu, "aria-haspopup": "true", "aria-expanded": isOpen, "aria-label": "Open menu" }, buttonContent),
-        isOpen && (React.createElement("div", { ref: menuRef, role: "menu", "aria-orientation": "vertical", "aria-labelledby": "Open menu", className: "sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10" }, menuContent))));
+    return (_jsxs("div", { className: "sb-relative", children: [_jsx("button", { ref: buttonRef, onClick: toggleMenu, "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", children: menuContent }))] }));
 };
 export default MenuButton;
 //# sourceMappingURL=index.js.map

dist/components/NotesPanal/index.d.ts

@@ -1,2 +0,1 @@
-import React from "react";
 import { SoftBuildersVideoPlayerNote } from "../../types";
@@ -6,3 +5,3 @@ type Props = {
 };
-declare const NotesPanal: ({ notes }: Props) => React.JSX.Element;
+declare const NotesPanal: ({ notes }: Props) => import("react/jsx-runtime").JSX.Element;
 export default NotesPanal;

dist/components/NotesPanal/index.js

@@ -1,2 +0,3 @@
-import React, { useEffect, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import NoteTooltip from "../NoteTooltip";
@@ -14,5 +15,5 @@ import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
     }, [notes, duration]);
-    return (React.createElement("div", { id: "notes-panal", className: "sb-w-full sb-h-full sb-relative " }, ns.map((n, i) => (React.createElement(NoteTooltip, { key: `note-${i}-${n.time}`, note: n })))));
+    return (_jsx("div", { id: "notes-panal", className: "sb-w-full sb-h-full sb-relative ", children: ns.map((n, i) => (_jsx(NoteTooltip, { note: n }, `note-${i}-${n.time}`))) }));
 };
 export default NotesPanal;
 //# sourceMappingURL=index.js.map

dist/components/NoteTooltip/index.d.ts

@@ -1,2 +0,1 @@
-import React from "react";
 import { SoftBuildersVideoPlayerNote } from "../../types";
@@ -9,3 +8,3 @@ type Note = SoftBuildersVideoPlayerNote & {
 };
-declare const NoteTooltip: ({ note }: Props) => React.JSX.Element;
+declare const NoteTooltip: ({ note }: Props) => import("react/jsx-runtime").JSX.Element;
 export default NoteTooltip;

dist/components/NoteTooltip/index.js

@@ -1,2 +0,3 @@
-import React, { useEffect, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import Tooltip from "../Tooltip";
@@ -16,10 +17,5 @@ import { durationFormater } from "../../utils";
     }, [currentTime, note.time]);
-    return (React.createElement("div", { className: "sb-w-1 sb-h-1 sb-rounded-full sb-bg-white sb-absolute sb-z-30", style: { left: `${note.percentage}%` }, onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false) },
-        React.createElement("div", { className: "sb-relative" },
-            React.createElement(Tooltip, { open: open },
-                React.createElement("div", { className: "sb-flex sb-flex-col sb-gap-2 sb-items-center" },
-                    React.createElement("p", null, note.label),
-                    React.createElement("p", { className: "sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md" }, durationFormater(note.time)))))));
+    return (_jsx("div", { className: "sb-w-1 sb-h-1 sb-rounded-full sb-bg-white sb-absolute sb-z-30", style: { left: `${note.percentage}%` }, onMouseEnter: () => setOpen(true), onMouseLeave: () => setOpen(false), children: _jsx("div", { className: "sb-relative", children: _jsx(Tooltip, { open: open, children: _jsxs("div", { className: "sb-flex sb-flex-col sb-gap-2 sb-items-center", children: [_jsx("p", { children: note.label }), _jsx("p", { className: "sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md", children: durationFormater(note.time) })] }) }) }) }));
 };
 export default NoteTooltip;
 //# sourceMappingURL=index.js.map

dist/components/QualityMenu/index.d.ts

@@ -1,4 +0,3 @@
-import React from "react";
 type QualityMenuProps = {};
-declare const QualityMenu: ({}: QualityMenuProps) => React.JSX.Element;
+declare const QualityMenu: ({}: QualityMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default QualityMenu;

dist/components/QualityMenu/index.js

@@ -1,2 +0,3 @@
-import React, { useEffect, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import MenuButton from "../MenuButton";
@@ -6,6 +7,3 @@ import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
 const QualityOption = ({ isSelected, quality, onClick, }) => {
-    return (React.createElement("button", { className: "hover:sb-text-orange-500 sb-p-2", onClick: onClick },
-        React.createElement("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2" },
-            React.createElement("div", { className: "sb-col-span-3" }, isSelected ? React.createElement(CheckedIcon, { className: "sb-w-5 sb-h-5" }) : React.createElement("div", null)),
-            React.createElement("p", { className: "sb-text-left sb-col-span-9" }, quality.label))));
+    return (_jsx("button", { className: "hover:sb-text-orange-500 sb-p-2", onClick: onClick, 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: quality.label })] }) }));
 };
@@ -27,25 +25,18 @@ const QualityMenu = ({}) => {
     }, [player]);
-    return (React.createElement(MenuButton, { buttonContent: React.createElement(SettingsIcon, { className: "sb-w-3 sb-h-3" }), menuContent: React.createElement("div", { className: "sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[150px]" },
-            React.createElement("div", { className: "sb-flex sb-flex-col sb-gap-3" },
-                React.createElement("div", { className: "sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start" },
-                    React.createElement("button", { onClick: () => {
-                            if (closeMenuFunction) {
-                                closeMenuFunction();
-                            }
-                        }, className: "hover:sb-scale-150" },
-                        React.createElement(LeftArrowIcon, { className: "sb-w-3 sb-h-3" })),
-                    React.createElement("h3", null, "Quality")),
-                React.createElement("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
-                React.createElement("div", { className: "sb-px-5  sb-flex sb-flex-col sb-gap-3 sb-items-start" }, qualities.map((q, i) => {
-                    return (React.createElement(QualityOption, { key: `quality-${q.label}-${i}`, isSelected: currentQualitySrc === q.src, quality: q, onClick: () => {
-                            const source = qualities.find((_q) => q.label == _q.label);
-                            if (source && source.src != currentQualitySrc) {
-                                player === null || player === void 0 ? void 0 : player.src(source.src);
-                                const currentTime = player === null || player === void 0 ? void 0 : player.currentTime();
-                                setCurrentQualitySrc(source.src);
-                                player === null || player === void 0 ? void 0 : player.currentTime(currentTime);
-                                player === null || player === void 0 ? void 0 : player.play();
-                            }
-                        } }));
-                })))), close: (fn) => {
+    return (_jsx(MenuButton, { buttonContent: _jsx(SettingsIcon, { className: "sb-w-3 sb-h-3" }), menuContent: _jsx("div", { className: "sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[150px]", children: _jsxs("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [_jsxs("div", { className: "sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start", children: [_jsx("button", { onClick: () => {
+                                    if (closeMenuFunction) {
+                                        closeMenuFunction();
+                                    }
+                                }, className: "hover:sb-scale-150", children: _jsx(LeftArrowIcon, { className: "sb-w-3 sb-h-3" }) }), _jsx("h3", { children: "Quality" })] }), _jsx("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }), _jsx("div", { className: "sb-px-5  sb-flex sb-flex-col sb-gap-3 sb-items-start", children: qualities.map((q, i) => {
+                            return (_jsx(QualityOption, { isSelected: currentQualitySrc === q.src, quality: q, onClick: () => {
+                                    const source = qualities.find((_q) => q.label == _q.label);
+                                    if (source && source.src != currentQualitySrc) {
+                                        player === null || player === void 0 ? void 0 : player.src(source.src);
+                                        const currentTime = player === null || player === void 0 ? void 0 : player.currentTime();
+                                        setCurrentQualitySrc(source.src);
+                                        player === null || player === void 0 ? void 0 : player.currentTime(currentTime);
+                                        player === null || player === void 0 ? void 0 : player.play();
+                                    }
+                                } }, `quality-${q.label}-${i}`));
+                        }) })] }) }), close: (fn) => {
             setCloseMenuFunction(() => fn);
@@ -52,0 +43,0 @@ } }));

dist/components/Slider/index.d.ts

@@ -9,3 +9,3 @@ import React, { InputHTMLAttributes } from "react";
 } & InputHTMLAttributes<HTMLInputElement>;
-declare const Slider: ({ value, handleValueChange, min, max, ...rest }: Props) => React.JSX.Element;
+declare const Slider: ({ value, handleValueChange, min, max, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Slider;

dist/components/Slider/index.js

@@ -12,7 +12,7 @@ var __rest = (this && this.__rest) || function (s, e) {
 };
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 import "./style.css";
 const Slider = (_a) => {
     var { value, handleValueChange, min = 0, max = 100 } = _a, rest = __rest(_a, ["value", "handleValueChange", "min", "max"]);
-    return (React.createElement("input", Object.assign({ type: "range", min: min, max: max, value: value, onChange: handleValueChange, className: "sb-w-full sb-h-2 sb-bg-transparent sb-bg-opacity-50 sb-rounded-lg sb-appearance-none sb-cursor-pointer sb-range-slider sb-slider-thumb " +
+    return (_jsx("input", Object.assign({ type: "range", min: min, max: max, value: value, onChange: handleValueChange, className: "sb-w-full sb-h-2 sb-bg-transparent sb-bg-opacity-50 sb-rounded-lg sb-appearance-none sb-cursor-pointer sb-range-slider sb-slider-thumb " +
             rest.className, style: {
@@ -19,0 +19,0 @@ background: `linear-gradient(to right, #f97316 ${value}%, #30303070 ${value}%)`,

dist/components/SoftBuildersVideoPlayer/index.d.ts

@@ -12,3 +12,3 @@ import React from "react";
 };
-declare const SoftBuildersVideoPlayer: React.MemoExoticComponent<(<T>({ options, notes, chapters, startTime, handleSaveNoteAction, onPlay, onPause, }: Props<T>) => React.JSX.Element)>;
+declare const SoftBuildersVideoPlayer: React.MemoExoticComponent<(<T>({ options, notes, chapters, startTime, handleSaveNoteAction, onPlay, onPause, }: Props<T>) => import("react/jsx-runtime").JSX.Element)>;
 export default SoftBuildersVideoPlayer;

dist/components/SoftBuildersVideoPlayer/index.js

@@ -1,2 +0,3 @@
-import React, { memo, useEffect, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { memo, useEffect, useState } from "react";
 import VideoPlayerComponent from "../VideoPlayerComponent";
@@ -46,3 +47,3 @@ import { convertSRTtoVTT } from "../../utils";
     const id = (Date.now() + Math.random() * 100).toString();
-    return (React.createElement(VideoPlayerComponent, { id: id, chapters: chapters, options: Object.assign(Object.assign({}, options), { tracks }), notes: notes, startTime: startTime, handleSaveNoteAction: handleSaveNoteAction, onPause: onPause, onPlay: onPlay }));
+    return (_jsx(VideoPlayerComponent, { id: id, chapters: chapters, options: Object.assign(Object.assign({}, options), { tracks }), notes: notes, startTime: startTime, handleSaveNoteAction: handleSaveNoteAction, onPause: onPause, onPlay: onPlay }));
 };
@@ -49,0 +50,0 @@ const SoftBuildersVideoPlayer = memo(Component, (prevProps, nextProps) => {

dist/components/SubtitleMenu/index.d.ts

@@ -1,4 +0,3 @@
-import React from "react";
 type SubtitleMenuProps = {};
-declare const SubtitleMenu: ({}: SubtitleMenuProps) => React.JSX.Element;
+declare const SubtitleMenu: ({}: SubtitleMenuProps) => import("react/jsx-runtime").JSX.Element;
 export default SubtitleMenu;

dist/components/SubtitleMenu/index.js

@@ -1,2 +0,3 @@
-import React, { useEffect, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import MenuButton from "../MenuButton";
@@ -6,6 +7,3 @@ import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
 const SubtitleOption = ({ isSelected, subtitle, onClick, }) => {
-    return (React.createElement("button", { className: "hover:sb-text-orange-500 sb-p-2", onClick: onClick },
-        React.createElement("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2" },
-            React.createElement("div", { className: "sb-col-span-3" }, isSelected ? React.createElement(CheckedIcon, { className: "sb-w-5 sb-h-5" }) : React.createElement("div", null)),
-            React.createElement("p", { className: "sb-text-left sb-col-span-9" }, subtitle.label))));
+    return (_jsx("button", { className: "hover:sb-text-orange-500 sb-p-2", onClick: onClick, 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 })] }) }));
 };
@@ -35,18 +33,11 @@ const SubtitleMenu = ({}) => {
     }, [player]);
-    return (React.createElement(MenuButton, { buttonContent: React.createElement(SubtitlesIcon, { className: "sb-w-3 sb-h-3" }), menuContent: React.createElement("div", { className: "sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[150px]" },
-            React.createElement("div", { className: "sb-flex sb-flex-col sb-gap-3" },
-                React.createElement("div", { className: "sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start" },
-                    React.createElement("button", { onClick: () => {
-                            if (closeMenuFunction) {
-                                closeMenuFunction();
-                            }
-                        }, className: "hover:sb-scale-150" },
-                        React.createElement(LeftArrowIcon, { className: "sb-w-3 sb-h-3" })),
-                    React.createElement("h3", null, "Subtitle")),
-                React.createElement("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
-                React.createElement("div", { className: "sb-px-5  sb-flex sb-flex-col sb-gap-3 sb-items-start" }, subtitles.map((q, i) => {
-                    return (React.createElement(SubtitleOption, { key: `subtitle-${q.label}-${i}`, isSelected: q.mode === "showing", subtitle: q, onClick: () => {
-                            handleSelectSubtitle(q);
-                        } }));
-                })))), close: (fn) => {
+    return (_jsx(MenuButton, { buttonContent: _jsx(SubtitlesIcon, { className: "sb-w-3 sb-h-3" }), menuContent: _jsx("div", { className: "sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[150px]", children: _jsxs("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [_jsxs("div", { className: "sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start", children: [_jsx("button", { onClick: () => {
+                                    if (closeMenuFunction) {
+                                        closeMenuFunction();
+                                    }
+                                }, className: "hover:sb-scale-150", children: _jsx(LeftArrowIcon, { className: "sb-w-3 sb-h-3" }) }), _jsx("h3", { children: "Subtitle" })] }), _jsx("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }), _jsx("div", { className: "sb-px-5  sb-flex sb-flex-col sb-gap-3 sb-items-start", children: subtitles.map((q, i) => {
+                            return (_jsx(SubtitleOption, { isSelected: q.mode === "showing", subtitle: q, onClick: () => {
+                                    handleSelectSubtitle(q);
+                                } }, `subtitle-${q.label}-${i}`));
+                        }) })] }) }), close: (fn) => {
             setCloseMenuFunction(() => fn);
@@ -53,0 +44,0 @@ } }));

dist/components/TimeSlider/index.d.ts

@@ -1,2 +0,1 @@
-import React from "react";
 import { SoftBuildersVideoPlayerChapter } from "../../types";
@@ -6,3 +5,3 @@ type Props = {
 };
-declare const TimeSlider: ({ chapters }: Props) => React.JSX.Element;
+declare const TimeSlider: ({ chapters }: Props) => import("react/jsx-runtime").JSX.Element;
 export default TimeSlider;

dist/components/TimeSlider/index.js

@@ -1,2 +0,3 @@
-import React, { useEffect, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import Slider from "../Slider";
@@ -43,9 +44,6 @@ import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
     }, [chapters, duration]);
-    return (React.createElement("div", { className: " sb-w-full sb-h-2 sb-flex sb-items-center sb-justify-center" },
-        React.createElement("div", { className: "sb-absolute sb-top-0 sb-left-0 sb-w-full sb-z-10" },
-            React.createElement(Slider, { value: timeSlider, handleValueChange: handleValueChange, min: MIN, max: MAX, style: {
-                    background: "transparent",
-                } })),
-        React.createElement("div", { className: "sb-absolute sb-top-0 sb-left-0 sb-w-full sb-h-2 sb-bg-slate-400 sb-rounded-md", style: {
-                background: `
+    return (_jsxs("div", { className: " sb-w-full sb-h-2 sb-flex sb-items-center sb-justify-center", children: [_jsx("div", { className: "sb-absolute sb-top-0 sb-left-0 sb-w-full sb-z-10", children: _jsx(Slider, { value: timeSlider, handleValueChange: handleValueChange, min: MIN, max: MAX, style: {
+                        background: "transparent",
+                    } }) }), _jsx("div", { className: "sb-absolute sb-top-0 sb-left-0 sb-w-full sb-h-2 sb-bg-slate-400 sb-rounded-md", style: {
+                    background: `
           linear-gradient(to right,
@@ -60,3 +58,3 @@ #f97316 0%,
         `,
-                maskImage: `
+                    maskImage: `
           linear-gradient(to right,
@@ -66,7 +64,7 @@ ${maskCuttes}
         `,
-                maskSize: "100% 100%",
-                maskRepeat: "no-repeat",
-            } })));
+                    maskSize: "100% 100%",
+                    maskRepeat: "no-repeat",
+                } })] }));
 };
 export default TimeSlider;
 //# sourceMappingURL=index.js.map

dist/components/TimeSliderContainer/index.d.ts

@@ -1,2 +0,1 @@
-import React from "react";
 import { SoftBuildersVideoPlayerChapter, SoftBuildersVideoPlayerNote } from "../../types";
@@ -7,3 +6,3 @@ type Props = {
 };
-declare const TimeSliderContainer: ({ notes, chapters }: Props) => React.JSX.Element;
+declare const TimeSliderContainer: ({ notes, chapters }: Props) => import("react/jsx-runtime").JSX.Element;
 export default TimeSliderContainer;

dist/components/TimeSliderContainer/index.js

@@ -1,2 +0,2 @@
-import React from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import NotesPanal from "../NotesPanal";
@@ -6,10 +6,5 @@ import ChaptersPanal from "../ChaptersPanal";
 const TimeSliderContainer = ({ notes, chapters }) => {
-    return (React.createElement("div", { id: "time-slider-container", className: "sb-w-full sb-relative sb-flex sb-items-center sb-justify-center" },
-        React.createElement("div", { id: "notes-panal", className: "sb-absolute sb-w-full sb-h-full sb-top-[27%] sb-left-0" },
-            React.createElement(NotesPanal, { notes: notes })),
-        React.createElement("div", { className: "sb-absolute sb-w-full sb-h-full sb-top-0 sb-left-0" },
-            React.createElement(ChaptersPanal, { chapters: chapters })),
-        React.createElement(TimeSlider, { chapters: chapters })));
+    return (_jsxs("div", { id: "time-slider-container", className: "sb-w-full sb-relative sb-flex sb-items-center sb-justify-center", children: [_jsx("div", { id: "notes-panal", className: "sb-absolute sb-w-full sb-h-full sb-top-[27%] sb-left-0", children: _jsx(NotesPanal, { notes: notes }) }), _jsx("div", { className: "sb-absolute sb-w-full sb-h-full sb-top-0 sb-left-0", children: _jsx(ChaptersPanal, { chapters: chapters }) }), _jsx(TimeSlider, { chapters: chapters })] }));
 };
 export default TimeSliderContainer;
 //# sourceMappingURL=index.js.map

dist/components/Tooltip/index.d.ts

@@ -6,3 +6,3 @@ import React from "react";
 };
-declare const Tooltip: ({ open, children }: Props) => React.JSX.Element;
+declare const Tooltip: ({ open, children }: Props) => import("react/jsx-runtime").JSX.Element;
 export default Tooltip;

dist/components/Tooltip/index.js

@@ -1,8 +0,8 @@
-import React from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
 const Tooltip = ({ open, children }) => {
     if (!open)
         return null;
-    return (React.createElement("div", { className: "sb-absolute sb-bottom-full sb-mb-2 sb-left-1/2 sb-transform sb--translate-x-1/2 sb-z-10 sb-whitespace-nowrap" }, children));
+    return (_jsx("div", { className: "sb-absolute sb-bottom-full sb-mb-2 sb-left-1/2 sb-transform sb--translate-x-1/2 sb-z-10 sb-whitespace-nowrap", children: children }));
 };
 export default Tooltip;
 //# sourceMappingURL=index.js.map

dist/components/VideoPlayerComponent/index.d.ts

@@ -1,2 +0,1 @@
-import React from "react";
 import "video.js/dist/video-js.css";
@@ -16,3 +15,3 @@ import { SoftBuildersVideoPlayerChapter, SoftBuildersVideoPlayerNote, SoftBuildersVideoPlayerOptions } from "../../types";
 };
-declare const VideoPlayerComponent: <T>({ id, options, notes, chapters, startTime, handleSaveNoteAction, onPlay, onPause, }: Props<T>) => React.JSX.Element;
+declare const VideoPlayerComponent: <T>({ id, options, notes, chapters, startTime, handleSaveNoteAction, onPlay, onPause, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
 export default VideoPlayerComponent;

dist/components/VideoPlayerComponent/index.js

@@ -1,2 +0,3 @@
-import React, { useEffect, useRef, useState } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
 import ReactDOM from "react-dom/client";
@@ -20,3 +21,3 @@ import videojs from "video.js";
             }
-            bigPlayButtonRoot[id].render(React.createElement(BigPlayButton, { player: player, isPaused: isPaused, setIsPaused: setIsPaused }));
+            bigPlayButtonRoot[id].render(_jsx(BigPlayButton, { player: player, isPaused: isPaused, setIsPaused: setIsPaused }));
         }
@@ -36,4 +37,3 @@ }
             element.style.display = "block";
-            controlBarRoot[id].render(React.createElement(SoftBuildersVideoPlayerProvider, null,
-                React.createElement(ControlBar, { player: player, isPaused: isPaused, setIsPaused: setIsPaused, duration: duration, notes: notes, chapters: chapters, seekStep: seekStep, handleSaveNoteAction: handleSaveNoteAction })));
+            controlBarRoot[id].render(_jsx(SoftBuildersVideoPlayerProvider, { children: _jsx(ControlBar, { player: player, isPaused: isPaused, setIsPaused: setIsPaused, duration: duration, notes: notes, chapters: chapters, seekStep: seekStep, handleSaveNoteAction: handleSaveNoteAction }) }));
         }
@@ -137,7 +137,5 @@ }
     }, []);
-    return (React.createElement("div", { id: `video-container-${id}`, className: "sb-relative sb-rounded-md sb-overflow-hidden" },
-        React.createElement("div", { "data-vjs-player": true },
-            React.createElement("div", { ref: videoRef }))));
+    return (_jsx("div", { id: `video-container-${id}`, className: "sb-relative sb-rounded-md sb-overflow-hidden", children: _jsx("div", { "data-vjs-player": true, children: _jsx("div", { ref: videoRef }) }) }));
 };
 export default VideoPlayerComponent;
 //# sourceMappingURL=index.js.map

dist/components/VideoPlayerComponent/provider.d.ts

@@ -16,4 +16,4 @@ import React, { ReactNode } from "react";
     children: ReactNode;
-}) => React.JSX.Element;
+}) => import("react/jsx-runtime").JSX.Element;
 export declare const useSoftBuildersVideoPlayerContext: () => SoftBuildersVideoPlayerContextType;
 export {};

dist/components/VideoPlayerComponent/provider.js

@@ -1,2 +0,3 @@
-import React, { createContext, useContext, useState, useEffect, } from "react";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useEffect, } from "react";
 const SoftBuildersVideoPlayerContext = createContext(undefined);
@@ -14,3 +15,3 @@ // Create a provider component
     }, [downloadedBufferTime]);
-    return (React.createElement(SoftBuildersVideoPlayerContext.Provider, { value: {
+    return (_jsx(SoftBuildersVideoPlayerContext.Provider, { value: {
             player,
@@ -27,3 +28,3 @@ setPlayer,
             downloadedBufferPercentage,
-        } }, children));
+        }, children: children }));
 };
@@ -30,0 +31,0 @@ // Custom hook to use the context

dist/components/VolumeSlider/index.d.ts

@@ -1,4 +0,3 @@
-import React from "react";
 type Props = {};
-declare const VolumeSlider: ({}: Props) => React.JSX.Element;
+declare const VolumeSlider: ({}: Props) => import("react/jsx-runtime").JSX.Element;
 export default VolumeSlider;

dist/components/VolumeSlider/index.js

@@ -1,2 +0,3 @@
-import React, { useEffect, useState } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useState } from "react";
 import Slider from "../Slider";
@@ -23,7 +24,5 @@ import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
     };
-    return (React.createElement("div", { className: "sb-flex sb-items-center sb-gap-2" },
-        volume === 0 || (player === null || player === void 0 ? void 0 : player.muted()) ? (React.createElement(MuteIcon, { className: "sb-w-3 sb-h-3" })) : (React.createElement(UnmuteIcon, { className: "sb-w-3 sb-h-3" })),
-        React.createElement(Slider, { value: volume, handleValueChange: handleValueChange, min: MIN, max: MAX })));
+    return (_jsxs("div", { className: "sb-flex sb-items-center sb-gap-2", children: [volume === 0 || (player === null || player === void 0 ? void 0 : player.muted()) ? (_jsx(MuteIcon, { className: "sb-w-3 sb-h-3" })) : (_jsx(UnmuteIcon, { className: "sb-w-3 sb-h-3" })), _jsx(Slider, { value: volume, handleValueChange: handleValueChange, min: MIN, max: MAX })] }));
 };
 export default VolumeSlider;
 //# sourceMappingURL=index.js.map

dist/images/index.d.ts

@@ -1,14 +0,14 @@
-export { default as BackwardIcon } from "./BackwardIcon";
-export { default as CheckedIcon } from "./CheckedIcon";
-export { default as ClosedNoteIcon } from "./ClosedNoteIcon";
-export { default as ForwardIcon } from "./ForwardIcon";
-export { default as FullScreenIcon } from "./FullScreenIcon";
-export { default as LeftArrowIcon } from "./LeftArrowIcon";
-export { default as MuteIcon } from "./MuteIcon";
-export { default as NoteIcon } from "./NoteIcon";
-export { default as OpenNoteIcon } from "./OpenNoteIcon";
-export { default as PauseIcon } from "./PauseIcon";
-export { default as PlayIcon } from "./PlayIcon";
-export { default as SettingsIcon } from "./SettingsIcon";
-export { default as UnmuteIcon } from "./UnmuteIcon";
-export { default as SubtitlesIcon } from "./SubtitlesIcon";
+export { default as BackwardIcon } from "./../components/icons/BackwardIcon";
+export { default as CheckedIcon } from "./../components/icons/CheckedIcon";
+export { default as ClosedNoteIcon } from "./../components/icons/ClosedNoteIcon";
+export { default as ForwardIcon } from "./../components/icons/ForwardIcon";
+export { default as FullScreenIcon } from "./../components/icons/FullScreenIcon";
+export { default as LeftArrowIcon } from "./../components/icons/LeftArrowIcon";
+export { default as MuteIcon } from "./../components/icons/MuteIcon";
+export { default as NoteIcon } from "./../components/icons/NoteIcon";
+export { default as OpenNoteIcon } from "./../components/icons/OpenNoteIcon";
+export { default as PauseIcon } from "./../components/icons/PauseIcon";
+export { default as PlayIcon } from "./../components/icons/PlayIcon";
+export { default as SettingsIcon } from "./../components/icons/SettingsIcon";
+export { default as UnmuteIcon } from "./../components/icons/UnmuteIcon";
+export { default as SubtitlesIcon } from "./../components/icons/SubtitlesIcon";

dist/images/index.js

@@ -1,15 +0,15 @@
-export { default as BackwardIcon } from "./BackwardIcon";
-export { default as CheckedIcon } from "./CheckedIcon";
-export { default as ClosedNoteIcon } from "./ClosedNoteIcon";
-export { default as ForwardIcon } from "./ForwardIcon";
-export { default as FullScreenIcon } from "./FullScreenIcon";
-export { default as LeftArrowIcon } from "./LeftArrowIcon";
-export { default as MuteIcon } from "./MuteIcon";
-export { default as NoteIcon } from "./NoteIcon";
-export { default as OpenNoteIcon } from "./OpenNoteIcon";
-export { default as PauseIcon } from "./PauseIcon";
-export { default as PlayIcon } from "./PlayIcon";
-export { default as SettingsIcon } from "./SettingsIcon";
-export { default as UnmuteIcon } from "./UnmuteIcon";
-export { default as SubtitlesIcon } from "./SubtitlesIcon";
+export { default as BackwardIcon } from "./../components/icons/BackwardIcon";
+export { default as CheckedIcon } from "./../components/icons/CheckedIcon";
+export { default as ClosedNoteIcon } from "./../components/icons/ClosedNoteIcon";
+export { default as ForwardIcon } from "./../components/icons/ForwardIcon";
+export { default as FullScreenIcon } from "./../components/icons/FullScreenIcon";
+export { default as LeftArrowIcon } from "./../components/icons/LeftArrowIcon";
+export { default as MuteIcon } from "./../components/icons/MuteIcon";
+export { default as NoteIcon } from "./../components/icons/NoteIcon";
+export { default as OpenNoteIcon } from "./../components/icons/OpenNoteIcon";
+export { default as PauseIcon } from "./../components/icons/PauseIcon";
+export { default as PlayIcon } from "./../components/icons/PlayIcon";
+export { default as SettingsIcon } from "./../components/icons/SettingsIcon";
+export { default as UnmuteIcon } from "./../components/icons/UnmuteIcon";
+export { default as SubtitlesIcon } from "./../components/icons/SubtitlesIcon";
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "softbuilders-react-video-player",
   "description": "Standalone video player component",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "main": "dist/index.js",
@@ -14,6 +14,6 @@ "types": "dist/index.d.ts",
     "build:css:watch": "npx postcss src/styles/tailwind.css -o dist/styles/tailwind.css --watch && npx postcss src/components/Slider/style.css -o dist/components/Slider/style.css --watch && npx postcss src/components/VideoPlayerComponent/style/style.css -o dist/components/VideoPlayerComponent/style/style.css --watch",
-    "build": "svgr src/images --out-dir src/images && npm run build:css && tsc",
+    "build": "tsup src/index.ts --dts --format esm,cjs --out-dir dist && copyfiles -u 1 src/components/**/* dist && npm run build:css && tsc",
     "build:watch": "tsc --watch",
     "start": "concurrently \"npm run build:css:watch\" \"npm run build:watch\"",
-    "build:icons": "svgr src/images --out-dir src/images"
+    "build:icons": "svgr src/images/icons --out-dir src/components/icons"
   },
@@ -28,2 +28,5 @@ "keywords": [],
   },
+  "dependencies": {
+    "typescript": "^5.6.2"
+  },
   "devDependencies": {
@@ -40,4 +43,6 @@ "@svgr/webpack": "^8.1.0",
     "tailwindcss": "^3.4.11",
-    "typescript": "^5.6.2"
+    "typescript": "^5.6.2",
+    "copyfiles": "^2.4.1",
+    "tsup": "^8.2.4"
   }
 }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

258506

increased by130.83%

Number of package files

169

increased by101.19%

Lines of code

5487

increased by204.16%

Worsened metrics

Dependency count

4

increased by33.33%

Dev dependency count

13

increased by18.18%

Number of low supply chain risk alerts

5

increased by400%

Number of medium supply chain risk alerts

3

increased by200%

Dependency changes

• + Addedtypescript@^5.6.2

• + Addedtypescript@5.8.2(transitive)