softbuilders-react-video-player 1.1.9 → 1.1.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/BigPlayButton/index.js +1 -1
- package/dist/components/BigPlayButton/index.js.map +1 -1
- package/dist/components/BigPlayButton/index.tsx +11 -9
- package/dist/components/ControlBar/index.js +2 -1
- package/dist/components/ControlBar/index.js.map +1 -1
- package/dist/components/ControlBar/index.tsx +2 -1
- package/dist/components/VideoPlayerComponent/index.js +18 -4
- package/dist/components/VideoPlayerComponent/index.js.map +1 -1
- package/dist/components/VideoPlayerComponent/index.tsx +18 -7
- package/dist/index.css +3 -0
- package/dist/index.mjs +26 -6
- package/dist/styles/tailwind.css +3 -0
- package/package.json +1 -1
|
@@ -8,7 +8,7 @@ const BigPlayButton = ({ player, isPaused, setIsPaused }) => {
|
|
|
8
8
|
player === null || player === void 0 ? void 0 : player.pause();
|
|
9
9
|
setIsPaused(!isPaused);
|
|
10
10
|
};
|
|
11
|
-
return (_jsx("
|
|
11
|
+
return (_jsx("div", { onClick: togglePlay, className: "sb-w-16 sb-h-16 sb-rounded-full sb-bg-white/30 sb-backdrop-blur-lg sb-flex sb-items-center sb-justify-center ", children: isPaused ? (_jsx(PlayIcon, { className: "sb-w-4 sb-h-4" })) : (_jsx(PauseIcon, { className: "sb-w-4 sb-h-4" })) }));
|
|
12
12
|
};
|
|
13
13
|
export default BigPlayButton;
|
|
14
14
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/BigPlayButton/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/BigPlayButton/index.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAQnD,MAAM,aAAa,GAAG,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,WAAW,EAAS,EAAE,EAAE;IACjE,MAAM,UAAU,GAAG,GAAG,EAAE;QACtB,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,OAAO,CACL,cACE,OAAO,EAAE,UAAU,EACnB,SAAS,EAAC,+GAA+G,YAExH,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,GACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import React from "react";
|
|
2
2
|
import Player from "video.js/dist/types/player";
|
|
3
3
|
import { PauseIcon, PlayIcon } from "../../images";
|
|
4
|
+
import log from "video.js/dist/types/utils/log";
|
|
4
5
|
|
|
5
6
|
type Props = {
|
|
6
7
|
player: Player | undefined;
|
|
@@ -16,15 +17,16 @@ const BigPlayButton = ({ player, isPaused, setIsPaused }: Props) => {
|
|
|
16
17
|
};
|
|
17
18
|
|
|
18
19
|
return (
|
|
19
|
-
<
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
20
|
+
<div
|
|
21
|
+
onClick={togglePlay}
|
|
22
|
+
className="sb-w-16 sb-h-16 sb-rounded-full sb-bg-white/30 sb-backdrop-blur-lg sb-flex sb-items-center sb-justify-center "
|
|
23
|
+
>
|
|
24
|
+
{isPaused ? (
|
|
25
|
+
<PlayIcon className="sb-w-4 sb-h-4" />
|
|
26
|
+
) : (
|
|
27
|
+
<PauseIcon className="sb-w-4 sb-h-4" />
|
|
28
|
+
)}
|
|
29
|
+
</div>
|
|
28
30
|
);
|
|
29
31
|
};
|
|
30
32
|
|
|
@@ -31,7 +31,8 @@ const ControlBar = ({ player, isPaused, setIsPaused, duration, notes, chapters,
|
|
|
31
31
|
});
|
|
32
32
|
// Start observing the element
|
|
33
33
|
resizeObserver.observe(container);
|
|
34
|
-
const togglePlay = () => {
|
|
34
|
+
const togglePlay = (e) => {
|
|
35
|
+
e.stopPropagation();
|
|
35
36
|
if (isPaused)
|
|
36
37
|
player === null || player === void 0 ? void 0 : player.play();
|
|
37
38
|
else
|
|
@@ -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;AAGnD,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;AAEzC,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;AAatB,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,CAAC,IAAI,CAAC,CAAC;IAEzC,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,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;IACnE,SAAS,iBAAiB,CAAC,KAAK;QAC9B,QAAQ,CAAC,KAAK,CAAC,CAAC;QAChB,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAC;IACrB,CAAC;IACD,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,cAAc,CAAC,OAAO,CAAC,SAAS,CAAC,CAAC;IAClC,MAAM,UAAU,GAAG,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/ControlBar/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -42,7 +42,7 @@ const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, han
|
|
|
42
42
|
const playerRef = useRef(undefined);
|
|
43
43
|
const [isReady, setIsReady] = useState(false);
|
|
44
44
|
const [isPaused, setIsPaused] = useState(!options.autoplay);
|
|
45
|
-
const [duration,
|
|
45
|
+
const [duration, setDuration] = useState(1);
|
|
46
46
|
const onReady = (player) => {
|
|
47
47
|
if (playerRef) {
|
|
48
48
|
playerRef.current = player;
|
|
@@ -55,7 +55,7 @@ const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, han
|
|
|
55
55
|
});
|
|
56
56
|
player.on("loadedmetadata", () => {
|
|
57
57
|
const d = player.duration() || 0;
|
|
58
|
-
|
|
58
|
+
setDuration(d);
|
|
59
59
|
});
|
|
60
60
|
}
|
|
61
61
|
};
|
|
@@ -137,8 +137,22 @@ const VideoPlayerComponent = ({ id, options, notes, chapters, startTime = 0, han
|
|
|
137
137
|
return () => clearInterval(intervalId);
|
|
138
138
|
}
|
|
139
139
|
}, []);
|
|
140
|
-
|
|
141
|
-
|
|
140
|
+
const handlePlayerClick = () => {
|
|
141
|
+
if (playerRef.current) {
|
|
142
|
+
if (playerRef.current.paused()) {
|
|
143
|
+
playerRef.current.play();
|
|
144
|
+
setIsPaused(false);
|
|
145
|
+
}
|
|
146
|
+
else {
|
|
147
|
+
playerRef.current.pause();
|
|
148
|
+
setIsPaused(true);
|
|
149
|
+
if (onPause)
|
|
150
|
+
onPause(playerRef.current.currentTime());
|
|
151
|
+
}
|
|
152
|
+
}
|
|
153
|
+
};
|
|
154
|
+
return (_jsx("div", { id: `video-container-${id}`, className: "sb-relative sb-rounded-md sb-overflow-hidden hover:sb-cursor-pointer", onClick: handlePlayerClick, children: _jsx("div", { "data-vjs-player": true, style: {
|
|
155
|
+
height: "100%",
|
|
142
156
|
position: "relative",
|
|
143
157
|
}, children: _jsx("div", { ref: videoRef }) }) }));
|
|
144
158
|
};
|
|
@@ -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;AAOvC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,2BAA2B,CAAC;AACnC,OAAO,EAAE,+BAA+B,EAAE,MAAM,YAAY,CAAC;AAC7D,OAAO,aAAa,MAAM,kBAAkB,CAAC;AAE7C,IAAI,iBAAiB,GAEjB,EAAE,CAAC;AAEP,MAAM,mBAAmB,GAAG,CAC1B,EAAU,EACV,MAA0B,EAC1B,QAAiB,EACjB,WAA0D,EAC1D,EAAE;IACF,MAAM,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;IACnE,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,OAAO,GAAQ,SAAS,CAAC,aAAa,CAAC,sBAAsB,CAAC,CAAC;QACrE,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,iBAAiB,CAAC,EAAE,CAAC,EAAE,CAAC;gBAC3B,iBAAiB,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,OAAsB,CAAC,CAAC;YACtE,CAAC;YAED,iBAAiB,CAAC,EAAE,CAAC,CAAC,MAAM,CAC1B,KAAC,aAAa,IACZ,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,GACxB,CACH,CAAC;QACJ,CAAC;IACH,CAAC;AACH,CAAC,CAAC;AAEF,IAAI,cAAc,GAEd,EAAE,CAAC;AAEP,MAAM,gBAAgB,GAAG,CACvB,EAAU,EACV,MAA0B,EAC1B,QAAiB,EACjB,WAA0D,EAC1D,QAAgB,EAChB,KAAoC,EACpC,QAA0C,EAC1C,WAAmB,CAAC,EACpB,oBAAiE,EACjE,EAAE;IACF,MAAM,SAAS,GAAG,QAAQ,CAAC,cAAc,CAAC,mBAAmB,EAAE,EAAE,CAAC,CAAC;IAEnE,IAAI,SAAS,EAAE,CAAC;QACd,MAAM,OAAO,GAAQ,SAAS,CAAC,aAAa,CAAC,kBAAkB,CAAC,CAAC;QACjE,IAAI,OAAO,EAAE,CAAC;YACZ,IAAI,CAAC,cAAc,CAAC,EAAE,CAAC,EAAE,CAAC;gBACxB,cAAc,CAAC,EAAE,CAAC,GAAG,QAAQ,CAAC,UAAU,CAAC,OAAsB,CAAC,CAAC;YACnE,CAAC;YAED,OAAO,CAAC,KAAK,CAAC,OAAO,GAAG,MAAM,CAAC;YAC/B,OAAO,CAAC,KAAK,CAAC,MAAM,GAAG,MAAM,CAAC;YAC9B,OAAO,CAAC,KAAK,CAAC,UAAU,GAAG,UAAU,CAAC;YACtC,cAAc,CAAC,EAAE,CAAC,CAAC,MAAM,CACvB,KAAC,+BAA+B,cAC9B,KAAC,UAAU,IACT,EAAE,EAAE,EAAE,EACN,MAAM,EAAE,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,QAAQ,EAClB,oBAAoB,EAAE,oBAAoB,GAC1C,GAC8B,CACnC,CAAC;QACJ,CAAC;IACH,CAAC;AACH,CAAC,CAAC;AAcF,MAAM,oBAAoB,GAAG,CAAK,EAChC,EAAE,EACF,OAAO,EACP,KAAK,EACL,QAAQ,EACR,SAAS,GAAG,CAAC,EACb,oBAAoB,EACpB,MAAM,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/VideoPlayerComponent/index.tsx"],"names":[],"mappings":"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"}
|
|
@@ -110,7 +110,6 @@ const VideoPlayerComponent = <T,>({
|
|
|
110
110
|
startTime = 0,
|
|
111
111
|
handleSaveNoteAction,
|
|
112
112
|
poster,
|
|
113
|
-
|
|
114
113
|
onPlay,
|
|
115
114
|
onPause,
|
|
116
115
|
}: Props<T>) => {
|
|
@@ -119,13 +118,12 @@ const VideoPlayerComponent = <T,>({
|
|
|
119
118
|
|
|
120
119
|
const [isReady, setIsReady] = useState(false);
|
|
121
120
|
const [isPaused, setIsPaused] = useState(!options.autoplay);
|
|
122
|
-
const [duration,
|
|
121
|
+
const [duration, setDuration] = useState(1);
|
|
123
122
|
|
|
124
123
|
const onReady = (player: Player) => {
|
|
125
124
|
if (playerRef) {
|
|
126
125
|
playerRef.current = player;
|
|
127
126
|
setIsReady(true);
|
|
128
|
-
|
|
129
127
|
player.currentTime(startTime);
|
|
130
128
|
|
|
131
129
|
player.on("waiting", () => {});
|
|
@@ -137,7 +135,7 @@ const VideoPlayerComponent = <T,>({
|
|
|
137
135
|
|
|
138
136
|
player.on("loadedmetadata", () => {
|
|
139
137
|
const d = player.duration() || 0;
|
|
140
|
-
|
|
138
|
+
setDuration(d);
|
|
141
139
|
});
|
|
142
140
|
}
|
|
143
141
|
};
|
|
@@ -147,7 +145,6 @@ const VideoPlayerComponent = <T,>({
|
|
|
147
145
|
const videoElement = document.createElement("video-js");
|
|
148
146
|
videoElement.classList.add("vjs-big-play-centered");
|
|
149
147
|
// Set the poster attribute here
|
|
150
|
-
|
|
151
148
|
if (poster) {
|
|
152
149
|
videoElement.setAttribute("poster", poster);
|
|
153
150
|
}
|
|
@@ -239,15 +236,29 @@ const VideoPlayerComponent = <T,>({
|
|
|
239
236
|
}
|
|
240
237
|
}, []);
|
|
241
238
|
|
|
239
|
+
const handlePlayerClick = () => {
|
|
240
|
+
if (playerRef.current) {
|
|
241
|
+
if (playerRef.current.paused()) {
|
|
242
|
+
playerRef.current.play();
|
|
243
|
+
setIsPaused(false);
|
|
244
|
+
} else {
|
|
245
|
+
playerRef.current.pause();
|
|
246
|
+
setIsPaused(true);
|
|
247
|
+
if (onPause) onPause(playerRef.current.currentTime());
|
|
248
|
+
}
|
|
249
|
+
}
|
|
250
|
+
};
|
|
251
|
+
|
|
242
252
|
return (
|
|
243
253
|
<div
|
|
244
254
|
id={`video-container-${id}`}
|
|
245
|
-
className="sb-relative sb-rounded-md sb-overflow-hidden"
|
|
255
|
+
className="sb-relative sb-rounded-md sb-overflow-hidden hover:sb-cursor-pointer"
|
|
256
|
+
onClick={handlePlayerClick}
|
|
246
257
|
>
|
|
247
258
|
<div
|
|
248
259
|
data-vjs-player
|
|
249
260
|
style={{
|
|
250
|
-
height: "100%",
|
|
261
|
+
height: "100%",
|
|
251
262
|
position: "relative",
|
|
252
263
|
}}
|
|
253
264
|
>
|
package/dist/index.css
CHANGED
|
@@ -729,6 +729,9 @@ video {
|
|
|
729
729
|
--tw-scale-y: 1.5;
|
|
730
730
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
731
731
|
}
|
|
732
|
+
.hover\:sb-cursor-pointer:hover {
|
|
733
|
+
cursor: pointer;
|
|
734
|
+
}
|
|
732
735
|
.hover\:sb-text-orange-500:hover {
|
|
733
736
|
--tw-text-opacity: 1;
|
|
734
737
|
color: rgb(249 115 22 / var(--tw-text-opacity));
|
package/dist/index.mjs
CHANGED
|
@@ -1133,7 +1133,8 @@ var ControlBar = ({
|
|
|
1133
1133
|
}
|
|
1134
1134
|
});
|
|
1135
1135
|
resizeObserver.observe(container);
|
|
1136
|
-
const togglePlay = () => {
|
|
1136
|
+
const togglePlay = (e) => {
|
|
1137
|
+
e.stopPropagation();
|
|
1137
1138
|
if (isPaused) player == null ? void 0 : player.play();
|
|
1138
1139
|
else player == null ? void 0 : player.pause();
|
|
1139
1140
|
setIsPaused(!isPaused);
|
|
@@ -1198,7 +1199,14 @@ var BigPlayButton = ({ player, isPaused, setIsPaused }) => {
|
|
|
1198
1199
|
else player == null ? void 0 : player.pause();
|
|
1199
1200
|
setIsPaused(!isPaused);
|
|
1200
1201
|
};
|
|
1201
|
-
return /* @__PURE__ */ jsx34(
|
|
1202
|
+
return /* @__PURE__ */ jsx34(
|
|
1203
|
+
"div",
|
|
1204
|
+
{
|
|
1205
|
+
onClick: togglePlay,
|
|
1206
|
+
className: "sb-w-16 sb-h-16 sb-rounded-full sb-bg-white/30 sb-backdrop-blur-lg sb-flex sb-items-center sb-justify-center ",
|
|
1207
|
+
children: isPaused ? /* @__PURE__ */ jsx34(PlayIcon_default, { className: "sb-w-4 sb-h-4" }) : /* @__PURE__ */ jsx34(PauseIcon_default, { className: "sb-w-4 sb-h-4" })
|
|
1208
|
+
}
|
|
1209
|
+
);
|
|
1202
1210
|
};
|
|
1203
1211
|
var BigPlayButton_default = BigPlayButton;
|
|
1204
1212
|
|
|
@@ -1272,7 +1280,7 @@ var VideoPlayerComponent = ({
|
|
|
1272
1280
|
const playerRef = useRef2(void 0);
|
|
1273
1281
|
const [isReady, setIsReady] = useState13(false);
|
|
1274
1282
|
const [isPaused, setIsPaused] = useState13(!options.autoplay);
|
|
1275
|
-
const [duration,
|
|
1283
|
+
const [duration, setDuration] = useState13(1);
|
|
1276
1284
|
const onReady = (player) => {
|
|
1277
1285
|
if (playerRef) {
|
|
1278
1286
|
playerRef.current = player;
|
|
@@ -1286,7 +1294,7 @@ var VideoPlayerComponent = ({
|
|
|
1286
1294
|
});
|
|
1287
1295
|
player.on("loadedmetadata", () => {
|
|
1288
1296
|
const d = player.duration() || 0;
|
|
1289
|
-
|
|
1297
|
+
setDuration(d);
|
|
1290
1298
|
});
|
|
1291
1299
|
}
|
|
1292
1300
|
};
|
|
@@ -1373,18 +1381,30 @@ var VideoPlayerComponent = ({
|
|
|
1373
1381
|
return () => clearInterval(intervalId);
|
|
1374
1382
|
}
|
|
1375
1383
|
}, []);
|
|
1384
|
+
const handlePlayerClick = () => {
|
|
1385
|
+
if (playerRef.current) {
|
|
1386
|
+
if (playerRef.current.paused()) {
|
|
1387
|
+
playerRef.current.play();
|
|
1388
|
+
setIsPaused(false);
|
|
1389
|
+
} else {
|
|
1390
|
+
playerRef.current.pause();
|
|
1391
|
+
setIsPaused(true);
|
|
1392
|
+
if (onPause) onPause(playerRef.current.currentTime());
|
|
1393
|
+
}
|
|
1394
|
+
}
|
|
1395
|
+
};
|
|
1376
1396
|
return /* @__PURE__ */ jsx35(
|
|
1377
1397
|
"div",
|
|
1378
1398
|
{
|
|
1379
1399
|
id: `video-container-${id}`,
|
|
1380
|
-
className: "sb-relative sb-rounded-md sb-overflow-hidden",
|
|
1400
|
+
className: "sb-relative sb-rounded-md sb-overflow-hidden hover:sb-cursor-pointer",
|
|
1401
|
+
onClick: handlePlayerClick,
|
|
1381
1402
|
children: /* @__PURE__ */ jsx35(
|
|
1382
1403
|
"div",
|
|
1383
1404
|
{
|
|
1384
1405
|
"data-vjs-player": true,
|
|
1385
1406
|
style: {
|
|
1386
1407
|
height: "100%",
|
|
1387
|
-
// Adjust height as needed
|
|
1388
1408
|
position: "relative"
|
|
1389
1409
|
},
|
|
1390
1410
|
children: /* @__PURE__ */ jsx35("div", { ref: videoRef })
|
package/dist/styles/tailwind.css
CHANGED
|
@@ -822,6 +822,9 @@ video {
|
|
|
822
822
|
--tw-scale-y: 1.5;
|
|
823
823
|
transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
|
|
824
824
|
}
|
|
825
|
+
.hover\:sb-cursor-pointer:hover {
|
|
826
|
+
cursor: pointer;
|
|
827
|
+
}
|
|
825
828
|
.hover\:sb-text-orange-500:hover {
|
|
826
829
|
--tw-text-opacity: 1;
|
|
827
830
|
color: rgb(249 115 22 / var(--tw-text-opacity));
|