softbuilders-react-video-player 1.1.20 → 1.1.21
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ControlBar/index.js +3 -2
- package/dist/components/ControlBar/index.js.map +1 -1
- package/dist/components/ControlBar/index.tsx +3 -3
- package/dist/components/VideoPlayerComponent/style/style.css +3 -1
- package/dist/components/VolumeSlider/index.d.ts +2 -1
- package/dist/components/VolumeSlider/index.js +5 -8
- package/dist/components/VolumeSlider/index.js.map +1 -1
- package/dist/components/VolumeSlider/index.tsx +12 -14
- package/dist/index.css +22 -7
- package/dist/index.mjs +8 -6
- package/dist/styles/tailwind.css +19 -7
- package/package.json +1 -1
|
@@ -14,6 +14,7 @@ import { BackwardIcon, ForwardIcon, FullScreenIcon, PauseIcon, PlayIcon, } from
|
|
|
14
14
|
const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, id, handleSaveNoteAction, }) => {
|
|
15
15
|
const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
|
|
16
16
|
const [width, setWidth] = useState(0);
|
|
17
|
+
const [isSeeking, setIsSeeking] = useState(true);
|
|
17
18
|
const seek = (duration) => {
|
|
18
19
|
const currentTime = Number((player === null || player === void 0 ? void 0 : player.currentTime()) || 0);
|
|
19
20
|
player === null || player === void 0 ? void 0 : player.currentTime(currentTime + duration);
|
|
@@ -50,14 +51,14 @@ const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters,
|
|
|
50
51
|
}, 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: (e) => {
|
|
51
52
|
e.preventDefault();
|
|
52
53
|
seek(seekStep);
|
|
53
|
-
}, children: _jsx(ForwardIcon, { className: "sb-w-3 sb-h-3" }) }),
|
|
54
|
+
}, children: _jsx(ForwardIcon, { className: "sb-w-3 sb-h-3" }) }), (isSeeking || width > 400) && (_jsx("div", { className: `${width < 400 ? "sb-w-[0px] sb-ml-0 sb-mr-0" : "sb-w-full"}`, children: _jsxs("div", { style: width < 400
|
|
54
55
|
? {
|
|
55
56
|
width: `${width * 0.8}px`,
|
|
56
57
|
left: "10%",
|
|
57
58
|
}
|
|
58
59
|
: { width: "100%" }, className: `flex gap-2 ${width < 400
|
|
59
60
|
? "absolute -sb-translate-y-9"
|
|
60
|
-
: "-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 }) }), _jsx(QualityMenu, {}), _jsx("button", { onClick: (e) => {
|
|
61
|
+
: "-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, {}), _jsx("button", { onClick: (e) => {
|
|
61
62
|
e.preventDefault();
|
|
62
63
|
e.stopPropagation();
|
|
63
64
|
if (player === null || player === void 0 ? void 0 : player.isFullscreen()) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ControlBar/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,gBAAgB,MAAM,qBAAqB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAC/C,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAC/C,OAAO,mBAAmB,MAAM,wBAAwB,CAAC;AACzD,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAC7C,OAAO,kBAAkB,MAAM,uBAAuB,CAAC;AAKvD,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AACrF,OAAO,YAAY,MAAM,iBAAiB,CAAC;AAC3C,OAAO,EACL,YAAY,EACZ,WAAW,EACX,cAAc,EACd,SAAS,EACT,QAAQ,GACT,MAAM,cAAc,CAAC;AActB,MAAM,UAAU,GAAG,CAAK,EACtB,MAAM,EACN,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,QAAQ,GAAG,CAAC,EACZ,EAAE,EACF,oBAAoB,GACX,EAAE,EAAE;IACb,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,iCAAiC,EAAE,CAAC;IACvE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ControlBar/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -47,7 +47,7 @@ const ControlBar = <T,>({
|
|
|
47
47
|
}: Props<T>) => {
|
|
48
48
|
const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
|
|
49
49
|
const [width, setWidth] = useState<number>(0);
|
|
50
|
-
|
|
50
|
+
const [isSeeking, setIsSeeking] = useState(true);
|
|
51
51
|
const seek = (duration: number) => {
|
|
52
52
|
const currentTime = Number(player?.currentTime() || 0);
|
|
53
53
|
player?.currentTime(currentTime + duration);
|
|
@@ -116,7 +116,7 @@ const ControlBar = <T,>({
|
|
|
116
116
|
<ForwardIcon className="sb-w-3 sb-h-3" />
|
|
117
117
|
</button>
|
|
118
118
|
|
|
119
|
-
{
|
|
119
|
+
{(isSeeking || width > 400) && (
|
|
120
120
|
<div
|
|
121
121
|
className={`${
|
|
122
122
|
width < 400 ? "sb-w-[0px] sb-ml-0 sb-mr-0" : "sb-w-full"
|
|
@@ -146,7 +146,7 @@ const ControlBar = <T,>({
|
|
|
146
146
|
)}
|
|
147
147
|
|
|
148
148
|
<div className="sb-h-full">
|
|
149
|
-
<VolumeSlider width={width} />
|
|
149
|
+
<VolumeSlider width={width} setIsSeeking={(val) => setIsSeeking(val)} />
|
|
150
150
|
</div>
|
|
151
151
|
|
|
152
152
|
<QualityMenu />
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
type Props = {
|
|
2
2
|
width?: number;
|
|
3
|
+
setIsSeeking?: (val: boolean) => void;
|
|
3
4
|
};
|
|
4
|
-
declare const VolumeSlider: ({ width }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
5
|
+
declare const VolumeSlider: ({ width, setIsSeeking }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
5
6
|
export default VolumeSlider;
|
|
@@ -4,7 +4,7 @@ import Slider from "../Slider";
|
|
|
4
4
|
import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
|
|
5
5
|
import { MuteIcon, UnmuteIcon } from "../../images";
|
|
6
6
|
const MIN = 0, MAX = 100;
|
|
7
|
-
const VolumeSlider = ({ width = 0 }) => {
|
|
7
|
+
const VolumeSlider = ({ width = 0, setIsSeeking }) => {
|
|
8
8
|
const { player } = useSoftBuildersVideoPlayerContext();
|
|
9
9
|
const [isVisible, setVisible] = useState(false);
|
|
10
10
|
const [volume, setVolume] = useState(0);
|
|
@@ -14,6 +14,7 @@ const VolumeSlider = ({ width = 0 }) => {
|
|
|
14
14
|
const toggleVisiblity = (e) => {
|
|
15
15
|
e.preventDefault();
|
|
16
16
|
e.stopPropagation();
|
|
17
|
+
setIsSeeking(isVisible);
|
|
17
18
|
setVisible((prev) => !prev);
|
|
18
19
|
};
|
|
19
20
|
const handleValueChange = (e) => {
|
|
@@ -29,13 +30,9 @@ const VolumeSlider = ({ width = 0 }) => {
|
|
|
29
30
|
player === null || player === void 0 ? void 0 : player.muted(false);
|
|
30
31
|
}
|
|
31
32
|
};
|
|
32
|
-
return (_jsxs("div", { className: `sb-flex sb-flex-col-reverse ${
|
|
33
|
-
? "
|
|
34
|
-
: !
|
|
35
|
-
? "sb-hidden"
|
|
36
|
-
: ""} -sb-rotate-90 -sb-translate-y-2 sb-relative ${width < 400
|
|
37
|
-
? "sb-static sb-w-16 sb-rotate-0 sb-translate-y-0 "
|
|
38
|
-
: "sb-translate-y-0"}`, children: _jsx(Slider, { value: volume, handleValueChange: handleValueChange, min: MIN, max: MAX, className: "!sb-w-16" }) }) })] }));
|
|
33
|
+
return (_jsxs("div", { className: `sb-flex ${isVisible ? "" : "-sb-ml-2"} sb-flex-col-reverse ${false ? "!sb-flex-row !sb-items-end " : ""} sb-items-center sb-justify-start sb-gap-1 sb-h-full`, children: [_jsx("div", { className: `sb-flex sb-relative ${width < 400 ? "" : ""} sb-top-1 sb-items-end`, 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
|
|
34
|
+
? "sb-w-[22px] sb-opacity-100 sb-visible"
|
|
35
|
+
: "sb-w-0 sb-opacity-0 sb-invisible"} -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" }) }) })] }));
|
|
39
36
|
};
|
|
40
37
|
export default VolumeSlider;
|
|
41
38
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VolumeSlider/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AACrF,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACpD,MAAM,GAAG,GAAG,CAAC,EACX,GAAG,GAAG,GAAG,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VolumeSlider/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,MAAM,MAAM,WAAW,CAAC;AAC/B,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AACrF,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AACpD,MAAM,GAAG,GAAG,CAAC,EACX,GAAG,GAAG,GAAG,CAAC;AAKZ,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAE,YAAY,EAAS,EAAE,EAAE;IAC1D,MAAM,EAAE,MAAM,EAAE,GAAG,iCAAiC,EAAE,CAAC;IACvD,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxC,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EAAE,EAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,EAAE,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC;IACvE,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACb,MAAM,eAAe,GAAG,CAAC,CAAM,EAAE,EAAE;QACjC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,YAAY,CAAC,SAAS,CAAC,CAAC;QACxB,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,CAAC;IACF,MAAM,iBAAiB,GAAG,CAAC,CAAsC,EAAE,EAAE;QACnE,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,MAAM,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACzC,SAAS,CAAC,SAAS,CAAC,CAAC;QACrB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC;QAChC,IAAI,SAAS,KAAK,CAAC,EAAE,CAAC;YACpB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,CAAC;IACF,OAAO,CACL,eACE,SAAS,EAAE,WAAW,SAAS,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,UAAU,yBAC/C,KAAK,CAAC,CAAC,CAAC,6BAA6B,CAAC,CAAC,CAAC,EAC1C,sDAAsD,aAGtD,cACE,SAAS,EAAE,uBACT,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EACrB,wBAAwB,EACxB,OAAO,EAAE,eAAe,YAEvB,MAAM,KAAK,CAAC,KAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EAAE,CAAA,CAAC,CAAC,CAAC,CACjC,KAAC,QAAQ,IACP,SAAS,EAAE,iBAAiB,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,iBAAiB,GACnE,CACH,CAAC,CAAC,CAAC,CACF,KAAC,UAAU,IACT,SAAS,EAAE,iBAAiB,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,EAAE,gBAAgB,GACjE,CACH,GACG,EAEN,cAAK,SAAS,EAAC,4CAA4C,YAEzD,cACE,SAAS,EAAE,oDACT,SAAS;wBACP,CAAC,CAAC,uCAAuC;wBACzC,CAAC,CAAC,kCACN,iDACE,KAAK,CAAC,CAAC,CAAC,iDAAiD,CAAC,CAAC,CAAC,EAC9D,EAAE,YAEF,KAAC,MAAM,IACL,KAAK,EAAE,MAAM,EACb,iBAAiB,EAAE,iBAAiB,EACpC,GAAG,EAAE,GAAG,EACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAC,UAAU,GACpB,GACE,GACF,IACF,CACP,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,YAAY,CAAC"}
|
|
@@ -6,8 +6,9 @@ const MIN = 0,
|
|
|
6
6
|
MAX = 100;
|
|
7
7
|
type Props = {
|
|
8
8
|
width?: number;
|
|
9
|
+
setIsSeeking?: (val: boolean) => void;
|
|
9
10
|
};
|
|
10
|
-
const VolumeSlider = ({ width = 0 }: Props) => {
|
|
11
|
+
const VolumeSlider = ({ width = 0, setIsSeeking }: Props) => {
|
|
11
12
|
const { player } = useSoftBuildersVideoPlayerContext();
|
|
12
13
|
const [isVisible, setVisible] = useState(false);
|
|
13
14
|
const [volume, setVolume] = useState(0);
|
|
@@ -17,6 +18,7 @@ const VolumeSlider = ({ width = 0 }: Props) => {
|
|
|
17
18
|
const toggleVisiblity = (e: any) => {
|
|
18
19
|
e.preventDefault();
|
|
19
20
|
e.stopPropagation();
|
|
21
|
+
setIsSeeking(isVisible);
|
|
20
22
|
setVisible((prev) => !prev);
|
|
21
23
|
};
|
|
22
24
|
const handleValueChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
@@ -33,8 +35,8 @@ const VolumeSlider = ({ width = 0 }: Props) => {
|
|
|
33
35
|
};
|
|
34
36
|
return (
|
|
35
37
|
<div
|
|
36
|
-
className={`sb-flex sb-flex-col-reverse ${
|
|
37
|
-
|
|
38
|
+
className={`sb-flex ${isVisible ? "" : "-sb-ml-2"} sb-flex-col-reverse ${
|
|
39
|
+
false ? "!sb-flex-row !sb-items-end " : ""
|
|
38
40
|
} sb-items-center sb-justify-start sb-gap-1 sb-h-full`}
|
|
39
41
|
>
|
|
40
42
|
{/* Mute/Unmute Icon */}
|
|
@@ -55,19 +57,15 @@ const VolumeSlider = ({ width = 0 }: Props) => {
|
|
|
55
57
|
)}
|
|
56
58
|
</div>
|
|
57
59
|
{/* Slider Wrapper */}
|
|
58
|
-
<div className="sb-flex
|
|
60
|
+
<div className="sb-flex sb-items-center sb-justify-center">
|
|
59
61
|
{/* Rotated Slider */}
|
|
60
62
|
<div
|
|
61
|
-
className={
|
|
62
|
-
isVisible
|
|
63
|
-
? "
|
|
64
|
-
:
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
} -sb-rotate-90 -sb-translate-y-2 sb-relative ${
|
|
68
|
-
width < 400
|
|
69
|
-
? "sb-static sb-w-16 sb-rotate-0 sb-translate-y-0 "
|
|
70
|
-
: "sb-translate-y-0"
|
|
63
|
+
className={`sb-transition-all sb-ease-in-out sb-duration-500 ${
|
|
64
|
+
isVisible
|
|
65
|
+
? "sb-w-[22px] sb-opacity-100 sb-visible"
|
|
66
|
+
: "sb-w-0 sb-opacity-0 sb-invisible"
|
|
67
|
+
} -sb-rotate-90 -sb-translate-y-1 sb-relative ${
|
|
68
|
+
false ? "sb-static sb-w-16 sb-rotate-0 sb-translate-y-0 " : ""
|
|
71
69
|
}`}
|
|
72
70
|
>
|
|
73
71
|
<Slider
|
package/dist/index.css
CHANGED
|
@@ -39,6 +39,9 @@ input[type=range]::-moz-range-thumb {
|
|
|
39
39
|
background-color: transparent;
|
|
40
40
|
display: none;
|
|
41
41
|
}
|
|
42
|
+
.vjs-control-bar {
|
|
43
|
+
justify-content: center;
|
|
44
|
+
}
|
|
42
45
|
.video-js .vjs-big-play-button {
|
|
43
46
|
background-color: transparent;
|
|
44
47
|
display: block;
|
|
@@ -403,6 +406,12 @@ video {
|
|
|
403
406
|
[hidden] {
|
|
404
407
|
display: none;
|
|
405
408
|
}
|
|
409
|
+
.sb-visible {
|
|
410
|
+
visibility: visible;
|
|
411
|
+
}
|
|
412
|
+
.sb-invisible {
|
|
413
|
+
visibility: hidden;
|
|
414
|
+
}
|
|
406
415
|
.sb-static {
|
|
407
416
|
position: static;
|
|
408
417
|
}
|
|
@@ -454,8 +463,8 @@ video {
|
|
|
454
463
|
.sb-col-span-9 {
|
|
455
464
|
grid-column: span 9 / span 9;
|
|
456
465
|
}
|
|
457
|
-
.-sb-ml-
|
|
458
|
-
margin-left: -0.
|
|
466
|
+
.-sb-ml-2 {
|
|
467
|
+
margin-left: -0.5rem;
|
|
459
468
|
}
|
|
460
469
|
.sb-mb-2 {
|
|
461
470
|
margin-bottom: 0.5rem;
|
|
@@ -472,9 +481,6 @@ video {
|
|
|
472
481
|
.sb-grid {
|
|
473
482
|
display: grid;
|
|
474
483
|
}
|
|
475
|
-
.sb-hidden {
|
|
476
|
-
display: none;
|
|
477
|
-
}
|
|
478
484
|
.sb-h-1 {
|
|
479
485
|
height: 0.25rem;
|
|
480
486
|
}
|
|
@@ -502,6 +508,9 @@ video {
|
|
|
502
508
|
.\!sb-w-16 {
|
|
503
509
|
width: 4rem !important;
|
|
504
510
|
}
|
|
511
|
+
.sb-w-0 {
|
|
512
|
+
width: 0px;
|
|
513
|
+
}
|
|
505
514
|
.sb-w-1 {
|
|
506
515
|
width: 0.25rem;
|
|
507
516
|
}
|
|
@@ -536,8 +545,8 @@ video {
|
|
|
536
545
|
--tw-translate-y: -0px;
|
|
537
546
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
538
547
|
}
|
|
539
|
-
.-sb-translate-y-
|
|
540
|
-
--tw-translate-y: -0.
|
|
548
|
+
.-sb-translate-y-1 {
|
|
549
|
+
--tw-translate-y: -0.25rem;
|
|
541
550
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
542
551
|
}
|
|
543
552
|
.-sb-translate-y-9 {
|
|
@@ -712,6 +721,12 @@ video {
|
|
|
712
721
|
--tw-text-opacity: 1;
|
|
713
722
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
714
723
|
}
|
|
724
|
+
.sb-opacity-0 {
|
|
725
|
+
opacity: 0;
|
|
726
|
+
}
|
|
727
|
+
.sb-opacity-100 {
|
|
728
|
+
opacity: 1;
|
|
729
|
+
}
|
|
715
730
|
.sb-shadow-lg {
|
|
716
731
|
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
717
732
|
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|
package/dist/index.mjs
CHANGED
|
@@ -510,7 +510,7 @@ var SubIcon_default = SvgSubIcon;
|
|
|
510
510
|
import { jsx as jsx19, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
511
511
|
var MIN = 0;
|
|
512
512
|
var MAX = 100;
|
|
513
|
-
var VolumeSlider = ({ width = 0 }) => {
|
|
513
|
+
var VolumeSlider = ({ width = 0, setIsSeeking }) => {
|
|
514
514
|
const { player } = useSoftBuildersVideoPlayerContext();
|
|
515
515
|
const [isVisible, setVisible] = useState2(false);
|
|
516
516
|
const [volume, setVolume] = useState2(0);
|
|
@@ -520,6 +520,7 @@ var VolumeSlider = ({ width = 0 }) => {
|
|
|
520
520
|
const toggleVisiblity = (e) => {
|
|
521
521
|
e.preventDefault();
|
|
522
522
|
e.stopPropagation();
|
|
523
|
+
setIsSeeking(isVisible);
|
|
523
524
|
setVisible((prev) => !prev);
|
|
524
525
|
};
|
|
525
526
|
const handleValueChange = (e) => {
|
|
@@ -537,7 +538,7 @@ var VolumeSlider = ({ width = 0 }) => {
|
|
|
537
538
|
return /* @__PURE__ */ jsxs4(
|
|
538
539
|
"div",
|
|
539
540
|
{
|
|
540
|
-
className: `sb-flex sb-flex-col-reverse ${
|
|
541
|
+
className: `sb-flex ${isVisible ? "" : "-sb-ml-2"} sb-flex-col-reverse ${false ? "!sb-flex-row !sb-items-end " : ""} sb-items-center sb-justify-start sb-gap-1 sb-h-full`,
|
|
541
542
|
children: [
|
|
542
543
|
/* @__PURE__ */ jsx19(
|
|
543
544
|
"div",
|
|
@@ -557,10 +558,10 @@ var VolumeSlider = ({ width = 0 }) => {
|
|
|
557
558
|
)
|
|
558
559
|
}
|
|
559
560
|
),
|
|
560
|
-
/* @__PURE__ */ jsx19("div", { className: "sb-flex
|
|
561
|
+
/* @__PURE__ */ jsx19("div", { className: "sb-flex sb-items-center sb-justify-center", children: /* @__PURE__ */ jsx19(
|
|
561
562
|
"div",
|
|
562
563
|
{
|
|
563
|
-
className:
|
|
564
|
+
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"} -sb-rotate-90 -sb-translate-y-1 sb-relative ${false ? "sb-static sb-w-16 sb-rotate-0 sb-translate-y-0 " : ""}`,
|
|
564
565
|
children: /* @__PURE__ */ jsx19(
|
|
565
566
|
Slider_default,
|
|
566
567
|
{
|
|
@@ -1130,6 +1131,7 @@ var ControlBar = ({
|
|
|
1130
1131
|
}) => {
|
|
1131
1132
|
const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
|
|
1132
1133
|
const [width, setWidth] = useState12(0);
|
|
1134
|
+
const [isSeeking, setIsSeeking] = useState12(true);
|
|
1133
1135
|
const seek = (duration2) => {
|
|
1134
1136
|
const currentTime = Number((player == null ? void 0 : player.currentTime()) || 0);
|
|
1135
1137
|
player == null ? void 0 : player.currentTime(currentTime + duration2);
|
|
@@ -1181,7 +1183,7 @@ var ControlBar = ({
|
|
|
1181
1183
|
children: /* @__PURE__ */ jsx33(ForwardIcon_default, { className: "sb-w-3 sb-h-3" })
|
|
1182
1184
|
}
|
|
1183
1185
|
),
|
|
1184
|
-
/* @__PURE__ */ jsx33(
|
|
1186
|
+
(isSeeking || width > 400) && /* @__PURE__ */ jsx33(
|
|
1185
1187
|
"div",
|
|
1186
1188
|
{
|
|
1187
1189
|
className: `${width < 400 ? "sb-w-[0px] sb-ml-0 sb-mr-0" : "sb-w-full"}`,
|
|
@@ -1202,7 +1204,7 @@ var ControlBar = ({
|
|
|
1202
1204
|
)
|
|
1203
1205
|
}
|
|
1204
1206
|
),
|
|
1205
|
-
/* @__PURE__ */ jsx33("div", { className: "sb-h-full", children: /* @__PURE__ */ jsx33(VolumeSlider_default, { width }) }),
|
|
1207
|
+
/* @__PURE__ */ jsx33("div", { className: "sb-h-full", children: /* @__PURE__ */ jsx33(VolumeSlider_default, { width, setIsSeeking: (val) => setIsSeeking(val) }) }),
|
|
1206
1208
|
/* @__PURE__ */ jsx33(QualityMenu_default, {}),
|
|
1207
1209
|
/* @__PURE__ */ jsx33(
|
|
1208
1210
|
"button",
|
package/dist/styles/tailwind.css
CHANGED
|
@@ -499,6 +499,12 @@ video {
|
|
|
499
499
|
[hidden] {
|
|
500
500
|
display: none;
|
|
501
501
|
}
|
|
502
|
+
.sb-visible {
|
|
503
|
+
visibility: visible;
|
|
504
|
+
}
|
|
505
|
+
.sb-invisible {
|
|
506
|
+
visibility: hidden;
|
|
507
|
+
}
|
|
502
508
|
.sb-static {
|
|
503
509
|
position: static;
|
|
504
510
|
}
|
|
@@ -550,8 +556,8 @@ video {
|
|
|
550
556
|
.sb-col-span-9 {
|
|
551
557
|
grid-column: span 9 / span 9;
|
|
552
558
|
}
|
|
553
|
-
.-sb-ml-
|
|
554
|
-
margin-left: -0.
|
|
559
|
+
.-sb-ml-2 {
|
|
560
|
+
margin-left: -0.5rem;
|
|
555
561
|
}
|
|
556
562
|
.sb-mb-2 {
|
|
557
563
|
margin-bottom: 0.5rem;
|
|
@@ -568,9 +574,6 @@ video {
|
|
|
568
574
|
.sb-grid {
|
|
569
575
|
display: grid;
|
|
570
576
|
}
|
|
571
|
-
.sb-hidden {
|
|
572
|
-
display: none;
|
|
573
|
-
}
|
|
574
577
|
.sb-h-1 {
|
|
575
578
|
height: 0.25rem;
|
|
576
579
|
}
|
|
@@ -598,6 +601,9 @@ video {
|
|
|
598
601
|
.\!sb-w-16 {
|
|
599
602
|
width: 4rem !important;
|
|
600
603
|
}
|
|
604
|
+
.sb-w-0 {
|
|
605
|
+
width: 0px;
|
|
606
|
+
}
|
|
601
607
|
.sb-w-1 {
|
|
602
608
|
width: 0.25rem;
|
|
603
609
|
}
|
|
@@ -632,8 +638,8 @@ video {
|
|
|
632
638
|
--tw-translate-y: -0px;
|
|
633
639
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
634
640
|
}
|
|
635
|
-
.-sb-translate-y-
|
|
636
|
-
--tw-translate-y: -0.
|
|
641
|
+
.-sb-translate-y-1 {
|
|
642
|
+
--tw-translate-y: -0.25rem;
|
|
637
643
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
638
644
|
}
|
|
639
645
|
.-sb-translate-y-9 {
|
|
@@ -808,6 +814,12 @@ video {
|
|
|
808
814
|
--tw-text-opacity: 1;
|
|
809
815
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
810
816
|
}
|
|
817
|
+
.sb-opacity-0 {
|
|
818
|
+
opacity: 0;
|
|
819
|
+
}
|
|
820
|
+
.sb-opacity-100 {
|
|
821
|
+
opacity: 1;
|
|
822
|
+
}
|
|
811
823
|
.sb-shadow-lg {
|
|
812
824
|
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
|
|
813
825
|
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
|