@zezosoft/react-player 0.0.6 → 0.0.8

package/dist/VideoPlayer/MediaControls/BottomControls.d.ts

@@ -0,0 +1,5 @@
+import React from "react";
+import "../_components/TimeLine/time-line.css";
+import { IControlsBottomProps } from "../../types";
+declare const BottomControls: React.FC<IControlsBottomProps>;
+export default BottomControls;

package/dist/VideoPlayer/MediaControls/ControlsHeader.d.ts

@@ -0,0 +1,5 @@
+import * as React from "react";
+import { IControlsHeaderProps } from "../../types";
+import "../_components/styles/video-controls.css";
+declare const ControlsHeader: React.FC<IControlsHeaderProps>;
+export default ControlsHeader;

package/dist/VideoPlayer/MediaControls/MiddleControls.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+declare const MiddleControls: React.FC;
+export default MiddleControls;

package/dist/VideoPlayer/MediaControls/VideoPlayerControls.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { IPlayerConfig } from "../../types";
+declare const VideoPlayerControls: React.FC<IPlayerConfig>;
+export default VideoPlayerControls;

package/dist/VideoPlayer/VideoPlayer.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { VideoPlayerProps } from "./types/VideoPlayerTypes";
-import "../../src/index.css";
+import "../index.css";
 import "./styles/subtitles.css";
 declare const VideoPlayer: React.FC<VideoPlayerProps>;
 export default VideoPlayer;

package/dist/VideoPlayer/hooks/useVideoEvents.d.ts

@@ -3,4 +3,8 @@ export declare const useVideoEvents: () => {
     onSeeked: (e: React.SyntheticEvent<HTMLVideoElement>) => void;
     onTimeUpdate: (e: React.SyntheticEvent<HTMLVideoElement>) => void;
     onLoadedMetadata: (e: React.SyntheticEvent<HTMLVideoElement>) => void;
+    onProgress: (e: React.SyntheticEvent<HTMLVideoElement>) => void;
+    onPlay: () => void;
+    onPause: () => void;
+    onEnded: (e: unknown) => void;
 };

package/dist/VideoPlayer/hooks/useVideoSource.d.ts

@@ -1 +1,14 @@
-export declare const useVideoSource: (trackSrc: string, type?: "hls" | "mp4" | "other" | "youtube" | undefined) => void;
+/**
+ * Video Source Hook
+ *
+ * Manages video source loading and streaming technology detection
+ * Supports HLS.js, DASH.js, and native HTML5 video
+ *
+ * Features:
+ * - Automatic stream type detection
+ * - HLS.js fallback for older browsers
+ * - DASH.js support with proper initialization
+ * - Quality level extraction for all stream types
+ * - Error handling and cleanup
+ */
+export declare const useVideoSource: (trackSrc: string, type?: "hls" | "mp4" | "dash" | "other" | "youtube" | undefined) => void;

package/dist/VideoPlayer/types/VideoPlayerTypes.d.ts

@@ -3,6 +3,10 @@ import { IOnWatchTimeUpdated } from "../../types";
 import { SubtitleStyleConfig } from "../hooks/useSubtitleStyling";
 export interface VideoPlayerProps {
     trackSrc: string;
+    showControls?: boolean;
+    isMute?: boolean;
+    onEnded?: (e: React.SyntheticEvent<HTMLVideoElement>) => void;
+    onError?: (e?: React.SyntheticEvent<HTMLVideoElement, Event>) => void;
     trackTitle?: string;
     trackPoster?: string;
     isTrailer?: boolean;

package/dist/VideoPlayer/utils/index.d.ts

@@ -27,3 +27,4 @@ export declare const millisecondsToSeconds: (milliseconds: number) => number;
  * @returns
  */
 export declare const getExtensionFromUrl: (url: string) => string | undefined;
+export { QualityManager } from './qualityManager';

package/dist/VideoPlayer/utils/qualityManager.d.ts

@@ -0,0 +1,78 @@
+import Hls from 'hls.js';
+import * as dashjs from 'dashjs';
+export type StreamType = 'hls' | 'dash' | 'mp4' | 'other';
+/**
+ * Video Quality Management Utility
+ * Provides a unified interface for quality switching across HLS.js and DASH.js
+ *
+ * This utility follows OTT-grade best practices for smooth quality switching:
+ * - Immediate quality changes without playback interruption
+ * - Proper ABR (Adaptive Bitrate) control
+ * - Error handling and fallback mechanisms
+ * - Support for both manual and auto quality modes
+ */
+export declare class QualityManager {
+    /**
+     * Set video quality for HLS streams with OTT-grade smoothness
+     *
+     * Best practices implemented:
+     * 1. Use currentLevel for immediate quality change
+     * 2. Use autoLevelCapping to prevent ABR from switching back
+     * 3. Use nextLevel to ensure next segment uses selected quality
+     * 4. Handle edge cases and errors gracefully
+     *
+     * @param hlsInstance HLS.js instance (null for native HLS, undefined when not available)
+     * @param levelIndex Quality level index (-1 for auto)
+     */
+    static setHlsQuality(hlsInstance: Hls | null | undefined, levelIndex: number): void;
+    /**
+     * Set video quality for DASH streams with OTT-grade smoothness
+     *
+     * Best practices implemented:
+     * 1. Use autoSwitchBitrate settings to control ABR behavior
+     * 2. Use setRepresentationForTypeById for immediate quality change
+     * 3. Handle representation discovery and selection properly
+     * 4. Provide visual feedback through console logs
+     *
+     * @param dashInstance DASH.js instance
+     * @param qualityId Quality level ID (undefined/null for auto)
+     */
+    static setDashQuality(dashInstance: dashjs.MediaPlayerClass, qualityId: string | null | undefined): void;
+    /**
+     * Get available quality levels for HLS with proper error handling
+     *
+     * @param hlsInstance HLS.js instance
+     * @returns Array of quality level objects
+     */
+    static getHlsQualityLevels(hlsInstance: Hls): Array<{
+        height: number;
+        bitrate?: number;
+        originalIndex: number;
+    }>;
+    /**
+     * Get available quality levels for DASH with proper error handling
+     *
+     * @param dashInstance DASH.js instance
+     * @returns Array of quality level objects
+     */
+    static getDashQualityLevels(dashInstance: dashjs.MediaPlayerClass): Array<{
+        height: number;
+        bitrate?: number;
+        id: string;
+    }>;
+    /**
+     * Unified quality setting function that works with both HLS and DASH
+     * Provides a single interface for quality management across streaming technologies
+     *
+     * @param streamType Type of stream (hls, dash, etc.)
+     * @param qualityIdentifier Quality level identifier (index for HLS, ID for DASH)
+     */
+    static setQuality(streamType: StreamType, qualityIdentifier: string | number): void;
+    /**
+     * Enable auto quality switching for the current stream type
+     *
+     * @param streamType Type of stream (hls, dash, etc.)
+     */
+    static setAutoQuality(streamType: StreamType): void;
+}
+export default QualityManager;

package/dist/components/ui/tooltip.d.ts

@@ -1,7 +1,7 @@
 import React from "react";
 interface TooltipProps {
     children: React.ReactNode;
-    title: string;
+    title: React.ReactNode;
     position?: "top" | "bottom" | "left" | "right";
     className?: string;
 }

package/dist/index.js

@@ -3,9 +3,10 @@ import React__default, { memo, useCallback, useEffect, useRef, useState } from '
 import { create } from 'zustand';
 import { IoVolumeMuteOutline, IoVolumeHighOutline } from 'react-icons/io5';
 import { IoMdClose } from 'react-icons/io';
-import { Settings as Settings$1, ChevronRight, Check, Loader } from 'lucide-react';
-import { FaGooglePlay } from 'react-icons/fa';
+import { Settings as Settings$1, ChevronRight, Check, Loader, ArrowRight } from 'lucide-react';
+import screenfull from 'screenfull';
 import Hls from 'hls.js';
+import * as dashjs from 'dashjs';
 
 function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
@@ -34,7 +35,7 @@ function styleInject(css, ref) {
   }
 }
 
-var css_248z$3 = "/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-green-500: oklch(72.3% 0.219 149.579);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-purple-500: oklch(62.7% 0.265 303.9);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-900: oklch(21% 0.034 264.665);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --text-3xl: 1.875rem;\n    --text-3xl--line-height: calc(2.25 / 1.875);\n    --font-weight-normal: 400;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-md: 0.375rem;\n    --radius-lg: 0.5rem;\n    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n    --animate-spin: spin 1s linear infinite;\n    --blur-sm: 8px;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .visible {\n    visibility: visible;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .relative {\n    position: relative;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .-top-2 {\n    top: calc(var(--spacing) * -2);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .top-full {\n    top: 100%;\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .right-32 {\n    right: calc(var(--spacing) * 32);\n  }\n  .right-full {\n    right: 100%;\n  }\n  .bottom-36 {\n    bottom: calc(var(--spacing) * 36);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-32 {\n    left: calc(var(--spacing) * 32);\n  }\n  .left-full {\n    left: 100%;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .z-\\[-1\\] {\n    z-index: -1;\n  }\n  .mx-2 {\n    margin-inline: calc(var(--spacing) * 2);\n  }\n  .mx-auto {\n    margin-inline: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n  .mr-2 {\n    margin-right: calc(var(--spacing) * 2);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .ml-2 {\n    margin-left: calc(var(--spacing) * 2);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .h-3 {\n    height: calc(var(--spacing) * 3);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n  .h-10 {\n    height: calc(var(--spacing) * 10);\n  }\n  .h-24 {\n    height: calc(var(--spacing) * 24);\n  }\n  .h-full {\n    height: 100%;\n  }\n  .max-h-80 {\n    max-height: calc(var(--spacing) * 80);\n  }\n  .w-3 {\n    width: calc(var(--spacing) * 3);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-6 {\n    width: calc(var(--spacing) * 6);\n  }\n  .w-24 {\n    width: calc(var(--spacing) * 24);\n  }\n  .w-80 {\n    width: calc(var(--spacing) * 80);\n  }\n  .w-\\[2px\\] {\n    width: 2px;\n  }\n  .w-\\[10vw\\] {\n    width: 10vw;\n  }\n  .w-\\[15vw\\] {\n    width: 15vw;\n  }\n  .w-\\[720px\\] {\n    width: 720px;\n  }\n  .w-fit {\n    width: fit-content;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .rotate-45 {\n    rotate: 45deg;\n  }\n  .rotate-180 {\n    rotate: 180deg;\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-not-allowed {\n    cursor: not-allowed;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .gap-3 {\n    gap: calc(var(--spacing) * 3);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .gap-7 {\n    gap: calc(var(--spacing) * 7);\n  }\n  .space-y-0 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-3 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-\\[5px\\] {\n    border-radius: 5px;\n  }\n  .rounded-\\[7px\\] {\n    border-radius: 7px;\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-l {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n  .border-gray-600 {\n    border-color: var(--color-gray-600);\n  }\n  .border-white\\/10 {\n    border-color: color-mix(in srgb, #fff 10%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n    }\n  }\n  .bg-\\[\\#3a4049\\] {\n    background-color: #3a4049;\n  }\n  .bg-\\[\\#454545\\] {\n    background-color: #454545;\n  }\n  .bg-\\[rgba\\(0\\,0\\,0\\,0\\.5\\)\\] {\n    background-color: rgba(0,0,0,0.5);\n  }\n  .bg-blue-500 {\n    background-color: var(--color-blue-500);\n  }\n  .bg-gray-500 {\n    background-color: var(--color-gray-500);\n  }\n  .bg-gray-900 {\n    background-color: var(--color-gray-900);\n  }\n  .bg-green-500 {\n    background-color: var(--color-green-500);\n  }\n  .bg-purple-500 {\n    background-color: var(--color-purple-500);\n  }\n  .bg-white\\/10 {\n    background-color: color-mix(in srgb, #fff 10%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n    }\n  }\n  .bg-white\\/80 {\n    background-color: color-mix(in srgb, #fff 80%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);\n    }\n  }\n  .bg-gradient-to-b {\n    --tw-gradient-position: to bottom in oklab;\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n  .from-black {\n    --tw-gradient-from: var(--color-black);\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .bg-cover {\n    background-size: cover;\n  }\n  .bg-center {\n    background-position: center;\n  }\n  .p-0 {\n    padding: calc(var(--spacing) * 0);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-10 {\n    padding: calc(var(--spacing) * 10);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\n  }\n  .px-10 {\n    padding-inline: calc(var(--spacing) * 10);\n  }\n  .px-20 {\n    padding-inline: calc(var(--spacing) * 20);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .py-4 {\n    padding-block: calc(var(--spacing) * 4);\n  }\n  .pt-6 {\n    padding-top: calc(var(--spacing) * 6);\n  }\n  .pb-10 {\n    padding-bottom: calc(var(--spacing) * 10);\n  }\n  .pb-16 {\n    padding-bottom: calc(var(--spacing) * 16);\n  }\n  .text-left {\n    text-align: left;\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-normal {\n    --tw-font-weight: var(--font-weight-normal);\n    font-weight: var(--font-weight-normal);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .text-black {\n    color: var(--color-black);\n  }\n  .text-gray-200 {\n    color: var(--color-gray-200);\n  }\n  .text-gray-300 {\n    color: var(--color-gray-300);\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-900 {\n    color: var(--color-gray-900);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .opacity-50 {\n    opacity: 50%;\n  }\n  .shadow-2xl {\n    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-md {\n    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .backdrop-blur-sm {\n    --tw-backdrop-blur: blur(var(--blur-sm));\n    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n  }\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .ease-in-out {\n    --tw-ease: var(--ease-in-out);\n    transition-timing-function: var(--ease-in-out);\n  }\n  .hover\\:bg-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:bg-white\\/5 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, #fff 5%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-white\\/10 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, #fff 10%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-white\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, #fff 90%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-white) 90%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:text-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-gray-200);\n      }\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-gray-400 {\n    &:focus {\n      --tw-ring-color: var(--color-gray-400);\n    }\n  }\n  .focus\\:ring-offset-1 {\n    &:focus {\n      --tw-ring-offset-width: 1px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n  .disabled\\:bg-white\\/50 {\n    &:disabled {\n      background-color: color-mix(in srgb, #fff 50%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-white) 50%, transparent);\n      }\n    }\n  }\n  .disabled\\:opacity-50 {\n    &:disabled {\n      opacity: 50%;\n    }\n  }\n  .lg\\:h-32 {\n    @media (width >= 64rem) {\n      height: calc(var(--spacing) * 32);\n    }\n  }\n  .lg\\:w-32 {\n    @media (width >= 64rem) {\n      width: calc(var(--spacing) * 32);\n    }\n  }\n  .lg\\:pb-12 {\n    @media (width >= 64rem) {\n      padding-bottom: calc(var(--spacing) * 12);\n    }\n  }\n  .lg\\:text-2xl {\n    @media (width >= 64rem) {\n      font-size: var(--text-2xl);\n      line-height: var(--tw-leading, var(--text-2xl--line-height));\n    }\n  }\n  .lg\\:text-3xl {\n    @media (width >= 64rem) {\n      font-size: var(--text-3xl);\n      line-height: var(--tw-leading, var(--text-3xl--line-height));\n    }\n  }\n  .lg\\:text-base {\n    @media (width >= 64rem) {\n      font-size: var(--text-base);\n      line-height: var(--tw-leading, var(--text-base--line-height));\n    }\n  }\n}\n.noCursor {\n  cursor: none !important;\n}\n.icon-class {\n  height: calc(var(--spacing) * 14);\n  width: calc(var(--spacing) * 14);\n  cursor: pointer;\n  color: var(--color-gray-400);\n  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  --tw-duration: 200ms;\n  transition-duration: 200ms;\n  &:hover {\n    @media (hover: hover) {\n      color: var(--color-gray-200);\n    }\n  }\n  @media (width >= 64rem) {\n    height: calc(var(--spacing) * 18);\n  }\n  @media (width >= 64rem) {\n    width: calc(var(--spacing) * 18);\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-gradient-position {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-from {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-via {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-to {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-stops {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-via-stops {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-from-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 0%;\n}\n@property --tw-gradient-via-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 50%;\n}\n@property --tw-gradient-to-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-backdrop-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-gradient-position: initial;\n      --tw-gradient-from: #0000;\n      --tw-gradient-via: #0000;\n      --tw-gradient-to: #0000;\n      --tw-gradient-stops: initial;\n      --tw-gradient-via-stops: initial;\n      --tw-gradient-from-position: 0%;\n      --tw-gradient-via-position: 50%;\n      --tw-gradient-to-position: 100%;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-backdrop-blur: initial;\n      --tw-backdrop-brightness: initial;\n      --tw-backdrop-contrast: initial;\n      --tw-backdrop-grayscale: initial;\n      --tw-backdrop-hue-rotate: initial;\n      --tw-backdrop-invert: initial;\n      --tw-backdrop-opacity: initial;\n      --tw-backdrop-saturate: initial;\n      --tw-backdrop-sepia: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n    }\n  }\n}\n";
+var css_248z$3 = "/*! tailwindcss v4.1.12 | MIT License | https://tailwindcss.com */\n@layer properties;\n@layer theme, base, components, utilities;\n@layer theme {\n  :root, :host {\n    --font-sans: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\",\n      \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\";\n    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\",\n      \"Courier New\", monospace;\n    --color-green-500: oklch(72.3% 0.219 149.579);\n    --color-blue-500: oklch(62.3% 0.214 259.815);\n    --color-purple-500: oklch(62.7% 0.265 303.9);\n    --color-gray-200: oklch(92.8% 0.006 264.531);\n    --color-gray-300: oklch(87.2% 0.01 258.338);\n    --color-gray-400: oklch(70.7% 0.022 261.325);\n    --color-gray-500: oklch(55.1% 0.027 264.364);\n    --color-gray-600: oklch(44.6% 0.03 256.802);\n    --color-gray-900: oklch(21% 0.034 264.665);\n    --color-black: #000;\n    --color-white: #fff;\n    --spacing: 0.25rem;\n    --text-sm: 0.875rem;\n    --text-sm--line-height: calc(1.25 / 0.875);\n    --text-base: 1rem;\n    --text-base--line-height: calc(1.5 / 1);\n    --text-lg: 1.125rem;\n    --text-lg--line-height: calc(1.75 / 1.125);\n    --text-xl: 1.25rem;\n    --text-xl--line-height: calc(1.75 / 1.25);\n    --text-2xl: 1.5rem;\n    --text-2xl--line-height: calc(2 / 1.5);\n    --text-3xl: 1.875rem;\n    --text-3xl--line-height: calc(2.25 / 1.875);\n    --font-weight-normal: 400;\n    --font-weight-semibold: 600;\n    --font-weight-bold: 700;\n    --radius-md: 0.375rem;\n    --radius-lg: 0.5rem;\n    --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);\n    --animate-spin: spin 1s linear infinite;\n    --blur-sm: 8px;\n    --default-transition-duration: 150ms;\n    --default-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n    --default-font-family: var(--font-sans);\n    --default-mono-font-family: var(--font-mono);\n  }\n}\n@layer base {\n  *, ::after, ::before, ::backdrop, ::file-selector-button {\n    box-sizing: border-box;\n    margin: 0;\n    padding: 0;\n    border: 0 solid;\n  }\n  html, :host {\n    line-height: 1.5;\n    -webkit-text-size-adjust: 100%;\n    tab-size: 4;\n    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\");\n    font-feature-settings: var(--default-font-feature-settings, normal);\n    font-variation-settings: var(--default-font-variation-settings, normal);\n    -webkit-tap-highlight-color: transparent;\n  }\n  hr {\n    height: 0;\n    color: inherit;\n    border-top-width: 1px;\n  }\n  abbr:where([title]) {\n    -webkit-text-decoration: underline dotted;\n    text-decoration: underline dotted;\n  }\n  h1, h2, h3, h4, h5, h6 {\n    font-size: inherit;\n    font-weight: inherit;\n  }\n  a {\n    color: inherit;\n    -webkit-text-decoration: inherit;\n    text-decoration: inherit;\n  }\n  b, strong {\n    font-weight: bolder;\n  }\n  code, kbd, samp, pre {\n    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);\n    font-feature-settings: var(--default-mono-font-feature-settings, normal);\n    font-variation-settings: var(--default-mono-font-variation-settings, normal);\n    font-size: 1em;\n  }\n  small {\n    font-size: 80%;\n  }\n  sub, sup {\n    font-size: 75%;\n    line-height: 0;\n    position: relative;\n    vertical-align: baseline;\n  }\n  sub {\n    bottom: -0.25em;\n  }\n  sup {\n    top: -0.5em;\n  }\n  table {\n    text-indent: 0;\n    border-color: inherit;\n    border-collapse: collapse;\n  }\n  :-moz-focusring {\n    outline: auto;\n  }\n  progress {\n    vertical-align: baseline;\n  }\n  summary {\n    display: list-item;\n  }\n  ol, ul, menu {\n    list-style: none;\n  }\n  img, svg, video, canvas, audio, iframe, embed, object {\n    display: block;\n    vertical-align: middle;\n  }\n  img, video {\n    max-width: 100%;\n    height: auto;\n  }\n  button, input, select, optgroup, textarea, ::file-selector-button {\n    font: inherit;\n    font-feature-settings: inherit;\n    font-variation-settings: inherit;\n    letter-spacing: inherit;\n    color: inherit;\n    border-radius: 0;\n    background-color: transparent;\n    opacity: 1;\n  }\n  :where(select:is([multiple], [size])) optgroup {\n    font-weight: bolder;\n  }\n  :where(select:is([multiple], [size])) optgroup option {\n    padding-inline-start: 20px;\n  }\n  ::file-selector-button {\n    margin-inline-end: 4px;\n  }\n  ::placeholder {\n    opacity: 1;\n  }\n  @supports (not (-webkit-appearance: -apple-pay-button))  or (contain-intrinsic-size: 1px) {\n    ::placeholder {\n      color: currentcolor;\n      @supports (color: color-mix(in lab, red, red)) {\n        color: color-mix(in oklab, currentcolor 50%, transparent);\n      }\n    }\n  }\n  textarea {\n    resize: vertical;\n  }\n  ::-webkit-search-decoration {\n    -webkit-appearance: none;\n  }\n  ::-webkit-date-and-time-value {\n    min-height: 1lh;\n    text-align: inherit;\n  }\n  ::-webkit-datetime-edit {\n    display: inline-flex;\n  }\n  ::-webkit-datetime-edit-fields-wrapper {\n    padding: 0;\n  }\n  ::-webkit-datetime-edit, ::-webkit-datetime-edit-year-field, ::-webkit-datetime-edit-month-field, ::-webkit-datetime-edit-day-field, ::-webkit-datetime-edit-hour-field, ::-webkit-datetime-edit-minute-field, ::-webkit-datetime-edit-second-field, ::-webkit-datetime-edit-millisecond-field, ::-webkit-datetime-edit-meridiem-field {\n    padding-block: 0;\n  }\n  ::-webkit-calendar-picker-indicator {\n    line-height: 1;\n  }\n  :-moz-ui-invalid {\n    box-shadow: none;\n  }\n  button, input:where([type=\"button\"], [type=\"reset\"], [type=\"submit\"]), ::file-selector-button {\n    appearance: button;\n  }\n  ::-webkit-inner-spin-button, ::-webkit-outer-spin-button {\n    height: auto;\n  }\n  [hidden]:where(:not([hidden=\"until-found\"])) {\n    display: none !important;\n  }\n}\n@layer utilities {\n  .pointer-events-none {\n    pointer-events: none;\n  }\n  .visible {\n    visibility: visible;\n  }\n  .absolute {\n    position: absolute;\n  }\n  .relative {\n    position: relative;\n  }\n  .static {\n    position: static;\n  }\n  .inset-0 {\n    inset: calc(var(--spacing) * 0);\n  }\n  .-top-2 {\n    top: calc(var(--spacing) * -2);\n  }\n  .top-0 {\n    top: calc(var(--spacing) * 0);\n  }\n  .top-1\\/2 {\n    top: calc(1/2 * 100%);\n  }\n  .top-full {\n    top: 100%;\n  }\n  .right-0 {\n    right: calc(var(--spacing) * 0);\n  }\n  .right-32 {\n    right: calc(var(--spacing) * 32);\n  }\n  .right-full {\n    right: 100%;\n  }\n  .bottom-36 {\n    bottom: calc(var(--spacing) * 36);\n  }\n  .bottom-full {\n    bottom: 100%;\n  }\n  .left-0 {\n    left: calc(var(--spacing) * 0);\n  }\n  .left-1\\/2 {\n    left: calc(1/2 * 100%);\n  }\n  .left-32 {\n    left: calc(var(--spacing) * 32);\n  }\n  .left-full {\n    left: 100%;\n  }\n  .z-50 {\n    z-index: 50;\n  }\n  .z-\\[-1\\] {\n    z-index: -1;\n  }\n  .mx-2 {\n    margin-inline: calc(var(--spacing) * 2);\n  }\n  .mx-auto {\n    margin-inline: auto;\n  }\n  .mt-1 {\n    margin-top: calc(var(--spacing) * 1);\n  }\n  .mt-2 {\n    margin-top: calc(var(--spacing) * 2);\n  }\n  .mr-2 {\n    margin-right: calc(var(--spacing) * 2);\n  }\n  .mb-1 {\n    margin-bottom: calc(var(--spacing) * 1);\n  }\n  .mb-2 {\n    margin-bottom: calc(var(--spacing) * 2);\n  }\n  .mb-4 {\n    margin-bottom: calc(var(--spacing) * 4);\n  }\n  .ml-2 {\n    margin-left: calc(var(--spacing) * 2);\n  }\n  .block {\n    display: block;\n  }\n  .flex {\n    display: flex;\n  }\n  .hidden {\n    display: none;\n  }\n  .inline {\n    display: inline;\n  }\n  .inline-block {\n    display: inline-block;\n  }\n  .h-3 {\n    height: calc(var(--spacing) * 3);\n  }\n  .h-5 {\n    height: calc(var(--spacing) * 5);\n  }\n  .h-6 {\n    height: calc(var(--spacing) * 6);\n  }\n  .h-10 {\n    height: calc(var(--spacing) * 10);\n  }\n  .h-24 {\n    height: calc(var(--spacing) * 24);\n  }\n  .h-full {\n    height: 100%;\n  }\n  .max-h-80 {\n    max-height: calc(var(--spacing) * 80);\n  }\n  .w-3 {\n    width: calc(var(--spacing) * 3);\n  }\n  .w-5 {\n    width: calc(var(--spacing) * 5);\n  }\n  .w-6 {\n    width: calc(var(--spacing) * 6);\n  }\n  .w-24 {\n    width: calc(var(--spacing) * 24);\n  }\n  .w-80 {\n    width: calc(var(--spacing) * 80);\n  }\n  .w-\\[2px\\] {\n    width: 2px;\n  }\n  .w-\\[10vw\\] {\n    width: 10vw;\n  }\n  .w-\\[15vw\\] {\n    width: 15vw;\n  }\n  .w-\\[720px\\] {\n    width: 720px;\n  }\n  .w-fit {\n    width: fit-content;\n  }\n  .w-full {\n    width: 100%;\n  }\n  .-translate-x-1\\/2 {\n    --tw-translate-x: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .-translate-y-1\\/2 {\n    --tw-translate-y: calc(calc(1/2 * 100%) * -1);\n    translate: var(--tw-translate-x) var(--tw-translate-y);\n  }\n  .rotate-45 {\n    rotate: 45deg;\n  }\n  .rotate-180 {\n    rotate: 180deg;\n  }\n  .transform {\n    transform: var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,);\n  }\n  .animate-spin {\n    animation: var(--animate-spin);\n  }\n  .cursor-not-allowed {\n    cursor: not-allowed;\n  }\n  .cursor-pointer {\n    cursor: pointer;\n  }\n  .flex-col {\n    flex-direction: column;\n  }\n  .items-center {\n    align-items: center;\n  }\n  .items-start {\n    align-items: flex-start;\n  }\n  .justify-between {\n    justify-content: space-between;\n  }\n  .justify-center {\n    justify-content: center;\n  }\n  .gap-3 {\n    gap: calc(var(--spacing) * 3);\n  }\n  .gap-4 {\n    gap: calc(var(--spacing) * 4);\n  }\n  .gap-7 {\n    gap: calc(var(--spacing) * 7);\n  }\n  .space-y-0 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 0) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 0) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .space-y-3 {\n    :where(& > :not(:last-child)) {\n      --tw-space-y-reverse: 0;\n      margin-block-start: calc(calc(var(--spacing) * 3) * var(--tw-space-y-reverse));\n      margin-block-end: calc(calc(var(--spacing) * 3) * calc(1 - var(--tw-space-y-reverse)));\n    }\n  }\n  .overflow-hidden {\n    overflow: hidden;\n  }\n  .overflow-y-auto {\n    overflow-y: auto;\n  }\n  .rounded {\n    border-radius: 0.25rem;\n  }\n  .rounded-\\[5px\\] {\n    border-radius: 5px;\n  }\n  .rounded-\\[7px\\] {\n    border-radius: 7px;\n  }\n  .rounded-lg {\n    border-radius: var(--radius-lg);\n  }\n  .rounded-md {\n    border-radius: var(--radius-md);\n  }\n  .border {\n    border-style: var(--tw-border-style);\n    border-width: 1px;\n  }\n  .border-t {\n    border-top-style: var(--tw-border-style);\n    border-top-width: 1px;\n  }\n  .border-b {\n    border-bottom-style: var(--tw-border-style);\n    border-bottom-width: 1px;\n  }\n  .border-l {\n    border-left-style: var(--tw-border-style);\n    border-left-width: 1px;\n  }\n  .border-gray-600 {\n    border-color: var(--color-gray-600);\n  }\n  .border-white\\/10 {\n    border-color: color-mix(in srgb, #fff 10%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      border-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n    }\n  }\n  .bg-\\[\\#3a4049\\] {\n    background-color: #3a4049;\n  }\n  .bg-\\[\\#454545\\] {\n    background-color: #454545;\n  }\n  .bg-\\[rgba\\(0\\,0\\,0\\,0\\.5\\)\\] {\n    background-color: rgba(0,0,0,0.5);\n  }\n  .bg-blue-500 {\n    background-color: var(--color-blue-500);\n  }\n  .bg-gray-500 {\n    background-color: var(--color-gray-500);\n  }\n  .bg-gray-900 {\n    background-color: var(--color-gray-900);\n  }\n  .bg-green-500 {\n    background-color: var(--color-green-500);\n  }\n  .bg-purple-500 {\n    background-color: var(--color-purple-500);\n  }\n  .bg-white\\/10 {\n    background-color: color-mix(in srgb, #fff 10%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n    }\n  }\n  .bg-white\\/80 {\n    background-color: color-mix(in srgb, #fff 80%, transparent);\n    @supports (color: color-mix(in lab, red, red)) {\n      background-color: color-mix(in oklab, var(--color-white) 80%, transparent);\n    }\n  }\n  .bg-gradient-to-b {\n    --tw-gradient-position: to bottom in oklab;\n    background-image: linear-gradient(var(--tw-gradient-stops));\n  }\n  .from-black {\n    --tw-gradient-from: var(--color-black);\n    --tw-gradient-stops: var(--tw-gradient-via-stops, var(--tw-gradient-position), var(--tw-gradient-from) var(--tw-gradient-from-position), var(--tw-gradient-to) var(--tw-gradient-to-position));\n  }\n  .bg-cover {\n    background-size: cover;\n  }\n  .bg-center {\n    background-position: center;\n  }\n  .p-0 {\n    padding: calc(var(--spacing) * 0);\n  }\n  .p-1 {\n    padding: calc(var(--spacing) * 1);\n  }\n  .p-2 {\n    padding: calc(var(--spacing) * 2);\n  }\n  .p-4 {\n    padding: calc(var(--spacing) * 4);\n  }\n  .p-10 {\n    padding: calc(var(--spacing) * 10);\n  }\n  .px-3 {\n    padding-inline: calc(var(--spacing) * 3);\n  }\n  .px-4 {\n    padding-inline: calc(var(--spacing) * 4);\n  }\n  .px-6 {\n    padding-inline: calc(var(--spacing) * 6);\n  }\n  .px-10 {\n    padding-inline: calc(var(--spacing) * 10);\n  }\n  .px-20 {\n    padding-inline: calc(var(--spacing) * 20);\n  }\n  .py-1 {\n    padding-block: calc(var(--spacing) * 1);\n  }\n  .py-2 {\n    padding-block: calc(var(--spacing) * 2);\n  }\n  .py-3 {\n    padding-block: calc(var(--spacing) * 3);\n  }\n  .py-4 {\n    padding-block: calc(var(--spacing) * 4);\n  }\n  .pt-6 {\n    padding-top: calc(var(--spacing) * 6);\n  }\n  .pb-10 {\n    padding-bottom: calc(var(--spacing) * 10);\n  }\n  .pb-16 {\n    padding-bottom: calc(var(--spacing) * 16);\n  }\n  .text-left {\n    text-align: left;\n  }\n  .text-lg {\n    font-size: var(--text-lg);\n    line-height: var(--tw-leading, var(--text-lg--line-height));\n  }\n  .text-sm {\n    font-size: var(--text-sm);\n    line-height: var(--tw-leading, var(--text-sm--line-height));\n  }\n  .text-xl {\n    font-size: var(--text-xl);\n    line-height: var(--tw-leading, var(--text-xl--line-height));\n  }\n  .font-bold {\n    --tw-font-weight: var(--font-weight-bold);\n    font-weight: var(--font-weight-bold);\n  }\n  .font-normal {\n    --tw-font-weight: var(--font-weight-normal);\n    font-weight: var(--font-weight-normal);\n  }\n  .font-semibold {\n    --tw-font-weight: var(--font-weight-semibold);\n    font-weight: var(--font-weight-semibold);\n  }\n  .whitespace-nowrap {\n    white-space: nowrap;\n  }\n  .text-gray-200 {\n    color: var(--color-gray-200);\n  }\n  .text-gray-300 {\n    color: var(--color-gray-300);\n  }\n  .text-gray-400 {\n    color: var(--color-gray-400);\n  }\n  .text-gray-500 {\n    color: var(--color-gray-500);\n  }\n  .text-gray-900 {\n    color: var(--color-gray-900);\n  }\n  .text-white {\n    color: var(--color-white);\n  }\n  .opacity-50 {\n    opacity: 50%;\n  }\n  .shadow-2xl {\n    --tw-shadow: 0 25px 50px -12px var(--tw-shadow-color, rgb(0 0 0 / 0.25));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .shadow-md {\n    --tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / 0.1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / 0.1));\n    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n  }\n  .backdrop-blur-sm {\n    --tw-backdrop-blur: blur(var(--blur-sm));\n    -webkit-backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n    backdrop-filter: var(--tw-backdrop-blur,) var(--tw-backdrop-brightness,) var(--tw-backdrop-contrast,) var(--tw-backdrop-grayscale,) var(--tw-backdrop-hue-rotate,) var(--tw-backdrop-invert,) var(--tw-backdrop-opacity,) var(--tw-backdrop-saturate,) var(--tw-backdrop-sepia,);\n  }\n  .transition {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, visibility, content-visibility, overlay, pointer-events;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-all {\n    transition-property: all;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-colors {\n    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .transition-opacity {\n    transition-property: opacity;\n    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n    transition-duration: var(--tw-duration, var(--default-transition-duration));\n  }\n  .duration-200 {\n    --tw-duration: 200ms;\n    transition-duration: 200ms;\n  }\n  .ease-in-out {\n    --tw-ease: var(--ease-in-out);\n    transition-timing-function: var(--ease-in-out);\n  }\n  .hover\\:bg-gray-300 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: var(--color-gray-300);\n      }\n    }\n  }\n  .hover\\:bg-white\\/5 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, #fff 5%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-white) 5%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-white\\/10 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, #fff 10%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-white) 10%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:bg-white\\/90 {\n    &:hover {\n      @media (hover: hover) {\n        background-color: color-mix(in srgb, #fff 90%, transparent);\n        @supports (color: color-mix(in lab, red, red)) {\n          background-color: color-mix(in oklab, var(--color-white) 90%, transparent);\n        }\n      }\n    }\n  }\n  .hover\\:text-gray-200 {\n    &:hover {\n      @media (hover: hover) {\n        color: var(--color-gray-200);\n      }\n    }\n  }\n  .focus\\:ring-2 {\n    &:focus {\n      --tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);\n      box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);\n    }\n  }\n  .focus\\:ring-gray-400 {\n    &:focus {\n      --tw-ring-color: var(--color-gray-400);\n    }\n  }\n  .focus\\:ring-offset-1 {\n    &:focus {\n      --tw-ring-offset-width: 1px;\n      --tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);\n    }\n  }\n  .focus\\:outline-none {\n    &:focus {\n      --tw-outline-style: none;\n      outline-style: none;\n    }\n  }\n  .disabled\\:cursor-not-allowed {\n    &:disabled {\n      cursor: not-allowed;\n    }\n  }\n  .disabled\\:bg-white\\/50 {\n    &:disabled {\n      background-color: color-mix(in srgb, #fff 50%, transparent);\n      @supports (color: color-mix(in lab, red, red)) {\n        background-color: color-mix(in oklab, var(--color-white) 50%, transparent);\n      }\n    }\n  }\n  .disabled\\:opacity-50 {\n    &:disabled {\n      opacity: 50%;\n    }\n  }\n  .lg\\:h-32 {\n    @media (width >= 64rem) {\n      height: calc(var(--spacing) * 32);\n    }\n  }\n  .lg\\:w-32 {\n    @media (width >= 64rem) {\n      width: calc(var(--spacing) * 32);\n    }\n  }\n  .lg\\:pb-12 {\n    @media (width >= 64rem) {\n      padding-bottom: calc(var(--spacing) * 12);\n    }\n  }\n  .lg\\:text-2xl {\n    @media (width >= 64rem) {\n      font-size: var(--text-2xl);\n      line-height: var(--tw-leading, var(--text-2xl--line-height));\n    }\n  }\n  .lg\\:text-3xl {\n    @media (width >= 64rem) {\n      font-size: var(--text-3xl);\n      line-height: var(--tw-leading, var(--text-3xl--line-height));\n    }\n  }\n  .lg\\:text-base {\n    @media (width >= 64rem) {\n      font-size: var(--text-base);\n      line-height: var(--tw-leading, var(--text-base--line-height));\n    }\n  }\n}\n.noCursor {\n  cursor: none !important;\n}\n.icon-class {\n  height: calc(var(--spacing) * 14);\n  width: calc(var(--spacing) * 14);\n  cursor: pointer;\n  color: var(--color-gray-400);\n  transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to;\n  transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));\n  transition-duration: var(--tw-duration, var(--default-transition-duration));\n  --tw-duration: 200ms;\n  transition-duration: 200ms;\n  &:hover {\n    @media (hover: hover) {\n      color: var(--color-gray-200);\n    }\n  }\n  @media (width >= 64rem) {\n    height: calc(var(--spacing) * 18);\n  }\n  @media (width >= 64rem) {\n    width: calc(var(--spacing) * 18);\n  }\n}\n@property --tw-translate-x {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-y {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-translate-z {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-rotate-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-rotate-z {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-x {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-skew-y {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-space-y-reverse {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0;\n}\n@property --tw-border-style {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: solid;\n}\n@property --tw-gradient-position {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-from {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-via {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-to {\n  syntax: \"<color>\";\n  inherits: false;\n  initial-value: #0000;\n}\n@property --tw-gradient-stops {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-via-stops {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-gradient-from-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 0%;\n}\n@property --tw-gradient-via-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 50%;\n}\n@property --tw-gradient-to-position {\n  syntax: \"<length-percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-font-weight {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-inset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-shadow-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-shadow-alpha {\n  syntax: \"<percentage>\";\n  inherits: false;\n  initial-value: 100%;\n}\n@property --tw-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-inset-ring-color {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-inset-ring-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-ring-inset {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ring-offset-width {\n  syntax: \"<length>\";\n  inherits: false;\n  initial-value: 0px;\n}\n@property --tw-ring-offset-color {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: #fff;\n}\n@property --tw-ring-offset-shadow {\n  syntax: \"*\";\n  inherits: false;\n  initial-value: 0 0 #0000;\n}\n@property --tw-backdrop-blur {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-brightness {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-contrast {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-grayscale {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-hue-rotate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-invert {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-opacity {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-saturate {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-backdrop-sepia {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-duration {\n  syntax: \"*\";\n  inherits: false;\n}\n@property --tw-ease {\n  syntax: \"*\";\n  inherits: false;\n}\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n@layer properties {\n  @supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))) {\n    *, ::before, ::after, ::backdrop {\n      --tw-translate-x: 0;\n      --tw-translate-y: 0;\n      --tw-translate-z: 0;\n      --tw-rotate-x: initial;\n      --tw-rotate-y: initial;\n      --tw-rotate-z: initial;\n      --tw-skew-x: initial;\n      --tw-skew-y: initial;\n      --tw-space-y-reverse: 0;\n      --tw-border-style: solid;\n      --tw-gradient-position: initial;\n      --tw-gradient-from: #0000;\n      --tw-gradient-via: #0000;\n      --tw-gradient-to: #0000;\n      --tw-gradient-stops: initial;\n      --tw-gradient-via-stops: initial;\n      --tw-gradient-from-position: 0%;\n      --tw-gradient-via-position: 50%;\n      --tw-gradient-to-position: 100%;\n      --tw-font-weight: initial;\n      --tw-shadow: 0 0 #0000;\n      --tw-shadow-color: initial;\n      --tw-shadow-alpha: 100%;\n      --tw-inset-shadow: 0 0 #0000;\n      --tw-inset-shadow-color: initial;\n      --tw-inset-shadow-alpha: 100%;\n      --tw-ring-color: initial;\n      --tw-ring-shadow: 0 0 #0000;\n      --tw-inset-ring-color: initial;\n      --tw-inset-ring-shadow: 0 0 #0000;\n      --tw-ring-inset: initial;\n      --tw-ring-offset-width: 0px;\n      --tw-ring-offset-color: #fff;\n      --tw-ring-offset-shadow: 0 0 #0000;\n      --tw-backdrop-blur: initial;\n      --tw-backdrop-brightness: initial;\n      --tw-backdrop-contrast: initial;\n      --tw-backdrop-grayscale: initial;\n      --tw-backdrop-hue-rotate: initial;\n      --tw-backdrop-invert: initial;\n      --tw-backdrop-opacity: initial;\n      --tw-backdrop-saturate: initial;\n      --tw-backdrop-sepia: initial;\n      --tw-duration: initial;\n      --tw-ease: initial;\n    }\n  }\n}\n";
 styleInject(css_248z$3,{"insertAt":"top"});
 
 const createVideoRefsSlice = (set) => ({
@@ -62,6 +63,8 @@ const createVideoTimingSlice = (set) => ({
     setCurrentTime: (currentTime) => set({ currentTime }),
     duration: 0,
     setDuration: (duration) => set({ duration }),
+    bufferedProgress: 0,
+    setBufferedProgress: (progress) => set({ bufferedProgress: progress }),
 });
 
 const createVideoControlsSlice = (set) => ({
@@ -69,15 +72,21 @@ const createVideoControlsSlice = (set) => ({
     setControls: (controls) => set({ controls }),
     isFullscreen: false,
     setIsFullscreen: (isFullscreen) => set({ isFullscreen }),
+    controlsVisible: true,
+    setControlsVisible: (visible) => set({ controlsVisible: visible }),
 });
 
 const createVideoQualitySlice = (set) => ({
     hlsInstance: undefined,
     setHlsInstance: (hlsInstance) => set({ hlsInstance }),
+    dashInstance: undefined,
+    setDashInstance: (dashInstance) => set({ dashInstance }),
     qualityLevels: undefined,
     setQualityLevels: (qualityLevels) => set({ qualityLevels }),
     activeQuality: "auto",
     setActiveQuality: (activeQuality) => set({ activeQuality }),
+    streamType: "mp4",
+    setStreamType: (streamType) => set({ streamType }),
 });
 
 const createSubtitlesSlice = (set) => ({
@@ -105,22 +114,47 @@ const createIntroSlice = (set) => ({
     setShowIntroSkip: (show) => set({ showIntroSkip: show }),
 });
 
-const useVideoStore = create()((...a) => ({
-    ...createVideoRefsSlice(...a),
-    ...createVideoPlaybackSlice(...a),
-    ...createVideoTimingSlice(...a),
-    ...createVideoControlsSlice(...a),
-    ...createVideoQualitySlice(...a),
-    ...createSubtitlesSlice(...a),
-    ...createEpisodesSlice(...a),
-    ...createIntroSlice(...a),
+const createResetSlice = (set, get) => ({
+    resetStore: () => {
+        set({
+            videoRef: null,
+            videoWrapperRef: null,
+            playing: false,
+            isBuffering: false,
+            isPlaying: false,
+            muted: false,
+            volume: 1,
+            currentTime: 0,
+            duration: 0,
+            bufferedProgress: 0,
+            controls: false,
+            isFullscreen: false,
+            hlsInstance: undefined,
+            qualityLevels: undefined,
+            activeQuality: "auto",
+            activeSubtitle: null,
+            subtitles: [],
+            episodeList: [],
+            currentEpisodeIndex: 0,
+            showCountdown: false,
+            countdownTime: 10,
+            autoPlayNext: false,
+            showIntroSkip: false,
+        });
+    },
+});
+
+const useVideoStore = create()((set, get, store) => ({
+    ...createVideoRefsSlice(set),
+    ...createVideoPlaybackSlice(set),
+    ...createVideoTimingSlice(set),
+    ...createVideoControlsSlice(set),
+    ...createVideoQualitySlice(set),
+    ...createSubtitlesSlice(set),
+    ...createEpisodesSlice(set),
+    ...createIntroSlice(set),
+    ...createResetSlice(set),
 }));
-// Previous version before recent edits code changes in panding
-//   ...createVideoRefsSlice(...a),
-//   ...createVideoPlaybackSlice(...a),
-//   ...createVideoTimingSlice(...a),
-//  ...createEpisodesSlice(...a),
-//   ...createIntroSlice(...a),
 
 /**
  * @description
@@ -158,6 +192,9 @@ const getExtensionFromUrl = (url) => {
     if (extension === "m3u8") {
         return "hls";
     }
+    if (extension === "mpd") {
+        return "dash";
+    }
     return extension;
 };
 
@@ -395,14 +432,14 @@ const VideoSeekSlider = ({ max = 1000, currentTime = 0, bufferTime = 0, hideThum
         React__default.createElement(Thumb, { max: max, currentTime: currentTime, isThumbActive: isThumbActive, trackColor: trackColor })));
 };
 
-var css_248z$2 = ".ui-video-seek-slider {\n  position: relative;\n  touch-action: none;\n}\n.ui-video-seek-slider:focus {\n  outline: none;\n}\n.ui-video-seek-slider .track {\n  padding: 0;\n  cursor: pointer;\n  outline: none;\n}\n.ui-video-seek-slider .track:focus {\n  border: 0;\n  outline: none;\n}\n.ui-video-seek-slider .track .main {\n  width: 100%;\n  outline: none;\n  height: 18px;\n  top: 0;\n  position: absolute;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n}\n.ui-video-seek-slider .track .main:before {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 3px;\n  background-color: rgba(255, 255, 255, 0.2);\n  overflow: hidden;\n  transition: height 0.1s;\n  outline: none;\n}\n.ui-video-seek-slider .track .main .inner-seek-block {\n  position: absolute;\n  width: 100%;\n  height: 3px;\n  transition: height 0.1s, opacity 0.4s;\n  transform-origin: 0 0;\n}\n.ui-video-seek-slider .track .main:focus {\n  border: 0;\n  outline: none;\n}\n.ui-video-seek-slider .track .main .buffered {\n  background-color: rgba(255, 255, 255, 0.3);\n  z-index: 2;\n}\n.ui-video-seek-slider .track .main .seek-hover {\n  background-color: rgba(255, 255, 255, 0.5);\n  z-index: 1;\n}\n.ui-video-seek-slider .track .main .connect {\n  background-color: #ff0000;\n  z-index: 3;\n  transform-origin: 0 0;\n}\n.ui-video-seek-slider .track .main.with-gap .inner-seek-block,\n.ui-video-seek-slider .track .main.with-gap:before {\n  width: calc(100% - 2px);\n  margin: 0 auto;\n}\n@media (hover) {\n  .ui-video-seek-slider .track .main:hover:before {\n    height: 8px;\n  }\n  .ui-video-seek-slider .track .main:hover .inner-seek-block {\n    height: 8px;\n  }\n}\n.ui-video-seek-slider .thumb {\n  pointer-events: none;\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  left: -6px;\n  z-index: 4;\n  top: 3px;\n}\n.ui-video-seek-slider .thumb .handler {\n  border-radius: 100%;\n  width: 100%;\n  height: 100%;\n  background-color: #ff0000;\n  opacity: 0;\n  transform: scale(0.4);\n  transition: transform 0.2s, opacity 0.2s;\n}\n.ui-video-seek-slider .thumb.active .handler {\n  opacity: 1;\n  transform: scale(1);\n}\n.ui-video-seek-slider .hover-time {\n  text-shadow: 1px 1px 1px #000;\n  position: absolute;\n  line-height: 18px;\n  font-size: 16px;\n  color: #ddd;\n  bottom: 5px;\n  left: 0;\n  padding: 5px 10px;\n  opacity: 0;\n  pointer-events: none;\n  text-align: center;\n}\n.ui-video-seek-slider .hover-time.active {\n  opacity: 1;\n}\n.ui-video-seek-slider .hover-time .preview-screen {\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-position: center;\n  width: 200px;\n  height: 110px;\n  border-radius: 5px;\n  background-color: #000;\n  margin: 0 auto 10px;\n}\n.ui-video-seek-slider:hover .track .main .seek-hover {\n  opacity: 1;\n}\n";
+var css_248z$2 = ".ui-video-seek-slider {\n  position: relative;\n  touch-action: none;\n}\n.ui-video-seek-slider:focus {\n  outline: none;\n}\n.ui-video-seek-slider .track {\n  padding: 0;\n  cursor: pointer;\n  outline: none;\n}\n.ui-video-seek-slider .track:focus {\n  border: 0;\n  outline: none;\n}\n.ui-video-seek-slider .track .main {\n  width: 100%;\n  outline: none;\n  height: 18px;\n  top: 0;\n  position: absolute;\n  display: flex;\n  align-items: center;\n  box-sizing: border-box;\n}\n.ui-video-seek-slider .track .main:before {\n  content: \"\";\n  position: absolute;\n  width: 100%;\n  height: 3px;\n  background-color: rgba(255, 255, 255, 0.2);\n  overflow: hidden;\n  transition: height 0.1s;\n  outline: none;\n}\n.ui-video-seek-slider .track .main .inner-seek-block {\n  position: absolute;\n  width: 100%;\n  height: 3px;\n  transition: height 0.1s, opacity 0.4s, transform 0.2s ease-out;\n  transform-origin: 0 0;\n}\n.ui-video-seek-slider .track .main:focus {\n  border: 0;\n  outline: none;\n}\n.ui-video-seek-slider .track .main .buffered {\n  background-color: rgba(255, 255, 255, 0.3);\n  z-index: 2;\n  transition: transform 0.2s ease-out;\n}\n.ui-video-seek-slider .track .main .seek-hover {\n  background-color: rgba(255, 255, 255, 0.5);\n  z-index: 1;\n}\n.ui-video-seek-slider .track .main .connect {\n  background-color: #ff0000;\n  z-index: 3;\n  transform-origin: 0 0;\n}\n.ui-video-seek-slider .track .main.with-gap .inner-seek-block,\n.ui-video-seek-slider .track .main.with-gap:before {\n  width: calc(100% - 2px);\n  margin: 0 auto;\n}\n@media (hover) {\n  .ui-video-seek-slider .track .main:hover:before {\n    height: 8px;\n  }\n  .ui-video-seek-slider .track .main:hover .inner-seek-block {\n    height: 8px;\n  }\n}\n.ui-video-seek-slider .thumb {\n  pointer-events: none;\n  position: absolute;\n  width: 12px;\n  height: 12px;\n  left: -6px;\n  z-index: 4;\n  top: 3px;\n}\n.ui-video-seek-slider .thumb .handler {\n  border-radius: 100%;\n  width: 100%;\n  height: 100%;\n  background-color: #ff0000;\n  opacity: 0;\n  transform: scale(0.4);\n  transition: transform 0.2s, opacity 0.2s;\n}\n.ui-video-seek-slider .thumb.active .handler {\n  opacity: 1;\n  transform: scale(1);\n}\n.ui-video-seek-slider .hover-time {\n  text-shadow: 1px 1px 1px #000;\n  position: absolute;\n  line-height: 18px;\n  font-size: 16px;\n  color: #ddd;\n  bottom: 5px;\n  left: 0;\n  padding: 5px 10px;\n  opacity: 0;\n  pointer-events: none;\n  text-align: center;\n}\n.ui-video-seek-slider .hover-time.active {\n  opacity: 1;\n}\n.ui-video-seek-slider .hover-time .preview-screen {\n  background-repeat: no-repeat;\n  background-size: cover;\n  background-position: center;\n  width: 200px;\n  height: 110px;\n  border-radius: 5px;\n  background-color: #000;\n  margin: 0 auto 10px;\n}\n.ui-video-seek-slider:hover .track .main .seek-hover {\n  opacity: 1;\n}\n";
 styleInject(css_248z$2,{"insertAt":"top"});
 
 const BottomControls = ({ config }) => {
-    const { videoRef, currentTime, isFullscreen } = useVideoStore();
+    const { videoRef, currentTime, isFullscreen, bufferedProgress } = useVideoStore();
     const duration = videoRef?.duration;
     return (React__default.createElement("div", { className: "px-10" },
-        React__default.createElement(VideoSeekSlider, { max: secondsToMilliseconds(duration || 0), currentTime: secondsToMilliseconds(currentTime || 0), bufferTime: secondsToMilliseconds(0), onChange: (currentTime) => {
+        React__default.createElement(VideoSeekSlider, { max: secondsToMilliseconds(duration || 0), currentTime: secondsToMilliseconds(currentTime || 0), bufferTime: secondsToMilliseconds((duration || 0) * (bufferedProgress / 100)), onChange: (currentTime) => {
                 if (videoRef) {
                     videoRef.currentTime = currentTime / 1000;
                 }
@@ -423,7 +460,7 @@ const Tooltip = ({ children, title, position = "top", }) => {
     };
     return (React__default.createElement("div", { className: "relative inline-block cursor-pointer", onMouseEnter: () => setVisible(true), onMouseLeave: () => setVisible(false) },
         children,
-        visible && (React__default.createElement("div", { className: `absolute z-50 px-3 py-1 text-sm text-white bg-gray-900 rounded-md shadow-md transition-opacity duration-200 ease-in-out ${positionStyles[position]}` }, title))));
+        visible && (React__default.createElement("div", { className: `absolute z-50 px-3 py-1 text-sm text-white bg-gray-900 rounded-md shadow-md transition-opacity duration-200 ease-in-out whitespace-nowrap ${positionStyles[position]}` }, title))));
 };
 
 var css_248z$1 = ".icon-button {\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n  color: #9ca3af;\n  transition: color 0.2s ease-in-out;\n}\n\n.icon-button:hover {\n  color: #e5e7eb;\n}\n\n@media (min-width: 1024px) {\n  .icon-button {\n    width: 32px;\n    height: 32px;\n  }\n}\n\n/* styles/fullscreen-toggle.css */\n.fullscreen-icon {\n  width: 20px;\n  height: 20px;\n  cursor: pointer;\n  color: #9ca3af;\n  transition: color 0.2s ease-in-out;\n}\n\n.fullscreen-icon:hover {\n  color: #e5e7eb;\n}\n\n@media (min-width: 1024px) {\n  .fullscreen-icon {\n    width: 32px;\n    height: 32px;\n  }\n}\n\n/* styles/pi-picture-in-picture-toggle.css */\n.pip-toggle {\n  cursor: pointer;\n  color: #9ca3af;\n  transition: color 0.2s ease-in-out;\n}\n\n.pip-toggle:hover {\n  color: #e5e7eb;\n}\n\n.pip-icon {\n  width: 15px;\n  height: 15px;\n}\n\n@media (min-width: 1024px) {\n  .pip-icon {\n    width: 28px;\n    height: 28px;\n  }\n}\n";
@@ -655,50 +692,52 @@ const Settings = ({ iconClassName }) => {
 
 const ControlsHeader = ({ config }) => {
     const iconClassName = "icon-button";
-    const { videoWrapperRef, videoRef, episodeList, currentEpisodeIndex } = useVideoStore();
+    const { videoWrapperRef, videoRef, episodeList, currentEpisodeIndex, resetStore, } = useVideoStore();
     const [isPipActive, setIsPipActive] = React.useState(false);
-    const isFullscreen = document.fullscreenElement !== null;
+    const [isFullscreen, setIsFullscreen] = React.useState(false);
     const handleFullscreen = () => {
-        if (isPipActive)
+        if (!screenfull.isEnabled || isPipActive)
             return;
-        if (document.fullscreenElement) {
-            document.exitFullscreen();
+        if (screenfull.isFullscreen) {
+            screenfull.exit();
         }
-        else {
-            videoWrapperRef?.requestFullscreen();
+        else if (videoWrapperRef) {
+            screenfull.request(videoWrapperRef);
         }
     };
+    React.useEffect(() => {
+        if (!screenfull.isEnabled)
+            return;
+        const changeHandler = () => setIsFullscreen(screenfull.isFullscreen);
+        screenfull.on("change", changeHandler);
+        return () => {
+            screenfull.off("change", changeHandler);
+        };
+    }, []);
     const handleMute = () => {
         if (videoRef) {
             videoRef.muted = !videoRef.muted;
         }
     };
     const handlePipToggle = async () => {
-        if (videoRef) {
+        if (!videoRef)
+            return;
+        try {
             if (!document.pictureInPictureElement && !isPipActive) {
-                try {
-                    await videoRef.requestPictureInPicture();
-                    setIsPipActive(true);
-                }
-                catch (error) {
-                    console.error("PiP mode failed:", error);
-                }
+                await videoRef.requestPictureInPicture();
+                setIsPipActive(true);
             }
             else if (document.pictureInPictureElement && isPipActive) {
-                try {
-                    await document.exitPictureInPicture();
-                    setIsPipActive(false);
-                }
-                catch (error) {
-                    console.error("Exit PiP failed:", error);
-                }
+                await document.exitPictureInPicture();
+                setIsPipActive(false);
             }
         }
+        catch (error) {
+            console.error("PiP toggle failed:", error);
+        }
     };
     React.useEffect(() => {
-        const handlePipChange = () => {
-            setIsPipActive(!!document.pictureInPictureElement);
-        };
+        const handlePipChange = () => setIsPipActive(!!document.pictureInPictureElement);
         document.addEventListener("enterpictureinpicture", handlePipChange);
         document.addEventListener("leavepictureinpicture", handlePipChange);
         return () => {
@@ -706,6 +745,12 @@ const ControlsHeader = ({ config }) => {
             document.removeEventListener("leavepictureinpicture", handlePipChange);
         };
     }, []);
+    const handleClose = () => {
+        resetStore();
+        if (config?.onClose) {
+            config.onClose();
+        }
+    };
     return (React.createElement("div", { className: "flex items-center justify-between p-10 bg-gradient-to-b from-black" },
         React.createElement("div", { className: "flex" },
             React.createElement("div", null,
@@ -721,79 +766,64 @@ const ControlsHeader = ({ config }) => {
             React.createElement(Tooltip, { title: isPipActive
                     ? "Disabled in PiP"
                     : isFullscreen
-                        ? "Exit"
+                        ? "Exit Fullscreen"
                         : "Fullscreen", className: `${iconClassName} ${isPipActive ? "opacity-50 cursor-not-allowed" : ""}` },
                 React.createElement("div", { onClick: handleFullscreen, className: isPipActive ? "pointer-events-none" : "" },
                     React.createElement(FullScreenToggle, { isFullScreen: isFullscreen, className: iconClassName }))),
-            React.createElement(Tooltip, { title: isPipActive ? "Exit PiP" : "Enter PiP" },
+            React.createElement(Tooltip, { className: "whitespace-nowrap", title: isPipActive ? "Exit PiP" : "Enter PiP" },
                 React.createElement("div", { onClick: handlePipToggle },
                     React.createElement(PiPictureInPictureToggle, { className: iconClassName }))),
             config?.onClose && (React.createElement(React.Fragment, null,
                 React.createElement("div", { className: "w-[2px] h-10 bg-gray-500 hover:bg-gray-300 mx-2" }),
-                React.createElement("div", { onClick: config.onClose },
+                React.createElement("div", { onClick: handleClose },
                     React.createElement(Tooltip, { title: "Close" },
                         React.createElement(IoMdClose, { className: iconClassName }))))))));
 };
 
+const ControlButton = ({ onClick, icon, className, }) => (React__default.createElement("button", { onClick: onClick, className: `flex justify-center items-center h-full cursor-pointer ${className}` }, icon));
 const MiddleControls = () => {
-    const { videoRef, isPlaying, setIsPlaying, isBuffering, setIsBuffering } = useVideoStore();
-    const handlePlayPause = () => {
-        if (!videoRef)
+    const { videoRef, isPlaying, setIsPlaying } = useVideoStore();
+    const [isBuffering, setIsBuffering] = useState(false);
+    const videoElement = videoRef;
+    const handlePlayPause = useCallback(() => {
+        if (!videoElement)
             return;
-        if (videoRef.paused) {
-            videoRef
+        if (videoElement.paused) {
+            videoElement
                 .play()
-                .catch((error) => console.error("Error playing video:", error));
-            setIsPlaying(true);
+                .then(() => setIsPlaying(true))
+                .catch((err) => console.error("Error playing video:", err));
         }
         else {
-            videoRef.pause();
+            videoElement.pause();
             setIsPlaying(false);
         }
-    };
-    const handleBackword = () => {
-        if (!videoRef)
+    }, [videoElement, setIsPlaying]);
+    const handleBackward = useCallback(() => {
+        if (!videoElement)
             return;
-        videoRef.currentTime -= 10;
-    };
-    const handleForword = () => {
-        if (!videoRef)
-            return;
-        videoRef.currentTime += 10;
-    };
-    // Handle buffering state
-    useEffect(() => {
-        if (!videoRef)
+        videoElement.currentTime = Math.max(0, videoElement.currentTime - 10);
+    }, [videoElement]);
+    const handleForward = useCallback(() => {
+        if (!videoElement)
             return;
-        const handleWaiting = () => {
-            setIsBuffering(true);
-        };
-        const handlePlaying = () => {
-            setIsBuffering(false);
-        };
-        videoRef.addEventListener("waiting", handleWaiting);
-        videoRef.addEventListener("playing", handlePlaying);
-        return () => {
-            videoRef.removeEventListener("waiting", handleWaiting);
-            videoRef.removeEventListener("playing", handlePlaying);
-        };
-    }, [videoRef, setIsBuffering]);
+        videoElement.currentTime = Math.min(videoElement.duration, videoElement.currentTime + 10);
+    }, [videoElement]);
     useEffect(() => {
-        if (!videoRef)
+        if (!videoElement)
             return;
         const handleWaiting = () => setIsBuffering(true);
         const handlePlaying = () => setIsBuffering(false);
-        videoRef.addEventListener("waiting", handleWaiting);
-        videoRef.addEventListener("playing", handlePlaying);
+        videoElement.addEventListener("waiting", handleWaiting);
+        videoElement.addEventListener("playing", handlePlaying);
         return () => {
-            videoRef.removeEventListener("waiting", handleWaiting);
-            videoRef.removeEventListener("playing", handlePlaying);
+            videoElement.removeEventListener("waiting", handleWaiting);
+            videoElement.removeEventListener("playing", handlePlaying);
         };
-    }, [videoRef, setIsBuffering]);
-    //  keyboard controls
+    }, [videoElement]);
     useEffect(() => {
         const handleKeyDown = (e) => {
-            if (!videoRef)
+            if (!videoElement)
                 return;
             switch (e.code) {
                 case "Space":
@@ -801,31 +831,31 @@ const MiddleControls = () => {
                     handlePlayPause();
                     break;
                 case "ArrowLeft":
-                    handleBackword();
+                    e.preventDefault();
+                    handleBackward();
                     break;
                 case "ArrowRight":
-                    handleForword();
+                    e.preventDefault();
+                    handleForward();
                     break;
             }
         };
         window.addEventListener("keydown", handleKeyDown);
         return () => window.removeEventListener("keydown", handleKeyDown);
-    }, [videoRef, isPlaying]);
+    }, [videoElement, handlePlayPause, handleBackward, handleForward]);
     return (React__default.createElement("div", { className: "flex justify-center items-center" },
-        React__default.createElement("div", { onClick: handleBackword, className: "w-[15vw] flex justify-center items-center h-full cursor-pointer" },
-            React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "icon-class", fill: "currentColor", viewBox: "0 0 67 67" },
-                React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M33.5 0C52 0 67 15 67 33.5S52 67 33.5 67 0 52 0 33.5c.03-1.4 1.17-2.53 2.58-2.53 1.4 0 2.55 1.13 2.57 2.53 0 15.65 12.7 28.35 28.35 28.35 15.66 0 28.35-12.7 28.35-28.35 0-15.66-12.69-28.35-28.35-28.35h-.04c-7 0-13.76 2.61-18.94 7.3-.46.42-.91.85-1.34 1.29h6.58c1.42 0 2.57 1.16 2.57 2.58 0 1.42-1.15 2.58-2.57 2.58H6.01c-1.42 0-2.57-1.16-2.57-2.58V2.58C3.44 1.15 4.59 0 6.01 0c1.43 0 2.58 1.15 2.58 2.58v8.52c.78-.86 1.61-1.7 2.47-2.47A33.407 33.407 0 0 1 33.46 0h.04zM33.98 41.34c-1.6-2.21-2-5.2-2-7.85 0-2.65.4-5.63 2-7.83 1.44-1.97 3.47-2.84 5.88-2.84 2.41 0 4.42.87 5.86 2.84 1.61 2.21 2.03 5.16 2.03 7.83 0 2.66-.4 5.64-2 7.85-1.43 1.97-3.47 2.84-5.89 2.84-2.41 0-4.45-.86-5.88-2.84zm-9.73-12.77l-5 1.58v-4.21l5.87-2.65h4.28v20.47h-5.15V28.57zm17.61 9.96c.61-1.33.68-3.6.68-5.04s-.07-3.7-.68-5.02c-.4-.86-1.04-1.29-2-1.29-.95 0-1.59.42-1.99 1.29-.61 1.32-.68 3.58-.68 5.02 0 1.44.07 3.71.68 5.04.4.87 1.04 1.29 1.99 1.29.96 0 1.6-.42 2-1.29z" }))),
-        React__default.createElement("div", { onClick: handlePlayPause, className: "w-[10vw] flex justify-center items-center h-full cursor-pointer" }, isBuffering ? (React__default.createElement(Loader, { className: "w-24 h-24 lg:w-32 lg:h-32 animate-spin text-white" })) : isPlaying ? (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "icon-class", fill: "currentColor", viewBox: "0 0 67 67" },
-            React__default.createElement("path", { fillRule: "evenodd", d: "M46.332 5.773a4.125 4.125 0 0 0-4.125 4.125v46.75a4.127 4.127 0 0 0 4.125 4.125 4.127 4.127 0 0 0 4.125-4.125V9.898a4.125 4.125 0 0 0-4.125-4.125zM25.707 9.898v46.75a4.125 4.125 0 1 1-8.25 0V9.898a4.123 4.123 0 0 1 4.125-4.125 4.123 4.123 0 0 1 4.125 4.125z", clipRule: "evenodd" }))) : (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "icon-class", fill: "currentColor", viewBox: "0 0 67 67" },
-            React__default.createElement("path", { d: "M20.28 9.65c-2.205-1.268-4.026-.228-4.026 2.307v43.805c0 2.535 1.82 3.574 4.027 2.307l38.471-21.903a2.556 2.556 0 0 0 1.094-.935 2.514 2.514 0 0 0 0-2.743 2.556 2.556 0 0 0-1.093-.936L20.28 9.65z" })))),
-        React__default.createElement("div", { onClick: handleForword, className: "w-[15vw] flex justify-center items-center h-full cursor-pointer" },
-            React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "icon-class", fill: "currentColor", viewBox: "0 0 67 67" },
-                React__default.createElement("path", { fillRule: "evenodd", d: "M33.5 0C15 0 0 15 0 33.5S15 67 33.5 67 67 52 67 33.5a2.583 2.583 0 0 0-2.58-2.53c-1.4 0-2.55 1.13-2.57 2.53 0 15.66-12.69 28.35-28.35 28.35-15.65 0-28.35-12.7-28.35-28.35 0-15.66 12.7-28.35 28.35-28.35 7.3 0 13.96 2.76 18.99 7.3.46.42.9.85 1.34 1.29h-6.59a2.58 2.58 0 0 0 0 5.16h13.75c1.42 0 2.57-1.16 2.57-2.58V2.58c0-1.43-1.15-2.58-2.57-2.58-1.43 0-2.58 1.15-2.58 2.58v8.52c-.78-.87-1.61-1.7-2.47-2.48A33.446 33.446 0 0 0 33.54 0h-.04zM33.98 41.34c-1.6-2.21-2-5.2-2-7.85 0-2.65.4-5.63 2-7.83 1.44-1.97 3.47-2.84 5.88-2.84 2.41 0 4.42.87 5.86 2.84 1.61 2.21 2.03 5.16 2.03 7.83 0 2.66-.4 5.64-2 7.85-1.43 1.97-3.47 2.84-5.89 2.84-2.41 0-4.45-.87-5.88-2.84zm-9.73-12.77l-5 1.58v-4.21l5.87-2.65h4.28v20.47h-5.15V28.57zm17.61 9.96c.61-1.33.68-3.6.68-5.04s-.07-3.7-.68-5.02c-.4-.87-1.04-1.29-2-1.29-.95 0-1.59.42-1.99 1.29-.61 1.32-.68 3.58-.68 5.02 0 1.44.07 3.71.68 5.04.4.86 1.04 1.28 1.99 1.28.96 0 1.6-.42 2-1.28z" })))));
+        React__default.createElement(ControlButton, { onClick: handleBackward, className: "w-[15vw]", icon: React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "icon-class", fill: "currentColor", viewBox: "0 0 67 67" },
+                React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M33.5 0C52 0 67 15 67 33.5S52 67 33.5 67 0 52 0 33.5c.03-1.4 1.17-2.53 2.58-2.53 1.4 0 2.55 1.13 2.57 2.53 0 15.65 12.7 28.35 28.35 28.35 15.66 0 28.35-12.7 28.35-28.35 0-15.66-12.69-28.35-28.35-28.35h-.04c-7 0-13.76 2.61-18.94 7.3-.46.42-.91.85-1.34 1.29h6.58c1.42 0 2.57 1.16 2.57 2.58 0 1.42-1.15 2.58-2.57 2.58H6.01c-1.42 0-2.57-1.16-2.57-2.58V2.58C3.44 1.15 4.59 0 6.01 0c1.43 0 2.58 1.15 2.58 2.58v8.52c.78-.86 1.61-1.7 2.47-2.47A33.407 33.407 0 0 1 33.46 0h.04zM33.98 41.34c-1.6-2.21-2-5.2-2-7.85 0-2.65.4-5.63 2-7.83 1.44-1.97 3.47-2.84 5.88-2.84 2.41 0 4.42.87 5.86 2.84 1.61 2.21 2.03 5.16 2.03 7.83 0 2.66-.4 5.64-2 7.85-1.43 1.97-3.47 2.84-5.89 2.84-2.41 0-4.45-.86-5.88-2.84zm-9.73-12.77l-5 1.58v-4.21l5.87-2.65h4.28v20.47h-5.15V28.57zm17.61 9.96c.61-1.33.68-3.6.68-5.04s-.07-3.7-.68-5.02c-.4-.86-1.04-1.29-2-1.29-.95 0-1.59.42-1.99 1.29-.61 1.32-.68 3.58-.68 5.02 0 1.44.07 3.71.68 5.04.4.87 1.04 1.29 1.99 1.29.96 0 1.6-.42 2-1.29z" })) }),
+        React__default.createElement(ControlButton, { onClick: handlePlayPause, className: "w-[10vw]", icon: isBuffering ? (React__default.createElement(Loader, { className: "w-24 h-24 lg:w-32 lg:h-32 animate-spin text-white" })) : isPlaying ? (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "icon-class", fill: "currentColor", viewBox: "0 0 67 67" },
+                React__default.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M46.332 5.773a4.125 4.125 0 0 0-4.125 4.125v46.75a4.127 4.127 0 0 0 4.125 4.125 4.127 4.127 0 0 0 4.125-4.125V9.898a4.125 4.125 0 0 0-4.125-4.125zM25.707 9.898v46.75a4.125 4.125 0 1 1-8.25 0V9.898a4.123 4.123 0 0 1 4.125-4.125 4.123 4.123 0 0 1 4.125 4.125z" }))) : (React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "icon-class", fill: "currentColor", viewBox: "0 0 67 67" },
+                React__default.createElement("path", { d: "M20.28 9.65c-2.205-1.268-4.026-.228-4.026 2.307v43.805c0 2.535 1.82 3.574 4.027 2.307l38.471-21.903a2.556 2.556 0 0 0 1.094-.935 2.514 2.514 0 0 0 0-2.743 2.556 2.556 0 0 0-1.093-.936L20.28 9.65z" }))) }),
+        React__default.createElement(ControlButton, { onClick: handleForward, className: "w-[15vw]", icon: React__default.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", className: "icon-class", fill: "currentColor", viewBox: "0 0 67 67" },
+                React__default.createElement("path", { fillRule: "evenodd", d: "M33.5 0C15 0 0 15 0 33.5S15 67 33.5 67 67 52 67 33.5a2.583 2.583 0 0 0-2.58-2.53c-1.4 0-2.55 1.13-2.57 2.53 0 15.66-12.69 28.35-28.35 28.35-15.65 0-28.35-12.7-28.35-28.35 0-15.66 12.7-28.35 28.35-28.35 7.3 0 13.96 2.76 18.99 7.3.46.42.9.85 1.34 1.29h-6.59a2.58 2.58 0 0 0 0 5.16h13.75c1.42 0 2.57-1.16 2.57-2.58V2.58c0-1.43-1.15-2.58-2.57-2.58-1.43 0-2.58 1.15-2.58 2.58v8.52c-.78-.87-1.61-1.7-2.47-2.48A33.446 33.446 0 0 0 33.54 0h-.04zM33.98 41.34c-1.6-2.21-2-5.2-2-7.85 0-2.65.4-5.63 2-7.83 1.44-1.97 3.47-2.84 5.88-2.84 2.41 0 4.42.87 5.86 2.84 1.61 2.21 2.03 5.16 2.03 7.83 0 2.66-.4 5.64-2 7.85-1.43 1.97-3.47 2.84-5.89 2.84-2.41 0-4.45-.87-5.88-2.84zm-9.73-12.77l-5 1.58v-4.21l5.87-2.65h4.28v20.47h-5.15V28.57zm17.61 9.96c.61-1.33.68-3.6.68-5.04s-.07-3.7-.68-5.02c-.4-.87-1.04-1.29-2-1.29-.95 0-1.59.42-1.99 1.29-.61 1.32-.68 3.58-.68 5.02 0 1.44.07 3.71.68 5.04.4.86 1.04 1.28 1.99 1.28.96 0 1.6-.42 2-1.28z" })) })));
 };
 
-const VideoPlayerControls = ({ config, height, width, }) => {
+const VideoPlayerControls = ({ config }) => {
     return (React.createElement("div", { className: "px-20" },
-        React.createElement("div", { className: `absolute top-0 left-0 ${height || "h-full"} ${width || "w-full"} bg-[rgba(0,0,0,0.5)] flex flex-col justify-between` },
+        React.createElement("div", { className: "absolute top-0 left-0 h-full w-full bg-[rgba(0,0,0,0.5)] flex flex-col justify-between" },
             React.createElement(ControlsHeader, { config: config?.headerConfig?.config }),
             React.createElement(MiddleControls, null),
             React.createElement(BottomControls, { config: config?.bottomConfig?.config }))));
@@ -848,71 +878,59 @@ const Overlay = ({ config }) => {
     const controlsTimerRef = useRef(null);
     const { setControls, controls, showCountdown, countdownTime, setShowCountdown, setAutoPlayNext, setCurrentEpisodeIndex, episodeList, setCountdownTime, videoRef, currentEpisodeIndex, } = useVideoStore();
     const { onClose } = config?.headerConfig?.config || {};
-    const handleMouseEnter = useCallback(() => {
-        const videoPlayerControls = document?.getElementById("videoPlayerControls");
-        if (videoPlayerControls) {
-            videoPlayerControls.classList.remove("noCursor");
-        }
-        setControls(true);
+    const HIDE_DELAY = 2000;
+    const resetControlsTimer = useCallback(() => {
         if (controlsTimerRef.current) {
             clearTimeout(controlsTimerRef.current);
         }
         controlsTimerRef.current = setTimeout(() => {
             setControls(false);
+            const videoPlayerControls = document?.getElementById("videoPlayerControls");
             if (videoPlayerControls) {
                 videoPlayerControls.classList.add("noCursor");
             }
-        }, 2000);
+        }, HIDE_DELAY);
     }, [setControls]);
-    React.useEffect(() => {
+    const handleMouseEnter = useCallback(() => {
+        const videoPlayerControls = document?.getElementById("videoPlayerControls");
+        if (videoPlayerControls) {
+            videoPlayerControls.classList.remove("noCursor");
+        }
+        setControls(true);
+        resetControlsTimer();
+    }, [setControls, resetControlsTimer]);
+    useEffect(() => {
+        return () => {
+            if (controlsTimerRef.current) {
+                clearTimeout(controlsTimerRef.current);
+            }
+        };
+    }, []);
+    useEffect(() => {
         let timer;
         if (showCountdown && countdownTime > 0 && episodeList.length > 0) {
             timer = setInterval(() => {
                 setCountdownTime(countdownTime - 1);
             }, 1000);
         }
-        else if (showCountdown && countdownTime === 0 && episodeList.length > 0) {
-            const nextIndex = currentEpisodeIndex + 1;
-            if (nextIndex < episodeList.length) {
-                setCurrentEpisodeIndex(nextIndex);
-                setAutoPlayNext(true);
-                if (videoRef && episodeList[nextIndex]) {
-                    videoRef.src = episodeList[nextIndex].url;
-                    videoRef
-                        .play()
-                        .catch((err) => console.error("Auto-play failed:", err));
-                }
-            }
-            else {
-                if (onClose)
-                    onClose();
-            }
-            setShowCountdown(false);
-        }
         return () => {
             if (timer)
                 clearInterval(timer);
         };
-    }, [
-        showCountdown,
-        countdownTime,
-        episodeList.length,
-        setCountdownTime,
-        setCurrentEpisodeIndex,
-        currentEpisodeIndex,
-        setAutoPlayNext,
-        videoRef,
-        episodeList,
-        onClose,
-    ]);
+    }, [showCountdown, countdownTime, episodeList.length, setCountdownTime]);
     const handleNextEpisodeManually = () => {
         const nextIndex = currentEpisodeIndex + 1;
         if (nextIndex < episodeList.length && videoRef && episodeList[nextIndex]) {
             setCurrentEpisodeIndex(nextIndex);
             setAutoPlayNext(true);
             videoRef.src = episodeList[nextIndex].url;
-            videoRef.play().catch((err) => console.error("Manual play failed:", err));
+            videoRef
+                .play()
+                .catch((err) => console.error("Manual play failed:", err));
             setShowCountdown(false);
+            setCountdownTime(10);
+            setControls(true);
+            resetControlsTimer();
         }
         else if (onClose) {
             onClose();
@@ -922,7 +940,7 @@ const Overlay = ({ config }) => {
         controls && React.createElement(VideoPlayerControls, { config: config }),
         showCountdown &&
             episodeList.length > 0 &&
-            currentEpisodeIndex + 1 < episodeList.length && (React.createElement(VideoActionButton, { text: "Next Episode", onClick: handleNextEpisodeManually, icon: React.createElement(FaGooglePlay, { className: "text-black" }), disabled: currentEpisodeIndex + 1 >= episodeList.length, position: "right" }))));
+            currentEpisodeIndex + 1 < episodeList.length && (React.createElement(VideoActionButton, { text: "Next Episode", onClick: handleNextEpisodeManually, icon: React.createElement(ArrowRight, { className: "h-5 w-5 text-gray-900" }), disabled: currentEpisodeIndex + 1 >= episodeList.length, position: "right" }))));
 };
 
 const SubtitleOverlay = ({ styleConfig }) => {
@@ -1039,39 +1057,195 @@ const SubtitleOverlay = ({ styleConfig }) => {
     return React__default.createElement("div", { style: subtitleStyle }, currentSubtitle);
 };
 
+/**
+ * Video Source Hook
+ *
+ * Manages video source loading and streaming technology detection
+ * Supports HLS.js, DASH.js, and native HTML5 video
+ *
+ * Features:
+ * - Automatic stream type detection
+ * - HLS.js fallback for older browsers
+ * - DASH.js support with proper initialization
+ * - Quality level extraction for all stream types
+ * - Error handling and cleanup
+ */
 const useVideoSource = (trackSrc, type) => {
-    const { videoRef, setQualityLevels, setHlsInstance } = useVideoStore();
+    const { videoRef, setQualityLevels, setHlsInstance, setDashInstance, setStreamType } = useVideoStore();
     useEffect(() => {
         if (!videoRef)
             return;
         const getVideoExtension = getExtensionFromUrl(trackSrc);
         const contentType = type || getVideoExtension;
-        if (contentType === "mp4") {
+        // Set stream type in store for quality manager
+        setStreamType(contentType);
+        // Handle MP4 and other simple formats
+        if (contentType === "mp4" || contentType === "other") {
             videoRef.src = trackSrc;
             setQualityLevels([]);
+            return;
         }
-        else if (contentType === "hls") {
+        // Handle HLS streams
+        if (contentType === "hls") {
+            // Native HLS support (Safari/iOS)
             if (videoRef?.canPlayType("application/vnd.apple.mpegurl")) {
+                console.log('📱 Using native HLS support');
                 videoRef.src = trackSrc;
+                // For native HLS, we can't control quality directly, but we can still extract info
+                const handleLoadedMetadata = () => {
+                    const videoElement = videoRef;
+                    if (videoElement.videoTracks && videoElement.videoTracks.length > 0) {
+                        // Extract quality levels from native HLS
+                        const tracks = Array.from(videoElement.videoTracks).map((track, index) => ({
+                            height: track.height || 720,
+                            bitrate: track.bandwidth || 0,
+                            originalIndex: index
+                        }));
+                        setQualityLevels(tracks);
+                        console.log('✅ Native HLS quality levels:', tracks);
+                    }
+                    else {
+                        // Fallback quality levels for native HLS
+                        const defaultLevels = [
+                            { height: 360, bitrate: 800000, originalIndex: 0 },
+                            { height: 480, bitrate: 1400000, originalIndex: 1 },
+                            { height: 720, bitrate: 2800000, originalIndex: 2 },
+                            { height: 1080, bitrate: 5000000, originalIndex: 3 },
+                        ];
+                        setQualityLevels(defaultLevels);
+                        console.log('✅ Native HLS fallback quality levels:', defaultLevels);
+                    }
+                    // Even for native HLS, set a mock HLS instance to indicate it's HLS
+                    // This allows the quality manager to know we're dealing with HLS
+                    setHlsInstance(null); // null indicates native HLS, not HLS.js
+                };
+                videoRef.addEventListener('loadedmetadata', handleLoadedMetadata);
+                return () => {
+                    videoRef.removeEventListener('loadedmetadata', handleLoadedMetadata);
+                };
             }
+            // HLS.js support (Chrome/Firefox/etc)
             else if (Hls.isSupported()) {
-                const hls = new Hls();
+                console.log('🔧 Using HLS.js for HLS streaming');
+                const hls = new Hls({
+                    // HLS.js configuration for optimal performance
+                    enableWorker: true,
+                    lowLatencyMode: true,
+                    backBufferLength: 90
+                });
                 hls.loadSource(trackSrc);
                 hls.attachMedia(videoRef);
+                console.log('✅ HLS.js instance created and attached');
                 setHlsInstance(hls);
+                // Extract quality levels when manifest is parsed
                 hls.on(Hls.Events.MANIFEST_PARSED, () => {
-                    setQualityLevels(hls.levels);
+                    const levels = hls.levels.map((level, index) => ({
+                        height: level.height,
+                        bitrate: level.bitrate,
+                        originalIndex: index
+                    }));
+                    setQualityLevels(levels);
+                    console.log('✅ HLS.js quality levels:', levels);
                 });
+                // Log level switches for debugging
+                hls.on(Hls.Events.LEVEL_SWITCHED, (event, data) => {
+                    console.log('🔄 HLS level switched to:', data.level, hls.levels?.[data.level]);
+                });
+                // Error handling
+                hls.on(Hls.Events.ERROR, (event, data) => {
+                    console.error('❌ HLS.js error:', data);
+                });
+                // Cleanup
                 return () => {
                     hls.destroy();
+                    console.log('🧹 HLS.js instance destroyed');
                 };
             }
+            else {
+                // Fallback when HLS.js is not supported
+                console.log('📱 Using fallback HLS (direct src)');
+                videoRef.src = trackSrc;
+                setHlsInstance(null); // null indicates native HLS fallback
+                // Set fallback quality levels
+                const defaultLevels = [
+                    { height: 360, bitrate: 800000, originalIndex: 0 },
+                    { height: 480, bitrate: 1400000, originalIndex: 1 },
+                    { height: 720, bitrate: 2800000, originalIndex: 2 },
+                    { height: 1080, bitrate: 5000000, originalIndex: 3 },
+                ];
+                setQualityLevels(defaultLevels);
+                console.log('✅ HLS fallback quality levels:', defaultLevels);
+            }
         }
-        else {
-            videoRef.src = trackSrc;
-            setQualityLevels([]);
+        // Handle DASH streams
+        else if (contentType === "dash") {
+            // DASH.js support
+            if (dashjs.supportsMediaSource()) {
+                console.log('🔧 Using DASH.js for DASH streaming');
+                const player = dashjs.MediaPlayer().create();
+                // DASH.js configuration for optimal performance
+                player.updateSettings({
+                    streaming: {
+                        buffer: {
+                            fastSwitchEnabled: true, // Enable fast quality switching
+                            bufferTimeAtTopQuality: 30, // Buffer 30s at top quality
+                            bufferTimeAtTopQualityLongForm: 60 // Buffer 60s for long content
+                        },
+                        // Note: Some ABR settings may vary by DASH.js version
+                        // Check documentation for your specific version
+                    }
+                });
+                player.initialize(videoRef, trackSrc, true);
+                console.log('✅ DASH.js instance created and initialized');
+                setDashInstance(player);
+                // Extract quality levels when manifest is loaded
+                const handleManifestLoaded = () => {
+                    try {
+                        const representations = player.getRepresentationsByType('video');
+                        if (representations && representations.length > 0) {
+                            const levels = representations.map((rep, index) => ({
+                                height: rep.height || Math.round(rep.bandwidth / 1000) || 0,
+                                bitrate: rep.bandwidth,
+                                originalIndex: index,
+                                id: rep.id
+                            }));
+                            setQualityLevels(levels);
+                            console.log('✅ DASH.js quality levels:', levels);
+                        }
+                        else {
+                            console.warn('⚠️ No DASH video representations found');
+                            setQualityLevels([]);
+                        }
+                    }
+                    catch (error) {
+                        console.error('❌ Error getting DASH quality levels:', error);
+                        setQualityLevels([]);
+                    }
+                };
+                // Listen for manifest loaded event
+                player.on('manifestLoaded', handleManifestLoaded);
+                // Log quality changes for debugging
+                player.on('qualityChange', (e) => {
+                    console.log('🔄 DASH quality changed to:', e.newQuality, e);
+                });
+                // Error handling
+                player.on('error', (e) => {
+                    console.error('❌ DASH.js error:', e);
+                });
+                // Cleanup
+                return () => {
+                    player.reset();
+                    console.log('🧹 DASH.js instance reset');
+                };
+            }
+            else {
+                console.warn('⚠️ DASH.js not supported in this browser');
+            }
         }
-    }, [trackSrc, videoRef, type, setQualityLevels, setHlsInstance]);
+        // Fallback for unsupported formats
+        videoRef.src = trackSrc;
+        setQualityLevels([]);
+    }, [trackSrc, videoRef, type, setQualityLevels, setHlsInstance, setDashInstance, setStreamType]);
 };
 
 const useSubtitles = (subtitles) => {
@@ -1232,8 +1406,7 @@ const useVideoTracking = (tracking, episodeList, currentEpisodeIndex, onClose) =
         setShowCountdown,
     ]);
     useEffect(() => {
-        const handleUnload = (e) => {
-            e.preventDefault();
+        const handleUnload = () => {
             if (startTime.current) {
                 const elapsedTime = (Date.now() - startTime.current) / 1000;
                 const getCurrentTime = localStorage.getItem("current_time");
@@ -1247,10 +1420,8 @@ const useVideoTracking = (tracking, episodeList, currentEpisodeIndex, onClose) =
             }
             localStorage.setItem("current_time", "0");
         };
-        window.addEventListener("beforeunload", handleUnload);
         window.addEventListener("unload", handleUnload);
         return () => {
-            window.removeEventListener("beforeunload", handleUnload);
             window.removeEventListener("unload", handleUnload);
         };
     }, [tracking]);
@@ -1326,7 +1497,7 @@ const useEpisodes = (episodeList, currentEpisodeIndex, nextEpisodeConfig) => {
 };
 
 const useVideoEvents = () => {
-    const { setCurrentTime, setDuration } = useVideoStore();
+    const { setCurrentTime, setDuration, setBufferedProgress, setIsPlaying } = useVideoStore();
     const onRightClick = (e) => {
         e.preventDefault();
     };
@@ -1346,18 +1517,51 @@ const useVideoEvents = () => {
             setDuration(e?.currentTarget?.duration);
         }
     };
+    const onProgress = (e) => {
+        const video = e.currentTarget;
+        if (video.buffered.length > 0 &&
+            video.duration > 0 &&
+            !isNaN(video.duration)) {
+            let bufferedEnd = 0;
+            for (let i = 0; i < video.buffered.length; i++) {
+                if (video.currentTime >= video.buffered.start(i) &&
+                    video.currentTime <= video.buffered.end(i)) {
+                    bufferedEnd = video.buffered.end(i);
+                    break;
+                }
+            }
+            if (bufferedEnd === 0 && video.buffered.length > 0) {
+                bufferedEnd = video.buffered.end(video.buffered.length - 1);
+            }
+            const bufferedProgress = Math.min((bufferedEnd / video.duration) * 100, 100);
+            setBufferedProgress(bufferedProgress);
+        }
+    };
+    const onPlay = () => {
+        setIsPlaying(true);
+    };
+    const onPause = () => {
+        setIsPlaying(false);
+    };
+    const onEnded = (e) => {
+        setIsPlaying(false);
+    };
     return {
         onRightClick,
         onSeeked,
         onTimeUpdate,
         onLoadedMetadata,
+        onProgress,
+        onPlay,
+        onPause,
+        onEnded,
     };
 };
 
 var css_248z = ".video-player video::cue {\n  display: none !important;\n  opacity: 0 !important;\n  visibility: hidden !important;\n}\n\n.custom-subtitle-overlay {\n  position: absolute;\n  bottom: 10%;\n  left: 50%;\n  transform: translateX(-50%);\n\n  font-size: 1.5rem;\n  font-weight: 600;\n  line-height: 1.4;\n  text-align: center;\n\n  color: #000;\n  background: rgba(255, 255, 255, 0.6);\n  backdrop-filter: blur(8px);\n  -webkit-backdrop-filter: blur(8px);\n\n  padding: 10px 16px;\n  border-radius: 10px;\n  border: 1px solid rgba(0, 0, 0, 0.1);\n  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);\n\n  max-width: 70%;\n  min-width: fit-content;\n\n  transition: all 0.2s ease-in-out;\n}\n\n.custom-subtitle-overlay:hover {\n  transform: translateX(-50%) scale(1.02);\n  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);\n}\n\n@media (max-width: 768px) {\n  .custom-subtitle-overlay {\n    font-size: 1.25rem;\n    padding: 8px 14px;\n    bottom: 8%;\n    max-width: 85%;\n  }\n}\n\n@media (max-width: 480px) {\n  .custom-subtitle-overlay {\n    font-size: 1rem;\n    padding: 6px 10px;\n    bottom: 6%;\n    max-width: 90%;\n  }\n}\n\n@media (prefers-contrast: high) {\n  .custom-subtitle-overlay {\n    background: #ffff00;\n    color: #000;\n    border: 3px solid #000;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .custom-subtitle-overlay {\n    transition: none;\n  }\n\n  .custom-subtitle-overlay:hover {\n    transform: translateX(-50%);\n  }\n}\n";
 styleInject(css_248z,{"insertAt":"top"});
 
-const VideoPlayer = ({ trackSrc, trackTitle, intro, onClose, trackPoster, isTrailer, className, type, height, width, timeCodes, getPreviewScreenUrl, tracking, subtitles, episodeList, currentEpisodeIndex = 0, nextEpisodeConfig, subtitleStyle, }) => {
+const VideoPlayer = ({ trackSrc, trackTitle, intro, onClose, onError, trackPoster, isTrailer, className, type, height, width, timeCodes, getPreviewScreenUrl, tracking, subtitles, episodeList, currentEpisodeIndex = 0, onEnded, nextEpisodeConfig, subtitleStyle, showControls = true, isMute = false, }) => {
     const { setVideoRef, setVideoWrapperRef, videoRef } = useVideoStore();
     useVideoSource(trackSrc, type);
     useSubtitles(subtitles);
@@ -1365,11 +1569,16 @@ const VideoPlayer = ({ trackSrc, trackTitle, intro, onClose, trackPoster, isTrai
     useVideoTracking(tracking, episodeList, currentEpisodeIndex, onClose);
     const { showSkipIntro, handleSkipIntro } = useIntroSkip(intro);
     useEpisodes(episodeList, currentEpisodeIndex, nextEpisodeConfig);
-    const { onSeeked, onTimeUpdate, onLoadedMetadata } = useVideoEvents();
+    const { onSeeked, onTimeUpdate, onLoadedMetadata, onProgress, onPlay, onPause, onEnded: onEndedHook, } = useVideoEvents();
     return (React__default.createElement("div", { ref: setVideoWrapperRef, className: `video-player ${height || "h-full"} ${width || "w-full"} mx-auto absolute` },
         trackPoster && (React__default.createElement("div", { className: "pip-poster absolute inset-0 bg-center bg-cover hidden", style: { backgroundImage: `url(${trackPoster})` } })),
-        React__default.createElement("video", { autoPlay: true, muted: true, playsInline: true, preload: "metadata", ref: setVideoRef, onSeeked: onSeeked, poster: trackPoster, crossOrigin: "anonymous", controls: false, disableRemotePlayback: true, controlsList: "nodownload", onContextMenu: (e) => e.preventDefault(), onTimeUpdate: onTimeUpdate, onLoadedMetadata: onLoadedMetadata, className: `w-full h-full relative ${className}` }),
-        React__default.createElement(Overlay, { config: {
+        React__default.createElement("video", { autoPlay: true, playsInline: true, preload: "metadata", ref: setVideoRef, onSeeked: onSeeked, poster: trackPoster, crossOrigin: "anonymous", controls: false, disableRemotePlayback: true, controlsList: "nodownload", onContextMenu: (e) => e.preventDefault(), onTimeUpdate: onTimeUpdate, onLoadedMetadata: onLoadedMetadata, onProgress: onProgress, onPlay: onPlay, onPause: onPause, onEnded: (e) => {
+                onEndedHook(e);
+                onEnded?.(e);
+            }, onError: (e) => {
+                onError?.(e);
+            }, muted: isMute, className: `w-full h-full relative ${className}` }),
+        showControls && (React__default.createElement(Overlay, { config: {
                 headerConfig: {
                     config: {
                         isTrailer: isTrailer,
@@ -1387,7 +1596,7 @@ const VideoPlayer = ({ trackSrc, trackTitle, intro, onClose, trackPoster, isTrai
                         },
                     },
                 },
-            } }),
+            } })),
         React__default.createElement(SubtitleOverlay, { styleConfig: subtitleStyle }),
         showSkipIntro && (React__default.createElement(VideoActionButton, { text: "Skip Intro", onClick: handleSkipIntro, position: "left" }))));
 };

package/dist/store/slices/index.d.ts

@@ -6,3 +6,4 @@ export { createVideoQualitySlice } from "./videoQualitySlice";
 export { createSubtitlesSlice } from "./subtitlesSlice";
 export { createEpisodesSlice } from "./episodesSlice";
 export { createIntroSlice } from "./introSlice";
+export { createResetSlice } from "./resetSlice";

package/dist/store/slices/resetSlice.d.ts

@@ -0,0 +1,5 @@
+import { StateCreator } from "zustand";
+import { StoreResetState, VideoState } from "../types/StoreTypes";
+export declare const createResetSlice: StateCreator<VideoState, [
+], [
+], StoreResetState>;

package/dist/store/types/StoreTypes.d.ts

@@ -1,5 +1,5 @@
 import Hls from "hls.js";
-import { Dispatch, SetStateAction } from "react";
+import * as dashjs from "dashjs";
 export interface VideoRefsState {
     videoRef: HTMLVideoElement | null;
     setVideoRef: (ref: HTMLVideoElement) => void;
@@ -7,8 +7,8 @@ export interface VideoRefsState {
     setVideoWrapperRef: (ref: HTMLDivElement) => void;
 }
 export interface VideoPlaybackState {
-    playing: boolean | ((prevState: boolean) => boolean);
-    setPlaying: Dispatch<SetStateAction<boolean>>;
+    playing: boolean;
+    setPlaying: (playing: boolean) => void;
     isBuffering: boolean;
     setIsBuffering: (isBuffering: boolean) => void;
     isPlaying: boolean;
@@ -23,20 +23,38 @@ export interface VideoTimingState {
     setCurrentTime: (currentTime: number) => void;
     duration: number;
     setDuration: (duration: number) => void;
+    bufferedProgress: number;
+    setBufferedProgress: (progress: number) => void;
 }
 export interface VideoControlsState {
     controls: boolean;
     setControls: (controls: boolean) => void;
     isFullscreen: boolean;
     setIsFullscreen: (isFullscreen: boolean) => void;
+    controlsVisible: boolean;
+    setControlsVisible: (visible: boolean) => void;
 }
 export interface VideoQualityState {
-    hlsInstance?: Hls;
-    setHlsInstance: (hlsInstance: Hls) => void;
-    qualityLevels?: Hls["levels"];
-    setQualityLevels: (qualityLevels: Hls["levels"]) => void;
+    hlsInstance?: Hls | null;
+    setHlsInstance: (hlsInstance: Hls | null) => void;
+    dashInstance?: dashjs.MediaPlayerClass;
+    setDashInstance: (dashInstance: dashjs.MediaPlayerClass) => void;
+    qualityLevels?: Array<{
+        height: number;
+        bitrate?: number;
+        originalIndex: number;
+        id?: string;
+    }>;
+    setQualityLevels: (qualityLevels: Array<{
+        height: number;
+        bitrate?: number;
+        originalIndex: number;
+        id?: string;
+    }>) => void;
     activeQuality: string;
     setActiveQuality: (activeQuality: string) => void;
+    streamType: "hls" | "dash" | "mp4" | "other";
+    setStreamType: (streamType: "hls" | "dash" | "mp4" | "other") => void;
 }
 export interface SubtitleTrack {
     lang: string;
@@ -70,5 +88,8 @@ export interface IntroState {
     showIntroSkip: boolean;
     setShowIntroSkip: (show: boolean) => void;
 }
-export interface VideoState extends VideoRefsState, VideoPlaybackState, VideoTimingState, VideoControlsState, VideoQualityState, SubtitlesState, EpisodesState, IntroState {
+export interface StoreResetState {
+    resetStore: () => void;
+}
+export interface VideoState extends VideoRefsState, VideoPlaybackState, VideoTimingState, VideoControlsState, VideoQualityState, SubtitlesState, EpisodesState, IntroState, StoreResetState {
 }

package/package.json

@@ -1,14 +1,9 @@
 {
   "name": "@zezosoft/react-player",
-  "version": "0.0.6",
+  "version": "0.0.8",
   "main": "dist/index.js",
   "type": "module",
   "types": "dist/index.d.ts",
-  "scripts": {
-    "build": "npx rollup -c",
-    "dev": "npx rollup -c -w",
-    "prepare": "npm run build"
-  },
   "files": [
     "dist"
   ],
@@ -36,8 +31,8 @@
   "devDependencies": {
     "@rollup/plugin-typescript": "^12.1.2",
     "@tailwindcss/postcss": "^4.0.14",
-    "@types/react": "^19.0.10",
     "@types/node": "^24.4.0",
+    "@types/react": "^19.0.10",
     "hls.js": "^1.5.20",
     "lucide-react": "^0.481.0",
     "postcss": "^8.5.3",
@@ -57,6 +52,12 @@
     "zustand": "^5.0.3"
   },
   "dependencies": {
-    "react-icons": "^5.5.0"
+    "dashjs": "^5.0.3",
+    "react-icons": "^5.5.0",
+    "screenfull": "^6.0.2"
+  },
+  "scripts": {
+    "build": "npx rollup -c",
+    "dev": "npx rollup -c -w"
   }
-}
+}