softbuilders-react-video-player 1.1.22 → 1.1.23
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/ControlBar/index.js +10 -8
- package/dist/components/ControlBar/index.js.map +1 -1
- package/dist/components/ControlBar/index.tsx +20 -16
- package/dist/components/MenuButton/index.d.ts +2 -1
- package/dist/components/MenuButton/index.js +5 -2
- package/dist/components/MenuButton/index.js.map +1 -1
- package/dist/components/MenuButton/index.tsx +12 -3
- package/dist/components/QualityMenu/index.d.ts +4 -2
- package/dist/components/QualityMenu/index.js +9 -7
- package/dist/components/QualityMenu/index.js.map +1 -1
- package/dist/components/QualityMenu/index.tsx +33 -8
- package/dist/components/SoftBuildersVideoPlayer/index.d.ts +2 -1
- package/dist/components/SoftBuildersVideoPlayer/index.js +4 -1
- package/dist/components/SoftBuildersVideoPlayer/index.js.map +1 -1
- package/dist/components/SoftBuildersVideoPlayer/index.tsx +5 -1
- package/dist/components/SubtitleMenu/index.d.ts +4 -2
- package/dist/components/SubtitleMenu/index.js +8 -3
- package/dist/components/SubtitleMenu/index.js.map +1 -1
- package/dist/components/SubtitleMenu/index.tsx +19 -4
- package/dist/components/VideoPlayerComponent/index.js +70 -8
- package/dist/components/VideoPlayerComponent/index.js.map +1 -1
- package/dist/components/VideoPlayerComponent/index.tsx +80 -7
- package/dist/components/VideoPlayerComponent/style/style.css +1 -0
- package/dist/components/VolumeSlider/index.js +4 -2
- package/dist/components/VolumeSlider/index.js.map +1 -1
- package/dist/components/VolumeSlider/index.tsx +12 -6
- package/dist/index.css +35 -11
- package/dist/index.d.mts +2 -1
- package/dist/index.mjs +287 -157
- package/dist/styles/tailwind.css +34 -11
- package/package.json +1 -1
|
@@ -46,19 +46,21 @@ const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters,
|
|
|
46
46
|
useEffect(() => {
|
|
47
47
|
setDuration(duration);
|
|
48
48
|
}, [duration]);
|
|
49
|
-
return (_jsxs("div", { className:
|
|
49
|
+
return (_jsxs("div", { className: ` sb-px-2 sb-flex sb-pt-2 sb-justify-center sb-gap-3 sb-w-full sb-h-full ${width > 400 ? "sb-items-end" : "sb-items-start"} sb-pb-2`, children: [_jsx(BufferTracker, {}), _jsx(CurrentTimeTracker, {}), _jsx("button", { onClick: () => {
|
|
50
50
|
seek(-seekStep);
|
|
51
51
|
}, 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) => {
|
|
52
52
|
e.preventDefault();
|
|
53
53
|
seek(seekStep);
|
|
54
|
-
}, children: _jsx(ForwardIcon, { className: "sb-w-3 sb-h-3" }) }),
|
|
54
|
+
}, children: _jsx(ForwardIcon, { className: "sb-w-3 sb-h-3" }) }),
|
|
55
|
+
// isSeeking ||
|
|
56
|
+
// width > 400 &&
|
|
57
|
+
_jsx("div", { className: `${width < 400 ? "sb-w-[100px] sb-ml-0 sb-mr-0" : "sb-w-full"}`, children: _jsxs("div", { style: width < 400
|
|
55
58
|
? {
|
|
56
|
-
width: `${width * 0.
|
|
57
|
-
left: "
|
|
59
|
+
width: `${width * 0.9}px`,
|
|
60
|
+
left: "5%",
|
|
61
|
+
top: "90%",
|
|
58
62
|
}
|
|
59
|
-
: { width: "100%" }, className: `flex gap-2 ${width < 400
|
|
60
|
-
? "absolute -sb-translate-y-9"
|
|
61
|
-
: "-sb-translate-y-0 sb-w-full"} hover:sb-w-[45%] sb-transition-all sb-ease-in-out sb-duration-500`, children: [_jsx(CurrentTimeLabel, {}), _jsx(TimeSliderContainer, { chapters: chapters, notes: notes }), _jsx("p", { children: durationFormater(duration) })] }) })), _jsx("div", { className: "sb-h-full", children: _jsx(VolumeSlider, { width: width, setIsSeeking: (val) => setIsSeeking(val) }) }), _jsx(QualityMenu, {}), _jsx("button", { onClick: (e) => {
|
|
63
|
+
: { width: "100%" }, className: `flex gap-2 ${width < 400 ? "absolute sb-top-1" : "-sb-translate-y-0 sb-w-full"} hover:sb-w-[45%] sb-transition-all sb-ease-in-out sb-duration-500`, children: [_jsx(CurrentTimeLabel, {}), _jsx(TimeSliderContainer, { chapters: chapters, notes: notes }), _jsx("p", { children: durationFormater(duration) })] }) }), _jsx("div", { className: "sb-h-full", children: _jsx(VolumeSlider, { width: width, setIsSeeking: (val) => setIsSeeking(val) }) }), _jsx(QualityMenu, { width: width }), handleSaveNoteAction && (_jsx(CreateNoteMenu, { handleSaveNoteAction: handleSaveNoteAction })), _jsx(SubtitleMenu, { width: width }), _jsx("button", { onClick: (e) => {
|
|
62
64
|
e.preventDefault();
|
|
63
65
|
e.stopPropagation();
|
|
64
66
|
if (player === null || player === void 0 ? void 0 : player.isFullscreen()) {
|
|
@@ -67,7 +69,7 @@ const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters,
|
|
|
67
69
|
else {
|
|
68
70
|
player === null || player === void 0 ? void 0 : player.requestFullscreen();
|
|
69
71
|
}
|
|
70
|
-
}, children: _jsx(FullScreenIcon, { className: "sb-w-3 sb-h-3" }) })
|
|
72
|
+
}, children: _jsx(FullScreenIcon, { className: "sb-w-3 sb-h-3" }) })] }));
|
|
71
73
|
};
|
|
72
74
|
export default ControlBar;
|
|
73
75
|
//# 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;AActB,MAAM,UAAU,GAAG,CAAK,EACtB,MAAM,EACN,QAAQ,EACR,WAAW,EACX,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,QAAQ,GAAG,CAAC,EACZ,EAAE,EACF,oBAAoB,GACX,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;IAEF,MAAM,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;IACnE,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,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ControlBar/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -87,7 +87,11 @@ const ControlBar = <T,>({
|
|
|
87
87
|
}, [duration]);
|
|
88
88
|
|
|
89
89
|
return (
|
|
90
|
-
<div
|
|
90
|
+
<div
|
|
91
|
+
className={` sb-px-2 sb-flex sb-pt-2 sb-justify-center sb-gap-3 sb-w-full sb-h-full ${
|
|
92
|
+
width > 400 ? "sb-items-end" : "sb-items-start"
|
|
93
|
+
} sb-pb-2`}
|
|
94
|
+
>
|
|
91
95
|
{/* Doesn't display anything, just set the downloaded buffer percentage */}
|
|
92
96
|
<BufferTracker />
|
|
93
97
|
{/* Doesn't display anything, just set the current time */}
|
|
@@ -116,25 +120,26 @@ const ControlBar = <T,>({
|
|
|
116
120
|
<ForwardIcon className="sb-w-3 sb-h-3" />
|
|
117
121
|
</button>
|
|
118
122
|
|
|
119
|
-
{
|
|
123
|
+
{
|
|
124
|
+
// isSeeking ||
|
|
125
|
+
// width > 400 &&
|
|
120
126
|
<div
|
|
121
127
|
className={`${
|
|
122
|
-
width < 400 ? "sb-w-[
|
|
128
|
+
width < 400 ? "sb-w-[100px] sb-ml-0 sb-mr-0" : "sb-w-full"
|
|
123
129
|
}`}
|
|
124
130
|
>
|
|
125
131
|
<div
|
|
126
132
|
style={
|
|
127
133
|
width < 400
|
|
128
134
|
? {
|
|
129
|
-
width: `${width * 0.
|
|
130
|
-
left: "
|
|
135
|
+
width: `${width * 0.9}px`,
|
|
136
|
+
left: "5%",
|
|
137
|
+
top: "90%",
|
|
131
138
|
}
|
|
132
139
|
: { width: "100%" }
|
|
133
140
|
}
|
|
134
141
|
className={`flex gap-2 ${
|
|
135
|
-
width < 400
|
|
136
|
-
? "absolute -sb-translate-y-9"
|
|
137
|
-
: "-sb-translate-y-0 sb-w-full"
|
|
142
|
+
width < 400 ? "absolute sb-top-1" : "-sb-translate-y-0 sb-w-full"
|
|
138
143
|
} hover:sb-w-[45%] sb-transition-all sb-ease-in-out sb-duration-500`}
|
|
139
144
|
>
|
|
140
145
|
<CurrentTimeLabel />
|
|
@@ -143,14 +148,19 @@ const ControlBar = <T,>({
|
|
|
143
148
|
<p>{durationFormater(duration)}</p>
|
|
144
149
|
</div>
|
|
145
150
|
</div>
|
|
146
|
-
|
|
151
|
+
}
|
|
147
152
|
|
|
148
153
|
<div className="sb-h-full">
|
|
149
154
|
<VolumeSlider width={width} setIsSeeking={(val) => setIsSeeking(val)} />
|
|
150
155
|
</div>
|
|
151
156
|
|
|
152
|
-
<QualityMenu />
|
|
157
|
+
<QualityMenu width={width} />
|
|
158
|
+
|
|
159
|
+
{handleSaveNoteAction && (
|
|
160
|
+
<CreateNoteMenu handleSaveNoteAction={handleSaveNoteAction} />
|
|
161
|
+
)}
|
|
153
162
|
|
|
163
|
+
<SubtitleMenu width={width} />
|
|
154
164
|
<button
|
|
155
165
|
onClick={(e) => {
|
|
156
166
|
e.preventDefault();
|
|
@@ -165,12 +175,6 @@ const ControlBar = <T,>({
|
|
|
165
175
|
>
|
|
166
176
|
<FullScreenIcon className="sb-w-3 sb-h-3" />
|
|
167
177
|
</button>
|
|
168
|
-
|
|
169
|
-
{handleSaveNoteAction && (
|
|
170
|
-
<CreateNoteMenu handleSaveNoteAction={handleSaveNoteAction} />
|
|
171
|
-
)}
|
|
172
|
-
|
|
173
|
-
<SubtitleMenu />
|
|
174
178
|
</div>
|
|
175
179
|
);
|
|
176
180
|
};
|
|
@@ -3,6 +3,7 @@ type Props = {
|
|
|
3
3
|
buttonContent: React.ReactNode;
|
|
4
4
|
menuContent: React.ReactNode;
|
|
5
5
|
close?: (fun: Function) => void;
|
|
6
|
+
classContainer?: string;
|
|
6
7
|
};
|
|
7
|
-
declare const MenuButton: ({ buttonContent, menuContent, close }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
8
|
+
declare const MenuButton: ({ buttonContent, menuContent, close, classContainer, }: Props) => import("react/jsx-runtime").JSX.Element;
|
|
8
9
|
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 }) => {
|
|
3
|
+
const MenuButton = ({ buttonContent, menuContent, close, classContainer, }) => {
|
|
4
4
|
const [isOpen, setIsOpen] = useState(false);
|
|
5
5
|
const buttonRef = useRef(null);
|
|
6
6
|
const menuRef = useRef(null);
|
|
@@ -24,7 +24,10 @@ const MenuButton = ({ buttonContent, menuContent, close }) => {
|
|
|
24
24
|
if (close)
|
|
25
25
|
close(closeMenu);
|
|
26
26
|
}, [close, closeMenu]);
|
|
27
|
-
return (_jsxs("div", { className: "sb-relative sb-flex sb-items-end", children: [_jsx("button", { ref: buttonRef, onClick:
|
|
27
|
+
return (_jsxs("div", { className: "sb-relative sb-flex sb-items-end", children: [_jsx("button", { ref: buttonRef, onClick: (e) => {
|
|
28
|
+
e.stopPropagation();
|
|
29
|
+
toggleMenu();
|
|
30
|
+
}, "aria-haspopup": "true", "aria-expanded": isOpen, "aria-label": "Open menu", children: buttonContent }), isOpen && (_jsx("div", { ref: menuRef, role: "menu", "aria-orientation": "vertical", "aria-labelledby": "Open menu", className: `sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10 ${classContainer}`, children: menuContent }))] }));
|
|
28
31
|
};
|
|
29
32
|
export default MenuButton;
|
|
30
33
|
//# sourceMappingURL=index.js.map
|
|
@@ -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;AASxE,MAAM,UAAU,GAAG,CAAC,EAClB,aAAa,EACb,WAAW,EACX,KAAK,EACL,cAAc,GACR,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;IAEvB,OAAO,CACL,eAAK,SAAS,EAAC,mCAAmC,aAChD,iBACE,GAAG,EAAE,SAAS,EACd,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;oBACb,CAAC,CAAC,eAAe,EAAE,CAAC;oBACpB,UAAU,EAAE,CAAC;gBACf,CAAC,mBACa,MAAM,mBACL,MAAM,gBACV,WAAW,YAErB,aAAa,GACP,EAER,MAAM,IAAI,CACT,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"}
|
|
@@ -4,9 +4,15 @@ type Props = {
|
|
|
4
4
|
buttonContent: React.ReactNode;
|
|
5
5
|
menuContent: React.ReactNode;
|
|
6
6
|
close?: (fun: Function) => void;
|
|
7
|
+
classContainer?: string;
|
|
7
8
|
};
|
|
8
9
|
|
|
9
|
-
const MenuButton = ({
|
|
10
|
+
const MenuButton = ({
|
|
11
|
+
buttonContent,
|
|
12
|
+
menuContent,
|
|
13
|
+
close,
|
|
14
|
+
classContainer,
|
|
15
|
+
}: Props) => {
|
|
10
16
|
const [isOpen, setIsOpen] = useState(false);
|
|
11
17
|
const buttonRef = useRef<HTMLButtonElement | null>(null);
|
|
12
18
|
const menuRef = useRef<HTMLDivElement | null>(null);
|
|
@@ -41,7 +47,10 @@ const MenuButton = ({ buttonContent, menuContent, close }: Props) => {
|
|
|
41
47
|
<div className="sb-relative sb-flex sb-items-end">
|
|
42
48
|
<button
|
|
43
49
|
ref={buttonRef}
|
|
44
|
-
onClick={
|
|
50
|
+
onClick={(e) => {
|
|
51
|
+
e.stopPropagation();
|
|
52
|
+
toggleMenu();
|
|
53
|
+
}}
|
|
45
54
|
aria-haspopup="true"
|
|
46
55
|
aria-expanded={isOpen}
|
|
47
56
|
aria-label="Open menu"
|
|
@@ -55,7 +64,7 @@ const MenuButton = ({ buttonContent, menuContent, close }: Props) => {
|
|
|
55
64
|
role="menu"
|
|
56
65
|
aria-orientation="vertical"
|
|
57
66
|
aria-labelledby="Open menu"
|
|
58
|
-
className=
|
|
67
|
+
className={`sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10 ${classContainer}`}
|
|
59
68
|
>
|
|
60
69
|
{menuContent}
|
|
61
70
|
</div>
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
-
type QualityMenuProps = {
|
|
2
|
-
|
|
1
|
+
type QualityMenuProps = {
|
|
2
|
+
width: number;
|
|
3
|
+
};
|
|
4
|
+
declare const QualityMenu: ({ width }: QualityMenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
5
|
export default QualityMenu;
|
|
@@ -3,30 +3,32 @@ import { useEffect, useState } from "react";
|
|
|
3
3
|
import MenuButton from "../MenuButton";
|
|
4
4
|
import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
|
|
5
5
|
import { CheckedIcon, LeftArrowIcon, SettingsIcon } from "../../images";
|
|
6
|
-
const QualityOption = ({ isSelected, quality, onClick, }) => {
|
|
7
|
-
return (_jsx("button", { className:
|
|
6
|
+
const QualityOption = ({ isSelected, quality, onClick, width, }) => {
|
|
7
|
+
return (_jsx("button", { className: `hover:sb-text-orange-500 ${width > 400 ? "sb-p-2" : "sp-pb-1"}`, onClick: onClick, children: _jsxs("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2", children: [_jsx("div", { className: "sb-col-span-3", children: isSelected ? (_jsx(CheckedIcon, { className: `${width > 400 ? "sb-w-5 sb-h-5" : "sb-w-3 sb-h-3"}` })) : (_jsx("div", {})) }), _jsx("p", { className: "sb-text-left sb-col-span-9", children: quality.label })] }) }));
|
|
8
8
|
};
|
|
9
|
-
const QualityMenu = ({}) => {
|
|
9
|
+
const QualityMenu = ({ width }) => {
|
|
10
10
|
const { player } = useSoftBuildersVideoPlayerContext();
|
|
11
11
|
const [closeMenuFunction, setCloseMenuFunction] = useState(undefined);
|
|
12
12
|
const [qualities, setQualities] = useState([]);
|
|
13
13
|
const [currentQualitySrc, setCurrentQualitySrc] = useState(undefined);
|
|
14
14
|
useEffect(() => {
|
|
15
15
|
if (player) {
|
|
16
|
-
const sources = player.currentSources();
|
|
16
|
+
const sources = player === null || player === void 0 ? void 0 : player.currentSources();
|
|
17
17
|
const qs = JSON.parse(JSON.stringify(sources));
|
|
18
18
|
setQualities(qs);
|
|
19
|
-
const source = player.currentSource();
|
|
19
|
+
const source = player === null || player === void 0 ? void 0 : player.currentSource();
|
|
20
20
|
const quality = JSON.parse(JSON.stringify(source));
|
|
21
21
|
setCurrentQualitySrc(quality.src);
|
|
22
22
|
}
|
|
23
23
|
}, [player]);
|
|
24
|
-
return (_jsx(MenuButton, { buttonContent: _jsx(SettingsIcon, { className: "sb-w-3 sb-h-3" }), menuContent: _jsx("div", { className:
|
|
24
|
+
return (_jsx(MenuButton, { classContainer: `${width < 400 ? "!sb-top-8 -sb-left-9" : ""}`, buttonContent: _jsx(SettingsIcon, { className: "sb-w-3 sb-h-3" }), menuContent: _jsx("div", { className: `sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 ${width > 400
|
|
25
|
+
? "sb-w-[150px] sb-py-5"
|
|
26
|
+
: "sb-w-[90px] sb-items-center sb-justify-center sb-py-1"}`, children: _jsxs("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [_jsxs("div", { className: `sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start sb-relative sb-top-2`, children: [_jsx("button", { onClick: () => {
|
|
25
27
|
if (closeMenuFunction) {
|
|
26
28
|
closeMenuFunction();
|
|
27
29
|
}
|
|
28
30
|
}, 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) => {
|
|
29
|
-
return (_jsx(QualityOption, { isSelected: currentQualitySrc === q.src, quality: q, onClick: () => {
|
|
31
|
+
return (_jsx(QualityOption, { width: width, isSelected: currentQualitySrc === q.src, quality: q, onClick: () => {
|
|
30
32
|
const source = qualities.find((_q) => q.label == _q.label);
|
|
31
33
|
if (source && source.src != currentQualitySrc) {
|
|
32
34
|
player === null || player === void 0 ? void 0 : player.src(source.src);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/QualityMenu/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAe,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AAGrF,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,YAAY,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/QualityMenu/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -9,17 +9,30 @@ type QualityOptionProps = {
|
|
|
9
9
|
isSelected: boolean;
|
|
10
10
|
quality: SoftBuildersVideoPlayerSource;
|
|
11
11
|
onClick: () => void;
|
|
12
|
+
width: number;
|
|
12
13
|
};
|
|
13
14
|
const QualityOption = ({
|
|
14
15
|
isSelected,
|
|
15
16
|
quality,
|
|
16
17
|
onClick,
|
|
18
|
+
width,
|
|
17
19
|
}: QualityOptionProps) => {
|
|
18
20
|
return (
|
|
19
|
-
<button
|
|
21
|
+
<button
|
|
22
|
+
className={`hover:sb-text-orange-500 ${
|
|
23
|
+
width > 400 ? "sb-p-2" : "sp-pb-1"
|
|
24
|
+
}`}
|
|
25
|
+
onClick={onClick}
|
|
26
|
+
>
|
|
20
27
|
<div className="sb-grid sb-grid-cols-12 sb-items-center sb-gap-2">
|
|
21
28
|
<div className="sb-col-span-3">
|
|
22
|
-
{isSelected ?
|
|
29
|
+
{isSelected ? (
|
|
30
|
+
<CheckedIcon
|
|
31
|
+
className={`${width > 400 ? "sb-w-5 sb-h-5" : "sb-w-3 sb-h-3"}`}
|
|
32
|
+
/>
|
|
33
|
+
) : (
|
|
34
|
+
<div></div>
|
|
35
|
+
)}
|
|
23
36
|
</div>
|
|
24
37
|
|
|
25
38
|
<p className="sb-text-left sb-col-span-9">{quality.label}</p>
|
|
@@ -28,9 +41,11 @@ const QualityOption = ({
|
|
|
28
41
|
);
|
|
29
42
|
};
|
|
30
43
|
|
|
31
|
-
type QualityMenuProps = {
|
|
44
|
+
type QualityMenuProps = {
|
|
45
|
+
width: number;
|
|
46
|
+
};
|
|
32
47
|
|
|
33
|
-
const QualityMenu = ({}: QualityMenuProps) => {
|
|
48
|
+
const QualityMenu = ({ width }: QualityMenuProps) => {
|
|
34
49
|
const { player } = useSoftBuildersVideoPlayerContext();
|
|
35
50
|
|
|
36
51
|
const [closeMenuFunction, setCloseMenuFunction] = useState<
|
|
@@ -47,7 +62,7 @@ const QualityMenu = ({}: QualityMenuProps) => {
|
|
|
47
62
|
|
|
48
63
|
useEffect(() => {
|
|
49
64
|
if (player) {
|
|
50
|
-
const sources = player
|
|
65
|
+
const sources = player?.currentSources();
|
|
51
66
|
|
|
52
67
|
const qs: SoftBuildersVideoPlayerSource[] = JSON.parse(
|
|
53
68
|
JSON.stringify(sources)
|
|
@@ -55,7 +70,7 @@ const QualityMenu = ({}: QualityMenuProps) => {
|
|
|
55
70
|
|
|
56
71
|
setQualities(qs);
|
|
57
72
|
|
|
58
|
-
const source = player
|
|
73
|
+
const source = player?.currentSource();
|
|
59
74
|
const quality: SoftBuildersVideoPlayerSource = JSON.parse(
|
|
60
75
|
JSON.stringify(source)
|
|
61
76
|
);
|
|
@@ -66,11 +81,20 @@ const QualityMenu = ({}: QualityMenuProps) => {
|
|
|
66
81
|
|
|
67
82
|
return (
|
|
68
83
|
<MenuButton
|
|
84
|
+
classContainer={`${width < 400 ? "!sb-top-8 -sb-left-9" : ""}`}
|
|
69
85
|
buttonContent={<SettingsIcon className="sb-w-3 sb-h-3" />}
|
|
70
86
|
menuContent={
|
|
71
|
-
<div
|
|
87
|
+
<div
|
|
88
|
+
className={`sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 ${
|
|
89
|
+
width > 400
|
|
90
|
+
? "sb-w-[150px] sb-py-5"
|
|
91
|
+
: "sb-w-[90px] sb-items-center sb-justify-center sb-py-1"
|
|
92
|
+
}`}
|
|
93
|
+
>
|
|
72
94
|
<div className="sb-flex sb-flex-col sb-gap-3">
|
|
73
|
-
<div
|
|
95
|
+
<div
|
|
96
|
+
className={`sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start sb-relative sb-top-2`}
|
|
97
|
+
>
|
|
74
98
|
<button
|
|
75
99
|
onClick={() => {
|
|
76
100
|
if (closeMenuFunction) {
|
|
@@ -90,6 +114,7 @@ const QualityMenu = ({}: QualityMenuProps) => {
|
|
|
90
114
|
{qualities.map((q, i) => {
|
|
91
115
|
return (
|
|
92
116
|
<QualityOption
|
|
117
|
+
width={width}
|
|
93
118
|
key={`quality-${q.label}-${i}`}
|
|
94
119
|
isSelected={currentQualitySrc === q.src}
|
|
95
120
|
quality={q}
|
|
@@ -8,6 +8,7 @@ export type Props<T = any> = {
|
|
|
8
8
|
handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
|
|
9
9
|
onPlay?: (time: number) => void;
|
|
10
10
|
onPause?: (time: number) => void;
|
|
11
|
+
isFocused?: boolean;
|
|
11
12
|
};
|
|
12
|
-
declare const SoftBuildersVideoPlayer: React.MemoExoticComponent<(<T>({ options, notes, chapters, startTime, handleSaveNoteAction, onPlay, onPause, }: Props<T>) => import("react/jsx-runtime").JSX.Element)>;
|
|
13
|
+
declare const SoftBuildersVideoPlayer: React.MemoExoticComponent<(<T>({ options, notes, chapters, startTime, handleSaveNoteAction, onPlay, onPause, isFocused, }: Props<T>) => import("react/jsx-runtime").JSX.Element)>;
|
|
13
14
|
export default SoftBuildersVideoPlayer;
|
|
@@ -12,7 +12,7 @@ const DEFAULT_OPTIONS = {
|
|
|
12
12
|
sources: [],
|
|
13
13
|
tracks: [],
|
|
14
14
|
};
|
|
15
|
-
const Component = ({ options, notes, chapters, startTime = 0, handleSaveNoteAction, onPlay, onPause, }) => {
|
|
15
|
+
const Component = ({ options, notes, chapters, startTime = 0, handleSaveNoteAction, onPlay, onPause, isFocused = true, }) => {
|
|
16
16
|
options = Object.assign(Object.assign({}, options), { responsive: true, inactivityTimeout: 0, fullscreen: {
|
|
17
17
|
navigationUI: "hide",
|
|
18
18
|
} });
|
|
@@ -29,6 +29,9 @@ const Component = ({ options, notes, chapters, startTime = 0, handleSaveNoteActi
|
|
|
29
29
|
if (options.width === undefined)
|
|
30
30
|
options.width = DEFAULT_OPTIONS.width;
|
|
31
31
|
const [tracks, setTracks] = useState([]);
|
|
32
|
+
useEffect(() => {
|
|
33
|
+
console.log(isFocused, "isF");
|
|
34
|
+
}, [isFocused]);
|
|
32
35
|
useEffect(() => {
|
|
33
36
|
const getTracks = async () => {
|
|
34
37
|
const newTracks = [];
|
|
@@ -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,IAAI;IACX,KAAK,EAAE,IAAI;IACX,MAAM,EAAE,GAAG;IACX,KAAK,EAAE,GAAG;IACV,OAAO,EAAE,EAAE;IACX,MAAM,EAAE,EAAE;CACX,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SoftBuildersVideoPlayer/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -27,6 +27,7 @@ export type Props<T = any> = {
|
|
|
27
27
|
handleSaveNoteAction?: (time: number, note: string) => Promise<T>;
|
|
28
28
|
onPlay?: (time: number) => void;
|
|
29
29
|
onPause?: (time: number) => void;
|
|
30
|
+
isFocused?: boolean;
|
|
30
31
|
};
|
|
31
32
|
|
|
32
33
|
const Component = <T,>({
|
|
@@ -37,6 +38,7 @@ const Component = <T,>({
|
|
|
37
38
|
handleSaveNoteAction,
|
|
38
39
|
onPlay,
|
|
39
40
|
onPause,
|
|
41
|
+
isFocused = true,
|
|
40
42
|
}: Props<T>) => {
|
|
41
43
|
options = {
|
|
42
44
|
...options,
|
|
@@ -57,7 +59,9 @@ const Component = <T,>({
|
|
|
57
59
|
if (options.width === undefined) options.width = DEFAULT_OPTIONS.width;
|
|
58
60
|
|
|
59
61
|
const [tracks, setTracks] = useState<SoftBuildersVideoPlayerTrack[]>([]);
|
|
60
|
-
|
|
62
|
+
useEffect(() => {
|
|
63
|
+
console.log(isFocused, "isF");
|
|
64
|
+
}, [isFocused]);
|
|
61
65
|
useEffect(() => {
|
|
62
66
|
const getTracks = async () => {
|
|
63
67
|
const newTracks: SoftBuildersVideoPlayerTrack[] = [];
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
-
type SubtitleMenuProps = {
|
|
2
|
-
|
|
1
|
+
type SubtitleMenuProps = {
|
|
2
|
+
width: number;
|
|
3
|
+
};
|
|
4
|
+
declare const SubtitleMenu: ({ width }: SubtitleMenuProps) => import("react/jsx-runtime").JSX.Element;
|
|
3
5
|
export default SubtitleMenu;
|
|
@@ -4,9 +4,12 @@ import MenuButton from "../MenuButton";
|
|
|
4
4
|
import { useSoftBuildersVideoPlayerContext } from "../VideoPlayerComponent/provider";
|
|
5
5
|
import { CheckedIcon, LeftArrowIcon, SubIcon } from "../../images";
|
|
6
6
|
const SubtitleOption = ({ isSelected, subtitle, onClick, }) => {
|
|
7
|
-
return (_jsx("button", { className: "hover:sb-text-orange-500 sb-p-2", onClick:
|
|
7
|
+
return (_jsx("button", { className: "hover:sb-text-orange-500 sb-p-2", onClick: (e) => {
|
|
8
|
+
e.stopPropagation();
|
|
9
|
+
onClick();
|
|
10
|
+
}, children: _jsxs("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2", children: [_jsx("div", { className: "sb-col-span-3", children: isSelected ? _jsx(CheckedIcon, { className: "sb-w-5 sb-h-5" }) : _jsx("div", {}) }), _jsx("p", { className: "sb-text-left sb-col-span-9", children: subtitle.label })] }) }));
|
|
8
11
|
};
|
|
9
|
-
const SubtitleMenu = ({}) => {
|
|
12
|
+
const SubtitleMenu = ({ width }) => {
|
|
10
13
|
const { player } = useSoftBuildersVideoPlayerContext();
|
|
11
14
|
const [closeMenuFunction, setCloseMenuFunction] = useState(undefined);
|
|
12
15
|
const [subtitles, setSubtitles] = useState([]);
|
|
@@ -29,7 +32,9 @@ const SubtitleMenu = ({}) => {
|
|
|
29
32
|
setSubtitles(textTracks);
|
|
30
33
|
}
|
|
31
34
|
}, [player]);
|
|
32
|
-
return (_jsx(MenuButton, { buttonContent: _jsx(SubIcon, { className: "sb-w-4 sb-h-4 sb-text-white " }), menuContent: _jsx("div", { className:
|
|
35
|
+
return (_jsx(MenuButton, { classContainer: `${width < 400 ? "!sb-top-8 -sb-left-9" : ""}`, buttonContent: _jsx(SubIcon, { className: "sb-w-4 sb-h-4 sb-text-white " }), menuContent: _jsx("div", { className: `sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 ${width > 400
|
|
36
|
+
? "sb-w-[150px] sb-py-5"
|
|
37
|
+
: "sb-w-[90px] sb-items-center sb-justify-center sb-py-1"}`, children: _jsxs("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [_jsxs("div", { className: "sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start", children: [_jsx("button", { onClick: () => {
|
|
33
38
|
if (closeMenuFunction) {
|
|
34
39
|
closeMenuFunction();
|
|
35
40
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SubtitleMenu/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAe,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAChE,OAAO,UAAU,MAAM,eAAe,CAAC;AACvC,OAAO,EAAE,iCAAiC,EAAE,MAAM,kCAAkC,CAAC;AACrF,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAOnE,MAAM,cAAc,GAAG,CAAC,EACtB,UAAU,EACV,QAAQ,EACR,OAAO,GACa,EAAE,EAAE;IACxB,OAAO,CACL,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/SubtitleMenu/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -14,7 +14,13 @@ const SubtitleOption = ({
|
|
|
14
14
|
onClick,
|
|
15
15
|
}: SubtitleOptionProps) => {
|
|
16
16
|
return (
|
|
17
|
-
<button
|
|
17
|
+
<button
|
|
18
|
+
className="hover:sb-text-orange-500 sb-p-2"
|
|
19
|
+
onClick={(e) => {
|
|
20
|
+
e.stopPropagation();
|
|
21
|
+
onClick();
|
|
22
|
+
}}
|
|
23
|
+
>
|
|
18
24
|
<div className="sb-grid sb-grid-cols-12 sb-items-center sb-gap-2">
|
|
19
25
|
<div className="sb-col-span-3">
|
|
20
26
|
{isSelected ? <CheckedIcon className="sb-w-5 sb-h-5" /> : <div></div>}
|
|
@@ -26,9 +32,11 @@ const SubtitleOption = ({
|
|
|
26
32
|
);
|
|
27
33
|
};
|
|
28
34
|
|
|
29
|
-
type SubtitleMenuProps = {
|
|
35
|
+
type SubtitleMenuProps = {
|
|
36
|
+
width: number;
|
|
37
|
+
};
|
|
30
38
|
|
|
31
|
-
const SubtitleMenu = ({}: SubtitleMenuProps) => {
|
|
39
|
+
const SubtitleMenu = ({ width }: SubtitleMenuProps) => {
|
|
32
40
|
const { player } = useSoftBuildersVideoPlayerContext();
|
|
33
41
|
|
|
34
42
|
const [closeMenuFunction, setCloseMenuFunction] = useState<
|
|
@@ -60,9 +68,16 @@ const SubtitleMenu = ({}: SubtitleMenuProps) => {
|
|
|
60
68
|
|
|
61
69
|
return (
|
|
62
70
|
<MenuButton
|
|
71
|
+
classContainer={`${width < 400 ? "!sb-top-8 -sb-left-9" : ""}`}
|
|
63
72
|
buttonContent={<SubIcon className="sb-w-4 sb-h-4 sb-text-white " />}
|
|
64
73
|
menuContent={
|
|
65
|
-
<div
|
|
74
|
+
<div
|
|
75
|
+
className={`sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 ${
|
|
76
|
+
width > 400
|
|
77
|
+
? "sb-w-[150px] sb-py-5"
|
|
78
|
+
: "sb-w-[90px] sb-items-center sb-justify-center sb-py-1"
|
|
79
|
+
}`}
|
|
80
|
+
>
|
|
66
81
|
<div className="sb-flex sb-flex-col sb-gap-3">
|
|
67
82
|
<div className="sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start">
|
|
68
83
|
<button
|