funuicss 2.7.4 → 2.7.6

package/ui/accordion/Accordion.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+interface AccordionProps {
+    items: {
+        title: string;
+        content: React.ReactNode;
+    }[];
+    allowMultiple?: boolean;
+    defaultOpenIndexes?: number[];
+    itemClass?: string;
+    titleClass?: string;
+    iconClass?: string;
+    contentClass?: string;
+    activeClass?: string;
+}
+declare const Accordion: React.FC<AccordionProps>;
+export default Accordion;

package/ui/accordion/Accordion.js

@@ -0,0 +1,80 @@
+"use strict";
+'use client';
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var react_1 = __importStar(require("react"));
+var pi_1 = require("react-icons/pi");
+var AccordionItem = function (_a) {
+    var title = _a.title, content = _a.content, isOpen = _a.isOpen, onToggle = _a.onToggle, _b = _a.itemClass, itemClass = _b === void 0 ? '' : _b, _c = _a.titleClass, titleClass = _c === void 0 ? '' : _c, _d = _a.iconClass, iconClass = _d === void 0 ? '' : _d, _e = _a.contentClass, contentClass = _e === void 0 ? '' : _e, _f = _a.activeClass, activeClass = _f === void 0 ? '' : _f;
+    return (react_1.default.createElement("div", { className: "accordion-item ".concat(itemClass, " ").concat(isOpen ? activeClass : '') },
+        react_1.default.createElement("button", { className: "accordion-header ".concat(titleClass), onClick: onToggle },
+            react_1.default.createElement("span", null, title),
+            react_1.default.createElement("span", { className: iconClass }, isOpen ? (react_1.default.createElement("span", { className: "animated slide-up" },
+                react_1.default.createElement(pi_1.PiCaretUp, null))) : (react_1.default.createElement("span", { className: "animated slide-down" },
+                react_1.default.createElement(pi_1.PiCaretDown, null))))),
+        react_1.default.createElement("div", { className: "accordion-content ".concat(contentClass, " ").concat(isOpen ? 'open' : '') },
+            react_1.default.createElement("div", { className: "accordion-inner" }, content))));
+};
+var Accordion = function (_a) {
+    var _b;
+    var items = _a.items, _c = _a.allowMultiple, allowMultiple = _c === void 0 ? false : _c, // ❗ default is only one open
+    _d = _a.defaultOpenIndexes, // ❗ default is only one open
+    defaultOpenIndexes = _d === void 0 ? [] : _d, itemClass = _a.itemClass, titleClass = _a.titleClass, iconClass = _a.iconClass, contentClass = _a.contentClass, activeClass = _a.activeClass;
+    var _e = (0, react_1.useState)(allowMultiple ? defaultOpenIndexes : [(_b = defaultOpenIndexes[0]) !== null && _b !== void 0 ? _b : -1]), openIndexes = _e[0], setOpenIndexes = _e[1];
+    var toggleIndex = function (index) {
+        if (allowMultiple) {
+            if (openIndexes.includes(index)) {
+                setOpenIndexes(openIndexes.filter(function (i) { return i !== index; }));
+            }
+            else {
+                setOpenIndexes(__spreadArray(__spreadArray([], openIndexes, true), [index], false));
+            }
+        }
+        else {
+            setOpenIndexes(openIndexes.includes(index) ? [] : [index]);
+        }
+    };
+    return (react_1.default.createElement("div", { className: "accordion" }, items.map(function (item, index) { return (react_1.default.createElement(AccordionItem, { key: index, index: index, title: item.title, content: item.content, isOpen: openIndexes.includes(index), onToggle: function () { return toggleIndex(index); }, itemClass: itemClass, titleClass: titleClass, iconClass: iconClass, contentClass: contentClass, activeClass: activeClass })); })));
+};
+exports.default = Accordion;

package/ui/accordion/Accordion.tsx

@@ -0,0 +1,117 @@
+'use client';
+import React, { useState } from 'react';
+import { PiCaretDown, PiCaretUp } from 'react-icons/pi';
+
+interface AccordionItemProps {
+  title: string;
+  content: React.ReactNode;
+  isOpen?: boolean;
+  onToggle?: () => void;
+  index?: number;
+
+  // Customization
+  itemClass?: string;
+  titleClass?: string;
+  iconClass?: string;
+  contentClass?: string;
+  activeClass?: string;
+}
+
+const AccordionItem: React.FC<AccordionItemProps> = ({
+  title,
+  content,
+  isOpen,
+  onToggle,
+  itemClass = '',
+  titleClass = '',
+  iconClass = '',
+  contentClass = '',
+  activeClass = '',
+}) => {
+  return (
+    <div className={`accordion-item ${itemClass} ${isOpen ? activeClass : ''}`}>
+      <button className={`accordion-header ${titleClass}`} onClick={onToggle}>
+        <span>{title}</span>
+        <span className={iconClass}>
+          {isOpen ? (
+            <span className="animated slide-up">
+              <PiCaretUp />
+            </span>
+          ) : (
+            <span className="animated slide-down">
+              <PiCaretDown />
+            </span>
+          )}
+        </span>
+      </button>
+      <div className={`accordion-content ${contentClass} ${isOpen ? 'open' : ''}`}>
+        <div className="accordion-inner">{content}</div>
+      </div>
+    </div>
+  );
+};
+
+interface AccordionProps {
+  items: {
+    title: string;
+    content: React.ReactNode;
+  }[];
+  allowMultiple?: boolean; // ✅ NEW
+  defaultOpenIndexes?: number[]; // optional
+
+  // Custom styles
+  itemClass?: string;
+  titleClass?: string;
+  iconClass?: string;
+  contentClass?: string;
+  activeClass?: string;
+}
+
+const Accordion: React.FC<AccordionProps> = ({
+  items,
+  allowMultiple = false, // ❗ default is only one open
+  defaultOpenIndexes = [],
+  itemClass,
+  titleClass,
+  iconClass,
+  contentClass,
+  activeClass,
+}) => {
+  const [openIndexes, setOpenIndexes] = useState<number[]>(
+    allowMultiple ? defaultOpenIndexes : [defaultOpenIndexes[0] ?? -1]
+  );
+
+  const toggleIndex = (index: number) => {
+    if (allowMultiple) {
+      if (openIndexes.includes(index)) {
+        setOpenIndexes(openIndexes.filter((i) => i !== index));
+      } else {
+        setOpenIndexes([...openIndexes, index]);
+      }
+    } else {
+      setOpenIndexes(openIndexes.includes(index) ? [] : [index]);
+    }
+  };
+
+  return (
+    <div className="accordion">
+      {items.map((item, index) => (
+        <AccordionItem
+          key={index}
+          index={index}
+          title={item.title}
+          content={item.content}
+          isOpen={openIndexes.includes(index)}
+          onToggle={() => toggleIndex(index)}
+          itemClass={itemClass}
+          titleClass={titleClass}
+          iconClass={iconClass}
+          contentClass={contentClass}
+          activeClass={activeClass}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default Accordion;

package/ui/flex/Flex.d.ts

@@ -0,0 +1,29 @@
+import React from 'react';
+interface FlexProps {
+    as?: keyof JSX.IntrinsicElements;
+    className?: string;
+    funcss?: string;
+    id?: string;
+    children?: React.ReactNode;
+    style?: React.CSSProperties;
+    direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+    wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
+    justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+    alignItems?: 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline';
+    alignContent?: 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around';
+    gap?: number;
+    gapX?: number;
+    gapY?: number;
+    gapUnit?: 'rem' | 'px' | 'em';
+    grow?: number;
+    shrink?: number;
+    basis?: string;
+    flex?: string;
+    responsiveSmall?: boolean;
+    responsiveMedium?: boolean;
+    responsiveLarge?: boolean;
+    fullWidth?: boolean;
+    fullHeight?: boolean;
+}
+export default function Flex({ as: Component, className, funcss, id, children, style, direction, wrap, justify, alignItems, alignContent, gap, gapX, gapY, gapUnit, grow, shrink, basis, flex, responsiveSmall, responsiveMedium, responsiveLarge, fullWidth, fullHeight, ...rest }: FlexProps): React.JSX.Element;
+export {};

package/ui/flex/Flex.js

@@ -0,0 +1,47 @@
+"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 __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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = Flex;
+var react_1 = __importDefault(require("react"));
+function Flex(_a) {
+    var _b = _a.as, Component = _b === void 0 ? 'div' : _b, className = _a.className, funcss = _a.funcss, id = _a.id, children = _a.children, _c = _a.style, style = _c === void 0 ? {} : _c, 
+    // Flex container
+    _d = _a.direction, 
+    // Flex container
+    direction = _d === void 0 ? 'row' : _d, _e = _a.wrap, wrap = _e === void 0 ? 'wrap' : _e, justify = _a.justify, alignItems = _a.alignItems, alignContent = _a.alignContent, 
+    // Gap
+    gap = _a.gap, gapX = _a.gapX, gapY = _a.gapY, _f = _a.gapUnit, gapUnit = _f === void 0 ? 'rem' : _f, 
+    // Flex item
+    grow = _a.grow, shrink = _a.shrink, basis = _a.basis, flex = _a.flex, 
+    // Responsive
+    responsiveSmall = _a.responsiveSmall, responsiveMedium = _a.responsiveMedium, responsiveLarge = _a.responsiveLarge, 
+    // Size
+    fullWidth = _a.fullWidth, fullHeight = _a.fullHeight, rest = __rest(_a, ["as", "className", "funcss", "id", "children", "style", "direction", "wrap", "justify", "alignItems", "alignContent", "gap", "gapX", "gapY", "gapUnit", "grow", "shrink", "basis", "flex", "responsiveSmall", "responsiveMedium", "responsiveLarge", "fullWidth", "fullHeight"]);
+    var responsiveClasses = "\n    ".concat(responsiveSmall ? 'responsiveSmall' : '', "\n    ").concat(responsiveMedium ? 'responsiveMedium' : '', "\n    ").concat(responsiveLarge ? 'responsiveLarge' : '', "\n  ").trim();
+    return (react_1.default.createElement(Component, __assign({ id: id, className: "\n        ".concat(className || '', "\n        ").concat(funcss || '', "\n        ").concat(responsiveClasses, "\n      ").trim(), style: __assign({ display: 'flex', flexDirection: direction, flexWrap: wrap, justifyContent: justify, alignItems: alignItems, alignContent: alignContent, gap: gap ? "".concat(gap).concat(gapUnit) : undefined, columnGap: gapX ? "".concat(gapX).concat(gapUnit) : undefined, rowGap: gapY ? "".concat(gapY).concat(gapUnit) : undefined, flexGrow: grow, flexShrink: shrink, flexBasis: basis, flex: flex, width: fullWidth ? '100%' : undefined, height: fullHeight ? '100%' : undefined }, style) }, rest), children));
+}

package/ui/flex/Flex.tsx

@@ -0,0 +1,115 @@
+'use client';
+import React from 'react';
+
+interface FlexProps {
+  as?: keyof JSX.IntrinsicElements; // Render as any tag (e.g. section, ul)
+  className?: string;
+  funcss?: string;
+  id?: string;
+  children?: React.ReactNode;
+  style?: React.CSSProperties;
+
+  // Flex container properties
+  direction?: 'row' | 'column' | 'row-reverse' | 'column-reverse';
+  wrap?: 'wrap' | 'nowrap' | 'wrap-reverse';
+  justify?: 'flex-start' | 'flex-end' | 'center' | 'space-between' | 'space-around' | 'space-evenly';
+  alignItems?: 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline';
+  alignContent?: 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around';
+
+  // Gap utilities
+  gap?: number;
+  gapX?: number;
+  gapY?: number;
+  gapUnit?: 'rem' | 'px' | 'em';
+
+  // Flex item behavior
+  grow?: number;
+  shrink?: number;
+  basis?: string;
+  flex?: string;
+
+  // Responsive helpers
+  responsiveSmall?: boolean;
+  responsiveMedium?: boolean;
+  responsiveLarge?: boolean;
+
+  // Stretch helpers
+  fullWidth?: boolean;
+  fullHeight?: boolean;
+}
+
+export default function Flex({
+  as: Component = 'div',
+  className,
+  funcss,
+  id,
+  children,
+  style = {},
+
+  // Flex container
+  direction = 'row',
+  wrap = 'wrap',
+  justify,
+  alignItems,
+  alignContent,
+
+  // Gap
+  gap,
+  gapX,
+  gapY,
+  gapUnit = 'rem',
+
+  // Flex item
+  grow,
+  shrink,
+  basis,
+  flex,
+
+  // Responsive
+  responsiveSmall,
+  responsiveMedium,
+  responsiveLarge,
+
+  // Size
+  fullWidth,
+  fullHeight,
+  ...rest
+}: FlexProps) {
+  const responsiveClasses = `
+    ${responsiveSmall ? 'responsiveSmall' : ''}
+    ${responsiveMedium ? 'responsiveMedium' : ''}
+    ${responsiveLarge ? 'responsiveLarge' : ''}
+  `.trim();
+
+  return (
+    <Component
+      id={id}
+      className={`
+        ${className || ''}
+        ${funcss || ''}
+        ${responsiveClasses}
+      `.trim()}
+      style={{
+        display: 'flex',
+        flexDirection: direction,
+        flexWrap: wrap,
+        justifyContent: justify,
+        alignItems: alignItems,
+        alignContent: alignContent,
+        gap: gap ? `${gap}${gapUnit}` : undefined,
+        columnGap: gapX ? `${gapX}${gapUnit}` : undefined,
+        rowGap: gapY ? `${gapY}${gapUnit}` : undefined,
+        flexGrow: grow,
+        flexShrink: shrink,
+        flexBasis: basis,
+        flex: flex,
+        width: fullWidth ? '100%' : undefined,
+        height: fullHeight ? '100%' : undefined,
+        ...style,
+      }}
+      {...rest}
+    >
+      {children}
+    </Component>
+  );
+}

package/ui/video/Video.js

@@ -83,12 +83,30 @@ function Video(_a) {
     var _g = (0, react_1.useState)(false), showVolume = _g[0], setShowVolume = _g[1];
     var _h = (0, react_1.useState)(true), isMouseMoving = _h[0], setIsMouseMoving = _h[1];
     var _j = (0, react_1.useState)(false), hasStarted = _j[0], setHasStarted = _j[1];
+    var handleVideoEnd = function () {
+        setIsPlaying(false);
+        setCurrentTime(duration); // optional
+    };
+    (0, react_1.useEffect)(function () {
+        var video = videoRef.current;
+        if (!video)
+            return;
+        video.addEventListener('ended', handleVideoEnd);
+        return function () {
+            video.removeEventListener('ended', handleVideoEnd);
+        };
+    }, [duration]);
     var playVideo = function () {
         var video = videoRef.current;
-        if (video && video.paused) {
-            video.play().catch(function () { });
-            setIsPlaying(true);
-            setHasStarted(true);
+        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 () { });
         }
     };
     var pauseVideo = function () {
@@ -141,10 +159,24 @@ function Video(_a) {
             setDuration(video.duration || 0);
             onDuration === null || onDuration === void 0 ? void 0 : onDuration(video.duration);
             if (autoPlay) {
-                playVideo();
+                video.play().then(function () {
+                    setIsPlaying(true); // ✅ update UI state
+                    setHasStarted(true);
+                }).catch(function () { });
             }
         }
     };
+    (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) {
@@ -153,6 +185,9 @@ function Video(_a) {
         setCurrentTime(newTime);
     };
     var handleVolumeChange = function (e) {
+        if (videoRef.current) {
+            videoRef.current.muted = false;
+        }
         var newVolume = parseFloat(e.target.value);
         setVolume(newVolume);
         if (videoRef.current)
@@ -217,18 +252,28 @@ function Video(_a) {
             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: "w-80-p center animated fade-in" },
-                react_1.default.createElement(RowFlex_1.default, { gap: 0.3, funcss: "padding-5", alignItems: "center" },
+                react_1.default.createElement(RowFlex_1.default, { gap: 0.3, funcss: 'mb-2', alignItems: "center" },
                     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("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 styled-slider m-0", "aria-label": "Progress bar", style: { '--progress': "".concat((currentTime / duration) * 100) } })),
+                        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: "video_time" },
-                        react_1.default.createElement(Text_1.default, { text: "-".concat((0, videoFunctions_1.formatTime)(duration - 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("div", { className: "center-play-icon animated fade-in", onClick: handlePlayPauseToggle },
                 react_1.default.createElement("div", { className: 'play-button' }, isPlaying ? react_1.default.createElement(pi_1.PiPause, { size: 30 }) : react_1.default.createElement(pi_1.PiPlay, { size: 30 }))),
             react_1.default.createElement(RowFlex_1.default, { funcss: 'animated slide-up', gap: 1, justify: "center" },

package/ui/video/Video.tsx

@@ -43,22 +43,48 @@ export default function Video({ src, poster, onDuration, isPause, className, aut
   const [isMouseMoving, setIsMouseMoving] = useState(true);
   const [hasStarted, setHasStarted] = useState(false);
 
-  const playVideo = () => {
-    const video = videoRef.current;
-    if (video && video.paused) {
-      video.play().catch(() => {});
-      setIsPlaying(true);
-      setHasStarted(true);
-    }
+
+
+  const handleVideoEnd = () => {
+  setIsPlaying(false);
+  setCurrentTime(duration); // optional
+};
+
+useEffect(() => {
+  const video = videoRef.current;
+  if (!video) return;
+
+  video.addEventListener('ended', handleVideoEnd);
+  return () => {
+    video.removeEventListener('ended', handleVideoEnd);
   };
+}, [duration]);
 
-  const pauseVideo = () => {
-    const video = videoRef.current;
-    if (video && !video.paused) {
-      video.pause();
-      setIsPlaying(false);
+
+const playVideo = () => {
+  const video = videoRef.current;
+  if (video) {
+    // ✅ if video ended, reset it to start
+    if (video.currentTime === video.duration) {
+      video.currentTime = 0;
     }
-  };
+
+    video.play().then(() => {
+      setIsPlaying(true);
+      setHasStarted(true);
+    }).catch(() => {});
+  }
+};
+
+const pauseVideo = () => {
+  const video = videoRef.current;
+  if (video && !video.paused) {
+    video.pause();
+    setIsPlaying(false);
+  }
+};
+
+
 
   useEffect(() => {
     const handleKey = (e: KeyboardEvent) => handleKeyDown(e, isPlaying, playVideo, pauseVideo);
@@ -98,16 +124,33 @@ export default function Video({ src, poster, onDuration, isPause, className, aut
     }
   }, []);
 
-  const handleLoadedMetadata = () => {
-    const video = videoRef.current;
-    if (video) {
-      setDuration(video.duration || 0);
-      onDuration?.(video.duration);
-      if (autoPlay) {
-        playVideo();
-      }
+const handleLoadedMetadata = () => {
+  const video = videoRef.current;
+  if (video) {
+    setDuration(video.duration || 0);
+    onDuration?.(video.duration);
+    if (autoPlay) {
+      video.play().then(() => {
+        setIsPlaying(true); // ✅ update UI state
+        setHasStarted(true);
+      }).catch(() => {});
     }
-  };
+  }
+};
+
+
+useEffect(() => {
+  if (autoPlay && videoRef.current) {
+    videoRef.current.muted = true; // ✅ important for autoplay to work
+    videoRef.current.play().then(() => {
+      setIsPlaying(true);
+      setHasStarted(true);
+    }).catch((err) => {
+      console.warn('Autoplay failed', err);
+    });
+  }
+}, [autoPlay]);
+
 
   const handleProgressBarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newTime = parseFloat(e.target.value);
@@ -118,6 +161,9 @@ export default function Video({ src, poster, onDuration, isPause, className, aut
   };
 
   const handleVolumeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if(videoRef.current){
+      videoRef.current.muted = false; 
+    }
     const newVolume = parseFloat(e.target.value);
     setVolume(newVolume);
     if (videoRef.current) videoRef.current.volume = newVolume;
@@ -185,6 +231,20 @@ export default function Video({ src, poster, onDuration, isPause, className, aut
     };
   }, []);
 
+
+  useEffect(() => {
+  const video = videoRef.current;
+  if (!video) return;
+
+  const onEnd = () => {
+    setIsPlaying(false);
+  };
+
+  video.addEventListener('ended', onEnd);
+  return () => video.removeEventListener('ended', onEnd);
+}, []);
+
+
   return (
     <div ref={containerRef} className={`video_container fit ${className || ''}`} id="fun_video_container">
       {poster && !hasStarted && !isPlaying && (
@@ -207,7 +267,7 @@ export default function Video({ src, poster, onDuration, isPause, className, aut
 
       <div className={`video_controls ${isMouseMoving ? 'show_controls' : 'hide_controls'}`}>
         <div className="w-80-p center animated fade-in">
-          <RowFlex gap={0.3} funcss="padding-5" alignItems="center">
+          <RowFlex gap={0.3} funcss='mb-2' alignItems="center">
            <div className='video_time'>
              <Text text={formatTime(currentTime)} funcss='m-0' size="sm"  />
            </div>
@@ -218,13 +278,13 @@ export default function Video({ src, poster, onDuration, isPause, className, aut
                 max={duration}
                 value={currentTime}
                 onChange={handleProgressBarChange}
-                className="width-100-p styled-slider m-0"
+                className="width-100-p videoSlider styled-slider m-0"
                 aria-label="Progress bar"
                 style={{ '--progress': `${(currentTime / duration) * 100}` } as React.CSSProperties}
               />
             </div>
             <div className="video_time">
-            <Text text={`-${formatTime(duration - currentTime)}`} funcss='m-0' size="sm"  />
+            <Text text={`${formatTime(duration - currentTime)}`} funcss='m-0' size="sm"  />
             </div>
           </RowFlex>
         </div>