funuicss 3.5.6 → 3.5.8

package/js/firebase/FireStore.d.ts

@@ -0,0 +1,54 @@
+import { DocumentData, QueryConstraint, DocumentReference, Firestore } from 'firebase/firestore';
+export interface DocWithId extends Record<string, any> {
+    id: string;
+}
+export interface QueryResponse {
+    message?: string;
+    data: DocWithId[];
+}
+export interface SingleDocResponse {
+    message?: string;
+    data: DocumentData | string;
+    id?: string;
+}
+type CollectionName = string;
+type DocumentId = string;
+/**
+ * Recursively formats Firestore Timestamps into ISO strings.
+ */
+export declare const formatTimestamps: (data: DocumentData) => DocumentData;
+export declare const FunFireStore: {
+    /**
+     * 📥 Fetch all documents from a collection
+     */
+    getDocs: (db: Firestore, collectionName: CollectionName, docsLimit?: number, extraQueries?: QueryConstraint[]) => Promise<DocWithId[]>;
+    /**
+     * 👀 Real-time listener for a single document
+     */
+    getDoc: (db: Firestore, collectionName: CollectionName, id: DocumentId) => Promise<SingleDocResponse>;
+    /**
+     * 📄 Fetch a single document (no listener)
+     */
+    getDocOnce: (db: Firestore, collectionName: CollectionName, id: DocumentId) => Promise<SingleDocResponse>;
+    /**
+     * 🔎 Custom query with constraints
+     */
+    query: (db: Firestore, collectionName: CollectionName, queries?: QueryConstraint[], docsLimit?: number) => Promise<QueryResponse>;
+    /**
+     * ➕ Add new document (auto ID)
+     */
+    addDocument: (db: Firestore, collectionName: CollectionName, data: DocumentData) => Promise<DocumentReference>;
+    /**
+     * 🧩 Set or merge a document with a custom ID
+     */
+    setDoc: (db: Firestore, collectionName: CollectionName, id: DocumentId, data: DocumentData) => Promise<void>;
+    /**
+     * 🔄 Update a document
+     */
+    update: (db: Firestore, collectionName: CollectionName, id: DocumentId, data: Partial<DocumentData>) => Promise<void>;
+    /**
+     * ❌ Delete a document
+     */
+    delete: (db: Firestore, collectionName: CollectionName, id: DocumentId) => Promise<string>;
+};
+export {};

package/js/firebase/FireStore.js

@@ -0,0 +1,285 @@
+"use strict";
+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 __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 __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 });
+exports.FunFireStore = exports.formatTimestamps = void 0;
+var firestore_1 = require("firebase/firestore");
+/* -------------------------------------------------------------------------- */
+/*                       🔧 Timestamp Formatting Helper                       */
+/* -------------------------------------------------------------------------- */
+/**
+ * Recursively formats Firestore Timestamps into ISO strings.
+ */
+var formatTimestamps = function (data) {
+    if (!data || typeof data !== 'object')
+        return data;
+    var formatted = Array.isArray(data) ? [] : {};
+    for (var key in data) {
+        var value = data[key];
+        if (value instanceof firestore_1.Timestamp) {
+            formatted[key] = value.toDate().toISOString();
+        }
+        else if (Array.isArray(value)) {
+            formatted[key] = value.map(function (v) { return (0, exports.formatTimestamps)(v); });
+        }
+        else if (value && typeof value === 'object') {
+            formatted[key] = (0, exports.formatTimestamps)(value);
+        }
+        else {
+            formatted[key] = value;
+        }
+    }
+    return formatted;
+};
+exports.formatTimestamps = formatTimestamps;
+/* -------------------------------------------------------------------------- */
+/*                           ⚡ Firestore Utilities                           */
+/* -------------------------------------------------------------------------- */
+exports.FunFireStore = {
+    /**
+     * 📥 Fetch all documents from a collection
+     */
+    getDocs: function (db_1, collectionName_1, docsLimit_1) {
+        var args_1 = [];
+        for (var _i = 3; _i < arguments.length; _i++) {
+            args_1[_i - 3] = arguments[_i];
+        }
+        return __awaiter(void 0, __spreadArray([db_1, collectionName_1, docsLimit_1], args_1, true), void 0, function (db, collectionName, docsLimit, extraQueries) {
+            var constraints, q, snapshot, err_1, error;
+            if (extraQueries === void 0) { extraQueries = []; }
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        constraints = __spreadArray([], extraQueries, true);
+                        if (docsLimit)
+                            constraints.push((0, firestore_1.limit)(docsLimit));
+                        q = firestore_1.query.apply(void 0, __spreadArray([(0, firestore_1.collection)(db, collectionName)], constraints, false));
+                        return [4 /*yield*/, (0, firestore_1.getDocs)(q)];
+                    case 1:
+                        snapshot = _a.sent();
+                        return [2 /*return*/, snapshot.docs.map(function (d) { return (__assign({ id: d.id }, (0, exports.formatTimestamps)(d.data()))); })];
+                    case 2:
+                        err_1 = _a.sent();
+                        error = err_1;
+                        throw new Error("Error fetching documents from ".concat(collectionName, ": ").concat(error.message));
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    },
+    /**
+     * 👀 Real-time listener for a single document
+     */
+    getDoc: function (db, collectionName, id) {
+        return new Promise(function (resolve, reject) {
+            var unsub = (0, firestore_1.onSnapshot)((0, firestore_1.doc)(db, collectionName, id), function (snap) {
+                var data = snap.data();
+                resolve(data
+                    ? { id: snap.id, data: (0, exports.formatTimestamps)(data) }
+                    : { message: 'No data found', data: '' });
+            }, function (err) { return reject(new Error("Error fetching document: ".concat(err.message))); });
+            // ✅ Auto-unsubscribe after first snapshot to avoid memory leaks
+            setTimeout(function () { return unsub(); }, 10000);
+        });
+    },
+    /**
+     * 📄 Fetch a single document (no listener)
+     */
+    getDocOnce: function (db, collectionName, id) { return __awaiter(void 0, void 0, void 0, function () {
+        var snap, data, err_2, error;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, (0, firestore_1.getDoc)((0, firestore_1.doc)(db, collectionName, id))];
+                case 1:
+                    snap = _a.sent();
+                    data = snap.data();
+                    return [2 /*return*/, data
+                            ? { id: snap.id, data: (0, exports.formatTimestamps)(data) }
+                            : { message: 'No data found', data: '' }];
+                case 2:
+                    err_2 = _a.sent();
+                    error = err_2;
+                    throw new Error("Error fetching document: ".concat(error.message));
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); },
+    /**
+     * 🔎 Custom query with constraints
+     */
+    query: function (db_1, collectionName_1) {
+        var args_1 = [];
+        for (var _i = 2; _i < arguments.length; _i++) {
+            args_1[_i - 2] = arguments[_i];
+        }
+        return __awaiter(void 0, __spreadArray([db_1, collectionName_1], args_1, true), void 0, function (db, collectionName, queries, docsLimit) {
+            var constraints, q, snapshot, data, err_3, error;
+            if (queries === void 0) { queries = []; }
+            return __generator(this, function (_a) {
+                switch (_a.label) {
+                    case 0:
+                        _a.trys.push([0, 2, , 3]);
+                        constraints = __spreadArray([], queries, true);
+                        if (docsLimit)
+                            constraints.push((0, firestore_1.limit)(docsLimit));
+                        q = firestore_1.query.apply(void 0, __spreadArray([(0, firestore_1.collection)(db, collectionName)], constraints, false));
+                        return [4 /*yield*/, (0, firestore_1.getDocs)(q)];
+                    case 1:
+                        snapshot = _a.sent();
+                        if (!snapshot.empty) {
+                            data = snapshot.docs.map(function (d) { return (__assign({ id: d.id }, (0, exports.formatTimestamps)(d.data()))); });
+                            return [2 /*return*/, { data: data }];
+                        }
+                        return [2 /*return*/, { message: 'No data', data: [] }];
+                    case 2:
+                        err_3 = _a.sent();
+                        error = err_3;
+                        throw new Error("Error querying ".concat(collectionName, ": ").concat(error.message));
+                    case 3: return [2 /*return*/];
+                }
+            });
+        });
+    },
+    /**
+     * ➕ Add new document (auto ID)
+     */
+    addDocument: function (db, collectionName, data) { return __awaiter(void 0, void 0, void 0, function () {
+        var docRef, err_4, error;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, (0, firestore_1.addDoc)((0, firestore_1.collection)(db, collectionName), __assign(__assign({}, data), { createdAt: (0, firestore_1.serverTimestamp)(), updatedAt: (0, firestore_1.serverTimestamp)() }))];
+                case 1:
+                    docRef = _a.sent();
+                    // await updateDoc(docRef, { [assignKey]: docRef.id });
+                    return [2 /*return*/, docRef];
+                case 2:
+                    err_4 = _a.sent();
+                    error = err_4;
+                    throw new Error("Error adding document: ".concat(error.message));
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); },
+    /**
+     * 🧩 Set or merge a document with a custom ID
+     */
+    setDoc: function (db, collectionName, id, data) { return __awaiter(void 0, void 0, void 0, function () {
+        var err_5, error;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, (0, firestore_1.setDoc)((0, firestore_1.doc)(db, collectionName, id), __assign(__assign({}, data), { updatedAt: (0, firestore_1.serverTimestamp)(), createdAt: (0, firestore_1.serverTimestamp)() }), { merge: true })];
+                case 1:
+                    _a.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    err_5 = _a.sent();
+                    error = err_5;
+                    throw new Error("Error setting document: ".concat(error.message));
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); },
+    /**
+     * 🔄 Update a document
+     */
+    update: function (db, collectionName, id, data) { return __awaiter(void 0, void 0, void 0, function () {
+        var err_6, error;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, (0, firestore_1.updateDoc)((0, firestore_1.doc)(db, collectionName, id), __assign(__assign({}, data), { updatedAt: (0, firestore_1.serverTimestamp)() }))];
+                case 1:
+                    _a.sent();
+                    return [3 /*break*/, 3];
+                case 2:
+                    err_6 = _a.sent();
+                    error = err_6;
+                    throw new Error("Error updating document: ".concat(error.message));
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); },
+    /**
+     * ❌ Delete a document
+     */
+    delete: function (db, collectionName, id) { return __awaiter(void 0, void 0, void 0, function () {
+        var err_7, error;
+        return __generator(this, function (_a) {
+            switch (_a.label) {
+                case 0:
+                    _a.trys.push([0, 2, , 3]);
+                    return [4 /*yield*/, (0, firestore_1.deleteDoc)((0, firestore_1.doc)(db, collectionName, id))];
+                case 1:
+                    _a.sent();
+                    return [2 /*return*/, "\u2705 Document \"".concat(id, "\" successfully deleted")];
+                case 2:
+                    err_7 = _a.sent();
+                    error = err_7;
+                    throw new Error("Error deleting document: ".concat(error.message));
+                case 3: return [2 /*return*/];
+            }
+        });
+    }); },
+};

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "3.5.6",
+  "version": "3.5.8",
   "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",
@@ -44,6 +44,7 @@
   "dependencies": {
     "aos": "^2.3.4",
     "dayjs": "^1.11.13",
+    "firebase": "^12.3.0",
     "framer-motion": "^12.23.6",
     "hls.js": "^1.6.5",
     "next": "^13.4.4",

package/ui/table/Table.d.ts

@@ -36,8 +36,9 @@ type TableProps = {
     }[];
     filterableFields?: string[];
     prioritizeSearchFields?: string[];
+    onRowClick?: (data: any) => void;
 };
 export default function Table({ children, funcss, bordered, noStripped, hoverable, title, showTotal, light, dark, head, body, data, isLoading, right, hideExport, height, pageSize, // Default page size,
 customColumns, filterableFields, // New prop
-emptyResponse, filterOnchange, clearSearch, prioritizeSearchFields, ...rest }: TableProps): React.JSX.Element;
+emptyResponse, filterOnchange, clearSearch, prioritizeSearchFields, onRowClick, ...rest }: TableProps): React.JSX.Element;
 export {};

package/ui/table/Table.js

@@ -95,7 +95,7 @@ function Table(_a) {
     var _b, _c;
     var children = _a.children, funcss = _a.funcss, bordered = _a.bordered, noStripped = _a.noStripped, hoverable = _a.hoverable, _d = _a.title, title = _d === void 0 ? "" : _d, showTotal = _a.showTotal, light = _a.light, dark = _a.dark, head = _a.head, body = _a.body, data = _a.data, _e = _a.isLoading, isLoading = _e === void 0 ? false : _e, right = _a.right, hideExport = _a.hideExport, height = _a.height, _f = _a.pageSize, pageSize = _f === void 0 ? data ? 10 : 0 : _f, // Default page size,
     customColumns = _a.customColumns, filterableFields = _a.filterableFields, // New prop
-    emptyResponse = _a.emptyResponse, filterOnchange = _a.filterOnchange, clearSearch = _a.clearSearch, _g = _a.prioritizeSearchFields, prioritizeSearchFields = _g === void 0 ? [] : _g, rest = __rest(_a, ["children", "funcss", "bordered", "noStripped", "hoverable", "title", "showTotal", "light", "dark", "head", "body", "data", "isLoading", "right", "hideExport", "height", "pageSize", "customColumns", "filterableFields", "emptyResponse", "filterOnchange", "clearSearch", "prioritizeSearchFields"]);
+    emptyResponse = _a.emptyResponse, filterOnchange = _a.filterOnchange, clearSearch = _a.clearSearch, _g = _a.prioritizeSearchFields, prioritizeSearchFields = _g === void 0 ? [] : _g, onRowClick = _a.onRowClick, rest = __rest(_a, ["children", "funcss", "bordered", "noStripped", "hoverable", "title", "showTotal", "light", "dark", "head", "body", "data", "isLoading", "right", "hideExport", "height", "pageSize", "customColumns", "filterableFields", "emptyResponse", "filterOnchange", "clearSearch", "prioritizeSearchFields", "onRowClick"]);
     // Check if data is null or undefined before accessing its properties
     // Replace this in your component
     var _h = (0, react_1.useState)(''), search = _h[0], setSearch = _h[1];
@@ -278,7 +278,7 @@ function Table(_a) {
                         var results = (0, Query_1.getAdvancedFilteredData)(filteredData, searchQuery, data, getNestedValue, prioritizeSearchFields);
                         var shouldSlice = !searchQuery || results.length > 10;
                         return (shouldSlice ? results.slice(startIndex, endIndex) : results)
-                            .map(function (mdoc, index) { return (React.createElement("tr", { className: 'animated slide-up', key: index },
+                            .map(function (mdoc, index) { return (React.createElement("tr", { className: 'animated slide-up', key: index, onClick: onRowClick ? function () { return onRowClick(mdoc); } : undefined },
                             data.fields.map(function (fdoc, findex) {
                                 var _a;
                                 return (React.createElement(Data_1.default, { key: fdoc, funcss: data.funcss ? ((_a = data === null || data === void 0 ? void 0 : data.funcss) === null || _a === void 0 ? void 0 : _a[findex]) || '' : '' }, getNestedValue(mdoc, fdoc)));

package/ui/video/Video.js

@@ -62,12 +62,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = Video;
 var react_1 = __importStar(require("react"));
 var pi_1 = require("react-icons/pi");
-var io5_1 = require("react-icons/io5");
 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");
 function Video(_a) {
@@ -266,38 +266,40 @@ function Video(_a) {
         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("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: '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 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("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(pi_1.PiPause, { size: 20 }) : react_1.default.createElement(pi_1.PiPlay, { size: 20 }))),
-            react_1.default.createElement(RowFlex_1.default, { funcss: 'animated slide-up', gap: 1, justify: "center" },
+                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, onClick: handleRewind },
-                            react_1.default.createElement(pi_1.PiRewind, null)),
-                        react_1.default.createElement(Tip_1.default, { tip: "top", animation: "ScaleUp", duration: 0.5, content: "10 sec Back" })),
+                        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, onClick: handleForward },
-                            react_1.default.createElement(pi_1.PiFastForward, null)),
-                        react_1.default.createElement(Tip_1.default, { tip: "top", animation: "ScaleUp", duration: 0.5, content: "10 sec Forward" })),
+                        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 },
-                                react_1.default.createElement(pi_1.PiSpeakerLow, 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(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(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, onClick: handleToggleFullScreen },
+                        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: "top", animation: "ScaleUp", duration: 0.5, content: "Expand" })),
+                        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, onClick: function () { return window.open(src || '', '_blank'); } },
-                            react_1.default.createElement(io5_1.IoCloudDownloadOutline, null)),
-                        react_1.default.createElement(Tip_1.default, { tip: "top", animation: "ScaleUp", duration: 0.5, content: "Download" })))))));
+                        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" })))))));
 }