Refactor video streaming feature and update dependencies

- Replaced npm ci with npm install in docker-compose for better package management.
- Introduced remote component loading for the VideoStreamingPage with error handling.
- Updated the title in index.html to "Experiments Dashboard" for clarity.
- Added new video remote service configuration in docker-compose for improved integration.
- Removed deprecated files and components related to the video streaming feature to streamline the codebase.
- Updated package.json and package-lock.json to include @originjs/vite-plugin-federation for module federation support.

management-dashboard-web-app/src/components/DashboardLayout.tsx

@@ -7,7 +7,10 @@ import { ExperimentManagement } from './ExperimentManagement'
 import { DataEntry } from './DataEntry'
 import { VisionSystem } from './VisionSystem'
 import { Scheduling } from './Scheduling'
-import { VideoStreamingPage } from '../features/video-streaming'
+import React, { Suspense } from 'react'
+import { loadRemoteComponent } from '../lib/loadRemote'
+import { ErrorBoundary } from './ErrorBoundary'
+import { isFeatureEnabled } from '../lib/featureFlags'
 import { UserProfile } from './UserProfile'
 import { userManagement, type User } from '../lib/supabase'
 
@@ -154,6 +157,13 @@ export function DashboardLayout({ onLogout, currentRoute }: DashboardLayoutProps
     }
   }
 
+  const LocalVideoPlaceholder = () => (<div className="p-6">Video module not enabled.</div>)
+  const RemoteVideoLibrary = loadRemoteComponent(
+    isFeatureEnabled('enableVideoModule'),
+    () => import('videoRemote/App'),
+    LocalVideoPlaceholder as any
+  ) as unknown as React.ComponentType
+
   const renderCurrentView = () => {
     if (!user) return null
 
@@ -194,7 +204,13 @@ export function DashboardLayout({ onLogout, currentRoute }: DashboardLayoutProps
       case 'scheduling':
         return <Scheduling user={user} currentRoute={currentRoute} />
       case 'video-library':
-        return <VideoStreamingPage />
+        return (
+          <ErrorBoundary fallback={<div className="p-6">Failed to load video module. Please try again.</div>}>
+            <Suspense fallback={<div className="p-6">Loading video module...</div>}>
+              <RemoteVideoLibrary />
+            </Suspense>
+          </ErrorBoundary>
+        )
       case 'profile':
         return <UserProfile user={user} />
       default:

management-dashboard-web-app/src/components/ErrorBoundary.tsx

@@ -0,0 +1,24 @@
+import { Component, ReactNode } from 'react'
+
+type Props = { children: ReactNode, fallback?: ReactNode }
+type State = { hasError: boolean }
+
+export class ErrorBoundary extends Component<Props, State> {
+  state: State = { hasError: false }
+
+  static getDerivedStateFromError() {
+    return { hasError: true }
+  }
+
+  componentDidCatch() {}
+
+  render() {
+    if (this.state.hasError) {
+      return this.props.fallback ?? <div className="p-6">Something went wrong loading this section.</div>
+    }
+    return this.props.children
+  }
+}
+
+
+