softbuilders-react-video-player 1.1.69 → 1.1.71
Sign up to get free protection for your applications and to get access to all the features.
- package/dist/components/ControlBar/index.js +23 -34
- package/dist/components/ControlBar/index.js.map +1 -1
- package/dist/components/ControlBar/index.tsx +70 -68
- package/dist/components/CreateNoteMenu/index.d.ts +3 -1
- package/dist/components/CreateNoteMenu/index.js +2 -2
- package/dist/components/CreateNoteMenu/index.js.map +1 -1
- package/dist/components/CreateNoteMenu/index.tsx +6 -0
- package/dist/components/MenuButton/index.d.ts +3 -1
- package/dist/components/MenuButton/index.js +2 -2
- package/dist/components/MenuButton/index.js.map +1 -1
- package/dist/components/MenuButton/index.tsx +9 -1
- package/dist/components/QualityMenu/index.js +1 -1
- package/dist/components/QualityMenu/index.js.map +1 -1
- package/dist/components/QualityMenu/index.tsx +1 -1
- 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/SubtitleMenu/index.d.ts +3 -1
- package/dist/components/SubtitleMenu/index.js +2 -2
- package/dist/components/SubtitleMenu/index.js.map +1 -1
- package/dist/components/SubtitleMenu/index.tsx +10 -1
- 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/VideoPlayerComponent/index.js +2 -1
- package/dist/components/VideoPlayerComponent/index.js.map +1 -1
- package/dist/components/VideoPlayerComponent/index.tsx +19 -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 +14 -17
- package/dist/index.mjs +206 -108
- package/dist/styles/tailwind.css +14 -17
- 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
|
{
|
@@ -610,7 +623,9 @@ var MenuButton = ({
|
|
610
623
|
onClick,
|
611
624
|
setNoteOpen,
|
612
625
|
noteButtonClick,
|
613
|
-
disablePopUp = false
|
626
|
+
disablePopUp = false,
|
627
|
+
onMouseEnter,
|
628
|
+
onMouseLeave
|
614
629
|
}) => {
|
615
630
|
const [isOpen, setIsOpen] = useState3(false);
|
616
631
|
const buttonRef = useRef(null);
|
@@ -634,35 +649,43 @@ var MenuButton = ({
|
|
634
649
|
useEffect3(() => {
|
635
650
|
setNoteOpen && setNoteOpen(isOpen);
|
636
651
|
}, [isOpen]);
|
637
|
-
return /* @__PURE__ */ jsxs5(
|
638
|
-
|
639
|
-
|
640
|
-
|
641
|
-
|
642
|
-
|
643
|
-
|
644
|
-
|
645
|
-
|
646
|
-
|
647
|
-
|
648
|
-
|
649
|
-
|
650
|
-
|
651
|
-
|
652
|
-
|
653
|
-
|
654
|
-
|
655
|
-
|
656
|
-
|
657
|
-
|
658
|
-
|
659
|
-
|
660
|
-
|
661
|
-
|
662
|
-
|
663
|
-
|
664
|
-
|
665
|
-
|
652
|
+
return /* @__PURE__ */ jsxs5(
|
653
|
+
"div",
|
654
|
+
{
|
655
|
+
onMouseEnter,
|
656
|
+
onMouseLeave,
|
657
|
+
className: "sb-relative sb-flex sb-items-end",
|
658
|
+
children: [
|
659
|
+
/* @__PURE__ */ jsx20(
|
660
|
+
"button",
|
661
|
+
{
|
662
|
+
ref: buttonRef,
|
663
|
+
onClick: (e) => {
|
664
|
+
isOpen && e.stopPropagation();
|
665
|
+
toggleMenu();
|
666
|
+
onClick && onClick(e, !isOpen);
|
667
|
+
noteButtonClick && noteButtonClick(!isOpen);
|
668
|
+
},
|
669
|
+
"aria-haspopup": "true",
|
670
|
+
"aria-expanded": isOpen,
|
671
|
+
"aria-label": "Open menu",
|
672
|
+
children: buttonContent
|
673
|
+
}
|
674
|
+
),
|
675
|
+
!disablePopUp && isOpen && /* @__PURE__ */ jsx20(
|
676
|
+
"div",
|
677
|
+
{
|
678
|
+
ref: menuRef,
|
679
|
+
role: "menu",
|
680
|
+
"aria-orientation": "vertical",
|
681
|
+
"aria-labelledby": "Open menu",
|
682
|
+
className: `sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10 ${classContainer}`,
|
683
|
+
children: menuContent
|
684
|
+
}
|
685
|
+
)
|
686
|
+
]
|
687
|
+
}
|
688
|
+
);
|
666
689
|
};
|
667
690
|
var MenuButton_default = MenuButton;
|
668
691
|
|
@@ -750,7 +773,7 @@ var QualityMenu = ({ width, onClick }) => {
|
|
750
773
|
}
|
751
774
|
),
|
752
775
|
/* @__PURE__ */ jsx21("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
|
753
|
-
/* @__PURE__ */ jsx21("div", { className: "sb-px-5 sb-flex sb-flex-col sb-gap-3 sb-items-start ", children: qualities.map((q, i) => {
|
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) => {
|
754
777
|
return /* @__PURE__ */ jsx21(Fragment, { children: /* @__PURE__ */ jsx21(
|
755
778
|
QualityOption,
|
756
779
|
{
|
@@ -791,7 +814,9 @@ var CreateNoteMenu = ({
|
|
791
814
|
handleSaveNoteAction,
|
792
815
|
width,
|
793
816
|
setNoteOpen,
|
794
|
-
noteButtonClick
|
817
|
+
noteButtonClick,
|
818
|
+
onMouseEnter,
|
819
|
+
onMouseLeave
|
795
820
|
}) => {
|
796
821
|
const { player } = useSoftBuildersVideoPlayerContext();
|
797
822
|
const [note, setNote] = useState5("");
|
@@ -810,6 +835,8 @@ var CreateNoteMenu = ({
|
|
810
835
|
return /* @__PURE__ */ jsx22(
|
811
836
|
MenuButton_default,
|
812
837
|
{
|
838
|
+
onMouseEnter,
|
839
|
+
onMouseLeave,
|
813
840
|
disablePopUp: true,
|
814
841
|
noteButtonClick,
|
815
842
|
setNoteOpen,
|
@@ -1156,7 +1183,12 @@ var SubtitleOption = ({
|
|
1156
1183
|
}
|
1157
1184
|
);
|
1158
1185
|
};
|
1159
|
-
var SubtitleMenu = ({
|
1186
|
+
var SubtitleMenu = ({
|
1187
|
+
width,
|
1188
|
+
onClick,
|
1189
|
+
onMouseEnter,
|
1190
|
+
onMouseLeave
|
1191
|
+
}) => {
|
1160
1192
|
const { player } = useSoftBuildersVideoPlayerContext();
|
1161
1193
|
const [closeMenuFunction, setCloseMenuFunction] = useState11(void 0);
|
1162
1194
|
const [subtitles, setSubtitles] = useState11([]);
|
@@ -1181,6 +1213,8 @@ var SubtitleMenu = ({ width, onClick }) => {
|
|
1181
1213
|
return /* @__PURE__ */ jsx32(
|
1182
1214
|
MenuButton_default,
|
1183
1215
|
{
|
1216
|
+
onMouseEnter,
|
1217
|
+
onMouseLeave,
|
1184
1218
|
onClick: (e, isOpen) => {
|
1185
1219
|
onClick && onClick(e, isOpen);
|
1186
1220
|
},
|
@@ -1231,8 +1265,59 @@ var SubtitleMenu = ({ width, onClick }) => {
|
|
1231
1265
|
};
|
1232
1266
|
var SubtitleMenu_default = SubtitleMenu;
|
1233
1267
|
|
1234
|
-
// src/components/
|
1268
|
+
// src/components/Tooltip/GlobalTooltip.tsx
|
1269
|
+
import { useState as useState12 } from "react";
|
1235
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";
|
1236
1321
|
var ControlBar = ({
|
1237
1322
|
player,
|
1238
1323
|
isPaused,
|
@@ -1250,26 +1335,15 @@ var ControlBar = ({
|
|
1250
1335
|
disableNote,
|
1251
1336
|
noteButtonClick
|
1252
1337
|
}) => {
|
1253
|
-
console.log("432", notes);
|
1254
1338
|
const { setPlayer, setDuration } = useSoftBuildersVideoPlayerContext();
|
1255
|
-
const [width, setWidth] =
|
1256
|
-
const [isSeeking, setIsSeeking] =
|
1339
|
+
const [width, setWidth] = useState13(0);
|
1340
|
+
const [isSeeking, setIsSeeking] = useState13(true);
|
1257
1341
|
const seek = (duration2) => {
|
1258
1342
|
const currentTime = Number((player == null ? void 0 : player.currentTime()) || 0);
|
1259
1343
|
player == null ? void 0 : player.currentTime(currentTime + duration2);
|
1260
1344
|
};
|
1261
|
-
const [volumeSliderToggler, setVolumeToggler] =
|
1345
|
+
const [volumeSliderToggler, setVolumeToggler] = useState13(false);
|
1262
1346
|
const container = document.getElementById(`video-container-${id}`);
|
1263
|
-
const [isToolTip, setIsToolTip] = useState12({
|
1264
|
-
sub: false,
|
1265
|
-
seekForward: false,
|
1266
|
-
seekBackward: false,
|
1267
|
-
play: false,
|
1268
|
-
pause: false,
|
1269
|
-
volume: false,
|
1270
|
-
quality: false,
|
1271
|
-
fullScreen: false
|
1272
|
-
});
|
1273
1347
|
function handleWidthChange(width2) {
|
1274
1348
|
setWidth(width2);
|
1275
1349
|
}
|
@@ -1293,40 +1367,63 @@ var ControlBar = ({
|
|
1293
1367
|
useEffect13(() => {
|
1294
1368
|
setDuration(duration);
|
1295
1369
|
}, [duration]);
|
1296
|
-
return /* @__PURE__ */
|
1370
|
+
return /* @__PURE__ */ jsxs14(
|
1297
1371
|
"div",
|
1298
1372
|
{
|
1299
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`,
|
1300
1374
|
children: [
|
1301
|
-
/* @__PURE__ */
|
1302
|
-
/* @__PURE__ */
|
1303
|
-
/* @__PURE__ */
|
1375
|
+
/* @__PURE__ */ jsx34(BufferTracker_default, {}),
|
1376
|
+
/* @__PURE__ */ jsx34(CurrentTimeTracker_default, {}),
|
1377
|
+
/* @__PURE__ */ jsx34(
|
1304
1378
|
"button",
|
1305
1379
|
{
|
1306
1380
|
onClick: () => {
|
1307
1381
|
seek(-seekStep);
|
1308
1382
|
},
|
1309
|
-
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
|
+
)
|
1310
1392
|
}
|
1311
1393
|
),
|
1312
|
-
/* @__PURE__ */
|
1313
|
-
|
1394
|
+
/* @__PURE__ */ jsx34(
|
1395
|
+
GlobalTooltip_default,
|
1396
|
+
{
|
1397
|
+
content: /* @__PURE__ */ jsx34("p", { children: isPaused ? "Play" : "pause" }),
|
1398
|
+
isLeft: true,
|
1399
|
+
children: /* @__PURE__ */ jsx34("button", { onClick: togglePlay, children: isPaused ? /* @__PURE__ */ jsx34(PlayIcon_default, { className: "sb-w-3 sb-h-3" }) : /* @__PURE__ */ jsx34(PauseIcon_default, { className: "sb-w-3 sb-h-3" }) })
|
1400
|
+
}
|
1401
|
+
),
|
1402
|
+
/* @__PURE__ */ jsx34(
|
1314
1403
|
"button",
|
1315
1404
|
{
|
1316
1405
|
onClick: (e) => {
|
1317
1406
|
e.preventDefault();
|
1318
1407
|
seek(seekStep);
|
1319
1408
|
},
|
1320
|
-
children: /* @__PURE__ */
|
1409
|
+
children: /* @__PURE__ */ jsx34(
|
1410
|
+
GlobalTooltip_default,
|
1411
|
+
{
|
1412
|
+
width,
|
1413
|
+
content: /* @__PURE__ */ jsx34("p", { children: "Forward 5 sec" }),
|
1414
|
+
isLeft: true,
|
1415
|
+
children: /* @__PURE__ */ jsx34(ForwardIcon_default, { className: "sb-w-3 sb-h-3" })
|
1416
|
+
}
|
1417
|
+
)
|
1321
1418
|
}
|
1322
1419
|
),
|
1323
1420
|
// isSeeking ||
|
1324
1421
|
// width > 400 &&
|
1325
|
-
/* @__PURE__ */
|
1422
|
+
/* @__PURE__ */ jsx34(
|
1326
1423
|
"div",
|
1327
1424
|
{
|
1328
1425
|
className: `${width < 400 ? "sb-flex-1 sb-ml-0 sb-mr-0" : "sb-w-full"}`,
|
1329
|
-
children: /* @__PURE__ */
|
1426
|
+
children: /* @__PURE__ */ jsxs14(
|
1330
1427
|
"div",
|
1331
1428
|
{
|
1332
1429
|
style: width < 400 ? {
|
@@ -1336,15 +1433,15 @@ var ControlBar = ({
|
|
1336
1433
|
} : { width: "98%" },
|
1337
1434
|
className: `flex gap-2 ${width < 400 ? "absolute sb-top-1" : "-sb-translate-y-0 sb-w-full"} hover:sb-w-[45%] `,
|
1338
1435
|
children: [
|
1339
|
-
/* @__PURE__ */
|
1340
|
-
/* @__PURE__ */
|
1341
|
-
/* @__PURE__ */
|
1436
|
+
/* @__PURE__ */ jsx34(CurrentTimeLabel_default, {}),
|
1437
|
+
/* @__PURE__ */ jsx34(TimeSliderContainer_default, { chapters, notes }),
|
1438
|
+
/* @__PURE__ */ jsx34("p", { children: durationFormater(duration) })
|
1342
1439
|
]
|
1343
1440
|
}
|
1344
1441
|
)
|
1345
1442
|
}
|
1346
1443
|
),
|
1347
|
-
/* @__PURE__ */
|
1444
|
+
/* @__PURE__ */ jsx34("div", { className: "sb-h-full", children: /* @__PURE__ */ jsx34(
|
1348
1445
|
VolumeSlider_default,
|
1349
1446
|
{
|
1350
1447
|
volumeSliderToggler,
|
@@ -1353,7 +1450,7 @@ var ControlBar = ({
|
|
1353
1450
|
handleControlDisplayTimer
|
1354
1451
|
}
|
1355
1452
|
) }),
|
1356
|
-
/* @__PURE__ */
|
1453
|
+
/* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Quality" }), children: /* @__PURE__ */ jsx34(
|
1357
1454
|
QualityMenu_default,
|
1358
1455
|
{
|
1359
1456
|
width,
|
@@ -1362,8 +1459,8 @@ var ControlBar = ({
|
|
1362
1459
|
setIsQualityMenuOpen && setIsQualityMenuOpen(isOpen);
|
1363
1460
|
}
|
1364
1461
|
}
|
1365
|
-
),
|
1366
|
-
disableNote && /* @__PURE__ */
|
1462
|
+
) }),
|
1463
|
+
disableNote && /* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Create note" }), children: /* @__PURE__ */ jsx34(
|
1367
1464
|
CreateNoteMenu_default,
|
1368
1465
|
{
|
1369
1466
|
handleSaveNoteAction,
|
@@ -1376,8 +1473,8 @@ var ControlBar = ({
|
|
1376
1473
|
});
|
1377
1474
|
}
|
1378
1475
|
}
|
1379
|
-
),
|
1380
|
-
/* @__PURE__ */
|
1476
|
+
) }),
|
1477
|
+
/* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Subtitle" }), children: /* @__PURE__ */ jsx34(
|
1381
1478
|
SubtitleMenu_default,
|
1382
1479
|
{
|
1383
1480
|
width,
|
@@ -1387,7 +1484,7 @@ var ControlBar = ({
|
|
1387
1484
|
}
|
1388
1485
|
}
|
1389
1486
|
) }),
|
1390
|
-
/* @__PURE__ */
|
1487
|
+
/* @__PURE__ */ jsx34(GlobalTooltip_default, { width, content: /* @__PURE__ */ jsx34("p", { children: "Full screen" }), children: /* @__PURE__ */ jsx34(
|
1391
1488
|
"button",
|
1392
1489
|
{
|
1393
1490
|
onClick: (e) => {
|
@@ -1399,9 +1496,9 @@ var ControlBar = ({
|
|
1399
1496
|
player == null ? void 0 : player.requestFullscreen();
|
1400
1497
|
}
|
1401
1498
|
},
|
1402
|
-
children: /* @__PURE__ */
|
1499
|
+
children: /* @__PURE__ */ jsx34(FullScreenIcon_default, { className: "sb-w-3 sb-h-3" })
|
1403
1500
|
}
|
1404
|
-
)
|
1501
|
+
) })
|
1405
1502
|
]
|
1406
1503
|
}
|
1407
1504
|
);
|
@@ -1409,26 +1506,26 @@ var ControlBar = ({
|
|
1409
1506
|
var ControlBar_default = ControlBar;
|
1410
1507
|
|
1411
1508
|
// src/components/BigPlayButton/index.tsx
|
1412
|
-
import { jsx as
|
1509
|
+
import { jsx as jsx35 } from "react/jsx-runtime";
|
1413
1510
|
var BigPlayButton = ({ player, isPaused, setIsPaused }) => {
|
1414
1511
|
const togglePlay = () => {
|
1415
1512
|
if (isPaused) player == null ? void 0 : player.play();
|
1416
1513
|
else player == null ? void 0 : player.pause();
|
1417
1514
|
setIsPaused(!isPaused);
|
1418
1515
|
};
|
1419
|
-
return /* @__PURE__ */
|
1516
|
+
return /* @__PURE__ */ jsx35(
|
1420
1517
|
"div",
|
1421
1518
|
{
|
1422
1519
|
onClick: togglePlay,
|
1423
1520
|
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 ",
|
1424
|
-
children: isPaused ? /* @__PURE__ */
|
1521
|
+
children: isPaused ? /* @__PURE__ */ jsx35(PlayIcon_default, { className: "sb-w-4 sb-h-4" }) : /* @__PURE__ */ jsx35(PauseIcon_default, { className: "sb-w-4 sb-h-4" })
|
1425
1522
|
}
|
1426
1523
|
);
|
1427
1524
|
};
|
1428
1525
|
var BigPlayButton_default = BigPlayButton;
|
1429
1526
|
|
1430
1527
|
// src/components/VideoPlayerComponent/index.tsx
|
1431
|
-
import { jsx as
|
1528
|
+
import { jsx as jsx36, jsxs as jsxs15 } from "react/jsx-runtime";
|
1432
1529
|
var bigPlayButtonRoot = {};
|
1433
1530
|
var renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100") => {
|
1434
1531
|
const container = document.getElementById(`video-container-${id}`);
|
@@ -1441,7 +1538,7 @@ var renderBigPlayButton = (id, player, isPaused, setIsPaused, opacity = "100") =
|
|
1441
1538
|
bigPlayButtonRoot[id] = ReactDOM.createRoot(element);
|
1442
1539
|
}
|
1443
1540
|
bigPlayButtonRoot[id].render(
|
1444
|
-
/* @__PURE__ */
|
1541
|
+
/* @__PURE__ */ jsx36(
|
1445
1542
|
BigPlayButton_default,
|
1446
1543
|
{
|
1447
1544
|
player,
|
@@ -1471,7 +1568,7 @@ var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chap
|
|
1471
1568
|
element.style.height = "100%";
|
1472
1569
|
element.style.alignItems = "flex-end";
|
1473
1570
|
controlBarRoot[id].render(
|
1474
|
-
/* @__PURE__ */
|
1571
|
+
/* @__PURE__ */ jsx36(SoftBuildersVideoPlayerProvider, { children: /* @__PURE__ */ jsx36(
|
1475
1572
|
ControlBar_default,
|
1476
1573
|
{
|
1477
1574
|
id,
|
@@ -1510,20 +1607,20 @@ var VideoPlayerComponent = forwardRef(
|
|
1510
1607
|
childRef,
|
1511
1608
|
bottomRedBar = true,
|
1512
1609
|
noteButtonClick
|
1513
|
-
}) => {
|
1610
|
+
}, ref) => {
|
1514
1611
|
var _a;
|
1515
1612
|
const videoRef = useRef2(void 0);
|
1516
1613
|
const playerRef = useRef2(void 0);
|
1517
|
-
const [isReady, setIsReady] =
|
1518
|
-
const [isPaused, setIsPaused] =
|
1519
|
-
const [duration, setDuration] =
|
1520
|
-
const [opacity, setOpacity] =
|
1521
|
-
const [isControlBarPresent, setIsControlBarPresent] =
|
1522
|
-
const [bgColor, setBgColor] =
|
1523
|
-
const [isQualityMenuOpen, setIsQualityMenuOpen] =
|
1524
|
-
const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] =
|
1525
|
-
const [isHovered, setIsHovered] =
|
1526
|
-
const [isNoteOpen, setNoteOpen] =
|
1614
|
+
const [isReady, setIsReady] = useState14(false);
|
1615
|
+
const [isPaused, setIsPaused] = useState14(!options.autoplay);
|
1616
|
+
const [duration, setDuration] = useState14(1);
|
1617
|
+
const [opacity, setOpacity] = useState14("0");
|
1618
|
+
const [isControlBarPresent, setIsControlBarPresent] = useState14(true);
|
1619
|
+
const [bgColor, setBgColor] = useState14("transparent");
|
1620
|
+
const [isQualityMenuOpen, setIsQualityMenuOpen] = useState14(false);
|
1621
|
+
const [isSubtitleMenuOpen, setIsSubtitleMenuOpen] = useState14(false);
|
1622
|
+
const [isHovered, setIsHovered] = useState14(false);
|
1623
|
+
const [isNoteOpen, setNoteOpen] = useState14(false);
|
1527
1624
|
const onReady = (player) => {
|
1528
1625
|
if (playerRef) {
|
1529
1626
|
playerRef.current = player;
|
@@ -1712,6 +1809,7 @@ var VideoPlayerComponent = forwardRef(
|
|
1712
1809
|
if (playerRef.current) {
|
1713
1810
|
if (playerRef.current.paused()) {
|
1714
1811
|
try {
|
1812
|
+
startTime && playerRef.current.currentTime(startTime);
|
1715
1813
|
await playerRef.current.play();
|
1716
1814
|
setIsPaused(false);
|
1717
1815
|
} catch (error) {
|
@@ -1756,7 +1854,7 @@ var VideoPlayerComponent = forwardRef(
|
|
1756
1854
|
}
|
1757
1855
|
};
|
1758
1856
|
}, []);
|
1759
|
-
const [timeSeeker, setTimeSeeker] =
|
1857
|
+
const [timeSeeker, setTimeSeeker] = useState14("0");
|
1760
1858
|
useEffect14(() => {
|
1761
1859
|
const updateTimeSeeker = () => {
|
1762
1860
|
var _a2, _b, _c, _d;
|
@@ -1773,7 +1871,7 @@ var VideoPlayerComponent = forwardRef(
|
|
1773
1871
|
};
|
1774
1872
|
updateTimeSeeker();
|
1775
1873
|
}, [(_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.currentTime()]);
|
1776
|
-
return /* @__PURE__ */
|
1874
|
+
return /* @__PURE__ */ jsxs15(
|
1777
1875
|
"div",
|
1778
1876
|
{
|
1779
1877
|
ref: videoRefs,
|
@@ -1785,7 +1883,7 @@ var VideoPlayerComponent = forwardRef(
|
|
1785
1883
|
onMouseEnter: () => setIsHovered(true),
|
1786
1884
|
onMouseLeave: () => setIsHovered(false),
|
1787
1885
|
children: [
|
1788
|
-
bottomRedBar && /* @__PURE__ */
|
1886
|
+
bottomRedBar && /* @__PURE__ */ jsx36(
|
1789
1887
|
"div",
|
1790
1888
|
{
|
1791
1889
|
ref: childRef,
|
@@ -1796,12 +1894,12 @@ var VideoPlayerComponent = forwardRef(
|
|
1796
1894
|
}
|
1797
1895
|
}
|
1798
1896
|
),
|
1799
|
-
/* @__PURE__ */
|
1897
|
+
/* @__PURE__ */ jsx36(
|
1800
1898
|
"div",
|
1801
1899
|
{
|
1802
1900
|
className: "hover:sb-cursor-pointer sb-w-full sb-h-full",
|
1803
1901
|
"data-vjs-player": true,
|
1804
|
-
children: /* @__PURE__ */
|
1902
|
+
children: /* @__PURE__ */ jsx36(
|
1805
1903
|
"div",
|
1806
1904
|
{
|
1807
1905
|
onClick: handlePlayerClick,
|
@@ -1819,7 +1917,7 @@ var VideoPlayerComponent = forwardRef(
|
|
1819
1917
|
var VideoPlayerComponent_default = VideoPlayerComponent;
|
1820
1918
|
|
1821
1919
|
// src/components/SoftBuildersVideoPlayer/index.tsx
|
1822
|
-
import { jsx as
|
1920
|
+
import { jsx as jsx37 } from "react/jsx-runtime";
|
1823
1921
|
var DEFAULT_OPTIONS = {
|
1824
1922
|
autoplay: false,
|
1825
1923
|
controls: true,
|
@@ -1844,7 +1942,7 @@ var Component = forwardRef2(
|
|
1844
1942
|
childRef,
|
1845
1943
|
bottomRedBar,
|
1846
1944
|
noteButtonClick
|
1847
|
-
}) => {
|
1945
|
+
}, ref) => {
|
1848
1946
|
options = __spreadProps(__spreadValues({}, options), {
|
1849
1947
|
responsive: true,
|
1850
1948
|
inactivityTimeout: 0,
|
@@ -1860,7 +1958,7 @@ var Component = forwardRef2(
|
|
1860
1958
|
if ((options == null ? void 0 : options.muted) === void 0) options.muted = DEFAULT_OPTIONS == null ? void 0 : DEFAULT_OPTIONS.muted;
|
1861
1959
|
if (options.height === void 0) options.height = DEFAULT_OPTIONS.height;
|
1862
1960
|
if (options.width === void 0) options.width = DEFAULT_OPTIONS.width;
|
1863
|
-
const [tracks, setTracks] =
|
1961
|
+
const [tracks, setTracks] = useState15([]);
|
1864
1962
|
useEffect15(() => {
|
1865
1963
|
}, [isFocused]);
|
1866
1964
|
useEffect15(() => {
|
@@ -1881,7 +1979,7 @@ var Component = forwardRef2(
|
|
1881
1979
|
getTracks();
|
1882
1980
|
}, [options == null ? void 0 : options.tracks]);
|
1883
1981
|
const id = (Date.now() + Math.random() * 100).toString();
|
1884
|
-
return /* @__PURE__ */
|
1982
|
+
return /* @__PURE__ */ jsx37(
|
1885
1983
|
VideoPlayerComponent_default,
|
1886
1984
|
{
|
1887
1985
|
id,
|