Merge pull request #57 from PiterWeb/main

v3.1 Remote Controller

Author: PiterWeb

README.md

@@ -123,8 +123,12 @@ finally go to the build/bin folder and your executables will be there.
 
 If you are interested to contribute to this project you can follow this [guide](./CONTRIBUTING.md)
 
-## Thanks to the ViGEm project ♥
-[ViGEmBus](https://github.com/nefarius/ViGEmBus) is making this project a reallity. We embed ViGEmBus Installation Wizard and ViGEmBus Client DLLS within the executable for Windows
+## Acknowledgements
+
+### Thanks to jbdemonte/virtual-device ❤
+[jbdemonte/virtual-device](https://github.com/jbdemonte/virtual-device) is making this project a reality. This is the source of magic that enables RemoteController to generate virtual gamepads on Linux, is very fast and made in pure Go.
+### Thanks to the ViGEm project  ❤
+[ViGEmBus](https://github.com/nefarius/ViGEmBus) is making this project a reallity. This is the source of magic that enables RemoteController to generate virtual gamepads on Windows. We embed ViGEmBus Installation Wizard and ViGEmBus Client DLLS within the executable for Windows
 
 ## Did you like the project 👍 ?
 You can give a star and review us on Product Hunt

docs/LINUX.md

@@ -5,6 +5,18 @@
 When you run RemoteController you will need to be sure to:
 
 - Your user has read/write permissions for /dev/input/event/* and uinput devices
-    - Example in Debian: sudo usermod -aG input $USER
+    - Example in Debian:
+      ```sh
+      sudo usermod -aG input $USER
+      ```
 - Uinput module enabled
-    - Example in Debian: sudo modprobe uinput
+    - Check if it is loaded:
+      - Example in Debian:
+          ```sh
+          lsmod | grep uinput
+          ```
+    - Load the module:
+      - Example in Debian:
+          ```sh
+          sudo modprobe uinput
+          ```

frontend/.npmrc

@@ -1 +1 @@
-engine-strict=true
+engine-strict=false

frontend/src/lib/detection/onwebsite.ts

@@ -1,4 +1,4 @@
-// This file is used to determine if the app is running on the website(client only) or not.
+// This file is used to determine if the app is running on the website(vercel client only) or not.
 const onwebsite = import.meta.env?.VITE_ON_WEBSITE === 'true';
 
 // This will be true if using the linux client when browser opens

frontend/src/lib/gamepad/gamepad_hook.ts

@@ -27,3 +27,26 @@ export function cloneGamepad(gamepad: Gamepad): ClonedGamepad {
 		index: gamepad.index
 	};
 }
+
+export function handleGamepad(controllerChannel: RTCDataChannel) {
+	const sendGamepadData = () => {
+		const gamepadData = navigator.getGamepads();
+
+		gamepadData.forEach((gamepad) => {
+			if (!gamepad) return;
+
+			const serializedData = JSON.stringify(cloneGamepad(gamepad));
+			controllerChannel.send(serializedData);
+		});
+	};
+
+	const gamepadLoop = () => {
+		sendGamepadData();
+
+		// Continue the loop
+		requestAnimationFrame(gamepadLoop);
+	};
+
+	// Start the gamepad loop
+	gamepadLoop();
+}

frontend/src/lib/i18n/LanguageSelector.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
 	import {locale, locales, _ } from 'svelte-i18n';
 
-	function setLocale(event: Event) {
+	async function setLocale(event: Event) {
 		const target = event.target as HTMLButtonElement;
-		locale.set(target.dataset.value);
+		await locale.set(target.dataset.value);
 	}
 
 	function getLocaleName(locale: string) {

frontend/src/lib/i18n/en.json

@@ -78,5 +78,12 @@
   "tutorial_prev_text": "Previous",
   "tutorial_play_title": "You are ready to play",
   "tutorial_play_description": "Now select your prefered mode to play (in web there is only one) and follow the instructions inside",
-  "share-the-code-with-your-client": "Share the code with your client"
+  "share-the-code-with-your-client": "Share the code with your client",
+  "go-browser": "You default browser should have been opened automatically (There are known issues in Firefox: We recommend using Chromium based Browsers)",
+  "relay-title": "Go to the browser tab",
+  "warning-go-browser": "Don't close the APP or go back in the menu",
+  "resolutions": "Resolutions",
+  "framerate": "Framerate",
+  "ideal-framerate": "Ideal Framerate",
+  "max-framerate": "Max Framerate"
 }

frontend/src/lib/i18n/es.json

@@ -78,5 +78,12 @@
   "tutorial_prev_text": "Anterior",
   "tutorial_play_title": "Estas listo para jugar",
   "tutorial_play_description": "Ahora selecciona tu modo preferido para jugar (en la web solo hay uno) y sigue las instrucciones que aparecen dentro",
-  "share-the-code-with-your-client": "Comparte el código con tu cliente."
+  "share-the-code-with-your-client": "Comparte el código con tu cliente.",
+  "framerate": "FPS",
+  "go-browser": "Tu navegador por defecto debería abrirse automáticamente (Hay problemas conocidos en Firefox: recomendamos usar navegadores basados en Chromium)",
+  "ideal-framerate": "FPS ideal",
+  "max-framerate": "FPS máximo",
+  "relay-title": "Ir a la pestaña del navegador",
+  "resolutions": "Resoluciones",
+  "warning-go-browser": "No cierres la aplicación o vuelvas atrás en el menú"
 }

frontend/src/lib/i18n/gl.json

@@ -78,5 +78,12 @@
   "tutorial_prev_text": "Anterior",
   "tutorial_play_title": "Estás listo para xogar",
   "tutorial_play_description": "Agora selecciona o teu modo preferido para xogar (na web só hai un) e sigue as instrucións que hai dentro",
-  "share-the-code-with-your-client": "Comparte o código co teu cliente"
+  "share-the-code-with-your-client": "Comparte o código co teu cliente",
+  "framerate": "FPS",
+  "go-browser": "O teu navegador por defecto tivo que abrirse automáticamente (Hay problemas coñecidos con Firefox: recomendase usar navegadores baseados en Chromium)",
+  "ideal-framerate": "FPS Ideais",
+  "max-framerate": "FPS Máximos",
+  "relay-title": "Vai a xanela do teu navegador",
+  "resolutions": "Resolucións",
+  "warning-go-browser": "Non peches a APP ou volvas atrás no menú"
 }

frontend/src/lib/i18n/i18n.ts

@@ -1,5 +1,5 @@
 import { browser } from '$app/environment'
-import { init, register, getLocaleFromNavigator } from 'svelte-i18n'
+import { init, register, getLocaleFromNavigator, locale} from 'svelte-i18n'
 
 const defaultLocale = 'en'
 
@@ -11,5 +11,21 @@ register('fr', () => import('./fr.json'))
 
 init({
 	fallbackLocale: defaultLocale,
-	initialLocale: browser ? new Intl.Locale(getLocaleFromNavigator() ?? defaultLocale).language : defaultLocale,
-})
+	initialLocale: browser ? new Intl.Locale(getLocaleFromLocalStorage() ?? getLocaleFromNavigator() ?? defaultLocale).language : defaultLocale,
+})
+
+export function getLocaleFromLocalStorage() {
+	const locale_stored = localStorage.getItem('locale')
+	return locale_stored
+}
+
+function saveLocaleToLocalStorage(locale: string) {
+	browser && localStorage.setItem('locale', locale)
+}
+
+locale.subscribe((value) => {
+	console.log('locale changed to', value)
+	saveLocaleToLocalStorage(value ?? defaultLocale)
+})
+
+

frontend/src/lib/layout/icons/DeleteIcon.svelte

@@ -8,6 +8,6 @@
 	stroke-width="2"
 	stroke-linecap="round"
 	stroke-linejoin="round"
-	class="hover:stroke-red-500 hover:scale-110 transition-transform"
+	class="hover:stroke-red-500 hover:scale-110 transition-transform dark:stroke-white stroke-gray-900"
 	><circle cx="12" cy="12" r="10" /><path d="m15 9-6 6" /><path d="m9 9 6 6" /></svg
 >

frontend/src/lib/layout/icons/PencilIcon.svelte

@@ -8,6 +8,6 @@
 	stroke-width="2"
 	stroke-linecap="round"
 	stroke-linejoin="round"
-	class="lucide lucide-pencil"
+	class="lucide lucide-pencil dark:stroke-white stroke-gray-900"
 	><path d="M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z" /><path d="m15 5 4 4" /></svg
 >

frontend/src/lib/layout/icons/TrashIcon.svelte

@@ -8,7 +8,7 @@
 	stroke-width="2"
 	stroke-linecap="round"
 	stroke-linejoin="round"
-	class="hover:stroke-red-500 hover:scale-110 transition-transform"
+	class="hover:stroke-red-500 hover:scale-110 transition-transform dark:stroke-white stroke-gray-900"
 	><path d="M3 6h18" /><path d="M19 6v14c0 1-1 2-2 2H7c-1 0-2-1-2-2V6" /><path
 		d="M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2"
 	/><line x1="10" x2="10" y1="11" y2="17" /><line x1="14" x2="14" y1="11" y2="17" /></svg

frontend/src/lib/wailsjs/runtime/runtime.d.ts

@@ -134,7 +134,7 @@ export function WindowIsFullscreen(): Promise<boolean>;
 
 // [WindowSetSize](https://wails.io/docs/reference/runtime/window#windowsetsize)
 // Sets the width and height of the window.
-export function WindowSetSize(width: number, height: number): Promise<Size>;
+export function WindowSetSize(width: number, height: number): void;
 
 // [WindowGetSize](https://wails.io/docs/reference/runtime/window#windowgetsize)
 // Gets the width and height of the window.

frontend/src/lib/webrtc/ICEServerManager.svelte

@@ -136,9 +136,9 @@
 			e.preventDefault()
 			groupToCreate = '';
 		}}
-		class="flex flex-col gap-4 items-center justify-center sm:w-[30vw] w-[75vw] p-4 my-4 border rounded-lg shadow sm:p-6 bg-gray-800 border-gray-700"
+		class="flex flex-col gap-4 items-center justify-center sm:w-[30vw] w-[75vw] p-4 my-4 bg-white border border-gray-200 rounded-lg shadow dark:bg-gray-800 dark:border-gray-700"
 	>
-		<label for="group" class="block mb-2 font-medium text-gray-900 dark:text-white"
+		<label for="group" class="block mb-2 font-medium  text-gray-900 dark:text-white"
 			>{$_('create_group')}</label
 		>
 		<input
@@ -163,7 +163,7 @@
 			</p>
 		{/if}
 		{#each Object.keys($servers) as server_group, i}
-			<li class="w-[75vw] p-4 my-4 border rounded-lg shadow sm:p-6 bg-gray-800 border-gray-700">
+			<li class="w-[75vw] p-4 my-4 border rounded-lg shadow sm:p-6 bg-white border-gray-200 dark:bg-gray-800 dark:border-gray-700">
 				<div class="flex justify-end h-0 mb-4 lg:mb-1">
 					<button
 						type="button"
@@ -204,7 +204,7 @@
 							newserverToAdd = '';
 						}}
 					>
-						<label for="domain" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+						<label for="domain" class="block mb-2 text-sm font-medium text-gray-400 dark:text-white"
 							>{$_('new_server')}</label
 						>
 						<input
@@ -239,7 +239,7 @@
 							<li class="pb-3 sm:pb-4">
 								<div class="flex items-center space-x-4 rtl:space-x-reverse">
 									<div class="flex-1 min-w-0">
-										<p class="text-lg truncate text-white">
+										<p class="text-lg truncate text-gray-400 dark:text-white">
 											{#if type === 'stun'}
 												{server.split('stun:')[1]}
 											{:else}
@@ -262,7 +262,7 @@
 						<form action="">
 							<label
 								for="user-{i}"
-								class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+								class="block mb-2 text-sm font-medium text-gray-400 dark:text-white"
 								>{$_('username')}</label
 							>
 							<input
@@ -277,7 +277,7 @@
 
 							<label
 								for="password"
-								class="block mb-2 text-sm font-medium text-gray-900 dark:text-white"
+								class="block mb-2 text-sm font-medium text-gray-400 dark:text-white"
 								>{$_('password')}</label
 							>
 

frontend/src/lib/webrtc/client_webrtc_hook.ts

@@ -1,6 +1,6 @@
 import { showToast, ToastType } from '$lib/toast/toast_hook';
 import { goto } from '$app/navigation';
-import { cloneGamepad } from '$lib/gamepad/gamepad_hook';
+import { cloneGamepad, handleGamepad } from '$lib/gamepad/gamepad_hook';
 import { handleKeyDown, handleKeyUp, unhandleKeyDown, unhandleKeyUp } from '$lib/keyboard/keyboard_hook';
 import { toogleLoading } from '$lib/loading/loading_hook';
 import { CreateClientStream } from '$lib/webrtc/stream/client_stream_hook';
@@ -84,26 +84,7 @@ async function CreateClientWeb() {
 	}
 
 	controllerChannel.onopen = () => {
-		const sendGamepadData = () => {
-			const gamepadData = navigator.getGamepads();
-
-			gamepadData.forEach((gamepad) => {
-				if (!gamepad) return;
-
-				const serializedData = JSON.stringify(cloneGamepad(gamepad));
-				controllerChannel.send(serializedData);
-			});
-		};
-
-		const gamepadLoop = () => {
-			sendGamepadData();
-
-			// Continue the loop
-			requestAnimationFrame(gamepadLoop);
-		};
-
-		// Start the gamepad loop
-		gamepadLoop();
+		handleGamepad(controllerChannel)
 	};
 
 	streamingSignalChannel.onopen = () => {

frontend/src/lib/webrtc/stream/client_stream_hook.ts

@@ -1,6 +1,7 @@
 import { exportStunServers } from '$lib/webrtc/stun_servers';
 import { setConsumingStream, type SignalingData } from '$lib/webrtc/stream/stream_signal_hook.svelte';
 import { exportTurnServers } from '$lib/webrtc/turn_servers';
+import { getSortedVideoCodecs } from './stream_config';
 
 let peerConnection: RTCPeerConnection | undefined;
 let inboundStream: MediaStream | null = null;
@@ -62,22 +63,29 @@ async function CreateClientStream(
 		}
 	};
 
+
 	const offer = await peerConnection.createOffer({
 		offerToReceiveAudio: true,
 		offerToReceiveVideo: true
 	});
 
+	try {
+		const [transceiver] = peerConnection.getTransceivers();
+		transceiver.setCodecPreferences(getSortedVideoCodecs());
+	} catch {
+
+	}
+
 	await peerConnection.setLocalDescription(offer);
 
 	// Configuración de parámetros del códec
 	peerConnection.getSenders().forEach((sender) => {
 		const params = sender.getParameters();
+
 		if (!params.encodings) {
 			params.encodings = [{}];
 		}
-		params.encodings[0].maxBitrate = 5_000_000; // Configura el bitrate máximo (en bits por segundo)
-		params.encodings[0].maxFramerate = 60; // Configura el frame rate máximo
-		// params.encodings[i].scaleResolutionDownBy = 1.25
+		params.encodings[0].maxBitrate = 8_500_000; // Configura el bitrate máximo (en bits por segundo)
 		params.encodings[0].priority = "high"
 		sender.setParameters(params);
 	});