softbuilders-react-video-player 1.1.22 → 1.1.23
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 +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
package/dist/index.mjs
CHANGED
@@ -538,12 +538,12 @@ var VolumeSlider = ({ width = 0, setIsSeeking }) => {
|
|
538
538
|
return /* @__PURE__ */ jsxs4(
|
539
539
|
"div",
|
540
540
|
{
|
541
|
-
className: `sb-flex ${isVisible ? "" : "-sb-ml-2"} sb-flex-col-reverse ${false ? "!sb-flex-row !sb-items-
|
541
|
+
className: `sb-flex ${isVisible ? "" : "-sb-ml-2"} ${width > 400 ? "sb-flex-col-reverse " : "sb-flex-col !sb-justify-start"} ${false ? "!sb-flex-row !sb-items-start " : ""} sb-items-center sb-gap-1 sb-h-full`,
|
542
542
|
children: [
|
543
543
|
/* @__PURE__ */ jsx19(
|
544
544
|
"div",
|
545
545
|
{
|
546
|
-
className: `sb-flex sb-relative ${width < 400 ? "" : "
|
546
|
+
className: `sb-flex sb-relative ${width < 400 ? "-sb-top-1" : "sb-top-1"} `,
|
547
547
|
onClick: toggleVisiblity,
|
548
548
|
children: volume === 0 || (player == null ? void 0 : player.muted()) ? /* @__PURE__ */ jsx19(
|
549
549
|
MuteIcon_default,
|
@@ -561,7 +561,7 @@ var VolumeSlider = ({ width = 0, setIsSeeking }) => {
|
|
561
561
|
/* @__PURE__ */ jsx19("div", { className: "sb-flex sb-items-center sb-justify-center", children: /* @__PURE__ */ jsx19(
|
562
562
|
"div",
|
563
563
|
{
|
564
|
-
className: `sb-transition-all sb-ease-in-out sb-duration-500 ${isVisible ? "sb-w-[22px] sb-opacity-100 sb-visible" : "sb-w-0 sb-opacity-0 sb-invisible"} -sb-rotate-90 -sb-translate-y-1 sb-relative ${false ? "sb-static sb-w-16 sb-rotate-0 sb-translate-y-0 " : ""}`,
|
564
|
+
className: `sb-transition-all sb-ease-in-out sb-duration-500 ${isVisible ? "sb-w-[22px] sb-opacity-100 sb-visible" : "sb-w-0 sb-opacity-0 sb-invisible"} ${width > 400 ? "-sb-rotate-90 -sb-translate-y-1" : "sb-rotate-90 sb-translate-y-1"} sb-relative ${false ? "sb-static sb-w-16 sb-rotate-0 sb-translate-y-0 " : ""}`,
|
565
565
|
children: /* @__PURE__ */ jsx19(
|
566
566
|
Slider_default,
|
567
567
|
{
|
@@ -586,7 +586,12 @@ import { useEffect as useEffect4, useState as useState4 } from "react";
|
|
586
586
|
// src/components/MenuButton/index.tsx
|
587
587
|
import { useCallback, useEffect as useEffect3, useRef, useState as useState3 } from "react";
|
588
588
|
import { jsx as jsx20, jsxs as jsxs5 } from "react/jsx-runtime";
|
589
|
-
var MenuButton = ({
|
589
|
+
var MenuButton = ({
|
590
|
+
buttonContent,
|
591
|
+
menuContent,
|
592
|
+
close,
|
593
|
+
classContainer
|
594
|
+
}) => {
|
590
595
|
const [isOpen, setIsOpen] = useState3(false);
|
591
596
|
const buttonRef = useRef(null);
|
592
597
|
const menuRef = useRef(null);
|
@@ -611,7 +616,10 @@ var MenuButton = ({ buttonContent, menuContent, close }) => {
|
|
611
616
|
"button",
|
612
617
|
{
|
613
618
|
ref: buttonRef,
|
614
|
-
onClick:
|
619
|
+
onClick: (e) => {
|
620
|
+
e.stopPropagation();
|
621
|
+
toggleMenu();
|
622
|
+
},
|
615
623
|
"aria-haspopup": "true",
|
616
624
|
"aria-expanded": isOpen,
|
617
625
|
"aria-label": "Open menu",
|
@@ -625,7 +633,7 @@ var MenuButton = ({ buttonContent, menuContent, close }) => {
|
|
625
633
|
role: "menu",
|
626
634
|
"aria-orientation": "vertical",
|
627
635
|
"aria-labelledby": "Open menu",
|
628
|
-
className:
|
636
|
+
className: `sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10 ${classContainer}`,
|
629
637
|
children: menuContent
|
630
638
|
}
|
631
639
|
)
|
@@ -638,14 +646,27 @@ import { jsx as jsx21, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
638
646
|
var QualityOption = ({
|
639
647
|
isSelected,
|
640
648
|
quality,
|
641
|
-
onClick
|
649
|
+
onClick,
|
650
|
+
width
|
642
651
|
}) => {
|
643
|
-
return /* @__PURE__ */ jsx21(
|
644
|
-
|
645
|
-
|
646
|
-
|
652
|
+
return /* @__PURE__ */ jsx21(
|
653
|
+
"button",
|
654
|
+
{
|
655
|
+
className: `hover:sb-text-orange-500 ${width > 400 ? "sb-p-2" : "sp-pb-1"}`,
|
656
|
+
onClick,
|
657
|
+
children: /* @__PURE__ */ jsxs6("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2", children: [
|
658
|
+
/* @__PURE__ */ jsx21("div", { className: "sb-col-span-3", children: isSelected ? /* @__PURE__ */ jsx21(
|
659
|
+
CheckedIcon_default,
|
660
|
+
{
|
661
|
+
className: `${width > 400 ? "sb-w-5 sb-h-5" : "sb-w-3 sb-h-3"}`
|
662
|
+
}
|
663
|
+
) : /* @__PURE__ */ jsx21("div", {}) }),
|
664
|
+
/* @__PURE__ */ jsx21("p", { className: "sb-text-left sb-col-span-9", children: quality.label })
|
665
|
+
] })
|
666
|
+
}
|
667
|
+
);
|
647
668
|
};
|
648
|
-
var QualityMenu = ({}) => {
|
669
|
+
var QualityMenu = ({ width }) => {
|
649
670
|
const { player } = useSoftBuildersVideoPlayerContext();
|
650
671
|
const [closeMenuFunction, setCloseMenuFunction] = useState4(void 0);
|
651
672
|
const [qualities, setQualities] = useState4(
|
@@ -654,12 +675,12 @@ var QualityMenu = ({}) => {
|
|
654
675
|
const [currentQualitySrc, setCurrentQualitySrc] = useState4(void 0);
|
655
676
|
useEffect4(() => {
|
656
677
|
if (player) {
|
657
|
-
const sources = player.currentSources();
|
678
|
+
const sources = player == null ? void 0 : player.currentSources();
|
658
679
|
const qs = JSON.parse(
|
659
680
|
JSON.stringify(sources)
|
660
681
|
);
|
661
682
|
setQualities(qs);
|
662
|
-
const source = player.currentSource();
|
683
|
+
const source = player == null ? void 0 : player.currentSource();
|
663
684
|
const quality = JSON.parse(
|
664
685
|
JSON.stringify(source)
|
665
686
|
);
|
@@ -669,47 +690,61 @@ var QualityMenu = ({}) => {
|
|
669
690
|
return /* @__PURE__ */ jsx21(
|
670
691
|
MenuButton_default,
|
671
692
|
{
|
693
|
+
classContainer: `${width < 400 ? "!sb-top-8 -sb-left-9" : ""}`,
|
672
694
|
buttonContent: /* @__PURE__ */ jsx21(SettingsIcon_default, { className: "sb-w-3 sb-h-3" }),
|
673
|
-
menuContent: /* @__PURE__ */ jsx21(
|
674
|
-
|
675
|
-
|
676
|
-
|
677
|
-
|
678
|
-
|
679
|
-
|
680
|
-
|
681
|
-
|
682
|
-
|
683
|
-
|
684
|
-
|
685
|
-
|
686
|
-
|
687
|
-
|
688
|
-
|
689
|
-
|
690
|
-
|
691
|
-
|
692
|
-
|
693
|
-
|
694
|
-
|
695
|
-
|
696
|
-
|
697
|
-
const source = qualities.find(
|
698
|
-
(_q) => q.label == _q.label
|
699
|
-
);
|
700
|
-
if (source && source.src != currentQualitySrc) {
|
701
|
-
player == null ? void 0 : player.src(source.src);
|
702
|
-
const currentTime = player == null ? void 0 : player.currentTime();
|
703
|
-
setCurrentQualitySrc(source.src);
|
704
|
-
player == null ? void 0 : player.currentTime(currentTime);
|
705
|
-
player == null ? void 0 : player.play();
|
706
|
-
}
|
695
|
+
menuContent: /* @__PURE__ */ jsx21(
|
696
|
+
"div",
|
697
|
+
{
|
698
|
+
className: `sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 ${width > 400 ? "sb-w-[150px] sb-py-5" : "sb-w-[90px] sb-items-center sb-justify-center sb-py-1"}`,
|
699
|
+
children: /* @__PURE__ */ jsxs6("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [
|
700
|
+
/* @__PURE__ */ jsxs6(
|
701
|
+
"div",
|
702
|
+
{
|
703
|
+
className: `sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start sb-relative sb-top-2`,
|
704
|
+
children: [
|
705
|
+
/* @__PURE__ */ jsx21(
|
706
|
+
"button",
|
707
|
+
{
|
708
|
+
onClick: () => {
|
709
|
+
if (closeMenuFunction) {
|
710
|
+
closeMenuFunction();
|
711
|
+
}
|
712
|
+
},
|
713
|
+
className: "hover:sb-scale-150",
|
714
|
+
children: /* @__PURE__ */ jsx21(LeftArrowIcon_default, { className: "sb-w-3 sb-h-3" })
|
715
|
+
}
|
716
|
+
),
|
717
|
+
/* @__PURE__ */ jsx21("h3", { children: "Quality" })
|
718
|
+
]
|
707
719
|
}
|
708
|
-
|
709
|
-
|
710
|
-
|
711
|
-
|
712
|
-
|
720
|
+
),
|
721
|
+
/* @__PURE__ */ jsx21("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
|
722
|
+
/* @__PURE__ */ jsx21("div", { className: "sb-px-5 sb-flex sb-flex-col sb-gap-3 sb-items-start ", children: qualities.map((q, i) => {
|
723
|
+
return /* @__PURE__ */ jsx21(
|
724
|
+
QualityOption,
|
725
|
+
{
|
726
|
+
width,
|
727
|
+
isSelected: currentQualitySrc === q.src,
|
728
|
+
quality: q,
|
729
|
+
onClick: () => {
|
730
|
+
const source = qualities.find(
|
731
|
+
(_q) => q.label == _q.label
|
732
|
+
);
|
733
|
+
if (source && source.src != currentQualitySrc) {
|
734
|
+
player == null ? void 0 : player.src(source.src);
|
735
|
+
const currentTime = player == null ? void 0 : player.currentTime();
|
736
|
+
setCurrentQualitySrc(source.src);
|
737
|
+
player == null ? void 0 : player.currentTime(currentTime);
|
738
|
+
player == null ? void 0 : player.play();
|
739
|
+
}
|
740
|
+
}
|
741
|
+
},
|
742
|
+
`quality-${q.label}-${i}`
|
743
|
+
);
|
744
|
+
}) })
|
745
|
+
] })
|
746
|
+
}
|
747
|
+
),
|
713
748
|
close: (fn) => {
|
714
749
|
setCloseMenuFunction(() => fn);
|
715
750
|
}
|
@@ -1046,12 +1081,22 @@ var SubtitleOption = ({
|
|
1046
1081
|
subtitle,
|
1047
1082
|
onClick
|
1048
1083
|
}) => {
|
1049
|
-
return /* @__PURE__ */ jsx32(
|
1050
|
-
|
1051
|
-
|
1052
|
-
|
1084
|
+
return /* @__PURE__ */ jsx32(
|
1085
|
+
"button",
|
1086
|
+
{
|
1087
|
+
className: "hover:sb-text-orange-500 sb-p-2",
|
1088
|
+
onClick: (e) => {
|
1089
|
+
e.stopPropagation();
|
1090
|
+
onClick();
|
1091
|
+
},
|
1092
|
+
children: /* @__PURE__ */ jsxs12("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2", children: [
|
1093
|
+
/* @__PURE__ */ jsx32("div", { className: "sb-col-span-3", children: isSelected ? /* @__PURE__ */ jsx32(CheckedIcon_default, { className: "sb-w-5 sb-h-5" }) : /* @__PURE__ */ jsx32("div", {}) }),
|
1094
|
+
/* @__PURE__ */ jsx32("p", { className: "sb-text-left sb-col-span-9", children: subtitle.label })
|
1095
|
+
] })
|
1096
|
+
}
|
1097
|
+
);
|
1053
1098
|
};
|
1054
|
-
var SubtitleMenu = ({}) => {
|
1099
|
+
var SubtitleMenu = ({ width }) => {
|
1055
1100
|
const { player } = useSoftBuildersVideoPlayerContext();
|
1056
1101
|
const [closeMenuFunction, setCloseMenuFunction] = useState11(void 0);
|
1057
1102
|
const [subtitles, setSubtitles] = useState11([]);
|
@@ -1076,38 +1121,45 @@ var SubtitleMenu = ({}) => {
|
|
1076
1121
|
return /* @__PURE__ */ jsx32(
|
1077
1122
|
MenuButton_default,
|
1078
1123
|
{
|
1124
|
+
classContainer: `${width < 400 ? "!sb-top-8 -sb-left-9" : ""}`,
|
1079
1125
|
buttonContent: /* @__PURE__ */ jsx32(SubIcon_default, { className: "sb-w-4 sb-h-4 sb-text-white " }),
|
1080
|
-
menuContent: /* @__PURE__ */ jsx32(
|
1081
|
-
|
1082
|
-
|
1083
|
-
|
1084
|
-
|
1085
|
-
|
1086
|
-
|
1087
|
-
|
1126
|
+
menuContent: /* @__PURE__ */ jsx32(
|
1127
|
+
"div",
|
1128
|
+
{
|
1129
|
+
className: `sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 ${width > 400 ? "sb-w-[150px] sb-py-5" : "sb-w-[90px] sb-items-center sb-justify-center sb-py-1"}`,
|
1130
|
+
children: /* @__PURE__ */ jsxs12("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [
|
1131
|
+
/* @__PURE__ */ jsxs12("div", { className: "sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start", children: [
|
1132
|
+
/* @__PURE__ */ jsx32(
|
1133
|
+
"button",
|
1134
|
+
{
|
1135
|
+
onClick: () => {
|
1136
|
+
if (closeMenuFunction) {
|
1137
|
+
closeMenuFunction();
|
1138
|
+
}
|
1139
|
+
},
|
1140
|
+
className: "hover:sb-scale-150",
|
1141
|
+
children: /* @__PURE__ */ jsx32(LeftArrowIcon_default, { className: "sb-w-3 sb-h-3" })
|
1088
1142
|
}
|
1089
|
-
|
1090
|
-
|
1091
|
-
|
1092
|
-
}
|
1093
|
-
|
1094
|
-
|
1095
|
-
|
1096
|
-
|
1097
|
-
|
1098
|
-
|
1099
|
-
|
1100
|
-
|
1101
|
-
|
1102
|
-
|
1103
|
-
|
1104
|
-
|
1105
|
-
|
1106
|
-
|
1107
|
-
|
1108
|
-
|
1109
|
-
}) })
|
1110
|
-
] }) }),
|
1143
|
+
),
|
1144
|
+
/* @__PURE__ */ jsx32("h3", { children: "Subtitle" })
|
1145
|
+
] }),
|
1146
|
+
/* @__PURE__ */ jsx32("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
|
1147
|
+
/* @__PURE__ */ jsx32("div", { className: "sb-px-5 sb-flex sb-flex-col sb-gap-3 sb-items-start", children: subtitles.map((q, i) => {
|
1148
|
+
return /* @__PURE__ */ jsx32(
|
1149
|
+
SubtitleOption,
|
1150
|
+
{
|
1151
|
+
isSelected: q.mode === "showing",
|
1152
|
+
subtitle: q,
|
1153
|
+
onClick: () => {
|
1154
|
+
handleSelectSubtitle(q);
|
1155
|
+
}
|
1156
|
+
},
|
1157
|
+
`subtitle-${q.label}-${i}`
|
1158
|
+
);
|
1159
|
+
}) })
|
1160
|
+
] })
|
1161
|
+
}
|
1162
|
+
),
|
1111
1163
|
close: (fn) => {
|
1112
1164
|
setCloseMenuFunction(() => fn);
|
1113
1165
|
}
|
@@ -1160,70 +1212,79 @@ var ControlBar = ({
|
|
1160
1212
|
useEffect13(() => {
|
1161
1213
|
setDuration(duration);
|
1162
1214
|
}, [duration]);
|
1163
|
-
return /* @__PURE__ */ jsxs13(
|
1164
|
-
|
1165
|
-
|
1166
|
-
|
1167
|
-
|
1168
|
-
|
1169
|
-
|
1170
|
-
|
1171
|
-
|
1172
|
-
|
1173
|
-
|
1174
|
-
|
1175
|
-
|
1176
|
-
|
1177
|
-
|
1178
|
-
|
1179
|
-
onClick: (
|
1180
|
-
|
1181
|
-
|
1182
|
-
|
1183
|
-
|
1184
|
-
|
1185
|
-
|
1186
|
-
|
1187
|
-
|
1188
|
-
|
1189
|
-
|
1190
|
-
|
1215
|
+
return /* @__PURE__ */ jsxs13(
|
1216
|
+
"div",
|
1217
|
+
{
|
1218
|
+
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`,
|
1219
|
+
children: [
|
1220
|
+
/* @__PURE__ */ jsx33(BufferTracker_default, {}),
|
1221
|
+
/* @__PURE__ */ jsx33(CurrentTimeTracker_default, {}),
|
1222
|
+
/* @__PURE__ */ jsx33(
|
1223
|
+
"button",
|
1224
|
+
{
|
1225
|
+
onClick: () => {
|
1226
|
+
seek(-seekStep);
|
1227
|
+
},
|
1228
|
+
children: /* @__PURE__ */ jsx33(BackwardIcon_default, { className: "sb-w-3 sb-h-3" })
|
1229
|
+
}
|
1230
|
+
),
|
1231
|
+
/* @__PURE__ */ jsx33("button", { onClick: togglePlay, children: isPaused ? /* @__PURE__ */ jsx33(PlayIcon_default, { className: "sb-w-3 sb-h-3" }) : /* @__PURE__ */ jsx33(PauseIcon_default, { className: "sb-w-3 sb-h-3" }) }),
|
1232
|
+
/* @__PURE__ */ jsx33(
|
1233
|
+
"button",
|
1234
|
+
{
|
1235
|
+
onClick: (e) => {
|
1236
|
+
e.preventDefault();
|
1237
|
+
seek(seekStep);
|
1238
|
+
},
|
1239
|
+
children: /* @__PURE__ */ jsx33(ForwardIcon_default, { className: "sb-w-3 sb-h-3" })
|
1240
|
+
}
|
1241
|
+
),
|
1242
|
+
// isSeeking ||
|
1243
|
+
// width > 400 &&
|
1244
|
+
/* @__PURE__ */ jsx33(
|
1191
1245
|
"div",
|
1192
1246
|
{
|
1193
|
-
|
1194
|
-
|
1195
|
-
|
1196
|
-
|
1197
|
-
|
1198
|
-
|
1199
|
-
|
1200
|
-
|
1201
|
-
|
1202
|
-
|
1247
|
+
className: `${width < 400 ? "sb-w-[100px] sb-ml-0 sb-mr-0" : "sb-w-full"}`,
|
1248
|
+
children: /* @__PURE__ */ jsxs13(
|
1249
|
+
"div",
|
1250
|
+
{
|
1251
|
+
style: width < 400 ? {
|
1252
|
+
width: `${width * 0.9}px`,
|
1253
|
+
left: "5%",
|
1254
|
+
top: "90%"
|
1255
|
+
} : { width: "100%" },
|
1256
|
+
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`,
|
1257
|
+
children: [
|
1258
|
+
/* @__PURE__ */ jsx33(CurrentTimeLabel_default, {}),
|
1259
|
+
/* @__PURE__ */ jsx33(TimeSliderContainer_default, { chapters, notes }),
|
1260
|
+
/* @__PURE__ */ jsx33("p", { children: durationFormater(duration) })
|
1261
|
+
]
|
1262
|
+
}
|
1263
|
+
)
|
1203
1264
|
}
|
1204
|
-
)
|
1205
|
-
|
1206
|
-
|
1207
|
-
|
1208
|
-
|
1209
|
-
|
1210
|
-
|
1211
|
-
|
1212
|
-
|
1213
|
-
|
1214
|
-
|
1215
|
-
|
1216
|
-
|
1217
|
-
|
1218
|
-
|
1265
|
+
),
|
1266
|
+
/* @__PURE__ */ jsx33("div", { className: "sb-h-full", children: /* @__PURE__ */ jsx33(VolumeSlider_default, { width, setIsSeeking: (val) => setIsSeeking(val) }) }),
|
1267
|
+
/* @__PURE__ */ jsx33(QualityMenu_default, { width }),
|
1268
|
+
handleSaveNoteAction && /* @__PURE__ */ jsx33(CreateNoteMenu_default, { handleSaveNoteAction }),
|
1269
|
+
/* @__PURE__ */ jsx33(SubtitleMenu_default, { width }),
|
1270
|
+
/* @__PURE__ */ jsx33(
|
1271
|
+
"button",
|
1272
|
+
{
|
1273
|
+
onClick: (e) => {
|
1274
|
+
e.preventDefault();
|
1275
|
+
e.stopPropagation();
|
1276
|
+
if (player == null ? void 0 : player.isFullscreen()) {
|
1277
|
+
player == null ? void 0 : player.exitFullscreen();
|
1278
|
+
} else {
|
1279
|
+
player == null ? void 0 : player.requestFullscreen();
|
1280
|
+
}
|
1281
|
+
},
|
1282
|
+
children: /* @__PURE__ */ jsx33(FullScreenIcon_default, { className: "sb-w-3 sb-h-3" })
|
1219
1283
|
}
|
1220
|
-
|
1221
|
-
|
1222
|
-
|
1223
|
-
|
1224
|
-
handleSaveNoteAction && /* @__PURE__ */ jsx33(CreateNoteMenu_default, { handleSaveNoteAction }),
|
1225
|
-
/* @__PURE__ */ jsx33(SubtitleMenu_default, {})
|
1226
|
-
] });
|
1284
|
+
)
|
1285
|
+
]
|
1286
|
+
}
|
1287
|
+
);
|
1227
1288
|
};
|
1228
1289
|
var ControlBar_default = ControlBar;
|
1229
1290
|
|
@@ -1271,7 +1332,7 @@ var renderBigPlayButton = (id, player, isPaused, setIsPaused) => {
|
|
1271
1332
|
}
|
1272
1333
|
};
|
1273
1334
|
var controlBarRoot = {};
|
1274
|
-
var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, handleSaveNoteAction) => {
|
1335
|
+
var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chapters, seekStep = 5, handleSaveNoteAction, opacity = "0") => {
|
1275
1336
|
const container = document.getElementById(`video-container-${id}`);
|
1276
1337
|
if (container) {
|
1277
1338
|
const element = container.querySelector(".vjs-control-bar");
|
@@ -1280,6 +1341,7 @@ var renderControlBar = (id, player, isPaused, setIsPaused, duration, notes, chap
|
|
1280
1341
|
controlBarRoot[id] = ReactDOM.createRoot(element);
|
1281
1342
|
}
|
1282
1343
|
element.style.display = "flex";
|
1344
|
+
element.style.opacity = opacity;
|
1283
1345
|
element.style.height = "100%";
|
1284
1346
|
element.style.alignItems = "flex-end";
|
1285
1347
|
controlBarRoot[id].render(
|
@@ -1317,11 +1379,12 @@ var VideoPlayerComponent = ({
|
|
1317
1379
|
const [isReady, setIsReady] = useState13(false);
|
1318
1380
|
const [isPaused, setIsPaused] = useState13(!options.autoplay);
|
1319
1381
|
const [duration, setDuration] = useState13(1);
|
1382
|
+
const [opacity, setOpacity] = useState13("0");
|
1320
1383
|
const onReady = (player) => {
|
1321
1384
|
if (playerRef) {
|
1322
1385
|
playerRef.current = player;
|
1323
1386
|
setIsReady(true);
|
1324
|
-
player.currentTime(startTime);
|
1387
|
+
player == null ? void 0 : player.currentTime(startTime);
|
1325
1388
|
player.on("waiting", () => {
|
1326
1389
|
});
|
1327
1390
|
player.on("dispose", () => {
|
@@ -1337,6 +1400,7 @@ var VideoPlayerComponent = ({
|
|
1337
1400
|
useEffect14(() => {
|
1338
1401
|
if (!playerRef.current) {
|
1339
1402
|
const videoElement = document.createElement("video-js");
|
1403
|
+
videoElement.setAttribute("playsinline", "true");
|
1340
1404
|
videoElement.classList.add("vjs-big-play-centered");
|
1341
1405
|
if (poster) {
|
1342
1406
|
videoElement.setAttribute("poster", poster);
|
@@ -1385,7 +1449,8 @@ var VideoPlayerComponent = ({
|
|
1385
1449
|
notes,
|
1386
1450
|
chapters,
|
1387
1451
|
5,
|
1388
|
-
handleSaveNoteAction
|
1452
|
+
handleSaveNoteAction,
|
1453
|
+
opacity
|
1389
1454
|
);
|
1390
1455
|
}, 500);
|
1391
1456
|
return () => clearTimeout(controlBarTimeout);
|
@@ -1399,7 +1464,8 @@ var VideoPlayerComponent = ({
|
|
1399
1464
|
chapters,
|
1400
1465
|
isReady,
|
1401
1466
|
handleSaveNoteAction,
|
1402
|
-
duration
|
1467
|
+
duration,
|
1468
|
+
opacity
|
1403
1469
|
]);
|
1404
1470
|
useEffect14(() => {
|
1405
1471
|
if (isReady) {
|
@@ -1417,13 +1483,40 @@ var VideoPlayerComponent = ({
|
|
1417
1483
|
return () => clearInterval(intervalId);
|
1418
1484
|
}
|
1419
1485
|
}, []);
|
1420
|
-
|
1486
|
+
useEffect14(() => {
|
1487
|
+
return () => {
|
1488
|
+
if (playerRef.current) {
|
1489
|
+
playerRef.current.dispose();
|
1490
|
+
playerRef.current = void 0;
|
1491
|
+
if (bigPlayButtonRoot[id]) {
|
1492
|
+
bigPlayButtonRoot[id].unmount();
|
1493
|
+
bigPlayButtonRoot[id] = void 0;
|
1494
|
+
}
|
1495
|
+
if (controlBarRoot[id]) {
|
1496
|
+
controlBarRoot[id].unmount();
|
1497
|
+
controlBarRoot[id] = void 0;
|
1498
|
+
}
|
1499
|
+
}
|
1500
|
+
};
|
1501
|
+
}, []);
|
1502
|
+
const timeoutRef = useRef2(null);
|
1503
|
+
const handlePlayerClick = async (e) => {
|
1421
1504
|
e.preventDefault();
|
1422
|
-
|
1505
|
+
if (timeoutRef.current) {
|
1506
|
+
clearTimeout(timeoutRef.current);
|
1507
|
+
}
|
1508
|
+
setOpacity("100");
|
1509
|
+
setTimeout(() => {
|
1510
|
+
setOpacity("0");
|
1511
|
+
}, 5e3);
|
1423
1512
|
if (playerRef.current) {
|
1424
1513
|
if (playerRef.current.paused()) {
|
1425
|
-
|
1426
|
-
|
1514
|
+
try {
|
1515
|
+
await playerRef.current.play();
|
1516
|
+
setIsPaused(false);
|
1517
|
+
} catch (error) {
|
1518
|
+
console.error("Failed to play video:", error);
|
1519
|
+
}
|
1427
1520
|
} else {
|
1428
1521
|
playerRef.current.pause();
|
1429
1522
|
setIsPaused(true);
|
@@ -1431,9 +1524,42 @@ var VideoPlayerComponent = ({
|
|
1431
1524
|
}
|
1432
1525
|
}
|
1433
1526
|
};
|
1527
|
+
const videoRefs = useRef2(null);
|
1528
|
+
useEffect14(() => {
|
1529
|
+
const observer = new IntersectionObserver(
|
1530
|
+
(entries) => {
|
1531
|
+
entries.forEach((entry) => {
|
1532
|
+
var _a, _b;
|
1533
|
+
if (entry.isIntersecting === false) {
|
1534
|
+
if (((_a = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _a.paused()) === false) {
|
1535
|
+
try {
|
1536
|
+
(_b = playerRef == null ? void 0 : playerRef.current) == null ? void 0 : _b.pause();
|
1537
|
+
setIsPaused(true);
|
1538
|
+
} catch (error) {
|
1539
|
+
console.error("Failed to play video:", error);
|
1540
|
+
}
|
1541
|
+
}
|
1542
|
+
}
|
1543
|
+
});
|
1544
|
+
},
|
1545
|
+
{
|
1546
|
+
threshold: 0.1
|
1547
|
+
// The amount of the component that must be visible (0.1 means 10% visible)
|
1548
|
+
}
|
1549
|
+
);
|
1550
|
+
if (videoRefs.current) {
|
1551
|
+
observer.observe(videoRefs.current);
|
1552
|
+
}
|
1553
|
+
return () => {
|
1554
|
+
if (videoRefs.current) {
|
1555
|
+
observer.unobserve(videoRef.current);
|
1556
|
+
}
|
1557
|
+
};
|
1558
|
+
}, []);
|
1434
1559
|
return /* @__PURE__ */ jsx35(
|
1435
1560
|
"div",
|
1436
1561
|
{
|
1562
|
+
ref: videoRefs,
|
1437
1563
|
id: `video-container-${id}`,
|
1438
1564
|
className: "sb-relative sb-rounded-md sb-overflow-hidden",
|
1439
1565
|
children: /* @__PURE__ */ jsx35(
|
@@ -1473,7 +1599,8 @@ var Component = ({
|
|
1473
1599
|
startTime = 0,
|
1474
1600
|
handleSaveNoteAction,
|
1475
1601
|
onPlay,
|
1476
|
-
onPause
|
1602
|
+
onPause,
|
1603
|
+
isFocused = true
|
1477
1604
|
}) => {
|
1478
1605
|
options = __spreadProps(__spreadValues({}, options), {
|
1479
1606
|
responsive: true,
|
@@ -1491,6 +1618,9 @@ var Component = ({
|
|
1491
1618
|
if (options.height === void 0) options.height = DEFAULT_OPTIONS.height;
|
1492
1619
|
if (options.width === void 0) options.width = DEFAULT_OPTIONS.width;
|
1493
1620
|
const [tracks, setTracks] = useState14([]);
|
1621
|
+
useEffect15(() => {
|
1622
|
+
console.log(isFocused, "isF");
|
1623
|
+
}, [isFocused]);
|
1494
1624
|
useEffect15(() => {
|
1495
1625
|
const getTracks = async () => {
|
1496
1626
|
const newTracks = [];
|