suada-components 1.1.44 → 1.2.1

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 (57) hide show
  1. package/dist/components/{DailyMotion-dYOsLhXX.js → DailyMotion-C87ZJeRt.js} +1 -1
  2. package/dist/components/{DailyMotion-BBMHnZsc.esm.js → DailyMotion-DbDeP0dq.esm.js} +1 -1
  3. package/dist/components/DropDown/DropDown.interface.d.ts +4 -0
  4. package/dist/components/DropDown/DropDown.js +1 -1
  5. package/dist/components/DropDown/DropDown.js.map +1 -1
  6. package/dist/components/{Facebook-C2lp6fKy.esm.js → Facebook-B1XpGyBt.esm.js} +1 -1
  7. package/dist/components/{Facebook-D55xg0YF.js → Facebook-DigX8u_u.js} +1 -1
  8. package/dist/components/{FilePlayer-CSNfeLp-.esm.js → FilePlayer-BSL_U8r8.esm.js} +1 -1
  9. package/dist/components/{FilePlayer-VfIivLWB.js → FilePlayer-BTuFK59w.js} +1 -1
  10. package/dist/components/{Kaltura-BZ5pUEPz.js → Kaltura-CKV92aVd.js} +1 -1
  11. package/dist/components/{Kaltura-BVMxludT.esm.js → Kaltura-DAkp5nY0.esm.js} +1 -1
  12. package/dist/components/{Mixcloud-BDzCezGa.js → Mixcloud-CAgtZPq5.js} +1 -1
  13. package/dist/components/{Mixcloud-9K2fpYoj.esm.js → Mixcloud-CtWhrXiZ.esm.js} +1 -1
  14. package/dist/components/{Mux-BDK08Cp7.js → Mux-BRYGMFV_.js} +1 -1
  15. package/dist/components/{Mux-C3n27KkT.esm.js → Mux-C0xOzOps.esm.js} +1 -1
  16. package/dist/components/{Preview-BF89gaQn.esm.js → Preview-Crcz-S0c.esm.js} +1 -1
  17. package/dist/components/{Preview-C-KatBo7.js → Preview-DSBoVsm9.js} +1 -1
  18. package/dist/components/{SoundCloud-E9VSRo8s.js → SoundCloud-1V8ahw7A.js} +1 -1
  19. package/dist/components/{SoundCloud-BFfitMcN.esm.js → SoundCloud-BC8iiobM.esm.js} +1 -1
  20. package/dist/components/{Streamable-BObKpq3j.js → Streamable-BhhnBO_c.js} +1 -1
  21. package/dist/components/{Streamable-D1pOzVPi.esm.js → Streamable-CGxErYVF.esm.js} +1 -1
  22. package/dist/components/{Twitch-CAHqJZdW.esm.js → Twitch-8quL43Fw.esm.js} +1 -1
  23. package/dist/components/{Twitch-CAKL_Jqs.js → Twitch-E9YQS4X8.js} +1 -1
  24. package/dist/components/VideoPlayer/Player.d.ts +1 -0
  25. package/dist/components/VideoPlayer/Player.interface.d.ts +2 -1
  26. package/dist/components/VideoPlayer/Player.js +44 -23
  27. package/dist/components/VideoPlayer/Player.js.map +1 -1
  28. package/dist/components/VideoPlayer/Player.styles.d.ts +2 -0
  29. package/dist/components/VideoPlayer/Player.styles.js +21 -0
  30. package/dist/components/VideoPlayer/Player.styles.js.map +1 -1
  31. package/dist/components/VideoPlayer/useHlsSubtitles.d.ts +12 -0
  32. package/dist/components/VideoPlayer/useHlsSubtitles.js +73 -0
  33. package/dist/components/VideoPlayer/useHlsSubtitles.js.map +1 -0
  34. package/dist/components/VideoPlayer/usePlayerControls.js +52 -41
  35. package/dist/components/VideoPlayer/usePlayerControls.js.map +1 -1
  36. package/dist/components/{Vidyard-CIHNjfIv.js → Vidyard-B3v7M2i3.js} +1 -1
  37. package/dist/components/{Vidyard-BrA_V8mx.esm.js → Vidyard-DsG0WHnh.esm.js} +1 -1
  38. package/dist/components/{Vimeo-LwXzzIA2.esm.js → Vimeo-CXKbdxkV.esm.js} +1 -1
  39. package/dist/components/{Vimeo-DVX8WzFK.js → Vimeo-ddQ8CMRR.js} +1 -1
  40. package/dist/components/{Wistia-CxE_SYQ-.js → Wistia-B93lpDSs.js} +1 -1
  41. package/dist/components/{Wistia-DoFWA9-t.esm.js → Wistia-CJDzE0TP.esm.js} +1 -1
  42. package/dist/components/{YouTube-BW23iOlA.js → YouTube-631v_AIH.js} +1 -1
  43. package/dist/components/{YouTube-CiWt6Bsz.esm.js → YouTube-CdjuPIIO.esm.js} +1 -1
  44. package/dist/components/components/DropDown/DropDown.interface.d.ts +4 -0
  45. package/dist/components/components/VideoPlayer/Player.d.ts +1 -0
  46. package/dist/components/components/VideoPlayer/Player.interface.d.ts +2 -1
  47. package/dist/components/components/VideoPlayer/Player.styles.d.ts +2 -0
  48. package/dist/components/components/VideoPlayer/useHlsSubtitles.d.ts +12 -0
  49. package/dist/components/{index-Cs_px_sD.js → index-Ciqeqnts.js} +235 -112
  50. package/dist/components/{index-CMNE0hhl.esm.js → index-CyUx723z.esm.js} +235 -112
  51. package/dist/components/index.esm.js +1 -1
  52. package/dist/icons/components/DropDown/DropDown.interface.d.ts +4 -0
  53. package/dist/icons/components/VideoPlayer/Player.d.ts +1 -0
  54. package/dist/icons/components/VideoPlayer/Player.interface.d.ts +2 -1
  55. package/dist/icons/components/VideoPlayer/Player.styles.d.ts +2 -0
  56. package/dist/icons/components/VideoPlayer/useHlsSubtitles.d.ts +12 -0
  57. package/package.json +11 -5
@@ -42736,7 +42736,8 @@ var DropDown = function DropDown(props) {
42736
42736
  isLoading: props.isLoading,
42737
42737
  components: {
42738
42738
  DropdownIndicator: DropdownIndicator
42739
- }
42739
+ },
42740
+ noOptionsMessage: props.noOptionsMessage
42740
42741
  }), props.touched && props.error && props.errorMessage && jsxRuntimeExports.jsx(ErrorMessage, {
42741
42742
  children: props.errorMessage
42742
42743
  })]
@@ -81388,7 +81389,7 @@ function requirePlayers () {
81388
81389
  canPlay: import_patterns.canPlay.youtube,
81389
81390
  lazyPlayer: (0, import_utils.lazy)(() => import(
81390
81391
  /* webpackChunkName: 'reactPlayerYouTube' */
81391
- './YouTube-CiWt6Bsz.esm.js'
81392
+ './YouTube-CdjuPIIO.esm.js'
81392
81393
  ).then(function (n) { return n.Y; }))
81393
81394
  },
81394
81395
  {
@@ -81397,7 +81398,7 @@ function requirePlayers () {
81397
81398
  canPlay: import_patterns.canPlay.soundcloud,
81398
81399
  lazyPlayer: (0, import_utils.lazy)(() => import(
81399
81400
  /* webpackChunkName: 'reactPlayerSoundCloud' */
81400
- './SoundCloud-BFfitMcN.esm.js'
81401
+ './SoundCloud-BC8iiobM.esm.js'
81401
81402
  ).then(function (n) { return n.S; }))
81402
81403
  },
81403
81404
  {
@@ -81406,7 +81407,7 @@ function requirePlayers () {
81406
81407
  canPlay: import_patterns.canPlay.vimeo,
81407
81408
  lazyPlayer: (0, import_utils.lazy)(() => import(
81408
81409
  /* webpackChunkName: 'reactPlayerVimeo' */
81409
- './Vimeo-LwXzzIA2.esm.js'
81410
+ './Vimeo-CXKbdxkV.esm.js'
81410
81411
  ).then(function (n) { return n.V; }))
81411
81412
  },
81412
81413
  {
@@ -81415,7 +81416,7 @@ function requirePlayers () {
81415
81416
  canPlay: import_patterns.canPlay.mux,
81416
81417
  lazyPlayer: (0, import_utils.lazy)(() => import(
81417
81418
  /* webpackChunkName: 'reactPlayerMux' */
81418
- './Mux-C3n27KkT.esm.js'
81419
+ './Mux-C0xOzOps.esm.js'
81419
81420
  ).then(function (n) { return n.M; }))
81420
81421
  },
81421
81422
  {
@@ -81424,7 +81425,7 @@ function requirePlayers () {
81424
81425
  canPlay: import_patterns.canPlay.facebook,
81425
81426
  lazyPlayer: (0, import_utils.lazy)(() => import(
81426
81427
  /* webpackChunkName: 'reactPlayerFacebook' */
81427
- './Facebook-C2lp6fKy.esm.js'
81428
+ './Facebook-B1XpGyBt.esm.js'
81428
81429
  ).then(function (n) { return n.F; }))
81429
81430
  },
81430
81431
  {
@@ -81433,7 +81434,7 @@ function requirePlayers () {
81433
81434
  canPlay: import_patterns.canPlay.streamable,
81434
81435
  lazyPlayer: (0, import_utils.lazy)(() => import(
81435
81436
  /* webpackChunkName: 'reactPlayerStreamable' */
81436
- './Streamable-D1pOzVPi.esm.js'
81437
+ './Streamable-CGxErYVF.esm.js'
81437
81438
  ).then(function (n) { return n.S; }))
81438
81439
  },
81439
81440
  {
@@ -81442,7 +81443,7 @@ function requirePlayers () {
81442
81443
  canPlay: import_patterns.canPlay.wistia,
81443
81444
  lazyPlayer: (0, import_utils.lazy)(() => import(
81444
81445
  /* webpackChunkName: 'reactPlayerWistia' */
81445
- './Wistia-DoFWA9-t.esm.js'
81446
+ './Wistia-CJDzE0TP.esm.js'
81446
81447
  ).then(function (n) { return n.W; }))
81447
81448
  },
81448
81449
  {
@@ -81451,7 +81452,7 @@ function requirePlayers () {
81451
81452
  canPlay: import_patterns.canPlay.twitch,
81452
81453
  lazyPlayer: (0, import_utils.lazy)(() => import(
81453
81454
  /* webpackChunkName: 'reactPlayerTwitch' */
81454
- './Twitch-CAHqJZdW.esm.js'
81455
+ './Twitch-8quL43Fw.esm.js'
81455
81456
  ).then(function (n) { return n.T; }))
81456
81457
  },
81457
81458
  {
@@ -81460,7 +81461,7 @@ function requirePlayers () {
81460
81461
  canPlay: import_patterns.canPlay.dailymotion,
81461
81462
  lazyPlayer: (0, import_utils.lazy)(() => import(
81462
81463
  /* webpackChunkName: 'reactPlayerDailyMotion' */
81463
- './DailyMotion-BBMHnZsc.esm.js'
81464
+ './DailyMotion-DbDeP0dq.esm.js'
81464
81465
  ).then(function (n) { return n.D; }))
81465
81466
  },
81466
81467
  {
@@ -81469,7 +81470,7 @@ function requirePlayers () {
81469
81470
  canPlay: import_patterns.canPlay.mixcloud,
81470
81471
  lazyPlayer: (0, import_utils.lazy)(() => import(
81471
81472
  /* webpackChunkName: 'reactPlayerMixcloud' */
81472
- './Mixcloud-9K2fpYoj.esm.js'
81473
+ './Mixcloud-CtWhrXiZ.esm.js'
81473
81474
  ).then(function (n) { return n.M; }))
81474
81475
  },
81475
81476
  {
@@ -81478,7 +81479,7 @@ function requirePlayers () {
81478
81479
  canPlay: import_patterns.canPlay.vidyard,
81479
81480
  lazyPlayer: (0, import_utils.lazy)(() => import(
81480
81481
  /* webpackChunkName: 'reactPlayerVidyard' */
81481
- './Vidyard-BrA_V8mx.esm.js'
81482
+ './Vidyard-DsG0WHnh.esm.js'
81482
81483
  ).then(function (n) { return n.V; }))
81483
81484
  },
81484
81485
  {
@@ -81487,7 +81488,7 @@ function requirePlayers () {
81487
81488
  canPlay: import_patterns.canPlay.kaltura,
81488
81489
  lazyPlayer: (0, import_utils.lazy)(() => import(
81489
81490
  /* webpackChunkName: 'reactPlayerKaltura' */
81490
- './Kaltura-BVMxludT.esm.js'
81491
+ './Kaltura-DAkp5nY0.esm.js'
81491
81492
  ).then(function (n) { return n.K; }))
81492
81493
  },
81493
81494
  {
@@ -81499,7 +81500,7 @@ function requirePlayers () {
81499
81500
  },
81500
81501
  lazyPlayer: (0, import_utils.lazy)(() => import(
81501
81502
  /* webpackChunkName: 'reactPlayerFilePlayer' */
81502
- './FilePlayer-CSNfeLp-.esm.js'
81503
+ './FilePlayer-BSL_U8r8.esm.js'
81503
81504
  ).then(function (n) { return n.F; }))
81504
81505
  }
81505
81506
  ];
@@ -82320,7 +82321,7 @@ function requireReactPlayer () {
82320
82321
  var import_Player = __toESM(/*@__PURE__*/ requirePlayer());
82321
82322
  const Preview = (0, import_utils.lazy)(() => import(
82322
82323
  /* webpackChunkName: 'reactPlayerPreview' */
82323
- './Preview-BF89gaQn.esm.js'
82324
+ './Preview-Crcz-S0c.esm.js'
82324
82325
  ).then(function (n) { return n.P; }));
82325
82326
  const IS_BROWSER = typeof window !== "undefined" && window.document && typeof document !== "undefined";
82326
82327
  const IS_GLOBAL = typeof commonjsGlobal !== "undefined" && commonjsGlobal.window && commonjsGlobal.window.document;
@@ -82539,6 +82540,27 @@ var StyledSubtitles = dt.div(templateObject_7$1 || (templateObject_7$1 = __makeT
82539
82540
  var $controls = _a.$controls;
82540
82541
  return $controls ? '60px' : '10px';
82541
82542
  });
82543
+ var HLS_SUBTITLE_STYLES = "\n /* Hide native HLS subtitles completely - comprehensive approach */\n video::cue {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n video::-webkit-media-text-track-display {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n video::cue-region {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n video::-webkit-media-text-track-container {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n /* Target ReactPlayer specifically */\n .react-player video::cue {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .react-player video::-webkit-media-text-track-display {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .react-player video::cue-region {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .react-player video::-webkit-media-text-track-container {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n /* Additional selectors for different browsers */\n video::-moz-media-text-track-display {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n video::-ms-media-text-track-display {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n /* Hide any subtitle overlays */\n .react-player video + div[style*=\"position: absolute\"] {\n display: none !important;\n }\n \n /* Target HLS video player specifically */\n .hls-video-player::cue {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .hls-video-player::-webkit-media-text-track-display {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .hls-video-player::-webkit-media-text-track-container {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .hls-video-player::cue-region {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n";
82544
+ var injectHLSSubtitleStyles = function injectHLSSubtitleStyles() {
82545
+ var addSubtitleStyles = function addSubtitleStyles() {
82546
+ var existingStyle = document.getElementById('hls-subtitle-styles');
82547
+ if (existingStyle) {
82548
+ existingStyle.remove();
82549
+ }
82550
+ var style = document.createElement('style');
82551
+ style.id = 'hls-subtitle-styles';
82552
+ style.textContent = HLS_SUBTITLE_STYLES;
82553
+ document.head.appendChild(style);
82554
+ };
82555
+ addSubtitleStyles();
82556
+ // Return cleanup function
82557
+ return function () {
82558
+ var existingStyle = document.getElementById('hls-subtitle-styles');
82559
+ if (existingStyle) {
82560
+ existingStyle.remove();
82561
+ }
82562
+ };
82563
+ };
82542
82564
  var templateObject_1$9, templateObject_2$7, templateObject_3$4, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$1;
82543
82565
 
82544
82566
  var StyledControls = dt.div(templateObject_1$8 || (templateObject_1$8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n width: 100%;\n border-radius: 0px 0px 8px 8px;\n background: #565a62;\n padding: 12px 16px;\n position: relative;\n\n svg {\n cursor: pointer;\n\n @media screen and (max-width: 1500px) {\n width: 20px;\n height: 20px;\n }\n\n @media screen and (max-width: 1000px) {\n width: 16px;\n height: 16px;\n }\n }\n\n & > p {\n color: var(--neutral-colors-light);\n font-family: 'Poppins', sans-serif;\n ", "\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: 16px;\n width: 100%;\n border-radius: 0px 0px 8px 8px;\n background: #565a62;\n padding: 12px 16px;\n position: relative;\n\n svg {\n cursor: pointer;\n\n @media screen and (max-width: 1500px) {\n width: 20px;\n height: 20px;\n }\n\n @media screen and (max-width: 1000px) {\n width: 16px;\n height: 16px;\n }\n }\n\n & > p {\n color: var(--neutral-colors-light);\n font-family: 'Poppins', sans-serif;\n ", "\n }\n"])), {
@@ -88689,13 +88711,18 @@ function usePlayerControls(_a) {
88689
88711
  var duration = videoPlayerRef.current ? videoPlayerRef.current.getDuration() : 0;
88690
88712
  var formatCurrentTime = FormatSecondsToTimeString(currentTime);
88691
88713
  var formatDuration = FormatSecondsToTimeString(duration);
88714
+ // Using previous method for old videos(we used to parse subtitles via link)
88692
88715
  useEffect(function () {
88693
- fetch(subtitleUrl).then(function (response) {
88694
- return response.text();
88695
- }).then(function (content) {
88696
- var parsedSubtitles = parseVTT(content);
88697
- setSubtitles(parsedSubtitles);
88698
- });
88716
+ if (subtitleUrl) {
88717
+ fetch(subtitleUrl).then(function (response) {
88718
+ return response.text();
88719
+ }).then(function (content) {
88720
+ var parsedSubtitles = parseVTT(content);
88721
+ setSubtitles(parsedSubtitles);
88722
+ })["catch"](function (error) {
88723
+ console.error('Error fetching external subtitles:', error);
88724
+ });
88725
+ }
88699
88726
  }, [subtitleUrl]);
88700
88727
  useEffect(function () {
88701
88728
  var handleFullscreenChange = function handleFullscreenChange() {
@@ -88726,8 +88753,9 @@ function usePlayerControls(_a) {
88726
88753
  }, [videoPlayerRef]);
88727
88754
  var progressHandler = useCallback(function (state) {
88728
88755
  return __awaiter(_this, void 0, void 0, function () {
88729
- var currentSubtitleEntry, i, sub, i, sub, currentTime_1, now;
88730
- return __generator(this, function (_a) {
88756
+ var videoElement, hasHLSSubtitles, currentSubtitleEntry, i, sub, i, sub, currentTime_1, now;
88757
+ var _a, _b;
88758
+ return __generator(this, function (_c) {
88731
88759
  if (count > 2) {
88732
88760
  if (controlRef.current) {
88733
88761
  controlRef.current.style.visibility = 'hidden';
@@ -88736,44 +88764,47 @@ function usePlayerControls(_a) {
88736
88764
  } else if (controlRef.current && controlRef.current.style.visibility === 'visible' && isControlsActive) {
88737
88765
  count += 1;
88738
88766
  }
88739
- if (lastSubtitleIndexRef.current !== null) {
88740
- if (state.playedSeconds > lastPlaybackTimeRef.current) {
88741
- // Searching forward
88742
- for (i = lastSubtitleIndexRef.current; i < subtitles.length; i++) {
88743
- sub = subtitles[i];
88744
- if (state.playedSeconds >= sub.start && state.playedSeconds <= sub.end) {
88745
- currentSubtitleEntry = sub;
88746
- lastSubtitleIndexRef.current = i;
88747
- break;
88767
+ videoElement = (_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getInternalPlayer();
88768
+ hasHLSSubtitles = ((_b = videoElement === null || videoElement === void 0 ? void 0 : videoElement.textTracks) === null || _b === void 0 ? void 0 : _b.length) > 0;
88769
+ if (subtitles.length > 0 && !hasHLSSubtitles && isSubtitlesChecked) {
88770
+ currentSubtitleEntry = void 0;
88771
+ if (lastSubtitleIndexRef.current !== null) {
88772
+ if (state.playedSeconds > lastPlaybackTimeRef.current) {
88773
+ for (i = lastSubtitleIndexRef.current; i < subtitles.length; i++) {
88774
+ sub = subtitles[i];
88775
+ if (state.playedSeconds >= sub.start && state.playedSeconds <= sub.end) {
88776
+ currentSubtitleEntry = sub;
88777
+ lastSubtitleIndexRef.current = i;
88778
+ break;
88779
+ }
88748
88780
  }
88749
- }
88750
- } else {
88751
- // Searching backward
88752
- for (i = lastSubtitleIndexRef.current; i >= 0; i--) {
88753
- sub = subtitles[i];
88754
- if (state.playedSeconds >= sub.start && state.playedSeconds <= sub.end) {
88755
- currentSubtitleEntry = sub;
88756
- lastSubtitleIndexRef.current = i;
88757
- break;
88781
+ } else {
88782
+ for (i = lastSubtitleIndexRef.current; i >= 0; i--) {
88783
+ sub = subtitles[i];
88784
+ if (state.playedSeconds >= sub.start && state.playedSeconds <= sub.end) {
88785
+ currentSubtitleEntry = sub;
88786
+ lastSubtitleIndexRef.current = i;
88787
+ break;
88788
+ }
88758
88789
  }
88759
88790
  }
88760
88791
  }
88761
- }
88762
- if (!currentSubtitleEntry) {
88763
- currentSubtitleEntry = subtitles.find(function (sub) {
88764
- return state.playedSeconds >= sub.start && state.playedSeconds <= sub.end;
88765
- });
88792
+ if (!currentSubtitleEntry) {
88793
+ currentSubtitleEntry = subtitles.find(function (sub) {
88794
+ return state.playedSeconds >= sub.start && state.playedSeconds <= sub.end;
88795
+ });
88796
+ if (currentSubtitleEntry) {
88797
+ lastSubtitleIndexRef.current = subtitles.indexOf(currentSubtitleEntry);
88798
+ }
88799
+ }
88800
+ lastPlaybackTimeRef.current = state.playedSeconds;
88766
88801
  if (currentSubtitleEntry) {
88767
- lastSubtitleIndexRef.current = subtitles.indexOf(currentSubtitleEntry);
88802
+ setCurrentSubtitle(currentSubtitleEntry.text);
88803
+ } else {
88804
+ setCurrentSubtitle(''); // Clear subtitle if none should be displayed
88805
+ lastSubtitleIndexRef.current = null;
88768
88806
  }
88769
88807
  }
88770
- lastPlaybackTimeRef.current = state.playedSeconds;
88771
- if (currentSubtitleEntry) {
88772
- setCurrentSubtitle(currentSubtitleEntry.text);
88773
- } else {
88774
- setCurrentSubtitle(''); // Clear subtitle if none should be displayed
88775
- lastSubtitleIndexRef.current = null;
88776
- }
88777
88808
  if (!seeking) {
88778
88809
  setVideoState(function (prev) {
88779
88810
  return __assign(__assign({}, prev), state);
@@ -88789,7 +88820,7 @@ function usePlayerControls(_a) {
88789
88820
  return [2 /*return*/];
88790
88821
  });
88791
88822
  });
88792
- }, [seeking, handleTrackProgress, isControlsActive, subtitles]);
88823
+ }, [seeking, handleTrackProgress, isControlsActive, subtitles, isSubtitlesChecked]);
88793
88824
  var seekHandler = function seekHandler(e) {
88794
88825
  var v = parseFloat(e.target.value) / 100;
88795
88826
  setVideoState(function (prev) {
@@ -88801,7 +88832,7 @@ function usePlayerControls(_a) {
88801
88832
  videoPlayerRef.current.seekTo(v);
88802
88833
  }
88803
88834
  };
88804
- var seekMouseUpHandler = function seekMouseUpHandler(e) {
88835
+ var seekMouseUpHandler = function seekMouseUpHandler() {
88805
88836
  setVideoState(function (prev) {
88806
88837
  return __assign(__assign({}, prev), {
88807
88838
  seeking: false
@@ -88840,7 +88871,7 @@ function usePlayerControls(_a) {
88840
88871
  });
88841
88872
  }
88842
88873
  };
88843
- var onSeekMouseDownHandler = function onSeekMouseDownHandler(e) {
88874
+ var onSeekMouseDownHandler = function onSeekMouseDownHandler() {
88844
88875
  setVideoState(function (prev) {
88845
88876
  return __assign(__assign({}, prev), {
88846
88877
  seeking: true
@@ -88980,14 +89011,89 @@ function usePlayerControls(_a) {
88980
89011
  isFullscreen: isFullscreen,
88981
89012
  isControlsActive: isControlsActive,
88982
89013
  currentSubtitle: currentSubtitle,
89014
+ setCurrentSubtitle: setCurrentSubtitle,
88983
89015
  playing: isPlaying
88984
89016
  };
88985
89017
  }
88986
89018
 
89019
+ var useHLSSubtitles = function useHLSSubtitles(_a) {
89020
+ var videoPlayerRef = _a.videoPlayerRef,
89021
+ isSubtitlesChecked = _a.isSubtitlesChecked,
89022
+ setCurrentSubtitle = _a.setCurrentSubtitle;
89023
+ var hlsSubtitleTrackRef = useRef(null);
89024
+ var extractHLSSubtitleText = useCallback(function () {
89025
+ var _a;
89026
+ var videoElement = (_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getInternalPlayer();
89027
+ if (!videoElement || !videoElement.textTracks) return;
89028
+ var _loop_1 = function _loop_1(i) {
89029
+ var track = videoElement.textTracks[i];
89030
+ if (track.kind === 'subtitles' || track.kind === 'captions') {
89031
+ hlsSubtitleTrackRef.current = track;
89032
+ var handleCueChange = function handleCueChange() {
89033
+ if (isSubtitlesChecked && track.activeCues && track.activeCues.length > 0) {
89034
+ var currentCue = track.activeCues[0];
89035
+ if (currentCue && currentCue.text) {
89036
+ setCurrentSubtitle(currentCue.text);
89037
+ }
89038
+ } else if (isSubtitlesChecked) {
89039
+ setCurrentSubtitle('');
89040
+ }
89041
+ };
89042
+ track.removeEventListener('cuechange', handleCueChange);
89043
+ track.addEventListener('cuechange', handleCueChange);
89044
+ track.mode = isSubtitlesChecked ? 'showing' : 'hidden';
89045
+ return "break";
89046
+ }
89047
+ };
89048
+ for (var i = 0; i < videoElement.textTracks.length; i++) {
89049
+ var state_1 = _loop_1(i);
89050
+ if (state_1 === "break") break;
89051
+ }
89052
+ }, [isSubtitlesChecked, setCurrentSubtitle, videoPlayerRef]);
89053
+ var setupHLSSubtitleTracking = useCallback(function () {
89054
+ var _a;
89055
+ var videoElement = (_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getInternalPlayer();
89056
+ if (!videoElement) return;
89057
+ videoElement.classList.add('hls-video-player');
89058
+ var _checkTextTracks = function checkTextTracks(attempt) {
89059
+ if (attempt === void 0) {
89060
+ attempt = 0;
89061
+ }
89062
+ var textTracks = videoElement.textTracks;
89063
+ if (textTracks && textTracks.length > 0) {
89064
+ extractHLSSubtitleText();
89065
+ } else if (attempt < 5) {
89066
+ setTimeout(function () {
89067
+ return _checkTextTracks(attempt + 1);
89068
+ }, 300 * (attempt + 1));
89069
+ }
89070
+ };
89071
+ _checkTextTracks();
89072
+ videoElement.addEventListener('loadedmetadata', function () {
89073
+ _checkTextTracks();
89074
+ });
89075
+ }, [extractHLSSubtitleText, videoPlayerRef]);
89076
+ useEffect(function () {
89077
+ extractHLSSubtitleText();
89078
+ }, [isSubtitlesChecked, extractHLSSubtitleText]);
89079
+ useEffect(function () {
89080
+ var _a;
89081
+ var videoElement = (_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getInternalPlayer();
89082
+ if (videoElement && videoElement.textTracks && videoElement.textTracks.length > 0) {
89083
+ extractHLSSubtitleText();
89084
+ }
89085
+ }, [videoPlayerRef.current, extractHLSSubtitleText]);
89086
+ return {
89087
+ extractHLSSubtitleText: extractHLSSubtitleText,
89088
+ setupHLSSubtitleTracking: setupHLSSubtitleTracking
89089
+ };
89090
+ };
89091
+
88987
89092
  var VideoPlayer = function VideoPlayer(_a) {
89093
+ var _b, _c, _d;
88988
89094
  var customStyles = _a.customStyles,
88989
- _b = _a.startTime,
88990
- startTime = _b === void 0 ? 0 : _b,
89095
+ _e = _a.startTime,
89096
+ startTime = _e === void 0 ? 0 : _e,
88991
89097
  loading = _a.loading,
88992
89098
  setLoading = _a.setLoading,
88993
89099
  handleTrackProgress = _a.handleTrackProgress,
@@ -88999,20 +89105,21 @@ var VideoPlayer = function VideoPlayer(_a) {
88999
89105
  isPreviousVideo = _a.isPreviousVideo,
89000
89106
  isPlaying = _a.isPlaying,
89001
89107
  setIsPlaying = _a.setIsPlaying,
89002
- _c = _a.shouldPlayerBeFocusedOnSpaceClick,
89003
- shouldPlayerBeFocusedOnSpaceClick = _c === void 0 ? false : _c,
89108
+ _f = _a.shouldPlayerBeFocusedOnSpaceClick,
89109
+ shouldPlayerBeFocusedOnSpaceClick = _f === void 0 ? false : _f,
89004
89110
  showFavorite = _a.showFavorite,
89005
- _d = _a.isFavorite,
89006
- isFavorite = _d === void 0 ? false : _d,
89007
- _e = _a.toggleFavorite,
89008
- toggleFavorite = _e === void 0 ? function () {
89111
+ _g = _a.isFavorite,
89112
+ isFavorite = _g === void 0 ? false : _g,
89113
+ _h = _a.toggleFavorite,
89114
+ toggleFavorite = _h === void 0 ? function () {
89009
89115
  return __awaiter(void 0, void 0, void 0, function () {
89010
89116
  return __generator(this, function (_a) {
89011
89117
  return [2 /*return*/];
89012
89118
  });
89013
89119
  });
89014
- } : _e;
89015
- var _f = usePlayerControls({
89120
+ } : _h;
89121
+ var videoRef = useRef(null);
89122
+ var _j = usePlayerControls({
89016
89123
  startTime: startTime,
89017
89124
  setLoading: setLoading,
89018
89125
  handleTrackProgress: handleTrackProgress,
@@ -89022,38 +89129,55 @@ var VideoPlayer = function VideoPlayer(_a) {
89022
89129
  setIsPlaying: setIsPlaying,
89023
89130
  shouldPlayerBeFocusedOnSpaceClick: shouldPlayerBeFocusedOnSpaceClick
89024
89131
  }),
89025
- mouseMoveHandler = _f.mouseMoveHandler,
89026
- playerContainerRef = _f.playerContainerRef,
89027
- playPauseHandler = _f.playPauseHandler,
89028
- handleFullScreen = _f.handleFullScreen,
89029
- videoPlayerRef = _f.videoPlayerRef,
89030
- playing = _f.playing,
89031
- volume = _f.volume,
89032
- muted = _f.muted,
89033
- progressHandler = _f.progressHandler,
89034
- bufferStartHandler = _f.bufferStartHandler,
89035
- bufferEndHandler = _f.bufferEndHandler,
89036
- onPlayerStart = _f.onPlayerStart,
89037
- setVideoState = _f.setVideoState,
89038
- playbackRate = _f.playbackRate,
89039
- controlRef = _f.controlRef,
89040
- rewindHandler = _f.rewindHandler,
89041
- handleFastForward = _f.handleFastForward,
89042
- formatCurrentTime = _f.formatCurrentTime,
89043
- played = _f.played,
89044
- onSeekMouseDownHandler = _f.onSeekMouseDownHandler,
89045
- seekHandler = _f.seekHandler,
89046
- seekMouseUpHandler = _f.seekMouseUpHandler,
89047
- muteHandler = _f.muteHandler,
89048
- volumeChangeHandler = _f.volumeChangeHandler,
89049
- formatDuration = _f.formatDuration,
89050
- isSubtitlesChecked = _f.isSubtitlesChecked,
89051
- toggleSubtitlesCheck = _f.toggleSubtitlesCheck,
89052
- isFullscreen = _f.isFullscreen,
89053
- isControlsActive = _f.isControlsActive,
89054
- currentSubtitle = _f.currentSubtitle;
89055
- // Make sure we have a valid URL to avoid ReactPlayer errors
89056
- var validUrl = url || '';
89132
+ mouseMoveHandler = _j.mouseMoveHandler,
89133
+ playerContainerRef = _j.playerContainerRef,
89134
+ playPauseHandler = _j.playPauseHandler,
89135
+ handleFullScreen = _j.handleFullScreen,
89136
+ videoPlayerRef = _j.videoPlayerRef,
89137
+ playing = _j.playing,
89138
+ volume = _j.volume,
89139
+ muted = _j.muted,
89140
+ progressHandler = _j.progressHandler,
89141
+ bufferStartHandler = _j.bufferStartHandler,
89142
+ bufferEndHandler = _j.bufferEndHandler,
89143
+ onPlayerStart = _j.onPlayerStart,
89144
+ setVideoState = _j.setVideoState,
89145
+ playbackRate = _j.playbackRate,
89146
+ controlRef = _j.controlRef,
89147
+ rewindHandler = _j.rewindHandler,
89148
+ handleFastForward = _j.handleFastForward,
89149
+ formatCurrentTime = _j.formatCurrentTime,
89150
+ played = _j.played,
89151
+ onSeekMouseDownHandler = _j.onSeekMouseDownHandler,
89152
+ seekHandler = _j.seekHandler,
89153
+ seekMouseUpHandler = _j.seekMouseUpHandler,
89154
+ muteHandler = _j.muteHandler,
89155
+ volumeChangeHandler = _j.volumeChangeHandler,
89156
+ formatDuration = _j.formatDuration,
89157
+ isSubtitlesChecked = _j.isSubtitlesChecked,
89158
+ toggleSubtitlesCheck = _j.toggleSubtitlesCheck,
89159
+ isFullscreen = _j.isFullscreen,
89160
+ isControlsActive = _j.isControlsActive,
89161
+ currentSubtitle = _j.currentSubtitle,
89162
+ setCurrentSubtitle = _j.setCurrentSubtitle;
89163
+ var setupHLSSubtitleTracking = useHLSSubtitles({
89164
+ videoPlayerRef: videoPlayerRef,
89165
+ isSubtitlesChecked: isSubtitlesChecked,
89166
+ setCurrentSubtitle: setCurrentSubtitle
89167
+ }).setupHLSSubtitleTracking;
89168
+ useEffect(function () {
89169
+ var cleanup = injectHLSSubtitleStyles();
89170
+ return cleanup;
89171
+ }, []);
89172
+ var handlePlayerReady = function handlePlayerReady() {
89173
+ var _a;
89174
+ onPlayerStart();
89175
+ setupHLSSubtitleTracking();
89176
+ var videoElement = (_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getInternalPlayer();
89177
+ if (videoElement && videoElement instanceof HTMLVideoElement) {
89178
+ videoRef.current = videoElement;
89179
+ }
89180
+ };
89057
89181
  return jsxRuntimeExports.jsxs(StyledWrapper, {
89058
89182
  tabIndex: 0,
89059
89183
  onMouseMove: mouseMoveHandler,
@@ -89062,12 +89186,11 @@ var VideoPlayer = function VideoPlayer(_a) {
89062
89186
  onClick: function onClick(e) {
89063
89187
  return e.stopPropagation();
89064
89188
  },
89065
- "data-testid": 'video-player-wrapper',
89066
- children: [jsxRuntimeExports.jsx(StyledVideoPlayerWrapper, {
89189
+ children: [jsxRuntimeExports.jsxs(StyledVideoPlayerWrapper, {
89067
89190
  onClick: playPauseHandler,
89068
89191
  onDoubleClick: handleFullScreen,
89069
- children: jsxRuntimeExports.jsx(ReactPlayer, {
89070
- url: validUrl,
89192
+ children: [jsxRuntimeExports.jsx(ReactPlayer, {
89193
+ url: url,
89071
89194
  ref: videoPlayerRef,
89072
89195
  className: 'react-player',
89073
89196
  width: '100%',
@@ -89078,7 +89201,7 @@ var VideoPlayer = function VideoPlayer(_a) {
89078
89201
  onProgress: progressHandler,
89079
89202
  onBuffer: bufferStartHandler,
89080
89203
  onBufferEnd: bufferEndHandler,
89081
- onReady: onPlayerStart,
89204
+ onReady: handlePlayerReady,
89082
89205
  onPlay: function onPlay() {
89083
89206
  return setIsPlaying(true);
89084
89207
  },
@@ -89106,13 +89229,16 @@ var VideoPlayer = function VideoPlayer(_a) {
89106
89229
  file: {
89107
89230
  hlsOptions: {
89108
89231
  autoStartLoad: true,
89109
- renderTextTracksNatively: false
89232
+ renderTextTracksNatively: true
89110
89233
  }
89111
89234
  }
89112
89235
  }
89113
- }, validUrl)
89114
- }), loading && jsxRuntimeExports.jsx(StyledPlayerLoader, {
89115
- children: jsxRuntimeExports.jsx(StyledLoader, {})
89236
+ }, url), loading && jsxRuntimeExports.jsx(StyledPlayerLoader, {
89237
+ children: jsxRuntimeExports.jsx(StyledLoader, {})
89238
+ }), isSubtitlesChecked && currentSubtitle && jsxRuntimeExports.jsx(StyledSubtitles, {
89239
+ "$controls": isControlsActive,
89240
+ children: currentSubtitle
89241
+ })]
89116
89242
  }), jsxRuntimeExports.jsx(StyledControlsContainer, {
89117
89243
  ref: controlRef,
89118
89244
  children: jsxRuntimeExports.jsx(Controls, {
@@ -89138,16 +89264,13 @@ var VideoPlayer = function VideoPlayer(_a) {
89138
89264
  isFavorite: isFavorite,
89139
89265
  toggleIsFavorite: toggleFavorite,
89140
89266
  isFullscreen: isFullscreen,
89141
- subtitle: !!subtitleUrl,
89267
+ subtitle: !!subtitleUrl || ((_d = (_c = (_b = videoPlayerRef.current) === null || _b === void 0 ? void 0 : _b.getInternalPlayer()) === null || _c === void 0 ? void 0 : _c.textTracks) === null || _d === void 0 ? void 0 : _d.length) > 0,
89142
89268
  handleSkipBackward: handlePreviousVideo,
89143
89269
  handleSkipForward: handleNextVideo,
89144
89270
  isNextVideo: isNextVideo,
89145
89271
  isPreviousVideo: isPreviousVideo,
89146
89272
  showFavorite: showFavorite
89147
89273
  })
89148
- }), isSubtitlesChecked && currentSubtitle && jsxRuntimeExports.jsx(StyledSubtitles, {
89149
- "$controls": isControlsActive,
89150
- children: currentSubtitle
89151
89274
  })]
89152
89275
  });
89153
89276
  };
@@ -1,3 +1,3 @@
1
- export { A as AudioPlayer, k as Badge, h as Breadcrumb, B as Button, e as Checkbox, j as ColorPicker, o as ColumnNavigation, C as CourseCard, c as CustomSwitcher, m as CustomTooltip, d as DatePicker, u as DrawerTips, D as DropDown, G as GridActionMenu, L as Loader, N as NavigationBar, f as Pagination, P as PhoneCountryCode, R as RadioButton, v as RangeSlider, S as SearchInput, n as SplashScreen, p as StatusIndicator, s as TabNavigation, q as TabPanel, b as ThemeProvider, i as Tile, l as TooltipHeight, T as TranslationProvider, U as Uploader, V as VideoPlayer, t as activeTabClassName } from './index-CMNE0hhl.esm.js';
1
+ export { A as AudioPlayer, k as Badge, h as Breadcrumb, B as Button, e as Checkbox, j as ColorPicker, o as ColumnNavigation, C as CourseCard, c as CustomSwitcher, m as CustomTooltip, d as DatePicker, u as DrawerTips, D as DropDown, G as GridActionMenu, L as Loader, N as NavigationBar, f as Pagination, P as PhoneCountryCode, R as RadioButton, v as RangeSlider, S as SearchInput, n as SplashScreen, p as StatusIndicator, s as TabNavigation, q as TabPanel, b as ThemeProvider, i as Tile, l as TooltipHeight, T as TranslationProvider, U as Uploader, V as VideoPlayer, t as activeTabClassName } from './index-CyUx723z.esm.js';
2
2
  import 'react';
3
3
  import 'react-dom';
@@ -1,5 +1,6 @@
1
1
  import { StylesConfig } from 'react-select';
2
2
  import { FormikTouched } from 'formik';
3
+ import { ReactNode } from 'react';
3
4
  export interface IAsyncSelectOption {
4
5
  value: string;
5
6
  label: string;
@@ -52,6 +53,9 @@ export interface ISelectFieldProps {
52
53
  isClearable?: boolean;
53
54
  onFocus?: () => void;
54
55
  isDisabled?: boolean;
56
+ noOptionsMessage?: ((obj: {
57
+ inputValue: string;
58
+ }) => ReactNode) | undefined;
55
59
  isLoading?: boolean;
56
60
  label?: string;
57
61
  error?: boolean;
@@ -1,3 +1,4 @@
1
1
  import { ReactElement } from 'react';
2
2
  import { PlayerProps } from './Player.interface';
3
3
  export declare const VideoPlayer: ({ customStyles, startTime, loading, setLoading, handleTrackProgress, url, subtitle: subtitleUrl, handleNextVideo, handlePreviousVideo, isNextVideo, isPreviousVideo, isPlaying, setIsPlaying, shouldPlayerBeFocusedOnSpaceClick, showFavorite, isFavorite, toggleFavorite, }: PlayerProps) => ReactElement;
4
+ export default VideoPlayer;
@@ -1,4 +1,4 @@
1
- import React, { RefObject } from 'react';
1
+ import React, { Dispatch, RefObject, SetStateAction } from 'react';
2
2
  import ReactPlayer from 'react-player';
3
3
  import { ControlsProps } from './Controls/Controls.interface';
4
4
  export interface VideoState {
@@ -59,5 +59,6 @@ export interface UsePlayerControlsState extends Omit<ControlsProps, 'isFavorite'
59
59
  isFullscreen: boolean;
60
60
  isControlsActive: boolean;
61
61
  currentSubtitle: string;
62
+ setCurrentSubtitle: Dispatch<SetStateAction<string>>;
62
63
  }
63
64
  export {};
@@ -6,3 +6,5 @@ export declare const StyledControlsContainer: import("styled-components/dist/typ
6
6
  export declare const StyledSubtitles: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
7
7
  $controls: boolean;
8
8
  }>> & string;
9
+ export declare const HLS_SUBTITLE_STYLES = "\n /* Hide native HLS subtitles completely - comprehensive approach */\n video::cue {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n video::-webkit-media-text-track-display {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n video::cue-region {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n video::-webkit-media-text-track-container {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n /* Target ReactPlayer specifically */\n .react-player video::cue {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .react-player video::-webkit-media-text-track-display {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .react-player video::cue-region {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .react-player video::-webkit-media-text-track-container {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n /* Additional selectors for different browsers */\n video::-moz-media-text-track-display {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n video::-ms-media-text-track-display {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n /* Hide any subtitle overlays */\n .react-player video + div[style*=\"position: absolute\"] {\n display: none !important;\n }\n \n /* Target HLS video player specifically */\n .hls-video-player::cue {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .hls-video-player::-webkit-media-text-track-display {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .hls-video-player::-webkit-media-text-track-container {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n \n .hls-video-player::cue-region {\n display: none !important;\n visibility: hidden !important;\n opacity: 0 !important;\n }\n";
10
+ export declare const injectHLSSubtitleStyles: () => (() => void);
@@ -0,0 +1,12 @@
1
+ import ReactPlayer from 'react-player';
2
+ interface UseHLSSubtitlesProps {
3
+ videoPlayerRef: React.RefObject<ReactPlayer | null>;
4
+ isSubtitlesChecked: boolean;
5
+ setCurrentSubtitle: (subtitle: string) => void;
6
+ }
7
+ interface UseHLSSubtitlesReturn {
8
+ extractHLSSubtitleText: () => void;
9
+ setupHLSSubtitleTracking: () => void;
10
+ }
11
+ export declare const useHLSSubtitles: ({ videoPlayerRef, isSubtitlesChecked, setCurrentSubtitle, }: UseHLSSubtitlesProps) => UseHLSSubtitlesReturn;
12
+ export {};