feat: add configurable props for DX improvements

- Configurable keyboard shortcuts (seekSmall, seekLarge, volumeStep, disabled keys)
- Configurable touch gestures (maxSeekSeconds, maxVolumeChange, doubleTapSeekSeconds)
- Configurable auto-hide timeout via controlsAutoHideDelay prop
- Configurable playback rates via playbackRates prop
- Aspect ratio support (16:9, 4:3, 21:9, 1:1, 9:16, custom)
- Extended theme system (fontFamily, borderRadius, overlayOpacity, controlsBackground, etc.)
- Custom translations support via translations prop
- Children/slot system (children, controlsLeftExtra, controlsRightExtra)
- Ref forwarding with VideoPlayerHandle imperative API
- Analytics events (onFirstPlay, onBufferStart, onBufferEnd, onQualityChange)
- iOS Safari volume slider auto-hiding
- SSR guards for feature detection utilities
- prefers-reduced-motion CSS media query support

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/utils/polyfills.ts

@@ -123,11 +123,14 @@ export const initializePolyfills = (): PolyfillDiagnostics => {
 /**
  * Feature detection utilities
  */
+const isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined'
+
 export const features = {
   /**
    * Check if browser supports HLS natively
    */
   hasNativeHLS: (): boolean => {
+    if (!isBrowser) return false
     const video = document.createElement('video')
     return video.canPlayType('application/vnd.apple.mpegurl') !== ''
   },
@@ -143,6 +146,7 @@ export const features = {
    * Check if Picture-in-Picture is truly supported
    */
   hasPIP: (): boolean => {
+    if (!isBrowser) return false
     return 'pictureInPictureEnabled' in document && document.pictureInPictureEnabled
   },
 
@@ -150,6 +154,7 @@ export const features = {
    * Check if Fullscreen API is supported
    */
   hasFullscreen: (): boolean => {
+    if (!isBrowser) return false
     return !!(
       document.fullscreenEnabled ||
       // @ts-ignore
@@ -165,6 +170,7 @@ export const features = {
    * Check if touch events are supported (mobile device)
    */
   hasTouch: (): boolean => {
+    if (!isBrowser) return false
     return 'ontouchstart' in window || navigator.maxTouchPoints > 0
   },
 
@@ -172,6 +178,7 @@ export const features = {
    * Detect iOS Safari
    */
   isIOSSafari: (): boolean => {
+    if (!isBrowser) return false
     const ua = navigator.userAgent
     const iOS = /iPad|iPhone|iPod/.test(ua)
     const webkit = /WebKit/.test(ua)