f3253d0Takes: record, organize, and edit explainer videosJeremy Magland 1import { useEffect, useState } from 'react';
2import { Library } from './pages/Library.tsx';
3import { Prompter } from './pages/Prompter.tsx';
4import { Recorder } from './pages/Recorder.tsx';
5import { Settings } from './pages/Settings.tsx';
6import { VideoPage } from './pages/VideoPage.tsx';
8// Hash routes:
9// #/ library
10// #/settings
11// #/video/:id editor
12// #/video/:id/record recorder
13// #/prompter/:id pop-out teleprompter window
15function useHash() {
16 const [hash, setHash] = useState(window.location.hash);
17 useEffect(() => {
18 const on = () => setHash(window.location.hash);
19 window.addEventListener('hashchange', on);
20 return () => window.removeEventListener('hashchange', on);
21 }, []);
22 return hash.replace(/^#\/?/, '');
23}
25export function navigate(path: string) {
26 window.location.hash = `#/${path.replace(/^\//, '')}`;
27}
29export function App() {
30 const path = useHash();
31 const parts = path.split('/').filter(Boolean);
33 if (parts[0] === 'settings') return <Settings />;
34 if (parts[0] === 'prompter' && parts[1]) return <Prompter videoId={parts[1]} />;
35 if (parts[0] === 'video' && parts[1] && parts[2] === 'record') return <Recorder key={parts[1]} videoId={parts[1]} />;
36 if (parts[0] === 'video' && parts[1]) return <VideoPage key={parts[1]} videoId={parts[1]} />;
37 return <Library />;
38}