funuicss 3.7.10 → 3.7.12

package/ui/video/Video.js

@@ -102,7 +102,6 @@ var tfi_1 = require("react-icons/tfi");
 var Text_1 = __importDefault(require("../text/Text"));
 var RowFlex_1 = __importDefault(require("../specials/RowFlex"));
 var ToolTip_1 = __importDefault(require("../tooltip/ToolTip"));
-var Circle_1 = __importDefault(require("../specials/Circle"));
 var Tip_1 = __importDefault(require("../tooltip/Tip"));
 var videoFunctions_1 = require("./videoFunctions");
 var videoShortcuts_1 = require("./videoShortcuts");
@@ -110,7 +109,6 @@ var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
 // Configuration hook
 var useComponentConfiguration = function (componentName, variant) {
     if (variant === void 0) { variant = ''; }
-    // In a real implementation, this would come from a theme context or configuration file
     var getComponentConfig = function () {
         var baseConfig = {
             Video: {
@@ -121,8 +119,8 @@ var useComponentConfiguration = function (componentName, variant) {
                     showVolume: true,
                     showTime: true,
                     showFullscreen: true,
-                    showDownload: true,
-                    showSeekButtons: true,
+                    showDownload: false,
+                    showSeekButtons: false,
                     spacebarPlay: true,
                     autoPlay: false,
                     loop: false,
@@ -144,18 +142,20 @@ var useComponentConfiguration = function (componentName, variant) {
                     rewindCss: '',
                     forwardCss: '',
                     buttonCss: '',
+                    volumeStyle: 'slider', // 'slider' | 'compact' | 'hover'
                 },
                 minimal: {
                     showControls: true,
                     showPlayPause: true,
                     showProgress: true,
                     showVolume: false,
-                    showTime: false,
-                    showFullscreen: false,
+                    showTime: true,
+                    showFullscreen: true,
                     showDownload: false,
                     showSeekButtons: false,
                     controlsCss: 'minimal-controls',
                     buttonCss: 'minimal-btn',
+                    volumeStyle: 'hover',
                 },
                 embedded: {
                     showControls: false,
@@ -175,6 +175,7 @@ var useComponentConfiguration = function (componentName, variant) {
                     showSeekButtons: true,
                     controlsCss: 'full-featured-controls',
                     buttonCss: 'featured-btn',
+                    volumeStyle: 'slider',
                 },
                 theater: {
                     showControls: true,
@@ -182,6 +183,21 @@ var useComponentConfiguration = function (componentName, variant) {
                     videoCss: 'theater-video',
                     controlsCss: 'theater-controls',
                     fullscreenCss: 'theater-fullscreen',
+                    volumeStyle: 'slider',
+                },
+                youtube: {
+                    showControls: true,
+                    showPlayPause: true,
+                    showProgress: true,
+                    showVolume: true,
+                    showTime: true,
+                    showFullscreen: true,
+                    showDownload: false,
+                    showSeekButtons: false,
+                    controlsCss: 'youtube-controls',
+                    buttonCss: 'youtube-btn',
+                    volumeStyle: 'hover',
+                    hideControlsDelay: 2000,
                 }
             }
         };
@@ -191,7 +207,6 @@ var useComponentConfiguration = function (componentName, variant) {
         var config = getComponentConfig();
         var variantConfig = variant && config[variant] ? config[variant] : {};
         var defaultConfig = config.default || {};
-        // Merge: default config < variant config < local props (local props have highest priority)
         var mergedProps = __assign(__assign(__assign({}, defaultConfig), variantConfig), localProps);
         return {
             props: mergedProps,
@@ -206,11 +221,11 @@ var useComponentConfiguration = function (componentName, variant) {
 };
 function Video(_a) {
     var _this = this;
-    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6;
-    var src = _a.src, poster = _a.poster, onDuration = _a.onDuration, onEnded = _a.onEnded, isPause = _a.isPause, spacebarPlay = _a.spacebarPlay, _7 = _a.className, className = _7 === void 0 ? '' : _7, autoPlay = _a.autoPlay, showControls = _a.showControls, showPlayPause = _a.showPlayPause, showProgress = _a.showProgress, showVolume = _a.showVolume, showTime = _a.showTime, showFullscreen = _a.showFullscreen, showDownload = _a.showDownload, showSeekButtons = _a.showSeekButtons, playIcon = _a.playIcon, pauseIcon = _a.pauseIcon, fullscreenIcon = _a.fullscreenIcon, downloadIcon = _a.downloadIcon, volumeIcon = _a.volumeIcon, muteIcon = _a.muteIcon, rewindIcon = _a.rewindIcon, forwardIcon = _a.forwardIcon, hideControlsDelay = _a.hideControlsDelay, loop = _a.loop, muted = _a.muted, seekAmount = _a.seekAmount, _8 = _a.funcss, funcss = _8 === void 0 ? '' : _8, _9 = _a.containerCss, containerCss = _9 === void 0 ? '' : _9, _10 = _a.videoCss, videoCss = _10 === void 0 ? '' : _10, _11 = _a.controlsCss, controlsCss = _11 === void 0 ? '' : _11, _12 = _a.progressCss, progressCss = _12 === void 0 ? '' : _12, _13 = _a.progressBarCss, progressBarCss = _13 === void 0 ? '' : _13, _14 = _a.timeCss, timeCss = _14 === void 0 ? '' : _14, _15 = _a.playCss, playCss = _15 === void 0 ? '' : _15, _16 = _a.pauseCss, pauseCss = _16 === void 0 ? '' : _16, _17 = _a.volumeCss, volumeCss = _17 === void 0 ? '' : _17, _18 = _a.fullscreenCss, fullscreenCss = _18 === void 0 ? '' : _18, _19 = _a.downloadCss, downloadCss = _19 === void 0 ? '' : _19, _20 = _a.rewindCss, rewindCss = _20 === void 0 ? '' : _20, _21 = _a.forwardCss, forwardCss = _21 === void 0 ? '' : _21, _22 = _a.buttonCss, buttonCss = _22 === void 0 ? '' : _22, _23 = _a.variant, variant = _23 === void 0 ? '' : _23, rest = __rest(_a, ["src", "poster", "onDuration", "onEnded", "isPause", "spacebarPlay", "className", "autoPlay", "showControls", "showPlayPause", "showProgress", "showVolume", "showTime", "showFullscreen", "showDownload", "showSeekButtons", "playIcon", "pauseIcon", "fullscreenIcon", "downloadIcon", "volumeIcon", "muteIcon", "rewindIcon", "forwardIcon", "hideControlsDelay", "loop", "muted", "seekAmount", "funcss", "containerCss", "videoCss", "controlsCss", "progressCss", "progressBarCss", "timeCss", "playCss", "pauseCss", "volumeCss", "fullscreenCss", "downloadCss", "rewindCss", "forwardCss", "buttonCss", "variant"]);
+    var _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _0, _1, _2, _3, _4, _5, _6, _7;
+    var src = _a.src, poster = _a.poster, onDuration = _a.onDuration, onEnded = _a.onEnded, isPause = _a.isPause, spacebarPlay = _a.spacebarPlay, _8 = _a.className, className = _8 === void 0 ? '' : _8, autoPlay = _a.autoPlay, showControls = _a.showControls, showPlayPause = _a.showPlayPause, showProgress = _a.showProgress, showVolume = _a.showVolume, showTime = _a.showTime, showFullscreen = _a.showFullscreen, showDownload = _a.showDownload, showSeekButtons = _a.showSeekButtons, playIcon = _a.playIcon, pauseIcon = _a.pauseIcon, fullscreenIcon = _a.fullscreenIcon, downloadIcon = _a.downloadIcon, volumeIcon = _a.volumeIcon, muteIcon = _a.muteIcon, rewindIcon = _a.rewindIcon, forwardIcon = _a.forwardIcon, hideControlsDelay = _a.hideControlsDelay, loop = _a.loop, muted = _a.muted, seekAmount = _a.seekAmount, _9 = _a.funcss, funcss = _9 === void 0 ? '' : _9, _10 = _a.containerCss, containerCss = _10 === void 0 ? '' : _10, _11 = _a.videoCss, videoCss = _11 === void 0 ? '' : _11, _12 = _a.controlsCss, controlsCss = _12 === void 0 ? '' : _12, _13 = _a.progressCss, progressCss = _13 === void 0 ? '' : _13, _14 = _a.progressBarCss, progressBarCss = _14 === void 0 ? '' : _14, _15 = _a.timeCss, timeCss = _15 === void 0 ? '' : _15, _16 = _a.playCss, playCss = _16 === void 0 ? '' : _16, _17 = _a.pauseCss, pauseCss = _17 === void 0 ? '' : _17, _18 = _a.volumeCss, volumeCss = _18 === void 0 ? '' : _18, _19 = _a.fullscreenCss, fullscreenCss = _19 === void 0 ? '' : _19, _20 = _a.downloadCss, downloadCss = _20 === void 0 ? '' : _20, _21 = _a.rewindCss, rewindCss = _21 === void 0 ? '' : _21, _22 = _a.forwardCss, forwardCss = _22 === void 0 ? '' : _22, _23 = _a.buttonCss, buttonCss = _23 === void 0 ? '' : _23, _24 = _a.volumeStyle, volumeStyle = _24 === void 0 ? 'slider' : _24, style = _a.style, _25 = _a.variant, variant = _25 === void 0 ? '' : _25, rest = __rest(_a, ["src", "poster", "onDuration", "onEnded", "isPause", "spacebarPlay", "className", "autoPlay", "showControls", "showPlayPause", "showProgress", "showVolume", "showTime", "showFullscreen", "showDownload", "showSeekButtons", "playIcon", "pauseIcon", "fullscreenIcon", "downloadIcon", "volumeIcon", "muteIcon", "rewindIcon", "forwardIcon", "hideControlsDelay", "loop", "muted", "seekAmount", "funcss", "containerCss", "videoCss", "controlsCss", "progressCss", "progressBarCss", "timeCss", "playCss", "pauseCss", "volumeCss", "fullscreenCss", "downloadCss", "rewindCss", "forwardCss", "buttonCss", "volumeStyle", "style", "variant"]);
     var mergeWithLocal = useComponentConfiguration('Video', variant).mergeWithLocal;
     // Create local props object - these will override config props
-    var localProps = __assign({ src: src, poster: poster, onDuration: onDuration, onEnded: onEnded, isPause: isPause, spacebarPlay: spacebarPlay, className: className, autoPlay: autoPlay, showControls: showControls, showPlayPause: showPlayPause, showProgress: showProgress, showVolume: showVolume, showTime: showTime, showFullscreen: showFullscreen, showDownload: showDownload, showSeekButtons: showSeekButtons, playIcon: playIcon, pauseIcon: pauseIcon, fullscreenIcon: fullscreenIcon, downloadIcon: downloadIcon, volumeIcon: volumeIcon, muteIcon: muteIcon, rewindIcon: rewindIcon, forwardIcon: forwardIcon, hideControlsDelay: hideControlsDelay, loop: loop, muted: muted, seekAmount: seekAmount, funcss: funcss, containerCss: containerCss, videoCss: videoCss, controlsCss: controlsCss, progressCss: progressCss, progressBarCss: progressBarCss, timeCss: timeCss, playCss: playCss, pauseCss: pauseCss, volumeCss: volumeCss, fullscreenCss: fullscreenCss, downloadCss: downloadCss, rewindCss: rewindCss, forwardCss: forwardCss, buttonCss: buttonCss }, rest);
+    var localProps = __assign({ src: src, poster: poster, onDuration: onDuration, onEnded: onEnded, isPause: isPause, spacebarPlay: spacebarPlay, className: className, autoPlay: autoPlay, showControls: showControls, showPlayPause: showPlayPause, showProgress: showProgress, showVolume: showVolume, showTime: showTime, showFullscreen: showFullscreen, showDownload: showDownload, showSeekButtons: showSeekButtons, playIcon: playIcon, pauseIcon: pauseIcon, fullscreenIcon: fullscreenIcon, downloadIcon: downloadIcon, volumeIcon: volumeIcon, muteIcon: muteIcon, rewindIcon: rewindIcon, forwardIcon: forwardIcon, hideControlsDelay: hideControlsDelay, loop: loop, muted: muted, seekAmount: seekAmount, funcss: funcss, containerCss: containerCss, videoCss: videoCss, controlsCss: controlsCss, progressCss: progressCss, progressBarCss: progressBarCss, timeCss: timeCss, playCss: playCss, pauseCss: pauseCss, volumeCss: volumeCss, fullscreenCss: fullscreenCss, downloadCss: downloadCss, rewindCss: rewindCss, forwardCss: forwardCss, buttonCss: buttonCss, volumeStyle: volumeStyle, style: style }, rest);
     // Merge with config - LOCAL PROPS OVERRIDE CONFIG
     var mergedProps = mergeWithLocal(localProps).props;
     // Extract final values - local props take precedence
@@ -229,8 +244,8 @@ function Video(_a) {
         showVolume: (_h = mergedProps.showVolume) !== null && _h !== void 0 ? _h : true,
         showTime: (_j = mergedProps.showTime) !== null && _j !== void 0 ? _j : true,
         showFullscreen: (_k = mergedProps.showFullscreen) !== null && _k !== void 0 ? _k : true,
-        showDownload: (_l = mergedProps.showDownload) !== null && _l !== void 0 ? _l : true,
-        showSeekButtons: (_m = mergedProps.showSeekButtons) !== null && _m !== void 0 ? _m : true,
+        showDownload: (_l = mergedProps.showDownload) !== null && _l !== void 0 ? _l : false,
+        showSeekButtons: (_m = mergedProps.showSeekButtons) !== null && _m !== void 0 ? _m : false,
         playIcon: mergedProps.playIcon,
         pauseIcon: mergedProps.pauseIcon,
         fullscreenIcon: mergedProps.fullscreenIcon,
@@ -258,29 +273,31 @@ function Video(_a) {
         rewindCss: (_4 = mergedProps.rewindCss) !== null && _4 !== void 0 ? _4 : '',
         forwardCss: (_5 = mergedProps.forwardCss) !== null && _5 !== void 0 ? _5 : '',
         buttonCss: (_6 = mergedProps.buttonCss) !== null && _6 !== void 0 ? _6 : '',
+        volumeStyle: (_7 = mergedProps.volumeStyle) !== null && _7 !== void 0 ? _7 : 'slider',
     };
     var videoRef = (0, react_1.useRef)(null);
     var containerRef = (0, react_1.useRef)(null);
     var animationFrameRef = (0, react_1.useRef)(null);
-    var _24 = (0, react_1.useState)(false), isPlaying = _24[0], setIsPlaying = _24[1];
-    var _25 = (0, react_1.useState)(0), currentTime = _25[0], setCurrentTime = _25[1];
-    var _26 = (0, react_1.useState)(0), duration = _26[0], setDuration = _26[1];
-    var _27 = (0, react_1.useState)(final.muted ? 0 : 1), volume = _27[0], setVolume = _27[1];
-    var _28 = (0, react_1.useState)(final.muted), isMuted = _28[0], setIsMuted = _28[1];
-    var _29 = (0, react_1.useState)(false), isFullScreen = _29[0], setIsFullScreen = _29[1];
-    var _30 = (0, react_1.useState)(false), showControlsState = _30[0], setShowControlsState = _30[1];
-    var _31 = (0, react_1.useState)(false), hasStarted = _31[0], setHasStarted = _31[1];
-    var _32 = (0, react_1.useState)(false), isHoveringProgress = _32[0], setIsHoveringProgress = _32[1];
-    var _33 = (0, react_1.useState)(false), isHoveringVolume = _33[0], setIsHoveringVolume = _33[1];
+    var _26 = (0, react_1.useState)(false), isPlaying = _26[0], setIsPlaying = _26[1];
+    var _27 = (0, react_1.useState)(0), currentTime = _27[0], setCurrentTime = _27[1];
+    var _28 = (0, react_1.useState)(0), duration = _28[0], setDuration = _28[1];
+    var _29 = (0, react_1.useState)(final.muted ? 0 : 1), volume = _29[0], setVolume = _29[1];
+    var _30 = (0, react_1.useState)(final.muted), isMuted = _30[0], setIsMuted = _30[1];
+    var _31 = (0, react_1.useState)(false), isFullScreen = _31[0], setIsFullScreen = _31[1];
+    var _32 = (0, react_1.useState)(false), showControlsState = _32[0], setShowControlsState = _32[1];
+    var _33 = (0, react_1.useState)(false), hasStarted = _33[0], setHasStarted = _33[1];
+    var _34 = (0, react_1.useState)(false), isHoveringProgress = _34[0], setIsHoveringProgress = _34[1];
+    var _35 = (0, react_1.useState)(false), isHoveringVolume = _35[0], setIsHoveringVolume = _35[1];
+    var _36 = (0, react_1.useState)(false), showVolumeSlider = _36[0], setShowVolumeSlider = _36[1];
     // Dynamic icon states
-    var _34 = (0, react_1.useState)(null), dynamicPlayIcon = _34[0], setDynamicPlayIcon = _34[1];
-    var _35 = (0, react_1.useState)(null), dynamicPauseIcon = _35[0], setDynamicPauseIcon = _35[1];
-    var _36 = (0, react_1.useState)(null), dynamicFullscreenIcon = _36[0], setDynamicFullscreenIcon = _36[1];
-    var _37 = (0, react_1.useState)(null), dynamicDownloadIcon = _37[0], setDynamicDownloadIcon = _37[1];
-    var _38 = (0, react_1.useState)(null), dynamicVolumeIcon = _38[0], setDynamicVolumeIcon = _38[1];
-    var _39 = (0, react_1.useState)(null), dynamicMuteIcon = _39[0], setDynamicMuteIcon = _39[1];
-    var _40 = (0, react_1.useState)(null), dynamicRewindIcon = _40[0], setDynamicRewindIcon = _40[1];
-    var _41 = (0, react_1.useState)(null), dynamicForwardIcon = _41[0], setDynamicForwardIcon = _41[1];
+    var _37 = (0, react_1.useState)(null), dynamicPlayIcon = _37[0], setDynamicPlayIcon = _37[1];
+    var _38 = (0, react_1.useState)(null), dynamicPauseIcon = _38[0], setDynamicPauseIcon = _38[1];
+    var _39 = (0, react_1.useState)(null), dynamicFullscreenIcon = _39[0], setDynamicFullscreenIcon = _39[1];
+    var _40 = (0, react_1.useState)(null), dynamicDownloadIcon = _40[0], setDynamicDownloadIcon = _40[1];
+    var _41 = (0, react_1.useState)(null), dynamicVolumeIcon = _41[0], setDynamicVolumeIcon = _41[1];
+    var _42 = (0, react_1.useState)(null), dynamicMuteIcon = _42[0], setDynamicMuteIcon = _42[1];
+    var _43 = (0, react_1.useState)(null), dynamicRewindIcon = _43[0], setDynamicRewindIcon = _43[1];
+    var _44 = (0, react_1.useState)(null), dynamicForwardIcon = _44[0], setDynamicForwardIcon = _44[1];
     // Helper function to load dynamic icons
     var loadDynamicIcon = function (iconProp, setter, defaultIcon) { return __awaiter(_this, void 0, void 0, function () {
         var iconNode;
@@ -298,27 +315,26 @@ function Video(_a) {
                     setter(iconNode || defaultIcon);
                     return [3 /*break*/, 3];
                 case 2:
-                    // It's already a ReactNode - use it directly
                     setter(iconProp);
                     _a.label = 3;
                 case 3: return [2 /*return*/];
             }
         });
     }); };
-    // Load all dynamic icons on component mount and when icon props change
+    // Load all dynamic icons
     (0, react_1.useEffect)(function () {
         var loadIcons = function () { return __awaiter(_this, void 0, void 0, function () {
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0: return [4 /*yield*/, Promise.all([
-                            loadDynamicIcon(final.playIcon, setDynamicPlayIcon, react_1.default.createElement(pi_1.PiPlay, { size: 16 })),
-                            loadDynamicIcon(final.pauseIcon, setDynamicPauseIcon, react_1.default.createElement(pi_1.PiPause, { size: 16 })),
-                            loadDynamicIcon(final.fullscreenIcon, setDynamicFullscreenIcon, react_1.default.createElement(pi_1.PiCornersOut, { size: 16 })),
-                            loadDynamicIcon(final.downloadIcon, setDynamicDownloadIcon, react_1.default.createElement(tfi_1.TfiDownload, { size: 14 })),
-                            loadDynamicIcon(final.volumeIcon, setDynamicVolumeIcon, react_1.default.createElement(pi_1.PiSpeakerHigh, { size: 16 })),
-                            loadDynamicIcon(final.muteIcon, setDynamicMuteIcon, react_1.default.createElement(pi_1.PiSpeakerSlash, { size: 16 })),
-                            loadDynamicIcon(final.rewindIcon, setDynamicRewindIcon, react_1.default.createElement(tfi_1.TfiControlBackward, { size: 14 })),
-                            loadDynamicIcon(final.forwardIcon, setDynamicForwardIcon, react_1.default.createElement(tfi_1.TfiControlForward, { size: 14 })),
+                            loadDynamicIcon(final.playIcon, setDynamicPlayIcon, react_1.default.createElement(pi_1.PiPlay, { size: 20 })),
+                            loadDynamicIcon(final.pauseIcon, setDynamicPauseIcon, react_1.default.createElement(pi_1.PiPause, { size: 20 })),
+                            loadDynamicIcon(final.fullscreenIcon, setDynamicFullscreenIcon, react_1.default.createElement(pi_1.PiCornersOut, { size: 18 })),
+                            loadDynamicIcon(final.downloadIcon, setDynamicDownloadIcon, react_1.default.createElement(tfi_1.TfiDownload, { size: 16 })),
+                            loadDynamicIcon(final.volumeIcon, setDynamicVolumeIcon, react_1.default.createElement(pi_1.PiSpeakerHigh, { size: 18 })),
+                            loadDynamicIcon(final.muteIcon, setDynamicMuteIcon, react_1.default.createElement(pi_1.PiSpeakerSlash, { size: 18 })),
+                            loadDynamicIcon(final.rewindIcon, setDynamicRewindIcon, react_1.default.createElement(tfi_1.TfiControlBackward, { size: 16 })),
+                            loadDynamicIcon(final.forwardIcon, setDynamicForwardIcon, react_1.default.createElement(tfi_1.TfiControlForward, { size: 16 })),
                         ])];
                     case 1:
                         _a.sent();
@@ -331,12 +347,11 @@ function Video(_a) {
         final.playIcon, final.pauseIcon, final.fullscreenIcon, final.downloadIcon,
         final.volumeIcon, final.muteIcon, final.rewindIcon, final.forwardIcon
     ]);
-    // Helper function to render icon with proper size
+    // Helper function to render icon
     var renderIcon = function (icon, defaultSize) {
         if (defaultSize === void 0) { defaultSize = 16; }
         if (!icon)
             return null;
-        // If it's a React element, clone it with the size prop
         if (react_1.default.isValidElement(icon)) {
             return react_1.default.cloneElement(icon, {
                 size: icon.props.size || defaultSize
@@ -375,19 +390,15 @@ function Video(_a) {
         var rect = container.getBoundingClientRect();
         var clickX = e.clientX - rect.left;
         var width = rect.width;
-        // Divide video into three areas
         var leftArea = width * 0.3;
         var rightArea = width * 0.7;
         if (clickX < leftArea) {
-            // Left area - rewind
             handleSeek(-final.seekAmount);
         }
         else if (clickX > rightArea) {
-            // Right area - forward
             handleSeek(final.seekAmount);
         }
         else {
-            // Middle area - play/pause
             handlePlayPauseToggle();
         }
     };
@@ -473,7 +484,7 @@ function Video(_a) {
     var handleVideoEnd = function () {
         var _a;
         setIsPlaying(false);
-        (_a = final.onEnded) === null || _a === void 0 ? void 0 : _a.call(final); // Call the onEnded callback
+        (_a = final.onEnded) === null || _a === void 0 ? void 0 : _a.call(final);
         if (final.loop && videoRef.current) {
             videoRef.current.currentTime = 0;
             playVideo();
@@ -511,10 +522,14 @@ function Video(_a) {
         var show = function () {
             setShowControlsState(true);
             clearTimeout(timer);
-            timer = setTimeout(function () { return setShowControlsState(false); }, final.hideControlsDelay);
+            timer = setTimeout(function () {
+                setShowControlsState(false);
+                setShowVolumeSlider(false);
+            }, final.hideControlsDelay);
         };
         var hide = function () {
             setShowControlsState(false);
+            setShowVolumeSlider(false);
         };
         var container = containerRef.current;
         if (container && final.showControls) {
@@ -543,50 +558,80 @@ function Video(_a) {
                 cancelAnimationFrame(animationFrameRef.current);
         };
     }, [isPlaying, updateCurrentTime]);
-    // Beautiful Progress Bar Component
-    var ProgressBar = function () { return (react_1.default.createElement("div", { className: "progress-container mb-4" },
+    // Get volume icon based on volume level
+    var getVolumeIcon = function () {
+        if (isMuted || volume === 0) {
+            return renderIcon(dynamicMuteIcon, 18);
+        }
+        else if (volume < 0.5) {
+            return react_1.default.createElement(pi_1.PiSpeakerNone, { size: 18 });
+        }
+        else {
+            return renderIcon(dynamicVolumeIcon, 18);
+        }
+    };
+    // Simple Progress Bar Component (YouTube style)
+    var ProgressBar = function () { return (react_1.default.createElement("div", { className: "progress-container" },
         react_1.default.createElement("div", { className: "progress-wrapper" },
             react_1.default.createElement("input", { type: "range", min: 0, max: duration, value: currentTime, onChange: handleProgressChange, className: "video-progress ".concat(final.progressCss), style: {
                     '--progress-percent': "".concat((currentTime / duration) * 100, "%"),
                 }, onMouseEnter: function () { return setIsHoveringProgress(true); }, onMouseLeave: function () { return setIsHoveringProgress(false); } })))); };
-    // Beautiful Volume Control Component
-    var VolumeControl = function () { return (react_1.default.createElement("div", { className: "volume-control-wrapper" },
-        react_1.default.createElement(ToolTip_1.default, null,
-            react_1.default.createElement(Circle_1.default, { bordered: true, size: 2.5, onClick: handleToggleMute, className: "volume-toggle ".concat(final.buttonCss, " ").concat(final.volumeCss) }, isMuted || volume === 0
-                ? renderIcon(dynamicMuteIcon, 16)
-                : renderIcon(dynamicVolumeIcon, 16)),
-            react_1.default.createElement(Tip_1.default, { tip: "top", content: isMuted ? "Unmute" : "Mute" })),
-        react_1.default.createElement("div", { className: "volume-slider-wrapper", onMouseEnter: function () { return setIsHoveringVolume(true); }, onMouseLeave: function () { return setIsHoveringVolume(false); } },
-            react_1.default.createElement("input", { type: "range", min: 0, max: 1, step: 0.01, value: volume, onChange: handleVolumeChange, className: "volume-slider", style: {
-                    '--volume-percent': "".concat(volume * 100, "%"),
-                } })))); };
+    // Volume Control Component with different styles
+    var VolumeControl = function () {
+        if (final.volumeStyle === 'hover') {
+            return (react_1.default.createElement("div", { className: "volume-control-wrapper relative" },
+                react_1.default.createElement(ToolTip_1.default, null,
+                    react_1.default.createElement("div", { onClick: handleToggleMute, onMouseEnter: function () { return setShowVolumeSlider(true); }, className: "volume-toggle ".concat(final.buttonCss, " ").concat(final.volumeCss, " pointer") }, getVolumeIcon()),
+                    react_1.default.createElement(Tip_1.default, { tip: "top", content: isMuted ? "Unmute" : "Mute" })),
+                showVolumeSlider && (react_1.default.createElement("div", { className: "volume-slider-wrapper absolute bottom-full left-0 mb-2 p-2 bg-black bg-opacity-80 rounded-lg backdrop-blur-sm", onMouseEnter: function () { return setShowVolumeSlider(true); }, onMouseLeave: function () { return setShowVolumeSlider(false); } },
+                    react_1.default.createElement("input", { type: "range", min: 0, max: 1, step: 0.01, value: volume, onChange: handleVolumeChange, className: "volume-slider vertical", style: {
+                            '--volume-percent': "".concat(volume * 100, "%"),
+                        } })))));
+        }
+        if (final.volumeStyle === 'compact') {
+            return (react_1.default.createElement("div", { className: "volume-control-wrapper" },
+                react_1.default.createElement(ToolTip_1.default, null,
+                    react_1.default.createElement("div", { onClick: handleToggleMute, className: "volume-toggle ".concat(final.buttonCss, " ").concat(final.volumeCss, " pointer") }, getVolumeIcon()),
+                    react_1.default.createElement(Tip_1.default, { tip: "top", content: isMuted ? "Unmute" : "Mute" }))));
+        }
+        // Default slider style
+        return (react_1.default.createElement("div", { className: "volume-control-wrapper" },
+            react_1.default.createElement(ToolTip_1.default, null,
+                react_1.default.createElement("div", { onClick: handleToggleMute, className: "volume-toggle ".concat(final.buttonCss, " ").concat(final.volumeCss, " pointer") }, getVolumeIcon()),
+                react_1.default.createElement(Tip_1.default, { tip: "top", content: isMuted ? "Unmute" : "Mute" })),
+            react_1.default.createElement("div", { className: "volume-slider-wrapper" },
+                react_1.default.createElement("input", { type: "range", min: 0, max: 1, step: 0.01, value: volume, onChange: handleVolumeChange, className: "volume-slider", style: {
+                        '--volume-percent': "".concat(volume * 100, "%"),
+                    } }))));
+    };
     return (react_1.default.createElement("div", { ref: containerRef, className: "video_container fit ".concat(final.funcss, " ").concat(final.containerCss, " ").concat(final.className), onClick: handleVideoClick },
         final.poster && !hasStarted && !isPlaying && (react_1.default.createElement("div", { style: { backgroundImage: "url(".concat(final.poster, ")") }, className: "video_poster" })),
-        react_1.default.createElement("video", { ref: videoRef, preload: "auto", src: final.src, className: "video_player fit min-w-200 ".concat(final.videoCss), onLoadedMetadata: handleLoadedMetadata, playsInline: true, controls: false, loop: final.loop, muted: final.muted }),
+        react_1.default.createElement("video", { ref: videoRef, preload: "auto", autoPlay: final.autoPlay, style: style, src: final.src, className: "video_player fit min-w-200 ".concat(final.videoCss), onLoadedMetadata: handleLoadedMetadata, playsInline: true, controls: false, loop: final.loop, muted: final.muted }),
         final.showControls && (react_1.default.createElement("div", { className: "video_controls ".concat(final.controlsCss, " ").concat(showControlsState ? 'show_controls' : 'hide_controls') },
-            final.showProgress && react_1.default.createElement(ProgressBar, null),
             react_1.default.createElement(RowFlex_1.default, { gap: 1, justify: "space-between", alignItems: "center", className: "controls-row" },
-                react_1.default.createElement(RowFlex_1.default, { gap: 0.5, alignItems: "center" },
+                react_1.default.createElement(RowFlex_1.default, { gap: 0.5, alignItems: "center", funcss: 'videoLeftContainer' },
                     final.showPlayPause && (react_1.default.createElement(ToolTip_1.default, null,
-                        react_1.default.createElement(Circle_1.default, { bordered: true, size: 2.5, onClick: handlePlayPauseToggle, className: "".concat(final.buttonCss, " ").concat(isPlaying ? final.pauseCss : final.playCss) }, isPlaying
-                            ? renderIcon(dynamicPauseIcon, 16)
-                            : renderIcon(dynamicPlayIcon, 16)),
+                        react_1.default.createElement("div", { onClick: handlePlayPauseToggle, className: "".concat(final.buttonCss, " ").concat(isPlaying ? final.pauseCss : final.playCss, " pointer") }, isPlaying
+                            ? renderIcon(dynamicPauseIcon, 20)
+                            : renderIcon(dynamicPlayIcon, 20)),
                         react_1.default.createElement(Tip_1.default, { tip: "top", content: isPlaying ? "Pause" : "Play" }))),
                     final.showSeekButtons && (react_1.default.createElement(react_1.default.Fragment, null,
                         react_1.default.createElement(ToolTip_1.default, null,
-                            react_1.default.createElement(Circle_1.default, { bordered: true, size: 2.5, onClick: handleRewind, className: "".concat(final.buttonCss, " ").concat(final.rewindCss) }, renderIcon(dynamicRewindIcon, 14)),
+                            react_1.default.createElement("div", { onClick: handleRewind, className: "".concat(final.buttonCss, " ").concat(final.rewindCss, " pointer") }, renderIcon(dynamicRewindIcon, 16)),
                             react_1.default.createElement(Tip_1.default, { tip: "top", content: "".concat(final.seekAmount, "s Back") })),
                         react_1.default.createElement(ToolTip_1.default, null,
-                            react_1.default.createElement(Circle_1.default, { bordered: true, size: 2.5, onClick: handleForward, className: "".concat(final.buttonCss, " ").concat(final.forwardCss) }, renderIcon(dynamicForwardIcon, 14)),
+                            react_1.default.createElement("div", { onClick: handleForward, className: "".concat(final.buttonCss, " ").concat(final.forwardCss, " pointer") }, renderIcon(dynamicForwardIcon, 16)),
                             react_1.default.createElement(Tip_1.default, { tip: "top", content: "".concat(final.seekAmount, "s Forward") })))),
                     final.showVolume && react_1.default.createElement(VolumeControl, null),
                     final.showTime && (react_1.default.createElement("div", { className: "video_time ".concat(final.timeCss) },
-                        react_1.default.createElement(Text_1.default, { text: "".concat((0, videoFunctions_1.formatTime)(currentTime), " / ").concat((0, videoFunctions_1.formatTime)(duration)), funcss: 'm-0', size: "sm" })))),
-                react_1.default.createElement(RowFlex_1.default, { gap: 0.3 },
+                        react_1.default.createElement(Text_1.default, { text: "".concat((0, videoFunctions_1.formatTime)(currentTime), " / ").concat((0, videoFunctions_1.formatTime)(duration)), size: "xs" })))),
+                react_1.default.createElement("div", { className: "col w-full " },
+                    react_1.default.createElement("div", { className: 'videoProgressContainer' }, final.showProgress && react_1.default.createElement(ProgressBar, null))),
+                react_1.default.createElement(RowFlex_1.default, { gap: 0.3, funcss: 'videoRightContainer' },
                     final.showFullscreen && (react_1.default.createElement(ToolTip_1.default, null,
-                        react_1.default.createElement(Circle_1.default, { bordered: true, size: 2.5, onClick: handleToggleFullScreen, className: "".concat(final.buttonCss, " ").concat(final.fullscreenCss) }, renderIcon(dynamicFullscreenIcon, 16)),
+                        react_1.default.createElement("div", { onClick: handleToggleFullScreen, className: "".concat(final.buttonCss, " ").concat(final.fullscreenCss, " pointer") }, renderIcon(dynamicFullscreenIcon, 18)),
                         react_1.default.createElement(Tip_1.default, { tip: "top", content: "Fullscreen" }))),
                     final.showDownload && (react_1.default.createElement(ToolTip_1.default, null,
-                        react_1.default.createElement(Circle_1.default, { bordered: true, size: 2.5, onClick: function () { return window.open(final.src, '_blank'); }, className: "".concat(final.buttonCss, " ").concat(final.downloadCss) }, renderIcon(dynamicDownloadIcon, 14)),
+                        react_1.default.createElement("div", { onClick: function () { return window.open(final.src, '_blank'); }, className: "".concat(final.buttonCss, " ").concat(final.downloadCss, " pointer") }, renderIcon(dynamicDownloadIcon, 16)),
                         react_1.default.createElement(Tip_1.default, { tip: "top", content: "Download" })))))))));
 }

package/ui/vista/Vista.d.ts

@@ -46,8 +46,6 @@ type VistaProps = {
     fade?: boolean;
     fadeDirection?: 'top' | 'bottom' | 'left' | 'right';
     fadeRadial?: boolean;
-    fadeOverlayDarken?: number;
-    backgroundImage?: string;
     variant?: string;
     showPrimaryCTA?: boolean;
     showSecondaryCTA?: boolean;
@@ -66,18 +64,46 @@ type VistaProps = {
     ctaPrimaryPrefix?: string;
     ctaPrimarySuffix?: string;
     primaryIconSize?: number;
+    primaryButtonFuncss?: string;
+    primaryButtonSmall?: boolean;
     ctaSecondaryRounded?: boolean;
     ctaSecondaryFlat?: boolean;
     ctaSecondaryPrefix?: string;
     ctaSecondarySuffix?: string;
     secondaryIconSize?: number;
+    secondaryButtonFuncss?: string;
+    secondaryButtonSmall?: boolean;
     ctaAccentRounded?: boolean;
     ctaAccentFlat?: boolean;
     ctaAccentPrefix?: string;
     ctaAccentSuffix?: string;
     accentIconSize?: number;
+    accentButtonFuncss?: string;
+    accentButtonSmall?: boolean;
     ctaGap?: number;
     ctaFlexJustify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
+    mediaType?: 'image' | 'video' | 'iframe' | 'custom';
+    videoUrl?: string;
+    videoAutoplay?: boolean;
+    videoLoop?: boolean;
+    videoMuted?: boolean;
+    videoPoster?: string;
+    videoControls?: boolean;
+    iframeUrl?: string;
+    iframeSize?: string;
+    customMedia?: React.ReactNode;
+    imageOverlay?: boolean;
+    imageOverlayColor?: string;
+    imageOverlayOpacity?: number;
+    imageFilter?: 'grayscale' | 'sepia' | 'blur' | 'brightness' | 'contrast' | 'none';
+    imageFilterValue?: number;
+    imageBlendMode?: 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten';
+    hoverEffect?: 'lift' | 'scale' | 'tilt' | 'glow' | 'none';
+    parallax?: boolean;
+    parallaxSpeed?: number;
+    mobileLayout?: 'centered' | 'stacked';
+    tabletLayout?: 'centered' | 'imageLeft' | 'imageRight' | 'stacked';
+    desktopLayout?: 'centered' | 'imageLeft' | 'imageRight' | 'stacked';
 };
 declare const Vista: React.FC<VistaProps>;
 export default Vista;