softbuilders-react-video-player 1.1.30 → 1.1.32
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/ChaptersPanal/index.d.ts +1 -1
- package/dist/components/ChaptersPanal/index.js +2 -2
- package/dist/components/ChaptersPanal/index.js.map +1 -1
- package/dist/components/ChaptersPanal/index.tsx +3 -3
- package/dist/components/ControlBar/index.d.ts +2 -2
- package/dist/components/ControlBar/index.tsx +2 -2
- package/dist/components/NotesPanal/index.d.ts +1 -1
- package/dist/components/NotesPanal/index.js +2 -2
- package/dist/components/NotesPanal/index.js.map +1 -1
- package/dist/components/NotesPanal/index.tsx +3 -3
- package/dist/components/SoftBuildersVideoPlayer/index.js +1 -1
- package/dist/components/SoftBuildersVideoPlayer/index.js.map +1 -1
- package/dist/components/SoftBuildersVideoPlayer/index.tsx +1 -1
- package/dist/components/TimeSlider/index.d.ts +1 -1
- package/dist/components/TimeSlider/index.js +1 -1
- package/dist/components/TimeSlider/index.js.map +1 -1
- package/dist/components/TimeSlider/index.tsx +2 -2
- package/dist/components/TimeSliderContainer/index.d.ts +2 -2
- package/dist/components/TimeSliderContainer/index.tsx +2 -2
- package/dist/components/VideoPlayerComponent/index.d.ts +1 -1
- package/dist/components/VideoPlayerComponent/index.js +6 -3
- package/dist/components/VideoPlayerComponent/index.js.map +1 -1
- package/dist/components/VideoPlayerComponent/index.tsx +11 -7
- package/dist/components/VideoPlayerComponent/style/style.css +3 -0
- package/dist/index.css +3 -0
- package/dist/index.mjs +12 -9
- package/package.json +1 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { SoftBuildersVideoPlayerChapter } from "../../types";
|
|
2
2
|
type Props = {
|
|
3
|
-
chapters
|
|
3
|
+
chapters?: SoftBuildersVideoPlayerChapter[];
|
|
4
4
|
};
|
|
5
5
|
declare const ChaptersPanal: ({ chapters }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
export default ChaptersPanal;
|
|
@@ -6,13 +6,13 @@ const ChaptersPanal = ({ chapters }) => {
|
|
|
6
6
|
const [cs, setCs] = useState([]);
|
|
7
7
|
const { duration } = useSoftBuildersVideoPlayerContext();
|
|
8
8
|
useEffect(() => {
|
|
9
|
-
const newCs = chapters.map((c) => {
|
|
9
|
+
const newCs = chapters === null || chapters === void 0 ? void 0 : chapters.map((c) => {
|
|
10
10
|
const startPercentage = Math.floor((c.startTime * 100) / duration);
|
|
11
11
|
const endPercentage = Math.floor((c.endTime * 100) / duration);
|
|
12
12
|
return Object.assign(Object.assign({}, c), { startPercentage,
|
|
13
13
|
endPercentage });
|
|
14
14
|
});
|
|
15
|
-
setCs(newCs);
|
|
15
|
+
newCs && setCs(newCs);
|
|
16
16
|
}, [chapters, duration]);
|
|
17
17
|
return (_jsx("div", { id: "chapters-panal", className: "sb-w-full sb-h-full sb-relative ", children: cs.map((c, i) => (_jsx(ChapterTooltip, { chapter: c }, `chapter-${i}-${c.startTime}`))) }));
|
|
18
18
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ChaptersPanal/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AASrF,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAS,EAAE,EAAE;IAC5C,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAY,EAAE,CAAC,CAAC;IAC5C,MAAM,EAAE,QAAQ,EAAE,GAAG,iCAAiC,EAAE,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,QAAQ,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ChaptersPanal/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEnD,OAAO,cAAc,MAAM,mBAAmB,CAAC;AAE/C,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AASrF,MAAM,aAAa,GAAG,CAAC,EAAE,QAAQ,EAAS,EAAE,EAAE;IAC5C,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAY,EAAE,CAAC,CAAC;IAC5C,MAAM,EAAE,QAAQ,EAAE,GAAG,iCAAiC,EAAE,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YAChC,MAAM,eAAe,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS,GAAG,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC;YACnE,MAAM,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,GAAG,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC;YAC/D,uCACK,CAAC,KACJ,eAAe;gBACf,aAAa,IACb;QACJ,CAAC,CAAC,CAAC;QACH,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEzB,OAAO,CACL,cAAK,EAAE,EAAC,gBAAgB,EAAC,SAAS,EAAC,kCAAkC,YAClE,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAChB,KAAC,cAAc,IAAqC,OAAO,EAAE,CAAC,IAAzC,WAAW,CAAC,IAAI,CAAC,CAAC,SAAS,EAAE,CAAgB,CACnE,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -9,14 +9,14 @@ type Chapter = SoftBuildersVideoPlayerChapter & {
|
|
|
9
9
|
endPercentage: number;
|
|
10
10
|
};
|
|
11
11
|
type Props = {
|
|
12
|
-
chapters
|
|
12
|
+
chapters?: SoftBuildersVideoPlayerChapter[];
|
|
13
13
|
};
|
|
14
14
|
const ChaptersPanal = ({ chapters }: Props) => {
|
|
15
15
|
const [cs, setCs] = useState<Chapter[]>([]);
|
|
16
16
|
const { duration } = useSoftBuildersVideoPlayerContext();
|
|
17
17
|
|
|
18
18
|
useEffect(() => {
|
|
19
|
-
const newCs = chapters
|
|
19
|
+
const newCs = chapters?.map((c) => {
|
|
20
20
|
const startPercentage = Math.floor((c.startTime * 100) / duration);
|
|
21
21
|
const endPercentage = Math.floor((c.endTime * 100) / duration);
|
|
22
22
|
return {
|
|
@@ -25,7 +25,7 @@ const ChaptersPanal = ({ chapters }: Props) => {
|
|
|
25
25
|
endPercentage,
|
|
26
26
|
};
|
|
27
27
|
});
|
|
28
|
-
setCs(newCs);
|
|
28
|
+
newCs && setCs(newCs);
|
|
29
29
|
}, [chapters, duration]);
|
|
30
30
|
|
|
31
31
|
return (
|
|
@@ -6,8 +6,8 @@ type Props<T> = {
|
|
|
6
6
|
isPaused: boolean;
|
|
7
7
|
setIsPaused: React.Dispatch<React.SetStateAction<boolean>>;
|
|
8
8
|
duration: number;
|
|
9
|
-
notes
|
|
10
|
-
chapters
|
|
9
|
+
notes?: SoftBuildersVideoPlayerNote[];
|
|
10
|
+
chapters?: SoftBuildersVideoPlayerChapter[];
|
|
11
11
|
seekStep?: number;
|
|
12
12
|
id?: string;
|
|
13
13
|
handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
|
|
@@ -27,8 +27,8 @@ type Props<T> = {
|
|
|
27
27
|
isPaused: boolean;
|
|
28
28
|
setIsPaused: React.Dispatch<React.SetStateAction<boolean>>;
|
|
29
29
|
duration: number;
|
|
30
|
-
notes
|
|
31
|
-
chapters
|
|
30
|
+
notes?: SoftBuildersVideoPlayerNote[];
|
|
31
|
+
chapters?: SoftBuildersVideoPlayerChapter[];
|
|
32
32
|
seekStep?: number;
|
|
33
33
|
id?: string;
|
|
34
34
|
handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { SoftBuildersVideoPlayerNote } from "../../types";
|
|
2
2
|
type Props = {
|
|
3
|
-
notes
|
|
3
|
+
notes?: SoftBuildersVideoPlayerNote[];
|
|
4
4
|
};
|
|
5
5
|
declare const NotesPanal: ({ notes }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
export default NotesPanal;
|
|
@@ -6,11 +6,11 @@ const NotesPanal = ({ notes }) => {
|
|
|
6
6
|
const [ns, setNs] = useState([]);
|
|
7
7
|
const { duration } = useSoftBuildersVideoPlayerContext();
|
|
8
8
|
useEffect(() => {
|
|
9
|
-
const newNs = notes.map((n) => {
|
|
9
|
+
const newNs = notes === null || notes === void 0 ? void 0 : notes.map((n) => {
|
|
10
10
|
const percentage = Math.floor((n.time * 100) / duration);
|
|
11
11
|
return Object.assign(Object.assign({}, n), { percentage });
|
|
12
12
|
});
|
|
13
|
-
setNs(newNs);
|
|
13
|
+
newNs && setNs(newNs);
|
|
14
14
|
}, [notes, duration]);
|
|
15
15
|
return (_jsx("div", { id: "notes-panal", className: "sb-w-full sb-h-full sb-relative ", children: ns.map((n, i) => (_jsx(NoteTooltip, { note: n }, `note-${i}-${n.time}`))) }));
|
|
16
16
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/NotesPanal/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AAOrF,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAS,EAAE,EAAE;IACtC,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAEzC,MAAM,EAAE,QAAQ,EAAE,GAAG,iCAAiC,EAAE,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,KAAK,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/NotesPanal/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACnD,OAAO,WAAW,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AAOrF,MAAM,UAAU,GAAG,CAAC,EAAE,KAAK,EAAS,EAAE,EAAE;IACtC,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,QAAQ,CAAS,EAAE,CAAC,CAAC;IAEzC,MAAM,EAAE,QAAQ,EAAE,GAAG,iCAAiC,EAAE,CAAC;IAEzD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,KAAK,GAAG,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,GAAG,CAAC,CAAC,CAAC,EAAE,EAAE;YAC7B,MAAM,UAAU,GAAG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,IAAI,GAAG,GAAG,CAAC,GAAG,QAAQ,CAAC,CAAC;YACzD,uCACK,CAAC,KACJ,UAAU,IACV;QACJ,CAAC,CAAC,CAAC;QACH,KAAK,IAAI,KAAK,CAAC,KAAK,CAAC,CAAC;IACxB,CAAC,EAAE,CAAC,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC;IACtB,OAAO,CACL,cAAK,EAAE,EAAC,aAAa,EAAC,SAAS,EAAC,kCAAkC,YAC/D,EAAE,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAChB,KAAC,WAAW,IAA6B,IAAI,EAAE,CAAC,IAA9B,QAAQ,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,CAAa,CACrD,CAAC,GACE,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -5,7 +5,7 @@ import { SoftBuildersVideoPlayerNote } from "../../types";
|
|
|
5
5
|
|
|
6
6
|
type Note = SoftBuildersVideoPlayerNote & { percentage: number };
|
|
7
7
|
type Props = {
|
|
8
|
-
notes
|
|
8
|
+
notes?: SoftBuildersVideoPlayerNote[];
|
|
9
9
|
};
|
|
10
10
|
const NotesPanal = ({ notes }: Props) => {
|
|
11
11
|
const [ns, setNs] = useState<Note[]>([]);
|
|
@@ -13,14 +13,14 @@ const NotesPanal = ({ notes }: Props) => {
|
|
|
13
13
|
const { duration } = useSoftBuildersVideoPlayerContext();
|
|
14
14
|
|
|
15
15
|
useEffect(() => {
|
|
16
|
-
const newNs = notes
|
|
16
|
+
const newNs = notes?.map((n) => {
|
|
17
17
|
const percentage = Math.floor((n.time * 100) / duration);
|
|
18
18
|
return {
|
|
19
19
|
...n,
|
|
20
20
|
percentage,
|
|
21
21
|
};
|
|
22
22
|
});
|
|
23
|
-
setNs(newNs);
|
|
23
|
+
newNs && setNs(newNs);
|
|
24
24
|
}, [notes, duration]);
|
|
25
25
|
return (
|
|
26
26
|
<div id="notes-panal" className="sb-w-full sb-h-full sb-relative ">
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SoftBuildersVideoPlayer/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,IAAI,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACzD,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,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SoftBuildersVideoPlayer/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { SoftBuildersVideoPlayerChapter } from "../../types";
|
|
2
2
|
type Props = {
|
|
3
|
-
chapters
|
|
3
|
+
chapters?: SoftBuildersVideoPlayerChapter[];
|
|
4
4
|
};
|
|
5
5
|
declare const TimeSlider: ({ chapters }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
6
6
|
export default TimeSlider;
|
|
@@ -26,7 +26,7 @@ const TimeSlider = ({ chapters }) => {
|
|
|
26
26
|
const [maskCuttes, setMaskCuttes] = useState("");
|
|
27
27
|
useEffect(() => {
|
|
28
28
|
const arr = ["black 0%"];
|
|
29
|
-
chapters.forEach((c) => {
|
|
29
|
+
chapters === null || chapters === void 0 ? void 0 : chapters.forEach((c) => {
|
|
30
30
|
const startPercentage = Math.floor((c.startTime * 100) / duration);
|
|
31
31
|
const endPercentage = Math.floor((c.endTime * 100) / duration);
|
|
32
32
|
arr.push(`black ${startPercentage}%`);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TimeSlider/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;AAGrF,MAAM,GAAG,GAAG,CAAC,EACX,GAAG,GAAG,GAAG,CAAC;AACZ,MAAM,SAAS,GAAG,IAAI,CAAC,GAAG,CAAC,GAAG,GAAG,GAAG,CAAC,CAAC;AACtC,MAAM,oBAAoB,GAAG,GAAG,CAAC;AAMjC,MAAM,UAAU,GAAG,CAAC,EAAE,QAAQ,EAAS,EAAE,EAAE;IACzC,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAC;IAEhD,MAAM,EAAE,MAAM,EAAE,QAAQ,EAAE,0BAA0B,EAAE,GACpD,iCAAiC,EAAE,CAAC;IAEtC,MAAM,iBAAiB,GAAG,CAAC,CAAsC,EAAE,EAAE;QACnE,MAAM,aAAa,GAAG,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC7C,aAAa,CAAC,aAAa,CAAC,CAAC;QAE7B,MAAM,IAAI,GAAG,CAAC,aAAa,GAAG,QAAQ,CAAC,GAAG,SAAS,CAAC;QAEpD,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,CAAC,IAAI,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;YAClC,MAAM,WAAW,GAAG,CAAA,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAE,WAAW,EAAE,KAAI,CAAC,CAAC;YAE/C,MAAM,IAAI,GAAG,CAAC,WAAW,GAAG,SAAS,CAAC,GAAG,QAAQ,CAAC;YAElD,aAAa,CAAC,IAAI,CAAC,CAAC;QACtB,CAAC,EAAE,IAAI,CAAC,CAAC;QAET,yCAAyC;QACzC,OAAO,GAAG,EAAE,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;IACzC,CAAC,EAAE,CAAC,MAAM,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvB,MAAM,CAAC,UAAU,EAAE,aAAa,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,GAAG,GAAa,CAAC,UAAU,CAAC,CAAC;QACnC,QAAQ,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/TimeSlider/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,7 +9,7 @@ const DEFERENCE = Math.abs(MAX - MIN);
|
|
|
9
9
|
const BAR_PERCENTAGE_WIDTH = 0.5;
|
|
10
10
|
|
|
11
11
|
type Props = {
|
|
12
|
-
chapters
|
|
12
|
+
chapters?: SoftBuildersVideoPlayerChapter[];
|
|
13
13
|
};
|
|
14
14
|
|
|
15
15
|
const TimeSlider = ({ chapters }: Props) => {
|
|
@@ -44,7 +44,7 @@ const TimeSlider = ({ chapters }: Props) => {
|
|
|
44
44
|
|
|
45
45
|
useEffect(() => {
|
|
46
46
|
const arr: string[] = ["black 0%"];
|
|
47
|
-
chapters
|
|
47
|
+
chapters?.forEach((c) => {
|
|
48
48
|
const startPercentage = Math.floor((c.startTime * 100) / duration);
|
|
49
49
|
const endPercentage = Math.floor((c.endTime * 100) / duration);
|
|
50
50
|
arr.push(`black ${startPercentage}%`);
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { SoftBuildersVideoPlayerChapter, SoftBuildersVideoPlayerNote } from "../../types";
|
|
2
2
|
type Props = {
|
|
3
|
-
notes
|
|
4
|
-
chapters
|
|
3
|
+
notes?: SoftBuildersVideoPlayerNote[];
|
|
4
|
+
chapters?: SoftBuildersVideoPlayerChapter[];
|
|
5
5
|
};
|
|
6
6
|
declare const TimeSliderContainer: ({ notes, chapters }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
7
7
|
export default TimeSliderContainer;
|
|
@@ -8,8 +8,8 @@ import {
|
|
|
8
8
|
} from "../../types";
|
|
9
9
|
|
|
10
10
|
type Props = {
|
|
11
|
-
notes
|
|
12
|
-
chapters
|
|
11
|
+
notes?: SoftBuildersVideoPlayerNote[];
|
|
12
|
+
chapters?: SoftBuildersVideoPlayerChapter[];
|
|
13
13
|
};
|
|
14
14
|
const TimeSliderContainer = ({ notes, chapters }: Props) => {
|
|
15
15
|
return (
|
|
@@ -6,7 +6,7 @@ export type Props<T = any> = {
|
|
|
6
6
|
id: string;
|
|
7
7
|
options: SoftBuildersVideoPlayerOptions;
|
|
8
8
|
notes?: SoftBuildersVideoPlayerNote[];
|
|
9
|
-
chapters
|
|
9
|
+
chapters?: SoftBuildersVideoPlayerChapter[];
|
|
10
10
|
startTime?: number;
|
|
11
11
|
poster?: string;
|
|
12
12
|
handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
|
|
@@ -12,6 +12,7 @@ let bigPlayButtonRoot = {};
|
|
|
12
12
|
const renderBigPlayButton = (id, player, isPaused, setIsPaused) => {
|
|
13
13
|
const container = document.getElementById(`video-container-${id}`);
|
|
14
14
|
if (container) {
|
|
15
|
+
container.style.height = "100%";
|
|
15
16
|
const element = container.querySelector(".vjs-big-play-button");
|
|
16
17
|
if (element) {
|
|
17
18
|
if (!bigPlayButtonRoot[id]) {
|
|
@@ -25,6 +26,8 @@ let controlBarRoot = {};
|
|
|
25
26
|
const renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, handleSaveNoteAction, opacity = "0", handleControlDisplayTimer = () => { }, bgColor = "transparent") => {
|
|
26
27
|
const container = document.getElementById(`video-container-${id}`);
|
|
27
28
|
if (container) {
|
|
29
|
+
container.style.height = "100%";
|
|
30
|
+
container.style.aspectRatio = "16 / 9";
|
|
28
31
|
const element = container.querySelector(".vjs-control-bar");
|
|
29
32
|
if (element) {
|
|
30
33
|
if (!controlBarRoot[id]) {
|
|
@@ -66,8 +69,6 @@ const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, han
|
|
|
66
69
|
useEffect(() => {
|
|
67
70
|
if (!playerRef.current) {
|
|
68
71
|
const videoElement = document.createElement("video-js");
|
|
69
|
-
videoElement.style.width = "100%";
|
|
70
|
-
videoElement.style.height = "100%";
|
|
71
72
|
videoElement.setAttribute("playsinline", "true");
|
|
72
73
|
videoElement.classList.add("vjs-big-play-centered");
|
|
73
74
|
// Set the poster attribute here
|
|
@@ -75,6 +76,8 @@ const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, han
|
|
|
75
76
|
videoElement.setAttribute("poster", poster);
|
|
76
77
|
}
|
|
77
78
|
videoRef.current.appendChild(videoElement);
|
|
79
|
+
videoElement.style.width = "100%";
|
|
80
|
+
videoElement.style.height = "100%";
|
|
78
81
|
playerRef.current = videojs(videoElement, options, () => {
|
|
79
82
|
onReady(playerRef.current);
|
|
80
83
|
});
|
|
@@ -227,7 +230,7 @@ const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, han
|
|
|
227
230
|
}
|
|
228
231
|
};
|
|
229
232
|
}, []);
|
|
230
|
-
return (_jsx("div", { ref: videoRefs, id: `video-container-${id}`, className: "sb-relative sb-rounded-md sb-overflow-hidden sb-w-full sb-h-full ", children: _jsx("div", { className: "hover:sb-cursor-pointer sb-w-full sb-h-full", "data-vjs-player": true, children: _jsx("div", { onClick: handlePlayerClick, ref: videoRef, className: "sb-
|
|
233
|
+
return (_jsx("div", { ref: videoRefs, id: `video-container-${id}`, className: "sb-relative sb-rounded-md sb-overflow-hidden sb-w-full sb-h-full ", children: _jsx("div", { className: "hover:sb-cursor-pointer sb-w-full sb-h-full", "data-vjs-player": true, children: _jsx("div", { onClick: handlePlayerClick, ref: videoRef, className: "sb-h-full sb-w-full" }) }) }));
|
|
231
234
|
};
|
|
232
235
|
export default VideoPlayerComponent;
|
|
233
236
|
//# sourceMappingURL=index.js.map
|
|
@@ -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;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VideoPlayerComponent/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -13,7 +13,6 @@ import "./style/style.css";
|
|
|
13
13
|
import "../../styles/tailwind.css";
|
|
14
14
|
import { SoftBuildersVideoPlayerProvider } from "./provider";
|
|
15
15
|
import BigPlayButton from "../BigPlayButton";
|
|
16
|
-
import { set } from "video.js/dist/types/tech/middleware";
|
|
17
16
|
let bigPlayButtonRoot: {
|
|
18
17
|
[key: string]: ReactDOM.Root | undefined;
|
|
19
18
|
} = {};
|
|
@@ -24,7 +23,9 @@ const renderBigPlayButton = (
|
|
|
24
23
|
setIsPaused: React.Dispatch<React.SetStateAction<boolean>>
|
|
25
24
|
) => {
|
|
26
25
|
const container = document.getElementById(`video-container-${id}`);
|
|
26
|
+
|
|
27
27
|
if (container) {
|
|
28
|
+
container.style.height = "100%";
|
|
28
29
|
const element: any = container.querySelector(".vjs-big-play-button");
|
|
29
30
|
if (element) {
|
|
30
31
|
if (!bigPlayButtonRoot[id]) {
|
|
@@ -49,8 +50,8 @@ const renderControlBar = <T,>(
|
|
|
49
50
|
isPaused: boolean,
|
|
50
51
|
setIsPaused: React.Dispatch<React.SetStateAction<boolean>>,
|
|
51
52
|
duration: number,
|
|
52
|
-
notes
|
|
53
|
-
chapters
|
|
53
|
+
notes?: SoftBuildersVideoPlayerNote[],
|
|
54
|
+
chapters?: SoftBuildersVideoPlayerChapter[],
|
|
54
55
|
seekStep: number = 5,
|
|
55
56
|
handleSaveNoteAction?: (time: number, note: string) => Promise<T>,
|
|
56
57
|
opacity: string = "0",
|
|
@@ -60,6 +61,8 @@ const renderControlBar = <T,>(
|
|
|
60
61
|
) => {
|
|
61
62
|
const container = document.getElementById(`video-container-${id}`);
|
|
62
63
|
if (container) {
|
|
64
|
+
container.style.height = "100%";
|
|
65
|
+
container.style.aspectRatio = "16 / 9";
|
|
63
66
|
const element: any = container.querySelector(".vjs-control-bar");
|
|
64
67
|
if (element) {
|
|
65
68
|
if (!controlBarRoot[id]) {
|
|
@@ -93,7 +96,7 @@ export type Props<T = any> = {
|
|
|
93
96
|
id: string;
|
|
94
97
|
options: SoftBuildersVideoPlayerOptions;
|
|
95
98
|
notes?: SoftBuildersVideoPlayerNote[];
|
|
96
|
-
chapters
|
|
99
|
+
chapters?: SoftBuildersVideoPlayerChapter[];
|
|
97
100
|
startTime?: number;
|
|
98
101
|
poster?: string; // Changed to string type for poster URL
|
|
99
102
|
handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
|
|
@@ -137,8 +140,7 @@ const VideoPlayerComponent = <T,>({
|
|
|
137
140
|
useEffect(() => {
|
|
138
141
|
if (!playerRef.current) {
|
|
139
142
|
const videoElement = document.createElement("video-js");
|
|
140
|
-
|
|
141
|
-
videoElement.style.height = "100%";
|
|
143
|
+
|
|
142
144
|
videoElement.setAttribute("playsinline", "true");
|
|
143
145
|
|
|
144
146
|
videoElement.classList.add("vjs-big-play-centered");
|
|
@@ -147,6 +149,8 @@ const VideoPlayerComponent = <T,>({
|
|
|
147
149
|
videoElement.setAttribute("poster", poster);
|
|
148
150
|
}
|
|
149
151
|
videoRef.current.appendChild(videoElement);
|
|
152
|
+
videoElement.style.width = "100%";
|
|
153
|
+
videoElement.style.height = "100%";
|
|
150
154
|
playerRef.current = videojs(videoElement, options, () => {
|
|
151
155
|
onReady(playerRef.current as Player);
|
|
152
156
|
});
|
|
@@ -325,7 +329,7 @@ const VideoPlayerComponent = <T,>({
|
|
|
325
329
|
<div
|
|
326
330
|
onClick={handlePlayerClick}
|
|
327
331
|
ref={videoRef}
|
|
328
|
-
className="sb-
|
|
332
|
+
className="sb-h-full sb-w-full"
|
|
329
333
|
/>
|
|
330
334
|
</div>
|
|
331
335
|
</div>
|
package/dist/index.css
CHANGED
package/dist/index.mjs
CHANGED
|
@@ -869,13 +869,13 @@ var NotesPanal = ({ notes }) => {
|
|
|
869
869
|
const [ns, setNs] = useState7([]);
|
|
870
870
|
const { duration } = useSoftBuildersVideoPlayerContext();
|
|
871
871
|
useEffect6(() => {
|
|
872
|
-
const newNs = notes.map((n) => {
|
|
872
|
+
const newNs = notes == null ? void 0 : notes.map((n) => {
|
|
873
873
|
const percentage = Math.floor(n.time * 100 / duration);
|
|
874
874
|
return __spreadProps(__spreadValues({}, n), {
|
|
875
875
|
percentage
|
|
876
876
|
});
|
|
877
877
|
});
|
|
878
|
-
setNs(newNs);
|
|
878
|
+
newNs && setNs(newNs);
|
|
879
879
|
}, [notes, duration]);
|
|
880
880
|
return /* @__PURE__ */ jsx25("div", { id: "notes-panal", className: "sb-w-full sb-h-full sb-relative ", children: ns.map((n, i) => /* @__PURE__ */ jsx25(NoteTooltip_default, { note: n }, `note-${i}-${n.time}`)) });
|
|
881
881
|
};
|
|
@@ -941,7 +941,7 @@ var ChaptersPanal = ({ chapters }) => {
|
|
|
941
941
|
const [cs, setCs] = useState9([]);
|
|
942
942
|
const { duration } = useSoftBuildersVideoPlayerContext();
|
|
943
943
|
useEffect8(() => {
|
|
944
|
-
const newCs = chapters.map((c) => {
|
|
944
|
+
const newCs = chapters == null ? void 0 : chapters.map((c) => {
|
|
945
945
|
const startPercentage = Math.floor(c.startTime * 100 / duration);
|
|
946
946
|
const endPercentage = Math.floor(c.endTime * 100 / duration);
|
|
947
947
|
return __spreadProps(__spreadValues({}, c), {
|
|
@@ -949,7 +949,7 @@ var ChaptersPanal = ({ chapters }) => {
|
|
|
949
949
|
endPercentage
|
|
950
950
|
});
|
|
951
951
|
});
|
|
952
|
-
setCs(newCs);
|
|
952
|
+
newCs && setCs(newCs);
|
|
953
953
|
}, [chapters, duration]);
|
|
954
954
|
return /* @__PURE__ */ jsx27("div", { id: "chapters-panal", className: "sb-w-full sb-h-full sb-relative ", children: cs.map((c, i) => /* @__PURE__ */ jsx27(ChapterTooltip_default, { chapter: c }, `chapter-${i}-${c.startTime}`)) });
|
|
955
955
|
};
|
|
@@ -982,7 +982,7 @@ var TimeSlider = ({ chapters }) => {
|
|
|
982
982
|
const [maskCuttes, setMaskCuttes] = useState10("");
|
|
983
983
|
useEffect9(() => {
|
|
984
984
|
const arr = ["black 0%"];
|
|
985
|
-
chapters.forEach((c) => {
|
|
985
|
+
chapters == null ? void 0 : chapters.forEach((c) => {
|
|
986
986
|
const startPercentage = Math.floor(c.startTime * 100 / duration);
|
|
987
987
|
const endPercentage = Math.floor(c.endTime * 100 / duration);
|
|
988
988
|
arr.push(`black ${startPercentage}%`);
|
|
@@ -1359,6 +1359,7 @@ var bigPlayButtonRoot = {};
|
|
|
1359
1359
|
var renderBigPlayButton = (id, player, isPaused, setIsPaused) => {
|
|
1360
1360
|
const container = document.getElementById(`video-container-${id}`);
|
|
1361
1361
|
if (container) {
|
|
1362
|
+
container.style.height = "100%";
|
|
1362
1363
|
const element = container.querySelector(".vjs-big-play-button");
|
|
1363
1364
|
if (element) {
|
|
1364
1365
|
if (!bigPlayButtonRoot[id]) {
|
|
@@ -1382,6 +1383,8 @@ var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chap
|
|
|
1382
1383
|
}, bgColor = "transparent") => {
|
|
1383
1384
|
const container = document.getElementById(`video-container-${id}`);
|
|
1384
1385
|
if (container) {
|
|
1386
|
+
container.style.height = "100%";
|
|
1387
|
+
container.style.aspectRatio = "16 / 9";
|
|
1385
1388
|
const element = container.querySelector(".vjs-control-bar");
|
|
1386
1389
|
if (element) {
|
|
1387
1390
|
if (!controlBarRoot[id]) {
|
|
@@ -1450,14 +1453,14 @@ var VideoPlayerComponent = ({
|
|
|
1450
1453
|
useEffect14(() => {
|
|
1451
1454
|
if (!playerRef.current) {
|
|
1452
1455
|
const videoElement = document.createElement("video-js");
|
|
1453
|
-
videoElement.style.width = "100%";
|
|
1454
|
-
videoElement.style.height = "100%";
|
|
1455
1456
|
videoElement.setAttribute("playsinline", "true");
|
|
1456
1457
|
videoElement.classList.add("vjs-big-play-centered");
|
|
1457
1458
|
if (poster) {
|
|
1458
1459
|
videoElement.setAttribute("poster", poster);
|
|
1459
1460
|
}
|
|
1460
1461
|
videoRef.current.appendChild(videoElement);
|
|
1462
|
+
videoElement.style.width = "100%";
|
|
1463
|
+
videoElement.style.height = "100%";
|
|
1461
1464
|
playerRef.current = videojs(videoElement, options, () => {
|
|
1462
1465
|
onReady(playerRef.current);
|
|
1463
1466
|
});
|
|
@@ -1632,7 +1635,7 @@ var VideoPlayerComponent = ({
|
|
|
1632
1635
|
{
|
|
1633
1636
|
onClick: handlePlayerClick,
|
|
1634
1637
|
ref: videoRef,
|
|
1635
|
-
className: "sb-
|
|
1638
|
+
className: "sb-h-full sb-w-full"
|
|
1636
1639
|
}
|
|
1637
1640
|
)
|
|
1638
1641
|
}
|
|
@@ -1647,7 +1650,7 @@ import { jsx as jsx36 } from "react/jsx-runtime";
|
|
|
1647
1650
|
var DEFAULT_OPTIONS = {
|
|
1648
1651
|
autoplay: false,
|
|
1649
1652
|
controls: true,
|
|
1650
|
-
fluid:
|
|
1653
|
+
fluid: false,
|
|
1651
1654
|
muted: true,
|
|
1652
1655
|
height: 420,
|
|
1653
1656
|
width: 720,
|