softbuilders-react-video-player 1.1.20 → 1.1.21
Sign up to get free protection for your applications and to get access to all the features.
- 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":";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;IAC9C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,IAAI,GAAG,CAAC,QAAgB,EAAE,EAAE;QAChC,MAAM,WAAW,GAAG,MAAM,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,EAAE,KAAI,CAAC,CAAC,CAAC;QACvD,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,CAAC,WAAW,GAAG,QAAQ,CAAC,CAAC;IAC9C,CAAC,CAAC;IAEF,MAAM,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;IACnE,SAAS,iBAAiB,CAAC,KAAU;QACnC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC;IAED,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;QACpD,KAAK,IAAI,KAAK,IAAI,OAAO,EAAE,CAAC;YAC1B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;YAC7C,iBAAiB,CAAC,YAAY,CAAC,CAAC,CAAC,qCAAqC;QACxE,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,8BAA8B;IAC9B,SAAS,IAAI,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAE/C,MAAM,UAAU,GAAG,CAAC,CAAM,EAAE,EAAE;QAC5B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,IAAI,QAAQ;YAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAE,CAAC;;YACxB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EAAE,CAAC;QAErB,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,QAAQ,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,eAAK,SAAS,EAAC,uFAAuF,aAEpG,KAAC,aAAa,KAAG,EAEjB,KAAC,kBAAkB,KAAG,EAEtB,iBACE,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;gBAClB,CAAC,YAED,KAAC,YAAY,IAAC,SAAS,EAAC,eAAe,GAAG,GACnC,EACT,iBAAQ,OAAO,EAAE,UAAU,YACxB,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,QAAQ,IAAC,SAAS,EAAC,eAAe,GAAG,CACvC,CAAC,CAAC,CAAC,CACF,KAAC,SAAS,IAAC,SAAS,EAAC,eAAe,GAAG,CACxC,GACM,EACT,iBACE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,QAAQ,CAAC,CAAC;gBACjB,CAAC,YAED,KAAC,WAAW,IAAC,SAAS,EAAC,eAAe,GAAG,GAClC,EAER,CAAC,SAAS,IAAI,KAAK,GAAG,GAAG,CAAC,IAAI,CAC7B,cACE,SAAS,EAAE,GACT,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,4BAA4B,CAAC,CAAC,CAAC,WAC/C,EAAE,YAEF,eACE,KAAK,EACH,KAAK,GAAG,GAAG;wBACT,CAAC,CAAC;4BACE,KAAK,EAAE,GAAG,KAAK,GAAG,GAAG,IAAI;4BACzB,IAAI,EAAE,KAAK;yBACZ;wBACH,CAAC,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,EAEvB,SAAS,EAAE,cACT,KAAK,GAAG,GAAG;wBACT,CAAC,CAAC,4BAA4B;wBAC9B,CAAC,CAAC,6BACN,oEAAoE,aAEpE,KAAC,gBAAgB,KAAG,EAEpB,KAAC,mBAAmB,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,EACzD,sBAAI,gBAAgB,CAAC,QAAQ,CAAC,GAAK,IAC/B,GACF,CACP,EAED,cAAK,SAAS,EAAC,WAAW,YACxB,KAAC,YAAY,IAAC,KAAK,EAAE,KAAK,EAAE,YAAY,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,GAAI,GACpE,EAEN,KAAC,WAAW,KAAG,EAEf,iBACE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;oBAEpB,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,YAAY,EAAE,EAAE,CAAC;wBAC3B,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,EAAE,CAAC;oBAC3B,CAAC;yBAAM,CAAC;wBACN,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB,EAAE,CAAC;oBAC9B,CAAC;gBACH,CAAC,YAED,KAAC,cAAc,IAAC,SAAS,EAAC,eAAe,GAAG,GACrC,EAER,oBAAoB,IAAI,CACvB,KAAC,cAAc,IAAC,oBAAoB,EAAE,oBAAoB,GAAI,CAC/D,EAED,KAAC,YAAY,KAAG,IACZ,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -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":"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"}
|
|
@@ -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);
|