softbuilders-react-video-player 1.1.67 → 1.1.69

Sign up to get free protection for your applications and to get access to all the features.
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;
@@ -11,7 +11,9 @@ 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 Tooltip from "../Tooltip";
14
15
  const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, id, handleSaveNoteAction, handleControlDisplayTimer, setIsQualityMenuOpen, setIsSubtitleMenuOpen, setNoteOpen, disableNote, noteButtonClick, }) => {
16
+ console.log("432", notes);
15
17
  const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
16
18
  const [width, setWidth] = useState(0);
17
19
  const [isSeeking, setIsSeeking] = useState(true);
@@ -21,6 +23,16 @@ const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters,
21
23
  };
22
24
  const [volumeSliderToggler, setVolumeToggler] = useState(false);
23
25
  const container = document.getElementById(`video-container-${id}`);
26
+ const [isToolTip, setIsToolTip] = useState({
27
+ sub: false,
28
+ seekForward: false,
29
+ seekBackward: false,
30
+ play: false,
31
+ pause: false,
32
+ volume: false,
33
+ quality: false,
34
+ fullScreen: false,
35
+ });
24
36
  function handleWidthChange(width) {
25
37
  setWidth(width);
26
38
  }
@@ -67,14 +79,15 @@ const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters,
67
79
  setVolumeToggler(!volumeSliderToggler);
68
80
  setIsQualityMenuOpen && setIsQualityMenuOpen(isOpen);
69
81
  } }), disableNote && (_jsx(CreateNoteMenu, { handleSaveNoteAction: handleSaveNoteAction, width: width, setNoteOpen: setNoteOpen, noteButtonClick: (e) => {
70
- noteButtonClick({
71
- time: Number((player === null || player === void 0 ? void 0 : player.currentTime()) || 0),
72
- isOpen: e,
73
- });
74
- } })), _jsx(SubtitleMenu, { width: width, onClick: (e, isOpen) => {
75
- setVolumeToggler(!volumeSliderToggler);
76
- setIsSubtitleMenuOpen && setIsSubtitleMenuOpen(isOpen);
77
- } }), _jsx("button", { onClick: (e) => {
82
+ noteButtonClick &&
83
+ noteButtonClick({
84
+ time: Number((player === null || player === void 0 ? void 0 : player.currentTime()) || 0),
85
+ isOpen: e,
86
+ });
87
+ } })), _jsx(Tooltip, { open: isToolTip.sub == true, children: _jsx(SubtitleMenu, { width: width, onClick: (e, isOpen) => {
88
+ setVolumeToggler(!volumeSliderToggler);
89
+ setIsSubtitleMenuOpen && setIsSubtitleMenuOpen(isOpen);
90
+ } }) }), _jsx("button", { onClick: (e) => {
78
91
  e.preventDefault();
79
92
  e.stopPropagation();
80
93
  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":"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"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ControlBar/index.tsx"],"names":[],"mappings":"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"}
@@ -41,6 +41,16 @@ type Props<T> = {
41
41
  setNoteOpen?: (val: boolean) => void;
42
42
  noteButtonClick?: (e: any) => void;
43
43
  };
44
+ type TTool = {
45
+ sub: boolean;
46
+ seekForward: boolean;
47
+ seekBackward: boolean;
48
+ play: boolean;
49
+ pause: boolean;
50
+ volume: boolean;
51
+ quality: boolean;
52
+ fullScreen: boolean;
53
+ };
44
54
 
45
55
  const ControlBar = <T,>({
46
56
  player,
@@ -59,6 +69,8 @@ const ControlBar = <T,>({
59
69
  disableNote,
60
70
  noteButtonClick,
61
71
  }: Props<T>) => {
72
+ console.log("432", notes);
73
+
62
74
  const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
63
75
  const [width, setWidth] = useState<number>(0);
64
76
  const [isSeeking, setIsSeeking] = useState(true);
@@ -68,6 +80,16 @@ const ControlBar = <T,>({
68
80
  };
69
81
  const [volumeSliderToggler, setVolumeToggler] = useState(false);
70
82
  const container = document.getElementById(`video-container-${id}`);
83
+ const [isToolTip, setIsToolTip] = useState<TTool>({
84
+ sub: false,
85
+ seekForward: false,
86
+ seekBackward: false,
87
+ play: false,
88
+ pause: false,
89
+ volume: false,
90
+ quality: false,
91
+ fullScreen: false,
92
+ });
71
93
  function handleWidthChange(width: any) {
72
94
  setWidth(width);
73
95
  }
@@ -190,20 +212,23 @@ const ControlBar = <T,>({
190
212
  width={width}
191
213
  setNoteOpen={setNoteOpen}
192
214
  noteButtonClick={(e) => {
193
- noteButtonClick({
194
- time: Number(player?.currentTime() || 0),
195
- isOpen: e,
196
- });
215
+ noteButtonClick &&
216
+ noteButtonClick({
217
+ time: Number(player?.currentTime() || 0),
218
+ isOpen: e,
219
+ });
197
220
  }}
198
221
  />
199
222
  )}
200
- <SubtitleMenu
201
- width={width}
202
- onClick={(e: any, isOpen: boolean) => {
203
- setVolumeToggler(!volumeSliderToggler);
204
- setIsSubtitleMenuOpen && setIsSubtitleMenuOpen(isOpen);
205
- }}
206
- />
223
+ <Tooltip open={isToolTip.sub == true}>
224
+ <SubtitleMenu
225
+ width={width}
226
+ onClick={(e: any, isOpen: boolean) => {
227
+ setVolumeToggler(!volumeSliderToggler);
228
+ setIsSubtitleMenuOpen && setIsSubtitleMenuOpen(isOpen);
229
+ }}
230
+ />
231
+ </Tooltip>
207
232
  <button
208
233
  onClick={(e) => {
209
234
  e.preventDefault();
@@ -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;
@@ -1,46 +1,46 @@
1
- import React, { useEffect, useState } from "react";
2
- import Tooltip from "../Tooltip";
3
- import { durationFormater } from "../../utils";
4
- import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
5
- import { SoftBuildersVideoPlayerNote } from "../../types";
6
- type Note = SoftBuildersVideoPlayerNote & { percentage: number };
7
-
8
- type Props = {
9
- note: Note;
10
- };
11
-
12
- const NoteTooltip = ({ note }: Props) => {
13
- const [open, setOpen] = useState(false);
14
- const { currentTime } = useSoftBuildersVideoPlayerContext();
15
-
16
- useEffect(() => {
17
- if (currentTime === Math.floor(note.time)) {
18
- setOpen(true);
19
-
20
- setTimeout(() => {
21
- setOpen(false);
22
- }, 5000);
23
- }
24
- }, [currentTime, note.time]);
25
- return (
26
- <div
27
- className="sb-w-1 sb-h-1 sb-rounded-full sb-bg-white sb-absolute sb-z-30"
28
- style={{ left: `${note.percentage}%` }}
29
- onMouseEnter={() => setOpen(true)}
30
- onMouseLeave={() => setOpen(false)}
31
- >
32
- <div className="sb-relative">
33
- <Tooltip open={open}>
34
- <div className="sb-flex sb-flex-col sb-gap-2 sb-items-center">
35
- <p>{note.label}</p>
36
- <p className="sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md">
37
- {durationFormater(note.time)}
38
- </p>
39
- </div>
40
- </Tooltip>
41
- </div>
42
- </div>
43
- );
44
- };
45
-
46
- export default NoteTooltip;
1
+ import React, { useEffect, useState } from "react";
2
+ import Tooltip from "../Tooltip";
3
+ import { durationFormater } from "../../utils";
4
+ import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
5
+ import { SoftBuildersVideoPlayerNote } from "../../types";
6
+ type Note = SoftBuildersVideoPlayerNote & { percentage: number };
7
+
8
+ type Props = {
9
+ note: Note;
10
+ };
11
+
12
+ const NoteTooltip = ({ note }: Props) => {
13
+ const [open, setOpen] = useState(false);
14
+ const { currentTime } = useSoftBuildersVideoPlayerContext();
15
+
16
+ useEffect(() => {
17
+ if (currentTime === Math.floor(note.time)) {
18
+ setOpen(true);
19
+
20
+ setTimeout(() => {
21
+ setOpen(false);
22
+ }, 5000);
23
+ }
24
+ }, [currentTime, note.time]);
25
+ return (
26
+ <div
27
+ className="sb-w-1 sb-h-1 sb-rounded-full sb-bg-white sb-absolute sb-z-30"
28
+ style={{ left: `${note.percentage}%` }}
29
+ onMouseEnter={() => setOpen(true)}
30
+ onMouseLeave={() => setOpen(false)}
31
+ >
32
+ <div className="sb-relative">
33
+ <Tooltip open={open}>
34
+ <div className="sb-flex sb-flex-col sb-gap-2 sb-items-center">
35
+ <p>{note.label}</p>
36
+ <p className="sb-p-2 sb-bg-[#303030] sb-bg-opacity-50 sb-rounded-md">
37
+ {durationFormater(note.time)}
38
+ </p>
39
+ </div>
40
+ </Tooltip>
41
+ </div>
42
+ </div>
43
+ );
44
+ };
45
+
46
+ export default NoteTooltip;
@@ -1,4 +1,4 @@
1
- import React from "react";
1
+ import React, { useEffect } from "react";
2
2
  import NotesPanal from "../NotesPanal";
3
3
  import ChaptersPanal from "../ChaptersPanal";
4
4
  import TimeSlider from "../TimeSlider";
@@ -2,6 +2,8 @@ import React from "react";
2
2
  type Props = {
3
3
  open: boolean;
4
4
  children: React.ReactNode;
5
+ onMouseEnter?: (e: any) => void;
6
+ onMouseLeave?: (e: any) => void;
5
7
  };
6
8
  declare const Tooltip: ({ open, children }: Props) => import("react/jsx-runtime").JSX.Element;
7
9
  export default Tooltip;
@@ -2,7 +2,10 @@ import { jsx as _jsx } from "react/jsx-runtime";
2
2
  const Tooltip = ({ open, children }) => {
3
3
  if (!open)
4
4
  return null;
5
- return (_jsx("div", { 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 }));
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 }));
6
9
  };
7
10
  export default Tooltip;
8
11
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":";AAMA,MAAM,OAAO,GAAG,CAAC,EAAE,IAAI,EAAE,QAAQ,EAAS,EAAE,EAAE;IAC5C,IAAI,CAAC,IAAI;QAAE,OAAO,IAAI,CAAC;IACvB,OAAO,CACL,cAAK,SAAS,EAAC,8GAA8G,YAC1H,QAAQ,GACL,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,OAAO,CAAC"}
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,16 +1,22 @@
1
- import React from "react";
2
-
3
- type Props = {
4
- open: boolean;
5
- children: React.ReactNode;
6
- };
7
- const Tooltip = ({ open, children }: Props) => {
8
- if (!open) return null;
9
- return (
10
- <div 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">
11
- {children}
12
- </div>
13
- );
14
- };
15
-
16
- export default Tooltip;
1
+ import React from "react";
2
+
3
+ type Props = {
4
+ open: boolean;
5
+ children: React.ReactNode;
6
+ onMouseEnter?: (e: any) => void;
7
+ onMouseLeave?: (e: any) => void;
8
+ };
9
+ const Tooltip = ({ open, children }: Props) => {
10
+ if (!open) return null;
11
+ return (
12
+ <div
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"
16
+ >
17
+ {children}
18
+ </div>
19
+ );
20
+ };
21
+
22
+ export default Tooltip;
@@ -92,8 +92,8 @@ const VideoPlayerComponent = forwardRef(({ id, options, notes, chapters, startTi
92
92
  }
93
93
  return () => {
94
94
  if (playerRef.current) {
95
- playerRef.current.dispose();
96
- playerRef.current = undefined;
95
+ // playerRef.current.dispose();
96
+ // playerRef.current = undefined;
97
97
  setTimeout(() => {
98
98
  if (bigPlayButtonRoot[id]) {
99
99
  bigPlayButtonRoot[id].unmount();