@therealtinhtute/baroiplayer 1.0.0 → 1.0.1

package/dist/src/hooks/use-media-metadata.ts

@@ -0,0 +1,89 @@
+import { use, cache } from 'react'
+
+export interface MediaMetadata {
+  title?: string
+  artist?: string
+  duration: number
+  format: string
+  width?: number
+  height?: number
+}
+
+// Cache metadata fetches to prevent duplicate requests
+const fetchMetadata = cache(async (src: string): Promise<MediaMetadata> => {
+  try {
+    // Create a video element to get metadata
+    const video = document.createElement('video')
+    video.crossOrigin = 'anonymous'
+    video.preload = 'metadata'
+    
+    return new Promise((resolve, reject) => {
+      const timeout = setTimeout(() => {
+        video.removeEventListener('loadedmetadata', onMetadata)
+        video.removeEventListener('error', onError)
+        reject(new Error('Metadata loading timeout'))
+      }, 10000) // 10 second timeout
+      
+      const onMetadata = () => {
+        clearTimeout(timeout)
+        video.removeEventListener('loadedmetadata', onMetadata)
+        video.removeEventListener('error', onError)
+        
+        const metadata: MediaMetadata = {
+          duration: video.duration || 0,
+          format: getFormatFromSrc(src),
+          width: video.videoWidth || undefined,
+          height: video.videoHeight || undefined,
+        }
+        
+        resolve(metadata)
+      }
+      
+      const onError = (error: Event) => {
+        clearTimeout(timeout)
+        video.removeEventListener('loadedmetadata', onMetadata)
+        video.removeEventListener('error', onError)
+        reject(new Error('Failed to load media metadata'))
+      }
+      
+      video.addEventListener('loadedmetadata', onMetadata)
+      video.addEventListener('error', onError)
+      video.src = src
+    })
+  } catch (error) {
+    throw new Error(`Failed to fetch metadata: ${error instanceof Error ? error.message : 'Unknown error'}`)
+  }
+})
+
+function getFormatFromSrc(src: string): string {
+  const url = new URL(src, window.location.href)
+  const pathname = url.pathname.toLowerCase()
+  
+  if (pathname.endsWith('.mp4')) return 'MP4'
+  if (pathname.endsWith('.webm')) return 'WebM'
+  if (pathname.endsWith('.ogg')) return 'OGG'
+  if (pathname.endsWith('.m3u8')) return 'HLS'
+  if (pathname.endsWith('.mpd')) return 'DASH'
+  
+  return 'Unknown'
+}
+
+export function useMediaMetadata(src: string): MediaMetadata {
+  // Use the React 19 use() hook for async data
+  return use(fetchMetadata(src))
+}
+
+// Utility function to format time
+export function formatTime(seconds: number): string {
+  if (!isFinite(seconds) || isNaN(seconds)) return '0:00'
+  
+  const hours = Math.floor(seconds / 3600)
+  const minutes = Math.floor((seconds % 3600) / 60)
+  const secs = Math.floor(seconds % 60)
+  
+  if (hours > 0) {
+    return `${hours}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
+  } else {
+    return `${minutes}:${secs.toString().padStart(2, '0')}`
+  }
+}

package/dist/src/hooks/use-media-optimistic.d.ts

@@ -0,0 +1,36 @@
+import type { MediaState } from "../context/media-context";
+import type { OptimisticMediaAction, EnhancedMediaStore } from "../context/media-store";
+export declare function useMediaOptimistic(store: EnhancedMediaStore): {
+    dispatchOptimistic: (action: OptimisticMediaAction) => Promise<void>;
+    togglePlayPause: () => Promise<void>;
+    setVolumeOptimistic: (volume: number) => Promise<void>;
+    seekOptimistic: (time: number) => Promise<void>;
+    toggleMuteOptimistic: () => Promise<void>;
+    toggleFullscreenOptimistic: () => Promise<void>;
+    setPlaybackRateOptimistic: (rate: number) => Promise<void>;
+    toggleSubtitlesOptimistic: () => Promise<void>;
+    isPlaying: boolean;
+    currentTime: number;
+    volume: number;
+    isMuted: boolean;
+    isFullscreen: boolean;
+    playbackRate: number;
+    subtitlesShowing: boolean;
+    previewTime: number | null;
+    progress: number;
+    formattedTime: string;
+    formattedDuration: string;
+    canPlay: boolean;
+    hasError: boolean;
+    isBuffering: boolean;
+    state: MediaState;
+    actualState: MediaState;
+};
+export declare function useOptimisticUpdates(store: EnhancedMediaStore): boolean;
+export declare function useMediaStateComparison(store: EnhancedMediaStore): {
+    actualState: MediaState;
+    optimisticState: MediaState;
+    differences: any[];
+    hasOptimisticUpdates: boolean;
+};
+//# sourceMappingURL=use-media-optimistic.d.ts.map

package/dist/src/hooks/use-media-optimistic.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-optimistic.d.ts","sourceRoot":"","sources":["use-media-optimistic.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAA;AAC1D,OAAO,KAAK,EAAE,qBAAqB,EAAE,kBAAkB,EAAE,MAAM,wBAAwB,CAAA;AA6DvF,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,kBAAkB;iCAaC,qBAAqB;;kCAuB5C,MAAM;2BAWb,MAAM;;;sCA+BK,MAAM;;;;;;;;;;;;;;;;;;EAqD/C;AAkBD,wBAAgB,oBAAoB,CAAC,KAAK,EAAE,kBAAkB,WAgB7D;AAGD,wBAAgB,uBAAuB,CAAC,KAAK,EAAE,kBAAkB;;;;;EAoChE"}

package/dist/src/hooks/use-media-optimistic.js

@@ -0,0 +1,205 @@
+"use client";
+import React, { useOptimistic } from "react";
+// Optimistic update reducer function
+function optimisticMediaReducer(state, action) {
+    if (!action.optimistic)
+        return state;
+    // Apply immediate optimistic updates for better UX
+    switch (action.type) {
+        case "PLAY":
+            return { ...state, isPlaying: true, error: null };
+        case "PAUSE":
+            return { ...state, isPlaying: false };
+        case "SEEK":
+            return { ...state, currentTime: action.detail };
+        case "SET_VOLUME":
+            return { ...state, volume: Math.max(0, Math.min(1, action.detail)) };
+        case "MUTE":
+            return { ...state, isMuted: true };
+        case "UNMUTE":
+            return { ...state, isMuted: false };
+        case "TOGGLE_MUTE":
+            return { ...state, isMuted: !state.isMuted };
+        case "ENTER_FULLSCREEN":
+            return { ...state, isFullscreen: true };
+        case "EXIT_FULLSCREEN":
+            return { ...state, isFullscreen: false };
+        case "SET_PLAYBACK_RATE":
+            return { ...state, playbackRate: action.detail };
+        case "TOGGLE_SUBTITLES":
+            return { ...state, subtitlesShowing: !state.subtitlesShowing };
+        case "PREVIEW_TIME":
+            return { ...state, previewTime: action.detail };
+        case "CLEAR_PREVIEW":
+            return {
+                ...state,
+                previewTime: null,
+                previewImage: null,
+                previewCoords: null
+            };
+        default:
+            return state;
+    }
+}
+// Media optimistic state hook using React 19's useOptimistic
+export function useMediaOptimistic(store) {
+    const actualState = React.useSyncExternalStore(store.subscribe, store.getState, store.getState);
+    const [optimisticState, addOptimistic] = useOptimistic(actualState, optimisticMediaReducer);
+    // Enhanced dispatch that uses optimistic updates
+    const dispatchOptimistic = React.useCallback(async (action) => {
+        // Add optimistic update immediately
+        if (action.optimistic) {
+            addOptimistic(action);
+        }
+        // Dispatch the actual action
+        await store.dispatchOptimistic(action);
+    }, [store, addOptimistic]);
+    // Quick actions with optimistic updates
+    const optimisticActions = React.useMemo(() => ({
+        // Play/Pause with immediate feedback
+        togglePlayPause: async () => {
+            const action = {
+                type: optimisticState.isPlaying ? "PAUSE" : "PLAY",
+                optimistic: true,
+                timestamp: Date.now()
+            };
+            await dispatchOptimistic(action);
+        },
+        // Volume control with immediate slider feedback
+        setVolumeOptimistic: async (volume) => {
+            const action = {
+                type: "SET_VOLUME",
+                detail: Math.max(0, Math.min(1, volume)),
+                optimistic: true,
+                timestamp: Date.now()
+            };
+            await dispatchOptimistic(action);
+        },
+        // Seek with immediate scrub feedback
+        seekOptimistic: async (time) => {
+            const action = {
+                type: "SEEK",
+                detail: time,
+                optimistic: true,
+                timestamp: Date.now()
+            };
+            await dispatchOptimistic(action);
+        },
+        // Mute toggle with immediate icon change
+        toggleMuteOptimistic: async () => {
+            const action = {
+                type: "TOGGLE_MUTE",
+                optimistic: true,
+                timestamp: Date.now()
+            };
+            await dispatchOptimistic(action);
+        },
+        // Fullscreen toggle with immediate layout change
+        toggleFullscreenOptimistic: async () => {
+            const action = {
+                type: optimisticState.isFullscreen ? "EXIT_FULLSCREEN" : "ENTER_FULLSCREEN",
+                optimistic: true,
+                timestamp: Date.now()
+            };
+            await dispatchOptimistic(action);
+        },
+        // Playback rate with immediate feedback
+        setPlaybackRateOptimistic: async (rate) => {
+            const action = {
+                type: "SET_PLAYBACK_RATE",
+                detail: rate,
+                optimistic: true,
+                timestamp: Date.now()
+            };
+            await dispatchOptimistic(action);
+        },
+        // Subtitle toggle with immediate visibility change
+        toggleSubtitlesOptimistic: async () => {
+            const action = {
+                type: "TOGGLE_SUBTITLES",
+                optimistic: true,
+                timestamp: Date.now()
+            };
+            await dispatchOptimistic(action);
+        }
+    }), [optimisticState, dispatchOptimistic]);
+    // State selectors that return optimistic values
+    const selectors = React.useMemo(() => ({
+        isPlaying: optimisticState.isPlaying,
+        currentTime: optimisticState.currentTime,
+        volume: optimisticState.volume,
+        isMuted: optimisticState.isMuted,
+        isFullscreen: optimisticState.isFullscreen,
+        playbackRate: optimisticState.playbackRate,
+        subtitlesShowing: optimisticState.subtitlesShowing,
+        previewTime: optimisticState.previewTime,
+        // Computed values
+        progress: optimisticState.duration > 0
+            ? optimisticState.currentTime / optimisticState.duration
+            : 0,
+        formattedTime: formatTime(optimisticState.currentTime),
+        formattedDuration: formatTime(optimisticState.duration),
+        // State checks
+        canPlay: !optimisticState.isLoading && !optimisticState.error,
+        hasError: !!optimisticState.error,
+        isBuffering: optimisticState.isLoading
+    }), [optimisticState]);
+    return {
+        state: optimisticState,
+        actualState,
+        ...selectors,
+        ...optimisticActions,
+        dispatchOptimistic
+    };
+}
+// Time formatting utility
+function formatTime(seconds) {
+    if (!seconds || !isFinite(seconds))
+        return "0:00";
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    const hours = Math.floor(mins / 60);
+    if (hours > 0) {
+        return `${hours}:${String(mins % 60).padStart(2, '0')}:${String(secs).padStart(2, '0')}`;
+    }
+    return `${mins}:${String(secs).padStart(2, '0')}`;
+}
+// Hook for components that need to detect optimistic updates
+export function useOptimisticUpdates(store) {
+    const [hasOptimisticUpdates, setHasOptimisticUpdates] = React.useState(false);
+    React.useEffect(() => {
+        const unsubscribe = store.subscribe(() => {
+            const actualState = store.getState();
+            const optimisticState = store.getOptimisticState();
+            const hasUpdates = JSON.stringify(actualState) !== JSON.stringify(optimisticState);
+            setHasOptimisticUpdates(hasUpdates);
+        });
+        return unsubscribe;
+    }, [store]);
+    return hasOptimisticUpdates;
+}
+// Hook to get both actual and optimistic state for debugging
+export function useMediaStateComparison(store) {
+    const actualState = React.useSyncExternalStore(store.subscribe, store.getState, store.getState);
+    const optimisticState = React.useSyncExternalStore(store.subscribe, store.getOptimisticState, store.getOptimisticState);
+    const differences = React.useMemo(() => {
+        const diffs = [];
+        const stateKeys = Object.keys(actualState);
+        stateKeys.forEach(key => {
+            if (JSON.stringify(actualState[key]) !== JSON.stringify(optimisticState[key])) {
+                diffs.push({
+                    key: key,
+                    actual: actualState[key],
+                    optimistic: optimisticState[key]
+                });
+            }
+        });
+        return diffs;
+    }, [actualState, optimisticState]);
+    return {
+        actualState,
+        optimisticState,
+        differences,
+        hasOptimisticUpdates: differences.length > 0
+    };
+}

package/dist/src/hooks/use-media-optimistic.ts

@@ -0,0 +1,270 @@
+"use client"
+
+import React, { useOptimistic } from "react"
+import type { MediaState } from "../context/media-context"
+import type { OptimisticMediaAction, EnhancedMediaStore } from "../context/media-store"
+
+// Optimistic update reducer function
+function optimisticMediaReducer(
+	state: MediaState, 
+	action: OptimisticMediaAction
+): MediaState {
+	if (!action.optimistic) return state
+
+	// Apply immediate optimistic updates for better UX
+	switch (action.type) {
+		case "PLAY":
+			return { ...state, isPlaying: true, error: null }
+		
+		case "PAUSE":
+			return { ...state, isPlaying: false }
+		
+		case "SEEK":
+			return { ...state, currentTime: action.detail }
+		
+		case "SET_VOLUME":
+			return { ...state, volume: Math.max(0, Math.min(1, action.detail)) }
+		
+		case "MUTE":
+			return { ...state, isMuted: true }
+		
+		case "UNMUTE":
+			return { ...state, isMuted: false }
+		
+		case "TOGGLE_MUTE":
+			return { ...state, isMuted: !state.isMuted }
+		
+		case "ENTER_FULLSCREEN":
+			return { ...state, isFullscreen: true }
+		
+		case "EXIT_FULLSCREEN":
+			return { ...state, isFullscreen: false }
+		
+		case "SET_PLAYBACK_RATE":
+			return { ...state, playbackRate: action.detail }
+		
+		case "TOGGLE_SUBTITLES":
+			return { ...state, subtitlesShowing: !state.subtitlesShowing }
+		
+		case "PREVIEW_TIME":
+			return { ...state, previewTime: action.detail }
+		
+		case "CLEAR_PREVIEW":
+			return { 
+				...state, 
+				previewTime: null, 
+				previewImage: null, 
+				previewCoords: null 
+			}
+		
+		default:
+			return state
+	}
+}
+
+// Media optimistic state hook using React 19's useOptimistic
+export function useMediaOptimistic(store: EnhancedMediaStore) {
+	const actualState = React.useSyncExternalStore(
+		store.subscribe,
+		store.getState,
+		store.getState
+	)
+
+	const [optimisticState, addOptimistic] = useOptimistic(
+		actualState,
+		optimisticMediaReducer
+	)
+
+	// Enhanced dispatch that uses optimistic updates
+	const dispatchOptimistic = React.useCallback(async (action: OptimisticMediaAction) => {
+		// Add optimistic update immediately
+		if (action.optimistic) {
+			addOptimistic(action)
+		}
+		
+		// Dispatch the actual action
+		await store.dispatchOptimistic(action)
+	}, [store, addOptimistic])
+
+	// Quick actions with optimistic updates
+	const optimisticActions = React.useMemo(() => ({
+		// Play/Pause with immediate feedback
+		togglePlayPause: async () => {
+			const action: OptimisticMediaAction = {
+				type: optimisticState.isPlaying ? "PAUSE" : "PLAY",
+				optimistic: true,
+				timestamp: Date.now()
+			}
+			await dispatchOptimistic(action)
+		},
+
+		// Volume control with immediate slider feedback
+		setVolumeOptimistic: async (volume: number) => {
+			const action: OptimisticMediaAction = {
+				type: "SET_VOLUME",
+				detail: Math.max(0, Math.min(1, volume)),
+				optimistic: true,
+				timestamp: Date.now()
+			}
+			await dispatchOptimistic(action)
+		},
+
+		// Seek with immediate scrub feedback
+		seekOptimistic: async (time: number) => {
+			const action: OptimisticMediaAction = {
+				type: "SEEK",
+				detail: time,
+				optimistic: true,
+				timestamp: Date.now()
+			}
+			await dispatchOptimistic(action)
+		},
+
+		// Mute toggle with immediate icon change
+		toggleMuteOptimistic: async () => {
+			const action: OptimisticMediaAction = {
+				type: "TOGGLE_MUTE",
+				optimistic: true,
+				timestamp: Date.now()
+			}
+			await dispatchOptimistic(action)
+		},
+
+		// Fullscreen toggle with immediate layout change
+		toggleFullscreenOptimistic: async () => {
+			const action: OptimisticMediaAction = {
+				type: optimisticState.isFullscreen ? "EXIT_FULLSCREEN" : "ENTER_FULLSCREEN",
+				optimistic: true,
+				timestamp: Date.now()
+			}
+			await dispatchOptimistic(action)
+		},
+
+		// Playback rate with immediate feedback
+		setPlaybackRateOptimistic: async (rate: number) => {
+			const action: OptimisticMediaAction = {
+				type: "SET_PLAYBACK_RATE",
+				detail: rate,
+				optimistic: true,
+				timestamp: Date.now()
+			}
+			await dispatchOptimistic(action)
+		},
+
+		// Subtitle toggle with immediate visibility change
+		toggleSubtitlesOptimistic: async () => {
+			const action: OptimisticMediaAction = {
+				type: "TOGGLE_SUBTITLES",
+				optimistic: true,
+				timestamp: Date.now()
+			}
+			await dispatchOptimistic(action)
+		}
+	}), [optimisticState, dispatchOptimistic])
+
+	// State selectors that return optimistic values
+	const selectors = React.useMemo(() => ({
+		isPlaying: optimisticState.isPlaying,
+		currentTime: optimisticState.currentTime,
+		volume: optimisticState.volume,
+		isMuted: optimisticState.isMuted,
+		isFullscreen: optimisticState.isFullscreen,
+		playbackRate: optimisticState.playbackRate,
+		subtitlesShowing: optimisticState.subtitlesShowing,
+		previewTime: optimisticState.previewTime,
+		
+		// Computed values
+		progress: optimisticState.duration > 0 
+			? optimisticState.currentTime / optimisticState.duration 
+			: 0,
+		
+		formattedTime: formatTime(optimisticState.currentTime),
+		formattedDuration: formatTime(optimisticState.duration),
+		
+		// State checks
+		canPlay: !optimisticState.isLoading && !optimisticState.error,
+		hasError: !!optimisticState.error,
+		isBuffering: optimisticState.isLoading
+	}), [optimisticState])
+
+	return {
+		state: optimisticState,
+		actualState,
+		...selectors,
+		...optimisticActions,
+		dispatchOptimistic
+	}
+}
+
+// Time formatting utility
+function formatTime(seconds: number): string {
+	if (!seconds || !isFinite(seconds)) return "0:00"
+	
+	const mins = Math.floor(seconds / 60)
+	const secs = Math.floor(seconds % 60)
+	const hours = Math.floor(mins / 60)
+	
+	if (hours > 0) {
+		return `${hours}:${String(mins % 60).padStart(2, '0')}:${String(secs).padStart(2, '0')}`
+	}
+	
+	return `${mins}:${String(secs).padStart(2, '0')}`
+}
+
+// Hook for components that need to detect optimistic updates
+export function useOptimisticUpdates(store: EnhancedMediaStore) {
+	const [hasOptimisticUpdates, setHasOptimisticUpdates] = React.useState(false)
+	
+	React.useEffect(() => {
+		const unsubscribe = store.subscribe(() => {
+			const actualState = store.getState()
+			const optimisticState = store.getOptimisticState()
+			
+			const hasUpdates = JSON.stringify(actualState) !== JSON.stringify(optimisticState)
+			setHasOptimisticUpdates(hasUpdates)
+		})
+		
+		return unsubscribe
+	}, [store])
+	
+	return hasOptimisticUpdates
+}
+
+// Hook to get both actual and optimistic state for debugging
+export function useMediaStateComparison(store: EnhancedMediaStore) {
+	const actualState = React.useSyncExternalStore(
+		store.subscribe,
+		store.getState,
+		store.getState
+	)
+	
+	const optimisticState = React.useSyncExternalStore(
+		store.subscribe,
+		store.getOptimisticState,
+		store.getOptimisticState
+	)
+	
+	const differences = React.useMemo(() => {
+		const diffs: any[] = []
+		
+		const stateKeys = Object.keys(actualState) as Array<keyof MediaState>
+		stateKeys.forEach(key => {
+			if (JSON.stringify(actualState[key]) !== JSON.stringify(optimisticState[key])) {
+				diffs.push({
+					key: key as string,
+					actual: actualState[key],
+					optimistic: optimisticState[key]
+				})
+			}
+		})
+		
+		return diffs
+	}, [actualState, optimisticState])
+	
+	return {
+		actualState,
+		optimisticState,
+		differences,
+		hasOptimisticUpdates: differences.length > 0
+	}
+}

package/dist/src/hooks/use-media-player.d.ts

@@ -0,0 +1,31 @@
+import type { MediaPlayerControls } from "../types/index";
+interface UseMediaPlayerOptions {
+    src: string | string[];
+    autoPlay?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    volume?: number;
+    preload?: "none" | "metadata" | "auto";
+    crossOrigin?: "anonymous" | "use-credentials";
+    playbackRates?: number[];
+    keyboardControls?: boolean;
+    showControls?: boolean;
+    customControls?: boolean;
+    onPlay?: () => void;
+    onPause?: () => void;
+    onTimeUpdate?: (currentTime: number) => void;
+    onDurationChange?: (duration: number) => void;
+    onVolumeChange?: (volume: number) => void;
+    onError?: (error: string) => void;
+    onLoadStart?: () => void;
+    onLoadedData?: () => void;
+    onEnded?: () => void;
+}
+export declare function useMediaPlayer(options: UseMediaPlayerOptions): {
+    state: import("..").MediaPlayerState;
+    controls: MediaPlayerControls;
+    mediaRef: import("react").RefObject<HTMLVideoElement | HTMLAudioElement | null>;
+    containerRef: import("react").RefObject<HTMLDivElement | null>;
+};
+export {};
+//# sourceMappingURL=use-media-player.d.ts.map

package/dist/src/hooks/use-media-player.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"use-media-player.d.ts","sourceRoot":"","sources":["use-media-player.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAA;AAGzD,UAAU,qBAAqB;IAC9B,GAAG,EAAE,MAAM,GAAG,MAAM,EAAE,CAAA;IACtB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,KAAK,CAAC,EAAE,OAAO,CAAA;IACf,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,GAAG,UAAU,GAAG,MAAM,CAAA;IACtC,WAAW,CAAC,EAAE,WAAW,GAAG,iBAAiB,CAAA;IAC7C,aAAa,CAAC,EAAE,MAAM,EAAE,CAAA;IACxB,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,YAAY,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAA;IAC5C,gBAAgB,CAAC,EAAE,CAAC,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAA;IAC7C,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAA;IACzC,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,YAAY,CAAC,EAAE,MAAM,IAAI,CAAA;IACzB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACpB;AAED,wBAAgB,cAAc,CAAC,OAAO,EAAE,qBAAqB;;;;;EA0R5D"}