softbuilders-react-video-player 1.2.17 → 1.2.19

Sign up to get free protection for your applications and to get access to all the features.
Files changed (39) hide show
  1. package/dist/components/BigPlayButton/index.d.ts +2 -1
  2. package/dist/components/BigPlayButton/index.js +4 -4
  3. package/dist/components/BigPlayButton/index.js.map +1 -1
  4. package/dist/components/BigPlayButton/index.tsx +13 -5
  5. package/dist/components/ControlBar/index.js +7 -7
  6. package/dist/components/ControlBar/index.js.map +1 -1
  7. package/dist/components/ControlBar/index.tsx +40 -41
  8. package/dist/components/Slider/index.d.ts +3 -1
  9. package/dist/components/Slider/index.js +9 -3
  10. package/dist/components/Slider/index.js.map +1 -1
  11. package/dist/components/Slider/index.tsx +13 -2
  12. package/dist/components/SoftBuildersVideoPlayer/index.js +2 -1
  13. package/dist/components/SoftBuildersVideoPlayer/index.js.map +1 -1
  14. package/dist/components/SoftBuildersVideoPlayer/index.tsx +2 -1
  15. package/dist/components/TimeSlider/index.js +25 -10
  16. package/dist/components/TimeSlider/index.js.map +1 -1
  17. package/dist/components/TimeSlider/index.tsx +27 -11
  18. package/dist/components/VideoPlayerComponent/index.js +26 -4
  19. package/dist/components/VideoPlayerComponent/index.js.map +1 -1
  20. package/dist/components/VideoPlayerComponent/index.tsx +35 -4
  21. package/dist/components/VideoPlayerComponent/style/style.css +17 -1
  22. package/dist/components/VolumeSlider/index.js +36 -3
  23. package/dist/components/VolumeSlider/index.js.map +1 -1
  24. package/dist/components/VolumeSlider/index.tsx +38 -2
  25. package/dist/components/icons/SkillamiIcon.d.ts +3 -0
  26. package/dist/components/icons/SkillamiIcon.js +4 -0
  27. package/dist/components/icons/SkillamiIcon.js.map +1 -0
  28. package/dist/components/icons/SkillamiIcon.tsx +25 -0
  29. package/dist/components/icons/index.d.ts +1 -0
  30. package/dist/components/icons/index.js +1 -0
  31. package/dist/components/icons/index.js.map +1 -1
  32. package/dist/components/icons/index.ts +1 -0
  33. package/dist/images/index.d.ts +1 -0
  34. package/dist/images/index.js +1 -0
  35. package/dist/images/index.js.map +1 -1
  36. package/dist/index.css +30 -0
  37. package/dist/index.mjs +318 -209
  38. package/dist/styles/tailwind.css +15 -0
  39. package/package.json +1 -1
@@ -7,6 +7,7 @@ type Props = {
7
7
  height?: number;
8
8
  id?: string;
9
9
  heightValue?: number;
10
+ isLoading?: boolean;
10
11
  };
11
- declare const BigPlayButton: ({ player, isPaused, setIsPaused, height, id, heightValue, }: Props) => import("react/jsx-runtime").JSX.Element;
12
+ declare const BigPlayButton: ({ player, isPaused, setIsPaused, height, id, heightValue, isLoading, }: Props) => import("react/jsx-runtime").JSX.Element;
12
13
  export default BigPlayButton;
@@ -1,6 +1,6 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
2
- import { PauseIcon, PlayIcon } from "../../images";
3
- const BigPlayButton = ({ player, isPaused, setIsPaused, height, id, heightValue, }) => {
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { PauseIcon, PlayIcon, SkillamiIcon } from "../../images";
3
+ const BigPlayButton = ({ player, isPaused, setIsPaused, height, id, heightValue, isLoading, }) => {
4
4
  const togglePlay = () => {
5
5
  if (isPaused)
6
6
  player === null || player === void 0 ? void 0 : player.play();
@@ -10,7 +10,7 @@ const BigPlayButton = ({ player, isPaused, setIsPaused, height, id, heightValue,
10
10
  };
11
11
  return (_jsx("div", { style: Object.assign({}, (height && heightValue
12
12
  ? { position: "absolute", top: `-${(heightValue - height) / 2}px` }
13
- : {})), onClick: togglePlay, 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" })) }));
13
+ : {})), onClick: togglePlay, className: ` sb-w-16 sb-h-16 sb-rounded-full ${!isLoading ? "sb-bg-white/30 sb-backdrop-blur-lg" : ""} sb-flex sb-items-center sb-justify-center`, children: isPaused || isLoading ? (_jsxs("div", { children: [!isLoading && _jsx(PlayIcon, { className: "sb-w-4 sb-h-4" }), isLoading && (_jsx(SkillamiIcon, { className: " sb-w-16 sb-h-16 sb-animate-spin sb-absolute -sb-top-2 -sb-right-2 " }))] })) : (_jsx(PauseIcon, { className: "sb-w-4 sb-h-4" })) }));
14
14
  };
15
15
  export default BigPlayButton;
16
16
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/BigPlayButton/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAWnD,MAAM,aAAa,GAAG,CAAC,EACrB,MAAM,EACN,QAAQ,EACR,WAAW,EACX,MAAM,EACN,EAAE,EACF,WAAW,GACL,EAAE,EAAE;IACV,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,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,OAAO,CACL,cACE,KAAK,oBACA,CAAC,MAAM,IAAI,WAAW;YACvB,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE;YACnE,CAAC,CAAC,EAAE,CAAC,GAET,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,+GAA+G,YAEzH,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,GACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/BigPlayButton/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;AAWjE,MAAM,aAAa,GAAG,CAAC,EACrB,MAAM,EACN,QAAQ,EACR,WAAW,EACX,MAAM,EACN,EAAE,EACF,WAAW,EACX,SAAS,GACH,EAAE,EAAE;IACV,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,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,OAAO,CACL,cACE,KAAK,oBACA,CAAC,MAAM,IAAI,WAAW;YACvB,CAAC,CAAC,EAAE,QAAQ,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,CAAC,WAAW,GAAG,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE;YACnE,CAAC,CAAC,EAAE,CAAC,GAET,OAAO,EAAE,UAAU,EACnB,SAAS,EAAE,oCACT,CAAC,SAAS,CAAC,CAAC,CAAC,oCAAoC,CAAC,CAAC,CAAC,EACtD,4CAA4C,YAE3C,QAAQ,IAAI,SAAS,CAAC,CAAC,CAAC,CACvB,0BACG,CAAC,SAAS,IAAI,KAAC,QAAQ,IAAC,SAAS,EAAC,eAAe,GAAG,EACpD,SAAS,IAAI,CACZ,KAAC,YAAY,IAAC,SAAS,EAAC,qEAAqE,GAAgB,CAC9G,IACG,CACP,CAAC,CAAC,CAAC,CACF,KAAC,SAAS,IAAC,SAAS,EAAC,eAAe,GAAG,CACxC,GACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -1,7 +1,6 @@
1
1
  import React, { useState } from "react";
2
2
  import Player from "video.js/dist/types/player";
3
- import { PauseIcon, PlayIcon } from "../../images";
4
- import log from "video.js/dist/types/utils/log";
3
+ import { PauseIcon, PlayIcon, SkillamiIcon } from "../../images";
5
4
 
6
5
  type Props = {
7
6
  player: Player | undefined;
@@ -10,6 +9,7 @@ type Props = {
10
9
  height?: number;
11
10
  id?: string;
12
11
  heightValue?: number;
12
+ isLoading?: boolean;
13
13
  };
14
14
  const BigPlayButton = ({
15
15
  player,
@@ -18,6 +18,7 @@ const BigPlayButton = ({
18
18
  height,
19
19
  id,
20
20
  heightValue,
21
+ isLoading,
21
22
  }: Props) => {
22
23
  const togglePlay = () => {
23
24
  if (isPaused) player?.play();
@@ -34,10 +35,17 @@ const BigPlayButton = ({
34
35
  : {}),
35
36
  }}
36
37
  onClick={togglePlay}
37
- 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`}
38
+ className={` sb-w-16 sb-h-16 sb-rounded-full ${
39
+ !isLoading ? "sb-bg-white/30 sb-backdrop-blur-lg" : ""
40
+ } sb-flex sb-items-center sb-justify-center`}
38
41
  >
39
- {isPaused ? (
40
- <PlayIcon className="sb-w-4 sb-h-4" />
42
+ {isPaused || isLoading ? (
43
+ <div>
44
+ {!isLoading && <PlayIcon className="sb-w-4 sb-h-4" />}
45
+ {isLoading && (
46
+ <SkillamiIcon className=" sb-w-16 sb-h-16 sb-animate-spin sb-absolute -sb-top-2 -sb-right-2 "></SkillamiIcon>
47
+ )}
48
+ </div>
41
49
  ) : (
42
50
  <PauseIcon className="sb-w-4 sb-h-4" />
43
51
  )}
@@ -1,4 +1,4 @@
1
- import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useEffect, useState } from "react";
3
3
  import CurrentTimeLabel from "../CurrentTimeLabel";
4
4
  import { durationFormater } from "../../utils";
@@ -50,12 +50,12 @@ const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters,
50
50
  }, [duration]);
51
51
  return (_jsxs("div", { className: ` !sb-px-4 sb-flex sb-pt-2 sb-justify-center sb-gap-3 sb-w-full sb-h-full ${width > 400 && !isTrailer
52
52
  ? "sb-absolute sb-bottom-1 sb-items-end sb-mb-1 sb-pb-2 "
53
- : "sb-items-start"} sb-pb-2`, children: [_jsx(BufferTracker, {}), _jsx(CurrentTimeTracker, {}), !isTrailer && (_jsxs(_Fragment, { children: [" ", _jsx("button", { onClick: () => {
54
- seek(-seekStep);
55
- }, children: _jsx(TooltipModal, { width: width, content: _jsx("p", { children: "Backward 5 sec" }), isLeft: true, children: _jsx(BackwardIcon, { className: "sb-w-3 sb-h-3" }) }) }), _jsx("button", { onClick: togglePlay, children: _jsx(TooltipModal, { width: width, content: _jsx("p", { children: isPaused ? "Play" : "pause" }), isLeft: true, children: isPaused ? (_jsx(PlayIcon, { className: "sb-w-3 sb-h-3" })) : (_jsx(PauseIcon, { className: "sb-w-3 sb-h-3" })) }) }), _jsx("button", { onClick: (e) => {
56
- e.preventDefault();
57
- seek(seekStep);
58
- }, children: _jsx(TooltipModal, { width: width, content: _jsx("p", { children: "Forward 5 sec" }), isLeft: true, children: _jsx(ForwardIcon, { className: "sb-w-3 sb-h-3" }) }) })] })),
53
+ : "sb-items-start"} sb-pb-2`, children: [_jsx(BufferTracker, {}), _jsx(CurrentTimeTracker, {}), !isTrailer && (_jsx("button", { onClick: () => {
54
+ seek(-seekStep);
55
+ }, children: _jsx(TooltipModal, { width: width, content: _jsx("p", { children: "Backward 5 sec" }), isLeft: true, children: _jsx(BackwardIcon, { className: "sb-w-3 sb-h-3" }) }) })), _jsx("button", { onClick: togglePlay, children: _jsx(TooltipModal, { width: width, content: _jsx("p", { children: isPaused ? "Play" : "pause" }), isLeft: true, children: isPaused ? (_jsx(PlayIcon, { className: "sb-w-3 sb-h-3" })) : (_jsx(PauseIcon, { className: "sb-w-3 sb-h-3" })) }) }), !isTrailer && (_jsx("button", { onClick: (e) => {
56
+ e.preventDefault();
57
+ seek(seekStep);
58
+ }, children: _jsx(TooltipModal, { width: width, content: _jsx("p", { children: "Forward 5 sec" }), isLeft: true, children: _jsx(ForwardIcon, { className: "sb-w-3 sb-h-3" }) }) })),
59
59
  // isSeeking ||
60
60
  // width > 400 &&
61
61
  _jsx("div", { className: `${width < 400 && !isTrailer
@@ -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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"}
@@ -116,49 +116,48 @@ const ControlBar = <T,>({
116
116
  <CurrentTimeTracker />
117
117
 
118
118
  {!isTrailer && (
119
- <>
120
- {" "}
121
- <button
122
- onClick={() => {
123
- seek(-seekStep);
124
- }}
119
+ <button
120
+ onClick={() => {
121
+ seek(-seekStep);
122
+ }}
123
+ >
124
+ <TooltipModal
125
+ width={width}
126
+ content={<p>Backward 5 sec</p>}
127
+ isLeft={true}
125
128
  >
126
- <TooltipModal
127
- width={width}
128
- content={<p>Backward 5 sec</p>}
129
- isLeft={true}
130
- >
131
- <BackwardIcon className="sb-w-3 sb-h-3" />
132
- </TooltipModal>
133
- </button>
134
- <button onClick={togglePlay}>
135
- <TooltipModal
136
- width={width}
137
- content={<p>{isPaused ? "Play" : "pause"}</p>}
138
- isLeft={true}
139
- >
140
- {isPaused ? (
141
- <PlayIcon className="sb-w-3 sb-h-3" />
142
- ) : (
143
- <PauseIcon className="sb-w-3 sb-h-3" />
144
- )}
145
- </TooltipModal>
146
- </button>
147
- <button
148
- onClick={(e) => {
149
- e.preventDefault();
150
- seek(seekStep);
151
- }}
129
+ <BackwardIcon className="sb-w-3 sb-h-3" />
130
+ </TooltipModal>
131
+ </button>
132
+ )}
133
+ <button onClick={togglePlay}>
134
+ <TooltipModal
135
+ width={width}
136
+ content={<p>{isPaused ? "Play" : "pause"}</p>}
137
+ isLeft={true}
138
+ >
139
+ {isPaused ? (
140
+ <PlayIcon className="sb-w-3 sb-h-3" />
141
+ ) : (
142
+ <PauseIcon className="sb-w-3 sb-h-3" />
143
+ )}
144
+ </TooltipModal>
145
+ </button>
146
+ {!isTrailer && (
147
+ <button
148
+ onClick={(e) => {
149
+ e.preventDefault();
150
+ seek(seekStep);
151
+ }}
152
+ >
153
+ <TooltipModal
154
+ width={width}
155
+ content={<p>Forward 5 sec</p>}
156
+ isLeft={true}
152
157
  >
153
- <TooltipModal
154
- width={width}
155
- content={<p>Forward 5 sec</p>}
156
- isLeft={true}
157
- >
158
- <ForwardIcon className="sb-w-3 sb-h-3" />
159
- </TooltipModal>
160
- </button>
161
- </>
158
+ <ForwardIcon className="sb-w-3 sb-h-3" />
159
+ </TooltipModal>
160
+ </button>
162
161
  )}
163
162
 
164
163
  {
@@ -6,6 +6,8 @@ type Props = {
6
6
  handleSliderClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
7
7
  min?: number;
8
8
  max?: number;
9
+ setClicked?: React.Dispatch<React.SetStateAction<boolean>>;
10
+ onMouseMove?: (e: React.MouseEvent<HTMLDivElement>) => void;
9
11
  } & InputHTMLAttributes<HTMLInputElement>;
10
- declare const Slider: ({ value, handleValueChange, min, max, className, handleSliderClick, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
12
+ declare const Slider: ({ value, handleValueChange, min, max, className, handleSliderClick, setClicked, onMouseMove, ...rest }: Props) => import("react/jsx-runtime").JSX.Element;
11
13
  export default Slider;
@@ -12,11 +12,17 @@ var __rest = (this && this.__rest) || function (s, e) {
12
12
  import { jsx as _jsx } from "react/jsx-runtime";
13
13
  import "./style.css";
14
14
  const Slider = (_a) => {
15
- var { value, handleValueChange, min = 0, max = 100, className, handleSliderClick = () => { } } = _a, rest = __rest(_a, ["value", "handleValueChange", "min", "max", "className", "handleSliderClick"]);
16
- return (_jsx("input", Object.assign({ type: "range", min: min, onMouseDown: (e) => e.stopPropagation(), onClick: (e) => {
15
+ var { value, handleValueChange, min = 0, max = 100, className, handleSliderClick = () => { }, setClicked, onMouseMove } = _a, rest = __rest(_a, ["value", "handleValueChange", "min", "max", "className", "handleSliderClick", "setClicked", "onMouseMove"]);
16
+ return (_jsx("input", Object.assign({ type: "range", min: min, onMouseMove: (e) => onMouseMove && onMouseMove(e), onMouseDown: (e) => {
17
+ e.stopPropagation();
18
+ setClicked && setClicked(true);
19
+ }, onClick: (e) => {
17
20
  e.stopPropagation();
18
21
  handleSliderClick(e);
19
- }, onMouseUp: (e) => e.stopPropagation(), max: max, value: value, onChange: (e) => {
22
+ }, onMouseUp: (e) => {
23
+ e.stopPropagation();
24
+ setClicked && setClicked(false);
25
+ }, max: max, value: value, onChange: (e) => {
20
26
  e.preventDefault();
21
27
  e.stopPropagation();
22
28
  handleValueChange(e);
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,aAAa,CAAC;AAUrB,MAAM,MAAM,GAAG,CAAC,EAQR,EAAE,EAAE;QARI,EACd,KAAK,EACL,iBAAiB,EACjB,GAAG,GAAG,CAAC,EACP,GAAG,GAAG,GAAG,EACT,SAAS,EACT,iBAAiB,GAAG,GAAG,EAAE,GAAE,CAAC,OAEtB,EADH,IAAI,cAPO,8EAQf,CADQ;IAEP,OAAO,CACL,8BACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACvC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,iBAAiB,CAAC,CAAC,CAAC,CAAC;QACvB,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACrC,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,iBAAiB,CAAC,CAAC,CAAC,CAAC;QACvB,CAAC,EACD,SAAS,EAAE;UACP,SAAS,EAAE,EACf,KAAK,EAAE;YACL,UAAU,EAAE,qCAAqC,KAAK,gBAAgB,KAAK,IAAI;SAChF,IACG,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Slider/index.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,aAAa,CAAC;AAYrB,MAAM,MAAM,GAAG,CAAC,EAUR,EAAE,EAAE;QAVI,EACd,KAAK,EACL,iBAAiB,EACjB,GAAG,GAAG,CAAC,EACP,GAAG,GAAG,GAAG,EACT,SAAS,EACT,iBAAiB,GAAG,GAAG,EAAE,GAAE,CAAC,EAC5B,UAAU,EACV,WAAW,OAEL,EADH,IAAI,cATO,2GAUf,CADQ;IAEP,OAAO,CACL,8BACE,IAAI,EAAC,OAAO,EACZ,GAAG,EAAE,GAAG,EACR,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,IAAI,WAAW,CAAC,CAAC,CAAC,EACjD,WAAW,EAAE,CAAC,CAAC,EAAE,EAAE;YACjB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,UAAU,IAAI,UAAU,CAAC,IAAI,CAAC,CAAC;QACjC,CAAC,EACD,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;YACb,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,iBAAiB,CAAC,CAAC,CAAC,CAAC;QACvB,CAAC,EACD,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,UAAU,IAAI,UAAU,CAAC,KAAK,CAAC,CAAC;QAClC,CAAC,EACD,GAAG,EAAE,GAAG,EACR,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;YACd,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,CAAC,CAAC,eAAe,EAAE,CAAC;YACpB,iBAAiB,CAAC,CAAC,CAAC,CAAC;QACvB,CAAC,EACD,SAAS,EAAE;UACP,SAAS,EAAE,EACf,KAAK,EAAE;YACL,UAAU,EAAE,qCAAqC,KAAK,gBAAgB,KAAK,IAAI;SAChF,IACG,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC"}
@@ -7,6 +7,8 @@ type Props = {
7
7
  handleSliderClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
8
8
  min?: number;
9
9
  max?: number;
10
+ setClicked?: React.Dispatch<React.SetStateAction<boolean>>;
11
+ onMouseMove?: (e: React.MouseEvent<HTMLDivElement>) => void;
10
12
  } & InputHTMLAttributes<HTMLInputElement>;
11
13
 
12
14
  const Slider = ({
@@ -16,18 +18,27 @@ const Slider = ({
16
18
  max = 100,
17
19
  className,
18
20
  handleSliderClick = () => {},
21
+ setClicked,
22
+ onMouseMove,
19
23
  ...rest
20
24
  }: Props) => {
21
25
  return (
22
26
  <input
23
27
  type="range"
24
28
  min={min}
25
- onMouseDown={(e) => e.stopPropagation()}
29
+ onMouseMove={(e) => onMouseMove && onMouseMove(e)}
30
+ onMouseDown={(e) => {
31
+ e.stopPropagation();
32
+ setClicked && setClicked(true);
33
+ }}
26
34
  onClick={(e) => {
27
35
  e.stopPropagation();
28
36
  handleSliderClick(e);
29
37
  }}
30
- onMouseUp={(e) => e.stopPropagation()}
38
+ onMouseUp={(e) => {
39
+ e.stopPropagation();
40
+ setClicked && setClicked(false);
41
+ }}
31
42
  max={max}
32
43
  value={value}
33
44
  onChange={(e) => {
@@ -58,7 +58,8 @@ const SoftBuildersVideoPlayer = memo(Component, (prevProps, nextProps) => {
58
58
  return (isEqual(prevProps.options, nextProps.options) &&
59
59
  prevProps.notes === nextProps.notes &&
60
60
  prevProps.chapters === nextProps.chapters &&
61
- prevProps.startTime === nextProps.startTime);
61
+ prevProps.startTime === nextProps.startTime &&
62
+ prevProps.height === nextProps.height);
62
63
  });
63
64
  export default SoftBuildersVideoPlayer;
64
65
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SoftBuildersVideoPlayer/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SoftBuildersVideoPlayer/index.tsx"],"names":[],"mappings":"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"}
@@ -133,7 +133,8 @@ const SoftBuildersVideoPlayer = memo(Component, (prevProps, nextProps) => {
133
133
  isEqual(prevProps.options, nextProps.options) &&
134
134
  prevProps.notes === nextProps.notes &&
135
135
  prevProps.chapters === nextProps.chapters &&
136
- prevProps.startTime === nextProps.startTime
136
+ prevProps.startTime === nextProps.startTime &&
137
+ prevProps.height === nextProps.height
137
138
  );
138
139
  });
139
140
 
@@ -7,6 +7,7 @@ const DEFERENCE = Math.abs(MAX - MIN);
7
7
  const BAR_PERCENTAGE_WIDTH = 0.5;
8
8
  const TimeSlider = ({ chapters }) => {
9
9
  const [timeSlider, setTimeSlider] = useState(0);
10
+ const [isClicked, setClicked] = useState(false);
10
11
  const { player, duration, downloadedBufferPercentage } = useSoftBuildersVideoPlayerContext();
11
12
  const handleValueChange = (e) => {
12
13
  const newTimeSlider = Number(e.target.value);
@@ -14,15 +15,27 @@ const TimeSlider = ({ chapters }) => {
14
15
  const time = (newTimeSlider * duration) / DEFERENCE;
15
16
  player === null || player === void 0 ? void 0 : player.currentTime(time);
16
17
  };
17
- const handleSliderClick = (e) => {
18
- const slider = e.currentTarget; // Get the slider element
19
- const rect = slider.getBoundingClientRect(); // Get the bounding rect of the slider
20
- const offsetX = e.clientX - rect.left; // Get the click position relative to the slider
21
- const newTimeSlider = (offsetX / rect.width) * DEFERENCE; // Calculate the new slider value
22
- // Update the time using the same function
23
- const time = (newTimeSlider * duration) / DEFERENCE;
24
- player === null || player === void 0 ? void 0 : player.currentTime(time);
25
- setTimeSlider(newTimeSlider); // Update the state to reflect the change
18
+ // const handleSliderClick = (e: React.MouseEvent<HTMLDivElement>) => {
19
+ // const slider = e.currentTarget; // Get the slider element
20
+ // const rect = slider.getBoundingClientRect(); // Get the bounding rect of the slider
21
+ // const offsetX = e.clientX - rect.left; // Get the click position relative to the slider
22
+ // const newTimeSlider = (offsetX / rect.width) * DEFERENCE; // Calculate the new slider value
23
+ // // Update the time using the same function
24
+ // const time = (newTimeSlider * duration) / DEFERENCE;
25
+ // player?.currentTime(time);
26
+ // setTimeSlider(newTimeSlider); // Update the state to reflect the change
27
+ // };
28
+ const onMouseMove = (e) => {
29
+ if (isClicked) {
30
+ const slider = e.currentTarget; // Get the slider element
31
+ const rect = slider.getBoundingClientRect(); // Get the bounding rect of the slider
32
+ const offsetX = e.clientX - rect.left; // Get the click position relative to the slider
33
+ const newTimeSlider = (offsetX / rect.width) * DEFERENCE; // Calculate the new slider value
34
+ // Update the time using the same function
35
+ const time = (newTimeSlider * duration) / DEFERENCE;
36
+ player === null || player === void 0 ? void 0 : player.currentTime(time);
37
+ setTimeSlider(newTimeSlider);
38
+ }
26
39
  };
27
40
  useEffect(() => {
28
41
  const intervalId = setInterval(() => {
@@ -57,7 +70,9 @@ const TimeSlider = ({ chapters }) => {
57
70
  arr.push(`black 100%`);
58
71
  setMaskCuttes(arr.toString());
59
72
  }, [chapters, duration]);
60
- 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, handleSliderClick: handleSliderClick, min: MIN, max: MAX, style: {
73
+ 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, { onMouseMove: (e) => onMouseMove(e), setClicked: setClicked, value: timeSlider, handleValueChange: handleValueChange,
74
+ // handleSliderClick={handleSliderClick}
75
+ min: MIN, max: MAX, style: {
61
76
  background: "transparent",
62
77
  } }) }), _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: {
63
78
  background: `
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TimeSlider/index.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TimeSlider/index.tsx"],"names":[],"mappings":"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"}
@@ -14,6 +14,7 @@ type Props = {
14
14
 
15
15
  const TimeSlider = ({ chapters }: Props) => {
16
16
  const [timeSlider, setTimeSlider] = useState(0);
17
+ const [isClicked, setClicked] = useState(false);
17
18
 
18
19
  const { player, duration, downloadedBufferPercentage } =
19
20
  useSoftBuildersVideoPlayerContext();
@@ -27,16 +28,29 @@ const TimeSlider = ({ chapters }: Props) => {
27
28
  player?.currentTime(time);
28
29
  };
29
30
 
30
- const handleSliderClick = (e: React.MouseEvent<HTMLDivElement>) => {
31
- const slider = e.currentTarget; // Get the slider element
32
- const rect = slider.getBoundingClientRect(); // Get the bounding rect of the slider
33
- const offsetX = e.clientX - rect.left; // Get the click position relative to the slider
34
- const newTimeSlider = (offsetX / rect.width) * DEFERENCE; // Calculate the new slider value
35
-
36
- // Update the time using the same function
37
- const time = (newTimeSlider * duration) / DEFERENCE;
38
- player?.currentTime(time);
39
- setTimeSlider(newTimeSlider); // Update the state to reflect the change
31
+ // const handleSliderClick = (e: React.MouseEvent<HTMLDivElement>) => {
32
+ // const slider = e.currentTarget; // Get the slider element
33
+ // const rect = slider.getBoundingClientRect(); // Get the bounding rect of the slider
34
+ // const offsetX = e.clientX - rect.left; // Get the click position relative to the slider
35
+ // const newTimeSlider = (offsetX / rect.width) * DEFERENCE; // Calculate the new slider value
36
+
37
+ // // Update the time using the same function
38
+ // const time = (newTimeSlider * duration) / DEFERENCE;
39
+ // player?.currentTime(time);
40
+ // setTimeSlider(newTimeSlider); // Update the state to reflect the change
41
+ // };
42
+ const onMouseMove = (e: React.MouseEvent<HTMLDivElement>) => {
43
+ if (isClicked) {
44
+ const slider = e.currentTarget; // Get the slider element
45
+ const rect = slider.getBoundingClientRect(); // Get the bounding rect of the slider
46
+ const offsetX = e.clientX - rect.left; // Get the click position relative to the slider
47
+ const newTimeSlider = (offsetX / rect.width) * DEFERENCE; // Calculate the new slider value
48
+
49
+ // Update the time using the same function
50
+ const time = (newTimeSlider * duration) / DEFERENCE;
51
+ player?.currentTime(time);
52
+ setTimeSlider(newTimeSlider);
53
+ }
40
54
  };
41
55
 
42
56
  useEffect(() => {
@@ -88,9 +102,11 @@ const TimeSlider = ({ chapters }: Props) => {
88
102
  <div className=" sb-w-full sb-h-2 sb-flex sb-items-center sb-justify-center">
89
103
  <div className="sb-absolute sb-top-0 sb-left-0 sb-w-full sb-z-10">
90
104
  <Slider
105
+ onMouseMove={(e: React.MouseEvent<HTMLDivElement>) => onMouseMove(e)}
106
+ setClicked={setClicked}
91
107
  value={timeSlider}
92
108
  handleValueChange={handleValueChange}
93
- handleSliderClick={handleSliderClick}
109
+ // handleSliderClick={handleSliderClick}
94
110
  min={MIN}
95
111
  max={MAX}
96
112
  style={{
@@ -10,7 +10,7 @@ import "../../styles/tailwind.css";
10
10
  import { SoftBuildersVideoPlayerProvider } from "./provider";
11
11
  import BigPlayButton from "../BigPlayButton";
12
12
  let bigPlayButtonRoot = {};
13
- const renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100", height, heightValue) => {
13
+ const renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100", height, heightValue, isLoading) => {
14
14
  const container = document.getElementById(`video-container-${id}`);
15
15
  if (container) {
16
16
  container.style.height = "100%";
@@ -20,7 +20,7 @@ const renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100",
20
20
  if (!bigPlayButtonRoot[id]) {
21
21
  bigPlayButtonRoot[id] = ReactDOM.createRoot(element);
22
22
  }
23
- bigPlayButtonRoot[id].render(_jsx(BigPlayButton, { player: player, isPaused: isPaused, setIsPaused: setIsPaused, height: height, heightValue: heightValue }));
23
+ bigPlayButtonRoot[id].render(_jsx(BigPlayButton, { player: player, isPaused: isPaused, setIsPaused: setIsPaused, height: height, heightValue: heightValue, isLoading: isLoading }));
24
24
  }
25
25
  }
26
26
  };
@@ -59,6 +59,7 @@ const VideoPlayerComponent = forwardRef(({ id, options, notes, chapters, startTi
59
59
  const [isHovered, setIsHovered] = useState(false);
60
60
  const [isNoteOpen, setNoteOpen] = useState(false);
61
61
  const [heightValue, setHeightValue] = useState(0);
62
+ const [isLoading, setIsloading] = useState(false);
62
63
  const onReady = (player) => {
63
64
  if (playerRef) {
64
65
  playerRef.current = player;
@@ -207,11 +208,11 @@ const VideoPlayerComponent = forwardRef(({ id, options, notes, chapters, startTi
207
208
  useEffect(() => {
208
209
  if (isReady) {
209
210
  const playButtonTimeout = setTimeout(() => {
210
- renderBigPlayButton(id, playerRef.current, isPaused, setIsPaused, opacity, height, heightValue);
211
+ renderBigPlayButton(id, playerRef.current, isPaused, setIsPaused, opacity, height, heightValue, isLoading);
211
212
  }, 500);
212
213
  return () => clearTimeout(playButtonTimeout);
213
214
  }
214
- }, [isPaused, opacity, isReady, id, height, heightValue]);
215
+ }, [isPaused, opacity, isReady, id, height, heightValue, isLoading]);
215
216
  useEffect(() => {
216
217
  if (playerRef.current) {
217
218
  const intervalId = setInterval(() => {
@@ -370,6 +371,27 @@ const VideoPlayerComponent = forwardRef(({ id, options, notes, chapters, startTi
370
371
  if (controlBar) {
371
372
  resizeObserver.observe(controlBar);
372
373
  }
374
+ function debounce(func, // The function type should accept a boolean argument
375
+ delay) {
376
+ let timeoutId;
377
+ return function (arg) {
378
+ if (timeoutId) {
379
+ clearTimeout(timeoutId);
380
+ }
381
+ timeoutId = setTimeout(() => {
382
+ func(arg);
383
+ }, delay);
384
+ };
385
+ }
386
+ if (playerRef.current) {
387
+ playerRef.current.on("waiting", function () {
388
+ console.log("The player is buffering...");
389
+ debounce((arg) => setIsloading(arg), 300)(true);
390
+ });
391
+ playerRef.current.on("playing", function () {
392
+ debounce((arg) => setIsloading(arg), 300)(false);
393
+ });
394
+ }
373
395
  return (_jsx(_Fragment, { children: _jsxs("div", { ref: videoRefs, id: `video-container-${id}`, onMouseMove: () => {
374
396
  !isNoteOpen ? handlePlayerClick(event, true) : "";
375
397
  }, className: "sb-relative sb-rounded-md sb-overflow-hidden sb-w-full sb-h-full sb-bottom-2 ", onMouseEnter: () => setIsHovered(true), onMouseLeave: () => setIsHovered(false), children: [bottomRedBar && (_jsx("div", { ref: childRef, onClick: handlePlayerClick, className: `sb-h-[3px] sb-transition-opacity sb-duration-500 sb-delay-400 sb-z-10 ease-in-out sb-border-spacing-x-2 sb-absolute sb-bg-[red] sb-bottom-0 ${opacity == "100" ? "sb-opacity-0" : "sb-opacity-100"}`, style: {