reorganize files, add new pages

Team-Cartographer · Jan 3, 2024 · 7f76f8e · 7f76f8e
1 parent 8c95a92
commit 7f76f8e
Show file tree

Hide file tree

Showing 5 changed files with 101 additions and 68 deletions.
diff --git a/src/components/EVA/eva_telemetry.tsx → src/components/HMD_LINK/eva_telemetry.tsx b/src/components/EVA/eva_telemetry.tsx → src/components/HMD_LINK/eva_telemetry.tsx
diff --git a/src/components/PAGES/home_page.tsx b/src/components/PAGES/home_page.tsx
@@ -0,0 +1,65 @@
+import { useNavigate } from 'react-router-dom';
+import { Button } from '@mui/material/';
+import Timers from '../UI_AND_UX/timing';
+import GitHubButton from '../UI_AND_UX/github_button';
+import EvaTelemetry from '../HMD_LINK/eva_telemetry';
+import PanicButton from '../HMD_LINK/panic_button';
+import ConnectionStrength from '../HMD_LINK/conn_strength';
+import EVALiveView from '../HMD_LINK/eva_live_view';
+
+function HomePage() {
+    const navigate = useNavigate();
+
+    return (
+        <div className="h-full flex flex-row gap-x-4">
+            <div className="flex flex-col items-left pl-3 justify-center">
+                <Timers />
+                <GitHubButton />
+                <EvaTelemetry
+                    evaNumber="1"
+                    bpm="129"
+                    temp="97"
+                    oxygenation="91.0"
+                />
+                <EVALiveView
+                    evaNumber={1}
+                    url="https://www.youtube.com/watch?v=lPyl6d2FJGw"
+                    volume={0}
+                />
+                <EvaTelemetry
+                    className="pt-3"
+                    evaNumber="2"
+                    bpm="78"
+                    temp="97.2"
+                    oxygenation="99.0"
+                />
+                <EVALiveView
+                    evaNumber={2}
+                    url="https://youtu.be/WkwULe0h5-g?t=427"
+                    volume={0}
+                />
+            </div>
+            <div className="h-full flex flex-col gap-x-4">
+                <PanicButton />
+                <ConnectionStrength desc="EVA 1" ping={25} />
+                <ConnectionStrength desc="EVA 2" ping={5} />
+                <ConnectionStrength desc="ROVER" ping={10} />
+
+                <div className="flex flex-row items-center justify-center pb-4 text-gray-50">
+                    ______
+                </div>
+                <Button
+                    className="bg-gray-300 text-white rounded-xl p-2 normal-case hover:bg-gray-500  custom-text-shadow"
+                    onClick={() => {
+                        navigate('/telemetry');
+                    }}
+                >
+                    Raw Telemetry
+                </Button>
+            </div>
+            <div className="pl-2 bg-gray-200 flex-grow rounded-l-2xl">Test</div>
+        </div>
+    );
+}
+
+export default HomePage;
diff --git a/src/components/ROVER/rover_live_view.tsx b/src/components/ROVER/rover_live_view.tsx
@@ -0,0 +1,31 @@
+/* eslint-disable react/require-default-props */
+import ReactPlayer from 'react-player';
+
+interface EVALiveViewProps {
+    url: string;
+    volume?: number;
+}
+
+// eslint-disable-next-line @typescript-eslint/no-unused-vars
+function RoverLiveView({ url, volume = 0.5 }: EVALiveViewProps) {
+    const playerStyle = {
+        borderBottomLeftRadius: '12px',
+        borderBottomRightRadius: '12px',
+        borderTopRightRadius: '12px',
+        borderTopLeftRadius: '12px',
+        overflow: 'hidden',
+    };
+
+    return (
+        <div>
+            <ReactPlayer
+                url={url}
+                playing
+                volume={volume}
+                style={playerStyle}
+            />
+        </div>
+    );
+}
+
+export default RoverLiveView;
diff --git a/src/renderer/App.css b/src/renderer/App.css
@@ -6,7 +6,6 @@
 html,
 body
 :root {
-    font-family: 'Courier New', Courier, monospace;
     height: 100%;
     background: #383838;
     color: white;

diff --git a/src/renderer/App.tsx b/src/renderer/App.tsx
@@ -1,77 +1,15 @@
-import {
-    MemoryRouter as Router,
-    Routes,
-    Route,
-    useNavigate,
-} from 'react-router-dom';
-import { Button } from '@mui/material/';
-import './App.css';
-import Timers from '../components/UI_AND_UX/timing';
-import GitHubButton from '../components/UI_AND_UX/github_button';
-import EvaTelemetry from '../components/EVA/eva_telemetry';
-import PanicButton from '../components/HMD_LINK/panic_button';
-import ConnectionStrength from '../components/HMD_LINK/conn_strength';
-import EVALiveView from '../components/HMD_LINK/eva_live_view';
-import TelemetryPage from '../components/PAGES/telemetry_page';
+import { MemoryRouter as Router, Routes, Route } from 'react-router-dom';
 import { StopwatchProvider } from '../providers/stopwatch_provider';
-
-function MainPage() {
-    const navigate = useNavigate();
-
-    return (
-        <div className="h-full flex flex-row gap-x-4">
-            <div className="flex flex-col items-left pl-3 justify-center">
-                <Timers />
-                <GitHubButton />
-                <EvaTelemetry
-                    evaNumber="1"
-                    bpm="129"
-                    temp="97"
-                    oxygenation="91.0"
-                />
-                <EVALiveView
-                    evaNumber={1}
-                    url="https://www.youtube.com/watch?v=lPyl6d2FJGw"
-                    volume={0}
-                />
-                <EvaTelemetry
-                    className="pt-3"
-                    evaNumber="2"
-                    bpm="78"
-                    temp="97.2"
-                    oxygenation="99.0"
-                />
-                <EVALiveView
-                    evaNumber={2}
-                    url="https://youtu.be/WkwULe0h5-g?t=427"
-                    volume={0}
-                />
-            </div>
-            <div className="h-full flex flex-col gap-x-4">
-                <PanicButton />
-                <ConnectionStrength desc="EVA 1" ping={25} />
-                <ConnectionStrength desc="EVA 2" ping={5} />
-                <ConnectionStrength desc="ROVER" ping={10} className="pb-3" />
-                <Button
-                    className="bg-gray-300 text-white rounded-xl p-2 normal-case hover:bg-gray-500  custom-text-shadow"
-                    onClick={() => {
-                        navigate('/telemetry');
-                    }}
-                >
-                    Raw Telemetry
-                </Button>
-            </div>
-            <div className="pl-2 bg-gray-200 flex-grow rounded-l-2xl">Test</div>
-        </div>
-    );
-}
+import HomePage from '../components/PAGES/home_page';
+import TelemetryPage from '../components/PAGES/telemetry_page';
+import './App.css';
 
 export default function App() {
     return (
         <Router>
             <StopwatchProvider>
                 <Routes>
-                    <Route path="/" element={<MainPage />} />
+                    <Route path="/" element={<HomePage />} />
                     <Route path="/telemetry" element={<TelemetryPage />} />
                 </Routes>
             </StopwatchProvider>