suada-components 1.7.0 → 1.8.0

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 (41) hide show
  1. package/dist/components/{DailyMotion-C2fzQqF6.js → DailyMotion-SZKPSpD1.js} +1 -1
  2. package/dist/components/{DailyMotion-D6-bQSDC.esm.js → DailyMotion-jrl4eEA1.esm.js} +1 -1
  3. package/dist/components/{Facebook-ngwgOcwS.js → Facebook-DS0ye_bL.js} +1 -1
  4. package/dist/components/{Facebook-CHgu-1qk.esm.js → Facebook-Ha24RKIX.esm.js} +1 -1
  5. package/dist/components/{FilePlayer-gXcilMCz.js → FilePlayer-B4_DDZXQ.js} +1 -1
  6. package/dist/components/{FilePlayer-CnFGUWCJ.esm.js → FilePlayer-D-n083nK.esm.js} +1 -1
  7. package/dist/components/{Kaltura-BKTRnPwX.esm.js → Kaltura-BlDrsjbp.esm.js} +1 -1
  8. package/dist/components/{Kaltura-Dwtf5bDJ.js → Kaltura-DAMolg_c.js} +1 -1
  9. package/dist/components/{Mixcloud-HlioccZN.esm.js → Mixcloud-B5AIgf8e.esm.js} +1 -1
  10. package/dist/components/{Mixcloud-CtZR5d1S.js → Mixcloud-C1z9BVJ8.js} +1 -1
  11. package/dist/components/{Mux-DhMGRnH7.js → Mux-Bgsc5vvM.js} +1 -1
  12. package/dist/components/{Mux-CiE-LfDW.esm.js → Mux-f77ctQXE.esm.js} +1 -1
  13. package/dist/components/{Preview-DuscX4du.js → Preview-CKXk6Axz.js} +1 -1
  14. package/dist/components/{Preview-BDrq-vcV.esm.js → Preview-DhMMn7e2.esm.js} +1 -1
  15. package/dist/components/{SoundCloud-pcTMWQVG.js → SoundCloud-DHLHmaaB.js} +1 -1
  16. package/dist/components/{SoundCloud-BG1mh5fx.esm.js → SoundCloud-DyYFhGe5.esm.js} +1 -1
  17. package/dist/components/{Streamable-3QXSsimo.esm.js → Streamable-BBygdIqb.esm.js} +1 -1
  18. package/dist/components/{Streamable-B-2t9AZh.js → Streamable-BDhbB3m3.js} +1 -1
  19. package/dist/components/{Twitch-B2wmDlW8.esm.js → Twitch-CAbFCb5f.esm.js} +1 -1
  20. package/dist/components/{Twitch-Ccg79Yis.js → Twitch-ZG7WuoXD.js} +1 -1
  21. package/dist/components/VideoPlayer/Controls/Controls.js +3 -3
  22. package/dist/components/VideoPlayer/Controls/Controls.js.map +1 -1
  23. package/dist/components/VideoPlayer/Controls/Controls.styles.d.ts +24 -8
  24. package/dist/components/VideoPlayer/Controls/Controls.styles.js +20 -16
  25. package/dist/components/VideoPlayer/Controls/Controls.styles.js.map +1 -1
  26. package/dist/components/VideoPlayer/usePlayerControls.js +55 -9
  27. package/dist/components/VideoPlayer/usePlayerControls.js.map +1 -1
  28. package/dist/components/{Vidyard-stasLAXI.esm.js → Vidyard-BsU5Ayr6.esm.js} +1 -1
  29. package/dist/components/{Vidyard-BcZfnHmw.js → Vidyard-CkSCnLg5.js} +1 -1
  30. package/dist/components/{Vimeo-U2HYvdiG.esm.js → Vimeo-4uslT7bX.esm.js} +1 -1
  31. package/dist/components/{Vimeo-9D0LyMV4.js → Vimeo-DKpnTiZ8.js} +1 -1
  32. package/dist/components/{Wistia-BNvoofR9.esm.js → Wistia-BxvIPVO7.esm.js} +1 -1
  33. package/dist/components/{Wistia-3LaD3aiP.js → Wistia-DKdMEz2a.js} +1 -1
  34. package/dist/components/{YouTube-DJZyY4jW.esm.js → YouTube-Cd4b1iuA.esm.js} +1 -1
  35. package/dist/components/{YouTube-CdcE3nmm.js → YouTube-JSWV2_hs.js} +1 -1
  36. package/dist/components/components/VideoPlayer/Controls/Controls.styles.d.ts +24 -8
  37. package/dist/components/{index-C5MULDlh.esm.js → index-BTR541gv.esm.js} +99 -44
  38. package/dist/components/{index-Debc-Hq8.js → index-XiB9Yp2-.js} +99 -44
  39. package/dist/components/index.esm.js +1 -1
  40. package/dist/icons/components/VideoPlayer/Controls/Controls.styles.d.ts +24 -8
  41. package/package.json +1 -1
package/dist/components/{Wistia-BNvoofR9.esm.js → Wistia-BxvIPVO7.esm.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-C5MULDlh.esm.js';
1
+ import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-BTR541gv.esm.js';
2
2
  import React__default from 'react';
3
3
 
4
4
  function _mergeNamespaces(n, m) {
package/dist/components/{Wistia-3LaD3aiP.js → Wistia-DKdMEz2a.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-Debc-Hq8.js');
3
+ var index = require('./index-XiB9Yp2-.js');
4
4
  var React = require('react');
5
5
 
6
6
  function _mergeNamespaces(n, m) {
package/dist/components/{YouTube-DJZyY4jW.esm.js → YouTube-Cd4b1iuA.esm.js} RENAMED
@@ -1,4 +1,4 @@
1
- import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-C5MULDlh.esm.js';
1
+ import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-BTR541gv.esm.js';
2
2
  import React__default from 'react';
3
3
 
4
4
  function _mergeNamespaces(n, m) {
package/dist/components/{YouTube-CdcE3nmm.js → YouTube-JSWV2_hs.js} RENAMED
@@ -1,6 +1,6 @@
1
1
  'use strict';
2
2
 
3
- var index = require('./index-Debc-Hq8.js');
3
+ var index = require('./index-XiB9Yp2-.js');
4
4
  var React = require('react');
5
5
 
6
6
  function _mergeNamespaces(n, m) {
package/dist/components/components/VideoPlayer/Controls/Controls.styles.d.ts CHANGED
@@ -8,12 +8,28 @@ export declare const StyledVolumeSlider: import("styled-components/dist/types").
8
8
  export declare const StyledControllerLeft: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
9
9
  export declare const StyledControllerRight: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
10
10
  export declare const StyledTimeTrack: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
11
- export declare const StyledHeartIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
12
- export declare const StyledDownloadIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
13
- export declare const StyledSubtitlesIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
14
- export declare const StyledFullscreenIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
15
- export declare const StyledPictureInPictureIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
16
- export declare const StyledVolumeIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
17
- export declare const StyledPlayPauseIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
18
- export declare const StyledRewindIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
11
+ export declare const StyledHeartIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
12
+ ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
13
+ }, never>> & string;
14
+ export declare const StyledDownloadIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
15
+ ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
16
+ }, never>> & string;
17
+ export declare const StyledSubtitlesIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
18
+ ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
19
+ }, never>> & string;
20
+ export declare const StyledFullscreenIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
21
+ ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
22
+ }, never>> & string;
23
+ export declare const StyledPictureInPictureIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
24
+ ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
25
+ }, never>> & string;
26
+ export declare const StyledVolumeIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
27
+ ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
28
+ }, never>> & string;
29
+ export declare const StyledPlayPauseIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
30
+ ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
31
+ }, never>> & string;
32
+ export declare const StyledRewindIconContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
33
+ ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
34
+ }, never>> & string;
19
35
  export {};
package/dist/components/{index-C5MULDlh.esm.js → index-BTR541gv.esm.js} RENAMED
@@ -32377,7 +32377,7 @@ var CourseStatusContainer = dt.div(templateObject_13$2 || (templateObject_13$2 =
32377
32377
  });
32378
32378
  dt.div(templateObject_14$2 || (templateObject_14$2 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: space-between;\n div {\n font-size: 13px;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: space-between;\n div {\n font-size: 13px;\n }\n"])));
32379
32379
  var TooltipContent = dt.div(templateObject_15$2 || (templateObject_15$2 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n align-items: center;\n & > :first-child {\n font-size: 14px;\n margin-bottom: 5px;\n }\n div {\n font-size: 14px;\n display: flex;\n flex-direction: column;\n align-items: center;\n\n & > .tooltip-text {\n font-size: 12px;\n margin-top: 5px;\n text-align: center;\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n align-items: center;\n & > :first-child {\n font-size: 14px;\n margin-bottom: 5px;\n }\n div {\n font-size: 14px;\n display: flex;\n flex-direction: column;\n align-items: center;\n\n & > .tooltip-text {\n font-size: 12px;\n margin-top: 5px;\n text-align: center;\n }\n }\n"])));
32380
- var StyledCardBottomContainer = dt.div(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n display: flex;\n width: 100%;\n flex-direction: column !important;\n align-self: flex-end;\n gap: 10px;\n padding-bottom: 10px;\n"], ["\n display: flex;\n width: 100%;\n flex-direction: column !important;\n align-self: flex-end;\n gap: 10px;\n padding-bottom: 10px;\n"])));
32380
+ var StyledCardBottomContainer = dt.div(templateObject_16$2 || (templateObject_16$2 = __makeTemplateObject(["\n display: flex;\n width: 100%;\n flex-direction: column !important;\n align-self: flex-end;\n gap: 10px;\n padding-bottom: 10px;\n"], ["\n display: flex;\n width: 100%;\n flex-direction: column !important;\n align-self: flex-end;\n gap: 10px;\n padding-bottom: 10px;\n"])));
32381
32381
  var StyledActionsContainer = dt.div(templateObject_17$1 || (templateObject_17$1 = __makeTemplateObject(["\n display: flex;\n flex-direction: row !important;\n width: 100%;\n"], ["\n display: flex;\n flex-direction: row !important;\n width: 100%;\n"])));
32382
32382
  var StyledActionItem = dt.span(templateObject_18$1 || (templateObject_18$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n height: 14px;\n cursor: ", ";\n color: ", ";\n font-size: 14px;\n padding-bottom: 10px;\n width: 100%;\n justify-content: center;\n gap: 8px;\n padding: 12px 4px;\n svg path {\n fill: ", ";\n width: 16px;\n height: 16px;\n }\n svg {\n width: 16px;\n height: 16px;\n }\n &:hover {\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"], ["\n display: flex;\n align-items: center;\n height: 14px;\n cursor: ", ";\n color: ", ";\n font-size: 14px;\n padding-bottom: 10px;\n width: 100%;\n justify-content: center;\n gap: 8px;\n padding: 12px 4px;\n svg path {\n fill: ", ";\n width: 16px;\n height: 16px;\n }\n svg {\n width: 16px;\n height: 16px;\n }\n &:hover {\n color: ", ";\n svg path {\n fill: ", ";\n }\n }\n"])), function (_a) {
32383
32383
  var disabled = _a.disabled;
@@ -32426,7 +32426,7 @@ var GridItem = dt.div(templateObject_32 || (templateObject_32 = __makeTemplateOb
32426
32426
  var $isFromUser = _a.$isFromUser;
32427
32427
  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 " || '';
32428
32428
  });
32429
- 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$2, templateObject_15$2, 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, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32;
32429
+ 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$2, templateObject_15$2, templateObject_16$2, templateObject_17$1, templateObject_18$1, templateObject_19$1, templateObject_20$1, templateObject_21$1, templateObject_22$1, templateObject_23$1, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32;
32430
32430
 
32431
32431
  var TooltipHeight$1 = function TooltipHeight(_a) {
32432
32432
  var text = _a.text,
@@ -42811,7 +42811,7 @@ var InputFileContainer = dt.div(templateObject_12$1 || (templateObject_12$1 = __
42811
42811
  var UploadInput = dt.input(templateObject_13$1 || (templateObject_13$1 = __makeTemplateObject(["\n opacity: 0;\n position: absolute;\n z-index: -1;\n left: 0;\n width: 0;\n top: 0;\n overflow: hidden;\n"], ["\n opacity: 0;\n position: absolute;\n z-index: -1;\n left: 0;\n width: 0;\n top: 0;\n overflow: hidden;\n"])));
42812
42812
  dt.div(templateObject_14$1 || (templateObject_14$1 = __makeTemplateObject(["\n position: absolute;\n left: 0px;\n top: -15px;\n background: #fff;\n font-size: 12px;\n color: rgba(0, 0, 0, 0.54);\n"], ["\n position: absolute;\n left: 0px;\n top: -15px;\n background: #fff;\n font-size: 12px;\n color: rgba(0, 0, 0, 0.54);\n"])));
42813
42813
  var ImagePlaceholder = dt.div(templateObject_15$1 || (templateObject_15$1 = __makeTemplateObject(["\n img {\n position: relative;\n width: 72px;\n height: 48px;\n border-radius: 4px;\n padding: 4px;\n top: 2px;\n }\n"], ["\n img {\n position: relative;\n width: 72px;\n height: 48px;\n border-radius: 4px;\n padding: 4px;\n top: 2px;\n }\n"])));
42814
- var InputLabel = dt.label(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n cursor: pointer;\n color: #fff;\n background: #06c68f;\n font-size: 11px;\n padding: 9px 6px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n cursor: pointer;\n color: #fff;\n background: #06c68f;\n font-size: 11px;\n padding: 9px 6px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n"
42814
+ var InputLabel = dt.label(templateObject_16$1 || (templateObject_16$1 = __makeTemplateObject(["\n cursor: pointer;\n color: #fff;\n background: #06c68f;\n font-size: 11px;\n padding: 9px 6px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n"], ["\n cursor: pointer;\n color: #fff;\n background: #06c68f;\n font-size: 11px;\n padding: 9px 6px;\n border-radius: 4px;\n display: flex;\n align-items: center;\n justify-content: center;\n"
42815
42815
  // UploaderButton
42816
42816
  ])));
42817
42817
  // UploaderButton
@@ -42833,7 +42833,7 @@ var styles$1 = {
42833
42833
  padding: '4px'
42834
42834
  }
42835
42835
  };
42836
- 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$1, templateObject_15$1, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
42836
+ 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$1, templateObject_15$1, templateObject_16$1, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23;
42837
42837
 
42838
42838
  var ImageWithFallback = function ImageWithFallback(_a) {
42839
42839
  var src = _a.src,
@@ -81355,7 +81355,7 @@ function requirePlayers () {
81355
81355
  canPlay: import_patterns.canPlay.youtube,
81356
81356
  lazyPlayer: (0, import_utils.lazy)(() => import(
81357
81357
  /* webpackChunkName: 'reactPlayerYouTube' */
81358
- './YouTube-DJZyY4jW.esm.js'
81358
+ './YouTube-Cd4b1iuA.esm.js'
81359
81359
  ).then(function (n) { return n.Y; }))
81360
81360
  },
81361
81361
  {
@@ -81364,7 +81364,7 @@ function requirePlayers () {
81364
81364
  canPlay: import_patterns.canPlay.soundcloud,
81365
81365
  lazyPlayer: (0, import_utils.lazy)(() => import(
81366
81366
  /* webpackChunkName: 'reactPlayerSoundCloud' */
81367
- './SoundCloud-BG1mh5fx.esm.js'
81367
+ './SoundCloud-DyYFhGe5.esm.js'
81368
81368
  ).then(function (n) { return n.S; }))
81369
81369
  },
81370
81370
  {
@@ -81373,7 +81373,7 @@ function requirePlayers () {
81373
81373
  canPlay: import_patterns.canPlay.vimeo,
81374
81374
  lazyPlayer: (0, import_utils.lazy)(() => import(
81375
81375
  /* webpackChunkName: 'reactPlayerVimeo' */
81376
- './Vimeo-U2HYvdiG.esm.js'
81376
+ './Vimeo-4uslT7bX.esm.js'
81377
81377
  ).then(function (n) { return n.V; }))
81378
81378
  },
81379
81379
  {
@@ -81382,7 +81382,7 @@ function requirePlayers () {
81382
81382
  canPlay: import_patterns.canPlay.mux,
81383
81383
  lazyPlayer: (0, import_utils.lazy)(() => import(
81384
81384
  /* webpackChunkName: 'reactPlayerMux' */
81385
- './Mux-CiE-LfDW.esm.js'
81385
+ './Mux-f77ctQXE.esm.js'
81386
81386
  ).then(function (n) { return n.M; }))
81387
81387
  },
81388
81388
  {
@@ -81391,7 +81391,7 @@ function requirePlayers () {
81391
81391
  canPlay: import_patterns.canPlay.facebook,
81392
81392
  lazyPlayer: (0, import_utils.lazy)(() => import(
81393
81393
  /* webpackChunkName: 'reactPlayerFacebook' */
81394
- './Facebook-CHgu-1qk.esm.js'
81394
+ './Facebook-Ha24RKIX.esm.js'
81395
81395
  ).then(function (n) { return n.F; }))
81396
81396
  },
81397
81397
  {
@@ -81400,7 +81400,7 @@ function requirePlayers () {
81400
81400
  canPlay: import_patterns.canPlay.streamable,
81401
81401
  lazyPlayer: (0, import_utils.lazy)(() => import(
81402
81402
  /* webpackChunkName: 'reactPlayerStreamable' */
81403
- './Streamable-3QXSsimo.esm.js'
81403
+ './Streamable-BBygdIqb.esm.js'
81404
81404
  ).then(function (n) { return n.S; }))
81405
81405
  },
81406
81406
  {
@@ -81409,7 +81409,7 @@ function requirePlayers () {
81409
81409
  canPlay: import_patterns.canPlay.wistia,
81410
81410
  lazyPlayer: (0, import_utils.lazy)(() => import(
81411
81411
  /* webpackChunkName: 'reactPlayerWistia' */
81412
- './Wistia-BNvoofR9.esm.js'
81412
+ './Wistia-BxvIPVO7.esm.js'
81413
81413
  ).then(function (n) { return n.W; }))
81414
81414
  },
81415
81415
  {
@@ -81418,7 +81418,7 @@ function requirePlayers () {
81418
81418
  canPlay: import_patterns.canPlay.twitch,
81419
81419
  lazyPlayer: (0, import_utils.lazy)(() => import(
81420
81420
  /* webpackChunkName: 'reactPlayerTwitch' */
81421
- './Twitch-B2wmDlW8.esm.js'
81421
+ './Twitch-CAbFCb5f.esm.js'
81422
81422
  ).then(function (n) { return n.T; }))
81423
81423
  },
81424
81424
  {
@@ -81427,7 +81427,7 @@ function requirePlayers () {
81427
81427
  canPlay: import_patterns.canPlay.dailymotion,
81428
81428
  lazyPlayer: (0, import_utils.lazy)(() => import(
81429
81429
  /* webpackChunkName: 'reactPlayerDailyMotion' */
81430
- './DailyMotion-D6-bQSDC.esm.js'
81430
+ './DailyMotion-jrl4eEA1.esm.js'
81431
81431
  ).then(function (n) { return n.D; }))
81432
81432
  },
81433
81433
  {
@@ -81436,7 +81436,7 @@ function requirePlayers () {
81436
81436
  canPlay: import_patterns.canPlay.mixcloud,
81437
81437
  lazyPlayer: (0, import_utils.lazy)(() => import(
81438
81438
  /* webpackChunkName: 'reactPlayerMixcloud' */
81439
- './Mixcloud-HlioccZN.esm.js'
81439
+ './Mixcloud-B5AIgf8e.esm.js'
81440
81440
  ).then(function (n) { return n.M; }))
81441
81441
  },
81442
81442
  {
@@ -81445,7 +81445,7 @@ function requirePlayers () {
81445
81445
  canPlay: import_patterns.canPlay.vidyard,
81446
81446
  lazyPlayer: (0, import_utils.lazy)(() => import(
81447
81447
  /* webpackChunkName: 'reactPlayerVidyard' */
81448
- './Vidyard-stasLAXI.esm.js'
81448
+ './Vidyard-BsU5Ayr6.esm.js'
81449
81449
  ).then(function (n) { return n.V; }))
81450
81450
  },
81451
81451
  {
@@ -81454,7 +81454,7 @@ function requirePlayers () {
81454
81454
  canPlay: import_patterns.canPlay.kaltura,
81455
81455
  lazyPlayer: (0, import_utils.lazy)(() => import(
81456
81456
  /* webpackChunkName: 'reactPlayerKaltura' */
81457
- './Kaltura-BKTRnPwX.esm.js'
81457
+ './Kaltura-BlDrsjbp.esm.js'
81458
81458
  ).then(function (n) { return n.K; }))
81459
81459
  },
81460
81460
  {
@@ -81466,7 +81466,7 @@ function requirePlayers () {
81466
81466
  },
81467
81467
  lazyPlayer: (0, import_utils.lazy)(() => import(
81468
81468
  /* webpackChunkName: 'reactPlayerFilePlayer' */
81469
- './FilePlayer-CnFGUWCJ.esm.js'
81469
+ './FilePlayer-D-n083nK.esm.js'
81470
81470
  ).then(function (n) { return n.F; }))
81471
81471
  }
81472
81472
  ];
@@ -82287,7 +82287,7 @@ function requireReactPlayer () {
82287
82287
  var import_Player = __toESM(/*@__PURE__*/ requirePlayer());
82288
82288
  const Preview = (0, import_utils.lazy)(() => import(
82289
82289
  /* webpackChunkName: 'reactPlayerPreview' */
82290
- './Preview-BDrq-vcV.esm.js'
82290
+ './Preview-DhMMn7e2.esm.js'
82291
82291
  ).then(function (n) { return n.P; }));
82292
82292
  const IS_BROWSER = typeof window !== "undefined" && window.document && typeof document !== "undefined";
82293
82293
  const IS_GLOBAL = typeof commonjsGlobal !== "undefined" && commonjsGlobal.window && commonjsGlobal.window.document;
@@ -82529,32 +82529,36 @@ var injectHLSSubtitleStyles = function injectHLSSubtitleStyles() {
82529
82529
  };
82530
82530
  var templateObject_1$9, templateObject_2$7, templateObject_3$4, templateObject_4$2, templateObject_5$2, templateObject_6$2, templateObject_7$1;
82531
82531
 
82532
- 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: rgba(86, 90, 98, 0.6);\n backdrop-filter: blur(4px);\n padding: 12px 16px;\n position: relative;\n opacity: 0.8;\n\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: rgba(86, 90, 98, 0.6);\n backdrop-filter: blur(4px);\n padding: 12px 16px;\n position: relative;\n opacity: 0.8;\n\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"])), {
82532
+ 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: rgba(86, 90, 98, 0.6);\n backdrop-filter: blur(4px);\n padding: 12px 16px;\n position: relative;\n opacity: 0.8;\n\n /* Responsive padding adjustments */\n @media screen and (max-width: 768px) {\n padding: 8px 12px;\n gap: 12px;\n }\n\n @media screen and (max-width: 480px) {\n padding: 6px 8px;\n gap: 8px;\n }\n\n svg {\n cursor: pointer;\n transition: transform 0.2s ease;\n\n /* Desktop and large screens */\n @media screen and (min-width: 1501px) {\n width: 24px;\n height: 24px;\n }\n\n /* Medium to large screens */\n @media screen and (max-width: 1500px) {\n width: 20px;\n height: 20px;\n }\n\n /* Small to medium screens */\n @media screen and (max-width: 1000px) {\n width: 18px;\n height: 18px;\n }\n\n /* Tablet screens */\n @media screen and (max-width: 768px) {\n width: 20px;\n height: 20px;\n }\n\n /* Mobile screens */\n @media screen and (max-width: 480px) {\n width: 18px;\n height: 18px;\n }\n\n /* Very small mobile screens */\n @media screen and (max-width: 320px) {\n width: 16px;\n height: 16px;\n }\n\n &:hover {\n transform: scale(1.1);\n }\n\n &:active {\n transform: scale(0.95);\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: rgba(86, 90, 98, 0.6);\n backdrop-filter: blur(4px);\n padding: 12px 16px;\n position: relative;\n opacity: 0.8;\n\n /* Responsive padding adjustments */\n @media screen and (max-width: 768px) {\n padding: 8px 12px;\n gap: 12px;\n }\n\n @media screen and (max-width: 480px) {\n padding: 6px 8px;\n gap: 8px;\n }\n\n svg {\n cursor: pointer;\n transition: transform 0.2s ease;\n\n /* Desktop and large screens */\n @media screen and (min-width: 1501px) {\n width: 24px;\n height: 24px;\n }\n\n /* Medium to large screens */\n @media screen and (max-width: 1500px) {\n width: 20px;\n height: 20px;\n }\n\n /* Small to medium screens */\n @media screen and (max-width: 1000px) {\n width: 18px;\n height: 18px;\n }\n\n /* Tablet screens */\n @media screen and (max-width: 768px) {\n width: 20px;\n height: 20px;\n }\n\n /* Mobile screens */\n @media screen and (max-width: 480px) {\n width: 18px;\n height: 18px;\n }\n\n /* Very small mobile screens */\n @media screen and (max-width: 320px) {\n width: 16px;\n height: 16px;\n }\n\n &:hover {\n transform: scale(1.1);\n }\n\n &:active {\n transform: scale(0.95);\n }\n }\n\n & > p {\n color: var(--neutral-colors-light);\n font-family: 'Poppins', sans-serif;\n ", "\n }\n"])), {
82533
82533
  fontStyle: 'descriptor'
82534
82534
  });
82535
- var StyledSlider = dt.input(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n width: 100%;\n height: 2px;\n border-radius: 5px;\n position: absolute;\n top: 0;\n left: 0;\n background: ", ";\n outline: none;\n -webkit-transition: 0.2s;\n transition: opacity 0.2s;\n cursor: pointer;\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--brand-colors-accent);\n cursor: pointer;\n }\n\n &::-moz-range-thumb {\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--brand-colors-accent);\n cursor: pointer;\n }\n"], ["\n width: 100%;\n height: 2px;\n border-radius: 5px;\n position: absolute;\n top: 0;\n left: 0;\n background: ", ";\n outline: none;\n -webkit-transition: 0.2s;\n transition: opacity 0.2s;\n cursor: pointer;\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--brand-colors-accent);\n cursor: pointer;\n }\n\n &::-moz-range-thumb {\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--brand-colors-accent);\n cursor: pointer;\n }\n"])), function (_a) {
82535
+ var StyledSlider = dt.input(templateObject_2$6 || (templateObject_2$6 = __makeTemplateObject(["\n width: 100%;\n height: 2px;\n border-radius: 5px;\n position: absolute;\n top: 0;\n left: 0;\n background: ", ";\n outline: none;\n -webkit-transition: 0.2s;\n transition: opacity 0.2s;\n cursor: pointer;\n\n /* Enhanced mobile touch target */\n @media (hover: none) and (pointer: coarse) {\n height: 4px;\n }\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--brand-colors-accent);\n cursor: pointer;\n\n /* Larger touch target for mobile */\n @media (hover: none) and (pointer: coarse) {\n width: 16px;\n height: 16px;\n }\n\n /* Responsive adjustments */\n @media screen and (max-width: 480px) {\n width: 14px;\n height: 14px;\n }\n }\n\n &::-moz-range-thumb {\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--brand-colors-accent);\n cursor: pointer;\n border: none;\n\n /* Larger touch target for mobile */\n @media (hover: none) and (pointer: coarse) {\n width: 16px;\n height: 16px;\n }\n\n /* Responsive adjustments */\n @media screen and (max-width: 480px) {\n width: 14px;\n height: 14px;\n }\n }\n\n /* Enhance visibility on focus for accessibility */\n &:focus {\n outline: 2px solid var(--brand-colors-accent);\n outline-offset: 2px;\n }\n"], ["\n width: 100%;\n height: 2px;\n border-radius: 5px;\n position: absolute;\n top: 0;\n left: 0;\n background: ", ";\n outline: none;\n -webkit-transition: 0.2s;\n transition: opacity 0.2s;\n cursor: pointer;\n\n /* Enhanced mobile touch target */\n @media (hover: none) and (pointer: coarse) {\n height: 4px;\n }\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--brand-colors-accent);\n cursor: pointer;\n\n /* Larger touch target for mobile */\n @media (hover: none) and (pointer: coarse) {\n width: 16px;\n height: 16px;\n }\n\n /* Responsive adjustments */\n @media screen and (max-width: 480px) {\n width: 14px;\n height: 14px;\n }\n }\n\n &::-moz-range-thumb {\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--brand-colors-accent);\n cursor: pointer;\n border: none;\n\n /* Larger touch target for mobile */\n @media (hover: none) and (pointer: coarse) {\n width: 16px;\n height: 16px;\n }\n\n /* Responsive adjustments */\n @media screen and (max-width: 480px) {\n width: 14px;\n height: 14px;\n }\n }\n\n /* Enhance visibility on focus for accessibility */\n &:focus {\n outline: 2px solid var(--brand-colors-accent);\n outline-offset: 2px;\n }\n"])), function (_a) {
82536
82536
  var value = _a.value;
82537
82537
  return "linear-gradient(\n to right,\n var(--brand-colors-accent) 0%,\n var(--brand-colors-accent) ".concat(value, "%,\n var(--level-dark-200) ").concat(value, "%,\n var(--level-dark-200) 100%\n )");
82538
82538
  });
82539
- var StyledVolumeWrapper = dt.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 16px;\n\n & > svg {\n cursor: pointer;\n }\n\n & > input {\n display: none;\n }\n\n &:hover > input {\n display: block;\n }\n"], ["\n position: relative;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 16px;\n\n & > svg {\n cursor: pointer;\n }\n\n & > input {\n display: none;\n }\n\n &:hover > input {\n display: block;\n }\n"])));
82540
- var StyledVolumeSlider = dt.input(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n width: 100px;\n height: 4px;\n border-radius: 5px;\n background: ", ";\n outline: none;\n -webkit-transition: 0.2s;\n transition: opacity 0.2s;\n cursor: pointer;\n justify-content: center;\n align-items: center;\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--neutral-colors-light);\n cursor: pointer;\n }\n\n &::-moz-range-thumb {\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--neutral-colors-light);\n cursor: pointer;\n }\n"], ["\n width: 100px;\n height: 4px;\n border-radius: 5px;\n background: ", ";\n outline: none;\n -webkit-transition: 0.2s;\n transition: opacity 0.2s;\n cursor: pointer;\n justify-content: center;\n align-items: center;\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--neutral-colors-light);\n cursor: pointer;\n }\n\n &::-moz-range-thumb {\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--neutral-colors-light);\n cursor: pointer;\n }\n"])), function (_a) {
82539
+ var StyledVolumeWrapper = dt.div(templateObject_3$3 || (templateObject_3$3 = __makeTemplateObject(["\n position: relative;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 16px;\n\n /* Responsive gap adjustments */\n @media screen and (max-width: 768px) {\n gap: 12px;\n }\n\n @media screen and (max-width: 480px) {\n gap: 8px;\n }\n\n & > svg {\n cursor: pointer;\n }\n\n & > input {\n display: none;\n }\n\n &:hover > input {\n display: block;\n }\n\n /* Always show volume slider on touch devices */\n @media (hover: none) and (pointer: coarse) {\n & > input {\n display: block;\n }\n }\n\n /* Hide volume slider on very small screens */\n @media screen and (max-width: 320px) {\n & > input {\n display: none !important;\n }\n }\n"], ["\n position: relative;\n height: 100%;\n display: flex;\n align-items: center;\n justify-content: center;\n gap: 16px;\n\n /* Responsive gap adjustments */\n @media screen and (max-width: 768px) {\n gap: 12px;\n }\n\n @media screen and (max-width: 480px) {\n gap: 8px;\n }\n\n & > svg {\n cursor: pointer;\n }\n\n & > input {\n display: none;\n }\n\n &:hover > input {\n display: block;\n }\n\n /* Always show volume slider on touch devices */\n @media (hover: none) and (pointer: coarse) {\n & > input {\n display: block;\n }\n }\n\n /* Hide volume slider on very small screens */\n @media screen and (max-width: 320px) {\n & > input {\n display: none !important;\n }\n }\n"])));
82540
+ var StyledVolumeSlider = dt.input(templateObject_4$1 || (templateObject_4$1 = __makeTemplateObject(["\n width: 100px;\n height: 4px;\n border-radius: 5px;\n background: ", ";\n outline: none;\n -webkit-transition: 0.2s;\n transition: opacity 0.2s;\n cursor: pointer;\n justify-content: center;\n align-items: center;\n\n /* Responsive width adjustments */\n @media screen and (max-width: 768px) {\n width: 80px;\n }\n\n @media screen and (max-width: 480px) {\n width: 60px;\n }\n\n @media screen and (max-width: 320px) {\n width: 50px;\n }\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--neutral-colors-light);\n cursor: pointer;\n\n /* Responsive thumb size */\n @media screen and (max-width: 480px) {\n width: 14px;\n height: 14px;\n }\n }\n\n &::-moz-range-thumb {\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--neutral-colors-light);\n cursor: pointer;\n border: none;\n\n /* Responsive thumb size */\n @media screen and (max-width: 480px) {\n width: 14px;\n height: 14px;\n }\n }\n"], ["\n width: 100px;\n height: 4px;\n border-radius: 5px;\n background: ", ";\n outline: none;\n -webkit-transition: 0.2s;\n transition: opacity 0.2s;\n cursor: pointer;\n justify-content: center;\n align-items: center;\n\n /* Responsive width adjustments */\n @media screen and (max-width: 768px) {\n width: 80px;\n }\n\n @media screen and (max-width: 480px) {\n width: 60px;\n }\n\n @media screen and (max-width: 320px) {\n width: 50px;\n }\n\n &::-webkit-slider-thumb {\n -webkit-appearance: none;\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--neutral-colors-light);\n cursor: pointer;\n\n /* Responsive thumb size */\n @media screen and (max-width: 480px) {\n width: 14px;\n height: 14px;\n }\n }\n\n &::-moz-range-thumb {\n appearance: none;\n width: 12px;\n height: 12px;\n border-radius: 50%;\n background: var(--neutral-colors-light);\n cursor: pointer;\n border: none;\n\n /* Responsive thumb size */\n @media screen and (max-width: 480px) {\n width: 14px;\n height: 14px;\n }\n }\n"])), function (_a) {
82541
82541
  var value = _a.value;
82542
82542
  return "linear-gradient(\n to right,\n var(--neutral-colors-light) 0%,\n var(--neutral-colors-light) ".concat(value, "%,\n var(--level-grey-500) ").concat(value, "%,\n var(--level-grey-500) 100%\n )");
82543
82543
  });
82544
- var StyledControllerLeft = dt.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 16px;\n flex: 1;\n"], ["\n display: flex;\n align-items: center;\n gap: 16px;\n flex: 1;\n"])));
82545
- var StyledControllerRight = dt.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 16px;\n flex-shrink: 0;\n\n .skip-icon-disabled {\n cursor: default;\n\n & > path {\n fill: var(--level-dark-300);\n }\n }\n"], ["\n display: flex;\n align-items: center;\n gap: 16px;\n flex-shrink: 0;\n\n .skip-icon-disabled {\n cursor: default;\n\n & > path {\n fill: var(--level-dark-300);\n }\n }\n"])));
82546
- var StyledTimeTrack = dt.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n color: #FFFFFF;\n ", "\n text-align: right;\n white-space: nowrap;\n"], ["\n color: #FFFFFF;\n ", "\n text-align: right;\n white-space: nowrap;\n"])), {
82544
+ var StyledControllerLeft = dt.div(templateObject_5$1 || (templateObject_5$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 16px;\n flex: 1;\n \n /* Responsive gap adjustments */\n @media screen and (max-width: 768px) {\n gap: 12px;\n }\n\n @media screen and (max-width: 480px) {\n gap: 8px;\n }\n\n @media screen and (max-width: 320px) {\n gap: 6px;\n }\n\n /* Hide rewind/forward controls on very small screens */\n @media screen and (max-width: 480px) {\n .rewind-control,\n .forward-control {\n display: none;\n }\n }\n"], ["\n display: flex;\n align-items: center;\n gap: 16px;\n flex: 1;\n \n /* Responsive gap adjustments */\n @media screen and (max-width: 768px) {\n gap: 12px;\n }\n\n @media screen and (max-width: 480px) {\n gap: 8px;\n }\n\n @media screen and (max-width: 320px) {\n gap: 6px;\n }\n\n /* Hide rewind/forward controls on very small screens */\n @media screen and (max-width: 480px) {\n .rewind-control,\n .forward-control {\n display: none;\n }\n }\n"])));
82545
+ var StyledControllerRight = dt.div(templateObject_6$1 || (templateObject_6$1 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n gap: 16px;\n flex-shrink: 0;\n\n /* Responsive gap adjustments */\n @media screen and (max-width: 768px) {\n gap: 12px;\n }\n\n @media screen and (max-width: 480px) {\n gap: 8px;\n \n /* Hide less essential controls on mobile */\n .skip-control,\n .favorite-control,\n .download-control {\n display: none;\n }\n }\n\n @media screen and (max-width: 320px) {\n gap: 6px;\n }\n\n .skip-icon-disabled {\n cursor: default;\n\n & > path {\n fill: var(--level-dark-300);\n }\n }\n"], ["\n display: flex;\n align-items: center;\n gap: 16px;\n flex-shrink: 0;\n\n /* Responsive gap adjustments */\n @media screen and (max-width: 768px) {\n gap: 12px;\n }\n\n @media screen and (max-width: 480px) {\n gap: 8px;\n \n /* Hide less essential controls on mobile */\n .skip-control,\n .favorite-control,\n .download-control {\n display: none;\n }\n }\n\n @media screen and (max-width: 320px) {\n gap: 6px;\n }\n\n .skip-icon-disabled {\n cursor: default;\n\n & > path {\n fill: var(--level-dark-300);\n }\n }\n"])));
82546
+ var StyledTimeTrack = dt.div(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n color: #FFFFFF;\n ", "\n text-align: right;\n white-space: nowrap;\n font-size: 14px;\n \n /* Responsive font size adjustments */\n @media screen and (max-width: 768px) {\n font-size: 12px;\n }\n\n @media screen and (max-width: 480px) {\n font-size: 11px;\n }\n\n @media screen and (max-width: 320px) {\n font-size: 10px;\n }\n"], ["\n color: #FFFFFF;\n ", "\n text-align: right;\n white-space: nowrap;\n font-size: 14px;\n \n /* Responsive font size adjustments */\n @media screen and (max-width: 768px) {\n font-size: 12px;\n }\n\n @media screen and (max-width: 480px) {\n font-size: 11px;\n }\n\n @media screen and (max-width: 320px) {\n font-size: 10px;\n }\n"
82547
+ // Base styles for icon containers
82548
+ ])), {
82547
82549
  fontStyle: 'descriptor'
82548
82550
  });
82549
- var StyledHeartIconContainer = dt.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\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 > path {\n fill: #FFFFFF !important;\n transition: fill 0.2s ease;\n }\n\n &:hover > svg > path {\n fill: #08C694 !important;\n }\n"])));
82550
- 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"])));
82551
- var StyledSubtitlesIconContainer = dt.div(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\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 > path {\n fill: #FFFFFF !important;\n transition: fill 0.2s ease;\n }\n\n &:hover > svg > path {\n fill: #08C694 !important;\n }\n"])));
82552
- 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 & > 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 > path {\n fill: #FFFFFF !important;\n transition: fill 0.2s ease;\n }\n\n &:hover > svg > path {\n fill: #08C694 !important;\n }\n"])));
82553
- var StyledPictureInPictureIconContainer = dt.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\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 &.pip-active > 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 > path {\n fill: #FFFFFF !important;\n transition: fill 0.2s ease;\n }\n\n &:hover > svg > path {\n fill: #08C694 !important;\n }\n\n &.pip-active > svg > path {\n fill: #08C694 !important;\n }\n"])));
82554
- var StyledVolumeIconContainer = dt.div(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\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 > path {\n fill: #FFFFFF !important;\n transition: fill 0.2s ease;\n }\n\n &:hover > svg > path {\n fill: #08C694 !important;\n }\n"])));
82555
- var StyledPlayPauseIconContainer = dt.div(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\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 > path {\n fill: #FFFFFF !important;\n transition: fill 0.2s ease;\n }\n\n &:hover > svg > path {\n fill: #08C694 !important;\n }\n"])));
82556
- var StyledRewindIconContainer = dt.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\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\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"])));
82557
- 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, templateObject_14, templateObject_15;
82551
+ // Base styles for icon containers
82552
+ var BaseIconContainer = dt.div(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n min-width: 24px;\n min-height: 24px;\n border-radius: 4px;\n transition: background-color 0.2s ease, transform 0.1s ease;\n\n /* Enhanced touch targets for mobile */\n @media (hover: none) and (pointer: coarse) {\n min-width: 32px;\n min-height: 32px;\n }\n\n & > svg > path {\n fill: #FFFFFF !important;\n transition: fill 0.2s ease;\n }\n\n &:hover {\n background-color: rgba(255, 255, 255, 0.1);\n \n & > svg > path {\n fill: #08C694 !important;\n }\n }\n\n &:active {\n transform: scale(0.95);\n }\n\n /* Focus styles for accessibility */\n &:focus-visible {\n outline: 2px solid var(--brand-colors-accent);\n outline-offset: 2px;\n }\n"], ["\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n min-width: 24px;\n min-height: 24px;\n border-radius: 4px;\n transition: background-color 0.2s ease, transform 0.1s ease;\n\n /* Enhanced touch targets for mobile */\n @media (hover: none) and (pointer: coarse) {\n min-width: 32px;\n min-height: 32px;\n }\n\n & > svg > path {\n fill: #FFFFFF !important;\n transition: fill 0.2s ease;\n }\n\n &:hover {\n background-color: rgba(255, 255, 255, 0.1);\n \n & > svg > path {\n fill: #08C694 !important;\n }\n }\n\n &:active {\n transform: scale(0.95);\n }\n\n /* Focus styles for accessibility */\n &:focus-visible {\n outline: 2px solid var(--brand-colors-accent);\n outline-offset: 2px;\n }\n"])));
82553
+ var StyledHeartIconContainer = dt(BaseIconContainer)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n /* Additional specific styles if needed */\n"], ["\n /* Additional specific styles if needed */\n"])));
82554
+ var StyledDownloadIconContainer = dt(BaseIconContainer)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\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 @media screen and (max-width: 768px) {\n width: 20px !important;\n height: 20px !important;\n }\n\n @media screen and (max-width: 480px) {\n width: 18px !important;\n height: 18px !important;\n }\n }\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 @media screen and (max-width: 768px) {\n width: 20px !important;\n height: 20px !important;\n }\n\n @media screen and (max-width: 480px) {\n width: 18px !important;\n height: 18px !important;\n }\n }\n"])));
82555
+ var StyledSubtitlesIconContainer = dt(BaseIconContainer)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n /* Additional specific styles if needed */\n"], ["\n /* Additional specific styles if needed */\n"])));
82556
+ var StyledFullscreenIconContainer = dt(BaseIconContainer)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n /* Additional specific styles if needed */\n"], ["\n /* Additional specific styles if needed */\n"])));
82557
+ var StyledPictureInPictureIconContainer = dt(BaseIconContainer)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n &.pip-active {\n background-color: rgba(8, 198, 148, 0.2);\n \n & > svg > path {\n fill: #08C694 !important;\n }\n }\n"], ["\n &.pip-active {\n background-color: rgba(8, 198, 148, 0.2);\n \n & > svg > path {\n fill: #08C694 !important;\n }\n }\n"])));
82558
+ var StyledVolumeIconContainer = dt(BaseIconContainer)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n /* Additional specific styles if needed */\n"], ["\n /* Additional specific styles if needed */\n"])));
82559
+ var StyledPlayPauseIconContainer = dt(BaseIconContainer)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n /* Additional specific styles if needed */\n"], ["\n /* Additional specific styles if needed */\n"])));
82560
+ var StyledRewindIconContainer = dt(BaseIconContainer)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n /* Additional specific styles if needed */\n"], ["\n /* Additional specific styles if needed */\n"])));
82561
+ 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, templateObject_14, templateObject_15, templateObject_16;
82558
82562
 
82559
82563
  var PLAYBACK_SPEED_LIST = [{
82560
82564
  label: 'playback_speed.2x',
@@ -82843,8 +82847,9 @@ var Controls = function Controls(_a) {
82843
82847
  children: playing ? jsxRuntimeExports.jsx(PauseIcon, {}) : jsxRuntimeExports.jsx(PlayIcon, {})
82844
82848
  })
82845
82849
  }), jsxRuntimeExports.jsx(CustomTooltip, {
82846
- title: "Rewind 10 seconds",
82850
+ title: "Rewind 5 seconds",
82847
82851
  children: jsxRuntimeExports.jsx(StyledRewindIconContainer, {
82852
+ className: "rewind-control",
82848
82853
  children: jsxRuntimeExports.jsx(RewindIcon, {
82849
82854
  onClick: rewindHandler
82850
82855
  })
@@ -82852,6 +82857,7 @@ var Controls = function Controls(_a) {
82852
82857
  }), jsxRuntimeExports.jsx(CustomTooltip, {
82853
82858
  title: "Forward 10 seconds",
82854
82859
  children: jsxRuntimeExports.jsx(StyledRewindIconContainer, {
82860
+ className: "forward-control",
82855
82861
  children: jsxRuntimeExports.jsx(RewindIcon, {
82856
82862
  forward: true,
82857
82863
  onClick: handleFastForward
@@ -82876,6 +82882,7 @@ var Controls = function Controls(_a) {
82876
82882
  children: [handleSkipBackward && jsxRuntimeExports.jsx(CustomTooltip, {
82877
82883
  title: "Previous video",
82878
82884
  children: jsxRuntimeExports.jsx(StyledRewindIconContainer, {
82885
+ className: "skip-control",
82879
82886
  children: jsxRuntimeExports.jsx(SkipIcon, {
82880
82887
  onClick: function onClick() {
82881
82888
  if (!isPreviousVideo) return;
@@ -82887,6 +82894,7 @@ var Controls = function Controls(_a) {
82887
82894
  }), handleSkipForward && jsxRuntimeExports.jsx(CustomTooltip, {
82888
82895
  title: "Next video",
82889
82896
  children: jsxRuntimeExports.jsx(StyledRewindIconContainer, {
82897
+ className: "skip-control",
82890
82898
  children: jsxRuntimeExports.jsx(SkipIcon, {
82891
82899
  forward: true,
82892
82900
  onClick: function onClick() {
@@ -82899,6 +82907,7 @@ var Controls = function Controls(_a) {
82899
82907
  }), showFavorite && jsxRuntimeExports.jsx(CustomTooltip, {
82900
82908
  title: isFavorite ? 'Remove from favorites' : 'Add to favorites',
82901
82909
  children: jsxRuntimeExports.jsx(StyledHeartIconContainer, {
82910
+ className: "favorite-control",
82902
82911
  children: jsxRuntimeExports.jsx(HeartIcon, {
82903
82912
  active: isFavorite,
82904
82913
  onClick: toggleIsFavorite
@@ -82907,6 +82916,7 @@ var Controls = function Controls(_a) {
82907
82916
  }), showDownload && downloadUrl && jsxRuntimeExports.jsx(CustomTooltip, {
82908
82917
  title: "Download video",
82909
82918
  children: jsxRuntimeExports.jsx(StyledDownloadIconContainer, {
82919
+ className: "download-control",
82910
82920
  children: jsxRuntimeExports.jsx(DownloadIcon, {
82911
82921
  onClick: handleDownloadClick
82912
82922
  })
@@ -88803,24 +88813,54 @@ function usePlayerControls(_a) {
88803
88813
  }
88804
88814
  }, [subtitleUrl]);
88805
88815
  useEffect(function () {
88816
+ var _a;
88806
88817
  var handleFullscreenChange = function handleFullscreenChange() {
88807
88818
  setIsFullscreen(!!document.fullscreenElement);
88808
88819
  };
88809
- var handlePiPChange = function handlePiPChange() {
88810
- setIsPiPActive(!!document.pictureInPictureElement);
88820
+ var handlePiPEnter = function handlePiPEnter() {
88821
+ setIsPiPActive(true);
88822
+ };
88823
+ var handlePiPLeave = function handlePiPLeave() {
88824
+ setIsPiPActive(false);
88811
88825
  };
88812
88826
  document.addEventListener('fullscreenchange', handleFullscreenChange);
88813
- document.addEventListener('enterpictureinpicture', handlePiPChange);
88814
- document.addEventListener('leavepictureinpicture', handlePiPChange);
88827
+ document.addEventListener('enterpictureinpicture', handlePiPEnter);
88828
+ document.addEventListener('leavepictureinpicture', handlePiPLeave);
88829
+ // Add event listeners to the video element when it's available
88830
+ var videoElement = (_a = videoPlayerRef.current) === null || _a === void 0 ? void 0 : _a.getInternalPlayer();
88831
+ if (videoElement && videoElement instanceof HTMLVideoElement) {
88832
+ videoElement.addEventListener('enterpictureinpicture', handlePiPEnter);
88833
+ videoElement.addEventListener('leavepictureinpicture', handlePiPLeave);
88834
+ }
88815
88835
  return function () {
88816
88836
  document.removeEventListener('fullscreenchange', handleFullscreenChange);
88817
- document.removeEventListener('enterpictureinpicture', handlePiPChange);
88818
- document.removeEventListener('leavepictureinpicture', handlePiPChange);
88837
+ document.removeEventListener('enterpictureinpicture', handlePiPEnter);
88838
+ document.removeEventListener('leavepictureinpicture', handlePiPLeave);
88839
+ // Clean up video element listeners using the captured reference
88840
+ if (videoElement && videoElement instanceof HTMLVideoElement) {
88841
+ videoElement.removeEventListener('enterpictureinpicture', handlePiPEnter);
88842
+ videoElement.removeEventListener('leavepictureinpicture', handlePiPLeave);
88843
+ }
88819
88844
  };
88820
- }, []);
88845
+ }, [url]); // Re-run when URL changes to ensure proper cleanup and setup
88821
88846
  useEffect(function () {
88822
88847
  setStartPlayed(false);
88823
88848
  }, [url]);
88849
+ // Cleanup effect to handle component unmounting while in PiP mode
88850
+ useEffect(function () {
88851
+ var currentVideoPlayerRef = videoPlayerRef.current;
88852
+ return function () {
88853
+ // Check if we're in PiP mode when component unmounts
88854
+ if (document.pictureInPictureElement) {
88855
+ // Try to keep the video element alive by cloning it
88856
+ var videoElement = currentVideoPlayerRef === null || currentVideoPlayerRef === void 0 ? void 0 : currentVideoPlayerRef.getInternalPlayer();
88857
+ if (videoElement && videoElement instanceof HTMLVideoElement) {
88858
+ // Create a warning for the user that PiP will exit
88859
+ console.log('Component unmounting while in Picture-in-Picture mode');
88860
+ }
88861
+ }
88862
+ };
88863
+ }, []);
88824
88864
  var playPauseHandler = useCallback(function () {
88825
88865
  setIsPlaying(function (prev) {
88826
88866
  return !prev;
@@ -89016,9 +89056,24 @@ function usePlayerControls(_a) {
89016
89056
  return;
89017
89057
  }
89018
89058
  if (document.pictureInPictureElement) {
89019
- document.exitPictureInPicture()["catch"](console.error);
89059
+ document.exitPictureInPicture()["catch"](function (error) {
89060
+ console.error('Failed to exit picture-in-picture:', error);
89061
+ });
89020
89062
  } else {
89021
- videoElement.requestPictureInPicture()["catch"](console.error);
89063
+ // Ensure the video is playing before entering PiP mode
89064
+ if (videoElement.paused && isPlaying) {
89065
+ videoElement.play().then(function () {
89066
+ videoElement.requestPictureInPicture()["catch"](function (error) {
89067
+ console.error('Failed to enter picture-in-picture:', error);
89068
+ });
89069
+ })["catch"](function (error) {
89070
+ console.error('Failed to play video before PiP:', error);
89071
+ });
89072
+ } else {
89073
+ videoElement.requestPictureInPicture()["catch"](function (error) {
89074
+ console.error('Failed to enter picture-in-picture:', error);
89075
+ });
89076
+ }
89022
89077
  }
89023
89078
  };
89024
89079
  var handleKeyDown = useCallback(function (event) {