39 lines
1.2 KiB
JavaScript
39 lines
1.2 KiB
JavaScript
/**
|
|
* useDeviceTier — lightweight client-side device capability detection.
|
|
*
|
|
* Returns 'desktop' | 'tablet' | 'mobile' based on viewport width,
|
|
* touch capability, and hardware concurrency. The result is computed
|
|
* once on mount and never changes (no resize listener — the 3D scene
|
|
* should not swap LOD tiers mid-session).
|
|
*
|
|
* Also exports a plain `getDeviceTier()` function for non-React contexts.
|
|
*/
|
|
import { useMemo } from 'react'
|
|
|
|
/** Compute device tier from current browser globals. */
|
|
export function getDeviceTier() {
|
|
if (typeof window === 'undefined') return 'desktop'
|
|
|
|
const w = window.innerWidth
|
|
const hasTouch = navigator.maxTouchPoints > 0
|
|
const cores = navigator.hardwareConcurrency || 4
|
|
|
|
// Mobile: narrow viewport OR low-core touch device
|
|
if (w <= 600 || (hasTouch && w <= 768)) return 'mobile'
|
|
|
|
// Tablet: mid-width touch device (iPad, Android tablet, etc.)
|
|
if (w <= 1024 && hasTouch) return 'tablet'
|
|
|
|
// Low-powered desktops with ≤ 2 cores get tablet-tier rendering
|
|
if (cores <= 2) return 'tablet'
|
|
|
|
return 'desktop'
|
|
}
|
|
|
|
/** React hook — memoized once per component lifetime. */
|
|
export function useDeviceTier() {
|
|
return useMemo(() => getDeviceTier(), [])
|
|
}
|
|
|
|
export default useDeviceTier
|