Spaces:
Running
Running
File size: 2,854 Bytes
8c24a08 36a392b 8c24a08 36a392b 8c24a08 37a8ba6 8c24a08 37a8ba6 36a392b 7053a3a 8c24a08 37a8ba6 8c24a08 37a8ba6 8c24a08 37a8ba6 8c24a08 37a8ba6 8c24a08 37a8ba6 8c24a08 7053a3a | 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 | import React, { useState, useRef, useEffect } from 'react';
import './App.css';
import { VideoManagerLocal } from './utils/VideoManagerLocal';
import Home from './components/Home';
import FocusPageLocal from './components/FocusPageLocal';
import Achievement from './components/Achievement';
import Records from './components/Records';
import Customise from './components/Customise';
import Help from './components/Help';
function App() {
const [activeTab, setActiveTab] = useState('home');
const videoManagerRef = useRef(null);
const [isSessionActive, setIsSessionActive] = useState(false);
const [sessionResult, setSessionResult] = useState(null);
useEffect(() => {
const callbacks = {
onSessionStart: () => {
setIsSessionActive(true);
setSessionResult(null);
},
onSessionEnd: (summary) => {
setIsSessionActive(false);
if (summary) setSessionResult(summary);
}
};
videoManagerRef.current = new VideoManagerLocal(callbacks);
return () => {
if (videoManagerRef.current) videoManagerRef.current.stopStreaming();
};
}, []);
const renderMenuButton = (tabId, label) => (
<button
className={`menu-btn ${activeTab === tabId ? 'active' : ''}`}
onClick={() => setActiveTab(tabId)}
>
{label}
</button>
);
return (
<div className="app-container">
<nav id="top-menu">
<div className="top-menu-links">
<button
type="button"
className={`menu-btn ${activeTab === 'home' ? 'active' : ''}`}
onClick={() => setActiveTab('home')}
>
Home
</button>
<div className="separator" aria-hidden />
<button className={`menu-btn ${activeTab === 'focus' ? 'active' : ''}`} onClick={() => setActiveTab('focus')}>
Start Focus {isSessionActive && <span style={{ marginLeft: '8px', color: '#00FF00' }}>●</span>}
</button>
<div className="separator"></div>
{renderMenuButton('achievement', 'My Achievement')}
<div className="separator"></div>
{renderMenuButton('records', 'My Records')}
<div className="separator"></div>
{renderMenuButton('customise', 'Customise')}
<div className="separator"></div>
{renderMenuButton('help', 'Help')}
</div>
</nav>
{activeTab === 'home' && <Home setActiveTab={setActiveTab} />}
<FocusPageLocal
videoManager={videoManagerRef.current}
sessionResult={sessionResult}
setSessionResult={setSessionResult}
isActive={activeTab === 'focus'}
/>
{activeTab === 'achievement' && <Achievement />}
{activeTab === 'records' && <Records />}
{activeTab === 'customise' && <Customise />}
{activeTab === 'help' && <Help />}
</div>
);
}
export default App;
|