Added stream component

src/components/StreamComponent.js

@@ -0,0 +1,77 @@
+import React, { useEffect, useRef, useState } from 'react';
+
+const StreamComponent = () => {
+  const videoRef = useRef(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [ipAddress, setIpAddress] = useState('');
+  const [streamed, setStreamed] = useState(false); // Track whether the video has streamed
+
+  useEffect(() => {
+    const video = videoRef.current;
+
+    const handleCanPlayThrough = () => {
+      setIsLoading(false);
+      setStreamed(true);
+      if (video && video.paused) {
+        video.play().catch(error => {
+          console.error('Error playing the video:', error);
+        });
+      }
+    };
+
+    if (video && ipAddress && isLoading) {
+      video.addEventListener('canplaythrough', handleCanPlayThrough);
+      setIsLoading(true);
+
+      const streamUrl = `http://${ipAddress}/api/holographic/stream/live_high.mp4`;
+      video.src = streamUrl;
+    }
+
+    return () => {
+      if (video) {
+        video.removeEventListener('canplaythrough', handleCanPlayThrough);
+      }
+    };
+  }, [ipAddress, isLoading]);
+
+  const handleVideoClick = () => {
+    const video = videoRef.current;
+    if (video && video.paused) {
+      video.play().catch(error => {
+        console.error('Error playing the video:', error);
+      });
+    }
+  };
+
+  const handleInputChange = (event) => {
+    setIpAddress(event.target.value);
+    setStreamed(false); // Reset streamed state when the input changes
+  };
+
+  const handleOkButtonClick = () => {
+    setIsLoading(true);
+    setStreamed(false); // Reset streamed state when the OK button is pressed
+  };
+
+  return (
+    <>
+      {!streamed && (
+        <>
+          <input
+            type="text"
+            placeholder="Enter IP address"
+            value={ipAddress}
+            onChange={handleInputChange}
+          />
+          <button onClick={handleOkButtonClick}>OK</button>
+        </>
+      )}
+
+      {isLoading && !streamed && <div>Loading...</div>}
+
+      <video ref={videoRef} alt={"Video Stream"} onClick={handleVideoClick} />
+    </>
+  );
+};
+
+export default StreamComponent;

src/pages-style/constant.css

@@ -127,7 +127,7 @@
 }
 
 .gif-container {
-  max-width: 100%;
+  max-width: 100%; /* Adjusted to 100% */
   height: auto;
   padding: 0;
   margin: 0;
@@ -140,3 +140,11 @@
   margin: 0;
   padding: 0;
 }
+
+video {
+  max-width: 100%; /* Adjusted to 100% */
+  height: auto;
+  display: block;
+  margin: 0;
+  padding: 0;
+}

src/pages/constant.js

@@ -1,13 +1,15 @@
 import React, { useState, useEffect } from 'react';
 import './../pages-style/constant.css';
-import AstronautGif from '../assets/astronautstream.gif';
 import RoverGif from '../assets/RoverGif.gif';
 import ThermalGif from '../assets/ThermalGif.gif';
 import MapGif from '../assets/MapGif.gif';
+import StreamComponent from '../components/StreamComponent.js';
+
+
 function Constant() {
   const [timer, setTimer] = useState(0);
   const [isRunning, setIsRunning] = useState(false);
-
+  
   useEffect(() => {
     let interval;
 
@@ -53,7 +55,7 @@ function Constant() {
             <h2>Astronaut DataTest</h2>
           </div>
           <div className="gif-container">
-            <img src={AstronautGif} alt="Astronaut POV GIF" />
+            <StreamComponent />
           </div>
           <div className="subContainer">
             <div className="column SuitData">

src/pages/egress.js

@@ -14,7 +14,7 @@ function Egress() {
 
   return (
     <div>
-      <h1>Rocks</h1>
+      <h1>Egress</h1>
       <p>This page will display samples that have been collected, and what samples should be kept</p>
 
       <button onClick={handleShowWarning}>Show Warning</button>

src/pages/rocks.js

@@ -1,33 +1,11 @@
 import React from 'react';
 import './../pages-style/rocks.css';
-import { ProcedureList } from '../helpers/ProcedureList';
-import ProcedureItem from '../components/ProcedureItem';
+
 
 
 function Rocks() {
   return (
     <div>
-      <h1>Rocks</h1>
-      <p>This page will display samples that have been collected, and what samples should be kept</p>
-      <div className="ProcedureList">
-        {ProcedureList.map((Item, key) => {
-          return (
-            <ProcedureItem
-              key={key}
-              name={Item.name}
-              description={Item.description}
-            />
-          );
-        })}
-      </div>
-      <button onClick={handleShowWarning}>Show Warning</button>
-
-      {showWarning && (
-        <div className="warning-modal">
-          <div className="warning-modal-content">
-            <span className="close" onClick={handleCloseWarning}>&times;</span>
-            <p>Warning: Are you sure you want to proceed?</p>
-            <button onClick={handleCloseWarning}>Yes, Proceed</button>
       <h1>Geological Sampling</h1>
         <div className="container">
           { /* Maps Column on the left half */ }
@@ -53,4 +31,4 @@ function Rocks() {
   );
 }
 
-export default Rocks;
+export default Rocks;