funuicss 3.7.8 → 3.7.10

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.8",
+  "version": "3.7.10",
   "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/theme/theme.d.ts

@@ -30,7 +30,7 @@ interface ProjectData {
 }
 interface ThemeProviderProps {
     theme: ThemeName;
-    projectId: string;
+    projectId?: string;
     funcss?: string;
     minHeight?: string;
     children: ReactNode;

package/ui/theme/theme.js

@@ -117,7 +117,7 @@ var validateOriginAccess = function (projectId) { return __awaiter(void 0, void
         switch (_a.label) {
             case 0:
                 if (!projectId) {
-                    console.error('❌ No project ID provided');
+                    console.error('❌ No project ID provided for origin validation');
                     return [2 /*return*/, false];
                 }
                 currentOrigin = getCurrentOrigin();
@@ -179,7 +179,7 @@ var loadLocalTheme = function () { return __awaiter(void 0, void 0, void 0, func
             case 3: return [3 /*break*/, 5];
             case 4:
                 error_2 = _a.sent();
-                console.log('No local theme file found');
+                console.log('ℹ️ No local theme file found');
                 return [3 /*break*/, 5];
             case 5: return [2 /*return*/, null];
         }
@@ -193,28 +193,34 @@ var loadThemeFromCDN = function (projectId) { return __awaiter(void 0, void 0, v
     return __generator(this, function (_a) {
         switch (_a.label) {
             case 0:
-                _a.trys.push([0, 5, , 6]);
+                if (!projectId) {
+                    console.error('❌ No project ID provided for CDN loading');
+                    return [2 /*return*/, null];
+                }
+                _a.label = 1;
+            case 1:
+                _a.trys.push([1, 6, , 7]);
                 publicUrl = "https://firebasestorage.googleapis.com/v0/b/funui-4bcd1.firebasestorage.app/o/themes%2F".concat(projectId, ".json?alt=media");
                 return [4 /*yield*/, fetch(publicUrl, {
                         cache: 'no-cache',
                     })];
-            case 1:
+            case 2:
                 response = _a.sent();
-                if (!response.ok) return [3 /*break*/, 3];
+                if (!response.ok) return [3 /*break*/, 4];
                 return [4 /*yield*/, response.json()];
-            case 2:
+            case 3:
                 data = _a.sent();
                 console.log('✅ Loaded theme from Firebase Storage CDN');
                 return [2 /*return*/, data];
-            case 3:
-                console.error('Firebase Storage fetch failed:', response.status, response.statusText);
-                _a.label = 4;
-            case 4: return [3 /*break*/, 6];
-            case 5:
+            case 4:
+                console.error('❌ Firebase Storage fetch failed:', response.status, response.statusText);
+                _a.label = 5;
+            case 5: return [3 /*break*/, 7];
+            case 6:
                 error_3 = _a.sent();
-                console.error('Error loading from Firebase Storage:', error_3);
-                return [3 /*break*/, 6];
-            case 6: return [2 /*return*/, null];
+                console.error('❌ Error loading from Firebase Storage:', error_3);
+                return [3 /*break*/, 7];
+            case 7: return [2 /*return*/, null];
         }
     });
 }); };
@@ -306,99 +312,124 @@ var ThemeProvider = function (_a) {
             });
         }
     }, [theme]);
-    /* ---------------------- CDN Theme Sync with Origin Validation ----------------------- */
+    /* ---------------------- Theme Loading Logic ----------------------- */
     (0, react_1.useEffect)(function () {
         if (typeof window === 'undefined') {
             setIsLoading(false);
             setIsInitialLoad(false);
             return;
         }
-        if (!projectId) {
-            console.error('❌ ThemeProvider: No projectId provided');
-            setError('Project ID is required');
-            setIsLoading(false);
-            setIsInitialLoad(false);
-            return;
-        }
         var root = document.documentElement;
         var pollTimer;
-        var syncTheme = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var hasAccess, localTheme, localVersion, cdnTheme, cdnVersion, err_1;
+        var loadTheme = function () { return __awaiter(void 0, void 0, void 0, function () {
+            var finalTheme, finalVersion, localTheme, localVersion, hasAccess, cdnTheme, cdnVersion, err_1;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
-                        _a.trys.push([0, 4, 5, 6]);
-                        console.log('🔄 Starting theme sync with origin validation...');
-                        return [4 /*yield*/, validateOriginAccess(projectId)];
-                    case 1:
-                        hasAccess = _a.sent();
-                        if (!hasAccess) {
-                            setError('Access denied: This domain is not authorized to use this theme');
-                            setIsLoading(false);
-                            setIsInitialLoad(false);
-                            return [2 /*return*/];
-                        }
+                        _a.trys.push([0, 8, 9, 10]);
+                        console.log('🔄 Starting theme loading process...');
+                        finalTheme = null;
+                        finalVersion = null;
                         return [4 /*yield*/, loadLocalTheme()];
-                    case 2:
+                    case 1:
                         localTheme = _a.sent();
                         localVersion = (localTheme === null || localTheme === void 0 ? void 0 : localTheme.version) || 0;
+                        if (!projectId) return [3 /*break*/, 6];
+                        console.log('🔑 Project ID provided, attempting CDN load with origin validation...');
+                        return [4 /*yield*/, validateOriginAccess(projectId)];
+                    case 2:
+                        hasAccess = _a.sent();
+                        if (!hasAccess) return [3 /*break*/, 4];
                         return [4 /*yield*/, loadThemeFromCDN(projectId)];
                     case 3:
                         cdnTheme = _a.sent();
                         cdnVersion = (cdnTheme === null || cdnTheme === void 0 ? void 0 : cdnTheme.version) || 0;
                         if (cdnTheme) {
-                            // Compare versions and use the newer one
+                            // CDN theme available - use it
+                            finalTheme = cdnTheme;
+                            finalVersion = cdnVersion;
                             if (cdnVersion !== localVersion) {
                                 console.log("\uD83D\uDD04 Version mismatch: Local(".concat(localVersion, ") vs CDN(").concat(cdnVersion, ")"));
                                 console.log('ℹ️ Using CDN version. Please update your local funui.json file manually.');
                             }
-                            // Always use CDN theme if available
-                            if (!currentVersion || cdnVersion !== currentVersion) {
-                                applyThemeData(cdnTheme, root);
-                                setCurrentVersion(cdnVersion);
-                                console.log('✅ Theme loaded from CDN');
-                            }
-                            else {
-                                console.log('✓ Theme up to date');
-                            }
-                            setError(null);
+                            console.log('✅ Theme loaded from CDN');
                         }
                         else if (localTheme) {
-                            // CDN not available but we have local
-                            console.log('⚠️ Using local theme (CDN unavailable)');
-                            applyThemeData(localTheme, root);
-                            setCurrentVersion(localVersion);
-                            setError(null);
+                            // CDN not available but we have local theme
+                            console.log('⚠️ CDN unavailable, using local theme');
+                            finalTheme = localTheme;
+                            finalVersion = localVersion;
                         }
                         else {
                             // No theme available anywhere
-                            console.warn('⚠️ No theme found');
+                            console.warn('⚠️ No theme found (CDN unavailable and no local theme)');
                             setError('Theme not found');
                         }
-                        return [3 /*break*/, 6];
+                        return [3 /*break*/, 5];
                     case 4:
+                        // Origin validation failed
+                        if (localTheme) {
+                            console.log('⚠️ Origin validation failed, using local theme');
+                            finalTheme = localTheme;
+                            finalVersion = localVersion;
+                        }
+                        else {
+                            console.error('❌ Origin validation failed and no local theme available');
+                            setError('Access denied and no local theme available');
+                        }
+                        _a.label = 5;
+                    case 5: return [3 /*break*/, 7];
+                    case 6:
+                        // No project ID provided - only use local theme
+                        console.log('ℹ️ No project ID provided, using local theme only');
+                        if (localTheme) {
+                            finalTheme = localTheme;
+                            finalVersion = localVersion;
+                            console.log('✅ Theme loaded from local file');
+                        }
+                        else {
+                            console.log('ℹ️ No local theme file found - using base theme only');
+                            // No error here - it's valid to use only base theme
+                        }
+                        _a.label = 7;
+                    case 7:
+                        // Apply the theme if we have one
+                        if (finalTheme && (!currentVersion || finalVersion !== currentVersion)) {
+                            applyThemeData(finalTheme, root);
+                            setCurrentVersion(finalVersion);
+                            setError(null);
+                        }
+                        else if (finalTheme) {
+                            console.log('✓ Theme up to date');
+                        }
+                        return [3 /*break*/, 10];
+                    case 8:
                         err_1 = _a.sent();
-                        console.error('❌ Error syncing theme:', err_1);
-                        setError('Failed to sync theme');
-                        return [3 /*break*/, 6];
-                    case 5:
+                        console.error('❌ Error loading theme:', err_1);
+                        setError('Failed to load theme');
+                        return [3 /*break*/, 10];
+                    case 9:
                         setIsLoading(false);
                         setIsInitialLoad(false);
                         return [7 /*endfinally*/];
-                    case 6: return [2 /*return*/];
+                    case 10: return [2 /*return*/];
                 }
             });
         }); };
-        // Initial sync
-        syncTheme();
-        // Poll for updates every 5 minutes
-        pollTimer = setInterval(function () {
-            syncTheme();
-        }, 5 * 60 * 1000);
+        // Initial load
+        loadTheme();
+        // Only poll for updates if we have a project ID
+        if (projectId) {
+            pollTimer = setInterval(function () {
+                loadTheme();
+            }, 5 * 60 * 1000);
+        }
         return function () {
-            clearInterval(pollTimer);
+            if (pollTimer) {
+                clearInterval(pollTimer);
+            }
         };
-    }, [projectId, currentVersion]);
+    }, [projectId, currentVersion, theme]);
     var applyThemeData = function (data, root) {
         var _a;
         var themeConfig = (_a = data.theme_config) !== null && _a !== void 0 ? _a : {};
@@ -531,9 +562,6 @@ var getAssetInfo = function (name) {
     };
 };
 exports.getAssetInfo = getAssetInfo;
-/* -------------------------------------------------------------------------- */
-/*                              ASSETS HOOKS                                  */
-/* -------------------------------------------------------------------------- */
 // Hook to access all assets
 var useAssets = function () {
     var projectData = (0, exports.useTheme)().projectData;