feat(components/atom/videoPlayer): use static imports for vite compatibility

components/atom/videoPlayer/src/hooks/useVideoPlayer.js

@@ -2,13 +2,40 @@ import {lazy} from 'react'
 
 import {UNKNOWN} from '../settings/index.js'
 import useDetectVideoType from './useDetectVideoType.js'
+
+// Static imports for Vite compatibility (instead of dynamic template strings)
+const HLSPlayer = lazy(() => import('../components/HLSPlayer.js'))
+const NativePlayer = lazy(() => import('../components/NativePlayer.js'))
+const VimeoPlayer = lazy(() => import('../components/VimeoPlayer.js'))
+const YouTubePlayer = lazy(() => import('../components/YouTubePlayer.js'))
+
+// Map player component names to actual components
+const PLAYER_COMPONENTS = {
+  HLSPlayer,
+  NativePlayer,
+  VimeoPlayer,
+  YouTubePlayer
+}
+
 const useVideoPlayer = props => {
   const {src} = props
   const {detectVideoType} = useDetectVideoType()
   const videoType = detectVideoType(src)
-  if (videoType === UNKNOWN) return ['p', {...props, children: 'Not supported media type'}]
 
-  return [lazy(() => import(`../components/${videoType.PLAYER_COMPONENT}.js`)), props]
+  if (videoType === UNKNOWN) {
+    return ['p', {...props, children: 'Not supported media type'}]
+  }
+
+  // Get the component from the map instead of using dynamic import
+  const Component = PLAYER_COMPONENTS[videoType.PLAYER_COMPONENT]
+
+  if (!Component) {
+    console.error(`[useVideoPlayer] Unknown player component: ${videoType.PLAYER_COMPONENT}`)
+
+    return ['p', {...props, children: 'Not supported media type'}]
+  }
+
+  return [Component, props]
 }
 
 export default useVideoPlayer

components/atom/videoPlayer/src/index.js

@@ -1,4 +1,4 @@
-import {createRef, forwardRef, Suspense, useRef} from 'react'
+import {createRef, forwardRef, Suspense, useEffect, useRef, useState} from 'react'
 
 import PropTypes from 'prop-types'
 
@@ -34,6 +34,13 @@ const AtomVideoPlayer = forwardRef(
     },
     forwardedRef = createRef()
   ) => {
+    // SSR-safe: Only render on client-side to avoid Suspense issues
+    const [isClient, setIsClient] = useState(false)
+
+    useEffect(() => {
+      setIsClient(true)
+    }, [])
+
     const [Component, props] = useVideoPlayer({
       autoPlay,
       controls,
@@ -58,6 +65,15 @@ const AtomVideoPlayer = forwardRef(
     const needsToRenderFallbackComponent =
       fallbackWhileNotOnViewport === true && autoPlay === AUTOPLAY.ON_VIEWPORT && !autoPlayState
 
+    // Don't render during SSR - only on client
+    if (!isClient) {
+      return (
+        <div ref={componentRef} className={BASE_CLASS}>
+          {fallbackComponent}
+        </div>
+      )
+    }
+
     return (
       <div ref={componentRef} className={BASE_CLASS}>
         {needsToRenderFallbackComponent ? (