feat<tel> move mjpeg init in a function

The old code had all the mjpeg for both cameras to be exposed bareboned in the `.js` file without wrapping them in a function or a class. I moved them in a function and exported them

teleop/htm/static/JS/Index/index_video_mjpeg.js

@@ -183,7 +183,8 @@ class RealCameraController {
 // One for each camera.
 var front_camera_frame_controller = new MJPEGFrameController();
 var rear_camera_frame_controller = new MJPEGFrameController();
-
+var mjpeg_rear_camera;
+var mjpeg_front_camera;
 // Accessed outside of this module.
 var mjpeg_page_controller = {
 	store: new MJPEGControlLocalStorage(),
@@ -287,12 +288,12 @@ var mjpeg_page_controller = {
 		const _front_camera = this.cameras[0];
 		const _rear_camera = this.cameras[1];
 		if (_mjpeg) {
-      _front_camera.set_rate(position == 'front' ? 'fast' : 'slow');
-      _rear_camera.set_rate(position == 'rear' ? 'fast' : 'slow');
-  } else {
-      _front_camera.set_rate(position == 'front' ? 'off' : 'slow');
-      _rear_camera.set_rate(position == 'rear' ? 'off' : 'slow');
-  }
+			_front_camera.set_rate(position == 'front' ? 'fast' : 'slow');
+			_rear_camera.set_rate(position == 'rear' ? 'fast' : 'slow');
+		} else {
+			_front_camera.set_rate(position == 'front' ? 'off' : 'slow');
+			_rear_camera.set_rate(position == 'rear' ? 'off' : 'slow');
+		}
 	},
 };
 
@@ -314,9 +315,6 @@ var mjpeg_front_camera_consumer = function (_blob) {
 	}
 };
 
-var mjpeg_rear_camera = new RealCameraController('rear', rear_camera_frame_controller, mjpeg_rear_camera_consumer);
-var mjpeg_front_camera = new RealCameraController('front', front_camera_frame_controller, mjpeg_front_camera_consumer);
-
 export function mjpeg_start_all() {
 	if (mjpeg_rear_camera != undefined) {
 		mjpeg_rear_camera.start_socket();
@@ -381,6 +379,8 @@ function findCanvasAndExecute() {
 	}
 }
 
-window.addEventListener('load', function () {
+export function init_mjpeg() {
+	mjpeg_rear_camera = new RealCameraController('rear', rear_camera_frame_controller, mjpeg_rear_camera_consumer);
+	mjpeg_front_camera = new RealCameraController('front', front_camera_frame_controller, mjpeg_front_camera_consumer);
 	setTimeout(findCanvasAndExecute, 500); // Initial delay to ensure all scripts have a chance to run
-});
+}

teleop/htm/static/JS/index.js

@@ -1,14 +1,15 @@
-import { dev_tools, page_utils, socket_utils, network_utils, isMobileDevice } from './Index/index_a_utils.js';
-import { teleop_screen, setupNavigationBar } from './Index/index_c_screen.js';
+import { dev_tools, isMobileDevice, network_utils, page_utils, socket_utils } from './Index/index_a_utils.js';
+import { setupNavigationBar } from './Index/index_c_screen.js';
 import { navigator_start_all } from './Index/index_d_navigator.js';
 import { gamepad_socket, teleop_start_all } from './Index/index_e_teleop.js';
 import { h264_start_all, h264_stop_all } from './Index/index_video_hlp.js';
-import { mjpeg_start_all, mjpeg_stop_all } from './Index/index_video_mjpeg.js';
+import { mjpeg_start_all, mjpeg_stop_all, init_mjpeg } from './Index/index_video_mjpeg.js';
 import { Router } from './router.js';
 
 function initComponents() {
 	try {
 		[socket_utils, dev_tools, page_utils].forEach((component) => component._init());
+    init_mjpeg()
 		$('#video_stream_type').val(page_utils.get_stream_type() === 'mjpeg' ? 'mjpeg' : 'h264');
 		$('#message_box_button_take_control').click(() => gamepad_socket._request_take_over_control());
 	} catch (error) {
@@ -47,9 +48,8 @@ function showSSID() {
 
 $(window).on('load', () => {
 	['phone_controller_link'].forEach((id) => $(`#${id}`)[isMobileDevice() ? 'hide' : 'show']());
-	let { helpMessageManager, messageContainerManager,advancedThemeManager } = setupNavigationBar();
-
-	const router = new Router(helpMessageManager, messageContainerManager,advancedThemeManager);
+	let { helpMessageManager, messageContainerManager, advancedThemeManager } = setupNavigationBar();
+	const router = new Router(helpMessageManager, messageContainerManager, advancedThemeManager);
 
 	router.handleUserMenuRoute(localStorage.getItem('user.menu.screen') || 'normal_ui_link');