softbuilders-react-video-player 1.1.68 → 1.1.70
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/LICENSE +21 -21
- package/dist/components/ChapterTooltip/index.tsx +65 -65
- package/dist/components/ControlBar/index.js +15 -2
- package/dist/components/ControlBar/index.js.map +1 -1
- package/dist/components/ControlBar/index.tsx +32 -1
- 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/CurrentTimeLabel/index.tsx +13 -13
- package/dist/components/Menu/index.tsx +49 -49
- 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/NoteTooltip/index.tsx +46 -46
- 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/TimeSliderContainer/index.tsx +1 -1
- package/dist/components/Tooltip/index.d.ts +3 -2
- package/dist/components/Tooltip/index.js +10 -2
- package/dist/components/Tooltip/index.js.map +1 -1
- package/dist/components/Tooltip/index.tsx +34 -16
- package/dist/components/VideoPlayerComponent/index.js +3 -2
- package/dist/components/VideoPlayerComponent/index.js.map +1 -1
- package/dist/components/VideoPlayerComponent/index.tsx +3 -2
- package/dist/components/VideoPlayerComponent/provider.tsx +82 -82
- package/dist/index.css +52 -4
- package/dist/index.mjs +90 -36
- package/dist/styles/tailwind.css +175 -130
- package/package.json +1 -1
package/dist/index.css
CHANGED
@@ -460,21 +460,33 @@ video {
|
|
460
460
|
.sb-left-1\/2 {
|
461
461
|
left: 50%;
|
462
462
|
}
|
463
|
+
.sb-left-full {
|
464
|
+
left: 100%;
|
465
|
+
}
|
463
466
|
.sb-right-0 {
|
464
467
|
right: 0px;
|
465
468
|
}
|
469
|
+
.sb-right-full {
|
470
|
+
right: 100%;
|
471
|
+
}
|
466
472
|
.sb-top-0 {
|
467
473
|
top: 0px;
|
468
474
|
}
|
469
475
|
.sb-top-1 {
|
470
476
|
top: 0.25rem;
|
471
477
|
}
|
478
|
+
.sb-top-1\/2 {
|
479
|
+
top: 50%;
|
480
|
+
}
|
472
481
|
.sb-top-2 {
|
473
482
|
top: 0.5rem;
|
474
483
|
}
|
475
484
|
.sb-top-\[27\%\] {
|
476
485
|
top: 27%;
|
477
486
|
}
|
487
|
+
.sb-top-full {
|
488
|
+
top: 100%;
|
489
|
+
}
|
478
490
|
.sb-z-10 {
|
479
491
|
z-index: 10;
|
480
492
|
}
|
@@ -484,6 +496,9 @@ video {
|
|
484
496
|
.sb-z-30 {
|
485
497
|
z-index: 30;
|
486
498
|
}
|
499
|
+
.sb-z-50 {
|
500
|
+
z-index: 50;
|
501
|
+
}
|
487
502
|
.sb-col-span-3 {
|
488
503
|
grid-column: span 3 / span 3;
|
489
504
|
}
|
@@ -499,9 +514,18 @@ video {
|
|
499
514
|
.sb-ml-0 {
|
500
515
|
margin-left: 0px;
|
501
516
|
}
|
517
|
+
.sb-ml-2 {
|
518
|
+
margin-left: 0.5rem;
|
519
|
+
}
|
502
520
|
.sb-mr-0 {
|
503
521
|
margin-right: 0px;
|
504
522
|
}
|
523
|
+
.sb-mr-2 {
|
524
|
+
margin-right: 0.5rem;
|
525
|
+
}
|
526
|
+
.sb-mt-2 {
|
527
|
+
margin-top: 0.5rem;
|
528
|
+
}
|
505
529
|
.sb-flex {
|
506
530
|
display: flex;
|
507
531
|
}
|
@@ -575,6 +599,10 @@ video {
|
|
575
599
|
--tw-border-spacing-x: 0.5rem;
|
576
600
|
border-spacing: var(--tw-border-spacing-x) var(--tw-border-spacing-y);
|
577
601
|
}
|
602
|
+
.-sb-translate-x-1\/2 {
|
603
|
+
--tw-translate-x: -50%;
|
604
|
+
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));
|
605
|
+
}
|
578
606
|
.-sb-translate-y-0 {
|
579
607
|
--tw-translate-y: -0px;
|
580
608
|
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));
|
@@ -583,8 +611,8 @@ video {
|
|
583
611
|
--tw-translate-y: -0.25rem;
|
584
612
|
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));
|
585
613
|
}
|
586
|
-
|
587
|
-
--tw-translate-
|
614
|
+
.-sb-translate-y-1\/2 {
|
615
|
+
--tw-translate-y: -50%;
|
588
616
|
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));
|
589
617
|
}
|
590
618
|
.sb-translate-y-0 {
|
@@ -669,8 +697,8 @@ video {
|
|
669
697
|
.sb-overflow-hidden {
|
670
698
|
overflow: hidden;
|
671
699
|
}
|
672
|
-
.sb-
|
673
|
-
|
700
|
+
.sb-rounded {
|
701
|
+
border-radius: 0.25rem;
|
674
702
|
}
|
675
703
|
.sb-rounded-full {
|
676
704
|
border-radius: 9999px;
|
@@ -700,6 +728,10 @@ video {
|
|
700
728
|
--tw-bg-opacity: 1;
|
701
729
|
background-color: rgb(255 0 0 / var(--tw-bg-opacity));
|
702
730
|
}
|
731
|
+
.sb-bg-black {
|
732
|
+
--tw-bg-opacity: 1;
|
733
|
+
background-color: rgb(0 0 0 / var(--tw-bg-opacity));
|
734
|
+
}
|
703
735
|
.sb-bg-orange-500 {
|
704
736
|
--tw-bg-opacity: 1;
|
705
737
|
background-color: rgb(249 115 22 / var(--tw-bg-opacity));
|
@@ -731,6 +763,10 @@ video {
|
|
731
763
|
padding-left: 1rem !important;
|
732
764
|
padding-right: 1rem !important;
|
733
765
|
}
|
766
|
+
.sb-px-2 {
|
767
|
+
padding-left: 0.5rem;
|
768
|
+
padding-right: 0.5rem;
|
769
|
+
}
|
734
770
|
.sb-px-4 {
|
735
771
|
padding-left: 1rem;
|
736
772
|
padding-right: 1rem;
|
@@ -763,6 +799,10 @@ video {
|
|
763
799
|
.sb-text-center {
|
764
800
|
text-align: center;
|
765
801
|
}
|
802
|
+
.sb-text-sm {
|
803
|
+
font-size: 0.875rem;
|
804
|
+
line-height: 1.25rem;
|
805
|
+
}
|
766
806
|
.sb-font-bold {
|
767
807
|
font-weight: 700;
|
768
808
|
}
|
@@ -784,6 +824,14 @@ video {
|
|
784
824
|
var(--tw-ring-shadow, 0 0 #0000),
|
785
825
|
var(--tw-shadow);
|
786
826
|
}
|
827
|
+
.sb-shadow-md {
|
828
|
+
--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
|
829
|
+
--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
|
830
|
+
box-shadow:
|
831
|
+
var(--tw-ring-offset-shadow, 0 0 #0000),
|
832
|
+
var(--tw-ring-shadow, 0 0 #0000),
|
833
|
+
var(--tw-shadow);
|
834
|
+
}
|
787
835
|
.sb-backdrop-blur-lg {
|
788
836
|
--tw-backdrop-blur: blur(16px);
|
789
837
|
-webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
package/dist/index.mjs
CHANGED
@@ -610,7 +610,9 @@ var MenuButton = ({
|
|
610
610
|
onClick,
|
611
611
|
setNoteOpen,
|
612
612
|
noteButtonClick,
|
613
|
-
disablePopUp = false
|
613
|
+
disablePopUp = false,
|
614
|
+
onMouseEnter,
|
615
|
+
onMouseLeave
|
614
616
|
}) => {
|
615
617
|
const [isOpen, setIsOpen] = useState3(false);
|
616
618
|
const buttonRef = useRef(null);
|
@@ -634,35 +636,43 @@ var MenuButton = ({
|
|
634
636
|
useEffect3(() => {
|
635
637
|
setNoteOpen && setNoteOpen(isOpen);
|
636
638
|
}, [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
|
-
|
639
|
+
return /* @__PURE__ */ jsxs5(
|
640
|
+
"div",
|
641
|
+
{
|
642
|
+
onMouseEnter,
|
643
|
+
onMouseLeave,
|
644
|
+
className: "sb-relative sb-flex sb-items-end",
|
645
|
+
children: [
|
646
|
+
/* @__PURE__ */ jsx20(
|
647
|
+
"button",
|
648
|
+
{
|
649
|
+
ref: buttonRef,
|
650
|
+
onClick: (e) => {
|
651
|
+
isOpen && e.stopPropagation();
|
652
|
+
toggleMenu();
|
653
|
+
onClick && onClick(e, !isOpen);
|
654
|
+
noteButtonClick && noteButtonClick(!isOpen);
|
655
|
+
},
|
656
|
+
"aria-haspopup": "true",
|
657
|
+
"aria-expanded": isOpen,
|
658
|
+
"aria-label": "Open menu",
|
659
|
+
children: buttonContent
|
660
|
+
}
|
661
|
+
),
|
662
|
+
!disablePopUp && isOpen && /* @__PURE__ */ jsx20(
|
663
|
+
"div",
|
664
|
+
{
|
665
|
+
ref: menuRef,
|
666
|
+
role: "menu",
|
667
|
+
"aria-orientation": "vertical",
|
668
|
+
"aria-labelledby": "Open menu",
|
669
|
+
className: `sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10 ${classContainer}`,
|
670
|
+
children: menuContent
|
671
|
+
}
|
672
|
+
)
|
673
|
+
]
|
674
|
+
}
|
675
|
+
);
|
666
676
|
};
|
667
677
|
var MenuButton_default = MenuButton;
|
668
678
|
|
@@ -791,7 +801,9 @@ var CreateNoteMenu = ({
|
|
791
801
|
handleSaveNoteAction,
|
792
802
|
width,
|
793
803
|
setNoteOpen,
|
794
|
-
noteButtonClick
|
804
|
+
noteButtonClick,
|
805
|
+
onMouseEnter,
|
806
|
+
onMouseLeave
|
795
807
|
}) => {
|
796
808
|
const { player } = useSoftBuildersVideoPlayerContext();
|
797
809
|
const [note, setNote] = useState5("");
|
@@ -810,6 +822,8 @@ var CreateNoteMenu = ({
|
|
810
822
|
return /* @__PURE__ */ jsx22(
|
811
823
|
MenuButton_default,
|
812
824
|
{
|
825
|
+
onMouseEnter,
|
826
|
+
onMouseLeave,
|
813
827
|
disablePopUp: true,
|
814
828
|
noteButtonClick,
|
815
829
|
setNoteOpen,
|
@@ -861,9 +875,26 @@ import { useEffect as useEffect5, useState as useState6 } from "react";
|
|
861
875
|
|
862
876
|
// src/components/Tooltip/index.tsx
|
863
877
|
import { jsx as jsx23 } from "react/jsx-runtime";
|
864
|
-
var Tooltip = ({
|
878
|
+
var Tooltip = ({
|
879
|
+
open,
|
880
|
+
children,
|
881
|
+
position = "top"
|
882
|
+
}) => {
|
865
883
|
if (!open) return null;
|
866
|
-
|
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
|
+
return /* @__PURE__ */ jsx23(
|
892
|
+
"div",
|
893
|
+
{
|
894
|
+
className: `sb-relative sb-bg-black sb-text-white sb-text-sm sb-px-2 sb-py-1 sb-rounded sb-shadow-md sb-z-50 ${positionClasses[position]}`,
|
895
|
+
children
|
896
|
+
}
|
897
|
+
);
|
867
898
|
};
|
868
899
|
var Tooltip_default = Tooltip;
|
869
900
|
|
@@ -1150,7 +1181,12 @@ var SubtitleOption = ({
|
|
1150
1181
|
}
|
1151
1182
|
);
|
1152
1183
|
};
|
1153
|
-
var SubtitleMenu = ({
|
1184
|
+
var SubtitleMenu = ({
|
1185
|
+
width,
|
1186
|
+
onClick,
|
1187
|
+
onMouseEnter,
|
1188
|
+
onMouseLeave
|
1189
|
+
}) => {
|
1154
1190
|
const { player } = useSoftBuildersVideoPlayerContext();
|
1155
1191
|
const [closeMenuFunction, setCloseMenuFunction] = useState11(void 0);
|
1156
1192
|
const [subtitles, setSubtitles] = useState11([]);
|
@@ -1175,6 +1211,8 @@ var SubtitleMenu = ({ width, onClick }) => {
|
|
1175
1211
|
return /* @__PURE__ */ jsx32(
|
1176
1212
|
MenuButton_default,
|
1177
1213
|
{
|
1214
|
+
onMouseEnter,
|
1215
|
+
onMouseLeave,
|
1178
1216
|
onClick: (e, isOpen) => {
|
1179
1217
|
onClick && onClick(e, isOpen);
|
1180
1218
|
},
|
@@ -1253,6 +1291,16 @@ var ControlBar = ({
|
|
1253
1291
|
};
|
1254
1292
|
const [volumeSliderToggler, setVolumeToggler] = useState12(false);
|
1255
1293
|
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
|
+
});
|
1256
1304
|
function handleWidthChange(width2) {
|
1257
1305
|
setWidth(width2);
|
1258
1306
|
}
|
@@ -1349,6 +1397,8 @@ var ControlBar = ({
|
|
1349
1397
|
disableNote && /* @__PURE__ */ jsx33(
|
1350
1398
|
CreateNoteMenu_default,
|
1351
1399
|
{
|
1400
|
+
onMouseEnter: () => setIsToolTip((prev) => __spreadProps(__spreadValues({}, prev), { note: true })),
|
1401
|
+
onMouseLeave: () => setIsToolTip((prev) => __spreadProps(__spreadValues({}, prev), { note: false })),
|
1352
1402
|
handleSaveNoteAction,
|
1353
1403
|
width,
|
1354
1404
|
setNoteOpen,
|
@@ -1363,6 +1413,11 @@ var ControlBar = ({
|
|
1363
1413
|
/* @__PURE__ */ jsx33(
|
1364
1414
|
SubtitleMenu_default,
|
1365
1415
|
{
|
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 })),
|
1366
1421
|
width,
|
1367
1422
|
onClick: (e, isOpen) => {
|
1368
1423
|
setVolumeToggler(!volumeSliderToggler);
|
@@ -1542,8 +1597,6 @@ var VideoPlayerComponent = forwardRef(
|
|
1542
1597
|
}
|
1543
1598
|
return () => {
|
1544
1599
|
if (playerRef.current) {
|
1545
|
-
playerRef.current.dispose();
|
1546
|
-
playerRef.current = void 0;
|
1547
1600
|
setTimeout(() => {
|
1548
1601
|
if (bigPlayButtonRoot[id]) {
|
1549
1602
|
bigPlayButtonRoot[id].unmount();
|
@@ -1697,6 +1750,7 @@ var VideoPlayerComponent = forwardRef(
|
|
1697
1750
|
if (playerRef.current) {
|
1698
1751
|
if (playerRef.current.paused()) {
|
1699
1752
|
try {
|
1753
|
+
startTime && playerRef.current.currentTime(startTime);
|
1700
1754
|
await playerRef.current.play();
|
1701
1755
|
setIsPaused(false);
|
1702
1756
|
} catch (error) {
|