Add device list screen

README.md

@@ -9,4 +9,6 @@ therefore unusable, so I decided to make an add free one that I could use withou
 
 Light Theme                |  Dark Theme
 :-------------------------:|:-------------------------:
+![Controller light theme](.github/assets/device_list.png)  |  ![Controller dark theme](.github/assets/device_list_dark.png)
+![Controller light theme](.github/assets/device_list_found.png)  |  ![Controller dark theme](.github/assets/device_list_found_dark.png)
 ![Controller light theme](.github/assets/controller.png)  |  ![Controller dark theme](.github/assets/controller_dark.png)

app/build.gradle.kts

@@ -57,6 +57,9 @@ dependencies {
     implementation(libs.androidx.datastore)
     implementation(libs.protobuf.javalite)
 
+    // Navigation
+    implementation(libs.androidx.navigation.compose)
+
     // Dependency Injection
     implementation(libs.androidx.hilt.navigation.compose)
     implementation(libs.hilt.android)

app/src/main/java/com/github/heroslender/lgtvcontroller/DeviceManager.kt

@@ -14,6 +14,7 @@ import com.github.heroslender.lgtvcontroller.device.DeviceListener
 import com.github.heroslender.lgtvcontroller.device.LgDevice
 import com.github.heroslender.lgtvcontroller.settings.SettingsRepository
 import kotlinx.coroutines.CoroutineScope
+import kotlinx.coroutines.delay
 import kotlinx.coroutines.flow.MutableStateFlow
 import kotlinx.coroutines.flow.StateFlow
 import kotlinx.coroutines.flow.first
@@ -28,6 +29,10 @@ class DeviceManager(
     val connectedDevice: StateFlow<Device?>
         get() = _connectedDevice
 
+    private var _devices: MutableStateFlow<List<ConnectableDevice>> = MutableStateFlow(emptyList())
+    val devices: StateFlow<List<ConnectableDevice>>
+        get() = _devices
+
     private var hasConnected = false
 
     init {
@@ -44,12 +49,27 @@ class DeviceManager(
         )
         DiscoveryManager.getInstance().addListener(this)
         DiscoveryManager.getInstance().start()
+
+        scope.launch {
+            while (!hasConnected) {
+                for (discoveryProvider in DiscoveryManager.getInstance().discoveryProviders) {
+                    Log.d("Device_Manager", "rescan :::: " + discoveryProvider::class.simpleName)
+                    discoveryProvider.rescan()
+                }
+
+                delay(2000)
+            }
+        }
     }
 
     fun setDeviceDisconnected() {
         _connectedDevice.tryEmit(null)
     }
 
+    fun ConnectableDevice.isCompatible(): Boolean {
+        return getServiceByName(WebOSTVService.ID) != null
+    }
+
     override fun onDeviceAdded(manager: DiscoveryManager, device: ConnectableDevice) {
         Log.d(
             "Device_Manager",
@@ -61,12 +81,15 @@ class DeviceManager(
             if (!hasConnected
                 && connectedDevice.value == null
                 && favorite == device.id
-                && device.getServiceByName(WebOSTVService.ID) != null
+                && device.isCompatible()
             ) {
                 Log.d("Device_Manager", "onDeviceAdded :::: Connecting to device favorite")
                 connect(device)
             }
         }
+
+        if (device.isCompatible())
+            _devices.tryEmit(listOf(*devices.value.toTypedArray(), device))
     }
 
     override fun onDeviceUpdated(manager: DiscoveryManager, device: ConnectableDevice) {
@@ -77,16 +100,24 @@ class DeviceManager(
             if (!hasConnected
                 && connectedDevice.value == null
                 && favorite == device.id
-                && device.getServiceByName(WebOSTVService.ID) != null
+                && device.isCompatible()
             ) {
                 Log.d("Device_Manager", "onDeviceAdded :::: Connecting to device favorite")
                 connect(device)
             }
         }
+
+        if (device.isCompatible()) {
+            val devices = devices.value.toTypedArray()
+            if (!devices.contains(device)) {
+                _devices.tryEmit(listOf(*devices, device))
+            }
+        }
     }
 
     override fun onDeviceRemoved(manager: DiscoveryManager, device: ConnectableDevice) {
         Log.d("Device_Manager", "onDeviceRemoved :::: ${device.friendlyName}")
+        _devices.tryEmit(devices.value.toMutableList().apply { remove(device) })
     }
 
     override fun onDiscoveryFailed(manager: DiscoveryManager, error: ServiceCommandError) {

app/src/main/java/com/github/heroslender/lgtvcontroller/MainActivity.kt

@@ -5,9 +5,14 @@ import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.enableEdgeToEdge
 import androidx.compose.foundation.layout.fillMaxSize
+import androidx.compose.foundation.layout.padding
 import androidx.compose.material3.Scaffold
 import androidx.compose.ui.Modifier
+import androidx.navigation.compose.NavHost
+import androidx.navigation.compose.composable
+import androidx.navigation.compose.rememberNavController
 import com.github.heroslender.lgtvcontroller.controller.ControllerScreen
+import com.github.heroslender.lgtvcontroller.devicelist.DeviceListScreen
 import com.github.heroslender.lgtvcontroller.ui.theme.LGTVControllerTheme
 import dagger.hilt.android.AndroidEntryPoint
 
@@ -20,9 +25,44 @@ class MainActivity : ComponentActivity() {
         setContent {
             LGTVControllerTheme {
                 Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
-                    ControllerScreen()
+                    val navController = rememberNavController()
+
+                    NavHost(
+                        navController = navController,
+                        startDestination = NavDest.DeviceList.route,
+                        modifier = Modifier.padding(innerPadding)
+                    ) {
+                        composable(NavDest.DeviceList.route) {
+                            DeviceListScreen(
+                                navigateToController = {
+                                    navController.navigate(NavDest.Controller.route) {
+                                        popUpTo(NavDest.DeviceList.route) {
+                                            inclusive = true
+                                        }
+
+                                        launchSingleTop = true
+                                    }
+                                }
+                            )
+                        }
+
+                        composable(NavDest.Controller.route) {
+                            ControllerScreen(navigateToDeviceList = {
+                                navController.navigate(NavDest.DeviceList.route)
+                            })
+                        }
+                    }
                 }
             }
         }
     }
+}
+
+sealed class NavDest(val route: String) {
+    data object DeviceList : NavDest("device_list")
+    data object Controller : NavDest("controller")
+
+    override fun toString(): String {
+        return route
+    }
 }

app/src/main/java/com/github/heroslender/lgtvcontroller/controller/Components.kt

@@ -1,11 +1,13 @@
 package com.github.heroslender.lgtvcontroller.controller
 
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.fillMaxHeight
 import androidx.compose.foundation.layout.size
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonColors
+import androidx.compose.material3.ButtonDefaults
 import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.ShapeDefaults
@@ -62,13 +64,15 @@ fun CIconButton(
 fun CButton(
     modifier: Modifier = Modifier,
     shape: Shape = ShapeDefaults.ExtraSmall,
+    contentPadding: PaddingValues = ButtonDefaults.ContentPadding,
     onClick: () -> Unit,
     content: @Composable RowScope.() -> Unit,
 ) {
 
     Button(
         onClick = onClick,
         shape = shape,
+        contentPadding = contentPadding,
         colors = ButtonColors(
             containerColor = MaterialTheme.colorScheme.secondary,
             contentColor = MaterialTheme.colorScheme.onSecondary,

app/src/main/java/com/github/heroslender/lgtvcontroller/controller/ControllerScreen.kt

@@ -1,7 +1,5 @@
 package com.github.heroslender.lgtvcontroller.controller
 
-import android.util.Log
-import android.widget.AdapterView.OnItemClickListener
 import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
@@ -17,27 +15,19 @@ import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.shape.CutCornerShape
 import androidx.compose.foundation.shape.RoundedCornerShape
-import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Icon
 import androidx.compose.material3.Text
-import androidx.compose.material3.TextButton
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
-import androidx.compose.runtime.mutableStateOf
-import androidx.compose.runtime.remember
-import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.layout.layout
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.em
-import androidx.compose.ui.viewinterop.AndroidView
 import androidx.hilt.navigation.compose.hiltViewModel
-import com.connectsdk.device.ConnectableDevice
-import com.connectsdk.device.DevicePickerListView
 import com.github.heroslender.lgtvcontroller.R
 import com.github.heroslender.lgtvcontroller.device.Device
 import com.github.heroslender.lgtvcontroller.device.DeviceStatus
@@ -73,8 +63,8 @@ fun ControlPreview(
                 deviceName = controllerUiState.deviceName,
                 deviceStatus = controllerUiState.deviceStatus.name,
                 isFavorite = controllerUiState.isFavorite,
-                connect = { },
                 onFavouriteToggle = { },
+                navigateToDeviceList = { },
             )
 
             Controls(controllerUiState.device)
@@ -84,7 +74,8 @@ fun ControlPreview(
 
 @Composable
 fun ControllerScreen(
-    controllerViewModel: ControllerViewModel = hiltViewModel()
+    controllerViewModel: ControllerViewModel = hiltViewModel(),
+    navigateToDeviceList: () -> Unit,
 ) {
     Column(
         verticalArrangement = Arrangement.spacedBy(10.dp),
@@ -97,8 +88,8 @@ fun ControllerScreen(
             deviceName = controllerUiState.deviceName,
             deviceStatus = controllerUiState.deviceStatus.name,
             isFavorite = controllerUiState.isFavorite,
-            connect = { controllerViewModel.connect(it) },
             onFavouriteToggle = { controllerViewModel.setFavorite(!controllerUiState.isFavorite) },
+            navigateToDeviceList = navigateToDeviceList,
         )
 
         Controls(controllerUiState.device)
@@ -110,22 +101,20 @@ fun Header(
     deviceName: String?,
     deviceStatus: String,
     isFavorite: Boolean,
-    connect: (ConnectableDevice) -> Unit,
     onFavouriteToggle: () -> Unit,
+    navigateToDeviceList: () -> Unit,
 ) {
     Row(
         horizontalArrangement = Arrangement.Center,
         modifier = Modifier
             .height(IntrinsicSize.Min)
             .fillMaxWidth()
     ) {
-        var listDevices by remember { mutableStateOf(false) }
         Column(
             horizontalAlignment = Alignment.CenterHorizontally,
-            modifier = Modifier
-                .clickable {
-                    listDevices = true
-                }
+            modifier = Modifier.clickable {
+                navigateToDeviceList()
+            }
         ) {
             if (deviceName == null) {
                 Text("Device")
@@ -136,15 +125,6 @@ fun Header(
             }
         }
 
-        if (listDevices) {
-            ConnectDialog(
-                connect = connect,
-                onClose = {
-                    listDevices = false
-                }
-            )
-        }
-
         if (deviceName != null) {
             Icon(
                 painterResource(if (isFavorite) R.drawable.baseline_star_24 else R.drawable.baseline_star_border_24),
@@ -163,48 +143,6 @@ fun Header(
     }
 }
 
-@Composable
-fun ConnectDialog(
-    connect: (ConnectableDevice) -> Unit,
-    onClose: () -> Unit,
-) {
-    AlertDialog(
-        title = {
-            Text(text = "Devices")
-        },
-        onDismissRequest = {
-            onClose()
-        },
-        text = {
-            AndroidView(
-                factory = { ctx ->
-                    val view = DevicePickerListView(ctx)
-                    view.onItemClickListener =
-                        OnItemClickListener { adapter, _, position, _ ->
-                            Log.d("Device_Manager", "listDevices :::: connecting to device")
-                            val cDevice = adapter.getItemAtPosition(position) as ConnectableDevice
-                            connect(cDevice)
-                            onClose()
-                        }
-                    view
-                }, update = {
-
-                }
-            )
-        },
-        confirmButton = {},
-        dismissButton = {
-            TextButton(
-                onClick = {
-                    onClose()
-                }
-            ) {
-                Text("Cancel")
-            }
-        }
-    )
-}
-
 @Composable
 fun ColumnScope.Controls(device: Device?) {
     Row(