funuicss 3.7.8 → 3.7.10

package/ui/video/Video.js

@@ -44,6 +44,42 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+var __generator = (this && this.__generator) || function (thisArg, body) {
+    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+    return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
+    function verb(n) { return function (v) { return step([n, v]); }; }
+    function step(op) {
+        if (f) throw new TypeError("Generator is already executing.");
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
+            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+            if (y = 0, t) op = [op[0] & 2, t.value];
+            switch (op[0]) {
+                case 0: case 1: t = op; break;
+                case 4: _.label++; return { value: op[1], done: false };
+                case 5: _.label++; y = op[1]; op = [0]; continue;
+                case 7: op = _.ops.pop(); _.trys.pop(); continue;
+                default:
+                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
+                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
+                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
+                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
+                    if (t[2]) _.ops.pop();
+                    _.trys.pop(); continue;
+            }
+            op = body.call(thisArg, _);
+        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
+        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
+    }
+};
 var __rest = (this && this.__rest) || function (s, e) {
     var t = {};
     for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
@@ -62,51 +98,263 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Video;
 var react_1 = __importStar(require("react"));
 var pi_1 = require("react-icons/pi");
+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 tfi_1 = require("react-icons/tfi");
 var videoFunctions_1 = require("./videoFunctions");
 var videoShortcuts_1 = require("./videoShortcuts");
+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: {
+                default: {
+                    showControls: true,
+                    showPlayPause: true,
+                    showProgress: true,
+                    showVolume: true,
+                    showTime: true,
+                    showFullscreen: true,
+                    showDownload: true,
+                    showSeekButtons: true,
+                    spacebarPlay: true,
+                    autoPlay: false,
+                    loop: false,
+                    muted: false,
+                    seekAmount: 10,
+                    hideControlsDelay: 3000,
+                    funcss: '',
+                    containerCss: '',
+                    videoCss: '',
+                    controlsCss: '',
+                    progressCss: '',
+                    progressBarCss: '',
+                    timeCss: '',
+                    playCss: '',
+                    pauseCss: '',
+                    volumeCss: '',
+                    fullscreenCss: '',
+                    downloadCss: '',
+                    rewindCss: '',
+                    forwardCss: '',
+                    buttonCss: '',
+                },
+                minimal: {
+                    showControls: true,
+                    showPlayPause: true,
+                    showProgress: true,
+                    showVolume: false,
+                    showTime: false,
+                    showFullscreen: false,
+                    showDownload: false,
+                    showSeekButtons: false,
+                    controlsCss: 'minimal-controls',
+                    buttonCss: 'minimal-btn',
+                },
+                embedded: {
+                    showControls: false,
+                    autoPlay: true,
+                    muted: true,
+                    loop: true,
+                    containerCss: 'embedded-video',
+                },
+                fullFeatured: {
+                    showControls: true,
+                    showPlayPause: true,
+                    showProgress: true,
+                    showVolume: true,
+                    showTime: true,
+                    showFullscreen: true,
+                    showDownload: true,
+                    showSeekButtons: true,
+                    controlsCss: 'full-featured-controls',
+                    buttonCss: 'featured-btn',
+                },
+                theater: {
+                    showControls: true,
+                    containerCss: 'theater-mode',
+                    videoCss: 'theater-video',
+                    controlsCss: 'theater-controls',
+                    fullscreenCss: 'theater-fullscreen',
+                }
+            }
+        };
+        return baseConfig[componentName] || {};
+    };
+    var mergeWithLocal = function (localProps) {
+        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,
+            variantConfig: variantConfig,
+            defaultConfig: defaultConfig,
+        };
+    };
+    return {
+        mergeWithLocal: mergeWithLocal,
+        getComponentConfig: getComponentConfig,
+    };
+};
 function Video(_a) {
-    var src = _a.src, poster = _a.poster, onDuration = _a.onDuration, isPause = _a.isPause, className = _a.className, autoPlay = _a.autoPlay, _b = _a.spacebarPlay, spacebarPlay = _b === void 0 ? true : _b, rest = __rest(_a, ["src", "poster", "onDuration", "isPause", "className", "autoPlay", "spacebarPlay"]);
+    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 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);
+    // Merge with config - LOCAL PROPS OVERRIDE CONFIG
+    var mergedProps = mergeWithLocal(localProps).props;
+    // Extract final values - local props take precedence
+    var final = {
+        src: mergedProps.src,
+        poster: mergedProps.poster,
+        onDuration: mergedProps.onDuration,
+        onEnded: mergedProps.onEnded,
+        isPause: mergedProps.isPause,
+        spacebarPlay: (_b = mergedProps.spacebarPlay) !== null && _b !== void 0 ? _b : true,
+        className: (_c = mergedProps.className) !== null && _c !== void 0 ? _c : '',
+        autoPlay: (_d = mergedProps.autoPlay) !== null && _d !== void 0 ? _d : false,
+        showControls: (_e = mergedProps.showControls) !== null && _e !== void 0 ? _e : true,
+        showPlayPause: (_f = mergedProps.showPlayPause) !== null && _f !== void 0 ? _f : true,
+        showProgress: (_g = mergedProps.showProgress) !== null && _g !== void 0 ? _g : true,
+        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,
+        playIcon: mergedProps.playIcon,
+        pauseIcon: mergedProps.pauseIcon,
+        fullscreenIcon: mergedProps.fullscreenIcon,
+        downloadIcon: mergedProps.downloadIcon,
+        volumeIcon: mergedProps.volumeIcon,
+        muteIcon: mergedProps.muteIcon,
+        rewindIcon: mergedProps.rewindIcon,
+        forwardIcon: mergedProps.forwardIcon,
+        hideControlsDelay: (_o = mergedProps.hideControlsDelay) !== null && _o !== void 0 ? _o : 3000,
+        loop: (_p = mergedProps.loop) !== null && _p !== void 0 ? _p : false,
+        muted: (_q = mergedProps.muted) !== null && _q !== void 0 ? _q : false,
+        seekAmount: (_r = mergedProps.seekAmount) !== null && _r !== void 0 ? _r : 10,
+        funcss: (_s = mergedProps.funcss) !== null && _s !== void 0 ? _s : '',
+        containerCss: (_t = mergedProps.containerCss) !== null && _t !== void 0 ? _t : '',
+        videoCss: (_u = mergedProps.videoCss) !== null && _u !== void 0 ? _u : '',
+        controlsCss: (_v = mergedProps.controlsCss) !== null && _v !== void 0 ? _v : '',
+        progressCss: (_w = mergedProps.progressCss) !== null && _w !== void 0 ? _w : '',
+        progressBarCss: (_x = mergedProps.progressBarCss) !== null && _x !== void 0 ? _x : '',
+        timeCss: (_y = mergedProps.timeCss) !== null && _y !== void 0 ? _y : '',
+        playCss: (_z = mergedProps.playCss) !== null && _z !== void 0 ? _z : '',
+        pauseCss: (_0 = mergedProps.pauseCss) !== null && _0 !== void 0 ? _0 : '',
+        volumeCss: (_1 = mergedProps.volumeCss) !== null && _1 !== void 0 ? _1 : '',
+        fullscreenCss: (_2 = mergedProps.fullscreenCss) !== null && _2 !== void 0 ? _2 : '',
+        downloadCss: (_3 = mergedProps.downloadCss) !== null && _3 !== void 0 ? _3 : '',
+        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 : '',
+    };
     var videoRef = (0, react_1.useRef)(null);
     var containerRef = (0, react_1.useRef)(null);
     var animationFrameRef = (0, react_1.useRef)(null);
-    var _c = (0, react_1.useState)(false), isPlaying = _c[0], setIsPlaying = _c[1];
-    var _d = (0, react_1.useState)(0), currentTime = _d[0], setCurrentTime = _d[1];
-    var _e = (0, react_1.useState)(0), duration = _e[0], setDuration = _e[1];
-    var _f = (0, react_1.useState)(1), volume = _f[0], setVolume = _f[1];
-    var _g = (0, react_1.useState)(false), isFullScreen = _g[0], setIsFullScreen = _g[1];
-    var _h = (0, react_1.useState)(false), showVolume = _h[0], setShowVolume = _h[1];
-    var _j = (0, react_1.useState)(true), isMouseMoving = _j[0], setIsMouseMoving = _j[1];
-    var _k = (0, react_1.useState)(false), hasStarted = _k[0], setHasStarted = _k[1];
-    var handleVideoEnd = function () {
-        setIsPlaying(false);
-        setCurrentTime(duration); // optional
-    };
+    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];
+    // 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];
+    // Helper function to load dynamic icons
+    var loadDynamicIcon = function (iconProp, setter, defaultIcon) { return __awaiter(_this, void 0, void 0, function () {
+        var iconNode;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    if (!iconProp) {
+                        setter(defaultIcon);
+                        return [2 /*return*/];
+                    }
+                    if (!(typeof iconProp === 'string')) return [3 /*break*/, 2];
+                    return [4 /*yield*/, (0, getDynamicIcon_1.getDynamicIcon)(iconProp)];
+                case 1:
+                    iconNode = _a.sent();
+                    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
     (0, react_1.useEffect)(function () {
-        var video = videoRef.current;
-        if (!video)
-            return;
-        video.addEventListener('ended', handleVideoEnd);
-        return function () {
-            video.removeEventListener('ended', handleVideoEnd);
-        };
-    }, [duration]);
+        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 })),
+                        ])];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        loadIcons();
+    }, [
+        final.playIcon, final.pauseIcon, final.fullscreenIcon, final.downloadIcon,
+        final.volumeIcon, final.muteIcon, final.rewindIcon, final.forwardIcon
+    ]);
+    // Helper function to render icon with proper size
+    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
+            });
+        }
+        return icon;
+    };
+    // Play/Pause functionality
     var playVideo = function () {
         var video = videoRef.current;
         if (video) {
-            // ✅ if video ended, reset it to start
             if (video.currentTime === video.duration) {
                 video.currentTime = 0;
             }
             video.play().then(function () {
                 setIsPlaying(true);
                 setHasStarted(true);
-            }).catch(function () { });
+            }).catch(console.error);
         }
     };
     var pauseVideo = function () {
@@ -116,24 +364,43 @@ function Video(_a) {
             setIsPlaying(false);
         }
     };
-    (0, react_1.useEffect)(function () {
-        var handleKey = function (e) { return (0, videoShortcuts_1.handleKeyDown)(e, isPlaying, playVideo, pauseVideo, spacebarPlay); };
-        document.addEventListener('keydown', handleKey);
-        return function () { return document.removeEventListener('keydown', handleKey); };
-    }, [isPlaying]);
     var handlePlayPauseToggle = function () {
         isPlaying ? pauseVideo() : playVideo();
     };
-    var handleRewind = function () {
-        var video = videoRef.current;
-        if (video)
-            video.currentTime = Math.max(video.currentTime - 10, 0);
+    // Click handlers for different video areas
+    var handleVideoClick = function (e) {
+        var container = containerRef.current;
+        if (!container)
+            return;
+        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();
+        }
     };
-    var handleForward = function () {
+    // Seek functionality
+    var handleSeek = function (seconds) {
         var video = videoRef.current;
-        if (video)
-            video.currentTime = Math.min(video.currentTime + 10, duration);
+        if (video) {
+            video.currentTime = Math.max(0, Math.min(video.currentTime + seconds, duration));
+        }
     };
+    var handleRewind = function () { return handleSeek(-final.seekAmount); };
+    var handleForward = function () { return handleSeek(final.seekAmount); };
+    // Fullscreen functionality
     var handleToggleFullScreen = function () {
         var _a, _b;
         var element = containerRef.current;
@@ -146,6 +413,40 @@ function Video(_a) {
             (_b = document.exitFullscreen) === null || _b === void 0 ? void 0 : _b.call(document);
         }
     };
+    // Volume functionality
+    var handleVolumeChange = function (e) {
+        var newVolume = parseFloat(e.target.value);
+        setVolume(newVolume);
+        setIsMuted(newVolume === 0);
+        if (videoRef.current) {
+            videoRef.current.volume = newVolume;
+            videoRef.current.muted = newVolume === 0;
+        }
+    };
+    var handleToggleMute = function () {
+        var newMuted = !isMuted;
+        setIsMuted(newMuted);
+        if (videoRef.current) {
+            videoRef.current.muted = newMuted;
+            if (newMuted) {
+                setVolume(0);
+            }
+            else {
+                setVolume(1);
+                if (videoRef.current)
+                    videoRef.current.volume = 1;
+            }
+        }
+    };
+    // Progress functionality
+    var handleProgressChange = function (e) {
+        var newTime = parseFloat(e.target.value);
+        if (videoRef.current) {
+            videoRef.current.currentTime = newTime;
+        }
+        setCurrentTime(newTime);
+    };
+    // Time update animation
     var updateCurrentTime = (0, react_1.useCallback)(function () {
         var video = videoRef.current;
         if (video) {
@@ -153,63 +454,50 @@ function Video(_a) {
             animationFrameRef.current = requestAnimationFrame(updateCurrentTime);
         }
     }, []);
+    // Event handlers
     var handleLoadedMetadata = function () {
+        var _a;
         var video = videoRef.current;
         if (video) {
             setDuration(video.duration || 0);
-            onDuration === null || onDuration === void 0 ? void 0 : onDuration(video.duration);
-            if (autoPlay) {
+            (_a = final.onDuration) === null || _a === void 0 ? void 0 : _a.call(final, video.duration);
+            if (final.autoPlay) {
+                video.muted = true;
                 video.play().then(function () {
-                    setIsPlaying(true); // ✅ update UI state
+                    setIsPlaying(true);
                     setHasStarted(true);
-                }).catch(function () { });
+                }).catch(console.error);
             }
         }
     };
-    (0, react_1.useEffect)(function () {
-        if (autoPlay && videoRef.current) {
-            videoRef.current.muted = true; // ✅ important for autoplay to work
-            videoRef.current.play().then(function () {
-                setIsPlaying(true);
-                setHasStarted(true);
-            }).catch(function (err) {
-                console.warn('Autoplay failed', err);
-            });
-        }
-    }, [autoPlay]);
-    var handleProgressBarChange = function (e) {
-        var newTime = parseFloat(e.target.value);
-        if (videoRef.current) {
-            videoRef.current.currentTime = newTime;
-        }
-        setCurrentTime(newTime);
-    };
-    var handleVolumeChange = function (e) {
-        if (videoRef.current) {
-            videoRef.current.muted = false;
+    var handleVideoEnd = function () {
+        var _a;
+        setIsPlaying(false);
+        (_a = final.onEnded) === null || _a === void 0 ? void 0 : _a.call(final); // Call the onEnded callback
+        if (final.loop && videoRef.current) {
+            videoRef.current.currentTime = 0;
+            playVideo();
         }
-        var newVolume = parseFloat(e.target.value);
-        setVolume(newVolume);
-        if (videoRef.current)
-            videoRef.current.volume = newVolume;
     };
+    // Effects
     (0, react_1.useEffect)(function () {
-        if (autoPlay && videoRef.current) {
-            var playPromise = videoRef.current.play();
-            if (playPromise !== undefined) {
-                playPromise.catch(function () { });
-            }
-        }
-    }, [autoPlay]);
+        var handleKey = function (e) {
+            return (0, videoShortcuts_1.handleKeyDown)(e, isPlaying, playVideo, pauseVideo, final.spacebarPlay);
+        };
+        document.addEventListener('keydown', handleKey);
+        return function () { return document.removeEventListener('keydown', handleKey); };
+    }, [isPlaying, final.spacebarPlay]);
     (0, react_1.useEffect)(function () {
-        if (videoRef.current) {
-            videoRef.current.volume = volume;
-        }
-    }, [volume]);
+        var video = videoRef.current;
+        if (!video)
+            return;
+        video.addEventListener('ended', handleVideoEnd);
+        return function () { return video.removeEventListener('ended', handleVideoEnd); };
+    }, [final.loop, final.onEnded]);
     (0, react_1.useEffect)(function () {
-        if (isPause)
+        if (final.isPause)
             pauseVideo();
-    }, [isPause]);
+    }, [final.isPause]);
     (0, react_1.useEffect)(function () {
         var handleFullscreenChange = function () {
             setIsFullScreen(!!document.fullscreenElement);
@@ -217,24 +505,32 @@ function Video(_a) {
         document.addEventListener('fullscreenchange', handleFullscreenChange);
         return function () { return document.removeEventListener('fullscreenchange', handleFullscreenChange); };
     }, []);
+    // Controls visibility with hover
     (0, react_1.useEffect)(function () {
         var timer;
-        var handleMouseMove = function (e) {
-            var _a;
-            if ((_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.contains(e.target)) {
-                setIsMouseMoving(true);
-                clearTimeout(timer);
-                timer = setTimeout(function () { return setIsMouseMoving(false); }, 2000);
-            }
+        var show = function () {
+            setShowControlsState(true);
+            clearTimeout(timer);
+            timer = setTimeout(function () { return setShowControlsState(false); }, final.hideControlsDelay);
         };
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('touchstart', handleMouseMove);
+        var hide = function () {
+            setShowControlsState(false);
+        };
+        var container = containerRef.current;
+        if (container && final.showControls) {
+            container.addEventListener('mouseenter', show);
+            container.addEventListener('mouseleave', hide);
+            container.addEventListener('mousemove', show);
+        }
         return function () {
-            document.removeEventListener('mousemove', handleMouseMove);
-            document.removeEventListener('touchstart', handleMouseMove);
+            if (container) {
+                container.removeEventListener('mouseenter', show);
+                container.removeEventListener('mouseleave', hide);
+                container.removeEventListener('mousemove', show);
+            }
             clearTimeout(timer);
         };
-    }, []);
+    }, [final.showControls, final.hideControlsDelay]);
     (0, react_1.useEffect)(function () {
         if (isPlaying) {
             animationFrameRef.current = requestAnimationFrame(updateCurrentTime);
@@ -247,59 +543,50 @@ function Video(_a) {
                 cancelAnimationFrame(animationFrameRef.current);
         };
     }, [isPlaying, updateCurrentTime]);
-    (0, react_1.useEffect)(function () {
-        return function () {
-            pauseVideo();
-        };
-    }, []);
-    (0, react_1.useEffect)(function () {
-        var video = videoRef.current;
-        if (!video)
-            return;
-        var onEnd = function () {
-            setIsPlaying(false);
-        };
-        video.addEventListener('ended', onEnd);
-        return function () { return video.removeEventListener('ended', onEnd); };
-    }, []);
-    return (react_1.default.createElement("div", { ref: containerRef, className: "video_container fit ".concat(className || ''), id: "fun_video_container" },
-        poster && !hasStarted && !isPlaying && (react_1.default.createElement("div", { style: { backgroundImage: "url(".concat(poster, ")") }, className: "video_poster" })),
-        react_1.default.createElement("video", __assign({ ref: videoRef, preload: "auto", src: src, className: "video_player fit min-w-200", onClick: handlePlayPauseToggle, onLoadedMetadata: handleLoadedMetadata, playsInline: true, controls: false }, rest)),
-        react_1.default.createElement("div", { className: "video_controls ".concat(isMouseMoving ? 'show_controls' : 'hide_controls') },
-            react_1.default.createElement("div", { className: " animated fade-in pr-5 pl-5" },
-                react_1.default.createElement(RowFlex_1.default, { gap: 0.3, funcss: 'mb-2', alignItems: "center" },
-                    react_1.default.createElement("div", { className: "col width-100-p" },
-                        react_1.default.createElement("input", { type: "range", min: 0, max: duration, value: currentTime, onChange: handleProgressBarChange, className: "width-100-p videoSlider styled-slider m-0", "aria-label": "Progress bar", style: { '--progress': "".concat((currentTime / duration) * 100) } })))),
-            react_1.default.createElement("div", { className: "_center-play-icon animated fade-in", onClick: handlePlayPauseToggle },
-                react_1.default.createElement("div", { className: '_play-button' }, isPlaying ? react_1.default.createElement(tfi_1.TfiControlPause, { size: 50 }) : react_1.default.createElement(tfi_1.TfiControlPlay, { size: 50 }))),
-            react_1.default.createElement(RowFlex_1.default, { funcss: 'animated slide-up pr-5 pl-5', gap: 1, justify: "space-between" },
-                react_1.default.createElement(RowFlex_1.default, { gap: 0.5 },
-                    react_1.default.createElement("div", { className: "hide-small" },
-                        react_1.default.createElement(Circle_1.default, { bordered: true, size: 2.5, onClick: handlePlayPauseToggle }, isPlaying ? react_1.default.createElement(tfi_1.TfiControlPause, { size: 20 }) : react_1.default.createElement(tfi_1.TfiControlPlay, { size: 20 }))),
-                    react_1.default.createElement(ToolTip_1.default, null,
-                        react_1.default.createElement(Circle_1.default, { bordered: true, size: 2.5, onClick: handleRewind },
-                            react_1.default.createElement(tfi_1.TfiControlBackward, null)),
-                        react_1.default.createElement(Tip_1.default, { tip: "right", animation: "ScaleUp", duration: 0.5, content: "10 sec Back" })),
-                    react_1.default.createElement(ToolTip_1.default, null,
-                        react_1.default.createElement(Circle_1.default, { bordered: true, size: 2.5, onClick: handleForward },
-                            react_1.default.createElement(tfi_1.TfiControlForward, null)),
-                        react_1.default.createElement(Tip_1.default, { tip: "right", animation: "ScaleUp", duration: 0.5, content: "10 sec Forward" })),
-                    react_1.default.createElement("div", { onMouseEnter: function () { return setShowVolume(true); }, onMouseLeave: function () { return setShowVolume(false); } },
-                        react_1.default.createElement(RowFlex_1.default, null,
-                            react_1.default.createElement(Circle_1.default, { bordered: true, size: 2.5 },
-                                react_1.default.createElement(tfi_1.TfiVolume, null)),
-                            showVolume && (react_1.default.createElement("input", { type: "range", min: 0, max: 1, step: 0.01, value: volume, onChange: handleVolumeChange, className: "width-100 max-w-50 animated slide-right", style: { height: '3px', marginLeft: 8 }, "aria-label": "Volume" })))),
-                    react_1.default.createElement("div", { className: 'video_time' },
-                        react_1.default.createElement(Text_1.default, { text: (0, videoFunctions_1.formatTime)(currentTime), funcss: 'm-0', size: "sm" }),
-                        "/",
-                        react_1.default.createElement(Text_1.default, { text: "".concat((0, videoFunctions_1.formatTime)(duration - currentTime)), funcss: 'm-0', size: "sm" }))),
+    // Beautiful Progress Bar Component
+    var ProgressBar = function () { return (react_1.default.createElement("div", { className: "progress-container mb-4" },
+        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, "%"),
+                } })))); };
+    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 }),
+        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" },
+                    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(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(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(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(ToolTip_1.default, null,
-                        react_1.default.createElement(Circle_1.default, { bordered: true, size: 2.5, onClick: handleToggleFullScreen },
-                            react_1.default.createElement(pi_1.PiCornersOut, null)),
-                        react_1.default.createElement(Tip_1.default, { tip: "left", animation: "ScaleUp", duration: 0.5, content: "Expand" })),
-                    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(src || '', '_blank'); } },
-                            react_1.default.createElement(tfi_1.TfiDownload, null)),
-                        react_1.default.createElement(Tip_1.default, { tip: "left", animation: "ScaleUp", duration: 0.5, content: "Download" })))))));
+                    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(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(Tip_1.default, { tip: "top", content: "Download" })))))))));
 }