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.
Files changed (31) hide show
  1. package/dist/components/ControlBar/index.js +10 -8
  2. package/dist/components/ControlBar/index.js.map +1 -1
  3. package/dist/components/ControlBar/index.tsx +20 -16
  4. package/dist/components/MenuButton/index.d.ts +2 -1
  5. package/dist/components/MenuButton/index.js +5 -2
  6. package/dist/components/MenuButton/index.js.map +1 -1
  7. package/dist/components/MenuButton/index.tsx +12 -3
  8. package/dist/components/QualityMenu/index.d.ts +4 -2
  9. package/dist/components/QualityMenu/index.js +9 -7
  10. package/dist/components/QualityMenu/index.js.map +1 -1
  11. package/dist/components/QualityMenu/index.tsx +33 -8
  12. package/dist/components/SoftBuildersVideoPlayer/index.d.ts +2 -1
  13. package/dist/components/SoftBuildersVideoPlayer/index.js +4 -1
  14. package/dist/components/SoftBuildersVideoPlayer/index.js.map +1 -1
  15. package/dist/components/SoftBuildersVideoPlayer/index.tsx +5 -1
  16. package/dist/components/SubtitleMenu/index.d.ts +4 -2
  17. package/dist/components/SubtitleMenu/index.js +8 -3
  18. package/dist/components/SubtitleMenu/index.js.map +1 -1
  19. package/dist/components/SubtitleMenu/index.tsx +19 -4
  20. package/dist/components/VideoPlayerComponent/index.js +70 -8
  21. package/dist/components/VideoPlayerComponent/index.js.map +1 -1
  22. package/dist/components/VideoPlayerComponent/index.tsx +80 -7
  23. package/dist/components/VideoPlayerComponent/style/style.css +1 -0
  24. package/dist/components/VolumeSlider/index.js +4 -2
  25. package/dist/components/VolumeSlider/index.js.map +1 -1
  26. package/dist/components/VolumeSlider/index.tsx +12 -6
  27. package/dist/index.css +35 -11
  28. package/dist/index.d.mts +2 -1
  29. package/dist/index.mjs +287 -157
  30. package/dist/styles/tailwind.css +34 -11
  31. 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-end " : ""} sb-items-center sb-justify-start sb-gap-1 sb-h-full`,
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 ? "" : ""} sb-top-1 sb-items-end`,
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 = ({ buttonContent, menuContent, close }) => {
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: toggleMenu,
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: "sb-absolute sb-shadow-lg sb-right-0 sb-bottom-10",
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("button", { className: "hover:sb-text-orange-500 sb-p-2", onClick, children: /* @__PURE__ */ jsxs6("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2", children: [
644
- /* @__PURE__ */ jsx21("div", { className: "sb-col-span-3", children: isSelected ? /* @__PURE__ */ jsx21(CheckedIcon_default, { className: "sb-w-5 sb-h-5" }) : /* @__PURE__ */ jsx21("div", {}) }),
645
- /* @__PURE__ */ jsx21("p", { className: "sb-text-left sb-col-span-9", children: quality.label })
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("div", { className: "sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[150px]", children: /* @__PURE__ */ jsxs6("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [
674
- /* @__PURE__ */ jsxs6("div", { className: "sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start sb-relative sb-top-2", children: [
675
- /* @__PURE__ */ jsx21(
676
- "button",
677
- {
678
- onClick: () => {
679
- if (closeMenuFunction) {
680
- closeMenuFunction();
681
- }
682
- },
683
- className: "hover:sb-scale-150",
684
- children: /* @__PURE__ */ jsx21(LeftArrowIcon_default, { className: "sb-w-3 sb-h-3" })
685
- }
686
- ),
687
- /* @__PURE__ */ jsx21("h3", { children: "Quality" })
688
- ] }),
689
- /* @__PURE__ */ jsx21("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
690
- /* @__PURE__ */ jsx21("div", { className: "sb-px-5 sb-flex sb-flex-col sb-gap-3 sb-items-start ", children: qualities.map((q, i) => {
691
- return /* @__PURE__ */ jsx21(
692
- QualityOption,
693
- {
694
- isSelected: currentQualitySrc === q.src,
695
- quality: q,
696
- onClick: () => {
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
- `quality-${q.label}-${i}`
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("button", { className: "hover:sb-text-orange-500 sb-p-2", onClick, children: /* @__PURE__ */ jsxs12("div", { className: "sb-grid sb-grid-cols-12 sb-items-center sb-gap-2", children: [
1050
- /* @__PURE__ */ jsx32("div", { className: "sb-col-span-3", children: isSelected ? /* @__PURE__ */ jsx32(CheckedIcon_default, { className: "sb-w-5 sb-h-5" }) : /* @__PURE__ */ jsx32("div", {}) }),
1051
- /* @__PURE__ */ jsx32("p", { className: "sb-text-left sb-col-span-9", children: subtitle.label })
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("div", { className: "sb-rounded-md sb-bg-[#303030] sb-bg-opacity-50 sb-py-5 sb-w-[150px]", children: /* @__PURE__ */ jsxs12("div", { className: "sb-flex sb-flex-col sb-gap-3", children: [
1081
- /* @__PURE__ */ jsxs12("div", { className: "sb-px-5 sb-flex sb-flex-row sb-gap-3 sb-items-start", children: [
1082
- /* @__PURE__ */ jsx32(
1083
- "button",
1084
- {
1085
- onClick: () => {
1086
- if (closeMenuFunction) {
1087
- closeMenuFunction();
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
- className: "hover:sb-scale-150",
1091
- children: /* @__PURE__ */ jsx32(LeftArrowIcon_default, { className: "sb-w-3 sb-h-3" })
1092
- }
1093
- ),
1094
- /* @__PURE__ */ jsx32("h3", { children: "Subtitle" })
1095
- ] }),
1096
- /* @__PURE__ */ jsx32("div", { className: "sb-w-full sb-h-[.1px] sb-bg-[#AAAAAA] sb-bg-opacity-70" }),
1097
- /* @__PURE__ */ jsx32("div", { className: "sb-px-5 sb-flex sb-flex-col sb-gap-3 sb-items-start", children: subtitles.map((q, i) => {
1098
- return /* @__PURE__ */ jsx32(
1099
- SubtitleOption,
1100
- {
1101
- isSelected: q.mode === "showing",
1102
- subtitle: q,
1103
- onClick: () => {
1104
- handleSelectSubtitle(q);
1105
- }
1106
- },
1107
- `subtitle-${q.label}-${i}`
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("div", { className: " sb-px-2 sb-flex sb-justify-center sb-gap-3 sb-w-full sb-h-full sb-items-end sb-pb-2", children: [
1164
- /* @__PURE__ */ jsx33(BufferTracker_default, {}),
1165
- /* @__PURE__ */ jsx33(CurrentTimeTracker_default, {}),
1166
- /* @__PURE__ */ jsx33(
1167
- "button",
1168
- {
1169
- onClick: () => {
1170
- seek(-seekStep);
1171
- },
1172
- children: /* @__PURE__ */ jsx33(BackwardIcon_default, { className: "sb-w-3 sb-h-3" })
1173
- }
1174
- ),
1175
- /* @__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" }) }),
1176
- /* @__PURE__ */ jsx33(
1177
- "button",
1178
- {
1179
- onClick: (e) => {
1180
- e.preventDefault();
1181
- seek(seekStep);
1182
- },
1183
- children: /* @__PURE__ */ jsx33(ForwardIcon_default, { className: "sb-w-3 sb-h-3" })
1184
- }
1185
- ),
1186
- (isSeeking || width > 400) && /* @__PURE__ */ jsx33(
1187
- "div",
1188
- {
1189
- className: `${width < 400 ? "sb-w-[0px] sb-ml-0 sb-mr-0" : "sb-w-full"}`,
1190
- children: /* @__PURE__ */ jsxs13(
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
- style: width < 400 ? {
1194
- width: `${width * 0.8}px`,
1195
- left: "10%"
1196
- } : { width: "100%" },
1197
- className: `flex gap-2 ${width < 400 ? "absolute -sb-translate-y-9" : "-sb-translate-y-0 sb-w-full"} hover:sb-w-[45%] sb-transition-all sb-ease-in-out sb-duration-500`,
1198
- children: [
1199
- /* @__PURE__ */ jsx33(CurrentTimeLabel_default, {}),
1200
- /* @__PURE__ */ jsx33(TimeSliderContainer_default, { chapters, notes }),
1201
- /* @__PURE__ */ jsx33("p", { children: durationFormater(duration) })
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
- /* @__PURE__ */ jsx33("div", { className: "sb-h-full", children: /* @__PURE__ */ jsx33(VolumeSlider_default, { width, setIsSeeking: (val) => setIsSeeking(val) }) }),
1208
- /* @__PURE__ */ jsx33(QualityMenu_default, {}),
1209
- /* @__PURE__ */ jsx33(
1210
- "button",
1211
- {
1212
- onClick: (e) => {
1213
- e.preventDefault();
1214
- e.stopPropagation();
1215
- if (player == null ? void 0 : player.isFullscreen()) {
1216
- player == null ? void 0 : player.exitFullscreen();
1217
- } else {
1218
- player == null ? void 0 : player.requestFullscreen();
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
- children: /* @__PURE__ */ jsx33(FullScreenIcon_default, { className: "sb-w-3 sb-h-3" })
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
- const handlePlayerClick = (e) => {
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
- console.log("all");
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
- playerRef.current.play();
1426
- setIsPaused(false);
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 = [];