softbuilders-react-video-player 1.1.70 → 1.1.72
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/ControlBar/index.js +25 -37
- package/dist/components/ControlBar/index.js.map +1 -1
- package/dist/components/ControlBar/index.tsx +75 -78
- package/dist/components/QualityMenu/index.js +12 -12
- package/dist/components/QualityMenu/index.js.map +1 -1
- package/dist/components/QualityMenu/index.tsx +19 -21
- package/dist/components/SoftBuildersVideoPlayer/index.js +1 -1
- package/dist/components/SoftBuildersVideoPlayer/index.js.map +1 -1
- package/dist/components/SoftBuildersVideoPlayer/index.tsx +17 -14
- package/dist/components/Tooltip/GlobalTooltip.d.ts +2 -0
- package/dist/components/Tooltip/GlobalTooltip.js +20 -0
- package/dist/components/Tooltip/GlobalTooltip.js.map +1 -0
- package/dist/components/Tooltip/GlobalTooltip.tsx +53 -0
- package/dist/components/Tooltip/index.d.ts +4 -3
- package/dist/components/Tooltip/index.js +5 -10
- package/dist/components/Tooltip/index.js.map +1 -1
- package/dist/components/Tooltip/index.tsx +7 -19
- package/dist/components/VideoPlayerComponent/index.js +1 -1
- package/dist/components/VideoPlayerComponent/index.js.map +1 -1
- package/dist/components/VideoPlayerComponent/index.tsx +18 -15
- package/dist/components/VolumeSlider/index.js +25 -6
- package/dist/components/VolumeSlider/index.js.map +1 -1
- package/dist/components/VolumeSlider/index.tsx +45 -17
- package/dist/index.css +18 -69
- package/dist/index.mjs +163 -103
- package/dist/styles/tailwind.css +18 -66
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
@@ -31,16 +31,16 @@ var __objRest = (source, exclude) => {
|
|
31
31
|
};
|
32
32
|
|
33
33
|
// src/components/SoftBuildersVideoPlayer/index.tsx
|
34
|
-
import { forwardRef as forwardRef2, memo, useEffect as useEffect15, useState as
|
34
|
+
import { forwardRef as forwardRef2, memo, useEffect as useEffect15, useState as useState15 } from "react";
|
35
35
|
|
36
36
|
// src/components/VideoPlayerComponent/index.tsx
|
37
|
-
import { forwardRef, useEffect as useEffect14, useRef as useRef2, useState as
|
37
|
+
import { forwardRef, useEffect as useEffect14, useRef as useRef2, useState as useState14 } from "react";
|
38
38
|
import ReactDOM from "react-dom/client";
|
39
39
|
import videojs from "video.js";
|
40
40
|
import "video.js/dist/video-js.css";
|
41
41
|
|
42
42
|
// src/components/ControlBar/index.tsx
|
43
|
-
import { useEffect as useEffect13, useState as
|
43
|
+
import { useEffect as useEffect13, useState as useState13 } from "react";
|
44
44
|
|
45
45
|
// src/utils/index.ts
|
46
46
|
var durationFormater = (seconds) => {
|
@@ -520,13 +520,21 @@ var VolumeSlider = ({
|
|
520
520
|
const [isVisible, setVisible] = useState2(false);
|
521
521
|
const [volume, setVolume] = useState2(0);
|
522
522
|
useEffect2(() => {
|
523
|
-
|
523
|
+
const updateVolumeState = () => {
|
524
|
+
const currentVolume = (player == null ? void 0 : player.muted()) ? 0 : Number(player == null ? void 0 : player.volume()) * 100;
|
525
|
+
setVolume(currentVolume);
|
526
|
+
};
|
527
|
+
updateVolumeState();
|
528
|
+
player == null ? void 0 : player.on("volumechange", updateVolumeState);
|
529
|
+
return () => {
|
530
|
+
player == null ? void 0 : player.off("volumechange", updateVolumeState);
|
531
|
+
};
|
524
532
|
}, [player]);
|
525
533
|
const timeoutRef = React2.useRef(null);
|
526
534
|
useEffect2(() => {
|
527
535
|
setVisible(false);
|
528
536
|
}, [volumeSliderToggler]);
|
529
|
-
const
|
537
|
+
const toggleVisibility = (e) => {
|
530
538
|
e.preventDefault();
|
531
539
|
e.stopPropagation();
|
532
540
|
handleControlDisplayTimer(e);
|
@@ -534,6 +542,11 @@ var VolumeSlider = ({
|
|
534
542
|
if (timeoutRef.current) {
|
535
543
|
clearTimeout(timeoutRef.current);
|
536
544
|
}
|
545
|
+
if (volume == 0 && !isVisible) {
|
546
|
+
setVolume(60);
|
547
|
+
player == null ? void 0 : player.volume(0.6);
|
548
|
+
player == null ? void 0 : player.muted(false);
|
549
|
+
}
|
537
550
|
setVisible((prev) => !prev);
|
538
551
|
timeoutRef.current = setTimeout(() => {
|
539
552
|
setVisible(false);
|
@@ -554,17 +567,17 @@ var VolumeSlider = ({
|
|
554
567
|
return /* @__PURE__ */ jsxs4(
|
555
568
|
"div",
|
556
569
|
{
|
557
|
-
className: `sb-flex ${isVisible ? "" : ""} ${width > 400 ? "sb-flex-col-reverse
|
570
|
+
className: `sb-flex ${isVisible ? "" : ""} ${width > 400 ? "sb-flex-col-reverse" : "sb-flex-col !sb-justify-start"} sb-items-center sb-gap-1 sb-h-full`,
|
558
571
|
children: [
|
559
572
|
/* @__PURE__ */ jsx19(
|
560
573
|
"div",
|
561
574
|
{
|
562
|
-
className: `sb-flex sb-relative ${width < 400 ? "-sb-top-1" : "sb-top-1"}
|
563
|
-
onClick:
|
564
|
-
children: volume
|
575
|
+
className: `sb-flex sb-relative ${width < 400 ? "-sb-top-1" : "sb-top-1"}`,
|
576
|
+
onClick: toggleVisibility,
|
577
|
+
children: volume == 0 || (player == null ? void 0 : player.muted()) ? /* @__PURE__ */ jsx19(
|
565
578
|
MuteIcon_default,
|
566
579
|
{
|
567
|
-
className: `sb-w-3 sb-h-3 ${width < 400 ? "
|
580
|
+
className: `sb-w-3 sb-h-3 ${width < 400 ? "" : ""} sb-h-5 sb-w-5`
|
568
581
|
}
|
569
582
|
) : /* @__PURE__ */ jsx19(
|
570
583
|
UnmuteIcon_default,
|
@@ -574,10 +587,10 @@ var VolumeSlider = ({
|
|
574
587
|
)
|
575
588
|
}
|
576
589
|
),
|
577
|
-
/* @__PURE__ */ jsx19("div", { className: "sb-flex
|
590
|
+
/* @__PURE__ */ jsx19("div", { className: "sb-flex sb-items-center sb-justify-center", children: /* @__PURE__ */ jsx19(
|
578
591
|
"div",
|
579
592
|
{
|
580
|
-
className: `sb-transition-all sb-ease-in-out sb-duration-500 ${isVisible ? "sb-w-[22px] sb-opacity-100 sb-visible" : "
|
593
|
+
className: `sb-transition-all sb-ease-in-out sb-duration-500 ${isVisible ? "sb-w-[22px] sb-opacity-100 sb-visible" : "sb-w-[22px] sb-opacity-0 sb-invisible"} ${width > 400 ? "-sb-rotate-90 -sb-translate-y-1" : "sb-rotate-90 sb-translate-y-1"} sb-relative`,
|
581
594
|
children: /* @__PURE__ */ jsx19(
|
582
595
|
Slider_default,
|
583
596
|
{
|
@@ -677,7 +690,7 @@ var MenuButton = ({
|
|
677
690
|
var MenuButton_default = MenuButton;
|
678
691
|
|
679
692
|
// src/components/QualityMenu/index.tsx
|
680
|
-
import {
|
693
|
+
import { jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
|
681
694
|
var QualityOption = ({
|
682
695
|
isSelected,
|
683
696
|
quality,
|
@@ -760,8 +773,8 @@ var QualityMenu = ({ width, onClick }) => {
|
|
760
773
|
}
|
761
774
|
),
|
762
775
|
/* @__PURE__ */ jsx21("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
|
763
|
-
/* @__PURE__ */ jsx21("div", { className: "sb-px-5 sb-flex sb-flex-col sb-gap-3 sb-items-start ", children: qualities.map((q, i) => {
|
764
|
-
return /* @__PURE__ */ jsx21(
|
776
|
+
/* @__PURE__ */ jsx21("div", { className: "sb-px-5 sb-flex sb-flex-col sb-gap-3 sb-items-start ", children: qualities == null ? void 0 : qualities.map((q, i) => {
|
777
|
+
return /* @__PURE__ */ jsx21(
|
765
778
|
QualityOption,
|
766
779
|
{
|
767
780
|
width,
|
@@ -781,7 +794,7 @@ var QualityMenu = ({ width, onClick }) => {
|
|
781
794
|
}
|
782
795
|
},
|
783
796
|
`quality-${q.label}-${i}`
|
784
|
-
)
|
797
|
+
);
|
785
798
|
}) })
|
786
799
|
] })
|
787
800
|
}
|
@@ -875,23 +888,12 @@ import { useEffect as useEffect5, useState as useState6 } from "react";
|
|
875
888
|
|
876
889
|
// src/components/Tooltip/index.tsx
|
877
890
|
import { jsx as jsx23 } from "react/jsx-runtime";
|
878
|
-
var Tooltip = ({
|
879
|
-
open,
|
880
|
-
children,
|
881
|
-
position = "top"
|
882
|
-
}) => {
|
891
|
+
var Tooltip = ({ open, children }) => {
|
883
892
|
if (!open) return null;
|
884
|
-
console.log("tool tip");
|
885
|
-
const positionClasses = {
|
886
|
-
top: "sb-bottom-full sb-left-1/2 sb-transform -sb-translate-x-1/2 sb-mb-2",
|
887
|
-
bottom: "sb-top-full sb-left-1/2 sb-transform -sb-translate-x-1/2 sb-mt-2",
|
888
|
-
left: "sb-right-full sb-top-1/2 sb-transform -sb-translate-y-1/2 sb-mr-2",
|
889
|
-
right: "sb-left-full sb-top-1/2 sb-transform -sb-translate-y-1/2 sb-ml-2"
|
890
|
-
};
|
891
893
|
return /* @__PURE__ */ jsx23(
|
892
894
|
"div",
|
893
895
|
{
|
894
|
-
className:
|
896
|
+
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",
|
895
897
|
children
|
896
898
|
}
|
897
899
|
);
|
@@ -1130,7 +1132,7 @@ var TimeSliderContainer_default = TimeSliderContainer;
|
|
1130
1132
|
|
1131
1133
|
// src/components/BufferTracker/index.tsx
|
1132
1134
|
import { useEffect as useEffect10 } from "react";
|
1133
|
-
import { Fragment
|
1135
|
+
import { Fragment, jsx as jsx30 } from "react/jsx-runtime";
|
1134
1136
|
var BufferTracker = () => {
|
1135
1137
|
const { player, setDownloadedBufferTimeufferTime } = useSoftBuildersVideoPlayerContext();
|
1136
1138
|
useEffect10(() => {
|
@@ -1139,13 +1141,13 @@ var BufferTracker = () => {
|
|
1139
1141
|
}, 1e3);
|
1140
1142
|
return () => clearInterval(intervalId);
|
1141
1143
|
}, [player]);
|
1142
|
-
return /* @__PURE__ */ jsx30(
|
1144
|
+
return /* @__PURE__ */ jsx30(Fragment, {});
|
1143
1145
|
};
|
1144
1146
|
var BufferTracker_default = BufferTracker;
|
1145
1147
|
|
1146
1148
|
// src/components/CurrentTimeTracker/index.tsx
|
1147
1149
|
import { useEffect as useEffect11 } from "react";
|
1148
|
-
import { Fragment as
|
1150
|
+
import { Fragment as Fragment2, jsx as jsx31 } from "react/jsx-runtime";
|
1149
1151
|
var CurrentTimeTracker = () => {
|
1150
1152
|
const { setCurrentTime, player } = useSoftBuildersVideoPlayerContext();
|
1151
1153
|
useEffect11(() => {
|
@@ -1154,7 +1156,7 @@ var CurrentTimeTracker = () => {
|
|
1154
1156
|
}, 500);
|
1155
1157
|
return () => clearInterval(intervalId);
|
1156
1158
|
}, [player]);
|
1157
|
-
return /* @__PURE__ */ jsx31(
|
1159
|
+
return /* @__PURE__ */ jsx31(Fragment2, {});
|
1158
1160
|
};
|
1159
1161
|
var CurrentTimeTracker_default = CurrentTimeTracker;
|
1160
1162
|
|
@@ -1263,8 +1265,59 @@ var SubtitleMenu = ({
|
|
1263
1265
|
};
|
1264
1266
|
var SubtitleMenu_default = SubtitleMenu;
|
1265
1267
|
|
1266
|
-
// src/components/
|
1268
|
+
// src/components/Tooltip/GlobalTooltip.tsx
|
1269
|
+
import { useState as useState12 } from "react";
|
1267
1270
|
import { jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
|
1271
|
+
var TooltipModal = ({
|
1272
|
+
content,
|
1273
|
+
children,
|
1274
|
+
isLeft = false,
|
1275
|
+
width = 0
|
1276
|
+
}) => {
|
1277
|
+
const [isOpen, setIsOpen] = useState12(false);
|
1278
|
+
const showTooltip = () => setIsOpen(true);
|
1279
|
+
const hideTooltip = () => setIsOpen(false);
|
1280
|
+
return /* @__PURE__ */ jsxs13(
|
1281
|
+
"div",
|
1282
|
+
{
|
1283
|
+
className: "tooltip-container",
|
1284
|
+
style: { position: "relative", display: "inline-block" },
|
1285
|
+
children: [
|
1286
|
+
/* @__PURE__ */ jsx33(
|
1287
|
+
"div",
|
1288
|
+
{
|
1289
|
+
onMouseEnter: showTooltip,
|
1290
|
+
onMouseLeave: hideTooltip,
|
1291
|
+
style: { cursor: "pointer" },
|
1292
|
+
children
|
1293
|
+
}
|
1294
|
+
),
|
1295
|
+
isOpen && /* @__PURE__ */ jsx33(
|
1296
|
+
"div",
|
1297
|
+
{
|
1298
|
+
className: `sb-tooltip-modal sb-text-orange-900 sb-my-2 ${width > 400 ? "!sb-bottom-[105%]" : "!sb-top-[105%]"}`,
|
1299
|
+
style: {
|
1300
|
+
position: "absolute",
|
1301
|
+
left: !isLeft ? "-100%" : "100%",
|
1302
|
+
transform: !isLeft ? "translateX(-50%)" : "translateX(0%)",
|
1303
|
+
backgroundColor: "white",
|
1304
|
+
padding: "8px",
|
1305
|
+
borderRadius: "4px",
|
1306
|
+
whiteSpace: "nowrap",
|
1307
|
+
boxShadow: "0px 0px 5px grey",
|
1308
|
+
zIndex: 1e3
|
1309
|
+
},
|
1310
|
+
children: content
|
1311
|
+
}
|
1312
|
+
)
|
1313
|
+
]
|
1314
|
+
}
|
1315
|
+
);
|
1316
|
+
};
|
1317
|
+
var GlobalTooltip_default = TooltipModal;
|
1318
|
+
|
1319
|
+
// src/components/ControlBar/index.tsx
|
1320
|
+
import { jsx as jsx34, jsxs as jsxs14 } from "react/jsx-runtime";
|
1268
1321
|
var ControlBar = ({
|
1269
1322
|
player,
|
1270
1323
|
isPaused,
|
@@ -1283,24 +1336,14 @@ var ControlBar = ({
|
|
1283
1336
|
noteButtonClick
|
1284
1337
|
}) => {
|
1285
1338
|
const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
|
1286
|
-
const [width, setWidth] =
|
1287
|
-
const [isSeeking, setIsSeeking] =
|
1339
|
+
const [width, setWidth] = useState13(0);
|
1340
|
+
const [isSeeking, setIsSeeking] = useState13(true);
|
1288
1341
|
const seek = (duration2) => {
|
1289
1342
|
const currentTime = Number((player == null ? void 0 : player.currentTime()) || 0);
|
1290
1343
|
player == null ? void 0 : player.currentTime(currentTime + duration2);
|
1291
1344
|
};
|
1292
|
-
const [volumeSliderToggler, setVolumeToggler] =
|
1345
|
+
const [volumeSliderToggler, setVolumeToggler] = useState13(false);
|
1293
1346
|
const container = document.getElementById(`video-container-${id}`);
|
1294
|
-
const [isToolTip, setIsToolTip] = useState12({
|
1295
|
-
sub: false,
|
1296
|
-
seekForward: false,
|
1297
|
-
seekBackward: false,
|
1298
|
-
play: false,
|
1299
|
-
pause: false,
|
1300
|
-
volume: false,
|
1301
|
-
quality: false,
|
1302
|
-
fullScreen: false
|
1303
|
-
});
|
1304
1347
|
function handleWidthChange(width2) {
|
1305
1348
|
setWidth(width2);
|
1306
1349
|
}
|
@@ -1324,40 +1367,64 @@ var ControlBar = ({
|
|
1324
1367
|
useEffect13(() => {
|
1325
1368
|
setDuration(duration);
|
1326
1369
|
}, [duration]);
|
1327
|
-
return /* @__PURE__ */
|
1370
|
+
return /* @__PURE__ */ jsxs14(
|
1328
1371
|
"div",
|
1329
1372
|
{
|
1330
1373
|
className: ` !sb-px-4 sb-flex sb-pt-2 sb-justify-center sb-gap-3 sb-w-full sb-h-full ${width > 400 ? "sb-absolute sb-bottom-1 sb-items-end sb-mb-1 sb-pb-2 " : "sb-items-start"} sb-pb-2`,
|
1331
1374
|
children: [
|
1332
|
-
/* @__PURE__ */
|
1333
|
-
/* @__PURE__ */
|
1334
|
-
/* @__PURE__ */
|
1375
|
+
/* @__PURE__ */ jsx34(BufferTracker_default, {}),
|
1376
|
+
/* @__PURE__ */ jsx34(CurrentTimeTracker_default, {}),
|
1377
|
+
/* @__PURE__ */ jsx34(
|
1335
1378
|
"button",
|
1336
1379
|
{
|
1337
1380
|
onClick: () => {
|
1338
1381
|
seek(-seekStep);
|
1339
1382
|
},
|
1340
|
-
children: /* @__PURE__ */
|
1383
|
+
children: /* @__PURE__ */ jsx34(
|
1384
|
+
GlobalTooltip_default,
|
1385
|
+
{
|
1386
|
+
width,
|
1387
|
+
content: /* @__PURE__ */ jsx34("p", { children: "Backward 5 sec" }),
|
1388
|
+
isLeft: true,
|
1389
|
+
children: /* @__PURE__ */ jsx34(BackwardIcon_default, { className: "sb-w-3 sb-h-3" })
|
1390
|
+
}
|
1391
|
+
)
|
1341
1392
|
}
|
1342
1393
|
),
|
1343
|
-
/* @__PURE__ */
|
1344
|
-
|
1394
|
+
/* @__PURE__ */ jsx34("button", { onClick: togglePlay, children: /* @__PURE__ */ jsx34(
|
1395
|
+
GlobalTooltip_default,
|
1396
|
+
{
|
1397
|
+
width,
|
1398
|
+
content: /* @__PURE__ */ jsx34("p", { children: isPaused ? "Play" : "pause" }),
|
1399
|
+
isLeft: true,
|
1400
|
+
children: isPaused ? /* @__PURE__ */ jsx34(PlayIcon_default, { className: "sb-w-3 sb-h-3" }) : /* @__PURE__ */ jsx34(PauseIcon_default, { className: "sb-w-3 sb-h-3" })
|
1401
|
+
}
|
1402
|
+
) }),
|
1403
|
+
/* @__PURE__ */ jsx34(
|
1345
1404
|
"button",
|
1346
1405
|
{
|
1347
1406
|
onClick: (e) => {
|
1348
1407
|
e.preventDefault();
|
1349
1408
|
seek(seekStep);
|
1350
1409
|
},
|
1351
|
-
children: /* @__PURE__ */
|
1410
|
+
children: /* @__PURE__ */ jsx34(
|
1411
|
+
GlobalTooltip_default,
|
1412
|
+
{
|
1413
|
+
width,
|
1414
|
+
content: /* @__PURE__ */ jsx34("p", { children: "Forward 5 sec" }),
|
1415
|
+
isLeft: true,
|
1416
|
+
children: /* @__PURE__ */ jsx34(ForwardIcon_default, { className: "sb-w-3 sb-h-3" })
|
1417
|
+
}
|
1418
|
+
)
|
1352
1419
|
}
|
1353
1420
|
),
|
1354
1421
|
// isSeeking ||
|
1355
1422
|
// width > 400 &&
|
1356
|
-
/* @__PURE__ */
|
1423
|
+
/* @__PURE__ */ jsx34(
|
1357
1424
|
"div",
|
1358
1425
|
{
|
1359
1426
|
className: `${width < 400 ? "sb-flex-1 sb-ml-0 sb-mr-0" : "sb-w-full"}`,
|
1360
|
-
children: /* @__PURE__ */
|
1427
|
+
children: /* @__PURE__ */ jsxs14(
|
1361
1428
|
"div",
|
1362
1429
|
{
|
1363
1430
|
style: width < 400 ? {
|
@@ -1367,15 +1434,15 @@ var ControlBar = ({
|
|
1367
1434
|
} : { width: "98%" },
|
1368
1435
|
className: `flex gap-2 ${width < 400 ? "absolute sb-top-1" : "-sb-translate-y-0 sb-w-full"} hover:sb-w-[45%] `,
|
1369
1436
|
children: [
|
1370
|
-
/* @__PURE__ */
|
1371
|
-
/* @__PURE__ */
|
1372
|
-
/* @__PURE__ */
|
1437
|
+
/* @__PURE__ */ jsx34(CurrentTimeLabel_default, {}),
|
1438
|
+
/* @__PURE__ */ jsx34(TimeSliderContainer_default, { chapters, notes }),
|
1439
|
+
/* @__PURE__ */ jsx34("p", { children: durationFormater(duration) })
|
1373
1440
|
]
|
1374
1441
|
}
|
1375
1442
|
)
|
1376
1443
|
}
|
1377
1444
|
),
|
1378
|
-
/* @__PURE__ */
|
1445
|
+
/* @__PURE__ */ jsx34("div", { className: "sb-h-full", children: /* @__PURE__ */ jsx34(
|
1379
1446
|
VolumeSlider_default,
|
1380
1447
|
{
|
1381
1448
|
volumeSliderToggler,
|
@@ -1384,7 +1451,7 @@ var ControlBar = ({
|
|
1384
1451
|
handleControlDisplayTimer
|
1385
1452
|
}
|
1386
1453
|
) }),
|
1387
|
-
/* @__PURE__ */
|
1454
|
+
/* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Quality" }), children: /* @__PURE__ */ jsx34(
|
1388
1455
|
QualityMenu_default,
|
1389
1456
|
{
|
1390
1457
|
width,
|
@@ -1393,12 +1460,10 @@ var ControlBar = ({
|
|
1393
1460
|
setIsQualityMenuOpen && setIsQualityMenuOpen(isOpen);
|
1394
1461
|
}
|
1395
1462
|
}
|
1396
|
-
),
|
1397
|
-
disableNote && /* @__PURE__ */
|
1463
|
+
) }),
|
1464
|
+
disableNote && /* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Create note" }), children: /* @__PURE__ */ jsx34(
|
1398
1465
|
CreateNoteMenu_default,
|
1399
1466
|
{
|
1400
|
-
onMouseEnter: () => setIsToolTip((prev) => __spreadProps(__spreadValues({}, prev), { note: true })),
|
1401
|
-
onMouseLeave: () => setIsToolTip((prev) => __spreadProps(__spreadValues({}, prev), { note: false })),
|
1402
1467
|
handleSaveNoteAction,
|
1403
1468
|
width,
|
1404
1469
|
setNoteOpen,
|
@@ -1409,23 +1474,18 @@ var ControlBar = ({
|
|
1409
1474
|
});
|
1410
1475
|
}
|
1411
1476
|
}
|
1412
|
-
),
|
1413
|
-
/* @__PURE__ */
|
1477
|
+
) }),
|
1478
|
+
/* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Subtitle" }), children: /* @__PURE__ */ jsx34(
|
1414
1479
|
SubtitleMenu_default,
|
1415
1480
|
{
|
1416
|
-
onMouseEnter: () => {
|
1417
|
-
console.log("get well");
|
1418
|
-
setIsToolTip((prev) => __spreadProps(__spreadValues({}, prev), { sub: true }));
|
1419
|
-
},
|
1420
|
-
onMouseLeave: () => setIsToolTip((prev) => __spreadProps(__spreadValues({}, prev), { sub: false })),
|
1421
1481
|
width,
|
1422
1482
|
onClick: (e, isOpen) => {
|
1423
1483
|
setVolumeToggler(!volumeSliderToggler);
|
1424
1484
|
setIsSubtitleMenuOpen && setIsSubtitleMenuOpen(isOpen);
|
1425
1485
|
}
|
1426
1486
|
}
|
1427
|
-
),
|
1428
|
-
/* @__PURE__ */
|
1487
|
+
) }),
|
1488
|
+
/* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Full screen" }), children: /* @__PURE__ */ jsx34(
|
1429
1489
|
"button",
|
1430
1490
|
{
|
1431
1491
|
onClick: (e) => {
|
@@ -1437,9 +1497,9 @@ var ControlBar = ({
|
|
1437
1497
|
player == null ? void 0 : player.requestFullscreen();
|
1438
1498
|
}
|
1439
1499
|
},
|
1440
|
-
children: /* @__PURE__ */
|
1500
|
+
children: /* @__PURE__ */ jsx34(FullScreenIcon_default, { className: "sb-w-3 sb-h-3" })
|
1441
1501
|
}
|
1442
|
-
)
|
1502
|
+
) })
|
1443
1503
|
]
|
1444
1504
|
}
|
1445
1505
|
);
|
@@ -1447,26 +1507,26 @@ var ControlBar = ({
|
|
1447
1507
|
var ControlBar_default = ControlBar;
|
1448
1508
|
|
1449
1509
|
// src/components/BigPlayButton/index.tsx
|
1450
|
-
import { jsx as
|
1510
|
+
import { jsx as jsx35 } from "react/jsx-runtime";
|
1451
1511
|
var BigPlayButton = ({ player, isPaused, setIsPaused }) => {
|
1452
1512
|
const togglePlay = () => {
|
1453
1513
|
if (isPaused) player == null ? void 0 : player.play();
|
1454
1514
|
else player == null ? void 0 : player.pause();
|
1455
1515
|
setIsPaused(!isPaused);
|
1456
1516
|
};
|
1457
|
-
return /* @__PURE__ */
|
1517
|
+
return /* @__PURE__ */ jsx35(
|
1458
1518
|
"div",
|
1459
1519
|
{
|
1460
1520
|
onClick: togglePlay,
|
1461
1521
|
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 ",
|
1462
|
-
children: isPaused ? /* @__PURE__ */
|
1522
|
+
children: isPaused ? /* @__PURE__ */ jsx35(PlayIcon_default, { className: "sb-w-4 sb-h-4" }) : /* @__PURE__ */ jsx35(PauseIcon_default, { className: "sb-w-4 sb-h-4" })
|
1463
1523
|
}
|
1464
1524
|
);
|
1465
1525
|
};
|
1466
1526
|
var BigPlayButton_default = BigPlayButton;
|
1467
1527
|
|
1468
1528
|
// src/components/VideoPlayerComponent/index.tsx
|
1469
|
-
import { jsx as
|
1529
|
+
import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
|
1470
1530
|
var bigPlayButtonRoot = {};
|
1471
1531
|
var renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100") => {
|
1472
1532
|
const container = document.getElementById(`video-container-${id}`);
|
@@ -1479,7 +1539,7 @@ var renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100") =
|
|
1479
1539
|
bigPlayButtonRoot[id] = ReactDOM.createRoot(element);
|
1480
1540
|
}
|
1481
1541
|
bigPlayButtonRoot[id].render(
|
1482
|
-
/* @__PURE__ */
|
1542
|
+
/* @__PURE__ */ jsx36(
|
1483
1543
|
BigPlayButton_default,
|
1484
1544
|
{
|
1485
1545
|
player,
|
@@ -1509,7 +1569,7 @@ var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chap
|
|
1509
1569
|
element.style.height = "100%";
|
1510
1570
|
element.style.alignItems = "flex-end";
|
1511
1571
|
controlBarRoot[id].render(
|
1512
|
-
/* @__PURE__ */
|
1572
|
+
/* @__PURE__ */ jsx36(SoftBuildersVideoPlayerProvider, { children: /* @__PURE__ */ jsx36(
|
1513
1573
|
ControlBar_default,
|
1514
1574
|
{
|
1515
1575
|
id,
|
@@ -1548,20 +1608,20 @@ var VideoPlayerComponent = forwardRef(
|
|
1548
1608
|
childRef,
|
1549
1609
|
bottomRedBar = true,
|
1550
1610
|
noteButtonClick
|
1551
|
-
}) => {
|
1611
|
+
}, ref) => {
|
1552
1612
|
var _a;
|
1553
1613
|
const videoRef = useRef2(void 0);
|
1554
1614
|
const playerRef = useRef2(void 0);
|
1555
|
-
const [isReady, setIsReady] =
|
1556
|
-
const [isPaused, setIsPaused] =
|
1557
|
-
const [duration, setDuration] =
|
1558
|
-
const [opacity, setOpacity] =
|
1559
|
-
const [isControlBarPresent, setIsControlBarPresent] =
|
1560
|
-
const [bgColor, setBgColor] =
|
1561
|
-
const [isQualityMenuOpen, setIsQualityMenuOpen] =
|
1562
|
-
const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] =
|
1563
|
-
const [isHovered, setIsHovered] =
|
1564
|
-
const [isNoteOpen, setNoteOpen] =
|
1615
|
+
const [isReady, setIsReady] = useState14(false);
|
1616
|
+
const [isPaused, setIsPaused] = useState14(!options.autoplay);
|
1617
|
+
const [duration, setDuration] = useState14(1);
|
1618
|
+
const [opacity, setOpacity] = useState14("0");
|
1619
|
+
const [isControlBarPresent, setIsControlBarPresent] = useState14(true);
|
1620
|
+
const [bgColor, setBgColor] = useState14("transparent");
|
1621
|
+
const [isQualityMenuOpen, setIsQualityMenuOpen] = useState14(false);
|
1622
|
+
const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState14(false);
|
1623
|
+
const [isHovered, setIsHovered] = useState14(false);
|
1624
|
+
const [isNoteOpen, setNoteOpen] = useState14(false);
|
1565
1625
|
const onReady = (player) => {
|
1566
1626
|
if (playerRef) {
|
1567
1627
|
playerRef.current = player;
|
@@ -1795,7 +1855,7 @@ var VideoPlayerComponent = forwardRef(
|
|
1795
1855
|
}
|
1796
1856
|
};
|
1797
1857
|
}, []);
|
1798
|
-
const [timeSeeker, setTimeSeeker] =
|
1858
|
+
const [timeSeeker, setTimeSeeker] = useState14("0");
|
1799
1859
|
useEffect14(() => {
|
1800
1860
|
const updateTimeSeeker = () => {
|
1801
1861
|
var _a2, _b, _c, _d;
|
@@ -1812,7 +1872,7 @@ var VideoPlayerComponent = forwardRef(
|
|
1812
1872
|
};
|
1813
1873
|
updateTimeSeeker();
|
1814
1874
|
}, [(_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.currentTime()]);
|
1815
|
-
return /* @__PURE__ */
|
1875
|
+
return /* @__PURE__ */ jsxs15(
|
1816
1876
|
"div",
|
1817
1877
|
{
|
1818
1878
|
ref: videoRefs,
|
@@ -1824,7 +1884,7 @@ var VideoPlayerComponent = forwardRef(
|
|
1824
1884
|
onMouseEnter: () => setIsHovered(true),
|
1825
1885
|
onMouseLeave: () => setIsHovered(false),
|
1826
1886
|
children: [
|
1827
|
-
bottomRedBar && /* @__PURE__ */
|
1887
|
+
bottomRedBar && /* @__PURE__ */ jsx36(
|
1828
1888
|
"div",
|
1829
1889
|
{
|
1830
1890
|
ref: childRef,
|
@@ -1835,12 +1895,12 @@ var VideoPlayerComponent = forwardRef(
|
|
1835
1895
|
}
|
1836
1896
|
}
|
1837
1897
|
),
|
1838
|
-
/* @__PURE__ */
|
1898
|
+
/* @__PURE__ */ jsx36(
|
1839
1899
|
"div",
|
1840
1900
|
{
|
1841
1901
|
className: "hover:sb-cursor-pointer sb-w-full sb-h-full",
|
1842
1902
|
"data-vjs-player": true,
|
1843
|
-
children: /* @__PURE__ */
|
1903
|
+
children: /* @__PURE__ */ jsx36(
|
1844
1904
|
"div",
|
1845
1905
|
{
|
1846
1906
|
onClick: handlePlayerClick,
|
@@ -1858,7 +1918,7 @@ var VideoPlayerComponent = forwardRef(
|
|
1858
1918
|
var VideoPlayerComponent_default = VideoPlayerComponent;
|
1859
1919
|
|
1860
1920
|
// src/components/SoftBuildersVideoPlayer/index.tsx
|
1861
|
-
import { jsx as
|
1921
|
+
import { jsx as jsx37 } from "react/jsx-runtime";
|
1862
1922
|
var DEFAULT_OPTIONS = {
|
1863
1923
|
autoplay: false,
|
1864
1924
|
controls: true,
|
@@ -1883,7 +1943,7 @@ var Component = forwardRef2(
|
|
1883
1943
|
childRef,
|
1884
1944
|
bottomRedBar,
|
1885
1945
|
noteButtonClick
|
1886
|
-
}) => {
|
1946
|
+
}, ref) => {
|
1887
1947
|
options = __spreadProps(__spreadValues({}, options), {
|
1888
1948
|
responsive: true,
|
1889
1949
|
inactivityTimeout: 0,
|
@@ -1899,7 +1959,7 @@ var Component = forwardRef2(
|
|
1899
1959
|
if ((options == null ? void 0 : options.muted) === void 0) options.muted = DEFAULT_OPTIONS == null ? void 0 : DEFAULT_OPTIONS.muted;
|
1900
1960
|
if (options.height === void 0) options.height = DEFAULT_OPTIONS.height;
|
1901
1961
|
if (options.width === void 0) options.width = DEFAULT_OPTIONS.width;
|
1902
|
-
const [tracks, setTracks] =
|
1962
|
+
const [tracks, setTracks] = useState15([]);
|
1903
1963
|
useEffect15(() => {
|
1904
1964
|
}, [isFocused]);
|
1905
1965
|
useEffect15(() => {
|
@@ -1920,7 +1980,7 @@ var Component = forwardRef2(
|
|
1920
1980
|
getTracks();
|
1921
1981
|
}, [options == null ? void 0 : options.tracks]);
|
1922
1982
|
const id = (Date.now() + Math.random() * 100).toString();
|
1923
|
-
return /* @__PURE__ */
|
1983
|
+
return /* @__PURE__ */ jsx37(
|
1924
1984
|
VideoPlayerComponent_default,
|
1925
1985
|
{
|
1926
1986
|
id,
|