@@ -80,13 +81,9 @@ const App = function App() {
modalHeading={<>Probe: {matrix.destinations?.[config.probe.router_destination - 1]?.source.label}>}
passiveModal
onRequestClose={()=> setProbeFullscreen(false)}
- isFullWidth
+ className="fullscreenProbe"
>
-
- {probeFullscreen && }
-
+
}
@@ -148,7 +145,8 @@ const App = function App() {
- {!probeFullscreen && }
+
+
{ProbeSOTRouting && <>
Probe Follow: {matrix.destinations?.[selectedDestination - 1]?.label}
diff --git a/ui/src/JSmpegPlayer.jsx b/ui/src/JSmpegPlayer.jsx
new file mode 100644
index 0000000..fa6f818
--- /dev/null
+++ b/ui/src/JSmpegPlayer.jsx
@@ -0,0 +1,34 @@
+import React, { useState, useEffect, useRef } from 'react';
+
+import JSMpeg from '@cycjimmy/jsmpeg-player';
+
+const JSmpegPlayer = ({ url, active }) => {
+ const videoRef = useRef(null)
+ const [player, setPlayer] = useState(null)
+
+ useEffect(() => {
+ console.log(player, active)
+ if (active && !player) {
+ setPlayer(new JSMpeg.VideoElement(
+ videoRef.current,
+ url,
+ {
+ autoplay: false
+ },
+ {}
+ ));
+ } else {
+ player?.destroy()
+ setPlayer(null)
+ }
+ }, [active]);
+
+ return (
+
+
+ );
+};
+
+export default JSmpegPlayer;
\ No newline at end of file
diff --git a/ui/src/index.scss b/ui/src/index.scss
index 3de1e5f..e8479fa 100644
--- a/ui/src/index.scss
+++ b/ui/src/index.scss
@@ -26,3 +26,32 @@ $feature-flags: (
position: relative;
}
}
+
+.cds--modal-container div {
+ margin-bottom: 0;
+}
+
+.cds--content {
+ min-height: calc(100vh - 48px);
+}
+
+.cds--modal-container {
+ aspect-ratio: auto 1.65;
+ width: 75vw;
+ max-height: 90vh;
+ padding-bottom: 0.8rem;
+}
+
+@media (max-width: 1200px) {
+ .cds--modal-container {
+ aspect-ratio: auto 1.65;
+ width: 95vw;
+ max-height: 95vh;
+ top: 1em;
+ }
+}
+
+.probePlayer {
+ aspect-ratio: auto 1920 / 1080;
+ width: 100%;
+}
diff --git a/ui/src/useMatrix.js b/ui/src/useMatrix.js
index b769be4..304aa61 100644
--- a/ui/src/useMatrix.js
+++ b/ui/src/useMatrix.js
@@ -5,7 +5,7 @@ import useWebSocket from 'react-use-websocket';
function useMatrix() {
const [matrix, setMatrix] = useState([]);
const [haveRecievedData, setHaveRecievedData] = useState(false);
- const wsuri = `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ''}/v1/ws`;
+ const wsuri = `${window.location.protocol === 'https:' ? 'wss:' : 'ws:'}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ''}/v1/ws/matrix`;
const [{ data, loading, error }, refreshAxios] = useAxios(
'/v1/matrix'
diff --git a/ui/webpack.config.js b/ui/webpack.config.js
index 2370482..65df91a 100644
--- a/ui/webpack.config.js
+++ b/ui/webpack.config.js
@@ -34,13 +34,13 @@ module.exports = (_, argv) => {
short_name: 'rtr',
description: 'Broadcast Router Controller',
background_color: '#ffffff',
- crossorigin: null, //can be null, use-credentials or anonymous
+ crossorigin: null,
inject: true,
ios: true,
icons: [
{
src: path.resolve('src/router.png'),
- sizes: [96, 128, 192, 256, 384, 512] // multiple sizes
+ sizes: [96, 128, 192, 256, 384, 512]
},
]
}),
diff --git a/ui/yarn.lock b/ui/yarn.lock
index ecaa294..a59f03e 100644
--- a/ui/yarn.lock
+++ b/ui/yarn.lock
@@ -1118,6 +1118,11 @@
"@carbon/grid" "^11.12.0"
"@carbon/layout" "^11.12.0"
+"@cycjimmy/jsmpeg-player@^6.0.5":
+ version "6.0.5"
+ resolved "https://registry.yarnpkg.com/@cycjimmy/jsmpeg-player/-/jsmpeg-player-6.0.5.tgz#ab4a9a2eb915894eeba8ca6e39aca3e66d1609b6"
+ integrity sha512-bVNHQ7VN9ecKT5AI/6RC7zpW/y4ca68a9txeR5Wiin+jKpUn/7buMe+5NPub89A8NNeNnKPQfrD2+c76ch36mA==
+
"@discoveryjs/json-ext@^0.5.0":
version "0.5.7"
resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"