[TMP-Argus]stream switch via dropdown or monitors

ui/src/components/Argus/StreamSwitch.jsx

@@ -0,0 +1,130 @@
+import React, { useState, useEffect } from 'react';
+import { useSelector } from 'react-redux';
+import { JSMpeg } from '../SampleView/jsmpeg.min.js';
+
+export function StreamSwitch(props) {
+  const { handleSourceSwitch } = props;
+  const cameras = useSelector(
+    (state) => state.beamline.hardwareObjects.argus?.attributes?.camera_streams,
+  );
+  const [players, setPlayers] = useState({});
+  const [streammode, setStreammode] = useState('monitors');
+
+  useEffect(() => {
+    setPlayers((prevPlayers) => {
+      if (streammode === 'monitors') {
+        let new_players = {};
+        // remove all JSMpeg players from streams that have been removed
+        if (prevPlayers) {
+          new_players = Object.fromEntries(
+            Object.entries(prevPlayers).filter(([key]) => {
+              if (!Object.keys(cameras).includes(key)) {
+                prevPlayers[key].destroy();
+                return false;
+              }
+              return true;
+            }),
+          );
+        }
+
+        // add players for new streams
+        Object.keys(cameras).forEach((key) => {
+          if (prevPlayers && !prevPlayers[key]) {
+            const curr_canv = document.querySelector(`#${key}-canv`);
+            const url = `ws://localhost:7000/ws/${key}`;
+            new_players[key] = new JSMpeg.Player(url, {
+              canvas: curr_canv,
+              decodeFirstFrame: true,
+              preserveDrawingBuffer: false,
+              protocols: [],
+            });
+            new_players[key].stop();
+            curr_canv.src = url;
+          }
+        });
+
+        return new_players;
+      }
+      return {};
+    });
+  }, [cameras, streammode]);
+
+  let result = null;
+  // in dropdown mode, we only create a dropdown where each option is one stream,
+  // upon changing the value, we call the handleSourceSwitch function from props
+  if (streammode === 'dropdown') {
+    result = (
+      <select
+        title="Camera Streams"
+        id="streams-dropdown"
+        onChange={(event) => {
+          handleSourceSwitch(event.target.value);
+        }}
+      >
+        <option value="">-- Streams --</option>
+        {Object.entries(cameras).map((stream) => {
+          const key = stream.slice(0, 1);
+          const url = `ws://localhost:7000/ws/${stream.slice(0, 1)}`;
+          return (
+            <option key={key} value={url}>
+              {' '}
+              {key}{' '}
+            </option>
+          );
+        })}
+      </select>
+    );
+  } // in monitors mode, one small monitor is created per stream.
+  // clicking changes the source, while hovering plays/stops the monitor stream
+  else if (streammode === 'monitors') {
+    result = Object.entries(cameras).map((stream) => {
+      const key = stream.slice(0, -1)[0];
+      const url = `ws://localhost:7000/ws/${stream.slice(0, -1)}`;
+      return (
+        <button
+          key={`${key}-button`}
+          onClick={() => handleSourceSwitch(url)}
+          onMouseEnter={() => {
+            if (players && players[key]) {
+              players[key].play();
+            }
+          }}
+          onMouseLeave={() => {
+            if (players && players[key]) {
+              players[key].stop();
+            }
+          }}
+          type="button"
+          style={{
+            width: '33%',
+          }}
+        >
+          <canvas
+            id={`${key}-canv`}
+            aria-label={`Canvas for ${key}`}
+            style={{
+              width: '100%',
+              height: '180px',
+              overflow: 'hidden',
+            }}
+          />
+          {key}
+        </button>
+      );
+    });
+  }
+  return (
+    <div style={{ textAlign: 'center' }}>
+      {result}
+      <button
+        type="button"
+        onClick={() => {
+          setStreammode(streammode === 'monitors' ? 'dropdown' : 'monitors');
+        }}
+        style={{ display: 'block', margin: '10px auto' }}
+      >
+        Switch Stream Mode
+      </button>
+    </div>
+  );
+}

ui/src/components/SampleView/SampleImage.jsx

@@ -14,6 +14,7 @@ import DrawGridPlugin from './DrawGridPlugin';
 import SampleControls from '../SampleControls/SampleControls';
 import GridForm from './GridForm';
 import 'fabric';
+import { StreamSwitch } from '../Argus/StreamSwitch.jsx';
 
 import { JSMpeg } from './jsmpeg.min.js';
 
@@ -811,9 +812,9 @@ export default class SampleImage extends React.Component {
           protocols: [],
         });
         this.player.play();
-      }
 
-      canvas.src = source;
+        canvas.src = source;
+      }
     }
   }
 
@@ -927,6 +928,25 @@ export default class SampleImage extends React.Component {
     this.canvas.requestRenderAll();
   }
 
+  changeSource = (source) => {
+    const canvas = document.querySelector('#sample-img');
+    if (source && canvas) {
+      if (this.player) {
+        this.player.stop();
+        this.player = new JSMpeg.Player(source, {
+          canvas,
+          decodeFirstFrame: false,
+          preserveDrawingBuffer: false,
+          protocols: [],
+          autoplay: true,
+          displayGl: false,
+        });
+        this.player.play();
+      }
+      canvas.src = source;
+    }
+  };
+
   render() {
     this.configureGrid();
     this.updateGridResults();
@@ -959,6 +979,11 @@ export default class SampleImage extends React.Component {
             <canvas id="canvas" className="coveringCanvas" />
           </div>
         </div>
+
+        <StreamSwitch
+          handleSourceSwitch={this.changeSource}
+          streammode="monitors"
+        />
       </div>
     );
   }