softbuilders-react-video-player 1.1.24 → 1.1.25
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/ControlBar/index.d.ts +2 -1
- package/dist/components/ControlBar/index.js +2 -2
- package/dist/components/ControlBar/index.js.map +1 -1
- package/dist/components/ControlBar/index.tsx +7 -1
- package/dist/components/VideoPlayerComponent/index.js +9 -4
- package/dist/components/VideoPlayerComponent/index.js.map +1 -1
- package/dist/components/VideoPlayerComponent/index.tsx +11 -4
- package/dist/components/VolumeSlider/index.d.ts +2 -1
- package/dist/components/VolumeSlider/index.js +4 -3
- package/dist/components/VolumeSlider/index.js.map +1 -1
- package/dist/components/VolumeSlider/index.tsx +9 -3
- package/dist/index.css +0 -6
- package/dist/index.mjs +30 -9
- package/dist/styles/tailwind.css +0 -6
- package/package.json +1 -1
|
@@ -11,6 +11,7 @@ type Props<T> = {
|
|
|
11
11
|
seekStep?: number;
|
|
12
12
|
id?: string;
|
|
13
13
|
handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
|
|
14
|
+
handleControlDisplayTimer: (e: any) => void;
|
|
14
15
|
};
|
|
15
|
-
declare const ControlBar: <T>({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep, id, handleSaveNoteAction, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
|
|
16
|
+
declare const ControlBar: <T>({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep, id, handleSaveNoteAction, handleControlDisplayTimer, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
|
|
16
17
|
export default ControlBar;
|
|
@@ -11,7 +11,7 @@ import CurrentTimeTracker from "../CurrentTimeTracker";
|
|
|
11
11
|
import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
|
|
12
12
|
import SubtitleMenu from "../SubtitleMenu";
|
|
13
13
|
import { BackwardIcon, ForwardIcon, FullScreenIcon, PauseIcon, PlayIcon, } from "../../images";
|
|
14
|
-
const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, id, handleSaveNoteAction, }) => {
|
|
14
|
+
const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, id, handleSaveNoteAction, handleControlDisplayTimer, }) => {
|
|
15
15
|
const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
|
|
16
16
|
const [width, setWidth] = useState(0);
|
|
17
17
|
const [isSeeking, setIsSeeking] = useState(true);
|
|
@@ -60,7 +60,7 @@ const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters,
|
|
|
60
60
|
left: "5%",
|
|
61
61
|
top: "90%",
|
|
62
62
|
}
|
|
63
|
-
: { width: "100%" }, className: `flex gap-2 ${width < 400 ? "absolute sb-top-1" : "-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, { width: width }), handleSaveNoteAction && (_jsx(CreateNoteMenu, { handleSaveNoteAction: handleSaveNoteAction })), _jsx(SubtitleMenu, { width: width }), _jsx("button", { onClick: (e) => {
|
|
63
|
+
: { width: "100%" }, className: `flex gap-2 ${width < 400 ? "absolute sb-top-1" : "-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), handleControlDisplayTimer: handleControlDisplayTimer }) }), _jsx(QualityMenu, { width: width }), handleSaveNoteAction && (_jsx(CreateNoteMenu, { handleSaveNoteAction: handleSaveNoteAction })), _jsx(SubtitleMenu, { width: width }), _jsx("button", { onClick: (e) => {
|
|
64
64
|
e.preventDefault();
|
|
65
65
|
e.stopPropagation();
|
|
66
66
|
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;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ControlBar/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -32,6 +32,7 @@ type Props<T> = {
|
|
|
32
32
|
seekStep?: number;
|
|
33
33
|
id?: string;
|
|
34
34
|
handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
|
|
35
|
+
handleControlDisplayTimer: (e: any) => void;
|
|
35
36
|
};
|
|
36
37
|
|
|
37
38
|
const ControlBar = <T,>({
|
|
@@ -44,6 +45,7 @@ const ControlBar = <T,>({
|
|
|
44
45
|
seekStep = 5,
|
|
45
46
|
id,
|
|
46
47
|
handleSaveNoteAction,
|
|
48
|
+
handleControlDisplayTimer,
|
|
47
49
|
}: Props<T>) => {
|
|
48
50
|
const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
|
|
49
51
|
const [width, setWidth] = useState<number>(0);
|
|
@@ -151,7 +153,11 @@ const ControlBar = <T,>({
|
|
|
151
153
|
}
|
|
152
154
|
|
|
153
155
|
<div className="sb-h-full">
|
|
154
|
-
<VolumeSlider
|
|
156
|
+
<VolumeSlider
|
|
157
|
+
width={width}
|
|
158
|
+
setIsSeeking={(val) => setIsSeeking(val)}
|
|
159
|
+
handleControlDisplayTimer={handleControlDisplayTimer}
|
|
160
|
+
/>
|
|
155
161
|
</div>
|
|
156
162
|
|
|
157
163
|
<QualityMenu width={width} />
|
|
@@ -22,7 +22,7 @@ const renderBigPlayButton = (id, player, isPaused, setIsPaused) => {
|
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
24
|
let controlBarRoot = {};
|
|
25
|
-
const renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, handleSaveNoteAction, opacity = "0") => {
|
|
25
|
+
const renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, handleSaveNoteAction, opacity = "0", handleControlDisplayTimer = () => { }) => {
|
|
26
26
|
const container = document.getElementById(`video-container-${id}`);
|
|
27
27
|
if (container) {
|
|
28
28
|
const element = container.querySelector(".vjs-control-bar");
|
|
@@ -34,7 +34,7 @@ const renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, ch
|
|
|
34
34
|
element.style.opacity = opacity;
|
|
35
35
|
element.style.height = "100%";
|
|
36
36
|
element.style.alignItems = "flex-end";
|
|
37
|
-
controlBarRoot[id].render(_jsx(SoftBuildersVideoPlayerProvider, { children: _jsx(ControlBar, { id: id, player: player, isPaused: isPaused, setIsPaused: setIsPaused, duration: duration, notes: notes, chapters: chapters, seekStep: seekStep, handleSaveNoteAction: handleSaveNoteAction }) }));
|
|
37
|
+
controlBarRoot[id].render(_jsx(SoftBuildersVideoPlayerProvider, { children: _jsx(ControlBar, { id: id, player: player, isPaused: isPaused, setIsPaused: setIsPaused, duration: duration, notes: notes, chapters: chapters, seekStep: seekStep, handleSaveNoteAction: handleSaveNoteAction, handleControlDisplayTimer: handleControlDisplayTimer }) }));
|
|
38
38
|
}
|
|
39
39
|
}
|
|
40
40
|
};
|
|
@@ -108,7 +108,9 @@ const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, han
|
|
|
108
108
|
useEffect(() => {
|
|
109
109
|
if (isReady) {
|
|
110
110
|
const controlBarTimeout = setTimeout(() => {
|
|
111
|
-
renderControlBar(id, playerRef.current, isPaused, setIsPaused, duration, notes, chapters, 5, handleSaveNoteAction, opacity)
|
|
111
|
+
renderControlBar(id, playerRef.current, isPaused, setIsPaused, duration, notes, chapters, 5, handleSaveNoteAction, opacity, (e) => {
|
|
112
|
+
handlePlayerClick(e, true);
|
|
113
|
+
});
|
|
112
114
|
}, 500);
|
|
113
115
|
return () => clearTimeout(controlBarTimeout);
|
|
114
116
|
}
|
|
@@ -159,7 +161,7 @@ const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, han
|
|
|
159
161
|
};
|
|
160
162
|
}, []);
|
|
161
163
|
const timeoutRef = useRef(null);
|
|
162
|
-
const handlePlayerClick = async (e) => {
|
|
164
|
+
const handlePlayerClick = async (e, isTimerOnly = false) => {
|
|
163
165
|
e.preventDefault();
|
|
164
166
|
if (timeoutRef.current) {
|
|
165
167
|
clearTimeout(timeoutRef.current);
|
|
@@ -168,6 +170,9 @@ const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, han
|
|
|
168
170
|
timeoutRef.current = setTimeout(() => {
|
|
169
171
|
setOpacity("0");
|
|
170
172
|
}, 5000);
|
|
173
|
+
if (isTimerOnly) {
|
|
174
|
+
return;
|
|
175
|
+
}
|
|
171
176
|
if (playerRef.current) {
|
|
172
177
|
if (playerRef.current.paused()) {
|
|
173
178
|
try {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VideoPlayerComponent/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AACxC,OAAO,OAAO,MAAM,UAAU,CAAC;AAE/B,OAAO,4BAA4B,CAAC;AACpC,OAAO,UAAU,MAAM,eAAe,CAAC;AAMvC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,+BAA+B,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,IAAI,iBAAiB,GAEjB,EAAE,CAAC;AACP,MAAM,mBAAmB,GAAG,CAC1B,EAAU,EACV,MAA0B,EAC1B,QAAiB,EACjB,WAA0D,EAC1D,EAAE;IACF,MAAM,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;IACnE,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,OAAO,GAAQ,SAAS,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QACrE,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,EAAE,CAAC;gBAC3B,iBAAiB,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,OAAsB,CAAC,CAAC;YACtE,CAAC;YACD,iBAAiB,CAAC,EAAE,CAAC,CAAC,MAAM,CAC1B,KAAC,aAAa,IACZ,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;QACJ,CAAC;IACH,CAAC;AACH,CAAC,CAAC;AACF,IAAI,cAAc,GAEd,EAAE,CAAC;AACP,MAAM,gBAAgB,GAAG,CACvB,EAAU,EACV,MAA0B,EAC1B,QAAiB,EACjB,WAA0D,EAC1D,QAAgB,EAChB,KAAoC,EACpC,QAA0C,EAC1C,WAAmB,CAAC,EACpB,oBAAiE,EACjE,UAAkB,GAAG,EACrB,EAAE;IACF,MAAM,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;IACnE,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,OAAO,GAAQ,SAAS,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QACjE,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC;gBACxB,cAAc,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,OAAsB,CAAC,CAAC;YACnE,CAAC;YACD,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAC/B,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;YAChC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAC9B,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,UAAU,CAAC;YACtC,cAAc,CAAC,EAAE,CAAC,CAAC,MAAM,CACvB,KAAC,+BAA+B,cAC9B,KAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,oBAAoB,EAAE,oBAAoB,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VideoPlayerComponent/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC3D,OAAO,QAAQ,MAAM,kBAAkB,CAAC;AACxC,OAAO,OAAO,MAAM,UAAU,CAAC;AAE/B,OAAO,4BAA4B,CAAC;AACpC,OAAO,UAAU,MAAM,eAAe,CAAC;AAMvC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,+BAA+B,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,IAAI,iBAAiB,GAEjB,EAAE,CAAC;AACP,MAAM,mBAAmB,GAAG,CAC1B,EAAU,EACV,MAA0B,EAC1B,QAAiB,EACjB,WAA0D,EAC1D,EAAE;IACF,MAAM,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;IACnE,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,OAAO,GAAQ,SAAS,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QACrE,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,EAAE,CAAC;gBAC3B,iBAAiB,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,OAAsB,CAAC,CAAC;YACtE,CAAC;YACD,iBAAiB,CAAC,EAAE,CAAC,CAAC,MAAM,CAC1B,KAAC,aAAa,IACZ,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;QACJ,CAAC;IACH,CAAC;AACH,CAAC,CAAC;AACF,IAAI,cAAc,GAEd,EAAE,CAAC;AACP,MAAM,gBAAgB,GAAG,CACvB,EAAU,EACV,MAA0B,EAC1B,QAAiB,EACjB,WAA0D,EAC1D,QAAgB,EAChB,KAAoC,EACpC,QAA0C,EAC1C,WAAmB,CAAC,EACpB,oBAAiE,EACjE,UAAkB,GAAG,EACrB,4BAA8C,GAAG,EAAE,GAAE,CAAC,EACtD,EAAE;IACF,MAAM,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;IACnE,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,OAAO,GAAQ,SAAS,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QACjE,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC;gBACxB,cAAc,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,OAAsB,CAAC,CAAC;YACnE,CAAC;YACD,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAC/B,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,OAAO,CAAC;YAChC,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAC9B,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,UAAU,CAAC;YACtC,cAAc,CAAC,EAAE,CAAC,CAAC,MAAM,CACvB,KAAC,+BAA+B,cAC9B,KAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,oBAAoB,EAAE,oBAAoB,EAC1C,yBAAyB,EAAE,yBAAyB,GACpD,GAC8B,CACnC,CAAC;QACJ,CAAC;IACH,CAAC;AACH,CAAC,CAAC;AAYF,MAAM,oBAAoB,GAAG,CAAK,EAChC,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,GAAG,CAAC,EACb,oBAAoB,EACpB,MAAM,EACN,MAAM,EACN,OAAO,GACE,EAAE,EAAE;IACb,MAAM,QAAQ,GAAG,MAAM,CAAM,SAAS,CAAC,CAAC;IACxC,MAAM,SAAS,GAAG,MAAM,CAAqB,SAAS,CAAC,CAAC;IACxD,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC9C,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC;IAC5D,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAC5C,MAAM,CAAC,OAAO,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,GAAG,CAAC,CAAC;IAC5C,MAAM,OAAO,GAAG,CAAC,MAAc,EAAE,EAAE;QACjC,IAAI,SAAS,EAAE,CAAC;YACd,SAAS,CAAC,OAAO,GAAG,MAAM,CAAC;YAC3B,UAAU,CAAC,IAAI,CAAC,CAAC;YACjB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,CAAC,SAAS,CAAC,CAAC;YAC/B,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE,GAAE,CAAC,CAAC,CAAC;YAC/B,MAAM,CAAC,EAAE,CAAC,SAAS,EAAE,GAAG,EAAE;gBACxB,OAAO,CAAC,GAAG,CAAC,qBAAqB,CAAC,CAAC;gBACnC,UAAU,CAAC,KAAK,CAAC,CAAC;YACpB,CAAC,CAAC,CAAC;YACH,MAAM,CAAC,EAAE,CAAC,gBAAgB,EAAE,GAAG,EAAE;gBAC/B,MAAM,CAAC,GAAG,MAAM,CAAC,QAAQ,EAAE,IAAI,CAAC,CAAC;gBACjC,WAAW,CAAC,CAAC,CAAC,CAAC;YACjB,CAAC,CAAC,CAAC;QACL,CAAC;IACH,CAAC,CAAC;IACF,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,SAAS,CAAC,OAAO,EAAE,CAAC;YACvB,MAAM,YAAY,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;YACxD,YAAY,CAAC,YAAY,CAAC,aAAa,EAAE,MAAM,CAAC,CAAC;YAEjD,YAAY,CAAC,SAAS,CAAC,GAAG,CAAC,uBAAuB,CAAC,CAAC;YACpD,gCAAgC;YAChC,IAAI,MAAM,EAAE,CAAC;gBACX,YAAY,CAAC,YAAY,CAAC,QAAQ,EAAE,MAAM,CAAC,CAAC;YAC9C,CAAC;YACD,QAAQ,CAAC,OAAO,CAAC,WAAW,CAAC,YAAY,CAAC,CAAC;YAC3C,SAAS,CAAC,OAAO,GAAG,OAAO,CAAC,YAAY,EAAE,OAAO,EAAE,GAAG,EAAE;gBACtD,OAAO,CAAC,SAAS,CAAC,OAAiB,CAAC,CAAC;YACvC,CAAC,CAAC,CAAC;QACL,CAAC;QACD,OAAO,GAAG,EAAE;YACV,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;gBACtB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;gBAC5B,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC;gBAC9B,UAAU,CAAC,GAAG,EAAE;oBACd,IAAI,iBAAiB,CAAC,EAAE,CAAC,EAAE,CAAC;wBAC1B,iBAAiB,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC;wBAChC,iBAAiB,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;oBACpC,CAAC;oBACD,IAAI,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC;wBACvB,cAAc,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC;wBAC7B,cAAc,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;oBACjC,CAAC;gBACH,CAAC,EAAE,CAAC,CAAC,CAAC;YACR,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC,mCAAmC;IAC1D,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,CAAC,OAAO,IAAI,OAAO,EAAE,CAAC;YACjC,MAAM,WAAW,GAAG,SAAS,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC;YACzD,IAAI,QAAQ,EAAE,CAAC;gBACb,IAAI,OAAO;oBAAE,OAAO,CAAC,WAAW,CAAC,CAAC;YACpC,CAAC;iBAAM,CAAC;gBACN,IAAI,MAAM;oBAAE,MAAM,CAAC,WAAW,CAAC,CAAC;YAClC,CAAC;QACH,CAAC;IACH,CAAC,EAAE,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAExB,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE,CAAC;YACZ,MAAM,iBAAiB,GAAG,UAAU,CAAC,GAAG,EAAE;gBACxC,gBAAgB,CACd,EAAE,EACF,SAAS,CAAC,OAAO,EACjB,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,CAAC,EACD,oBAAoB,EACpB,OAAO,EACP,CAAC,CAAM,EAAE,EAAE;oBACT,iBAAiB,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;gBAC7B,CAAC,CACF,CAAC;YACJ,CAAC,EAAE,GAAG,CAAC,CAAC;YACR,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC,EAAE;QACD,EAAE;QACF,SAAS;QACT,QAAQ;QACR,WAAW;QACX,KAAK;QACL,QAAQ;QACR,OAAO;QACP,oBAAoB;QACpB,QAAQ;QACR,OAAO;KACR,CAAC,CAAC;IACH,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,OAAO,EAAE,CAAC;YACZ,MAAM,iBAAiB,GAAG,UAAU,CAAC,GAAG,EAAE;gBACxC,mBAAmB,CAAC,EAAE,EAAE,SAAS,CAAC,OAAO,EAAE,QAAQ,EAAE,WAAW,CAAC,CAAC;YACpE,CAAC,EAAE,GAAG,CAAC,CAAC;YACR,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,iBAAiB,CAAC,CAAC;QAC/C,CAAC;IACH,CAAC,EAAE,CAAC,EAAE,EAAE,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC;IAC5B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;gBAClC,IAAI,SAAS,CAAC,OAAO;oBAAE,WAAW,CAAC,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,CAAC,CAAC;YACjE,CAAC,EAAE,GAAG,CAAC,CAAC;YACR,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;QACzC,CAAC;IACH,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,SAAS,CAAC,GAAG,EAAE;QACb,OAAO,GAAG,EAAE;YACV,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;gBACtB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,CAAC;gBAC5B,SAAS,CAAC,OAAO,GAAG,SAAS,CAAC;gBAC9B,8CAA8C;gBAC9C,IAAI,iBAAiB,CAAC,EAAE,CAAC,EAAE,CAAC;oBAC1B,iBAAiB,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC;oBAChC,iBAAiB,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;gBACpC,CAAC;gBACD,IAAI,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC;oBACvB,cAAc,CAAC,EAAE,CAAC,CAAC,OAAO,EAAE,CAAC;oBAC7B,cAAc,CAAC,EAAE,CAAC,GAAG,SAAS,CAAC;gBACjC,CAAC;YACH,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IACP,MAAM,UAAU,GAAG,MAAM,CAAM,IAAI,CAAC,CAAC;IACrC,MAAM,iBAAiB,GAAG,KAAK,EAAE,CAAM,EAAE,WAAW,GAAG,KAAK,EAAE,EAAE;QAC9D,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,IAAI,UAAU,CAAC,OAAO,EAAE,CAAC;YACvB,YAAY,CAAC,UAAU,CAAC,OAAO,CAAC,CAAC;QACnC,CAAC;QACD,UAAU,CAAC,KAAK,CAAC,CAAC;QAClB,UAAU,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;YACnC,UAAU,CAAC,GAAG,CAAC,CAAC;QAClB,CAAC,EAAE,IAAI,CAAC,CAAC;QACT,IAAI,WAAW,EAAE,CAAC;YAChB,OAAO;QACT,CAAC;QACD,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,IAAI,SAAS,CAAC,OAAO,CAAC,MAAM,EAAE,EAAE,CAAC;gBAC/B,IAAI,CAAC;oBACH,MAAM,SAAS,CAAC,OAAO,CAAC,IAAI,EAAE,CAAC;oBAC/B,WAAW,CAAC,KAAK,CAAC,CAAC;gBACrB,CAAC;gBAAC,OAAO,KAAK,EAAE,CAAC;oBACf,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC;gBAChD,CAAC;YACH,CAAC;iBAAM,CAAC;gBACN,SAAS,CAAC,OAAO,CAAC,KAAK,EAAE,CAAC;gBAC1B,WAAW,CAAC,IAAI,CAAC,CAAC;gBAClB,IAAI,OAAO;oBAAE,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC;YAC7D,CAAC;QACH,CAAC;IACH,CAAC,CAAC;IACF,MAAM,SAAS,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC,CAAC,qCAAqC;IAErF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,QAAQ,GAAG,IAAI,oBAAoB,CACvC,CAAC,OAAO,EAAE,EAAE;YACV,OAAO,CAAC,OAAO,CAAC,CAAC,KAAK,EAAE,EAAE;;gBACxB,IAAI,KAAK,CAAC,cAAc,KAAK,KAAK,EAAE,CAAC;oBACnC,IAAI,CAAA,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,0CAAE,MAAM,EAAE,MAAK,KAAK,EAAE,CAAC;wBAC3C,IAAI,CAAC;4BACH,MAAA,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,OAAO,0CAAE,KAAK,EAAE,CAAC;4BAC5B,WAAW,CAAC,IAAI,CAAC,CAAC;wBACpB,CAAC;wBAAC,OAAO,KAAK,EAAE,CAAC;4BACf,OAAO,CAAC,KAAK,CAAC,uBAAuB,EAAE,KAAK,CAAC,CAAC;wBAChD,CAAC;oBACH,CAAC;gBACH,CAAC;YACH,CAAC,CAAC,CAAC;QACL,CAAC,EACD;YACE,SAAS,EAAE,GAAG,EAAE,2EAA2E;SAC5F,CACF,CAAC;QAEF,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;YACtB,QAAQ,CAAC,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,CAAC,CAAC,gCAAgC;QACvE,CAAC;QAED,OAAO,GAAG,EAAE;YACV,IAAI,SAAS,CAAC,OAAO,EAAE,CAAC;gBACtB,QAAQ,CAAC,SAAS,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,CAAC,oDAAoD;YAC5F,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,cACE,GAAG,EAAE,SAAS,EACd,EAAE,EAAE,mBAAmB,EAAE,EAAE,EAC3B,SAAS,EAAC,8CAA8C,YAExD,cACE,SAAS,EAAC,yBAAyB,2BAGnC,KAAK,EAAE;gBACL,MAAM,EAAE,MAAM,EAAE,0BAA0B;gBAC1C,QAAQ,EAAE,UAAU;aACrB,YAED,cAAK,OAAO,EAAE,iBAAiB,EAAE,GAAG,EAAE,QAAQ,GAAI,GAC9C,GACF,CACP,CAAC;AACJ,CAAC,CAAC;AACF,eAAe,oBAAoB,CAAC"}
|
|
@@ -53,7 +53,8 @@ const renderControlBar = <T,>(
|
|
|
53
53
|
chapters: SoftBuildersVideoPlayerChapter[],
|
|
54
54
|
seekStep: number = 5,
|
|
55
55
|
handleSaveNoteAction?: (time: number, note: string) => Promise<T>,
|
|
56
|
-
opacity: string = "0"
|
|
56
|
+
opacity: string = "0",
|
|
57
|
+
handleControlDisplayTimer: (e: any) => void = () => {}
|
|
57
58
|
) => {
|
|
58
59
|
const container = document.getElementById(`video-container-${id}`);
|
|
59
60
|
if (container) {
|
|
@@ -78,6 +79,7 @@ const renderControlBar = <T,>(
|
|
|
78
79
|
chapters={chapters}
|
|
79
80
|
seekStep={seekStep}
|
|
80
81
|
handleSaveNoteAction={handleSaveNoteAction}
|
|
82
|
+
handleControlDisplayTimer={handleControlDisplayTimer}
|
|
81
83
|
/>
|
|
82
84
|
</SoftBuildersVideoPlayerProvider>
|
|
83
85
|
);
|
|
@@ -184,7 +186,10 @@ const VideoPlayerComponent = <T,>({
|
|
|
184
186
|
chapters,
|
|
185
187
|
5,
|
|
186
188
|
handleSaveNoteAction,
|
|
187
|
-
opacity
|
|
189
|
+
opacity,
|
|
190
|
+
(e: any) => {
|
|
191
|
+
handlePlayerClick(e, true);
|
|
192
|
+
}
|
|
188
193
|
);
|
|
189
194
|
}, 500);
|
|
190
195
|
return () => clearTimeout(controlBarTimeout);
|
|
@@ -235,7 +240,7 @@ const VideoPlayerComponent = <T,>({
|
|
|
235
240
|
};
|
|
236
241
|
}, []);
|
|
237
242
|
const timeoutRef = useRef<any>(null);
|
|
238
|
-
const handlePlayerClick = async (e: any) => {
|
|
243
|
+
const handlePlayerClick = async (e: any, isTimerOnly = false) => {
|
|
239
244
|
e.preventDefault();
|
|
240
245
|
if (timeoutRef.current) {
|
|
241
246
|
clearTimeout(timeoutRef.current);
|
|
@@ -244,7 +249,9 @@ const VideoPlayerComponent = <T,>({
|
|
|
244
249
|
timeoutRef.current = setTimeout(() => {
|
|
245
250
|
setOpacity("0");
|
|
246
251
|
}, 5000);
|
|
247
|
-
|
|
252
|
+
if (isTimerOnly) {
|
|
253
|
+
return;
|
|
254
|
+
}
|
|
248
255
|
if (playerRef.current) {
|
|
249
256
|
if (playerRef.current.paused()) {
|
|
250
257
|
try {
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
type Props = {
|
|
2
2
|
width?: number;
|
|
3
3
|
setIsSeeking: (val: boolean) => void;
|
|
4
|
+
handleControlDisplayTimer: (e: any) => void;
|
|
4
5
|
};
|
|
5
|
-
declare const VolumeSlider: ({ width, setIsSeeking }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
6
|
+
declare const VolumeSlider: ({ width, setIsSeeking, handleControlDisplayTimer, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
6
7
|
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, setIsSeeking }) => {
|
|
7
|
+
const VolumeSlider = ({ width = 0, setIsSeeking, handleControlDisplayTimer, }) => {
|
|
8
8
|
const { player } = useSoftBuildersVideoPlayerContext();
|
|
9
9
|
const [isVisible, setVisible] = useState(false);
|
|
10
10
|
const [volume, setVolume] = useState(0);
|
|
@@ -15,6 +15,7 @@ const VolumeSlider = ({ width = 0, setIsSeeking }) => {
|
|
|
15
15
|
const toggleVisiblity = (e) => {
|
|
16
16
|
e.preventDefault();
|
|
17
17
|
e.stopPropagation();
|
|
18
|
+
handleControlDisplayTimer(e);
|
|
18
19
|
setIsSeeking(isVisible);
|
|
19
20
|
if (timeoutRef.current) {
|
|
20
21
|
clearTimeout(timeoutRef.current);
|
|
@@ -37,9 +38,9 @@ const VolumeSlider = ({ width = 0, setIsSeeking }) => {
|
|
|
37
38
|
player === null || player === void 0 ? void 0 : player.muted(false);
|
|
38
39
|
}
|
|
39
40
|
};
|
|
40
|
-
return (_jsxs("div", { className: `sb-flex ${isVisible ? "" : "
|
|
41
|
+
return (_jsxs("div", { className: `sb-flex ${isVisible ? "" : ""} ${width > 400 ? "sb-flex-col-reverse " : "sb-flex-col !sb-justify-start"} ${false ? "!sb-flex-row !sb-items-start " : ""} sb-items-center sb-gap-1 sb-h-full`, children: [_jsx("div", { className: `sb-flex sb-relative ${width < 400 ? "-sb-top-1" : "sb-top-1"} `, 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
|
|
41
42
|
? "sb-w-[22px] sb-opacity-100 sb-visible"
|
|
42
|
-
: "sb-w-
|
|
43
|
+
: " sb-w-[22px] sb-opacity-0 sb-invisible"} ${width > 400
|
|
43
44
|
? "-sb-rotate-90 -sb-translate-y-1"
|
|
44
45
|
: "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" }) }) })] }));
|
|
45
46
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VolumeSlider/index.tsx"],"names":[],"mappings":";AAAA,OAAO,KAAK,EAAE,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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"}
|
|
@@ -7,8 +7,13 @@ const MIN = 0,
|
|
|
7
7
|
type Props = {
|
|
8
8
|
width?: number;
|
|
9
9
|
setIsSeeking: (val: boolean) => void;
|
|
10
|
+
handleControlDisplayTimer: (e: any) => void;
|
|
10
11
|
};
|
|
11
|
-
const VolumeSlider = ({
|
|
12
|
+
const VolumeSlider = ({
|
|
13
|
+
width = 0,
|
|
14
|
+
setIsSeeking,
|
|
15
|
+
handleControlDisplayTimer,
|
|
16
|
+
}: Props) => {
|
|
12
17
|
const { player } = useSoftBuildersVideoPlayerContext();
|
|
13
18
|
const [isVisible, setVisible] = useState(false);
|
|
14
19
|
const [volume, setVolume] = useState(0);
|
|
@@ -20,6 +25,7 @@ const VolumeSlider = ({ width = 0, setIsSeeking }: Props) => {
|
|
|
20
25
|
const toggleVisiblity = (e: any) => {
|
|
21
26
|
e.preventDefault();
|
|
22
27
|
e.stopPropagation();
|
|
28
|
+
handleControlDisplayTimer(e);
|
|
23
29
|
setIsSeeking(isVisible);
|
|
24
30
|
if (timeoutRef.current) {
|
|
25
31
|
clearTimeout(timeoutRef.current);
|
|
@@ -43,7 +49,7 @@ const VolumeSlider = ({ width = 0, setIsSeeking }: Props) => {
|
|
|
43
49
|
};
|
|
44
50
|
return (
|
|
45
51
|
<div
|
|
46
|
-
className={`sb-flex ${isVisible ? "" : "
|
|
52
|
+
className={`sb-flex ${isVisible ? "" : ""} ${
|
|
47
53
|
width > 400 ? "sb-flex-col-reverse " : "sb-flex-col !sb-justify-start"
|
|
48
54
|
} ${
|
|
49
55
|
false ? "!sb-flex-row !sb-items-start " : ""
|
|
@@ -73,7 +79,7 @@ const VolumeSlider = ({ width = 0, setIsSeeking }: Props) => {
|
|
|
73
79
|
className={`sb-transition-all sb-ease-in-out sb-duration-500 ${
|
|
74
80
|
isVisible
|
|
75
81
|
? "sb-w-[22px] sb-opacity-100 sb-visible"
|
|
76
|
-
: "sb-w-
|
|
82
|
+
: " sb-w-[22px] sb-opacity-0 sb-invisible"
|
|
77
83
|
} ${
|
|
78
84
|
width > 400
|
|
79
85
|
? "-sb-rotate-90 -sb-translate-y-1"
|
package/dist/index.css
CHANGED
|
@@ -473,9 +473,6 @@ video {
|
|
|
473
473
|
.sb-col-span-9 {
|
|
474
474
|
grid-column: span 9 / span 9;
|
|
475
475
|
}
|
|
476
|
-
.-sb-ml-2 {
|
|
477
|
-
margin-left: -0.5rem;
|
|
478
|
-
}
|
|
479
476
|
.sb-mb-2 {
|
|
480
477
|
margin-bottom: 0.5rem;
|
|
481
478
|
}
|
|
@@ -518,9 +515,6 @@ video {
|
|
|
518
515
|
.\!sb-w-16 {
|
|
519
516
|
width: 4rem !important;
|
|
520
517
|
}
|
|
521
|
-
.sb-w-0 {
|
|
522
|
-
width: 0px;
|
|
523
|
-
}
|
|
524
518
|
.sb-w-1 {
|
|
525
519
|
width: 0.25rem;
|
|
526
520
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -510,7 +510,11 @@ 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 = ({
|
|
513
|
+
var VolumeSlider = ({
|
|
514
|
+
width = 0,
|
|
515
|
+
setIsSeeking,
|
|
516
|
+
handleControlDisplayTimer
|
|
517
|
+
}) => {
|
|
514
518
|
const { player } = useSoftBuildersVideoPlayerContext();
|
|
515
519
|
const [isVisible, setVisible] = useState2(false);
|
|
516
520
|
const [volume, setVolume] = useState2(0);
|
|
@@ -521,6 +525,7 @@ var VolumeSlider = ({ width = 0, setIsSeeking }) => {
|
|
|
521
525
|
const toggleVisiblity = (e) => {
|
|
522
526
|
e.preventDefault();
|
|
523
527
|
e.stopPropagation();
|
|
528
|
+
handleControlDisplayTimer(e);
|
|
524
529
|
setIsSeeking(isVisible);
|
|
525
530
|
if (timeoutRef.current) {
|
|
526
531
|
clearTimeout(timeoutRef.current);
|
|
@@ -545,7 +550,7 @@ var VolumeSlider = ({ width = 0, setIsSeeking }) => {
|
|
|
545
550
|
return /* @__PURE__ */ jsxs4(
|
|
546
551
|
"div",
|
|
547
552
|
{
|
|
548
|
-
className: `sb-flex ${isVisible ? "" : "
|
|
553
|
+
className: `sb-flex ${isVisible ? "" : ""} ${width > 400 ? "sb-flex-col-reverse " : "sb-flex-col !sb-justify-start"} ${false ? "!sb-flex-row !sb-items-start " : ""} sb-items-center sb-gap-1 sb-h-full`,
|
|
549
554
|
children: [
|
|
550
555
|
/* @__PURE__ */ jsx19(
|
|
551
556
|
"div",
|
|
@@ -568,7 +573,7 @@ var VolumeSlider = ({ width = 0, setIsSeeking }) => {
|
|
|
568
573
|
/* @__PURE__ */ jsx19("div", { className: "sb-flex sb-items-center sb-justify-center", children: /* @__PURE__ */ jsx19(
|
|
569
574
|
"div",
|
|
570
575
|
{
|
|
571
|
-
className: `sb-transition-all sb-ease-in-out sb-duration-500 ${isVisible ? "sb-w-[22px] sb-opacity-100 sb-visible" : "sb-w-
|
|
576
|
+
className: `sb-transition-all sb-ease-in-out sb-duration-500 ${isVisible ? "sb-w-[22px] sb-opacity-100 sb-visible" : " sb-w-[22px] sb-opacity-0 sb-invisible"} ${width > 400 ? "-sb-rotate-90 -sb-translate-y-1" : "sb-rotate-90 sb-translate-y-1"} sb-relative ${false ? "sb-static sb-w-16 sb-rotate-0 sb-translate-y-0 " : ""}`,
|
|
572
577
|
children: /* @__PURE__ */ jsx19(
|
|
573
578
|
Slider_default,
|
|
574
579
|
{
|
|
@@ -1186,7 +1191,8 @@ var ControlBar = ({
|
|
|
1186
1191
|
chapters,
|
|
1187
1192
|
seekStep = 5,
|
|
1188
1193
|
id,
|
|
1189
|
-
handleSaveNoteAction
|
|
1194
|
+
handleSaveNoteAction,
|
|
1195
|
+
handleControlDisplayTimer
|
|
1190
1196
|
}) => {
|
|
1191
1197
|
const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
|
|
1192
1198
|
const [width, setWidth] = useState12(0);
|
|
@@ -1270,7 +1276,14 @@ var ControlBar = ({
|
|
|
1270
1276
|
)
|
|
1271
1277
|
}
|
|
1272
1278
|
),
|
|
1273
|
-
/* @__PURE__ */ jsx33("div", { className: "sb-h-full", children: /* @__PURE__ */ jsx33(
|
|
1279
|
+
/* @__PURE__ */ jsx33("div", { className: "sb-h-full", children: /* @__PURE__ */ jsx33(
|
|
1280
|
+
VolumeSlider_default,
|
|
1281
|
+
{
|
|
1282
|
+
width,
|
|
1283
|
+
setIsSeeking: (val) => setIsSeeking(val),
|
|
1284
|
+
handleControlDisplayTimer
|
|
1285
|
+
}
|
|
1286
|
+
) }),
|
|
1274
1287
|
/* @__PURE__ */ jsx33(QualityMenu_default, { width }),
|
|
1275
1288
|
handleSaveNoteAction && /* @__PURE__ */ jsx33(CreateNoteMenu_default, { handleSaveNoteAction }),
|
|
1276
1289
|
/* @__PURE__ */ jsx33(SubtitleMenu_default, { width }),
|
|
@@ -1339,7 +1352,8 @@ var renderBigPlayButton = (id, player, isPaused, setIsPaused) => {
|
|
|
1339
1352
|
}
|
|
1340
1353
|
};
|
|
1341
1354
|
var controlBarRoot = {};
|
|
1342
|
-
var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, handleSaveNoteAction, opacity = "0") => {
|
|
1355
|
+
var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, handleSaveNoteAction, opacity = "0", handleControlDisplayTimer = () => {
|
|
1356
|
+
}) => {
|
|
1343
1357
|
const container = document.getElementById(`video-container-${id}`);
|
|
1344
1358
|
if (container) {
|
|
1345
1359
|
const element = container.querySelector(".vjs-control-bar");
|
|
@@ -1363,7 +1377,8 @@ var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chap
|
|
|
1363
1377
|
notes,
|
|
1364
1378
|
chapters,
|
|
1365
1379
|
seekStep,
|
|
1366
|
-
handleSaveNoteAction
|
|
1380
|
+
handleSaveNoteAction,
|
|
1381
|
+
handleControlDisplayTimer
|
|
1367
1382
|
}
|
|
1368
1383
|
) })
|
|
1369
1384
|
);
|
|
@@ -1457,7 +1472,10 @@ var VideoPlayerComponent = ({
|
|
|
1457
1472
|
chapters,
|
|
1458
1473
|
5,
|
|
1459
1474
|
handleSaveNoteAction,
|
|
1460
|
-
opacity
|
|
1475
|
+
opacity,
|
|
1476
|
+
(e) => {
|
|
1477
|
+
handlePlayerClick(e, true);
|
|
1478
|
+
}
|
|
1461
1479
|
);
|
|
1462
1480
|
}, 500);
|
|
1463
1481
|
return () => clearTimeout(controlBarTimeout);
|
|
@@ -1507,7 +1525,7 @@ var VideoPlayerComponent = ({
|
|
|
1507
1525
|
};
|
|
1508
1526
|
}, []);
|
|
1509
1527
|
const timeoutRef = useRef2(null);
|
|
1510
|
-
const handlePlayerClick = async (e) => {
|
|
1528
|
+
const handlePlayerClick = async (e, isTimerOnly = false) => {
|
|
1511
1529
|
e.preventDefault();
|
|
1512
1530
|
if (timeoutRef.current) {
|
|
1513
1531
|
clearTimeout(timeoutRef.current);
|
|
@@ -1516,6 +1534,9 @@ var VideoPlayerComponent = ({
|
|
|
1516
1534
|
timeoutRef.current = setTimeout(() => {
|
|
1517
1535
|
setOpacity("0");
|
|
1518
1536
|
}, 5e3);
|
|
1537
|
+
if (isTimerOnly) {
|
|
1538
|
+
return;
|
|
1539
|
+
}
|
|
1519
1540
|
if (playerRef.current) {
|
|
1520
1541
|
if (playerRef.current.paused()) {
|
|
1521
1542
|
try {
|
package/dist/styles/tailwind.css
CHANGED
|
@@ -565,9 +565,6 @@ video {
|
|
|
565
565
|
.sb-col-span-9 {
|
|
566
566
|
grid-column: span 9 / span 9;
|
|
567
567
|
}
|
|
568
|
-
.-sb-ml-2 {
|
|
569
|
-
margin-left: -0.5rem;
|
|
570
|
-
}
|
|
571
568
|
.sb-mb-2 {
|
|
572
569
|
margin-bottom: 0.5rem;
|
|
573
570
|
}
|
|
@@ -610,9 +607,6 @@ video {
|
|
|
610
607
|
.\!sb-w-16 {
|
|
611
608
|
width: 4rem !important;
|
|
612
609
|
}
|
|
613
|
-
.sb-w-0 {
|
|
614
|
-
width: 0px;
|
|
615
|
-
}
|
|
616
610
|
.sb-w-1 {
|
|
617
611
|
width: 0.25rem;
|
|
618
612
|
}
|