softbuilders-react-video-player 1.1.17 → 1.1.19
Sign up to get free protection for your applications and to get access to all the features.
- 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/VideoPlayerComponent/index.js +2 -2
- package/dist/components/VideoPlayerComponent/index.js.map +1 -1
- package/dist/components/VideoPlayerComponent/index.tsx +2 -2
- 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 +23 -3
- package/dist/index.mjs +29 -11
- package/dist/styles/tailwind.css +23 -3
- package/package.json +1 -1
|
@@ -13,17 +13,17 @@ 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
|
-
for (
|
|
26
|
+
for (let entry of entries) {
|
|
27
27
|
const currentWidth = entry.contentRect.width;
|
|
28
28
|
handleWidthChange(currentWidth); // Call the action when width changes
|
|
29
29
|
}
|
|
@@ -50,7 +50,14 @@ const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters,
|
|
|
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,18 +46,20 @@ 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
|
-
for (
|
|
62
|
+
for (let entry of entries) {
|
|
62
63
|
const currentWidth = entry.contentRect.width;
|
|
63
64
|
handleWidthChange(currentWidth); // Call the action when width changes
|
|
64
65
|
}
|
|
@@ -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
|
|
|
@@ -86,7 +88,7 @@ const ControlBar = <T,>({
|
|
|
86
88
|
|
|
87
89
|
return (
|
|
88
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">
|
|
89
|
-
{/* Doesn't display anything, just set the downloaded buffer
|
|
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} />
|
|
@@ -8,7 +8,7 @@ import "./style/style.css";
|
|
|
8
8
|
import "../../styles/tailwind.css";
|
|
9
9
|
import { SoftBuildersVideoPlayerProvider } from "./provider";
|
|
10
10
|
import BigPlayButton from "../BigPlayButton";
|
|
11
|
-
|
|
11
|
+
let bigPlayButtonRoot = {};
|
|
12
12
|
const renderBigPlayButton = (id, player, isPaused, setIsPaused) => {
|
|
13
13
|
const container = document.getElementById(`video-container-${id}`);
|
|
14
14
|
if (container) {
|
|
@@ -21,7 +21,7 @@ const renderBigPlayButton = (id, player, isPaused, setIsPaused) => {
|
|
|
21
21
|
}
|
|
22
22
|
}
|
|
23
23
|
};
|
|
24
|
-
|
|
24
|
+
let controlBarRoot = {};
|
|
25
25
|
const renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, handleSaveNoteAction) => {
|
|
26
26
|
const container = document.getElementById(`video-container-${id}`);
|
|
27
27
|
if (container) {
|
|
@@ -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;AAC7C,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VideoPlayerComponent/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -13,7 +13,7 @@ import "./style/style.css";
|
|
|
13
13
|
import "../../styles/tailwind.css";
|
|
14
14
|
import { SoftBuildersVideoPlayerProvider } from "./provider";
|
|
15
15
|
import BigPlayButton from "../BigPlayButton";
|
|
16
|
-
|
|
16
|
+
let bigPlayButtonRoot: {
|
|
17
17
|
[key: string]: ReactDOM.Root | undefined;
|
|
18
18
|
} = {};
|
|
19
19
|
const renderBigPlayButton = (
|
|
@@ -39,7 +39,7 @@ const renderBigPlayButton = (
|
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
41
|
};
|
|
42
|
-
|
|
42
|
+
let controlBarRoot: {
|
|
43
43
|
[key: string]: ReactDOM.Root | undefined;
|
|
44
44
|
} = {};
|
|
45
45
|
const renderControlBar = <T,>(
|
|
@@ -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
|
}
|
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,17 +1129,17 @@ 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
|
-
for (
|
|
1142
|
+
for (let entry of entries) {
|
|
1143
1143
|
const currentWidth = entry.contentRect.width;
|
|
1144
1144
|
handleWidthChange(currentWidth);
|
|
1145
1145
|
}
|
|
@@ -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
|
}
|