suada-components 1.7.0 → 1.9.0

package/dist/components/{DailyMotion-C2fzQqF6.js → DailyMotion-B7yDPBbg.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Debc-Hq8.js');
+var index = require('./index-DetZ05pw.js');
 var React = require('react');
 
 function _mergeNamespaces(n, m) {

package/dist/components/{DailyMotion-D6-bQSDC.esm.js → DailyMotion-BmnymjR1.esm.js}

@@ -1,4 +1,4 @@
-import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-C5MULDlh.esm.js';
+import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-DKAGRUEW.esm.js';
 import React__default from 'react';
 
 function _mergeNamespaces(n, m) {

package/dist/components/{Facebook-ngwgOcwS.js → Facebook-42iqQU2G.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Debc-Hq8.js');
+var index = require('./index-DetZ05pw.js');
 var React = require('react');
 
 function _mergeNamespaces(n, m) {

package/dist/components/{Facebook-CHgu-1qk.esm.js → Facebook-D9Ak6ZJU.esm.js}

@@ -1,4 +1,4 @@
-import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-C5MULDlh.esm.js';
+import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-DKAGRUEW.esm.js';
 import React__default from 'react';
 
 function _mergeNamespaces(n, m) {

package/dist/components/{FilePlayer-gXcilMCz.js → FilePlayer-CAnHK0Cd.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Debc-Hq8.js');
+var index = require('./index-DetZ05pw.js');
 var React = require('react');
 
 function _mergeNamespaces(n, m) {

package/dist/components/{FilePlayer-CnFGUWCJ.esm.js → FilePlayer-wg9lyafD.esm.js}

@@ -1,4 +1,4 @@
-import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-C5MULDlh.esm.js';
+import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-DKAGRUEW.esm.js';
 import React__default from 'react';
 
 function _mergeNamespaces(n, m) {

package/dist/components/{Kaltura-Dwtf5bDJ.js → Kaltura-Ct6kwbgP.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Debc-Hq8.js');
+var index = require('./index-DetZ05pw.js');
 var React = require('react');
 
 function _mergeNamespaces(n, m) {

package/dist/components/{Kaltura-BKTRnPwX.esm.js → Kaltura-DPaEN-dq.esm.js}

@@ -1,4 +1,4 @@
-import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-C5MULDlh.esm.js';
+import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-DKAGRUEW.esm.js';
 import React__default from 'react';
 
 function _mergeNamespaces(n, m) {

package/dist/components/{Mixcloud-HlioccZN.esm.js → Mixcloud-BobSN3YI.esm.js}

@@ -1,4 +1,4 @@
-import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-C5MULDlh.esm.js';
+import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-DKAGRUEW.esm.js';
 import React__default from 'react';
 
 function _mergeNamespaces(n, m) {

package/dist/components/{Mixcloud-CtZR5d1S.js → Mixcloud-sBbcL5rG.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Debc-Hq8.js');
+var index = require('./index-DetZ05pw.js');
 var React = require('react');
 
 function _mergeNamespaces(n, m) {

package/dist/components/{Mux-CiE-LfDW.esm.js → Mux-B9YP-rFr.esm.js}

@@ -1,4 +1,4 @@
-import { a as requirePatterns, g as getDefaultExportFromCjs } from './index-C5MULDlh.esm.js';
+import { a as requirePatterns, g as getDefaultExportFromCjs } from './index-DKAGRUEW.esm.js';
 import React__default from 'react';
 
 function _mergeNamespaces(n, m) {

package/dist/components/{Mux-DhMGRnH7.js → Mux-Cosy8sFO.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Debc-Hq8.js');
+var index = require('./index-DetZ05pw.js');
 var React = require('react');
 
 function _mergeNamespaces(n, m) {

package/dist/components/{Preview-DuscX4du.js → Preview-DiVfo6aa.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Debc-Hq8.js');
+var index = require('./index-DetZ05pw.js');
 var React = require('react');
 
 function _mergeNamespaces(n, m) {

package/dist/components/{Preview-BDrq-vcV.esm.js → Preview-XcTlhHT1.esm.js}

@@ -1,4 +1,4 @@
-import { g as getDefaultExportFromCjs } from './index-C5MULDlh.esm.js';
+import { g as getDefaultExportFromCjs } from './index-DKAGRUEW.esm.js';
 import React__default from 'react';
 
 function _mergeNamespaces(n, m) {

package/dist/components/{SoundCloud-BG1mh5fx.esm.js → SoundCloud-BTHoyFWT.esm.js}

@@ -1,4 +1,4 @@
-import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-C5MULDlh.esm.js';
+import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-DKAGRUEW.esm.js';
 import React__default from 'react';
 
 function _mergeNamespaces(n, m) {

package/dist/components/{SoundCloud-pcTMWQVG.js → SoundCloud-CIWqB-QW.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Debc-Hq8.js');
+var index = require('./index-DetZ05pw.js');
 var React = require('react');
 
 function _mergeNamespaces(n, m) {

package/dist/components/{Streamable-B-2t9AZh.js → Streamable-9anYiQtU.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Debc-Hq8.js');
+var index = require('./index-DetZ05pw.js');
 var React = require('react');
 
 function _mergeNamespaces(n, m) {

package/dist/components/{Streamable-3QXSsimo.esm.js → Streamable-DsfQCy3p.esm.js}

@@ -1,4 +1,4 @@
-import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-C5MULDlh.esm.js';
+import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-DKAGRUEW.esm.js';
 import React__default from 'react';
 
 function _mergeNamespaces(n, m) {

package/dist/components/{Twitch-B2wmDlW8.esm.js → Twitch-D1BOr8hj.esm.js}

@@ -1,4 +1,4 @@
-import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-C5MULDlh.esm.js';
+import { r as requireUtils, a as requirePatterns, g as getDefaultExportFromCjs } from './index-DKAGRUEW.esm.js';
 import React__default from 'react';
 
 function _mergeNamespaces(n, m) {

package/dist/components/{Twitch-Ccg79Yis.js → Twitch-Dud6e1Rv.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-Debc-Hq8.js');
+var index = require('./index-DetZ05pw.js');
 var React = require('react');
 
 function _mergeNamespaces(n, m) {

package/dist/components/VideoPlayer/Controls/Controls.js

@@ -99,15 +99,15 @@ var Controls = function (_a) {
             }
         });
     }); };
-    return (_jsxs(StyledControls, { children: [_jsx(StyledSlider, { type: 'range', min: 0, max: 100, value: played * 100, onMouseDown: onSeekMouseDownHandler, onChange: seekHandler, onMouseUp: seekMouseUpHandler }), _jsxs(StyledControllerLeft, { children: [_jsx(CustomTooltip, { title: playing ? 'Pause' : 'Play', children: _jsx(StyledPlayPauseIconContainer, { onClick: playPauseHandler, children: playing ? _jsx(PauseIcon, {}) : _jsx(PlayIcon, {}) }) }), _jsx(CustomTooltip, { title: "Rewind 10 seconds", children: _jsx(StyledRewindIconContainer, { children: _jsx(RewindIcon, { onClick: rewindHandler }) }) }), _jsx(CustomTooltip, { title: "Forward 10 seconds", children: _jsx(StyledRewindIconContainer, { children: _jsx(RewindIcon, { forward: true, onClick: handleFastForward }) }) }), _jsxs(StyledVolumeWrapper, { children: [_jsx(CustomTooltip, { title: muted ? 'Unmute' : 'Mute', children: _jsx(StyledVolumeIconContainer, { onClick: muteHandler, children: muted ? _jsx(VolumeMuteIcon, {}) : _jsx(VolumeUpIcon, {}) }) }), _jsx(StyledVolumeSlider, { type: 'range', value: volume * 100, onChange: volumeChangeHandler })] }), _jsxs(StyledTimeTrack, { children: [formatCurrentTime, " /", formatDuration] })] }), _jsxs(StyledControllerRight, { children: [handleSkipBackward && (_jsx(CustomTooltip, { title: "Previous video", children: _jsx(StyledRewindIconContainer, { children: _jsx(SkipIcon, { onClick: function () {
+    return (_jsxs(StyledControls, { children: [_jsx(StyledSlider, { type: 'range', min: 0, max: 100, value: played * 100, onMouseDown: onSeekMouseDownHandler, onChange: seekHandler, onMouseUp: seekMouseUpHandler }), _jsxs(StyledControllerLeft, { children: [_jsx(CustomTooltip, { title: playing ? 'Pause' : 'Play', children: _jsx(StyledPlayPauseIconContainer, { onClick: playPauseHandler, children: playing ? _jsx(PauseIcon, {}) : _jsx(PlayIcon, {}) }) }), _jsx(CustomTooltip, { title: "Rewind 5 seconds", children: _jsx(StyledRewindIconContainer, { className: "rewind-control", children: _jsx(RewindIcon, { onClick: rewindHandler }) }) }), _jsx(CustomTooltip, { title: "Forward 10 seconds", children: _jsx(StyledRewindIconContainer, { className: "forward-control", children: _jsx(RewindIcon, { forward: true, onClick: handleFastForward }) }) }), _jsxs(StyledVolumeWrapper, { children: [_jsx(CustomTooltip, { title: muted ? 'Unmute' : 'Mute', children: _jsx(StyledVolumeIconContainer, { onClick: muteHandler, children: muted ? _jsx(VolumeMuteIcon, {}) : _jsx(VolumeUpIcon, {}) }) }), _jsx(StyledVolumeSlider, { type: 'range', value: volume * 100, onChange: volumeChangeHandler })] }), _jsxs(StyledTimeTrack, { children: [formatCurrentTime, " /", formatDuration] })] }), _jsxs(StyledControllerRight, { children: [handleSkipBackward && (_jsx(CustomTooltip, { title: "Previous video", children: _jsx(StyledRewindIconContainer, { className: "skip-control", children: _jsx(SkipIcon, { onClick: function () {
                                     if (!isPreviousVideo)
                                         return;
                                     handleSkipBackward();
-                                }, className: isPreviousVideo ? '' : 'skip-icon-disabled' }) }) })), handleSkipForward && (_jsx(CustomTooltip, { title: "Next video", children: _jsx(StyledRewindIconContainer, { children: _jsx(SkipIcon, { forward: true, onClick: function () {
+                                }, className: isPreviousVideo ? '' : 'skip-icon-disabled' }) }) })), handleSkipForward && (_jsx(CustomTooltip, { title: "Next video", children: _jsx(StyledRewindIconContainer, { className: "skip-control", children: _jsx(SkipIcon, { forward: true, onClick: function () {
                                     if (!isNextVideo)
                                         return;
                                     handleSkipForward();
-                                }, className: isNextVideo ? '' : 'skip-icon-disabled' }) }) })), showFavorite && (_jsx(CustomTooltip, { title: isFavorite ? 'Remove from favorites' : 'Add to favorites', children: _jsx(StyledHeartIconContainer, { children: _jsx(HeartIcon, { active: isFavorite, onClick: toggleIsFavorite }) }) })), showDownload && downloadUrl && (_jsx(CustomTooltip, { title: "Download video", children: _jsx(StyledDownloadIconContainer, { children: _jsx(DownloadIcon, { onClick: handleDownloadClick }) }) })), _jsx(PlaybackSpeedMenu, { playbackSpeed: playbackRate, onPlaybackSpeedChange: function (speed) {
+                                }, className: isNextVideo ? '' : 'skip-icon-disabled' }) }) })), showFavorite && (_jsx(CustomTooltip, { title: isFavorite ? 'Remove from favorites' : 'Add to favorites', children: _jsx(StyledHeartIconContainer, { className: "favorite-control", children: _jsx(HeartIcon, { active: isFavorite, onClick: toggleIsFavorite }) }) })), showDownload && downloadUrl && (_jsx(CustomTooltip, { title: "Download video", children: _jsx(StyledDownloadIconContainer, { className: "download-control", children: _jsx(DownloadIcon, { onClick: handleDownloadClick }) }) })), _jsx(PlaybackSpeedMenu, { playbackSpeed: playbackRate, onPlaybackSpeedChange: function (speed) {
                             return setVideoState(function (prev) { return (__assign(__assign({}, prev), { playbackRate: speed })); });
                         }, customMenuWrapperStyles: {
                             position: 'unset',

package/dist/components/VideoPlayer/Controls/Controls.js.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.js","sourceRoot":"","sources":["../../../../src/components/VideoPlayer/Controls/Controls.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"Controls.js","sourceRoot":"","sources":["../../../../src/components/VideoPlayer/Controls/Controls.tsx"],"names":[],"mappings":"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"}

package/dist/components/VideoPlayer/Controls/Controls.styles.d.ts

@@ -8,12 +8,28 @@ export declare const StyledVolumeSlider: import("styled-components/dist/types").
 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;
 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;
 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;
-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;
-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;
-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;
-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;
-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;
-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;
-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;
-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;
+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"> & {
+    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;
+}, never>> & string;
+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"> & {
+    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;
+}, never>> & string;
+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"> & {
+    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;
+}, never>> & string;
+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"> & {
+    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;
+}, never>> & string;
+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"> & {
+    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;
+}, never>> & string;
+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"> & {
+    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;
+}, never>> & string;
+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"> & {
+    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;
+}, never>> & string;
+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"> & {
+    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;
+}, never>> & string;
 export {};

package/dist/components/VideoPlayer/Controls/Controls.styles.js

@@ -3,26 +3,30 @@ var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cook
     return cooked;
 };
 import styled from 'styled-components';
-export var StyledControls = styled.div(templateObject_1 || (templateObject_1 = __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"])), { fontStyle: 'descriptor' });
-export var StyledSlider = styled.input(templateObject_2 || (templateObject_2 = __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) {
+export var StyledControls = styled.div(templateObject_1 || (templateObject_1 = __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"])), { fontStyle: 'descriptor' });
+export var StyledSlider = styled.input(templateObject_2 || (templateObject_2 = __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) {
     var value = _a.value;
     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  )");
 });
-export var StyledVolumeWrapper = styled.div(templateObject_3 || (templateObject_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"])));
-export var StyledVolumeSlider = styled.input(templateObject_4 || (templateObject_4 = __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) {
+export var StyledVolumeWrapper = styled.div(templateObject_3 || (templateObject_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"])));
+export var StyledVolumeSlider = styled.input(templateObject_4 || (templateObject_4 = __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) {
     var value = _a.value;
     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  )");
 });
-export var StyledControllerLeft = styled.div(templateObject_5 || (templateObject_5 = __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"])));
-export var StyledControllerRight = styled.div(templateObject_6 || (templateObject_6 = __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"])));
-export var StyledTimeTrack = styled.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"])), { fontStyle: 'descriptor' });
-export var StyledHeartIconContainer = styled.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"])));
-export var StyledDownloadIconContainer = styled.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"])));
-export var StyledSubtitlesIconContainer = styled.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"])));
-export var StyledFullscreenIconContainer = styled.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"])));
-export var StyledPictureInPictureIconContainer = styled.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"])));
-export var StyledVolumeIconContainer = styled.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"])));
-export var StyledPlayPauseIconContainer = styled.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"])));
-export var StyledRewindIconContainer = styled.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"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15;
+export var StyledControllerLeft = styled.div(templateObject_5 || (templateObject_5 = __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"])));
+export var StyledControllerRight = styled.div(templateObject_6 || (templateObject_6 = __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"])));
+export var StyledTimeTrack = styled.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"
+    // Base styles for icon containers
+])), { fontStyle: 'descriptor' });
+// Base styles for icon containers
+var BaseIconContainer = styled.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"])));
+export var StyledHeartIconContainer = styled(BaseIconContainer)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  /* Additional specific styles if needed */\n"], ["\n  /* Additional specific styles if needed */\n"])));
+export var StyledDownloadIconContainer = styled(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"])));
+export var StyledSubtitlesIconContainer = styled(BaseIconContainer)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  /* Additional specific styles if needed */\n"], ["\n  /* Additional specific styles if needed */\n"])));
+export var StyledFullscreenIconContainer = styled(BaseIconContainer)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  /* Additional specific styles if needed */\n"], ["\n  /* Additional specific styles if needed */\n"])));
+export var StyledPictureInPictureIconContainer = styled(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"])));
+export var StyledVolumeIconContainer = styled(BaseIconContainer)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  /* Additional specific styles if needed */\n"], ["\n  /* Additional specific styles if needed */\n"])));
+export var StyledPlayPauseIconContainer = styled(BaseIconContainer)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  /* Additional specific styles if needed */\n"], ["\n  /* Additional specific styles if needed */\n"])));
+export var StyledRewindIconContainer = styled(BaseIconContainer)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  /* Additional specific styles if needed */\n"], ["\n  /* Additional specific styles if needed */\n"])));
+var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
 //# sourceMappingURL=Controls.styles.js.map

package/dist/components/VideoPlayer/Controls/Controls.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"Controls.styles.js","sourceRoot":"","sources":["../../../../src/components/VideoPlayer/Controls/Controls.styles.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,IAAM,cAAc,GAAG,MAAM,CAAC,GAAG,6qBAAA,+lBA+BlC,EAA2B,SAEhC,KAFK,EAAE,SAAS,EAAE,YAAY,EAAE,CAEhC,CAAA;AAMD,MAAM,CAAC,IAAM,YAAY,GAAG,MAAM,CAAC,KAAK,orBAAa,uHAOrC,EAOZ,wfAwBH,KA/Be,UAAC,EAAS;QAAP,KAAK,WAAA;IACpB,OAAA,8GAG6B,KAAK,2CACV,KAAK,4CAE7B;AANA,CAMA,CAwBH,CAAA;AAED,MAAM,CAAC,IAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,wUAAA,qQAmB5C,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,6rBAAa,0EAI3C,EAOZ,8iBA0BH,KAjCe,UAAC,EAAS;QAAP,KAAK,WAAA;IACpB,OAAA,gHAG8B,KAAK,2CACX,KAAK,4CAE7B;AANA,CAMA,CA0BH,CAAA;AAED,MAAM,CAAC,IAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,2IAAA,wEAK7C,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,qQAAA,kMAa9C,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,eAAe,GAAG,MAAM,CAAC,GAAG,gJAAA,yBAErC,EAA2B,kDAG9B,KAHG,EAAE,SAAS,EAAE,YAAY,EAAE,CAG9B,CAAA;AAED,MAAM,CAAC,IAAM,wBAAwB,GAAG,MAAM,CAAC,GAAG,4TAAA,yPAcjD,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,2BAA2B,GAAG,MAAM,CAAC,GAAG,ynBAAA,sjBA6BpD,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,8TAAA,yPAcrD,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,6BAA6B,GAAG,MAAM,CAAC,GAAG,8TAAA,yPActD,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,mCAAmC,GAAG,MAAM,CAAC,GAAG,mYAAA,8TAkB5D,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,8TAAA,yPAclD,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,4BAA4B,GAAG,MAAM,CAAC,GAAG,8TAAA,yPAcrD,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,yBAAyB,GAAG,MAAM,CAAC,GAAG,kUAAA,6PAelD,IAAA,CAAA"}
+{"version":3,"file":"Controls.styles.js","sourceRoot":"","sources":["../../../../src/components/VideoPlayer/Controls/Controls.styles.tsx"],"names":[],"mappings":";;;;AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC,MAAM,CAAC,IAAM,cAAc,GAAG,MAAM,CAAC,GAAG,olDAAA,sgDA4ElC,EAA2B,SAEhC,KAFK,EAAE,SAAS,EAAE,YAAY,EAAE,CAEhC,CAAA;AAMD,MAAM,CAAC,IAAM,YAAY,GAAG,MAAM,CAAC,KAAK,2+CAAa,uHAOrC,EAOZ,+yCA4DH,KAnEe,UAAC,EAAS;QAAP,KAAK,WAAA;IACpB,OAAA,8GAG6B,KAAK,2CACV,KAAK,4CAE7B;AANA,CAMA,CA4DH,CAAA;AAED,MAAM,CAAC,IAAM,mBAAmB,GAAG,MAAM,CAAC,GAAG,myBAAA,guBA0C5C,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,kBAAkB,GAAG,MAAM,CAAC,KAAK,6rCAAa,0EAI3C,EAOZ,8iCAoDH,KA3De,UAAC,EAAS;QAAP,KAAK,WAAA;IACpB,OAAA,gHAG8B,KAAK,2CACX,KAAK,4CAE7B;AANA,CAMA,CAoDH,CAAA;AAED,MAAM,CAAC,IAAM,oBAAoB,GAAG,MAAM,CAAC,GAAG,0iBAAA,ueA0B7C,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,qBAAqB,GAAG,MAAM,CAAC,GAAG,ooBAAA,ikBAiC9C,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,eAAe,GAAG,MAAM,CAAC,GAAG,qaAAA,yBAErC,EAA2B,uUAiB9B;IAED,kCAAkC;KAnB9B,EAAE,SAAS,EAAE,YAAY,EAAE,CAiB9B,CAAA;AAED,kCAAkC;AAClC,IAAM,iBAAiB,GAAG,MAAM,CAAC,GAAG,w1BAAA,qxBAsCnC,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,wBAAwB,GAAG,MAAM,CAAC,iBAAiB,CAAC,qHAAA,kDAEhE,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,2BAA2B,GAAG,MAAM,CAAC,iBAAiB,CAAC,4mBAAA,uiBAyBnE,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,4BAA4B,GAAG,MAAM,CAAC,iBAAiB,CAAC,uHAAA,kDAEpE,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,6BAA6B,GAAG,MAAM,CAAC,iBAAiB,CAAC,uHAAA,kDAErE,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,mCAAmC,GAAG,MAAM,CAAC,iBAAiB,CAAC,mNAAA,8IAQ3E,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,yBAAyB,GAAG,MAAM,CAAC,iBAAiB,CAAC,uHAAA,kDAEjE,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,4BAA4B,GAAG,MAAM,CAAC,iBAAiB,CAAC,uHAAA,kDAEpE,IAAA,CAAA;AAED,MAAM,CAAC,IAAM,yBAAyB,GAAG,MAAM,CAAC,iBAAiB,CAAC,uHAAA,kDAEjE,IAAA,CAAA"}

package/dist/components/VideoPlayer/pipManager.d.ts

@@ -0,0 +1,60 @@
+/**
+ * Global Picture-in-Picture Manager
+ * This module manages PiP state across component unmounts and route changes
+ */
+interface PiPVideoState {
+    url: string;
+    currentTime: number;
+    isPlaying: boolean;
+    volume: number;
+    playbackRate: number;
+}
+declare class PictureInPictureManager {
+    private videoElement;
+    private pipContainer;
+    private currentVideoState;
+    private onStateChange;
+    constructor();
+    /**
+     * Register a video element for PiP management
+     */
+    registerVideo(videoElement: HTMLVideoElement, url: string, onStateChange?: (state: PiPVideoState) => void): void;
+    /**
+     * Unregister the current video element
+     */
+    unregisterVideo(): void;
+    /**
+     * Create a persistent video element for PiP
+     */
+    private createPersistentVideo;
+    /**
+     * Enter picture-in-picture mode with persistence
+     */
+    enterPiP(): Promise<void>;
+    /**
+     * Exit picture-in-picture mode
+     */
+    exitPiP(): Promise<void>;
+    /**
+     * Check if currently in PiP mode
+     */
+    isPiPActive(): boolean;
+    /**
+     * Get current video state
+     */
+    getCurrentState(): PiPVideoState | null;
+    /**
+     * Restore video state to a new video element
+     */
+    restoreStateToVideo(videoElement: HTMLVideoElement): void;
+    private handleTimeUpdate;
+    private handlePlayStateChange;
+    private handleVolumeChange;
+    private handleRateChange;
+    private handlePiPEnter;
+    private handlePiPExit;
+    private notifyStateChange;
+    private cleanup;
+}
+export declare const pipManager: PictureInPictureManager;
+export {};