suada-components 1.2.0 → 1.3.0

package/dist/components/{index-KXbxnyZn.esm.js → index-C_u0zRwP.esm.js}

@@ -2425,7 +2425,7 @@ var Button$1 = function Button(_a) {
     style: customStyles,
     onClick: onClick,
     type: htmlType,
-    className: className,
+    className: "".concat(className, " button-theme-color"),
     children: [iconLeft, label, iconRight]
   });
 };
@@ -32371,7 +32371,7 @@ var StylesCardWrapper = dt.div(templateObject_10$2 || (templateObject_10$2 = __m
 });
 var StyledChecked = dt.div(templateObject_11$2 || (templateObject_11$2 = __makeTemplateObject(["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 2;\n  background-color: rgb(0 0 0 / 23%);\n"], ["\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  z-index: 2;\n  background-color: rgb(0 0 0 / 23%);\n"])));
 dt.div(templateObject_12$2 || (templateObject_12$2 = __makeTemplateObject(["\n  position: relative;\n  cursor: pointer;\n  .icon_button {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n"], ["\n  position: relative;\n  cursor: pointer;\n  .icon_button {\n    position: absolute;\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n  }\n"])));
-var CourseStatusContainer = dt.div(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n  color: #fff;\n  height: 32px;\n  padding: 4px 12px;\n  text-transform: capitalize;\n  border-radius: 4px;\n  background: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  color: #fff;\n  height: 32px;\n  padding: 4px 12px;\n  text-transform: capitalize;\n  border-radius: 4px;\n  background: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
+var CourseStatusContainer = dt.div(templateObject_13$2 || (templateObject_13$2 = __makeTemplateObject(["\n  color: #fff;\n  height: 32px;\n  padding: 4px 12px;\n  text-transform: capitalize;\n  border-radius: 4px;\n  background: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  color: #fff;\n  height: 32px;\n  padding: 4px 12px;\n  text-transform: capitalize;\n  border-radius: 4px;\n  background: ", ";\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])), function (_a) {
   var $status = _a.$status;
   return !$status ? '#EA382A' : '#00905E';
 });
@@ -32426,7 +32426,7 @@ var GridItem = dt.div(templateObject_32 || (templateObject_32 = __makeTemplateOb
   var $isFromUser = _a.$isFromUser;
   return $isFromUser && "\n  figure {\n    position: relative;\n    &:after {\n      content: 'View Analytics';\n      position: absolute;\n      top: 0;\n      opacity: 0;\n      color: #06c68f;\n      left: 0;\n      font-size: 24px;\n      font-weight: 700;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      background: rgba(255, 255, 255, 0.9);\n      width: 100%;\n      height: 100%;\n      transition: opacity 0.3s ease;\n      z-index: 10;\n    }\n  }\n\n  &:hover {\n    figure {\n      &:after {\n        opacity: 1;\n      }\n    }\n  }\n  " || '';
 });
-var templateObject_1$o, templateObject_2$j, templateObject_3$f, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$4, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$1, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32;
+var templateObject_1$o, templateObject_2$j, templateObject_3$f, templateObject_4$c, templateObject_5$8, templateObject_6$7, templateObject_7$5, templateObject_8$4, templateObject_9$3, templateObject_10$2, templateObject_11$2, templateObject_12$2, templateObject_13$2, templateObject_14$1, templateObject_15$1, templateObject_16$1, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24$1, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32;
 
 var TooltipHeight$1 = function TooltipHeight(_a) {
   var text = _a.text,
@@ -34740,7 +34740,9 @@ DocumentAttachment.displayName = 'DocumentAttachment';
 var DownloadIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
   var className = _a.className,
     onClick = _a.onClick,
-    props = __rest(_a, ["className", "onClick"]);
+    _b = _a.fill,
+    fill = _b === void 0 ? '#FFFFFF' : _b,
+    props = __rest(_a, ["className", "onClick", "fill"]);
   return jsxRuntimeExports.jsxs("svg", __assign({
     ref: ref,
     width: '24',
@@ -34753,10 +34755,10 @@ var DownloadIcon = /*#__PURE__*/forwardRef(function (_a, ref) {
   }, props, {
     children: [jsxRuntimeExports.jsx("path", {
       d: 'M19.5 18V21H4.5V18H3V21C3 21.3978 3.15804 21.7794 3.43934 22.0607C3.72064 22.342 4.10218 22.5 4.5 22.5H19.5C19.8978 22.5 20.2794 22.342 20.5607 22.0607C20.842 21.7794 21 21.3978 21 21V18H19.5Z',
-      fill: '#020210'
+      fill: fill
     }), jsxRuntimeExports.jsx("path", {
       d: 'M19.5 10.5L18.4425 9.4425L12.75 15.1275V1.5H11.25V15.1275L5.5575 9.4425L4.5 10.5L12 18L19.5 10.5Z',
-      fill: '#020210'
+      fill: fill
     })]
   }));
 });
@@ -42810,7 +42812,7 @@ var ItemContainer = dt.div(templateObject_11$1 || (templateObject_11$1 = __makeT
   return width || '100%';
 });
 dt.div(templateObject_12$1 || (templateObject_12$1 = __makeTemplateObject(["\n  width: 390px;\n"], ["\n  width: 390px;\n"])));
-var CancelButton = dt.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  cursor: pointer;\n"], ["\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  cursor: pointer;\n"])), function (_a) {
+var CancelButton = dt.div(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  cursor: pointer;\n"], ["\n  position: absolute;\n  right: ", ";\n  top: ", ";\n  cursor: pointer;\n"])), function (_a) {
   var right = _a.right;
   return right || '-13px';
 }, function (_a) {
@@ -42841,7 +42843,7 @@ var Title = dt.h2(templateObject_24 || (templateObject_24 = __makeTemplateObject
   var $required = _a.$required;
   return $required ? "\n    &::after {\n      content: '*';\n      color: red;\n      margin-left: 3px;\n    }\n  " : '';
 });
-var templateObject_1$j, templateObject_2$e, templateObject_3$a, templateObject_4$7, templateObject_5$6, templateObject_6$5, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24;
+var templateObject_1$j, templateObject_2$e, templateObject_3$a, templateObject_4$7, templateObject_5$6, templateObject_6$5, templateObject_7$3, templateObject_8$2, templateObject_9$1, templateObject_10$1, templateObject_11$1, templateObject_12$1, templateObject_13$1, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24;
 
 var InsertDriveFile = {};
 
@@ -61137,7 +61139,13 @@ var Checkbox = function Checkbox(_a) {
   });
 };
 
-var PaginationWrapper = dt.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n  font-family: 'Open Sans', sans-serif;\n  font-weight: 600;\n\n  .MuiPagination-ul {\n    flex-wrap: nowrap;\n  }\n  .MuiPaginationItem-root {\n    background: #ffffff;\n    border: 1px solid #e7e9ed !important;\n    border-radius: 4px !important;\n    width: 32px !important;\n    height: 32px !important;\n    padding: 6px 6px !important;\n\n    &:hover {\n      border: 1px solid #cdccd0;\n      background-color: #ffffff;\n    }\n\n    &.Mui-selected {\n      background: #08c694;\n      color: white;\n\n      &:hover {\n        background: #08c694;\n        border: none;\n      }\n    }\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n  font-family: 'Open Sans', sans-serif;\n  font-weight: 600;\n\n  .MuiPagination-ul {\n    flex-wrap: nowrap;\n  }\n  .MuiPaginationItem-root {\n    background: #ffffff;\n    border: 1px solid #e7e9ed !important;\n    border-radius: 4px !important;\n    width: 32px !important;\n    height: 32px !important;\n    padding: 6px 6px !important;\n\n    &:hover {\n      border: 1px solid #cdccd0;\n      background-color: #ffffff;\n    }\n\n    &.Mui-selected {\n      background: #08c694;\n      color: white;\n\n      &:hover {\n        background: #08c694;\n        border: none;\n      }\n    }\n  }\n"])));
+var PaginationWrapper = dt.div(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n  font-family: 'Open Sans', sans-serif;\n  font-weight: 600;\n\n  .MuiPagination-ul {\n    flex-wrap: nowrap;\n  }\n  .MuiPaginationItem-root {\n    background: #ffffff;\n    border: 1px solid #e7e9ed !important;\n    border-radius: 4px !important;\n    width: 32px !important;\n    height: 32px !important;\n    padding: 6px 6px !important;\n\n    &:hover {\n      border: 1px solid #cdccd0;\n      background-color: #ffffff;\n    }\n\n    &.Mui-selected {\n      background: ", ";\n      color: white;\n\n      &:hover {\n        background: ", ";\n        border: none;\n      }\n    }\n  }\n"], ["\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  gap: 20px;\n  font-family: 'Open Sans', sans-serif;\n  font-weight: 600;\n\n  .MuiPagination-ul {\n    flex-wrap: nowrap;\n  }\n  .MuiPaginationItem-root {\n    background: #ffffff;\n    border: 1px solid #e7e9ed !important;\n    border-radius: 4px !important;\n    width: 32px !important;\n    height: 32px !important;\n    padding: 6px 6px !important;\n\n    &:hover {\n      border: 1px solid #cdccd0;\n      background-color: #ffffff;\n    }\n\n    &.Mui-selected {\n      background: ", ";\n      color: white;\n\n      &:hover {\n        background: ", ";\n        border: none;\n      }\n    }\n  }\n"])), function (_a) {
+  var $themeColor = _a.$themeColor;
+  return $themeColor || '#08c694';
+}, function (_a) {
+  var $themeColor = _a.$themeColor;
+  return $themeColor || '#08c694';
+});
 var templateObject_1$e;
 
 var Pagination = function Pagination(_a) {
@@ -61145,8 +61153,10 @@ var Pagination = function Pagination(_a) {
     totalPages = _a.totalPages,
     handleChange = _a.handleChange,
     perPage = _a.perPage,
+    themeColor = _a.themeColor,
     handlePerPageChange = _a.handlePerPageChange;
   return jsxRuntimeExports.jsxs(PaginationWrapper, {
+    "$themeColor": themeColor,
     children: [perPage && jsxRuntimeExports.jsxs(Select$1, {
       variant: 'standard',
       "native": true,
@@ -81389,7 +81399,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.youtube,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerYouTube' */
-	      './YouTube-CBwRsGZb.esm.js'
+	      './YouTube-DvS99YSi.esm.js'
 	    ).then(function (n) { return n.Y; }))
 	  },
 	  {
@@ -81398,7 +81408,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.soundcloud,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerSoundCloud' */
-	      './SoundCloud-BQ1Bv-Ms.esm.js'
+	      './SoundCloud-1OvUzexh.esm.js'
 	    ).then(function (n) { return n.S; }))
 	  },
 	  {
@@ -81407,7 +81417,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.vimeo,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerVimeo' */
-	      './Vimeo-Ocs8S_PZ.esm.js'
+	      './Vimeo-B6eklZts.esm.js'
 	    ).then(function (n) { return n.V; }))
 	  },
 	  {
@@ -81416,7 +81426,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.mux,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerMux' */
-	      './Mux-Bj4ELcFh.esm.js'
+	      './Mux-bOE4IGCQ.esm.js'
 	    ).then(function (n) { return n.M; }))
 	  },
 	  {
@@ -81425,7 +81435,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.facebook,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerFacebook' */
-	      './Facebook-DjA6gknl.esm.js'
+	      './Facebook-g8siL1GN.esm.js'
 	    ).then(function (n) { return n.F; }))
 	  },
 	  {
@@ -81434,7 +81444,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.streamable,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerStreamable' */
-	      './Streamable-DTv6vm7m.esm.js'
+	      './Streamable-DkZbzMhq.esm.js'
 	    ).then(function (n) { return n.S; }))
 	  },
 	  {
@@ -81443,7 +81453,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.wistia,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerWistia' */
-	      './Wistia-CjqtkoU1.esm.js'
+	      './Wistia-T3lTN9f9.esm.js'
 	    ).then(function (n) { return n.W; }))
 	  },
 	  {
@@ -81452,7 +81462,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.twitch,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerTwitch' */
-	      './Twitch-BrQFLQcf.esm.js'
+	      './Twitch-CAR5VDqo.esm.js'
 	    ).then(function (n) { return n.T; }))
 	  },
 	  {
@@ -81461,7 +81471,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.dailymotion,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerDailyMotion' */
-	      './DailyMotion-CxLlr0cR.esm.js'
+	      './DailyMotion-fTfJbAKR.esm.js'
 	    ).then(function (n) { return n.D; }))
 	  },
 	  {
@@ -81470,7 +81480,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.mixcloud,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerMixcloud' */
-	      './Mixcloud-DCuoGh8X.esm.js'
+	      './Mixcloud-1pcndu_p.esm.js'
 	    ).then(function (n) { return n.M; }))
 	  },
 	  {
@@ -81479,7 +81489,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.vidyard,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerVidyard' */
-	      './Vidyard-BCPvgfz4.esm.js'
+	      './Vidyard-Dj__VHEu.esm.js'
 	    ).then(function (n) { return n.V; }))
 	  },
 	  {
@@ -81488,7 +81498,7 @@ function requirePlayers () {
 	    canPlay: import_patterns.canPlay.kaltura,
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerKaltura' */
-	      './Kaltura-B50rwAlx.esm.js'
+	      './Kaltura-CgG6fwG2.esm.js'
 	    ).then(function (n) { return n.K; }))
 	  },
 	  {
@@ -81500,7 +81510,7 @@ function requirePlayers () {
 	    },
 	    lazyPlayer: (0, import_utils.lazy)(() => import(
 	      /* webpackChunkName: 'reactPlayerFilePlayer' */
-	      './FilePlayer-C-z4wNAs.esm.js'
+	      './FilePlayer--e_TvukB.esm.js'
 	    ).then(function (n) { return n.F; }))
 	  }
 	];
@@ -82321,7 +82331,7 @@ function requireReactPlayer () {
 	var import_Player = __toESM(/*@__PURE__*/ requirePlayer());
 	const Preview = (0, import_utils.lazy)(() => import(
 	  /* webpackChunkName: 'reactPlayerPreview' */
-	  './Preview-Cgl2b2Yo.esm.js'
+	  './Preview-ZZ8yCxMr.esm.js'
 	).then(function (n) { return n.P; }));
 	const IS_BROWSER = typeof window !== "undefined" && window.document && typeof document !== "undefined";
 	const IS_GLOBAL = typeof commonjsGlobal !== "undefined" && commonjsGlobal.window && commonjsGlobal.window.document;
@@ -82540,6 +82550,27 @@ var StyledSubtitles = dt.div(templateObject_7$1 || (templateObject_7$1 = __makeT
   var $controls = _a.$controls;
   return $controls ? '60px' : '10px';
 });
+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";
+var injectHLSSubtitleStyles = function injectHLSSubtitleStyles() {
+  var addSubtitleStyles = function addSubtitleStyles() {
+    var existingStyle = document.getElementById('hls-subtitle-styles');
+    if (existingStyle) {
+      existingStyle.remove();
+    }
+    var style = document.createElement('style');
+    style.id = 'hls-subtitle-styles';
+    style.textContent = HLS_SUBTITLE_STYLES;
+    document.head.appendChild(style);
+  };
+  addSubtitleStyles();
+  // Return cleanup function
+  return function () {
+    var existingStyle = document.getElementById('hls-subtitle-styles');
+    if (existingStyle) {
+      existingStyle.remove();
+    }
+  };
+};
 var templateObject_1$9, templateObject_2$7, templateObject_3$4, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$1;
 
 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"])), {
@@ -82560,11 +82591,12 @@ var StyledTimeTrack = dt.div(templateObject_7 || (templateObject_7 = __makeTempl
   fontStyle: 'descriptor'
 });
 var StyledHeartIconContainer = dt.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > svg > path {\n    fill: var(--neutral-colors-light);\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n\n  & > svg > path {\n    fill: var(--neutral-colors-light);\n  }\n"])));
-var StyledSubtitlesIconContainer = dt.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
-var StyledFullscreenIconContainer = dt.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n"])));
-var StyledVolumeIconContainer = dt.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n"])));
-var StyledPlayPauseIconContainer = dt.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n"])));
-var templateObject_1$8, templateObject_2$6, templateObject_3$3, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12;
+var StyledDownloadIconContainer = dt.div(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg {\n    width: 24px !important;\n    height: 24px !important;\n    \n    @media screen and (max-width: 1500px) {\n      width: 20px !important;\n      height: 20px !important;\n    }\n\n    @media screen and (max-width: 1000px) {\n      width: 16px !important;\n      height: 16px !important;\n    }\n  }\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n\n  & > svg {\n    width: 24px !important;\n    height: 24px !important;\n    \n    @media screen and (max-width: 1500px) {\n      width: 20px !important;\n      height: 20px !important;\n    }\n\n    @media screen and (max-width: 1000px) {\n      width: 16px !important;\n      height: 16px !important;\n    }\n  }\n\n  & > svg > path {\n    fill: #FFFFFF !important;\n    transition: fill 0.2s ease;\n  }\n\n  &:hover > svg > path {\n    fill: #08C694 !important;\n  }\n"])));
+var StyledSubtitlesIconContainer = dt.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n"])));
+var StyledFullscreenIconContainer = dt.div(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n"])));
+var StyledVolumeIconContainer = dt.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n"])));
+var StyledPlayPauseIconContainer = dt.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n"], ["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n"])));
+var templateObject_1$8, templateObject_2$6, templateObject_3$3, templateObject_4$1, templateObject_5$1, templateObject_6$1, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13;
 
 var PLAYBACK_SPEED_LIST = [{
   label: 'playback_speed.2x',
@@ -82778,7 +82810,60 @@ var Controls = function Controls(_a) {
     handleSkipForward = _a.handleSkipForward,
     isNextVideo = _a.isNextVideo,
     isPreviousVideo = _a.isPreviousVideo,
-    showFavorite = _a.showFavorite;
+    showFavorite = _a.showFavorite,
+    showDownload = _a.showDownload,
+    downloadUrl = _a.downloadUrl,
+    downloadFileName = _a.downloadFileName,
+    onDownload = _a.onDownload;
+  var handleDownloadClick = function handleDownloadClick() {
+    return __awaiter(void 0, void 0, void 0, function () {
+      var response, blob, blobUrl, link, error_1, link;
+      return __generator(this, function (_a) {
+        switch (_a.label) {
+          case 0:
+            if (!onDownload) return [3 /*break*/, 1];
+            onDownload();
+            return [3 /*break*/, 6];
+          case 1:
+            if (!downloadUrl) return [3 /*break*/, 6];
+            _a.label = 2;
+          case 2:
+            _a.trys.push([2, 5,, 6]);
+            return [4 /*yield*/, fetch(downloadUrl)];
+          case 3:
+            response = _a.sent();
+            if (!response.ok) throw new Error('Download failed');
+            return [4 /*yield*/, response.blob()];
+          case 4:
+            blob = _a.sent();
+            blobUrl = window.URL.createObjectURL(blob);
+            link = document.createElement('a');
+            link.href = blobUrl;
+            link.download = downloadFileName || 'video-download';
+            link.style.display = 'none';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            // Clean up blob URL
+            window.URL.revokeObjectURL(blobUrl);
+            return [3 /*break*/, 6];
+          case 5:
+            error_1 = _a.sent();
+            console.error('Download failed:', error_1);
+            link = document.createElement('a');
+            link.href = downloadUrl;
+            link.download = downloadFileName || 'video-download';
+            link.style.display = 'none';
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+            return [3 /*break*/, 6];
+          case 6:
+            return [2 /*return*/];
+        }
+      });
+    });
+  };
   return jsxRuntimeExports.jsxs(StyledControls, {
     children: [jsxRuntimeExports.jsx(StyledSlider, {
       type: 'range',
@@ -82828,6 +82913,10 @@ var Controls = function Controls(_a) {
           active: isFavorite,
           onClick: toggleIsFavorite
         })
+      }), showDownload && downloadUrl && jsxRuntimeExports.jsx(StyledDownloadIconContainer, {
+        children: jsxRuntimeExports.jsx(DownloadIcon, {
+          onClick: handleDownloadClick
+        })
       }), jsxRuntimeExports.jsx(PlaybackSpeedMenu, {
         playbackSpeed: playbackRate,
         onPlaybackSpeedChange: function onPlaybackSpeedChange(speed) {
@@ -88690,13 +88779,18 @@ function usePlayerControls(_a) {
   var duration = videoPlayerRef.current ? videoPlayerRef.current.getDuration() : 0;
   var formatCurrentTime = FormatSecondsToTimeString(currentTime);
   var formatDuration = FormatSecondsToTimeString(duration);
+  // Using previous method for old videos(we used to parse subtitles via link)
   useEffect(function () {
-    fetch(subtitleUrl).then(function (response) {
-      return response.text();
-    }).then(function (content) {
-      var parsedSubtitles = parseVTT(content);
-      setSubtitles(parsedSubtitles);
-    });
+    if (subtitleUrl) {
+      fetch(subtitleUrl).then(function (response) {
+        return response.text();
+      }).then(function (content) {
+        var parsedSubtitles = parseVTT(content);
+        setSubtitles(parsedSubtitles);
+      })["catch"](function (error) {
+        console.error('Error fetching external subtitles:', error);
+      });
+    }
   }, [subtitleUrl]);
   useEffect(function () {
     var handleFullscreenChange = function handleFullscreenChange() {
@@ -88727,8 +88821,9 @@ function usePlayerControls(_a) {
   }, [videoPlayerRef]);
   var progressHandler = useCallback(function (state) {
     return __awaiter(_this, void 0, void 0, function () {
-      var currentSubtitleEntry, i, sub, i, sub, currentTime_1, now;
-      return __generator(this, function (_a) {
+      var videoElement, hasHLSSubtitles, currentSubtitleEntry, i, sub, i, sub, currentTime_1, now;
+      var _a, _b;
+      return __generator(this, function (_c) {
         if (count > 2) {
           if (controlRef.current) {
             controlRef.current.style.visibility = 'hidden';
@@ -88737,44 +88832,47 @@ function usePlayerControls(_a) {
         } else if (controlRef.current && controlRef.current.style.visibility === 'visible' && isControlsActive) {
           count += 1;
         }
-        if (lastSubtitleIndexRef.current !== null) {
-          if (state.playedSeconds > lastPlaybackTimeRef.current) {
-            // Searching forward
-            for (i = lastSubtitleIndexRef.current; i < subtitles.length; i++) {
-              sub = subtitles[i];
-              if (state.playedSeconds >= sub.start && state.playedSeconds <= sub.end) {
-                currentSubtitleEntry = sub;
-                lastSubtitleIndexRef.current = i;
-                break;
+        videoElement = (_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getInternalPlayer();
+        hasHLSSubtitles = ((_b = videoElement === null || videoElement === void 0 ? void 0 : videoElement.textTracks) === null || _b === void 0 ? void 0 : _b.length) > 0;
+        if (subtitles.length > 0 && !hasHLSSubtitles && isSubtitlesChecked) {
+          currentSubtitleEntry = void 0;
+          if (lastSubtitleIndexRef.current !== null) {
+            if (state.playedSeconds > lastPlaybackTimeRef.current) {
+              for (i = lastSubtitleIndexRef.current; i < subtitles.length; i++) {
+                sub = subtitles[i];
+                if (state.playedSeconds >= sub.start && state.playedSeconds <= sub.end) {
+                  currentSubtitleEntry = sub;
+                  lastSubtitleIndexRef.current = i;
+                  break;
+                }
               }
-            }
-          } else {
-            // Searching backward
-            for (i = lastSubtitleIndexRef.current; i >= 0; i--) {
-              sub = subtitles[i];
-              if (state.playedSeconds >= sub.start && state.playedSeconds <= sub.end) {
-                currentSubtitleEntry = sub;
-                lastSubtitleIndexRef.current = i;
-                break;
+            } else {
+              for (i = lastSubtitleIndexRef.current; i >= 0; i--) {
+                sub = subtitles[i];
+                if (state.playedSeconds >= sub.start && state.playedSeconds <= sub.end) {
+                  currentSubtitleEntry = sub;
+                  lastSubtitleIndexRef.current = i;
+                  break;
+                }
               }
             }
           }
-        }
-        if (!currentSubtitleEntry) {
-          currentSubtitleEntry = subtitles.find(function (sub) {
-            return state.playedSeconds >= sub.start && state.playedSeconds <= sub.end;
-          });
+          if (!currentSubtitleEntry) {
+            currentSubtitleEntry = subtitles.find(function (sub) {
+              return state.playedSeconds >= sub.start && state.playedSeconds <= sub.end;
+            });
+            if (currentSubtitleEntry) {
+              lastSubtitleIndexRef.current = subtitles.indexOf(currentSubtitleEntry);
+            }
+          }
+          lastPlaybackTimeRef.current = state.playedSeconds;
           if (currentSubtitleEntry) {
-            lastSubtitleIndexRef.current = subtitles.indexOf(currentSubtitleEntry);
+            setCurrentSubtitle(currentSubtitleEntry.text);
+          } else {
+            setCurrentSubtitle(''); // Clear subtitle if none should be displayed
+            lastSubtitleIndexRef.current = null;
           }
         }
-        lastPlaybackTimeRef.current = state.playedSeconds;
-        if (currentSubtitleEntry) {
-          setCurrentSubtitle(currentSubtitleEntry.text);
-        } else {
-          setCurrentSubtitle(''); // Clear subtitle if none should be displayed
-          lastSubtitleIndexRef.current = null;
-        }
         if (!seeking) {
           setVideoState(function (prev) {
             return __assign(__assign({}, prev), state);
@@ -88790,7 +88888,7 @@ function usePlayerControls(_a) {
         return [2 /*return*/];
       });
     });
-  }, [seeking, handleTrackProgress, isControlsActive, subtitles]);
+  }, [seeking, handleTrackProgress, isControlsActive, subtitles, isSubtitlesChecked]);
   var seekHandler = function seekHandler(e) {
     var v = parseFloat(e.target.value) / 100;
     setVideoState(function (prev) {
@@ -88802,7 +88900,7 @@ function usePlayerControls(_a) {
       videoPlayerRef.current.seekTo(v);
     }
   };
-  var seekMouseUpHandler = function seekMouseUpHandler(e) {
+  var seekMouseUpHandler = function seekMouseUpHandler() {
     setVideoState(function (prev) {
       return __assign(__assign({}, prev), {
         seeking: false
@@ -88841,7 +88939,7 @@ function usePlayerControls(_a) {
       });
     }
   };
-  var onSeekMouseDownHandler = function onSeekMouseDownHandler(e) {
+  var onSeekMouseDownHandler = function onSeekMouseDownHandler() {
     setVideoState(function (prev) {
       return __assign(__assign({}, prev), {
         seeking: true
@@ -88981,14 +89079,89 @@ function usePlayerControls(_a) {
     isFullscreen: isFullscreen,
     isControlsActive: isControlsActive,
     currentSubtitle: currentSubtitle,
+    setCurrentSubtitle: setCurrentSubtitle,
     playing: isPlaying
   };
 }
 
+var useHLSSubtitles = function useHLSSubtitles(_a) {
+  var videoPlayerRef = _a.videoPlayerRef,
+    isSubtitlesChecked = _a.isSubtitlesChecked,
+    setCurrentSubtitle = _a.setCurrentSubtitle;
+  var hlsSubtitleTrackRef = useRef(null);
+  var extractHLSSubtitleText = useCallback(function () {
+    var _a;
+    var videoElement = (_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getInternalPlayer();
+    if (!videoElement || !videoElement.textTracks) return;
+    var _loop_1 = function _loop_1(i) {
+      var track = videoElement.textTracks[i];
+      if (track.kind === 'subtitles' || track.kind === 'captions') {
+        hlsSubtitleTrackRef.current = track;
+        var handleCueChange = function handleCueChange() {
+          if (isSubtitlesChecked && track.activeCues && track.activeCues.length > 0) {
+            var currentCue = track.activeCues[0];
+            if (currentCue && currentCue.text) {
+              setCurrentSubtitle(currentCue.text);
+            }
+          } else if (isSubtitlesChecked) {
+            setCurrentSubtitle('');
+          }
+        };
+        track.removeEventListener('cuechange', handleCueChange);
+        track.addEventListener('cuechange', handleCueChange);
+        track.mode = isSubtitlesChecked ? 'showing' : 'hidden';
+        return "break";
+      }
+    };
+    for (var i = 0; i < videoElement.textTracks.length; i++) {
+      var state_1 = _loop_1(i);
+      if (state_1 === "break") break;
+    }
+  }, [isSubtitlesChecked, setCurrentSubtitle, videoPlayerRef]);
+  var setupHLSSubtitleTracking = useCallback(function () {
+    var _a;
+    var videoElement = (_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getInternalPlayer();
+    if (!videoElement) return;
+    videoElement.classList.add('hls-video-player');
+    var _checkTextTracks = function checkTextTracks(attempt) {
+      if (attempt === void 0) {
+        attempt = 0;
+      }
+      var textTracks = videoElement.textTracks;
+      if (textTracks && textTracks.length > 0) {
+        extractHLSSubtitleText();
+      } else if (attempt < 5) {
+        setTimeout(function () {
+          return _checkTextTracks(attempt + 1);
+        }, 300 * (attempt + 1));
+      }
+    };
+    _checkTextTracks();
+    videoElement.addEventListener('loadedmetadata', function () {
+      _checkTextTracks();
+    });
+  }, [extractHLSSubtitleText, videoPlayerRef]);
+  useEffect(function () {
+    extractHLSSubtitleText();
+  }, [isSubtitlesChecked, extractHLSSubtitleText]);
+  useEffect(function () {
+    var _a;
+    var videoElement = (_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getInternalPlayer();
+    if (videoElement && videoElement.textTracks && videoElement.textTracks.length > 0) {
+      extractHLSSubtitleText();
+    }
+  }, [videoPlayerRef.current, extractHLSSubtitleText]);
+  return {
+    extractHLSSubtitleText: extractHLSSubtitleText,
+    setupHLSSubtitleTracking: setupHLSSubtitleTracking
+  };
+};
+
 var VideoPlayer = function VideoPlayer(_a) {
+  var _b, _c, _d;
   var customStyles = _a.customStyles,
-    _b = _a.startTime,
-    startTime = _b === void 0 ? 0 : _b,
+    _e = _a.startTime,
+    startTime = _e === void 0 ? 0 : _e,
     loading = _a.loading,
     setLoading = _a.setLoading,
     handleTrackProgress = _a.handleTrackProgress,
@@ -89000,20 +89173,25 @@ var VideoPlayer = function VideoPlayer(_a) {
     isPreviousVideo = _a.isPreviousVideo,
     isPlaying = _a.isPlaying,
     setIsPlaying = _a.setIsPlaying,
-    _c = _a.shouldPlayerBeFocusedOnSpaceClick,
-    shouldPlayerBeFocusedOnSpaceClick = _c === void 0 ? false : _c,
+    _f = _a.shouldPlayerBeFocusedOnSpaceClick,
+    shouldPlayerBeFocusedOnSpaceClick = _f === void 0 ? false : _f,
     showFavorite = _a.showFavorite,
-    _d = _a.isFavorite,
-    isFavorite = _d === void 0 ? false : _d,
-    _e = _a.toggleFavorite,
-    toggleFavorite = _e === void 0 ? function () {
+    _g = _a.isFavorite,
+    isFavorite = _g === void 0 ? false : _g,
+    _h = _a.toggleFavorite,
+    toggleFavorite = _h === void 0 ? function () {
       return __awaiter(void 0, void 0, void 0, function () {
         return __generator(this, function (_a) {
           return [2 /*return*/];
         });
       });
-    } : _e;
-  var _f = usePlayerControls({
+    } : _h,
+    showDownload = _a.showDownload,
+    downloadUrl = _a.downloadUrl,
+    downloadFileName = _a.downloadFileName,
+    onDownload = _a.onDownload;
+  var videoRef = useRef(null);
+  var _j = usePlayerControls({
       startTime: startTime,
       setLoading: setLoading,
       handleTrackProgress: handleTrackProgress,
@@ -89023,38 +89201,55 @@ var VideoPlayer = function VideoPlayer(_a) {
       setIsPlaying: setIsPlaying,
       shouldPlayerBeFocusedOnSpaceClick: shouldPlayerBeFocusedOnSpaceClick
     }),
-    mouseMoveHandler = _f.mouseMoveHandler,
-    playerContainerRef = _f.playerContainerRef,
-    playPauseHandler = _f.playPauseHandler,
-    handleFullScreen = _f.handleFullScreen,
-    videoPlayerRef = _f.videoPlayerRef,
-    playing = _f.playing,
-    volume = _f.volume,
-    muted = _f.muted,
-    progressHandler = _f.progressHandler,
-    bufferStartHandler = _f.bufferStartHandler,
-    bufferEndHandler = _f.bufferEndHandler,
-    onPlayerStart = _f.onPlayerStart,
-    setVideoState = _f.setVideoState,
-    playbackRate = _f.playbackRate,
-    controlRef = _f.controlRef,
-    rewindHandler = _f.rewindHandler,
-    handleFastForward = _f.handleFastForward,
-    formatCurrentTime = _f.formatCurrentTime,
-    played = _f.played,
-    onSeekMouseDownHandler = _f.onSeekMouseDownHandler,
-    seekHandler = _f.seekHandler,
-    seekMouseUpHandler = _f.seekMouseUpHandler,
-    muteHandler = _f.muteHandler,
-    volumeChangeHandler = _f.volumeChangeHandler,
-    formatDuration = _f.formatDuration,
-    isSubtitlesChecked = _f.isSubtitlesChecked,
-    toggleSubtitlesCheck = _f.toggleSubtitlesCheck,
-    isFullscreen = _f.isFullscreen,
-    isControlsActive = _f.isControlsActive,
-    currentSubtitle = _f.currentSubtitle;
-  // Make sure we have a valid URL to avoid ReactPlayer errors
-  var validUrl = url || '';
+    mouseMoveHandler = _j.mouseMoveHandler,
+    playerContainerRef = _j.playerContainerRef,
+    playPauseHandler = _j.playPauseHandler,
+    handleFullScreen = _j.handleFullScreen,
+    videoPlayerRef = _j.videoPlayerRef,
+    playing = _j.playing,
+    volume = _j.volume,
+    muted = _j.muted,
+    progressHandler = _j.progressHandler,
+    bufferStartHandler = _j.bufferStartHandler,
+    bufferEndHandler = _j.bufferEndHandler,
+    onPlayerStart = _j.onPlayerStart,
+    setVideoState = _j.setVideoState,
+    playbackRate = _j.playbackRate,
+    controlRef = _j.controlRef,
+    rewindHandler = _j.rewindHandler,
+    handleFastForward = _j.handleFastForward,
+    formatCurrentTime = _j.formatCurrentTime,
+    played = _j.played,
+    onSeekMouseDownHandler = _j.onSeekMouseDownHandler,
+    seekHandler = _j.seekHandler,
+    seekMouseUpHandler = _j.seekMouseUpHandler,
+    muteHandler = _j.muteHandler,
+    volumeChangeHandler = _j.volumeChangeHandler,
+    formatDuration = _j.formatDuration,
+    isSubtitlesChecked = _j.isSubtitlesChecked,
+    toggleSubtitlesCheck = _j.toggleSubtitlesCheck,
+    isFullscreen = _j.isFullscreen,
+    isControlsActive = _j.isControlsActive,
+    currentSubtitle = _j.currentSubtitle,
+    setCurrentSubtitle = _j.setCurrentSubtitle;
+  var setupHLSSubtitleTracking = useHLSSubtitles({
+    videoPlayerRef: videoPlayerRef,
+    isSubtitlesChecked: isSubtitlesChecked,
+    setCurrentSubtitle: setCurrentSubtitle
+  }).setupHLSSubtitleTracking;
+  useEffect(function () {
+    var cleanup = injectHLSSubtitleStyles();
+    return cleanup;
+  }, []);
+  var handlePlayerReady = function handlePlayerReady() {
+    var _a;
+    onPlayerStart();
+    setupHLSSubtitleTracking();
+    var videoElement = (_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getInternalPlayer();
+    if (videoElement && videoElement instanceof HTMLVideoElement) {
+      videoRef.current = videoElement;
+    }
+  };
   return jsxRuntimeExports.jsxs(StyledWrapper, {
     tabIndex: 0,
     onMouseMove: mouseMoveHandler,
@@ -89063,12 +89258,11 @@ var VideoPlayer = function VideoPlayer(_a) {
     onClick: function onClick(e) {
       return e.stopPropagation();
     },
-    "data-testid": 'video-player-wrapper',
-    children: [jsxRuntimeExports.jsx(StyledVideoPlayerWrapper, {
+    children: [jsxRuntimeExports.jsxs(StyledVideoPlayerWrapper, {
       onClick: playPauseHandler,
       onDoubleClick: handleFullScreen,
-      children: jsxRuntimeExports.jsx(ReactPlayer, {
-        url: validUrl,
+      children: [jsxRuntimeExports.jsx(ReactPlayer, {
+        url: url,
         ref: videoPlayerRef,
         className: 'react-player',
         width: '100%',
@@ -89079,7 +89273,7 @@ var VideoPlayer = function VideoPlayer(_a) {
         onProgress: progressHandler,
         onBuffer: bufferStartHandler,
         onBufferEnd: bufferEndHandler,
-        onReady: onPlayerStart,
+        onReady: handlePlayerReady,
         onPlay: function onPlay() {
           return setIsPlaying(true);
         },
@@ -89107,13 +89301,16 @@ var VideoPlayer = function VideoPlayer(_a) {
           file: {
             hlsOptions: {
               autoStartLoad: true,
-              renderTextTracksNatively: false
+              renderTextTracksNatively: true
             }
           }
         }
-      }, validUrl)
-    }), loading && jsxRuntimeExports.jsx(StyledPlayerLoader, {
-      children: jsxRuntimeExports.jsx(StyledLoader, {})
+      }, url), loading && jsxRuntimeExports.jsx(StyledPlayerLoader, {
+        children: jsxRuntimeExports.jsx(StyledLoader, {})
+      }), isSubtitlesChecked && currentSubtitle && jsxRuntimeExports.jsx(StyledSubtitles, {
+        "$controls": isControlsActive,
+        children: currentSubtitle
+      })]
     }), jsxRuntimeExports.jsx(StyledControlsContainer, {
       ref: controlRef,
       children: jsxRuntimeExports.jsx(Controls, {
@@ -89139,16 +89336,17 @@ var VideoPlayer = function VideoPlayer(_a) {
         isFavorite: isFavorite,
         toggleIsFavorite: toggleFavorite,
         isFullscreen: isFullscreen,
-        subtitle: !!subtitleUrl,
+        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,
         handleSkipBackward: handlePreviousVideo,
         handleSkipForward: handleNextVideo,
         isNextVideo: isNextVideo,
         isPreviousVideo: isPreviousVideo,
-        showFavorite: showFavorite
+        showFavorite: showFavorite,
+        showDownload: showDownload,
+        downloadUrl: downloadUrl,
+        downloadFileName: downloadFileName,
+        onDownload: onDownload
       })
-    }), isSubtitlesChecked && currentSubtitle && jsxRuntimeExports.jsx(StyledSubtitles, {
-      "$controls": isControlsActive,
-      children: currentSubtitle
     })]
   });
 };