softbuilders-react-video-player 1.1.68 → 1.1.70
Sign up to get free protection for your applications and to get access to all the features.
- package/LICENSE +21 -21
- package/dist/components/ChapterTooltip/index.tsx +65 -65
- package/dist/components/ControlBar/index.js +15 -2
- package/dist/components/ControlBar/index.js.map +1 -1
- package/dist/components/ControlBar/index.tsx +32 -1
- package/dist/components/CreateNoteMenu/index.d.ts +3 -1
- package/dist/components/CreateNoteMenu/index.js +2 -2
- package/dist/components/CreateNoteMenu/index.js.map +1 -1
- package/dist/components/CreateNoteMenu/index.tsx +6 -0
- package/dist/components/CurrentTimeLabel/index.tsx +13 -13
- package/dist/components/Menu/index.tsx +49 -49
- package/dist/components/MenuButton/index.d.ts +3 -1
- package/dist/components/MenuButton/index.js +2 -2
- package/dist/components/MenuButton/index.js.map +1 -1
- package/dist/components/MenuButton/index.tsx +9 -1
- package/dist/components/NoteTooltip/index.tsx +46 -46
- package/dist/components/SubtitleMenu/index.d.ts +3 -1
- package/dist/components/SubtitleMenu/index.js +2 -2
- package/dist/components/SubtitleMenu/index.js.map +1 -1
- package/dist/components/SubtitleMenu/index.tsx +10 -1
- package/dist/components/TimeSliderContainer/index.tsx +1 -1
- package/dist/components/Tooltip/index.d.ts +3 -2
- package/dist/components/Tooltip/index.js +10 -2
- package/dist/components/Tooltip/index.js.map +1 -1
- package/dist/components/Tooltip/index.tsx +34 -16
- package/dist/components/VideoPlayerComponent/index.js +3 -2
- package/dist/components/VideoPlayerComponent/index.js.map +1 -1
- package/dist/components/VideoPlayerComponent/index.tsx +3 -2
- package/dist/components/VideoPlayerComponent/provider.tsx +82 -82
- package/dist/index.css +52 -4
- package/dist/index.mjs +90 -36
- package/dist/styles/tailwind.css +175 -130
- package/package.json +1 -1
package/LICENSE
CHANGED
|
@@ -1,21 +1,21 @@
|
|
|
1
|
-
MIT License
|
|
2
|
-
|
|
3
|
-
Copyright (c) 2024 masri-softbuilders
|
|
4
|
-
|
|
5
|
-
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
-
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
-
in the Software without restriction, including without limitation the rights
|
|
8
|
-
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
-
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
-
furnished to do so, subject to the following conditions:
|
|
11
|
-
|
|
12
|
-
The above copyright notice and this permission notice shall be included in all
|
|
13
|
-
copies or substantial portions of the Software.
|
|
14
|
-
|
|
15
|
-
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
-
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
-
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
-
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
-
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
-
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
-
SOFTWARE.
|
|
1
|
+
MIT License
|
|
2
|
+
|
|
3
|
+
Copyright (c) 2024 masri-softbuilders
|
|
4
|
+
|
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
6
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
7
|
+
in the Software without restriction, including without limitation the rights
|
|
8
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
9
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
10
|
+
furnished to do so, subject to the following conditions:
|
|
11
|
+
|
|
12
|
+
The above copyright notice and this permission notice shall be included in all
|
|
13
|
+
copies or substantial portions of the Software.
|
|
14
|
+
|
|
15
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
16
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
17
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
18
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
19
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
20
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
21
|
+
SOFTWARE.
|
|
@@ -1,65 +1,65 @@
|
|
|
1
|
-
import React, { useEffect, useState } from "react";
|
|
2
|
-
import Tooltip from "../Tooltip";
|
|
3
|
-
import { durationFormater } from "../../utils";
|
|
4
|
-
import { SoftBuildersVideoPlayerChapter } from "../../types";
|
|
5
|
-
import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
|
|
6
|
-
type Chapter = SoftBuildersVideoPlayerChapter & {
|
|
7
|
-
startPercentage: number;
|
|
8
|
-
endPercentage: number;
|
|
9
|
-
};
|
|
10
|
-
type Props = {
|
|
11
|
-
chapter: Chapter;
|
|
12
|
-
};
|
|
13
|
-
const ChapterTooltip = ({ chapter }: Props) => {
|
|
14
|
-
const { player } = useSoftBuildersVideoPlayerContext();
|
|
15
|
-
|
|
16
|
-
const [open, setOpen] = useState(false);
|
|
17
|
-
const { currentTime } = useSoftBuildersVideoPlayerContext();
|
|
18
|
-
|
|
19
|
-
useEffect(() => {
|
|
20
|
-
if (currentTime === Math.floor(chapter.startTime)) {
|
|
21
|
-
setOpen(true);
|
|
22
|
-
|
|
23
|
-
setTimeout(() => {
|
|
24
|
-
setOpen(false);
|
|
25
|
-
}, 5000);
|
|
26
|
-
}
|
|
27
|
-
}, [currentTime, chapter.startTime]);
|
|
28
|
-
|
|
29
|
-
const handleClickChapter = () => {
|
|
30
|
-
player?.currentTime(chapter.startTime);
|
|
31
|
-
};
|
|
32
|
-
|
|
33
|
-
return (
|
|
34
|
-
<div
|
|
35
|
-
id={`ii-section-${chapter.title}`}
|
|
36
|
-
className="sb-flex sb-items-center sb-w-full sb-h-full sb-absolute sb-z-20"
|
|
37
|
-
style={{
|
|
38
|
-
left: `${chapter.startPercentage}%`,
|
|
39
|
-
width: `${chapter.endPercentage - chapter.startPercentage}%`,
|
|
40
|
-
}}
|
|
41
|
-
onMouseEnter={() => setOpen(true)}
|
|
42
|
-
onMouseLeave={() => setOpen(false)}
|
|
43
|
-
>
|
|
44
|
-
<button
|
|
45
|
-
id={`section-${chapter.title}`}
|
|
46
|
-
className="sb-h-full sb-w-full"
|
|
47
|
-
onClick={handleClickChapter}
|
|
48
|
-
>
|
|
49
|
-
<div className="sb-relative sb-flex sb-h-full sb-w-full sb-justify-between sb-items-center">
|
|
50
|
-
<Tooltip open={open}>
|
|
51
|
-
<div className="sb-flex sb-flex-col sb-gap-2 sb-items-center">
|
|
52
|
-
<p>{chapter.title}</p>
|
|
53
|
-
<p className="sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md">
|
|
54
|
-
{durationFormater(chapter.startTime)} -{" "}
|
|
55
|
-
{durationFormater(chapter.endTime)}
|
|
56
|
-
</p>
|
|
57
|
-
</div>
|
|
58
|
-
</Tooltip>
|
|
59
|
-
</div>
|
|
60
|
-
</button>
|
|
61
|
-
</div>
|
|
62
|
-
);
|
|
63
|
-
};
|
|
64
|
-
|
|
65
|
-
export default ChapterTooltip;
|
|
1
|
+
import React, { useEffect, useState } from "react";
|
|
2
|
+
import Tooltip from "../Tooltip";
|
|
3
|
+
import { durationFormater } from "../../utils";
|
|
4
|
+
import { SoftBuildersVideoPlayerChapter } from "../../types";
|
|
5
|
+
import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
|
|
6
|
+
type Chapter = SoftBuildersVideoPlayerChapter & {
|
|
7
|
+
startPercentage: number;
|
|
8
|
+
endPercentage: number;
|
|
9
|
+
};
|
|
10
|
+
type Props = {
|
|
11
|
+
chapter: Chapter;
|
|
12
|
+
};
|
|
13
|
+
const ChapterTooltip = ({ chapter }: Props) => {
|
|
14
|
+
const { player } = useSoftBuildersVideoPlayerContext();
|
|
15
|
+
|
|
16
|
+
const [open, setOpen] = useState(false);
|
|
17
|
+
const { currentTime } = useSoftBuildersVideoPlayerContext();
|
|
18
|
+
|
|
19
|
+
useEffect(() => {
|
|
20
|
+
if (currentTime === Math.floor(chapter.startTime)) {
|
|
21
|
+
setOpen(true);
|
|
22
|
+
|
|
23
|
+
setTimeout(() => {
|
|
24
|
+
setOpen(false);
|
|
25
|
+
}, 5000);
|
|
26
|
+
}
|
|
27
|
+
}, [currentTime, chapter.startTime]);
|
|
28
|
+
|
|
29
|
+
const handleClickChapter = () => {
|
|
30
|
+
player?.currentTime(chapter.startTime);
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
return (
|
|
34
|
+
<div
|
|
35
|
+
id={`ii-section-${chapter.title}`}
|
|
36
|
+
className="sb-flex sb-items-center sb-w-full sb-h-full sb-absolute sb-z-20"
|
|
37
|
+
style={{
|
|
38
|
+
left: `${chapter.startPercentage}%`,
|
|
39
|
+
width: `${chapter.endPercentage - chapter.startPercentage}%`,
|
|
40
|
+
}}
|
|
41
|
+
onMouseEnter={() => setOpen(true)}
|
|
42
|
+
onMouseLeave={() => setOpen(false)}
|
|
43
|
+
>
|
|
44
|
+
<button
|
|
45
|
+
id={`section-${chapter.title}`}
|
|
46
|
+
className="sb-h-full sb-w-full"
|
|
47
|
+
onClick={handleClickChapter}
|
|
48
|
+
>
|
|
49
|
+
<div className="sb-relative sb-flex sb-h-full sb-w-full sb-justify-between sb-items-center">
|
|
50
|
+
<Tooltip open={open}>
|
|
51
|
+
<div className="sb-flex sb-flex-col sb-gap-2 sb-items-center">
|
|
52
|
+
<p>{chapter.title}</p>
|
|
53
|
+
<p className="sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md">
|
|
54
|
+
{durationFormater(chapter.startTime)} -{" "}
|
|
55
|
+
{durationFormater(chapter.endTime)}
|
|
56
|
+
</p>
|
|
57
|
+
</div>
|
|
58
|
+
</Tooltip>
|
|
59
|
+
</div>
|
|
60
|
+
</button>
|
|
61
|
+
</div>
|
|
62
|
+
);
|
|
63
|
+
};
|
|
64
|
+
|
|
65
|
+
export default ChapterTooltip;
|
|
@@ -21,6 +21,16 @@ const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters,
|
|
|
21
21
|
};
|
|
22
22
|
const [volumeSliderToggler, setVolumeToggler] = useState(false);
|
|
23
23
|
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
|
+
});
|
|
24
34
|
function handleWidthChange(width) {
|
|
25
35
|
setWidth(width);
|
|
26
36
|
}
|
|
@@ -66,13 +76,16 @@ const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters,
|
|
|
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) => {
|
|
67
77
|
setVolumeToggler(!volumeSliderToggler);
|
|
68
78
|
setIsQualityMenuOpen && setIsQualityMenuOpen(isOpen);
|
|
69
|
-
} }), disableNote && (_jsx(CreateNoteMenu, { handleSaveNoteAction: handleSaveNoteAction, width: width, setNoteOpen: setNoteOpen, noteButtonClick: (e) => {
|
|
79
|
+
} }), disableNote && (_jsx(CreateNoteMenu, { onMouseEnter: () => setIsToolTip((prev) => (Object.assign(Object.assign({}, prev), { note: true }))), onMouseLeave: () => setIsToolTip((prev) => (Object.assign(Object.assign({}, prev), { note: false }))), handleSaveNoteAction: handleSaveNoteAction, width: width, setNoteOpen: setNoteOpen, noteButtonClick: (e) => {
|
|
70
80
|
noteButtonClick &&
|
|
71
81
|
noteButtonClick({
|
|
72
82
|
time: Number((player === null || player === void 0 ? void 0 : player.currentTime()) || 0),
|
|
73
83
|
isOpen: e,
|
|
74
84
|
});
|
|
75
|
-
} })), _jsx(SubtitleMenu, {
|
|
85
|
+
} })), _jsx(SubtitleMenu, { onMouseEnter: () => {
|
|
86
|
+
console.log("get well");
|
|
87
|
+
setIsToolTip((prev) => (Object.assign(Object.assign({}, prev), { sub: true })));
|
|
88
|
+
}, onMouseLeave: () => setIsToolTip((prev) => (Object.assign(Object.assign({}, prev), { sub: false }))), width: width, onClick: (e, isOpen) => {
|
|
76
89
|
setVolumeToggler(!volumeSliderToggler);
|
|
77
90
|
setIsSubtitleMenuOpen && setIsSubtitleMenuOpen(isOpen);
|
|
78
91
|
} }), _jsx("button", { onClick: (e) => {
|
|
@@ -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":";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;AA+BtB,MAAM,UAAU,GAAG,CAAK,EACtB,MAAM,EACN,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,QAAQ,GAAG,CAAC,EACZ,EAAE,EACF,oBAAoB,EACpB,yBAAyB,EACzB,oBAAoB,EACpB,qBAAqB,EACrB,WAAW,EACX,WAAW,EACX,eAAe,GACN,EAAE,EAAE;IACb,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,GAAG,iCAAiC,EAAE,CAAC;IACvE,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,CAAC,CAAC,CAAC;IAC9C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,CAAC;IACjD,MAAM,IAAI,GAAG,CAAC,QAAgB,EAAE,EAAE;QAChC,MAAM,WAAW,GAAG,MAAM,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,EAAE,KAAI,CAAC,CAAC,CAAC;QACvD,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,CAAC,WAAW,GAAG,QAAQ,CAAC,CAAC;IAC9C,CAAC,CAAC;IACF,MAAM,CAAC,mBAAmB,EAAE,gBAAgB,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAChE,MAAM,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;IACnE,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAQ;QAChD,GAAG,EAAE,KAAK;QACV,WAAW,EAAE,KAAK;QAClB,YAAY,EAAE,KAAK;QACnB,IAAI,EAAE,KAAK;QACX,KAAK,EAAE,KAAK;QACZ,MAAM,EAAE,KAAK;QACb,OAAO,EAAE,KAAK;QACd,UAAU,EAAE,KAAK;KAClB,CAAC,CAAC;IACH,SAAS,iBAAiB,CAAC,KAAU;QACnC,QAAQ,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC;IAED,MAAM,cAAc,GAAG,IAAI,cAAc,CAAC,CAAC,OAAO,EAAE,EAAE;QACpD,KAAK,IAAI,KAAK,IAAI,OAAO,EAAE,CAAC;YAC1B,MAAM,YAAY,GAAG,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC;YAC7C,iBAAiB,CAAC,YAAY,CAAC,CAAC,CAAC,qCAAqC;QACxE,CAAC;IACH,CAAC,CAAC,CAAC;IAEH,8BAA8B;IAC9B,SAAS,IAAI,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAE/C,MAAM,UAAU,GAAG,CAAC,CAAM,EAAE,EAAE;QAC5B,CAAC,CAAC,cAAc,EAAE,CAAC;QACnB,CAAC,CAAC,eAAe,EAAE,CAAC;QAEpB,IAAI,QAAQ;YAAE,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,IAAI,EAAE,CAAC;;YACxB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,KAAK,EAAE,CAAC;QAErB,WAAW,CAAC,CAAC,QAAQ,CAAC,CAAC;IACzB,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,SAAS,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IAEb,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,CAAC,QAAQ,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,OAAO,CACL,eACE,SAAS,EAAE,6EACT,KAAK,GAAG,GAAG;YACT,CAAC,CAAC,uDAAuD;YACzD,CAAC,CAAC,gBACN,UAAU,aAGV,KAAC,aAAa,KAAG,EAEjB,KAAC,kBAAkB,KAAG,EAEtB,iBACE,OAAO,EAAE,GAAG,EAAE;oBACZ,IAAI,CAAC,CAAC,QAAQ,CAAC,CAAC;gBAClB,CAAC,YAED,KAAC,YAAY,IAAC,SAAS,EAAC,eAAe,GAAG,GACnC,EACT,iBAAQ,OAAO,EAAE,UAAU,YACxB,QAAQ,CAAC,CAAC,CAAC,CACV,KAAC,QAAQ,IAAC,SAAS,EAAC,eAAe,GAAG,CACvC,CAAC,CAAC,CAAC,CACF,KAAC,SAAS,IAAC,SAAS,EAAC,eAAe,GAAG,CACxC,GACM,EACT,iBACE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,IAAI,CAAC,QAAQ,CAAC,CAAC;gBACjB,CAAC,YAED,KAAC,WAAW,IAAC,SAAS,EAAC,eAAe,GAAG,GAClC;YAGP,eAAe;YACf,iBAAiB;YACjB,cACE,SAAS,EAAE,GACT,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,WAC9C,EAAE,YAEF,eACE,KAAK,EACH,KAAK,GAAG,GAAG;wBACT,CAAC,CAAC;4BACE,KAAK,EAAE,GAAG,KAAK,GAAG,GAAG,IAAI;4BACzB,IAAI,EAAE,IAAI;4BACV,GAAG,EAAE,KAAK;yBACX;wBACH,CAAC,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,EAEtB,SAAS,EAAE,cACT,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,6BACtC,oBAAoB,aAGpB,KAAC,gBAAgB,KAAG,EAEpB,KAAC,mBAAmB,IAAC,QAAQ,EAAE,QAAQ,EAAE,KAAK,EAAE,KAAK,GAAI,EACzD,sBAAI,gBAAgB,CAAC,QAAQ,CAAC,GAAK,IAC/B,GACF,EAGR,cAAK,SAAS,EAAC,WAAW,YACxB,KAAC,YAAY,IACX,mBAAmB,EAAE,mBAAmB,EACxC,KAAK,EAAE,KAAK,EACZ,YAAY,EAAE,CAAC,GAAG,EAAE,EAAE,CAAC,YAAY,CAAC,GAAG,CAAC,EACxC,yBAAyB,EAAE,yBAAyB,GACpD,GACE,EAEN,KAAC,WAAW,IACV,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,CAAC,CAAM,EAAE,MAAe,EAAE,EAAE;oBACnC,gBAAgB,CAAC,CAAC,mBAAmB,CAAC,CAAC;oBACvC,oBAAoB,IAAI,oBAAoB,CAAC,MAAM,CAAC,CAAC;gBACvD,CAAC,GACD,EAED,WAAW,IAAI,CACd,KAAC,cAAc,IACb,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iCAAM,IAAI,KAAE,IAAI,EAAE,IAAI,IAAG,CAAC,EACrE,YAAY,EAAE,GAAG,EAAE,CACjB,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iCAAM,IAAI,KAAE,IAAI,EAAE,KAAK,IAAG,CAAC,EAEpD,oBAAoB,EAAE,oBAAoB,EAC1C,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,eAAe,EAAE,CAAC,CAAC,EAAE,EAAE;oBACrB,eAAe;wBACb,eAAe,CAAC;4BACd,IAAI,EAAE,MAAM,CAAC,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,EAAE,KAAI,CAAC,CAAC;4BACxC,MAAM,EAAE,CAAC;yBACV,CAAC,CAAC;gBACP,CAAC,GACD,CACH,EAED,KAAC,YAAY,IACX,YAAY,EAAE,GAAG,EAAE;oBACjB,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC,CAAC;oBAExB,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iCAAM,IAAI,KAAE,GAAG,EAAE,IAAI,IAAG,CAAC,CAAC;gBACnD,CAAC,EACD,YAAY,EAAE,GAAG,EAAE,CAAC,YAAY,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,iCAAM,IAAI,KAAE,GAAG,EAAE,KAAK,IAAG,CAAC,EACrE,KAAK,EAAE,KAAK,EACZ,OAAO,EAAE,CAAC,CAAM,EAAE,MAAe,EAAE,EAAE;oBACnC,gBAAgB,CAAC,CAAC,mBAAmB,CAAC,CAAC;oBACvC,qBAAqB,IAAI,qBAAqB,CAAC,MAAM,CAAC,CAAC;gBACzD,CAAC,GACD,EAEF,iBACE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,cAAc,EAAE,CAAC;oBACnB,CAAC,CAAC,eAAe,EAAE,CAAC;oBAEpB,IAAI,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,YAAY,EAAE,EAAE,CAAC;wBAC3B,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,cAAc,EAAE,CAAC;oBAC3B,CAAC;yBAAM,CAAC;wBACN,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,iBAAiB,EAAE,CAAC;oBAC9B,CAAC;gBACH,CAAC,YAED,KAAC,cAAc,IAAC,SAAS,EAAC,eAAe,GAAG,GACrC,IACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -21,7 +21,6 @@ import {
|
|
|
21
21
|
PauseIcon,
|
|
22
22
|
PlayIcon,
|
|
23
23
|
} from "../../images";
|
|
24
|
-
import { set } from "video.js/dist/types/tech/middleware";
|
|
25
24
|
import Tooltip from "../Tooltip";
|
|
26
25
|
|
|
27
26
|
type Props<T> = {
|
|
@@ -41,6 +40,16 @@ type Props<T> = {
|
|
|
41
40
|
setNoteOpen?: (val: boolean) => void;
|
|
42
41
|
noteButtonClick?: (e: any) => void;
|
|
43
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
|
+
};
|
|
44
53
|
|
|
45
54
|
const ControlBar = <T,>({
|
|
46
55
|
player,
|
|
@@ -68,6 +77,16 @@ const ControlBar = <T,>({
|
|
|
68
77
|
};
|
|
69
78
|
const [volumeSliderToggler, setVolumeToggler] = useState(false);
|
|
70
79
|
const container = document.getElementById(`video-container-${id}`);
|
|
80
|
+
const [isToolTip, setIsToolTip] = useState<TTool>({
|
|
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
|
+
});
|
|
71
90
|
function handleWidthChange(width: any) {
|
|
72
91
|
setWidth(width);
|
|
73
92
|
}
|
|
@@ -186,6 +205,10 @@ const ControlBar = <T,>({
|
|
|
186
205
|
{/* handleSaveNoteAction */}
|
|
187
206
|
{disableNote && (
|
|
188
207
|
<CreateNoteMenu
|
|
208
|
+
onMouseEnter={() => setIsToolTip((prev) => ({ ...prev, note: true }))}
|
|
209
|
+
onMouseLeave={() =>
|
|
210
|
+
setIsToolTip((prev) => ({ ...prev, note: false }))
|
|
211
|
+
}
|
|
189
212
|
handleSaveNoteAction={handleSaveNoteAction}
|
|
190
213
|
width={width}
|
|
191
214
|
setNoteOpen={setNoteOpen}
|
|
@@ -198,13 +221,21 @@ const ControlBar = <T,>({
|
|
|
198
221
|
}}
|
|
199
222
|
/>
|
|
200
223
|
)}
|
|
224
|
+
|
|
201
225
|
<SubtitleMenu
|
|
226
|
+
onMouseEnter={() => {
|
|
227
|
+
console.log("get well");
|
|
228
|
+
|
|
229
|
+
setIsToolTip((prev) => ({ ...prev, sub: true }));
|
|
230
|
+
}}
|
|
231
|
+
onMouseLeave={() => setIsToolTip((prev) => ({ ...prev, sub: false }))}
|
|
202
232
|
width={width}
|
|
203
233
|
onClick={(e: any, isOpen: boolean) => {
|
|
204
234
|
setVolumeToggler(!volumeSliderToggler);
|
|
205
235
|
setIsSubtitleMenuOpen && setIsSubtitleMenuOpen(isOpen);
|
|
206
236
|
}}
|
|
207
237
|
/>
|
|
238
|
+
|
|
208
239
|
<button
|
|
209
240
|
onClick={(e) => {
|
|
210
241
|
e.preventDefault();
|
|
@@ -3,6 +3,8 @@ type Props<T> = {
|
|
|
3
3
|
width: number;
|
|
4
4
|
setNoteOpen?: (val: boolean) => void;
|
|
5
5
|
noteButtonClick?: (e: any) => void;
|
|
6
|
+
onMouseEnter?: () => void;
|
|
7
|
+
onMouseLeave?: () => void;
|
|
6
8
|
};
|
|
7
|
-
declare const CreateNoteMenu: <T>({ handleSaveNoteAction, width, setNoteOpen, noteButtonClick, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
declare const CreateNoteMenu: <T>({ handleSaveNoteAction, width, setNoteOpen, noteButtonClick, onMouseEnter, onMouseLeave, }: Props<T>) => import("react/jsx-runtime").JSX.Element;
|
|
8
10
|
export default CreateNoteMenu;
|
|
@@ -3,7 +3,7 @@ import { useState } from "react";
|
|
|
3
3
|
import MenuButton from "../MenuButton";
|
|
4
4
|
import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
|
|
5
5
|
import { ClosedNoteIcon } from "../../images";
|
|
6
|
-
const CreateNoteMenu = ({ handleSaveNoteAction, width, setNoteOpen, noteButtonClick, }) => {
|
|
6
|
+
const CreateNoteMenu = ({ handleSaveNoteAction, width, setNoteOpen, noteButtonClick, onMouseEnter, onMouseLeave, }) => {
|
|
7
7
|
const { player } = useSoftBuildersVideoPlayerContext();
|
|
8
8
|
const [note, setNote] = useState("");
|
|
9
9
|
const handleSaveNote = () => {
|
|
@@ -17,7 +17,7 @@ const CreateNoteMenu = ({ handleSaveNoteAction, width, setNoteOpen, noteButtonCl
|
|
|
17
17
|
window.alert("Video Player, there is no implementation for the handleSaveNoteAction function");
|
|
18
18
|
}
|
|
19
19
|
};
|
|
20
|
-
return (_jsx(MenuButton, { disablePopUp: true, noteButtonClick: noteButtonClick, setNoteOpen: setNoteOpen, classContainer: `${width < 400 ? "!sb-top-8 -sb-left-[9.75rem]" : ""}`, buttonContent: _jsx(ClosedNoteIcon, { className: "sb-w-3 sb-h-3" }), menuContent: _jsx("div", { className: `sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 ${width > 400 ? " sb-py-5 sb-w-[220px]" : "sb-py-1 sb-w-[150px]"}`, children: _jsxs("div", { className: "sb-flex sb-flex-col sb-gap-3 sb-items-center sb-justify-center", onClick: (e) => e.stopPropagation(), children: [_jsx("h3", { className: "sb-px-5", children: "Add Note" }), _jsx("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }), _jsxs("div", { className: "sb-px-5 sb-flex sb-flex-col sb-gap-4 sb-items-start", children: [_jsx("input", { onClick: (e) => e.stopPropagation(), name: "note", type: "text", placeholder: "Add a note", value: note, onChange: (e) => setNote(e.target.value), required: true, className: "sb-text-white placeholder:sb-text-white sb-w-full sb-bg-transparent sb-px-4 sb-py-3 sb-border sb-border-[#AAAAAA] sb-rounded-md" }), _jsx("button", { className: "sb-w-full", onClick: handleSaveNote, children: _jsx("div", { className: "sb-px-4 sb-py-3 sb-text-center sb-font-bold sb-bg-orange-500 sb-rounded-md", children: "Save" }) })] })] }) }) }));
|
|
20
|
+
return (_jsx(MenuButton, { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, disablePopUp: true, noteButtonClick: noteButtonClick, setNoteOpen: setNoteOpen, classContainer: `${width < 400 ? "!sb-top-8 -sb-left-[9.75rem]" : ""}`, buttonContent: _jsx(ClosedNoteIcon, { className: "sb-w-3 sb-h-3" }), menuContent: _jsx("div", { className: `sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 ${width > 400 ? " sb-py-5 sb-w-[220px]" : "sb-py-1 sb-w-[150px]"}`, children: _jsxs("div", { className: "sb-flex sb-flex-col sb-gap-3 sb-items-center sb-justify-center", onClick: (e) => e.stopPropagation(), children: [_jsx("h3", { className: "sb-px-5", children: "Add Note" }), _jsx("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }), _jsxs("div", { className: "sb-px-5 sb-flex sb-flex-col sb-gap-4 sb-items-start", children: [_jsx("input", { onClick: (e) => e.stopPropagation(), name: "note", type: "text", placeholder: "Add a note", value: note, onChange: (e) => setNote(e.target.value), required: true, className: "sb-text-white placeholder:sb-text-white sb-w-full sb-bg-transparent sb-px-4 sb-py-3 sb-border sb-border-[#AAAAAA] sb-rounded-md" }), _jsx("button", { className: "sb-w-full", onClick: handleSaveNote, children: _jsx("div", { className: "sb-px-4 sb-py-3 sb-text-center sb-font-bold sb-bg-orange-500 sb-rounded-md", children: "Save" }) })] })] }) }) }));
|
|
21
21
|
};
|
|
22
22
|
export default CreateNoteMenu;
|
|
23
23
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CreateNoteMenu/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/CreateNoteMenu/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACxC,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AACrF,OAAO,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAU9C,MAAM,cAAc,GAAG,CAAK,EAC1B,oBAAoB,EACpB,KAAK,EACL,WAAW,EACX,eAAe,EACf,YAAY,EACZ,YAAY,GACH,EAAE,EAAE;IACb,MAAM,EAAE,MAAM,EAAE,GAAG,iCAAiC,EAAE,CAAC;IAEvD,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAErC,MAAM,cAAc,GAAG,GAAG,EAAE;QAC1B,IAAI,oBAAoB,EAAE,CAAC;YACzB,MAAM,IAAI,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,EAAE,KAAI,CAAC,CAAC;YACxC,oBAAoB,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE;gBACjD,OAAO,CAAC,EAAE,CAAC,CAAC;YACd,CAAC,CAAC,CAAC;QACL,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,KAAK,CACV,gFAAgF,CACjF,CAAC;QACJ,CAAC;IACH,CAAC,CAAC;IAEF,OAAO,CACL,KAAC,UAAU,IACT,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,IAAI,EAClB,eAAe,EAAE,eAAe,EAChC,WAAW,EAAE,WAAW,EACxB,cAAc,EAAE,GAAG,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,8BAA8B,CAAC,CAAC,CAAC,EAAE,EAAE,EACtE,aAAa,EAAE,KAAC,cAAc,IAAC,SAAS,EAAC,eAAe,GAAG,EAC3D,WAAW,EACT,cACE,SAAS,EAAE,kDACT,KAAK,GAAG,GAAG,CAAC,CAAC,CAAC,uBAAuB,CAAC,CAAC,CAAC,sBAC1C,EAAE,YAEF,eACE,SAAS,EAAC,gEAAgE,EAC1E,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,aAEnC,aAAI,SAAS,EAAC,SAAS,yBAAc,EAErC,cAAK,SAAS,EAAC,wDAAwD,GAAG,EAE1E,eAAK,SAAS,EAAC,qDAAqD,aAClE,gBACE,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACnC,IAAI,EAAC,MAAM,EACX,IAAI,EAAC,MAAM,EACX,WAAW,EAAC,YAAY,EACxB,KAAK,EAAE,IAAI,EACX,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EACxC,QAAQ,QACR,SAAS,EAAC,iIAAiI,GAC3I,EAEF,iBAAQ,SAAS,EAAC,WAAW,EAAC,OAAO,EAAE,cAAc,YACnD,cAAK,SAAS,EAAC,4EAA4E,qBAErF,GACC,IACL,IACF,GACF,GAER,CACH,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,cAAc,CAAC"}
|
|
@@ -8,12 +8,16 @@ type Props<T> = {
|
|
|
8
8
|
width: number;
|
|
9
9
|
setNoteOpen?: (val: boolean) => void;
|
|
10
10
|
noteButtonClick?: (e: any) => void;
|
|
11
|
+
onMouseEnter?: () => void;
|
|
12
|
+
onMouseLeave?: () => void;
|
|
11
13
|
};
|
|
12
14
|
const CreateNoteMenu = <T,>({
|
|
13
15
|
handleSaveNoteAction,
|
|
14
16
|
width,
|
|
15
17
|
setNoteOpen,
|
|
16
18
|
noteButtonClick,
|
|
19
|
+
onMouseEnter,
|
|
20
|
+
onMouseLeave,
|
|
17
21
|
}: Props<T>) => {
|
|
18
22
|
const { player } = useSoftBuildersVideoPlayerContext();
|
|
19
23
|
|
|
@@ -34,6 +38,8 @@ const CreateNoteMenu = <T,>({
|
|
|
34
38
|
|
|
35
39
|
return (
|
|
36
40
|
<MenuButton
|
|
41
|
+
onMouseEnter={onMouseEnter}
|
|
42
|
+
onMouseLeave={onMouseLeave}
|
|
37
43
|
disablePopUp={true}
|
|
38
44
|
noteButtonClick={noteButtonClick}
|
|
39
45
|
setNoteOpen={setNoteOpen}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
"use client";
|
|
2
|
-
import React, { useEffect } from "react";
|
|
3
|
-
import { durationFormater } from "../../utils";
|
|
4
|
-
import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
|
|
5
|
-
type Props = {};
|
|
6
|
-
|
|
7
|
-
const CurrentTimeLabel = ({}: Props) => {
|
|
8
|
-
const { currentTime } = useSoftBuildersVideoPlayerContext();
|
|
9
|
-
|
|
10
|
-
return <p>{durationFormater(currentTime)}</p>;
|
|
11
|
-
};
|
|
12
|
-
|
|
13
|
-
export default CurrentTimeLabel;
|
|
1
|
+
"use client";
|
|
2
|
+
import React, { useEffect } from "react";
|
|
3
|
+
import { durationFormater } from "../../utils";
|
|
4
|
+
import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
|
|
5
|
+
type Props = {};
|
|
6
|
+
|
|
7
|
+
const CurrentTimeLabel = ({}: Props) => {
|
|
8
|
+
const { currentTime } = useSoftBuildersVideoPlayerContext();
|
|
9
|
+
|
|
10
|
+
return <p>{durationFormater(currentTime)}</p>;
|
|
11
|
+
};
|
|
12
|
+
|
|
13
|
+
export default CurrentTimeLabel;
|
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
import React from "react";
|
|
2
|
-
|
|
3
|
-
type Props = {
|
|
4
|
-
name: string;
|
|
5
|
-
};
|
|
6
|
-
|
|
7
|
-
const Menu = ({ name }: Props) => {
|
|
8
|
-
return (
|
|
9
|
-
<div className="absolute right-0 z-10 w-48 mt-2 origin-top-right bg-white border border-gray-300 rounded-md shadow-lg focus:outline-none">
|
|
10
|
-
<div
|
|
11
|
-
className="py-1"
|
|
12
|
-
role="menu"
|
|
13
|
-
aria-orientation="vertical"
|
|
14
|
-
aria-labelledby={`${name}-button`}
|
|
15
|
-
>
|
|
16
|
-
<a
|
|
17
|
-
href="#"
|
|
18
|
-
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
|
19
|
-
role="menuitem"
|
|
20
|
-
>
|
|
21
|
-
Dashboard
|
|
22
|
-
</a>
|
|
23
|
-
<a
|
|
24
|
-
href="#"
|
|
25
|
-
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
|
26
|
-
role="menuitem"
|
|
27
|
-
>
|
|
28
|
-
Settings
|
|
29
|
-
</a>
|
|
30
|
-
<a
|
|
31
|
-
href="#"
|
|
32
|
-
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
|
33
|
-
role="menuitem"
|
|
34
|
-
>
|
|
35
|
-
Profile
|
|
36
|
-
</a>
|
|
37
|
-
<a
|
|
38
|
-
href="#"
|
|
39
|
-
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
|
40
|
-
role="menuitem"
|
|
41
|
-
>
|
|
42
|
-
Logout
|
|
43
|
-
</a>
|
|
44
|
-
</div>
|
|
45
|
-
</div>
|
|
46
|
-
);
|
|
47
|
-
};
|
|
48
|
-
|
|
49
|
-
export default Menu;
|
|
1
|
+
import React from "react";
|
|
2
|
+
|
|
3
|
+
type Props = {
|
|
4
|
+
name: string;
|
|
5
|
+
};
|
|
6
|
+
|
|
7
|
+
const Menu = ({ name }: Props) => {
|
|
8
|
+
return (
|
|
9
|
+
<div className="absolute right-0 z-10 w-48 mt-2 origin-top-right bg-white border border-gray-300 rounded-md shadow-lg focus:outline-none">
|
|
10
|
+
<div
|
|
11
|
+
className="py-1"
|
|
12
|
+
role="menu"
|
|
13
|
+
aria-orientation="vertical"
|
|
14
|
+
aria-labelledby={`${name}-button`}
|
|
15
|
+
>
|
|
16
|
+
<a
|
|
17
|
+
href="#"
|
|
18
|
+
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
|
19
|
+
role="menuitem"
|
|
20
|
+
>
|
|
21
|
+
Dashboard
|
|
22
|
+
</a>
|
|
23
|
+
<a
|
|
24
|
+
href="#"
|
|
25
|
+
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
|
26
|
+
role="menuitem"
|
|
27
|
+
>
|
|
28
|
+
Settings
|
|
29
|
+
</a>
|
|
30
|
+
<a
|
|
31
|
+
href="#"
|
|
32
|
+
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
|
33
|
+
role="menuitem"
|
|
34
|
+
>
|
|
35
|
+
Profile
|
|
36
|
+
</a>
|
|
37
|
+
<a
|
|
38
|
+
href="#"
|
|
39
|
+
className="block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
|
40
|
+
role="menuitem"
|
|
41
|
+
>
|
|
42
|
+
Logout
|
|
43
|
+
</a>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
);
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
export default Menu;
|
|
@@ -8,6 +8,8 @@ type Props = {
|
|
|
8
8
|
setNoteOpen?: (val: boolean) => void;
|
|
9
9
|
noteButtonClick?: (e: any) => void;
|
|
10
10
|
disablePopUp?: boolean;
|
|
11
|
+
onMouseEnter?: () => void;
|
|
12
|
+
onMouseLeave?: () => void;
|
|
11
13
|
};
|
|
12
|
-
declare const MenuButton: ({ buttonContent, menuContent, close, classContainer, onClick, setNoteOpen, noteButtonClick, disablePopUp, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
14
|
+
declare const MenuButton: ({ buttonContent, menuContent, close, classContainer, onClick, setNoteOpen, noteButtonClick, disablePopUp, onMouseEnter, onMouseLeave, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
13
15
|
export default MenuButton;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useCallback, useEffect, useRef, useState } from "react";
|
|
3
|
-
const MenuButton = ({ buttonContent, menuContent, close, classContainer, onClick, setNoteOpen, noteButtonClick, disablePopUp = false, }) => {
|
|
3
|
+
const MenuButton = ({ buttonContent, menuContent, close, classContainer, onClick, setNoteOpen, noteButtonClick, disablePopUp = false, onMouseEnter, onMouseLeave, }) => {
|
|
4
4
|
const [isOpen, setIsOpen] = useState(false);
|
|
5
5
|
const buttonRef = useRef(null);
|
|
6
6
|
const menuRef = useRef(null);
|
|
@@ -27,7 +27,7 @@ const MenuButton = ({ buttonContent, menuContent, close, classContainer, onClick
|
|
|
27
27
|
useEffect(() => {
|
|
28
28
|
setNoteOpen && setNoteOpen(isOpen);
|
|
29
29
|
}, [isOpen]);
|
|
30
|
-
return (_jsxs("div", { className: "sb-relative sb-flex sb-items-end", children: [_jsx("button", { ref: buttonRef, onClick: (e) => {
|
|
30
|
+
return (_jsxs("div", { onMouseEnter: onMouseEnter, onMouseLeave: onMouseLeave, className: "sb-relative sb-flex sb-items-end", children: [_jsx("button", { ref: buttonRef, onClick: (e) => {
|
|
31
31
|
isOpen && e.stopPropagation();
|
|
32
32
|
// if (!disablePopUp) {
|
|
33
33
|
toggleMenu();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MenuButton/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/MenuButton/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAgBxE,MAAM,UAAU,GAAG,CAAC,EAClB,aAAa,EACb,WAAW,EACX,KAAK,EACL,cAAc,EACd,OAAO,EACP,WAAW,EACX,eAAe,EACf,YAAY,GAAG,KAAK,EACpB,YAAY,EACZ,YAAY,GACN,EAAE,EAAE;IACV,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,SAAS,GAAG,MAAM,CAA2B,IAAI,CAAC,CAAC;IACzD,MAAM,OAAO,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IAEpD,MAAM,UAAU,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,CAAC;IAEpD,MAAM,SAAS,GAAG,WAAW,CAAC,GAAG,EAAE;QACjC,SAAS,CAAC,KAAK,CAAC,CAAC;IACnB,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,kBAAkB,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC/C,IACE,SAAS,CAAC,OAAO;gBACjB,CAAC,SAAS,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC;gBACjD,OAAO,CAAC,OAAO;gBACf,CAAC,OAAO,CAAC,OAAO,CAAC,QAAQ,CAAC,KAAK,CAAC,MAAc,CAAC,EAC/C,CAAC;gBACD,SAAS,CAAC,KAAK,CAAC,CAAC;YACnB,CAAC;QACH,CAAC,CAAC;QAEF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;QAC3D,OAAO,GAAG,EAAE,CAAC,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,kBAAkB,CAAC,CAAC;IAC7E,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,KAAK;YAAE,KAAK,CAAC,SAAS,CAAC,CAAC;IAC9B,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,CAAC,CAAC,CAAC;IACvB,SAAS,CAAC,GAAG,EAAE;QACb,WAAW,IAAI,WAAW,CAAC,MAAM,CAAC,CAAC;IACrC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC,CAAC;IACb,OAAO,CACL,eACE,YAAY,EAAE,YAAY,EAC1B,YAAY,EAAE,YAAY,EAC1B,SAAS,EAAC,mCAAmC,aAE7C,iBACE,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAM,EAAE,EAAE;oBAClB,MAAM,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;oBAC9B,uBAAuB;oBACvB,UAAU,EAAE,CAAC;oBACb,OAAO,IAAI,OAAO,CAAC,CAAC,EAAE,CAAC,MAAM,CAAC,CAAC;oBAC/B,IAAI;oBAEJ,eAAe,IAAI,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;gBAC9C,CAAC,mBACa,MAAM,mBACL,MAAM,gBACV,WAAW,YAErB,aAAa,GACP,EAER,CAAC,YAAY,IAAI,MAAM,IAAI,CAC1B,cACE,GAAG,EAAE,OAAO,EACZ,IAAI,EAAC,MAAM,sBACM,UAAU,qBACX,WAAW,EAC3B,SAAS,EAAE,oDAAoD,cAAc,EAAE,YAE9E,WAAW,GACR,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -10,6 +10,8 @@ type Props = {
|
|
|
10
10
|
setNoteOpen?: (val: boolean) => void;
|
|
11
11
|
noteButtonClick?: (e: any) => void;
|
|
12
12
|
disablePopUp?: boolean;
|
|
13
|
+
onMouseEnter?: () => void;
|
|
14
|
+
onMouseLeave?: () => void;
|
|
13
15
|
};
|
|
14
16
|
|
|
15
17
|
const MenuButton = ({
|
|
@@ -21,6 +23,8 @@ const MenuButton = ({
|
|
|
21
23
|
setNoteOpen,
|
|
22
24
|
noteButtonClick,
|
|
23
25
|
disablePopUp = false,
|
|
26
|
+
onMouseEnter,
|
|
27
|
+
onMouseLeave,
|
|
24
28
|
}: Props) => {
|
|
25
29
|
const [isOpen, setIsOpen] = useState(false);
|
|
26
30
|
const buttonRef = useRef<HTMLButtonElement | null>(null);
|
|
@@ -55,7 +59,11 @@ const MenuButton = ({
|
|
|
55
59
|
setNoteOpen && setNoteOpen(isOpen);
|
|
56
60
|
}, [isOpen]);
|
|
57
61
|
return (
|
|
58
|
-
<div
|
|
62
|
+
<div
|
|
63
|
+
onMouseEnter={onMouseEnter}
|
|
64
|
+
onMouseLeave={onMouseLeave}
|
|
65
|
+
className="sb-relative sb-flex sb-items-end"
|
|
66
|
+
>
|
|
59
67
|
<button
|
|
60
68
|
ref={buttonRef}
|
|
61
69
|
onClick={(e: any) => {
|