softbuilders-react-video-player 1.1.70 → 1.1.71
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/ControlBar/index.js +25 -37
- package/dist/components/ControlBar/index.js.map +1 -1
- package/dist/components/ControlBar/index.tsx +75 -80
- package/dist/components/QualityMenu/index.js +1 -1
- package/dist/components/QualityMenu/index.js.map +1 -1
- package/dist/components/QualityMenu/index.tsx +1 -1
- package/dist/components/SoftBuildersVideoPlayer/index.js +1 -1
- package/dist/components/SoftBuildersVideoPlayer/index.js.map +1 -1
- package/dist/components/SoftBuildersVideoPlayer/index.tsx +17 -14
- package/dist/components/Tooltip/GlobalTooltip.d.ts +2 -0
- package/dist/components/Tooltip/GlobalTooltip.js +20 -0
- package/dist/components/Tooltip/GlobalTooltip.js.map +1 -0
- package/dist/components/Tooltip/GlobalTooltip.tsx +53 -0
- package/dist/components/Tooltip/index.d.ts +4 -3
- package/dist/components/Tooltip/index.js +5 -10
- package/dist/components/Tooltip/index.js.map +1 -1
- package/dist/components/Tooltip/index.tsx +7 -19
- package/dist/components/VideoPlayerComponent/index.js +1 -1
- package/dist/components/VideoPlayerComponent/index.js.map +1 -1
- package/dist/components/VideoPlayerComponent/index.tsx +18 -15
- package/dist/components/VolumeSlider/index.js +25 -6
- package/dist/components/VolumeSlider/index.js.map +1 -1
- package/dist/components/VolumeSlider/index.tsx +45 -17
- package/dist/index.css +18 -69
- package/dist/index.mjs +155 -96
- package/dist/styles/tailwind.css +18 -66
- package/package.json +1 -1
|
@@ -11,6 +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
|
+
import TooltipModal from "../Tooltip/GlobalTooltip";
|
|
14
15
|
const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, id, handleSaveNoteAction, handleControlDisplayTimer, setIsQualityMenuOpen, setIsSubtitleMenuOpen, setNoteOpen, disableNote, noteButtonClick, }) => {
|
|
15
16
|
const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
|
|
16
17
|
const [width, setWidth] = useState(0);
|
|
@@ -21,16 +22,6 @@ const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters,
|
|
|
21
22
|
};
|
|
22
23
|
const [volumeSliderToggler, setVolumeToggler] = useState(false);
|
|
23
24
|
const container = document.getElementById(`video-container-${id}`);
|
|
24
|
-
const [isToolTip, setIsToolTip] = useState({
|
|
25
|
-
sub: false,
|
|
26
|
-
seekForward: false,
|
|
27
|
-
seekBackward: false,
|
|
28
|
-
play: false,
|
|
29
|
-
pause: false,
|
|
30
|
-
volume: false,
|
|
31
|
-
quality: false,
|
|
32
|
-
fullScreen: false,
|
|
33
|
-
});
|
|
34
25
|
function handleWidthChange(width) {
|
|
35
26
|
setWidth(width);
|
|
36
27
|
}
|
|
@@ -61,10 +52,10 @@ const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters,
|
|
|
61
52
|
? "sb-absolute sb-bottom-1 sb-items-end sb-mb-1 sb-pb-2 "
|
|
62
53
|
: "sb-items-start"} sb-pb-2`, children: [_jsx(BufferTracker, {}), _jsx(CurrentTimeTracker, {}), _jsx("button", { onClick: () => {
|
|
63
54
|
seek(-seekStep);
|
|
64
|
-
}, 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) => {
|
|
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(TooltipModal, { content: _jsx("p", { children: isPaused ? "Play" : "pause" }), isLeft: true, children: _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) => {
|
|
65
56
|
e.preventDefault();
|
|
66
57
|
seek(seekStep);
|
|
67
|
-
}, children: _jsx(ForwardIcon, { className: "sb-w-3 sb-h-3" }) }),
|
|
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" }) }) }),
|
|
68
59
|
// isSeeking ||
|
|
69
60
|
// width > 400 &&
|
|
70
61
|
_jsx("div", { className: `${width < 400 ? "sb-flex-1 sb-ml-0 sb-mr-0" : "sb-w-full"}`, children: _jsxs("div", { style: width < 400
|
|
@@ -73,31 +64,28 @@ const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters,
|
|
|
73
64
|
left: "5%",
|
|
74
65
|
top: "90%",
|
|
75
66
|
}
|
|
76
|
-
: { width: "98%" }, className: `flex gap-2 ${width < 400 ? "absolute sb-top-1" : "-sb-translate-y-0 sb-w-full"} hover:sb-w-[45%] `, children: [_jsx(CurrentTimeLabel, {}), _jsx(TimeSliderContainer, { chapters: chapters, notes: notes }), _jsx("p", { children: durationFormater(duration) })] }) }), _jsx("div", { className: "sb-h-full", children: _jsx(VolumeSlider, { volumeSliderToggler: volumeSliderToggler, width: width, setIsSeeking: (val) => setIsSeeking(val), handleControlDisplayTimer: handleControlDisplayTimer }) }), _jsx(QualityMenu, { width: width, onClick: (e, isOpen) => {
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
player === null || player === void 0 ? void 0 : player.requestFullscreen();
|
|
99
|
-
}
|
|
100
|
-
}, children: _jsx(FullScreenIcon, { className: "sb-w-3 sb-h-3" }) })] }));
|
|
67
|
+
: { width: "98%" }, className: `flex gap-2 ${width < 400 ? "absolute sb-top-1" : "-sb-translate-y-0 sb-w-full"} hover:sb-w-[45%] `, children: [_jsx(CurrentTimeLabel, {}), _jsx(TimeSliderContainer, { chapters: chapters, notes: notes }), _jsx("p", { children: durationFormater(duration) })] }) }), _jsx("div", { className: "sb-h-full", children: _jsx(VolumeSlider, { volumeSliderToggler: volumeSliderToggler, width: width, setIsSeeking: (val) => setIsSeeking(val), handleControlDisplayTimer: handleControlDisplayTimer }) }), _jsx(TooltipModal, { width: width, content: _jsx("p", { children: "Quality" }), children: _jsx(QualityMenu, { width: width, onClick: (e, isOpen) => {
|
|
68
|
+
setVolumeToggler(!volumeSliderToggler);
|
|
69
|
+
setIsQualityMenuOpen && setIsQualityMenuOpen(isOpen);
|
|
70
|
+
} }) }), disableNote && (_jsx(TooltipModal, { width: width, content: _jsx("p", { children: "Create note" }), children: _jsx(CreateNoteMenu, { handleSaveNoteAction: handleSaveNoteAction, width: width, setNoteOpen: setNoteOpen, noteButtonClick: (e) => {
|
|
71
|
+
noteButtonClick &&
|
|
72
|
+
noteButtonClick({
|
|
73
|
+
time: Number((player === null || player === void 0 ? void 0 : player.currentTime()) || 0),
|
|
74
|
+
isOpen: e,
|
|
75
|
+
});
|
|
76
|
+
} }) })), _jsx(TooltipModal, { width: width, content: _jsx("p", { children: "Subtitle" }), children: _jsx(SubtitleMenu, { width: width, onClick: (e, isOpen) => {
|
|
77
|
+
setVolumeToggler(!volumeSliderToggler);
|
|
78
|
+
setIsSubtitleMenuOpen && setIsSubtitleMenuOpen(isOpen);
|
|
79
|
+
} }) }), _jsx(TooltipModal, { width: width, content: _jsx("p", { children: "Full screen" }), children: _jsx("button", { onClick: (e) => {
|
|
80
|
+
e.preventDefault();
|
|
81
|
+
e.stopPropagation();
|
|
82
|
+
if (player === null || player === void 0 ? void 0 : player.isFullscreen()) {
|
|
83
|
+
player === null || player === void 0 ? void 0 : player.exitFullscreen();
|
|
84
|
+
}
|
|
85
|
+
else {
|
|
86
|
+
player === null || player === void 0 ? void 0 : player.requestFullscreen();
|
|
87
|
+
}
|
|
88
|
+
}, children: _jsx(FullScreenIcon, { className: "sb-w-3 sb-h-3" }) }) })] }));
|
|
101
89
|
};
|
|
102
90
|
export default ControlBar;
|
|
103
91
|
//# sourceMappingURL=index.js.map
|
|
@@ -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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"}
|
|
@@ -21,7 +21,7 @@ import {
|
|
|
21
21
|
PauseIcon,
|
|
22
22
|
PlayIcon,
|
|
23
23
|
} from "../../images";
|
|
24
|
-
import
|
|
24
|
+
import TooltipModal from "../Tooltip/GlobalTooltip";
|
|
25
25
|
|
|
26
26
|
type Props<T> = {
|
|
27
27
|
player: Player | undefined;
|
|
@@ -40,16 +40,6 @@ type Props<T> = {
|
|
|
40
40
|
setNoteOpen?: (val: boolean) => void;
|
|
41
41
|
noteButtonClick?: (e: any) => void;
|
|
42
42
|
};
|
|
43
|
-
type TTool = {
|
|
44
|
-
sub: boolean;
|
|
45
|
-
seekForward: boolean;
|
|
46
|
-
seekBackward: boolean;
|
|
47
|
-
play: boolean;
|
|
48
|
-
pause: boolean;
|
|
49
|
-
volume: boolean;
|
|
50
|
-
quality: boolean;
|
|
51
|
-
fullScreen: boolean;
|
|
52
|
-
};
|
|
53
43
|
|
|
54
44
|
const ControlBar = <T,>({
|
|
55
45
|
player,
|
|
@@ -77,16 +67,7 @@ const ControlBar = <T,>({
|
|
|
77
67
|
};
|
|
78
68
|
const [volumeSliderToggler, setVolumeToggler] = useState(false);
|
|
79
69
|
const container = document.getElementById(`video-container-${id}`);
|
|
80
|
-
|
|
81
|
-
sub: false,
|
|
82
|
-
seekForward: false,
|
|
83
|
-
seekBackward: false,
|
|
84
|
-
play: false,
|
|
85
|
-
pause: false,
|
|
86
|
-
volume: false,
|
|
87
|
-
quality: false,
|
|
88
|
-
fullScreen: false,
|
|
89
|
-
});
|
|
70
|
+
|
|
90
71
|
function handleWidthChange(width: any) {
|
|
91
72
|
setWidth(width);
|
|
92
73
|
}
|
|
@@ -137,22 +118,40 @@ const ControlBar = <T,>({
|
|
|
137
118
|
seek(-seekStep);
|
|
138
119
|
}}
|
|
139
120
|
>
|
|
140
|
-
<
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
)}
|
|
121
|
+
<TooltipModal
|
|
122
|
+
width={width}
|
|
123
|
+
content={<p>Backward 5 sec</p>}
|
|
124
|
+
isLeft={true}
|
|
125
|
+
>
|
|
126
|
+
<BackwardIcon className="sb-w-3 sb-h-3" />
|
|
127
|
+
</TooltipModal>
|
|
148
128
|
</button>
|
|
129
|
+
<TooltipModal
|
|
130
|
+
content={<p>{isPaused ? "Play" : "pause"}</p>}
|
|
131
|
+
isLeft={true}
|
|
132
|
+
>
|
|
133
|
+
<button onClick={togglePlay}>
|
|
134
|
+
{isPaused ? (
|
|
135
|
+
<PlayIcon className="sb-w-3 sb-h-3" />
|
|
136
|
+
) : (
|
|
137
|
+
<PauseIcon className="sb-w-3 sb-h-3" />
|
|
138
|
+
)}
|
|
139
|
+
</button>
|
|
140
|
+
</TooltipModal>
|
|
141
|
+
|
|
149
142
|
<button
|
|
150
143
|
onClick={(e) => {
|
|
151
144
|
e.preventDefault();
|
|
152
145
|
seek(seekStep);
|
|
153
146
|
}}
|
|
154
147
|
>
|
|
155
|
-
<
|
|
148
|
+
<TooltipModal
|
|
149
|
+
width={width}
|
|
150
|
+
content={<p>Forward 5 sec</p>}
|
|
151
|
+
isLeft={true}
|
|
152
|
+
>
|
|
153
|
+
<ForwardIcon className="sb-w-3 sb-h-3" />
|
|
154
|
+
</TooltipModal>
|
|
156
155
|
</button>
|
|
157
156
|
|
|
158
157
|
{
|
|
@@ -194,62 +193,58 @@ const ControlBar = <T,>({
|
|
|
194
193
|
handleControlDisplayTimer={handleControlDisplayTimer}
|
|
195
194
|
/>
|
|
196
195
|
</div>
|
|
196
|
+
<TooltipModal width={width} content={<p>Quality</p>}>
|
|
197
|
+
<QualityMenu
|
|
198
|
+
width={width}
|
|
199
|
+
onClick={(e: any, isOpen: boolean) => {
|
|
200
|
+
setVolumeToggler(!volumeSliderToggler);
|
|
201
|
+
setIsQualityMenuOpen && setIsQualityMenuOpen(isOpen);
|
|
202
|
+
}}
|
|
203
|
+
/>
|
|
204
|
+
</TooltipModal>
|
|
197
205
|
|
|
198
|
-
<QualityMenu
|
|
199
|
-
width={width}
|
|
200
|
-
onClick={(e: any, isOpen: boolean) => {
|
|
201
|
-
setVolumeToggler(!volumeSliderToggler);
|
|
202
|
-
setIsQualityMenuOpen && setIsQualityMenuOpen(isOpen);
|
|
203
|
-
}}
|
|
204
|
-
/>
|
|
205
206
|
{/* handleSaveNoteAction */}
|
|
206
207
|
{disableNote && (
|
|
207
|
-
<
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
208
|
+
<TooltipModal width={width} content={<p>Create note</p>}>
|
|
209
|
+
<CreateNoteMenu
|
|
210
|
+
handleSaveNoteAction={handleSaveNoteAction}
|
|
211
|
+
width={width}
|
|
212
|
+
setNoteOpen={setNoteOpen}
|
|
213
|
+
noteButtonClick={(e) => {
|
|
214
|
+
noteButtonClick &&
|
|
215
|
+
noteButtonClick({
|
|
216
|
+
time: Number(player?.currentTime() || 0),
|
|
217
|
+
isOpen: e,
|
|
218
|
+
});
|
|
219
|
+
}}
|
|
220
|
+
/>
|
|
221
|
+
</TooltipModal>
|
|
222
|
+
)}
|
|
223
|
+
<TooltipModal width={width} content={<p>Subtitle</p>}>
|
|
224
|
+
<SubtitleMenu
|
|
213
225
|
width={width}
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
noteButtonClick({
|
|
218
|
-
time: Number(player?.currentTime() || 0),
|
|
219
|
-
isOpen: e,
|
|
220
|
-
});
|
|
226
|
+
onClick={(e: any, isOpen: boolean) => {
|
|
227
|
+
setVolumeToggler(!volumeSliderToggler);
|
|
228
|
+
setIsSubtitleMenuOpen && setIsSubtitleMenuOpen(isOpen);
|
|
221
229
|
}}
|
|
222
230
|
/>
|
|
223
|
-
|
|
224
|
-
|
|
225
|
-
|
|
226
|
-
|
|
227
|
-
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
onClick={(e) => {
|
|
241
|
-
e.preventDefault();
|
|
242
|
-
e.stopPropagation();
|
|
243
|
-
|
|
244
|
-
if (player?.isFullscreen()) {
|
|
245
|
-
player?.exitFullscreen();
|
|
246
|
-
} else {
|
|
247
|
-
player?.requestFullscreen();
|
|
248
|
-
}
|
|
249
|
-
}}
|
|
250
|
-
>
|
|
251
|
-
<FullScreenIcon className="sb-w-3 sb-h-3" />
|
|
252
|
-
</button>
|
|
231
|
+
</TooltipModal>
|
|
232
|
+
<TooltipModal width={width} content={<p>Full screen</p>}>
|
|
233
|
+
<button
|
|
234
|
+
onClick={(e) => {
|
|
235
|
+
e.preventDefault();
|
|
236
|
+
e.stopPropagation();
|
|
237
|
+
|
|
238
|
+
if (player?.isFullscreen()) {
|
|
239
|
+
player?.exitFullscreen();
|
|
240
|
+
} else {
|
|
241
|
+
player?.requestFullscreen();
|
|
242
|
+
}
|
|
243
|
+
}}
|
|
244
|
+
>
|
|
245
|
+
<FullScreenIcon className="sb-w-3 sb-h-3" />
|
|
246
|
+
</button>
|
|
247
|
+
</TooltipModal>
|
|
253
248
|
</div>
|
|
254
249
|
);
|
|
255
250
|
};
|
|
@@ -33,7 +33,7 @@ const QualityMenu = ({ width, onClick }) => {
|
|
|
33
33
|
if (closeMenuFunction) {
|
|
34
34
|
closeMenuFunction();
|
|
35
35
|
}
|
|
36
|
-
}, className: "hover:sb-scale-150", children: _jsx(LeftArrowIcon, { className: "sb-w-3 sb-h-3" }) }), _jsx("h3", { children: "Quality" })] }), _jsx("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }), _jsx("div", { className: "sb-px-5 sb-flex sb-flex-col sb-gap-3 sb-items-start ", children: qualities.map((q, i) => {
|
|
36
|
+
}, className: "hover:sb-scale-150", children: _jsx(LeftArrowIcon, { className: "sb-w-3 sb-h-3" }) }), _jsx("h3", { children: "Quality" })] }), _jsx("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }), _jsx("div", { className: "sb-px-5 sb-flex sb-flex-col sb-gap-3 sb-items-start ", children: qualities === null || qualities === void 0 ? void 0 : qualities.map((q, i) => {
|
|
37
37
|
return (_jsx(_Fragment, { children: _jsx(QualityOption, { width: width, isSelected: currentQualitySrc === q.label, quality: q, onClick: () => {
|
|
38
38
|
const source = qualities.find((_q) => q.label == _q.label);
|
|
39
39
|
if (source && source.src != currentQualitySrc) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/QualityMenu/index.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/QualityMenu/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -120,7 +120,7 @@ const QualityMenu = ({ width, onClick }: QualityMenuProps) => {
|
|
|
120
120
|
<div className="sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" />
|
|
121
121
|
|
|
122
122
|
<div className="sb-px-5 sb-flex sb-flex-col sb-gap-3 sb-items-start ">
|
|
123
|
-
{qualities
|
|
123
|
+
{qualities?.map((q, i) => {
|
|
124
124
|
return (
|
|
125
125
|
<>
|
|
126
126
|
<QualityOption
|
|
@@ -12,7 +12,7 @@ const DEFAULT_OPTIONS = {
|
|
|
12
12
|
sources: [],
|
|
13
13
|
tracks: [],
|
|
14
14
|
};
|
|
15
|
-
const Component = forwardRef(({ options, notes, chapters, startTime = 0, handleSaveNoteAction, onPlay, onPause, isFocused = true, disableNote, childRef, bottomRedBar, noteButtonClick, }) => {
|
|
15
|
+
const Component = forwardRef(({ options, notes, chapters, startTime = 0, handleSaveNoteAction, onPlay, onPause, isFocused = true, disableNote, childRef, bottomRedBar, noteButtonClick, }, ref) => {
|
|
16
16
|
options = Object.assign(Object.assign({}, options), { responsive: true, inactivityTimeout: 0, fullscreen: {
|
|
17
17
|
navigationUI: "hide",
|
|
18
18
|
} });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SoftBuildersVideoPlayer/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,UAAU,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACrE,OAAO,oBAAoB,MAAM,yBAAyB,CAAC;AAO3D,OAAO,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAE9C,MAAM,eAAe,GAAmC;IACtD,QAAQ,EAAE,KAAK;IACf,QAAQ,EAAE,IAAI;IACd,KAAK,EAAE,KAAK;IACZ,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,EAAE;IACX,MAAM,EAAE,EAAE;CACX,CAAC;AAiBF,MAAM,SAAS,GAAG,UAAU,CAC1B,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SoftBuildersVideoPlayer/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -35,20 +35,23 @@ export type Props<T = any> = {
|
|
|
35
35
|
};
|
|
36
36
|
|
|
37
37
|
const Component = forwardRef<HTMLDivElement, Props<any>>(
|
|
38
|
-
(
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
38
|
+
(
|
|
39
|
+
{
|
|
40
|
+
options,
|
|
41
|
+
notes,
|
|
42
|
+
chapters,
|
|
43
|
+
startTime = 0,
|
|
44
|
+
handleSaveNoteAction,
|
|
45
|
+
onPlay,
|
|
46
|
+
onPause,
|
|
47
|
+
isFocused = true,
|
|
48
|
+
disableNote,
|
|
49
|
+
childRef,
|
|
50
|
+
bottomRedBar,
|
|
51
|
+
noteButtonClick,
|
|
52
|
+
}: Props<any>,
|
|
53
|
+
ref?: any
|
|
54
|
+
) => {
|
|
52
55
|
options = {
|
|
53
56
|
...options,
|
|
54
57
|
responsive: true,
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
const TooltipModal = ({ content, children, isLeft = false, width = 0, }) => {
|
|
4
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
5
|
+
const showTooltip = () => setIsOpen(true);
|
|
6
|
+
const hideTooltip = () => setIsOpen(false);
|
|
7
|
+
return (_jsxs("div", { className: "tooltip-container", style: { position: "relative", display: "inline-block" }, children: [_jsx("div", { onMouseEnter: showTooltip, onMouseLeave: hideTooltip, style: { cursor: "pointer" }, children: children }), isOpen && (_jsx("div", { className: `sb-tooltip-modal sb-text-orange-900 sb-my-2 ${width > 400 ? "sb-bottom-[105]" : "sb-top-[105%]"}`, style: {
|
|
8
|
+
position: "absolute",
|
|
9
|
+
left: !isLeft ? "-100%" : "100%",
|
|
10
|
+
transform: !isLeft ? "translateX(-50%)" : "translateX(0%)",
|
|
11
|
+
backgroundColor: "white",
|
|
12
|
+
padding: "8px",
|
|
13
|
+
borderRadius: "4px",
|
|
14
|
+
whiteSpace: "nowrap",
|
|
15
|
+
boxShadow: "0px 0px 5px grey",
|
|
16
|
+
zIndex: 1000,
|
|
17
|
+
}, children: content }))] }));
|
|
18
|
+
};
|
|
19
|
+
export default TooltipModal;
|
|
20
|
+
//# sourceMappingURL=GlobalTooltip.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"GlobalTooltip.js","sourceRoot":"","sources":["../../../src/components/Tooltip/GlobalTooltip.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAExC,MAAM,YAAY,GAAG,CAAC,EACpB,OAAO,EACP,QAAQ,EACR,MAAM,GAAG,KAAK,EACd,KAAK,GAAG,CAAC,GACL,EAAE,EAAE;IACR,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAE5C,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;IAC1C,MAAM,WAAW,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,KAAK,CAAC,CAAC;IAE3C,OAAO,CACL,eACE,SAAS,EAAC,mBAAmB,EAC7B,KAAK,EAAE,EAAE,QAAQ,EAAE,UAAU,EAAE,OAAO,EAAE,cAAc,EAAE,aAGxD,cACE,YAAY,EAAE,WAAW,EACzB,YAAY,EAAE,WAAW,EACzB,KAAK,EAAE,EAAE,MAAM,EAAE,SAAS,EAAE,YAE3B,QAAQ,GACL,EAGL,MAAM,IAAI,CACT,cACE,SAAS,EAAE,+CACT,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,iBAAiB,CAAC,CAAC,CAAC,eACpC,EAAE,EACF,KAAK,EAAE;oBACL,QAAQ,EAAE,UAAU;oBACpB,IAAI,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM;oBAChC,SAAS,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC,kBAAkB,CAAC,CAAC,CAAC,gBAAgB;oBAC1D,eAAe,EAAE,OAAO;oBACxB,OAAO,EAAE,KAAK;oBACd,YAAY,EAAE,KAAK;oBACnB,UAAU,EAAE,QAAQ;oBACpB,SAAS,EAAE,kBAAkB;oBAC7B,MAAM,EAAE,IAAI;iBACb,YAEA,OAAO,GACJ,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
|
|
3
|
+
const TooltipModal = ({
|
|
4
|
+
content,
|
|
5
|
+
children,
|
|
6
|
+
isLeft = false,
|
|
7
|
+
width = 0,
|
|
8
|
+
}: any) => {
|
|
9
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
10
|
+
|
|
11
|
+
const showTooltip = () => setIsOpen(true);
|
|
12
|
+
const hideTooltip = () => setIsOpen(false);
|
|
13
|
+
|
|
14
|
+
return (
|
|
15
|
+
<div
|
|
16
|
+
className="tooltip-container"
|
|
17
|
+
style={{ position: "relative", display: "inline-block" }}
|
|
18
|
+
>
|
|
19
|
+
{/* Element that triggers the tooltip */}
|
|
20
|
+
<div
|
|
21
|
+
onMouseEnter={showTooltip}
|
|
22
|
+
onMouseLeave={hideTooltip}
|
|
23
|
+
style={{ cursor: "pointer" }}
|
|
24
|
+
>
|
|
25
|
+
{children}
|
|
26
|
+
</div>
|
|
27
|
+
|
|
28
|
+
{/* Tooltip content (modal) */}
|
|
29
|
+
{isOpen && (
|
|
30
|
+
<div
|
|
31
|
+
className={`sb-tooltip-modal sb-text-orange-900 sb-my-2 ${
|
|
32
|
+
width > 400 ? "sb-bottom-[105]" : "sb-top-[105%]"
|
|
33
|
+
}`}
|
|
34
|
+
style={{
|
|
35
|
+
position: "absolute",
|
|
36
|
+
left: !isLeft ? "-100%" : "100%",
|
|
37
|
+
transform: !isLeft ? "translateX(-50%)" : "translateX(0%)",
|
|
38
|
+
backgroundColor: "white",
|
|
39
|
+
padding: "8px",
|
|
40
|
+
borderRadius: "4px",
|
|
41
|
+
whiteSpace: "nowrap",
|
|
42
|
+
boxShadow: "0px 0px 5px grey",
|
|
43
|
+
zIndex: 1000,
|
|
44
|
+
}}
|
|
45
|
+
>
|
|
46
|
+
{content}
|
|
47
|
+
</div>
|
|
48
|
+
)}
|
|
49
|
+
</div>
|
|
50
|
+
);
|
|
51
|
+
};
|
|
52
|
+
|
|
53
|
+
export default TooltipModal;
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import React from "react";
|
|
2
|
-
type
|
|
2
|
+
type Props = {
|
|
3
3
|
open: boolean;
|
|
4
4
|
children: React.ReactNode;
|
|
5
|
-
|
|
5
|
+
onMouseEnter?: (e: any) => void;
|
|
6
|
+
onMouseLeave?: (e: any) => void;
|
|
6
7
|
};
|
|
7
|
-
declare const Tooltip:
|
|
8
|
+
declare const Tooltip: ({ open, children }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
8
9
|
export default Tooltip;
|
|
@@ -1,16 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
const Tooltip = ({ open, children
|
|
2
|
+
const Tooltip = ({ open, children }) => {
|
|
3
3
|
if (!open)
|
|
4
4
|
return null;
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
bottom: "sb-top-full sb-left-1/2 sb-transform -sb-translate-x-1/2 sb-mt-2",
|
|
10
|
-
left: "sb-right-full sb-top-1/2 sb-transform -sb-translate-y-1/2 sb-mr-2",
|
|
11
|
-
right: "sb-left-full sb-top-1/2 sb-transform -sb-translate-y-1/2 sb-ml-2",
|
|
12
|
-
};
|
|
13
|
-
return (_jsx("div", { className: `sb-relative sb-bg-black sb-text-white sb-text-sm sb-px-2 sb-py-1 sb-rounded sb-shadow-md sb-z-50 ${positionClasses[position]}`, children: children }));
|
|
5
|
+
return (_jsx("div", {
|
|
6
|
+
// onMouseEnter={onMouseEnter}
|
|
7
|
+
// on
|
|
8
|
+
className: "sb-absolute sb-bottom-full sb-mb-2 sb-left-1/2 sb-transform sb--translate-x-1/2 sb-z-10 sb-whitespace-nowrap", children: children }));
|
|
14
9
|
};
|
|
15
10
|
export default Tooltip;
|
|
16
11
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":";AAQA,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":";AAQA,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAS,EAAE,EAAE;IAC5C,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IACvB,OAAO,CACL;QACE,8BAA8B;QAC9B,KAAK;QACL,SAAS,EAAC,8GAA8G,YAEvH,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}
|
|
@@ -1,30 +1,18 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
|
|
3
|
-
type
|
|
3
|
+
type Props = {
|
|
4
4
|
open: boolean;
|
|
5
5
|
children: React.ReactNode;
|
|
6
|
-
|
|
6
|
+
onMouseEnter?: (e: any) => void;
|
|
7
|
+
onMouseLeave?: (e: any) => void;
|
|
7
8
|
};
|
|
8
|
-
|
|
9
|
-
const Tooltip: React.FC<TooltipProps> = ({
|
|
10
|
-
open,
|
|
11
|
-
children,
|
|
12
|
-
position = "top",
|
|
13
|
-
}) => {
|
|
9
|
+
const Tooltip = ({ open, children }: Props) => {
|
|
14
10
|
if (!open) return null;
|
|
15
|
-
console.log("tool tip");
|
|
16
|
-
|
|
17
|
-
// Positioning logic for tooltip
|
|
18
|
-
const positionClasses = {
|
|
19
|
-
top: "sb-bottom-full sb-left-1/2 sb-transform -sb-translate-x-1/2 sb-mb-2",
|
|
20
|
-
bottom: "sb-top-full sb-left-1/2 sb-transform -sb-translate-x-1/2 sb-mt-2",
|
|
21
|
-
left: "sb-right-full sb-top-1/2 sb-transform -sb-translate-y-1/2 sb-mr-2",
|
|
22
|
-
right: "sb-left-full sb-top-1/2 sb-transform -sb-translate-y-1/2 sb-ml-2",
|
|
23
|
-
};
|
|
24
|
-
|
|
25
11
|
return (
|
|
26
12
|
<div
|
|
27
|
-
|
|
13
|
+
// onMouseEnter={onMouseEnter}
|
|
14
|
+
// on
|
|
15
|
+
className="sb-absolute sb-bottom-full sb-mb-2 sb-left-1/2 sb-transform sb--translate-x-1/2 sb-z-10 sb-whitespace-nowrap"
|
|
28
16
|
>
|
|
29
17
|
{children}
|
|
30
18
|
</div>
|
|
@@ -43,7 +43,7 @@ const renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, ch
|
|
|
43
43
|
}
|
|
44
44
|
}
|
|
45
45
|
};
|
|
46
|
-
const VideoPlayerComponent = forwardRef(({ id, options, notes, chapters, startTime = 0, handleSaveNoteAction, poster, onPlay, onPause, disableNote, childRef, bottomRedBar = true, noteButtonClick, }) => {
|
|
46
|
+
const VideoPlayerComponent = forwardRef(({ id, options, notes, chapters, startTime = 0, handleSaveNoteAction, poster, onPlay, onPause, disableNote, childRef, bottomRedBar = true, noteButtonClick, }, ref) => {
|
|
47
47
|
var _a;
|
|
48
48
|
const videoRef = useRef(undefined);
|
|
49
49
|
const playerRef = useRef(undefined);
|