softbuilders-react-video-player 1.1.18 → 1.1.20
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/ControlBar/index.js +11 -4
- package/dist/components/ControlBar/index.js.map +1 -1
- package/dist/components/ControlBar/index.tsx +37 -14
- package/dist/components/VolumeSlider/index.js +3 -3
- package/dist/components/VolumeSlider/index.js.map +1 -1
- package/dist/components/VolumeSlider/index.tsx +8 -8
- package/dist/index.css +26 -3
- package/dist/index.mjs +29 -11
- package/dist/styles/tailwind.css +26 -3
- package/package.json +1 -1
|
@@ -13,14 +13,14 @@ import SubtitleMenu from "../SubtitleMenu";
|
|
|
13
13
|
import { BackwardIcon, ForwardIcon, FullScreenIcon, PauseIcon, PlayIcon, } from "../../images";
|
|
14
14
|
const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, id, handleSaveNoteAction, }) => {
|
|
15
15
|
const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
|
|
16
|
-
const [width,
|
|
16
|
+
const [width, setWidth] = useState(0);
|
|
17
17
|
const seek = (duration) => {
|
|
18
18
|
const currentTime = Number((player === null || player === void 0 ? void 0 : player.currentTime()) || 0);
|
|
19
19
|
player === null || player === void 0 ? void 0 : player.currentTime(currentTime + duration);
|
|
20
20
|
};
|
|
21
21
|
const container = document.getElementById(`video-container-${id}`);
|
|
22
22
|
function handleWidthChange(width) {
|
|
23
|
-
|
|
23
|
+
setWidth(width);
|
|
24
24
|
}
|
|
25
25
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
26
26
|
for (let entry of entries) {
|
|
@@ -45,12 +45,19 @@ const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters,
|
|
|
45
45
|
useEffect(() => {
|
|
46
46
|
setDuration(duration);
|
|
47
47
|
}, [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: () => {
|
|
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 sb-pb-2", children: [_jsx(BufferTracker, {}), _jsx(CurrentTimeTracker, {}), _jsx("button", { onClick: () => {
|
|
49
49
|
seek(-seekStep);
|
|
50
50
|
}, 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
51
|
e.preventDefault();
|
|
52
52
|
seek(seekStep);
|
|
53
|
-
}, children: _jsx(ForwardIcon, { className: "sb-w-3 sb-h-3" }) }),
|
|
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
|
+
? {
|
|
55
|
+
width: `${width * 0.8}px`,
|
|
56
|
+
left: "10%",
|
|
57
|
+
}
|
|
58
|
+
: { width: "100%" }, className: `flex gap-2 ${width < 400
|
|
59
|
+
? "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) => {
|
|
54
61
|
e.preventDefault();
|
|
55
62
|
e.stopPropagation();
|
|
56
63
|
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;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ControlBar/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,9 @@
|
|
|
1
1
|
import React, { useEffect, useState } from "react";
|
|
2
|
-
|
|
3
2
|
import Player from "video.js/dist/types/player";
|
|
4
3
|
import CurrentTimeLabel from "../CurrentTimeLabel";
|
|
5
4
|
import { durationFormater } from "../../utils";
|
|
6
5
|
import VolumeSlider from "../VolumeSlider";
|
|
7
6
|
import QualityMenu from "../QualityMenu";
|
|
8
|
-
|
|
9
7
|
import CreateNoteMenu from "../CreateNoteMenu";
|
|
10
8
|
import TimeSliderContainer from "../TimeSliderContainer";
|
|
11
9
|
import BufferTracker from "../BufferTracker";
|
|
@@ -35,6 +33,7 @@ type Props<T> = {
|
|
|
35
33
|
id?: string;
|
|
36
34
|
handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
|
|
37
35
|
};
|
|
36
|
+
|
|
38
37
|
const ControlBar = <T,>({
|
|
39
38
|
player,
|
|
40
39
|
isPaused,
|
|
@@ -47,16 +46,18 @@ const ControlBar = <T,>({
|
|
|
47
46
|
handleSaveNoteAction,
|
|
48
47
|
}: Props<T>) => {
|
|
49
48
|
const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
|
|
50
|
-
const [width,
|
|
49
|
+
const [width, setWidth] = useState<number>(0);
|
|
51
50
|
|
|
52
51
|
const seek = (duration: number) => {
|
|
53
52
|
const currentTime = Number(player?.currentTime() || 0);
|
|
54
53
|
player?.currentTime(currentTime + duration);
|
|
55
54
|
};
|
|
55
|
+
|
|
56
56
|
const container = document.getElementById(`video-container-${id}`);
|
|
57
57
|
function handleWidthChange(width: any) {
|
|
58
|
-
|
|
58
|
+
setWidth(width);
|
|
59
59
|
}
|
|
60
|
+
|
|
60
61
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
61
62
|
for (let entry of entries) {
|
|
62
63
|
const currentWidth = entry.contentRect.width;
|
|
@@ -66,7 +67,8 @@ const ControlBar = <T,>({
|
|
|
66
67
|
|
|
67
68
|
// Start observing the element
|
|
68
69
|
container && resizeObserver.observe(container);
|
|
69
|
-
|
|
70
|
+
|
|
71
|
+
const togglePlay = (e: any) => {
|
|
70
72
|
e.preventDefault();
|
|
71
73
|
e.stopPropagation();
|
|
72
74
|
|
|
@@ -85,8 +87,8 @@ const ControlBar = <T,>({
|
|
|
85
87
|
}, [duration]);
|
|
86
88
|
|
|
87
89
|
return (
|
|
88
|
-
<div className=" sb-px-2 sb-flex sb-justify-center sb-gap-3 sb-w-full sb-h-full sb-items-end pb-2">
|
|
89
|
-
{/* Doesn't display anything, just set the downloaded buffer
|
|
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
|
+
{/* Doesn't display anything, just set the downloaded buffer percentage */}
|
|
90
92
|
<BufferTracker />
|
|
91
93
|
{/* Doesn't display anything, just set the current time */}
|
|
92
94
|
<CurrentTimeTracker />
|
|
@@ -114,13 +116,34 @@ const ControlBar = <T,>({
|
|
|
114
116
|
<ForwardIcon className="sb-w-3 sb-h-3" />
|
|
115
117
|
</button>
|
|
116
118
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
119
|
+
{true && (
|
|
120
|
+
<div
|
|
121
|
+
className={`${
|
|
122
|
+
width < 400 ? "sb-w-[0px] sb-ml-0 sb-mr-0" : "sb-w-full"
|
|
123
|
+
}`}
|
|
124
|
+
>
|
|
125
|
+
<div
|
|
126
|
+
style={
|
|
127
|
+
width < 400
|
|
128
|
+
? {
|
|
129
|
+
width: `${width * 0.8}px`,
|
|
130
|
+
left: "10%",
|
|
131
|
+
}
|
|
132
|
+
: { width: "100%" }
|
|
133
|
+
}
|
|
134
|
+
className={`flex gap-2 ${
|
|
135
|
+
width < 400
|
|
136
|
+
? "absolute -sb-translate-y-9"
|
|
137
|
+
: "-sb-translate-y-0 sb-w-full"
|
|
138
|
+
} hover:sb-w-[45%] sb-transition-all sb-ease-in-out sb-duration-500`}
|
|
139
|
+
>
|
|
140
|
+
<CurrentTimeLabel />
|
|
141
|
+
|
|
142
|
+
<TimeSliderContainer chapters={chapters} notes={notes} />
|
|
143
|
+
<p>{durationFormater(duration)}</p>
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
)}
|
|
124
147
|
|
|
125
148
|
<div className="sb-h-full">
|
|
126
149
|
<VolumeSlider width={width} />
|
|
@@ -29,11 +29,11 @@ const VolumeSlider = ({ width = 0 }) => {
|
|
|
29
29
|
player === null || player === void 0 ? void 0 : player.muted(false);
|
|
30
30
|
}
|
|
31
31
|
};
|
|
32
|
-
return (_jsxs("div", { className: `sb-flex sb-flex-col-reverse ${width
|
|
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
33
|
? " sb-w-[22px]"
|
|
34
|
-
: !isVisible && width
|
|
34
|
+
: !isVisible && width > 400
|
|
35
35
|
? "sb-hidden"
|
|
36
|
-
: ""} -sb-rotate-90 -sb-translate-y-2 sb-relative ${width
|
|
36
|
+
: ""} -sb-rotate-90 -sb-translate-y-2 sb-relative ${width < 400
|
|
37
37
|
? "sb-static sb-w-16 sb-rotate-0 sb-translate-y-0 "
|
|
38
38
|
: "sb-translate-y-0"}`, children: _jsx(Slider, { value: volume, handleValueChange: handleValueChange, min: MIN, max: MAX, className: "!sb-w-16" }) }) })] }));
|
|
39
39
|
};
|
|
@@ -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;AAIZ,MAAM,YAAY,GAAG,CAAC,EAAE,KAAK,GAAG,CAAC,EAAS,EAAE,EAAE;IAC5C,MAAM,EAAE,MAAM,EAAE,GAAG,iCAAiC,EAAE,CAAC;IACvD,MAAM,CAAC,SAAS,EAAE,UAAU,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChD,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IACxC,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EAAE,EAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,EAAE,CAAC,GAAG,GAAG,IAAI,CAAC,CAAC,CAAC;IACvE,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACb,MAAM,eAAe,GAAG,CAAC,CAAM,EAAE,EAAE;QACjC,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,UAAU,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAC9B,CAAC,CAAC;IACF,MAAM,iBAAiB,GAAG,CAAC,CAAsC,EAAE,EAAE;QACnE,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,MAAM,SAAS,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QACzC,SAAS,CAAC,SAAS,CAAC,CAAC;QACrB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,MAAM,CAAC,SAAS,GAAG,GAAG,CAAC,CAAC;QAChC,IAAI,SAAS,KAAK,CAAC,EAAE,CAAC;YACpB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC;aAAM,CAAC;YACN,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,CAAC,KAAK,CAAC,CAAC;QACvB,CAAC;IACH,CAAC,CAAC;IACF,OAAO,CACL,eACE,SAAS,EAAE,gCACT,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VolumeSlider/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -34,23 +34,23 @@ const VolumeSlider = ({ width = 0 }: Props) => {
|
|
|
34
34
|
return (
|
|
35
35
|
<div
|
|
36
36
|
className={`sb-flex sb-flex-col-reverse ${
|
|
37
|
-
width
|
|
38
|
-
} sb-items-center sb-justify-start sb-gap-
|
|
37
|
+
width < 400 ? "!sb-flex-row !sb-items-end -sb-ml-3" : ""
|
|
38
|
+
} sb-items-center sb-justify-start sb-gap-1 sb-h-full`}
|
|
39
39
|
>
|
|
40
40
|
{/* Mute/Unmute Icon */}
|
|
41
41
|
<div
|
|
42
42
|
className={`sb-flex sb-relative ${
|
|
43
|
-
width
|
|
43
|
+
width < 400 ? "" : ""
|
|
44
44
|
} sb-top-1 sb-items-end`}
|
|
45
45
|
onClick={toggleVisiblity}
|
|
46
46
|
>
|
|
47
47
|
{volume === 0 || player?.muted() ? (
|
|
48
48
|
<MuteIcon
|
|
49
|
-
className={`sb-w-3 sb-h-3 ${width
|
|
49
|
+
className={`sb-w-3 sb-h-3 ${width < 400 ? " " : ""} sb-h-5 sb-w-5`}
|
|
50
50
|
/>
|
|
51
51
|
) : (
|
|
52
52
|
<UnmuteIcon
|
|
53
|
-
className={`sb-w-3 sb-h-3 ${width
|
|
53
|
+
className={`sb-w-3 sb-h-3 ${width < 400 ? "" : ""} sb-h-5 sb-w-5`}
|
|
54
54
|
/>
|
|
55
55
|
)}
|
|
56
56
|
</div>
|
|
@@ -59,13 +59,13 @@ const VolumeSlider = ({ width = 0 }: Props) => {
|
|
|
59
59
|
{/* Rotated Slider */}
|
|
60
60
|
<div
|
|
61
61
|
className={`${
|
|
62
|
-
isVisible && width
|
|
62
|
+
isVisible && width > 400
|
|
63
63
|
? " sb-w-[22px]"
|
|
64
|
-
: !isVisible && width
|
|
64
|
+
: !isVisible && width > 400
|
|
65
65
|
? "sb-hidden"
|
|
66
66
|
: ""
|
|
67
67
|
} -sb-rotate-90 -sb-translate-y-2 sb-relative ${
|
|
68
|
-
width
|
|
68
|
+
width < 400
|
|
69
69
|
? "sb-static sb-w-16 sb-rotate-0 sb-translate-y-0 "
|
|
70
70
|
: "sb-translate-y-0"
|
|
71
71
|
}`}
|
package/dist/index.css
CHANGED
|
@@ -454,9 +454,18 @@ video {
|
|
|
454
454
|
.sb-col-span-9 {
|
|
455
455
|
grid-column: span 9 / span 9;
|
|
456
456
|
}
|
|
457
|
+
.-sb-ml-3 {
|
|
458
|
+
margin-left: -0.75rem;
|
|
459
|
+
}
|
|
457
460
|
.sb-mb-2 {
|
|
458
461
|
margin-bottom: 0.5rem;
|
|
459
462
|
}
|
|
463
|
+
.sb-ml-0 {
|
|
464
|
+
margin-left: 0px;
|
|
465
|
+
}
|
|
466
|
+
.sb-mr-0 {
|
|
467
|
+
margin-right: 0px;
|
|
468
|
+
}
|
|
460
469
|
.sb-flex {
|
|
461
470
|
display: flex;
|
|
462
471
|
}
|
|
@@ -508,6 +517,9 @@ video {
|
|
|
508
517
|
.sb-w-5 {
|
|
509
518
|
width: 1.25rem;
|
|
510
519
|
}
|
|
520
|
+
.sb-w-\[0px\] {
|
|
521
|
+
width: 0px;
|
|
522
|
+
}
|
|
511
523
|
.sb-w-\[150px\] {
|
|
512
524
|
width: 150px;
|
|
513
525
|
}
|
|
@@ -517,16 +529,21 @@ video {
|
|
|
517
529
|
.sb-w-\[22px\] {
|
|
518
530
|
width: 22px;
|
|
519
531
|
}
|
|
520
|
-
.sb-w-\[30\%\] {
|
|
521
|
-
width: 30%;
|
|
522
|
-
}
|
|
523
532
|
.sb-w-full {
|
|
524
533
|
width: 100%;
|
|
525
534
|
}
|
|
535
|
+
.-sb-translate-y-0 {
|
|
536
|
+
--tw-translate-y: -0px;
|
|
537
|
+
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
|
+
}
|
|
526
539
|
.-sb-translate-y-2 {
|
|
527
540
|
--tw-translate-y: -0.5rem;
|
|
528
541
|
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));
|
|
529
542
|
}
|
|
543
|
+
.-sb-translate-y-9 {
|
|
544
|
+
--tw-translate-y: -2.25rem;
|
|
545
|
+
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));
|
|
546
|
+
}
|
|
530
547
|
.sb--translate-x-1\/2 {
|
|
531
548
|
--tw-translate-x: -50%;
|
|
532
549
|
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));
|
|
@@ -590,6 +607,9 @@ video {
|
|
|
590
607
|
.sb-justify-between {
|
|
591
608
|
justify-content: space-between;
|
|
592
609
|
}
|
|
610
|
+
.sb-gap-1 {
|
|
611
|
+
gap: 0.25rem;
|
|
612
|
+
}
|
|
593
613
|
.sb-gap-2 {
|
|
594
614
|
gap: 0.5rem;
|
|
595
615
|
}
|
|
@@ -676,6 +696,9 @@ video {
|
|
|
676
696
|
padding-top: 1.25rem;
|
|
677
697
|
padding-bottom: 1.25rem;
|
|
678
698
|
}
|
|
699
|
+
.sb-pb-2 {
|
|
700
|
+
padding-bottom: 0.5rem;
|
|
701
|
+
}
|
|
679
702
|
.sb-text-left {
|
|
680
703
|
text-align: left;
|
|
681
704
|
}
|
package/dist/index.mjs
CHANGED
|
@@ -537,22 +537,22 @@ var VolumeSlider = ({ width = 0 }) => {
|
|
|
537
537
|
return /* @__PURE__ */ jsxs4(
|
|
538
538
|
"div",
|
|
539
539
|
{
|
|
540
|
-
className: `sb-flex sb-flex-col-reverse ${width
|
|
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
541
|
children: [
|
|
542
542
|
/* @__PURE__ */ jsx19(
|
|
543
543
|
"div",
|
|
544
544
|
{
|
|
545
|
-
className: `sb-flex sb-relative ${width
|
|
545
|
+
className: `sb-flex sb-relative ${width < 400 ? "" : ""} sb-top-1 sb-items-end`,
|
|
546
546
|
onClick: toggleVisiblity,
|
|
547
547
|
children: volume === 0 || (player == null ? void 0 : player.muted()) ? /* @__PURE__ */ jsx19(
|
|
548
548
|
MuteIcon_default,
|
|
549
549
|
{
|
|
550
|
-
className: `sb-w-3 sb-h-3 ${width
|
|
550
|
+
className: `sb-w-3 sb-h-3 ${width < 400 ? " " : ""} sb-h-5 sb-w-5`
|
|
551
551
|
}
|
|
552
552
|
) : /* @__PURE__ */ jsx19(
|
|
553
553
|
UnmuteIcon_default,
|
|
554
554
|
{
|
|
555
|
-
className: `sb-w-3 sb-h-3 ${width
|
|
555
|
+
className: `sb-w-3 sb-h-3 ${width < 400 ? "" : ""} sb-h-5 sb-w-5`
|
|
556
556
|
}
|
|
557
557
|
)
|
|
558
558
|
}
|
|
@@ -560,7 +560,7 @@ var VolumeSlider = ({ width = 0 }) => {
|
|
|
560
560
|
/* @__PURE__ */ jsx19("div", { className: "sb-flex sb-items-center sb-justify-center", children: /* @__PURE__ */ jsx19(
|
|
561
561
|
"div",
|
|
562
562
|
{
|
|
563
|
-
className: `${isVisible && width
|
|
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
564
|
children: /* @__PURE__ */ jsx19(
|
|
565
565
|
Slider_default,
|
|
566
566
|
{
|
|
@@ -1129,14 +1129,14 @@ var ControlBar = ({
|
|
|
1129
1129
|
handleSaveNoteAction
|
|
1130
1130
|
}) => {
|
|
1131
1131
|
const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
|
|
1132
|
-
const [width,
|
|
1132
|
+
const [width, setWidth] = useState12(0);
|
|
1133
1133
|
const seek = (duration2) => {
|
|
1134
1134
|
const currentTime = Number((player == null ? void 0 : player.currentTime()) || 0);
|
|
1135
1135
|
player == null ? void 0 : player.currentTime(currentTime + duration2);
|
|
1136
1136
|
};
|
|
1137
1137
|
const container = document.getElementById(`video-container-${id}`);
|
|
1138
1138
|
function handleWidthChange(width2) {
|
|
1139
|
-
|
|
1139
|
+
setWidth(width2);
|
|
1140
1140
|
}
|
|
1141
1141
|
const resizeObserver = new ResizeObserver((entries) => {
|
|
1142
1142
|
for (let entry of entries) {
|
|
@@ -1158,7 +1158,7 @@ var ControlBar = ({
|
|
|
1158
1158
|
useEffect13(() => {
|
|
1159
1159
|
setDuration(duration);
|
|
1160
1160
|
}, [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: [
|
|
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 sb-pb-2", children: [
|
|
1162
1162
|
/* @__PURE__ */ jsx33(BufferTracker_default, {}),
|
|
1163
1163
|
/* @__PURE__ */ jsx33(CurrentTimeTracker_default, {}),
|
|
1164
1164
|
/* @__PURE__ */ jsx33(
|
|
@@ -1181,9 +1181,27 @@ var ControlBar = ({
|
|
|
1181
1181
|
children: /* @__PURE__ */ jsx33(ForwardIcon_default, { className: "sb-w-3 sb-h-3" })
|
|
1182
1182
|
}
|
|
1183
1183
|
),
|
|
1184
|
-
/* @__PURE__ */ jsx33(
|
|
1185
|
-
|
|
1186
|
-
|
|
1184
|
+
/* @__PURE__ */ jsx33(
|
|
1185
|
+
"div",
|
|
1186
|
+
{
|
|
1187
|
+
className: `${width < 400 ? "sb-w-[0px] sb-ml-0 sb-mr-0" : "sb-w-full"}`,
|
|
1188
|
+
children: /* @__PURE__ */ jsxs13(
|
|
1189
|
+
"div",
|
|
1190
|
+
{
|
|
1191
|
+
style: width < 400 ? {
|
|
1192
|
+
width: `${width * 0.8}px`,
|
|
1193
|
+
left: "10%"
|
|
1194
|
+
} : { width: "100%" },
|
|
1195
|
+
className: `flex gap-2 ${width < 400 ? "absolute -sb-translate-y-9" : "-sb-translate-y-0 sb-w-full"} hover:sb-w-[45%] sb-transition-all sb-ease-in-out sb-duration-500`,
|
|
1196
|
+
children: [
|
|
1197
|
+
/* @__PURE__ */ jsx33(CurrentTimeLabel_default, {}),
|
|
1198
|
+
/* @__PURE__ */ jsx33(TimeSliderContainer_default, { chapters, notes }),
|
|
1199
|
+
/* @__PURE__ */ jsx33("p", { children: durationFormater(duration) })
|
|
1200
|
+
]
|
|
1201
|
+
}
|
|
1202
|
+
)
|
|
1203
|
+
}
|
|
1204
|
+
),
|
|
1187
1205
|
/* @__PURE__ */ jsx33("div", { className: "sb-h-full", children: /* @__PURE__ */ jsx33(VolumeSlider_default, { width }) }),
|
|
1188
1206
|
/* @__PURE__ */ jsx33(QualityMenu_default, {}),
|
|
1189
1207
|
/* @__PURE__ */ jsx33(
|
package/dist/styles/tailwind.css
CHANGED
|
@@ -550,9 +550,18 @@ video {
|
|
|
550
550
|
.sb-col-span-9 {
|
|
551
551
|
grid-column: span 9 / span 9;
|
|
552
552
|
}
|
|
553
|
+
.-sb-ml-3 {
|
|
554
|
+
margin-left: -0.75rem;
|
|
555
|
+
}
|
|
553
556
|
.sb-mb-2 {
|
|
554
557
|
margin-bottom: 0.5rem;
|
|
555
558
|
}
|
|
559
|
+
.sb-ml-0 {
|
|
560
|
+
margin-left: 0px;
|
|
561
|
+
}
|
|
562
|
+
.sb-mr-0 {
|
|
563
|
+
margin-right: 0px;
|
|
564
|
+
}
|
|
556
565
|
.sb-flex {
|
|
557
566
|
display: flex;
|
|
558
567
|
}
|
|
@@ -604,6 +613,9 @@ video {
|
|
|
604
613
|
.sb-w-5 {
|
|
605
614
|
width: 1.25rem;
|
|
606
615
|
}
|
|
616
|
+
.sb-w-\[0px\] {
|
|
617
|
+
width: 0px;
|
|
618
|
+
}
|
|
607
619
|
.sb-w-\[150px\] {
|
|
608
620
|
width: 150px;
|
|
609
621
|
}
|
|
@@ -613,16 +625,21 @@ video {
|
|
|
613
625
|
.sb-w-\[22px\] {
|
|
614
626
|
width: 22px;
|
|
615
627
|
}
|
|
616
|
-
.sb-w-\[30\%\] {
|
|
617
|
-
width: 30%;
|
|
618
|
-
}
|
|
619
628
|
.sb-w-full {
|
|
620
629
|
width: 100%;
|
|
621
630
|
}
|
|
631
|
+
.-sb-translate-y-0 {
|
|
632
|
+
--tw-translate-y: -0px;
|
|
633
|
+
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
|
+
}
|
|
622
635
|
.-sb-translate-y-2 {
|
|
623
636
|
--tw-translate-y: -0.5rem;
|
|
624
637
|
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));
|
|
625
638
|
}
|
|
639
|
+
.-sb-translate-y-9 {
|
|
640
|
+
--tw-translate-y: -2.25rem;
|
|
641
|
+
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));
|
|
642
|
+
}
|
|
626
643
|
.sb--translate-x-1\/2 {
|
|
627
644
|
--tw-translate-x: -50%;
|
|
628
645
|
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));
|
|
@@ -686,6 +703,9 @@ video {
|
|
|
686
703
|
.sb-justify-between {
|
|
687
704
|
justify-content: space-between;
|
|
688
705
|
}
|
|
706
|
+
.sb-gap-1 {
|
|
707
|
+
gap: 0.25rem;
|
|
708
|
+
}
|
|
689
709
|
.sb-gap-2 {
|
|
690
710
|
gap: 0.5rem;
|
|
691
711
|
}
|
|
@@ -772,6 +792,9 @@ video {
|
|
|
772
792
|
padding-top: 1.25rem;
|
|
773
793
|
padding-bottom: 1.25rem;
|
|
774
794
|
}
|
|
795
|
+
.sb-pb-2 {
|
|
796
|
+
padding-bottom: 0.5rem;
|
|
797
|
+
}
|
|
775
798
|
.sb-text-left {
|
|
776
799
|
text-align: left;
|
|
777
800
|
}
|