funuicss 3.7.7 → 3.7.9

package/css/fun.css

@@ -1412,152 +1412,268 @@ border-radius: var(--borderRadius);
   outline-offset: 2px;
 }
 
-
-
-/* video */
-.video_player{
+/* Video Component Styles */
+.video_player {
   border-radius: 1rem;
   width: 100%;
+  cursor: pointer;
 }
-.video_container{
+
+.video_container {
   position: relative;
   width: fit-content;
   height: fit-content;
   padding: 0;
   border-radius: 1rem;
   color: var(--text-color);
+  cursor: pointer;
+  transition: all 0.3s ease;
 }
-.video_controls{
+
+.video_controls {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
-  height: 100%;
+  padding: 1.5rem 1rem 1rem;
   display: flex;
   flex-direction: column;
   justify-content: flex-end;
-  padding: 1rem ;
-  display: none;
-
   border-radius: 1rem;
+  transition: all 0.3s ease;
+  opacity: 1;
+  transform: translateY(0);
 }
 
-.video_poster{
+.video_controls.hide_controls {
+  opacity: 0;
+  transform: translateY(10px);
+  pointer-events: none;
+}
+
+.video_controls.show_controls {
+  opacity: 1;
+  transform: translateY(0);
+  pointer-events: all;
+}
+
+.video_poster {
   position: absolute;
   top: 0;
   width: 100%;
   height: 100%;
   border-radius: 1rem;
   background-position: center !important;
-  background-size: cover;
-  background-repeat: no-repeat;
-}
-.video_controls.show_controls{
-  display: flex ;
+  background-size: cover !important;
+  background-repeat: no-repeat !important;
+  cursor: pointer;
+  z-index: 1;
 }
 
-.video_controls.hide_controls{
-  display: none !important;
+/* Beautiful Progress Bar */
+.progress-container {
+  width: 100%;
+  padding: 0 0.5rem;
 }
 
-.video_container:hover .video_controls{
-  display: flex;
+.progress-wrapper {
+  position: relative;
+  width: 100%;
 }
 
-.video_player_design {
-  border-radius: 1.5rem;
-  /* box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px; */
-  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
+.video-progress {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 100%;
+  padding: 0 !important;
+  height: 5px !important;
+  border-radius: 10px;
+  background: linear-gradient(
+    to right,
+    var(--primary) 0%,
+    var(--primary) var(--progress-percent),
+    rgba(255, 255, 255, 0.3) var(--progress-percent),
+    rgba(255, 255, 255, 0.3) 100%
+  );
+  outline: none;
+  cursor: pointer;
+  transition: all 0.3s ease;
+  position: relative;
 }
 
+.video-progress:hover {
+  height: 8px;
+}
 
-._center-play-icon{
-   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  z-index: 2;
+.video-progress::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  /* opacity: 0 !important; */
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--primary);
+  cursor: pointer;
+  border: 2px solid white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  transition: all 0.2s ease;
+  opacity: 0;
 }
-.video_time{
-  background-color: var(--raiseThemes) !important;
-  backdrop-filter: var(--raiseBackdrop) !important;
-  border-radius:2rem;
-  padding: 1rem;
-  line-height: 0;
-  color: var(--text-color);
+
+.video-progress:hover::-webkit-slider-thumb {
+  opacity: 1;
+  transform: scale(1.1);
 }
- 
 
+.video-progress::-moz-range-thumb {
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background: var(--primary);
+  cursor: pointer;
+  border: 2px solid white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+  transition: all 0.2s ease;
+  opacity: 0;
+}
 
+.video-progress:hover::-moz-range-thumb {
+  opacity: 1;
+  transform: scale(1.1);
+}
 
- ._play-button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 5rem;
-      height: 5rem;
-      border-radius: 50%;
-      background-color: var(--raiseOpaque);
-      backdrop-filter: var(--raiseBackdrop) !important;
-      transition: transform 0.3s ease;
-      cursor: pointer;
-      line-height: 0 !important;
-      z-index: 2;
 
-    }
 
-    ._play-button:hover {
-      background-color: var(--primary) !important;
-      color: var(--white) !important;
-      border-color: var(--primary400);
-      color: var(--text-color);
-    }
 
+/* Beautiful Volume Control */
+.volume-control-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  position: relative;
+}
 
+.volume-slider-wrapper {
+  width: 80px;
+  padding: 8px 0;
+}
 
-.styled-slider {
+.volume-slider {
+  -webkit-appearance: none;
   appearance: none;
   width: 100%;
-  height: 10px;
+  height: 15px !important;
+  padding: 0 !important;
+  border-radius: 10px;
   background: linear-gradient(
     to right,
     var(--primary) 0%,
-    var(--primary) calc(var(--progress, 0%) * 1%),
-    var(--primary50) calc(var(--progress, 0%) * 1%),
-    var(--primary50) 100%
+    var(--primary) var(--volume-percent),
+    rgba(255, 255, 255, 0.3) var(--volume-percent),
+    rgba(255, 255, 255, 0.3) 100%
   );
-  border-radius: 3px;
   outline: none;
-  transition: background 0.3s ease;
-  position: relative;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.volume-slider:hover {
+  height: 6px;
 }
 
-/* Thumb hidden by default */
-.styled-slider::-webkit-slider-thumb {
+.volume-slider::-webkit-slider-thumb {
+  -webkit-appearance: none;
   appearance: none;
-  height: 14px;
   width: 14px;
+    opacity: 0 !important;
+  height: 14px;
   border-radius: 50%;
   background: var(--primary);
-  border: none;
   cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.3s ease;
-  margin-top: -4px;
+  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
+  transition: all 0.2s ease;
 }
 
+.volume-slider:hover::-webkit-slider-thumb {
+  opacity: 1;
+  transform: scale(1.1);
+}
 
-.styled-slider::-moz-range-thumb {
-  height: 14px;
+.volume-slider::-moz-range-thumb {
   width: 14px;
+  height: 14px;
   border-radius: 50%;
   background: var(--primary);
-  border: none;
   cursor: pointer;
+  border: 2px solid white;
+  transition: all 0.2s ease;
   opacity: 0;
-  transition: opacity 0.3s ease;
 }
 
+.volume-slider:hover::-moz-range-thumb {
+  opacity: 1;
+  transform: scale(1.1);
+}
+
+/* Time display */
+.video_time {
+  background-color: var(--raiseThemes);
+  backdrop-filter: var(--raiseBackdrop);
+  border-radius: 1rem;
+  padding: 0.5rem 1rem;
+  line-height: 1;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
+/* Control buttons hover effects */
+.video_container .circle {
+  transition: all 0.2s ease;
+}
+
+.video_container .circle:hover {
+  background-color: var(--primary) !important;
+  color: var(--white) !important;
+  transform: scale(1.1);
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+  .video_controls {
+    padding: 1rem 0.5rem 0.5rem;
+  }
+  
+  .video_time {
+    padding: 0.25rem 0.75rem;
+    font-size: 0.75rem;
+  }
+  
+  .controls-row {
+    gap: 0.5rem !important;
+  }
+  
+  .volume-slider-wrapper {
+    width: 60px;
+  }
+}
+
+/* Fullscreen adjustments */
+.video_container:fullscreen {
+  width: 100vw;
+  height: 100vh;
+  border-radius: 0;
+}
+
+.video_container:fullscreen .video_player {
+  border-radius: 0;
+}
+
+.video_container:fullscreen .video_controls {
+  border-radius: 0;
+  padding: 2rem 1.5rem 1rem;
+}
+
+
 
 
 /* Mobile layout when menu is open */

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.7.7",
+  "version": "3.7.9",
   "name": "funuicss",
   "description": "React and Next.js component UI Library for creating Easy and good looking websites with fewer lines of code. Elevate your web development experience with our cutting-edge React/Next.js component UI Library. Craft stunning websites effortlessly, boasting both seamless functionality and aesthetic appeal—all achieved with minimal lines of code. Unleash the power of simplicity and style in your projects!",
   "main": "index.js",

package/ui/specials/Circle.d.ts

@@ -7,11 +7,12 @@ interface Circle_Props extends HTMLProps<HTMLDivElement> {
     color?: string;
     children?: ReactNode;
     hoverable?: boolean;
+    className?: string;
     raised?: boolean;
     bordered?: boolean;
     key?: React.Key;
     style?: React.CSSProperties;
     onClick?: () => void;
 }
-export default function Circle({ size, funcss, bg, color, children, hoverable, raised, key, onClick, bordered, style, ...rest }: Circle_Props): React.JSX.Element;
+export default function Circle({ size, funcss, bg, color, children, hoverable, raised, key, onClick, className, bordered, style, ...rest }: Circle_Props): React.JSX.Element;
 export {};

package/ui/specials/Circle.js

@@ -59,7 +59,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Circle;
 var React = __importStar(require("react"));
 function Circle(_a) {
-    var _b = _a.size, size = _b === void 0 ? 2 : _b, funcss = _a.funcss, bg = _a.bg, color = _a.color, children = _a.children, hoverable = _a.hoverable, raised = _a.raised, key = _a.key, onClick = _a.onClick, bordered = _a.bordered, style = _a.style, rest = __rest(_a, ["size", "funcss", "bg", "color", "children", "hoverable", "raised", "key", "onClick", "bordered", "style"]);
-    return (React.createElement("div", __assign({ className: " animated fade-in ".concat(bordered ? "border" : "", " pointer avatar ").concat(funcss || '', " ").concat("text-" + (color === null || color === void 0 ? void 0 : color.trim()) || '', " ").concat(raised ? "raised" : '', " ").concat(bg || 'lighter', " ").concat(hoverable ? 'hoverable' : ''), style: __assign({ width: "".concat(size + "rem" || '2.3rem'), height: "".concat(size + "rem" || '2.3rem') }, style), key: key, onClick: onClick }, rest),
+    var _b = _a.size, size = _b === void 0 ? 2 : _b, funcss = _a.funcss, bg = _a.bg, color = _a.color, children = _a.children, hoverable = _a.hoverable, raised = _a.raised, key = _a.key, onClick = _a.onClick, _c = _a.className, className = _c === void 0 ? '' : _c, bordered = _a.bordered, style = _a.style, rest = __rest(_a, ["size", "funcss", "bg", "color", "children", "hoverable", "raised", "key", "onClick", "className", "bordered", "style"]);
+    return (React.createElement("div", __assign({ className: " ".concat(className, " animated fade-in ").concat(bordered ? "border" : "", " pointer avatar ").concat(funcss || '', " ").concat("text-" + (color === null || color === void 0 ? void 0 : color.trim()) || '', " ").concat(raised ? "raised" : '', " ").concat(bg || 'lighter', " ").concat(hoverable ? 'hoverable' : ''), style: __assign({ width: "".concat(size + "rem" || '2.3rem'), height: "".concat(size + "rem" || '2.3rem') }, style), key: key, onClick: onClick }, rest),
         React.createElement(React.Fragment, null, children)));
 }

package/ui/video/Video.d.ts

@@ -1,12 +1,48 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 interface VideoProps {
     src: string;
     poster?: string;
     onDuration?: (duration: number) => void;
+    onEnded?: () => void;
     isPause?: boolean;
     spacebarPlay?: boolean;
     className?: string;
     autoPlay?: boolean;
+    showControls?: boolean;
+    showPlayPause?: boolean;
+    showProgress?: boolean;
+    showVolume?: boolean;
+    showTime?: boolean;
+    showFullscreen?: boolean;
+    showDownload?: boolean;
+    showSeekButtons?: boolean;
+    playIcon?: string | ReactNode;
+    pauseIcon?: string | ReactNode;
+    fullscreenIcon?: string | ReactNode;
+    downloadIcon?: string | ReactNode;
+    volumeIcon?: string | ReactNode;
+    muteIcon?: string | ReactNode;
+    rewindIcon?: string | ReactNode;
+    forwardIcon?: string | ReactNode;
+    hideControlsDelay?: number;
+    loop?: boolean;
+    muted?: boolean;
+    seekAmount?: number;
+    funcss?: string;
+    containerCss?: string;
+    videoCss?: string;
+    controlsCss?: string;
+    progressCss?: string;
+    progressBarCss?: string;
+    timeCss?: string;
+    playCss?: string;
+    pauseCss?: string;
+    volumeCss?: string;
+    fullscreenCss?: string;
+    downloadCss?: string;
+    rewindCss?: string;
+    forwardCss?: string;
+    buttonCss?: string;
 }
-export default function Video({ src, poster, onDuration, isPause, className, autoPlay, spacebarPlay, ...rest }: VideoProps): React.JSX.Element;
+export default function Video({ 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, }: VideoProps): React.JSX.Element;
 export {};

package/ui/video/Video.js

@@ -1,16 +1,5 @@
 "use strict";
 'use client';
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
     if (k2 === undefined) k2 = k;
     var desc = Object.getOwnPropertyDescriptor(m, k);
@@ -44,16 +33,41 @@ var __importStar = (this && this.__importStar) || (function () {
         return result;
     };
 })();
-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)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
+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 __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
@@ -62,51 +76,114 @@ 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");
 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 src = _a.src, poster = _a.poster, onDuration = _a.onDuration, onEnded = _a.onEnded, isPause = _a.isPause, _b = _a.spacebarPlay, spacebarPlay = _b === void 0 ? true : _b, _c = _a.className, className = _c === void 0 ? '' : _c, _d = _a.autoPlay, autoPlay = _d === void 0 ? false : _d, _e = _a.showControls, showControls = _e === void 0 ? true : _e, _f = _a.showPlayPause, showPlayPause = _f === void 0 ? true : _f, _g = _a.showProgress, showProgress = _g === void 0 ? true : _g, _h = _a.showVolume, showVolume = _h === void 0 ? true : _h, _j = _a.showTime, showTime = _j === void 0 ? true : _j, _k = _a.showFullscreen, showFullscreen = _k === void 0 ? true : _k, _l = _a.showDownload, showDownload = _l === void 0 ? true : _l, _m = _a.showSeekButtons, showSeekButtons = _m === void 0 ? true : _m, playIcon = _a.playIcon, pauseIcon = _a.pauseIcon, fullscreenIcon = _a.fullscreenIcon, downloadIcon = _a.downloadIcon, volumeIcon = _a.volumeIcon, muteIcon = _a.muteIcon, rewindIcon = _a.rewindIcon, forwardIcon = _a.forwardIcon, _o = _a.hideControlsDelay, hideControlsDelay = _o === void 0 ? 3000 : _o, _p = _a.loop, loop = _p === void 0 ? false : _p, _q = _a.muted, muted = _q === void 0 ? false : _q, _r = _a.seekAmount, seekAmount = _r === void 0 ? 10 : _r, _s = _a.funcss, funcss = _s === void 0 ? '' : _s, _t = _a.containerCss, containerCss = _t === void 0 ? '' : _t, _u = _a.videoCss, videoCss = _u === void 0 ? '' : _u, _v = _a.controlsCss, controlsCss = _v === void 0 ? '' : _v, _w = _a.progressCss, progressCss = _w === void 0 ? '' : _w, _x = _a.progressBarCss, progressBarCss = _x === void 0 ? '' : _x, _y = _a.timeCss, timeCss = _y === void 0 ? '' : _y, _z = _a.playCss, playCss = _z === void 0 ? '' : _z, _0 = _a.pauseCss, pauseCss = _0 === void 0 ? '' : _0, _1 = _a.volumeCss, volumeCss = _1 === void 0 ? '' : _1, _2 = _a.fullscreenCss, fullscreenCss = _2 === void 0 ? '' : _2, _3 = _a.downloadCss, downloadCss = _3 === void 0 ? '' : _3, _4 = _a.rewindCss, rewindCss = _4 === void 0 ? '' : _4, _5 = _a.forwardCss, forwardCss = _5 === void 0 ? '' : _5, _6 = _a.buttonCss, buttonCss = _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 _7 = (0, react_1.useState)(false), isPlaying = _7[0], setIsPlaying = _7[1];
+    var _8 = (0, react_1.useState)(0), currentTime = _8[0], setCurrentTime = _8[1];
+    var _9 = (0, react_1.useState)(0), duration = _9[0], setDuration = _9[1];
+    var _10 = (0, react_1.useState)(muted ? 0 : 1), volume = _10[0], setVolume = _10[1];
+    var _11 = (0, react_1.useState)(muted), isMuted = _11[0], setIsMuted = _11[1];
+    var _12 = (0, react_1.useState)(false), isFullScreen = _12[0], setIsFullScreen = _12[1];
+    var _13 = (0, react_1.useState)(false), showControlsState = _13[0], setShowControlsState = _13[1];
+    var _14 = (0, react_1.useState)(false), hasStarted = _14[0], setHasStarted = _14[1];
+    var _15 = (0, react_1.useState)(false), isHoveringProgress = _15[0], setIsHoveringProgress = _15[1];
+    var _16 = (0, react_1.useState)(false), isHoveringVolume = _16[0], setIsHoveringVolume = _16[1];
+    // Dynamic icon states
+    var _17 = (0, react_1.useState)(null), dynamicPlayIcon = _17[0], setDynamicPlayIcon = _17[1];
+    var _18 = (0, react_1.useState)(null), dynamicPauseIcon = _18[0], setDynamicPauseIcon = _18[1];
+    var _19 = (0, react_1.useState)(null), dynamicFullscreenIcon = _19[0], setDynamicFullscreenIcon = _19[1];
+    var _20 = (0, react_1.useState)(null), dynamicDownloadIcon = _20[0], setDynamicDownloadIcon = _20[1];
+    var _21 = (0, react_1.useState)(null), dynamicVolumeIcon = _21[0], setDynamicVolumeIcon = _21[1];
+    var _22 = (0, react_1.useState)(null), dynamicMuteIcon = _22[0], setDynamicMuteIcon = _22[1];
+    var _23 = (0, react_1.useState)(null), dynamicRewindIcon = _23[0], setDynamicRewindIcon = _23[1];
+    var _24 = (0, react_1.useState)(null), dynamicForwardIcon = _24[0], setDynamicForwardIcon = _24[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(playIcon, setDynamicPlayIcon, react_1.default.createElement(pi_1.PiPlay, { size: 16 })),
+                            loadDynamicIcon(pauseIcon, setDynamicPauseIcon, react_1.default.createElement(pi_1.PiPause, { size: 16 })),
+                            loadDynamicIcon(fullscreenIcon, setDynamicFullscreenIcon, react_1.default.createElement(pi_1.PiCornersOut, { size: 16 })),
+                            loadDynamicIcon(downloadIcon, setDynamicDownloadIcon, react_1.default.createElement(tfi_1.TfiDownload, { size: 14 })),
+                            loadDynamicIcon(volumeIcon, setDynamicVolumeIcon, react_1.default.createElement(pi_1.PiSpeakerHigh, { size: 16 })),
+                            loadDynamicIcon(muteIcon, setDynamicMuteIcon, react_1.default.createElement(pi_1.PiSpeakerSlash, { size: 16 })),
+                            loadDynamicIcon(rewindIcon, setDynamicRewindIcon, react_1.default.createElement(tfi_1.TfiControlBackward, { size: 14 })),
+                            loadDynamicIcon(forwardIcon, setDynamicForwardIcon, react_1.default.createElement(tfi_1.TfiControlForward, { size: 14 })),
+                        ])];
+                    case 1:
+                        _a.sent();
+                        return [2 /*return*/];
+                }
+            });
+        }); };
+        loadIcons();
+    }, [
+        playIcon, pauseIcon, fullscreenIcon, downloadIcon,
+        volumeIcon, muteIcon, rewindIcon, 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 +193,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(-seekAmount);
+        }
+        else if (clickX > rightArea) {
+            // Right area - forward
+            handleSeek(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(-seekAmount); };
+    var handleForward = function () { return handleSeek(seekAmount); };
+    // Fullscreen functionality
     var handleToggleFullScreen = function () {
         var _a, _b;
         var element = containerRef.current;
@@ -146,6 +242,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,59 +283,44 @@ function Video(_a) {
             animationFrameRef.current = requestAnimationFrame(updateCurrentTime);
         }
     }, []);
+    // Event handlers
     var handleLoadedMetadata = function () {
         var video = videoRef.current;
         if (video) {
             setDuration(video.duration || 0);
             onDuration === null || onDuration === void 0 ? void 0 : onDuration(video.duration);
             if (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 () {
+        setIsPlaying(false);
+        onEnded === null || onEnded === void 0 ? void 0 : onEnded(); // Call the onEnded callback
+        if (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, spacebarPlay);
+        };
+        document.addEventListener('keydown', handleKey);
+        return function () { return document.removeEventListener('keydown', handleKey); };
+    }, [isPlaying, 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); };
+    }, [loop, onEnded]);
     (0, react_1.useEffect)(function () {
         if (isPause)
             pauseVideo();
@@ -217,24 +332,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); }, hideControlsDelay);
+        };
+        var hide = function () {
+            setShowControlsState(false);
         };
-        document.addEventListener('mousemove', handleMouseMove);
-        document.addEventListener('touchstart', handleMouseMove);
+        var container = containerRef.current;
+        if (container && 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);
         };
-    }, []);
+    }, [showControls, hideControlsDelay]);
     (0, react_1.useEffect)(function () {
         if (isPlaying) {
             animationFrameRef.current = requestAnimationFrame(updateCurrentTime);
@@ -247,59 +370,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" },
+    // 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(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(buttonCss, " ").concat(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(funcss, " ").concat(containerCss, " ").concat(className), onClick: handleVideoClick },
         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" }))),
+        react_1.default.createElement("video", { ref: videoRef, preload: "auto", src: src, className: "video_player fit min-w-200 ".concat(videoCss), onLoadedMetadata: handleLoadedMetadata, playsInline: true, controls: false, loop: loop, muted: muted }),
+        showControls && (react_1.default.createElement("div", { className: "video_controls ".concat(controlsCss, " ").concat(showControlsState ? 'show_controls' : 'hide_controls') },
+            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" },
+                    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(buttonCss, " ").concat(isPlaying ? pauseCss : playCss) }, isPlaying
+                            ? renderIcon(dynamicPauseIcon, 16)
+                            : renderIcon(dynamicPlayIcon, 16)),
+                        react_1.default.createElement(Tip_1.default, { tip: "top", content: isPlaying ? "Pause" : "Play" }))),
+                    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(buttonCss, " ").concat(rewindCss) }, renderIcon(dynamicRewindIcon, 14)),
+                            react_1.default.createElement(Tip_1.default, { tip: "top", content: "".concat(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(buttonCss, " ").concat(forwardCss) }, renderIcon(dynamicForwardIcon, 14)),
+                            react_1.default.createElement(Tip_1.default, { tip: "top", content: "".concat(seekAmount, "s Forward") })))),
+                    showVolume && react_1.default.createElement(VolumeControl, null),
+                    showTime && (react_1.default.createElement("div", { className: "video_time ".concat(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" })))))));
+                    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(buttonCss, " ").concat(fullscreenCss) }, renderIcon(dynamicFullscreenIcon, 16)),
+                        react_1.default.createElement(Tip_1.default, { tip: "top", content: "Fullscreen" }))),
+                    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(src, '_blank'); }, className: "".concat(buttonCss, " ").concat(downloadCss) }, renderIcon(dynamicDownloadIcon, 14)),
+                        react_1.default.createElement(Tip_1.default, { tip: "top", content: "Download" })))))))));
 }