Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 | 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 9x 9x 9x 9x 7x 2x 2x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 9x 9x 9x 3x 3x 9x 9x 9x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 9x 9x 1x 1x 1x 1x 1x 1x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 9x 1x 1x 13x 13x 4x 4x 9x 9x | 'use client'
import type React from 'react'
import {
createContext,
type ReactNode,
useCallback,
useContext,
useEffect,
useRef,
useState,
} from 'react'
interface FullscreenContextType {
isFullscreen: boolean
enterFullscreen: () => Promise<void>
exitFullscreen: () => Promise<void>
toggleFullscreen: () => Promise<void>
setFullscreenElement: (element: HTMLElement | null) => void
fullscreenElementRef: React.MutableRefObject<HTMLElement | null>
}
const FullscreenContext = createContext<FullscreenContextType | null>(null)
export function FullscreenProvider({ children }: { children: ReactNode }) {
const [isFullscreen, setIsFullscreen] = useState(false)
const fullscreenElementRef = useRef<HTMLElement | null>(null)
useEffect(() => {
const handleFullscreenChange = () => {
setIsFullscreen(!!document.fullscreenElement)
}
document.addEventListener('fullscreenchange', handleFullscreenChange)
document.addEventListener('webkitfullscreenchange', handleFullscreenChange)
document.addEventListener('mozfullscreenchange', handleFullscreenChange)
document.addEventListener('MSFullscreenChange', handleFullscreenChange)
return () => {
document.removeEventListener('fullscreenchange', handleFullscreenChange)
document.removeEventListener('webkitfullscreenchange', handleFullscreenChange)
document.removeEventListener('mozfullscreenchange', handleFullscreenChange)
document.removeEventListener('MSFullscreenChange', handleFullscreenChange)
}
}, [])
const setFullscreenElement = useCallback((element: HTMLElement | null) => {
console.log('🔧 FullscreenContext: Setting fullscreen element:', element)
fullscreenElementRef.current = element
}, [])
const enterFullscreen = async () => {
try {
// Use the registered fullscreen element, fallback to document.documentElement
const element = fullscreenElementRef.current || document.documentElement
console.log('🚀 FullscreenContext: Entering fullscreen with element:', element)
console.log(
'🚀 FullscreenContext: Current fullscreen element ref:',
fullscreenElementRef.current
)
if (element.requestFullscreen) {
await element.requestFullscreen()
console.log('✅ FullscreenContext: requestFullscreen() succeeded')
} else if ((element as any).webkitRequestFullscreen) {
await (element as any).webkitRequestFullscreen()
console.log('✅ FullscreenContext: webkitRequestFullscreen() succeeded')
} else if ((element as any).mozRequestFullScreen) {
await (element as any).mozRequestFullScreen()
console.log('✅ FullscreenContext: mozRequestFullScreen() succeeded')
} else if ((element as any).msRequestFullscreen) {
await (element as any).msRequestFullscreen()
console.log('✅ FullscreenContext: msRequestFullscreen() succeeded')
}
} catch (error) {
console.error('❌ FullscreenContext: Failed to enter fullscreen:', error)
throw error
}
}
const exitFullscreen = async () => {
try {
if (document.exitFullscreen) {
await document.exitFullscreen()
} else if ((document as any).webkitExitFullscreen) {
await (document as any).webkitExitFullscreen()
} else if ((document as any).mozCancelFullScreen) {
await (document as any).mozCancelFullScreen()
} else if ((document as any).msExitFullscreen) {
await (document as any).msExitFullscreen()
}
} catch (error) {
console.error('Failed to exit fullscreen:', error)
}
}
const toggleFullscreen = async () => {
if (isFullscreen) {
await exitFullscreen()
} else {
await enterFullscreen()
}
}
return (
<FullscreenContext.Provider
value={{
isFullscreen,
enterFullscreen,
exitFullscreen,
toggleFullscreen,
setFullscreenElement,
fullscreenElementRef,
}}
>
{children}
</FullscreenContext.Provider>
)
}
export function useFullscreen(): FullscreenContextType {
const context = useContext(FullscreenContext)
if (!context) {
throw new Error('useFullscreen must be used within a FullscreenProvider')
}
return context
}
|