[radio] better overlay drag system

Author: SOH69

ui/src/components/overlay.svelte

@@ -41,13 +41,22 @@
             if (moving) {
                 right -= e.movementX;
                 top += e.movementY;
+
+                right = Math.min(Math.max(right, 0), window.innerWidth - node.offsetWidth);
+                top = Math.min(Math.max(top, 0), window.innerHeight - node.offsetHeight);
+
                 node.style.top = `${top}px`;
                 node.style.right = `${right}px`;
+
+                RADIODATA.update((old: any) => {
+                    return { ...old, userData: { ...old.userData, playerlist: { ...old.userData.playerlist, coords: { x: right, y: top } } } }
+                })
             }
         });
         
         window.addEventListener('mouseup', () => {
             moving = false;
+            SendNUI('updatePlayerListPosition', { y: top, x: right })
         });
 
         SHOWFORCEPLAYERLIST.subscribe(() => {
@@ -58,7 +67,7 @@
 
 {#if isPlayerListVisible}
     {#if $RADIODATA.onRadio}
-        <div class="w-[15vw] absolute z-[1000] text-right select-none" style="top: {$RADIODATA.userData.playerlist.coords.y}px; right: {$RADIODATA.userData.playerlist.coords.x}px;cursor:{$SHOW? 'move':'no-drop'}" use:dragMe>
+        <div class="max-w-[15vw] absolute z-[1000] text-right select-none" style="top: {$RADIODATA.userData.playerlist.coords.y}px; right: {$RADIODATA.userData.playerlist.coords.x}px;cursor:{$SHOW? 'move':'no-drop'}" use:dragMe>
             {#each Object.entries($PLAYERLIST) as [id, player], index (id)}
                 {#if player.isTalking || $SHOWFORCEPLAYERLIST}
                     <div class="text-[1.7vh] font-bold px-2 text-white">{player.name}</div>

ui/src/providers/DebugBrowser.svelte

@@ -24,9 +24,32 @@
 							volume: 80,
 							favourite: [56.2, 54.1, 57.3, 58.6, 59.8, 56.2, 54.1, 57.3, 58.6, 59.8],
 							recomended: [1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0],
+							userData: {
+								playerlist: {
+									show: true,
+									coords: {
+										x: 15,
+										y: 40,
+									},
+								},
+							},
 							time: "18:46",
 							street: "Mirror Park Boulevard",
-							players: {}
+							maxChannel: 500,
+							locale: {
+								"header": "IN RADIO",
+								"frequency": "Frequency",
+								"disconnect": "DISCONNECT",
+								"notconnected": "NOT CONNECTED",
+								"channels": "Channels",
+								"radio": "Radio",
+								"members": "Members",
+								"favorites": "Favorites",
+								"recommended": "Recommended",
+								"clear": "CLEAR",
+								"hide_overlay": "HIDE OVERLAY",
+								"show_overlay": "SHOW OVERLAY"
+							}
 						},
 					},
 					{
@@ -41,8 +64,17 @@
 				actions : [
 					{
 						name: "toggle",
-						action: "notify",
-						data: true,
+						action: "updateRadioList",
+						data: {
+							"1": {
+								name: "Uday Shetty", 
+								isTalking: true
+							},
+							"2": {
+								name: "Uday Shetty", 
+								isTalking: true
+							}
+						},
 					}
 				]
 		},