From e087f15369a40705d2777490cd89be8139887b1c Mon Sep 17 00:00:00 2001 From: Andres de la Torre Mora Date: Tue, 13 May 2025 22:27:06 +0200 Subject: [PATCH 01/91] feat: create LiveStreamPlayer component --- .../LiveStreamPlayer/LiveStreamPlayer.tsx | 43 +++++++++++++++++++ common-front/package-lock.json | 12 ++++++ common-front/package.json | 1 + 3 files changed, 56 insertions(+) create mode 100644 common-front/lib/components/LiveStreamPlayer/LiveStreamPlayer.tsx diff --git a/common-front/lib/components/LiveStreamPlayer/LiveStreamPlayer.tsx b/common-front/lib/components/LiveStreamPlayer/LiveStreamPlayer.tsx new file mode 100644 index 000000000..12746012e --- /dev/null +++ b/common-front/lib/components/LiveStreamPlayer/LiveStreamPlayer.tsx @@ -0,0 +1,43 @@ +import React, { useEffect, useRef } from 'react'; +import Hls from 'hls.js'; + +type Props = { + src: string; + width?: string; + height?: string; + borderRadius?: string; +}; + +const LiveStreamPlayer: React.FC = ({ src, width = '100%', height = '100%', borderRadius = '8px' }) => { + const videoRef = useRef(null); + + useEffect(() => { + const video = videoRef.current; + + if (video) { + if (video.canPlayType('application/vnd.apple.mpegurl')) { + video.src = src; + } else if (Hls.isSupported()) { + const hls = new Hls(); + hls.loadSource(src); + hls.attachMedia(video); + + return () => hls.destroy(); + } else { + console.error('HLS no soportado'); + } + } + }, [src]); + + return ( +
+
+ ); +}; + +export default LiveStreamPlayer; diff --git a/common-front/package-lock.json b/common-front/package-lock.json index 3976d1e3a..fe9497cf4 100644 --- a/common-front/package-lock.json +++ b/common-front/package-lock.json @@ -16,6 +16,7 @@ "@types/react": "^18.2.0", "@vitejs/plugin-react": "^4.0.0", "@zerollup/ts-transform-paths": "^1.7.18", + "hls.js": "^1.6.2", "lodash": "^4.17.21", "math": "^0.0.3", "react": "^18.2.0", @@ -1930,6 +1931,12 @@ "node": ">=4" } }, + "node_modules/hls.js": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.2.tgz", + "integrity": "sha512-rx+pETSCJEDThm/JCm8CuadcAC410cVjb1XVXFNDKFuylaayHk1+tFxhkjvnMDAfqsJHxZXDAJ3Uc2d5xQyWlQ==", + "license": "Apache-2.0" + }, "node_modules/hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", @@ -4956,6 +4963,11 @@ "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", "integrity": "sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==" }, + "hls.js": { + "version": "1.6.2", + "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.6.2.tgz", + "integrity": "sha512-rx+pETSCJEDThm/JCm8CuadcAC410cVjb1XVXFNDKFuylaayHk1+tFxhkjvnMDAfqsJHxZXDAJ3Uc2d5xQyWlQ==" + }, "hoist-non-react-statics": { "version": "3.3.2", "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz", diff --git a/common-front/package.json b/common-front/package.json index 60efe3223..8115d6df3 100644 --- a/common-front/package.json +++ b/common-front/package.json @@ -21,6 +21,7 @@ "@types/react": "^18.2.0", "@vitejs/plugin-react": "^4.0.0", "@zerollup/ts-transform-paths": "^1.7.18", + "hls.js": "^1.6.2", "lodash": "^4.17.21", "math": "^0.0.3", "react": "^18.2.0", From 6c3e99fd930d6b9bc7a42eb59a8cc281feb96c6d Mon Sep 17 00:00:00 2001 From: Andres de la Torre Mora Date: Tue, 13 May 2025 22:40:37 +0200 Subject: [PATCH 02/91] feat: add cameras page --- ethernet-view/package-lock.json | 2 ++ ethernet-view/src/App.tsx | 9 +++++++++ ethernet-view/src/assets/svg/camera.svg | 7 +++++++ ethernet-view/src/layouts/AppLayout/AppLayout.tsx | 6 +++++- ethernet-view/src/pages/CamerasPage/CamerasPage.tsx | 5 +++++ 5 files changed, 28 insertions(+), 1 deletion(-) create mode 100644 ethernet-view/src/assets/svg/camera.svg create mode 100644 ethernet-view/src/pages/CamerasPage/CamerasPage.tsx diff --git a/ethernet-view/package-lock.json b/ethernet-view/package-lock.json index 5185093c6..5f6fdf2a1 100644 --- a/ethernet-view/package-lock.json +++ b/ethernet-view/package-lock.json @@ -65,6 +65,7 @@ "@types/react": "^18.2.0", "@vitejs/plugin-react": "^4.0.0", "@zerollup/ts-transform-paths": "^1.7.18", + "hls.js": "^1.6.2", "lodash": "^4.17.21", "math": "^0.0.3", "react": "^18.2.0", @@ -6051,6 +6052,7 @@ "@types/react": "^18.2.0", "@vitejs/plugin-react": "^4.0.0", "@zerollup/ts-transform-paths": "^1.7.18", + "hls.js": "^1.6.2", "lodash": "^4.17.21", "math": "^0.0.3", "react": "^18.2.0", diff --git a/ethernet-view/src/App.tsx b/ethernet-view/src/App.tsx index bc392eef2..45ef40d4f 100644 --- a/ethernet-view/src/App.tsx +++ b/ethernet-view/src/App.tsx @@ -6,6 +6,7 @@ import { useLoadBackend } from "common"; import { AppLayout } from "layouts/AppLayout/AppLayout"; import { useState } from "react"; import { LoggerPage } from "pages/LoggerPage/LoggerPage"; +import { CamerasPage } from "pages/CamerasPage/CamerasPage"; function App() { @@ -40,6 +41,14 @@ function App() { > +
+ +
); } diff --git a/ethernet-view/src/assets/svg/camera.svg b/ethernet-view/src/assets/svg/camera.svg new file mode 100644 index 000000000..35be6eba3 --- /dev/null +++ b/ethernet-view/src/assets/svg/camera.svg @@ -0,0 +1,7 @@ + + + + + + + \ No newline at end of file diff --git a/ethernet-view/src/layouts/AppLayout/AppLayout.tsx b/ethernet-view/src/layouts/AppLayout/AppLayout.tsx index 49b27d37a..9c1e51c8d 100644 --- a/ethernet-view/src/layouts/AppLayout/AppLayout.tsx +++ b/ethernet-view/src/layouts/AppLayout/AppLayout.tsx @@ -1,7 +1,7 @@ - import styles from "./AppLayout.module.scss" import Testing from "assets/svg/testing.svg" import Logger from "assets/svg/logger.svg" +import Camera from "assets/svg/camera.svg" import { Navbar } from "components/Navbar/Navbar" import { ReactNode } from "react" @@ -23,6 +23,10 @@ export const AppLayout = ({children, pageShown, setPageShown} : Props) => { { icon: Logger, page: "logger" + }, + { + icon: Camera, + page: "cameras" } ]} pageShown={pageShown} diff --git a/ethernet-view/src/pages/CamerasPage/CamerasPage.tsx b/ethernet-view/src/pages/CamerasPage/CamerasPage.tsx new file mode 100644 index 000000000..73e5a9686 --- /dev/null +++ b/ethernet-view/src/pages/CamerasPage/CamerasPage.tsx @@ -0,0 +1,5 @@ +export const CamerasPage = () => { + return ( +
Cameras
+ ) +} From 401288dcae8409e0f4bb5da584e54c0a2a259830 Mon Sep 17 00:00:00 2001 From: Andres de la Torre Mora Date: Sat, 17 May 2025 20:15:32 +0200 Subject: [PATCH 03/91] feat: add two cameras for testing in ethernet-view --- .../LiveStreamPlayer/LiveStreamPlayer.tsx | 18 +- common-front/lib/components/index.ts | 1 + ethernet-view/package-lock.json | 6707 +++++------------ .../pages/CamerasPage/CamerasPage.module.scss | 23 + .../src/pages/CamerasPage/CamerasPage.tsx | 46 +- 5 files changed, 2146 insertions(+), 4649 deletions(-) create mode 100644 ethernet-view/src/pages/CamerasPage/CamerasPage.module.scss diff --git a/common-front/lib/components/LiveStreamPlayer/LiveStreamPlayer.tsx b/common-front/lib/components/LiveStreamPlayer/LiveStreamPlayer.tsx index 12746012e..7278c68de 100644 --- a/common-front/lib/components/LiveStreamPlayer/LiveStreamPlayer.tsx +++ b/common-front/lib/components/LiveStreamPlayer/LiveStreamPlayer.tsx @@ -8,7 +8,7 @@ type Props = { borderRadius?: string; }; -const LiveStreamPlayer: React.FC = ({ src, width = '100%', height = '100%', borderRadius = '8px' }) => { +export const LiveStreamPlayer = ({ src, width = '100%', height = '100%', borderRadius = '8px' }: Props) => { const videoRef = useRef(null); useEffect(() => { @@ -24,20 +24,16 @@ const LiveStreamPlayer: React.FC = ({ src, width = '100%', height = '100% return () => hls.destroy(); } else { - console.error('HLS no soportado'); + console.error('HLS not supported'); } } }, [src]); return ( -
-
+