softbuilders-react-video-player 1.1.19 → 1.1.21

Sign up to get free protection for your applications and to get access to all the features.
Files changed (12) hide show
  1. package/dist/components/ControlBar/index.js +4 -3
  2. package/dist/components/ControlBar/index.js.map +1 -1
  3. package/dist/components/ControlBar/index.tsx +4 -4
  4. package/dist/components/VideoPlayerComponent/style/style.css +3 -1
  5. package/dist/components/VolumeSlider/index.d.ts +2 -1
  6. package/dist/components/VolumeSlider/index.js +5 -8
  7. package/dist/components/VolumeSlider/index.js.map +1 -1
  8. package/dist/components/VolumeSlider/index.tsx +12 -14
  9. package/dist/index.css +25 -7
  10. package/dist/index.mjs +9 -7
  11. package/dist/styles/tailwind.css +22 -7
  12. package/package.json +1 -1
package/dist/components/ControlBar/index.js CHANGED
@@ -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);
@@ -45,19 +46,19 @@ const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters,
45
46
  useEffect(() => {
46
47
  setDuration(duration);
47
48
  }, [duration]);
48
- return (_jsxs("div", { className: " sb-px-2 sb-flex sb-justify-center sb-gap-3 sb-w-full sb-h-full sb-items-end pb-2", children: [_jsx(BufferTracker, {}), _jsx(CurrentTimeTracker, {}), _jsx("button", { onClick: () => {
49
+ return (_jsxs("div", { className: " sb-px-2 sb-flex sb-justify-center sb-gap-3 sb-w-full sb-h-full sb-items-end sb-pb-2", children: [_jsx(BufferTracker, {}), _jsx(CurrentTimeTracker, {}), _jsx("button", { onClick: () => {
49
50
  seek(-seekStep);
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" }) }), true && (_jsx("div", { className: `${width < 400 ? "sb-w-[0px] sb-ml-0 sb-mr-0" : "sb-w-full"}`, children: _jsxs("div", { style: width < 400
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()) {
package/dist/components/ControlBar/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ControlBar/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ControlBar/index.tsx"],"names":[],"mappings":"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"}
package/dist/components/ControlBar/index.tsx CHANGED
@@ -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);
@@ -87,7 +87,7 @@ const ControlBar = <T,>({
87
87
  }, [duration]);
88
88
 
89
89
  return (
90
- <div className=" sb-px-2 sb-flex sb-justify-center sb-gap-3 sb-w-full sb-h-full sb-items-end pb-2">
90
+ <div className=" sb-px-2 sb-flex sb-justify-center sb-gap-3 sb-w-full sb-h-full sb-items-end sb-pb-2">
91
91
  {/* Doesn't display anything, just set the downloaded buffer percentage */}
92
92
  <BufferTracker />
93
93
  {/* Doesn't display anything, just set the current time */}
@@ -116,7 +116,7 @@ const ControlBar = <T,>({
116
116
  <ForwardIcon className="sb-w-3 sb-h-3" />
117
117
  </button>
118
118
 
119
- {true && (
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 />
package/dist/components/VideoPlayerComponent/style/style.css CHANGED
@@ -2,7 +2,9 @@
2
2
  background-color: transparent;
3
3
  display: none;
4
4
  }
5
-
5
+ .vjs-control-bar{
6
+ justify-content: center;
7
+ }
6
8
  .video-js .vjs-big-play-button {
7
9
  background-color: transparent;
8
10
  display: block;
package/dist/components/VolumeSlider/index.d.ts CHANGED
@@ -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;
package/dist/components/VolumeSlider/index.js CHANGED
@@ -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 ${width < 400 ? "!sb-flex-row !sb-items-end -sb-ml-3" : ""} 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: `${isVisible && width > 400
33
- ? " sb-w-[22px]"
34
- : !isVisible && width > 400
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
package/dist/components/VolumeSlider/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VolumeSlider/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VolumeSlider/index.tsx"],"names":[],"mappings":"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"}
package/dist/components/VolumeSlider/index.tsx CHANGED
@@ -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
- width < 400 ? "!sb-flex-row !sb-items-end -sb-ml-3" : ""
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 sb-items-center sb-justify-center">
60
+ <div className="sb-flex sb-items-center sb-justify-center">
59
61
  {/* Rotated Slider */}
60
62
  <div
61
- className={`${
62
- isVisible && width > 400
63
- ? " sb-w-[22px]"
64
- : !isVisible && width > 400
65
- ? "sb-hidden"
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-3 {
458
- margin-left: -0.75rem;
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-2 {
540
- --tw-translate-y: -0.5rem;
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 {
@@ -696,6 +705,9 @@ video {
696
705
  padding-top: 1.25rem;
697
706
  padding-bottom: 1.25rem;
698
707
  }
708
+ .sb-pb-2 {
709
+ padding-bottom: 0.5rem;
710
+ }
699
711
  .sb-text-left {
700
712
  text-align: left;
701
713
  }
@@ -709,6 +721,12 @@ video {
709
721
  --tw-text-opacity: 1;
710
722
  color: rgb(255 255 255 / var(--tw-text-opacity));
711
723
  }
724
+ .sb-opacity-0 {
725
+ opacity: 0;
726
+ }
727
+ .sb-opacity-100 {
728
+ opacity: 1;
729
+ }
712
730
  .sb-shadow-lg {
713
731
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
714
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 ${width < 400 ? "!sb-flex-row !sb-items-end -sb-ml-3" : ""} sb-items-center sb-justify-start sb-gap-1 sb-h-full`,
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 sb-items-center sb-justify-center", children: /* @__PURE__ */ jsx19(
561
+ /* @__PURE__ */ jsx19("div", { className: "sb-flex sb-items-center sb-justify-center", children: /* @__PURE__ */ jsx19(
561
562
  "div",
562
563
  {
563
- className: `${isVisible && width > 400 ? " sb-w-[22px]" : !isVisible && width > 400 ? "sb-hidden" : ""} -sb-rotate-90 -sb-translate-y-2 sb-relative ${width < 400 ? "sb-static sb-w-16 sb-rotate-0 sb-translate-y-0 " : "sb-translate-y-0"}`,
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);
@@ -1158,7 +1160,7 @@ var ControlBar = ({
1158
1160
  useEffect13(() => {
1159
1161
  setDuration(duration);
1160
1162
  }, [duration]);
1161
- return /* @__PURE__ */ jsxs13("div", { className: " sb-px-2 sb-flex sb-justify-center sb-gap-3 sb-w-full sb-h-full sb-items-end pb-2", children: [
1163
+ return /* @__PURE__ */ jsxs13("div", { className: " sb-px-2 sb-flex sb-justify-center sb-gap-3 sb-w-full sb-h-full sb-items-end sb-pb-2", children: [
1162
1164
  /* @__PURE__ */ jsx33(BufferTracker_default, {}),
1163
1165
  /* @__PURE__ */ jsx33(CurrentTimeTracker_default, {}),
1164
1166
  /* @__PURE__ */ jsx33(
@@ -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-3 {
554
- margin-left: -0.75rem;
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-2 {
636
- --tw-translate-y: -0.5rem;
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 {
@@ -792,6 +798,9 @@ video {
792
798
  padding-top: 1.25rem;
793
799
  padding-bottom: 1.25rem;
794
800
  }
801
+ .sb-pb-2 {
802
+ padding-bottom: 0.5rem;
803
+ }
795
804
  .sb-text-left {
796
805
  text-align: left;
797
806
  }
@@ -805,6 +814,12 @@ video {
805
814
  --tw-text-opacity: 1;
806
815
  color: rgb(255 255 255 / var(--tw-text-opacity));
807
816
  }
817
+ .sb-opacity-0 {
818
+ opacity: 0;
819
+ }
820
+ .sb-opacity-100 {
821
+ opacity: 1;
822
+ }
808
823
  .sb-shadow-lg {
809
824
  --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
810
825
  --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "softbuilders-react-video-player",
3
3
  "description": "Standalone video player component",
4
- "version": "1.1.19",
4
+ "version": "1.1.21",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",
7
7
  "files": [