funuicss 2.6.1 → 2.6.3

package/css/fun.css

@@ -76,7 +76,11 @@
   --lighter: #fafafa ;
   --hoverable: #fcfcfc ;
   --muted: #78716c;
-  --dark: #71717a;
+  --dark: #121212;
+  --cardBg: var(--raiseOpaque);
+  --card: 8px 8px 16px #d1d9e6,  /* soft shadow */
+           -8px -8px 16px #ffffff; /* soft highlight */
+  --linkColor:rgb(58, 58, 58);
 
     /* Primary Colors */
     --primary: #6366f1;
@@ -179,26 +183,10 @@
   --black: #000000;
   --lightText: #FFFFFF;
   --darkText: #27272a;
-
-  --bd-color:#1e1e1e;
-  --bd-theme:#fff;
-  --dark: #1e1e1e;
-  --lightDark: #4e4e4e66;
-  --success: #48c78e;
-  --successLight:var(--success200);
-  --warning: #dc8001cc;
-  --warningLight:#fff4e5 ;
-  --danger: #dc1101cc;
-  --dangerLight:#fdeded;
-  --info: #5fbbe2;
-  --infoLight:#e5f6fd;
   --light: var(--lighter);
-  --deepLight: #2fa2b1;
   --gradient:linear-gradient(90deg, var(--secondary) 0%, var(--primary) 100%);
   --gradientColors:90deg, var(--secondary) 0%, var(--primary) 100%;
-  --linkColor:rgb(124, 124, 124);
-
-  /* Body and font */
+  --danger:var(--error);
   --bd-font-weight: 400;
   --bdfontSize: 1rem;
   --minifiedFontSize:0.88rem;
@@ -226,7 +214,6 @@
   --inputPadding:0.5rem 0;
   --inputRoundedPadding:0.5rem 1rem;
   --shadowMedium:0 0.8rem 2rem 0 rgba(3, 3, 3, 0.1);
-  --card:rgba(0, 0, 0, 0.05) 0px 4px 16px, rgba(0, 0, 0, 0.05) 0px 8px 32px;
   --raised:0 0.1rem 0.2rem 0rem rgba(0, 0, 0, 0.3);
   /* medium Screen body */
 
@@ -234,13 +221,6 @@
 }
 
 
-/* DarkTheme */
-:root{
-  --inputOutline:var(--primary);
-  --lightThemeDark: var(--dark)
-}
-
-
 /* For WebKit browsers (Chrome, Edge, Brave, Safari) */
 ::-webkit-scrollbar {
   width: 10px;
@@ -272,7 +252,40 @@
 *{
   font-family: var(--font-font);
   scroll-behavior: smooth;
-   
+  transition: 0.3s ease-in-out all !important;
+}
+
+.card, 
+.input,
+.navigation-bar , 
+.modal , 
+.modal-content,
+.button,
+.text,
+.div,
+.table,
+.table-head,
+.table-body,
+.table-row,
+.table-cell,
+.list,
+.list-item,
+.breadcrumb,
+.breadcrumb-link,
+.breadcrumb-item,
+.loader,
+.grid,
+.col,
+.container,
+.step-container,
+.step,
+.step-header,
+.step-line,
+.dropdown,
+.dropdown-menu,
+.dropdown-item,
+.progress-bar{
+  color: var(--text-color) ;
 }
 
 /* normalise css */
@@ -316,6 +329,7 @@ Link {
   background: transparent;
   transition: 0.3s;
   color: var(--linkColor);
+  font-weight: 500;
 }
 a:hover {
   color: var(--linkHover);
@@ -1832,6 +1846,7 @@ button:disabled {
 /* Typography */
 .baseColor, .text-base{
   color: var(--text-color) !important;}
+
 body {
   font-size: var(--text-base);
   line-height: 1.5rem;
@@ -2389,13 +2404,8 @@ h6, .h6 {
   border-top-right-radius: 0 !important;
   border-bottom-right-radius: 0 !important;
 }
-/* avatar */
-.avatar {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 50%;
-}
+
+
 /* cursor */
 .cursor-pointer {
   cursor: pointer;
@@ -2585,11 +2595,11 @@ h6, .h6 {
 
 /*cards*/
 .card {
-  box-shadow: var(--card);
-  transition: 0.3s;
-  background-color: var(--raiseThemes);
-  backdrop-filter: var(--raiseBackdrop) ;
-  color: var(--text-color);
+background: var(--cardBg) !important;
+box-shadow: var(--card);
+transition: 0.3s;
+backdrop-filter: var(--raiseBackdrop) ;
+color: var(--text-color);
 }
 .card.xl{
   box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px !important;
@@ -2677,6 +2687,7 @@ h6, .h6 {
 
 .linkWrapper {
   display: none;
+  animation: SlideRight 0.2s linear;
 }
 
 .sidebar-trigger {
@@ -2686,6 +2697,149 @@ h6, .h6 {
 
 
 
+/* video */
+.video_player{
+  border-radius: 1rem;
+  width: 100%;
+}
+.video_container{
+  position: relative;
+  width: fit-content;
+  height: fit-content;
+  padding: 0;
+  border-radius: 1rem;
+  color: var(--text-color);
+}
+.video_controls{
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-end;
+  padding: 1rem;
+  display: none;
+  color: rgb(218, 217, 217);
+  border-radius: 1rem;
+}
+
+.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 ;
+}
+
+.video_controls.hide_controls{
+  display: none !important;
+}
+
+.video_container:hover .video_controls{
+  display: flex;
+}
+
+.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;
+}
+
+.center-play-icon{
+   position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 2;
+}
+ .play-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 60px;
+      height: 60px;
+      border: 3px solid var(--primary300);
+      border-radius: 50%;
+      background: var(--primary);
+      color: var(--white);
+      transition: transform 0.3s ease;
+      animation: pulse 2s infinite;
+      cursor: pointer;
+
+    }
+
+    .play-button:hover {
+      transform: scale(1.1);
+      background: var(--raiseThemes);
+      backdrop-filter: var(--raiseBackdrop) !important;
+      border-color: var(--borderColor);
+      color: var(--text-color);
+    }
+
+    @keyframes pulse {
+      0% {
+        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.5);
+      }
+      70% {
+        box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
+      }
+      100% {
+        box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
+      }
+    }
+
+.styled-slider {
+  appearance: none;
+  width: 100%;
+  height: 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%
+  );
+  border-radius: 3px;
+  outline: none;
+  transition: background 0.3s ease;
+  position: relative;
+}
+
+/* Thumb hidden by default */
+.styled-slider::-webkit-slider-thumb {
+  appearance: none;
+  height: 14px;
+  width: 14px;
+  border-radius: 50%;
+  background: var(--primary);
+  border: none;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  margin-top: -4px;
+}
+
+
+.styled-slider::-moz-range-thumb {
+  height: 14px;
+  width: 14px;
+  border-radius: 50%;
+  background: var(--primary);
+  border: none;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+
+
 
 /* Mobile layout when menu is open */
 .navbar-mobile-open {
@@ -2992,6 +3146,7 @@ h6, .h6 {
 
 .alert-container > .alert{
   box-shadow: var(--card);
+  background: var(--cardBg);
 }
 .alert-container
 {
@@ -3031,35 +3186,6 @@ h6, .h6 {
   justify-content: center;
 }
 
-.alert.success {
-  background-color: var(--successLight) !important;
- 
-}
-.alert.info {
-  background-color: var(--infoLight) !important;
-}
-.alert.warning {
-  background-color: var(--warningLight) !important;
-}
-.alert.danger {
-  background-color: var(--dangerLight) !important;
-}
-.alert.success .alert-text,
-.alert-icon {
-  color: rgb(30, 70, 32) !important;
-}
-.alert.info .alert-text,
-.alert-icon {
-  color: rgb(1, 67, 97) !important;
-}
-.alert.warning .alert-text,
-.alert-icon {
-  color: rgb(102, 60, 0) !important;
-}
-.alert.danger .alert-text,
-.alert-icon {
-  color: rgb(95, 33, 32) !important;
-}
 
 /*border radius and borders*/
 .round, .circle {
@@ -3144,6 +3270,7 @@ h6, .h6 {
   border-radius: 50%;
 }
 
+
 .avatar {
   display: flex;
   align-items: center;
@@ -3151,6 +3278,9 @@ h6, .h6 {
   border-radius: 50%;
   overflow: hidden;
   font-weight: bold;
+  background-color: var(--raiseOpaque);
+ backdrop-filter: var(--raiseBackdrop);
+ color: var(--text-color);
 }
 
 
@@ -3174,10 +3304,11 @@ h6, .h6 {
   transition: 0.5s;
   z-index: 1;
   width: 100%;
+  min-width: max-content !important;
   overflow: hidden;
   border-radius: 0.5rem;
-  background-color: var(--raiseThemes);
-  backdrop-filter: var(--raiseBackdrop) ;
+  background-color: var(--raiseOpaque) !important;
+  backdrop-filter: var(--raiseBackdrop) !important ;
   display: none;
 }
 
@@ -3709,6 +3840,91 @@ th {
   }
 }
 
+/* Base Animation Setup */
+.animated {
+  animation-duration: 0.4s;
+  animation-fill-mode: both;
+  animation-timing-function: ease;
+  will-change: transform, opacity;
+}
+
+/* Slide Animations */
+.slide-up {
+  animation-name: slideUp;
+}
+
+.slide-down {
+  animation-name: slideDown;
+}
+
+.slide-left {
+  animation-name: slideLeft;
+}
+
+.slide-right {
+  animation-name: slideRight;
+}
+
+/* Fade Animation */
+.fade-in {
+  animation-name: fadeIn;
+}
+
+/* Keyframes */
+@keyframes slideUp {
+  from {
+    transform: translateY(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideDown {
+  from {
+    transform: translateY(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideLeft {
+  from {
+    transform: translateX(20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes slideRight {
+  from {
+    transform: translateX(-20px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+
 /*icons*/
 .icon.size-smaller {
   font-size: 0.5em;
@@ -3803,7 +4019,7 @@ th {
   gap: 1rem;
 }
 .modal-content {
-  background-color: var(--raiseOpaque);
+  background: var(--cardBg);
   backdrop-filter: blur(20rem) ;
   max-width: 700px;
   padding: 1rem 1.5rem;

package/hooks/useHls.d.ts

@@ -0,0 +1,8 @@
+interface UseHlsOptions {
+    videoRef: React.RefObject<HTMLVideoElement>;
+    src: string;
+    autoPlay?: boolean;
+    onLoaded?: () => void;
+}
+export declare function useHls({ videoRef, src, autoPlay, onLoaded }: UseHlsOptions): void;
+export {};

package/hooks/useHls.js

@@ -0,0 +1,105 @@
+"use strict";
+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 };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useHls = useHls;
+// hooks/useHls.ts
+var react_1 = require("react");
+var hls_js_1 = __importDefault(require("hls.js"));
+function useHls(_a) {
+    var _this = this;
+    var videoRef = _a.videoRef, src = _a.src, autoPlay = _a.autoPlay, onLoaded = _a.onLoaded;
+    (0, react_1.useEffect)(function () {
+        var video = videoRef.current;
+        if (!video || !src)
+            return;
+        var hls = null;
+        var isHls = src.endsWith('.m3u8');
+        var setup = function () { return __awaiter(_this, void 0, void 0, function () {
+            return __generator(this, function (_a) {
+                if (isHls && hls_js_1.default.isSupported()) {
+                    hls = new hls_js_1.default();
+                    hls.loadSource(src);
+                    hls.attachMedia(video);
+                    hls.on(hls_js_1.default.Events.MANIFEST_PARSED, function () {
+                        onLoaded === null || onLoaded === void 0 ? void 0 : onLoaded();
+                        if (autoPlay) {
+                            video
+                                .play()
+                                .then(function () { return console.log('HLS auto-play success'); })
+                                .catch(function (err) { return console.warn('HLS auto-play error:', err); });
+                        }
+                    });
+                    hls.on(hls_js_1.default.Events.ERROR, function (event, data) {
+                        console.error('HLS.js error:', data);
+                    });
+                }
+                else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+                    video.src = src;
+                    video.onloadedmetadata = function () {
+                        onLoaded === null || onLoaded === void 0 ? void 0 : onLoaded();
+                        if (autoPlay) {
+                            video
+                                .play()
+                                .then(function () { return console.log('Native HLS auto-play success'); })
+                                .catch(function (err) { return console.warn('Native HLS auto-play error:', err); });
+                        }
+                    };
+                }
+                else {
+                    video.src = src;
+                    onLoaded === null || onLoaded === void 0 ? void 0 : onLoaded();
+                    if (autoPlay) {
+                        video
+                            .play()
+                            .then(function () { return console.log('MP4 auto-play success'); })
+                            .catch(function (err) { return console.warn('MP4 auto-play error:', err); });
+                    }
+                }
+                return [2 /*return*/];
+            });
+        }); };
+        setup();
+        return function () {
+            if (hls)
+                hls.destroy();
+        };
+    }, [videoRef, src, autoPlay, onLoaded]);
+}

package/hooks/useHls.tsx

@@ -0,0 +1,69 @@
+// hooks/useHls.ts
+import { useEffect } from 'react';
+import Hls from 'hls.js';
+
+interface UseHlsOptions {
+  videoRef: React.RefObject<HTMLVideoElement>;
+  src: string;
+  autoPlay?: boolean;
+  onLoaded?: () => void;
+}
+
+export function useHls({ videoRef, src, autoPlay, onLoaded }: UseHlsOptions) {
+  useEffect(() => {
+    const video = videoRef.current;
+    if (!video || !src) return;
+
+    let hls: Hls | null = null;
+    const isHls = src.endsWith('.m3u8');
+
+    const setup = async () => {
+      if (isHls && Hls.isSupported()) {
+        hls = new Hls();
+        hls.loadSource(src);
+        hls.attachMedia(video);
+
+        hls.on(Hls.Events.MANIFEST_PARSED, () => {
+          onLoaded?.();
+          if (autoPlay) {
+            video
+              .play()
+              .then(() => console.log('HLS auto-play success'))
+              .catch((err) => console.warn('HLS auto-play error:', err));
+          }
+        });
+
+        hls.on(Hls.Events.ERROR, (event, data) => {
+          console.error('HLS.js error:', data);
+        });
+      } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = src;
+
+        video.onloadedmetadata = () => {
+          onLoaded?.();
+          if (autoPlay) {
+            video
+              .play()
+              .then(() => console.log('Native HLS auto-play success'))
+              .catch((err) => console.warn('Native HLS auto-play error:', err));
+          }
+        };
+      } else {
+        video.src = src;
+        onLoaded?.();
+        if (autoPlay) {
+          video
+            .play()
+            .then(() => console.log('MP4 auto-play success'))
+            .catch((err) => console.warn('MP4 auto-play error:', err));
+        }
+      }
+    };
+
+    setup();
+
+    return () => {
+      if (hls) hls.destroy();
+    };
+  }, [videoRef, src, autoPlay, onLoaded]);
+}

package/index.d.ts

@@ -40,3 +40,4 @@ export { default as Bars } from "./ui/chart/Bar";
 export { default as Lines } from "./ui/chart/Line";
 export { default as ChartPie } from "./ui/chart/Pie";
 export { default as SideBar } from "./ui/sidebar/SideBar";
+export { default as Video } from "./ui/video/Video";

package/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SideBar = exports.ChartPie = exports.Lines = exports.Bars = exports.FullCenteredPage = exports.CircleGroup = exports.Circle = exports.Hr = exports.Section = exports.RowFlex = exports.Tip = exports.AppBar = exports.ToolTip = exports.Notification = exports.FunLoader = exports.ProgressBar = exports.DropMenu = exports.DropItem = exports.Dropdown = exports.DropDown = exports.DropUp = exports.UnAuthorized = exports.NotFound = exports.StepLine = exports.StepHeader = exports.Step = exports.StepContainer = exports.Div = exports.Text = exports.List = exports.Table = exports.Modal = exports.Loader = exports.Input = exports.Col = exports.Grid = exports.Container = exports.BreadCrumb = exports.Card = exports.Button = exports.ThemeProvider = exports.Alert = void 0;
+exports.Video = exports.SideBar = exports.ChartPie = exports.Lines = exports.Bars = exports.FullCenteredPage = exports.CircleGroup = exports.Circle = exports.Hr = exports.Section = exports.RowFlex = exports.Tip = exports.AppBar = exports.ToolTip = exports.Notification = exports.FunLoader = exports.ProgressBar = exports.DropMenu = exports.DropItem = exports.Dropdown = exports.DropDown = exports.DropUp = exports.UnAuthorized = exports.NotFound = exports.StepLine = exports.StepHeader = exports.Step = exports.StepContainer = exports.Div = exports.Text = exports.List = exports.Table = exports.Modal = exports.Loader = exports.Input = exports.Col = exports.Grid = exports.Container = exports.BreadCrumb = exports.Card = exports.Button = exports.ThemeProvider = exports.Alert = void 0;
 var Alert_1 = require("./ui/alert/Alert");
 Object.defineProperty(exports, "Alert", { enumerable: true, get: function () { return __importDefault(Alert_1).default; } });
 var theme_1 = require("./ui/theme/theme");
@@ -88,3 +88,5 @@ var Pie_1 = require("./ui/chart/Pie");
 Object.defineProperty(exports, "ChartPie", { enumerable: true, get: function () { return __importDefault(Pie_1).default; } });
 var SideBar_1 = require("./ui/sidebar/SideBar");
 Object.defineProperty(exports, "SideBar", { enumerable: true, get: function () { return __importDefault(SideBar_1).default; } });
+var Video_1 = require("./ui/video/Video");
+Object.defineProperty(exports, "Video", { enumerable: true, get: function () { return __importDefault(Video_1).default; } });

package/index.tsx

@@ -39,4 +39,5 @@ export { default as FullCenteredPage } from "./ui/specials/FullCenteredPage"
 export { default as Bars } from "./ui/chart/Bar"
 export { default as Lines } from "./ui/chart/Line"
 export { default as ChartPie } from "./ui/chart/Pie"
-export { default as SideBar } from "./ui/sidebar/SideBar"
+export { default as SideBar } from "./ui/sidebar/SideBar"
+export { default as Video } from "./ui/video/Video"