Browse Source

Worked on Home screen TV navigation & focus

Khubaib 8 months ago
parent
commit
a511124875

+ 1 - 1
.idea/deploymentTargetSelector.xml

@@ -4,7 +4,7 @@
     <selectionStates>
       <SelectionState runConfigName="app">
         <option name="selectionMode" value="DROPDOWN" />
-        <DropdownSelection timestamp="2024-08-19T14:52:35.741903956Z">
+        <DropdownSelection timestamp="2024-08-20T09:42:15.158245620Z">
           <Target type="DEFAULT_BOOT">
             <handle>
               <DeviceId pluginId="LocalEmulator" identifier="path=/home/ubuntu/.android/avd/Television_1080p_API_31.avd" />

+ 470 - 140
app/src/main/java/com/vpn/fastestvpnservice/screensTV/HomeScreenTV.kt

@@ -5,7 +5,9 @@ import android.content.Context
 import android.os.Build
 import android.os.Handler
 import android.util.Log
+import android.widget.Toast
 import androidx.activity.ComponentActivity
+import androidx.compose.animation.animateColorAsState
 import androidx.compose.foundation.BorderStroke
 import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
@@ -31,6 +33,10 @@ import androidx.compose.foundation.layout.wrapContentHeight
 import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.foundation.shape.RoundedCornerShape
 import androidx.compose.foundation.text.ClickableText
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.outlined.ThumbDown
+import androidx.compose.material.icons.outlined.ThumbUp
+import androidx.compose.material.ripple.rememberRipple
 import androidx.compose.material3.AlertDialog
 import androidx.compose.material3.Button
 import androidx.compose.material3.ButtonDefaults
@@ -99,6 +105,10 @@ import com.vpn.fastestvpnservice.interfaces.ServerCallbacksTV
 import com.vpn.fastestvpnservice.navigation.isFirstItemFocused
 import com.vpn.fastestvpnservice.navigation.isFirstItemPressed
 import com.vpn.fastestvpnservice.navigation.isHomeScreenPressed
+import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.StringDown
+import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.StringDownUnit
+import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.StringUp
+import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.StringUpUnit
 import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.isServerDialog
 import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.navHostController1
 import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.protocolObj
@@ -106,6 +116,7 @@ import com.vpn.fastestvpnservice.screens.bottomNavBarScreens.serverObj
 import com.vpn.fastestvpnservice.screens.serverListViewModelSplash
 import com.vpn.fastestvpnservice.sealedClass.ScreenTV
 import com.vpn.fastestvpnservice.ui.theme.customTypography
+import com.vpn.fastestvpnservice.ui.theme.customTypography2
 import com.vpn.fastestvpnservice.utils.Utils
 import com.vpn.fastestvpnservice.utils.VPNConnectionsUtil
 import com.vpn.fastestvpnservice.utils.isTablet
@@ -113,6 +124,7 @@ import com.vpn.fastestvpnservice.viewmodels.HomeViewModel
 import com.vpn.fastestvpnservice.viewmodels.ServerListViewModel
 import com.wireguard.android.backend.GoBackend
 import de.blinkt.openvpn.core.App
+import java.util.Locale
 
 lateinit var vpnConnectionsUtil: VPNConnectionsUtil
 var isProtocolDialog: MutableState<Boolean> = mutableStateOf(false)
@@ -628,6 +640,7 @@ fun HomeTV(
                                     }
                                     true
                                 }
+
                                 else -> {
                                     true
                                 }
@@ -728,83 +741,94 @@ fun HomeTV(
             Column(
                 modifier = Modifier.fillMaxSize(),
                 verticalArrangement = Arrangement.Center
-            ) {
-
-                Box(
-                    modifier = Modifier
-                        .fillMaxWidth(fraction = 0.4f)
-                        .padding(horizontal = 0.dp)
-                        .padding(vertical = 2.dp)
-                        .height(90.dp)
-                        .border(
-                            border = BorderStroke(2.dp, MaterialTheme.colorScheme.onBackground),
-                            shape = RoundedCornerShape(28.dp)
-                        )
-                        .background(
-                            shape = RoundedCornerShape(28.dp),
-                            color = MaterialTheme.colorScheme.onBackground
-                        )
-                        .align(Alignment.CenterHorizontally),
-                ) {
-                    AddRowSmartTV(
-                        navHostController,
-                        basePreferenceHelper,
-                        context,
-                        isTablet(),
-                        focusRequester2,
-                        homeViewModel
-                    )
-                    var smartServer = basePreferenceHelper.getSmartServerObject()
-                    val recommended = basePreferenceHelper.getRecommendedServerObject()
-                    val selectedSmartList = basePreferenceHelper.getSmartList()
-                    var isSmartButtonFocused by remember { mutableStateOf(false) }
-                    when(selectedSmartList) {
-                        smartConnect[0] -> {
-                            smartServer = basePreferenceHelper.getRecommendedServerObject()
-                        }
-                        smartConnect[1] -> {
-                            smartServer = basePreferenceHelper.getSmartServerObject() ?: recommended
-                        }
-                        smartConnect[2] -> {
-                            smartServer = basePreferenceHelper.getSmartServerObject() ?: recommended
-                        }
-                        else -> {}
-                    }
-                    val color = if (isSmartButtonFocused && isConnect == App.CONNECTED) MaterialTheme.colorScheme.primary
-                    else if (isSmartButtonFocused) MaterialTheme.colorScheme.primary
-                    else colorResource(id = R.color.blue_text)
-                    Button(
-                        onClick = {},
+            )
+            {
+                if (isConnect != App.CONNECTED) {
+                    Box(
                         modifier = Modifier
-                            .padding(start = 14.dp, end = 14.dp, bottom = 6.dp, top = 12.dp)
-                            .align(Alignment.BottomCenter)
-                            .background(MaterialTheme.colorScheme.onBackground, RoundedCornerShape(16.dp))
-                            .border(2.dp, color, RoundedCornerShape(16.dp))
-                            .onFocusChanged {
-                                isSmartButtonFocused = it.isFocused
+                            .fillMaxWidth(fraction = 0.4f)
+                            .padding(horizontal = 0.dp)
+                            .padding(vertical = 2.dp)
+                            .height(90.dp)
+                            .border(
+                                border = BorderStroke(2.dp, MaterialTheme.colorScheme.onBackground),
+                                shape = RoundedCornerShape(28.dp)
+                            )
+                            .background(
+                                shape = RoundedCornerShape(28.dp),
+                                color = MaterialTheme.colorScheme.onBackground
+                            )
+                            .align(Alignment.CenterHorizontally),
+                    ) {
+                        AddRowSmartTV(
+                            navHostController,
+                            basePreferenceHelper,
+                            context,
+                            isTablet(),
+                            focusRequester2,
+                            homeViewModel
+                        )
+                        var smartServer = basePreferenceHelper.getSmartServerObject()
+                        val recommended = basePreferenceHelper.getRecommendedServerObject()
+                        val selectedSmartList = basePreferenceHelper.getSmartList()
+                        var isSmartButtonFocused by remember { mutableStateOf(false) }
+                        when(selectedSmartList) {
+                            smartConnect[0] -> {
+                                smartServer = basePreferenceHelper.getRecommendedServerObject()
                             }
-//                            .focusable()
-                            .clickable {
-                                Log.d(
-                                    "test_button",
-                                    "onClick Smart Connect ${smartServer?.server_name}"
+                            smartConnect[1] -> {
+                                smartServer = basePreferenceHelper.getSmartServerObject() ?: recommended
+                            }
+                            smartConnect[2] -> {
+                                smartServer = basePreferenceHelper.getSmartServerObject() ?: recommended
+                            }
+                            else -> {}
+                        }
+                        val color = if (isSmartButtonFocused && isConnect == App.CONNECTED) MaterialTheme.colorScheme.primary
+                        else if (isSmartButtonFocused) MaterialTheme.colorScheme.primary
+                        else colorResource(id = R.color.blue_text)
+                        Button(
+                            onClick = {},
+                            modifier = Modifier
+                                .padding(start = 14.dp, end = 14.dp, bottom = 6.dp, top = 12.dp)
+                                .align(Alignment.BottomCenter)
+                                .background(
+                                    MaterialTheme.colorScheme.onBackground,
+                                    RoundedCornerShape(16.dp)
                                 )
-                                basePreferenceHelper.setSmartServerObject(smartServer)
-                                if (isConnect == App.CONNECTED) {
-                                    Log.d("isConnect_State_vpn", "stopVPN")
-                                    val lastServer = basePreferenceHelper.getConnectedServer()
+                                .border(2.dp, color, RoundedCornerShape(16.dp))
+                                .onFocusChanged {
+                                    isSmartButtonFocused = it.isFocused
+                                }
+                                .onKeyEvent {
+                                    when (it.key) {
+                                        Key.DirectionLeft -> { true }
+                                        Key.DirectionRight -> { true }
+                                        else -> false
+                                    }
+                                }
+//                            .focusable()
+                                .clickable {
                                     Log.d(
-                                        "test_conn_ser_obj",
-                                        "smart => ${lastServer?.server_name} ${smartServer?.server_name}"
+                                        "test_button",
+                                        "onClick Smart Connect ${smartServer?.server_name}"
                                     )
-                                    if (lastServer?.id != smartServer?.id) {
-                                        isServerDialog.value = true
-                                        if (smartServer != null) {
-                                            serverObj.value = smartServer
+                                    basePreferenceHelper.setSmartServerObject(smartServer)
+                                    if (isConnect == App.CONNECTED) {
+                                        Log.d("isConnect_State_vpn", "stopVPN")
+                                        val lastServer = basePreferenceHelper.getConnectedServer()
+                                        Log.d(
+                                            "test_conn_ser_obj",
+                                            "smart => ${lastServer?.server_name} ${smartServer?.server_name}"
+                                        )
+                                        if (lastServer?.id != smartServer?.id) {
+                                            isServerDialog.value = true
+                                            if (smartServer != null) {
+                                                serverObj.value = smartServer
+                                            }
+                                        } else {
+                                            vpnConnectionsUtil.stopVpn()
                                         }
-                                    } else {
-                                        vpnConnectionsUtil.stopVpn()
-                                    }
 
 
 //                                vpnConnectionsUtil.stopVpn()
@@ -812,85 +836,392 @@ fun HomeTV(
 //                                    vpnConnectionsUtil.startVpn()
 //                                }, 500)
 //                                homeViewModel.getIp()
-                                } else if (isConnect == App.CONNECTING) {
-                                    vpnConnectionsUtil.stopVpn()
-                                } else if (isConnect == App.DISCONNECTED) {
-                                    Log.d("isConnect_State_vpn", "startVPN")
-                                    basePreferenceHelper.setConnectedServer(smartServer)
-                                    if (smartServer != null) {
-                                        serverListViewModelSplash.setRecentlyConnectedServer(
-                                            smartServer
-                                        )
+                                    } else if (isConnect == App.CONNECTING) {
+                                        vpnConnectionsUtil.stopVpn()
+                                    } else if (isConnect == App.DISCONNECTED) {
+                                        Log.d("isConnect_State_vpn", "startVPN")
+                                        basePreferenceHelper.setConnectedServer(smartServer)
+                                        if (smartServer != null) {
+                                            serverListViewModelSplash.setRecentlyConnectedServer(
+                                                smartServer
+                                            )
+                                        }
+                                        vpnConnectionsUtil.startVpn()
                                     }
-                                    vpnConnectionsUtil.startVpn()
                                 }
-                            }
-                            .fillMaxWidth()
-                            .height(35.dp),
-                        shape = RoundedCornerShape(16.dp),
-                        colors = ButtonDefaults.buttonColors(
-                            contentColor = colorResource(id = R.color.white),
-                            containerColor = colorResource(id = R.color.blue_text),
-                        ),
-                    ) {
-                        Text(
-                            text = "Smart Connect",
-                            style = MaterialTheme.typography.customTypography.labelLarge.copy(
-                                fontSize = 16.sp, lineHeight = 0.sp
+                                .fillMaxWidth()
+                                .height(35.dp),
+                            shape = RoundedCornerShape(16.dp),
+                            colors = ButtonDefaults.buttonColors(
+                                contentColor = colorResource(id = R.color.white),
+                                containerColor = colorResource(id = R.color.blue_text),
                             ),
-                            modifier = Modifier.background(Color.Transparent)
-                        )
+                        ) {
+                            Text(
+                                text = "Smart Connect",
+                                style = MaterialTheme.typography.customTypography.labelLarge.copy(
+                                    fontSize = 16.sp, lineHeight = 0.sp
+                                ),
+                                modifier = Modifier.background(Color.Transparent)
+                            )
+                        }
                     }
-                }
 
-                /* Select Server Box*/
+                    /* Select Server Box*/
 //                if (isConnect != App.CONNECTED) { }
 
 //                Spacer(modifier = Modifier.weight(1f))
 
-                var isLayoutFocused by remember { mutableStateOf(false) }
-                val color = if (isLayoutFocused && isConnect == App.CONNECTED) MaterialTheme.colorScheme.primary
-                else if (isLayoutFocused) MaterialTheme.colorScheme.primary
-                else MaterialTheme.colorScheme.onBackground
-                Box(
-                    modifier = Modifier
-                        .fillMaxWidth(fraction = 0.4f)
-                        .padding(horizontal = 0.dp, vertical = 2.dp)
-                        .padding(top = 0.dp)
-                        .height(50.dp)
-                        .onKeyEvent {
-                            if (it.type == KeyEventType.KeyDown && it.key == Key.DirectionDown) {
-                                isFirstItemPressed.value = true
-                                true
-                            } else {
-                                false
+                    var isLayoutFocused by remember { mutableStateOf(false) }
+                    val color = if (isLayoutFocused && isConnect == App.CONNECTED) MaterialTheme.colorScheme.primary
+                    else if (isLayoutFocused) MaterialTheme.colorScheme.primary
+                    else MaterialTheme.colorScheme.onBackground
+                    Box(
+                        modifier = Modifier
+                            .fillMaxWidth(fraction = 0.4f)
+                            .padding(horizontal = 0.dp, vertical = 2.dp)
+                            .padding(top = 0.dp)
+                            .height(50.dp)
+                            .onKeyEvent {
+                                if (it.type == KeyEventType.KeyDown && it.key == Key.DirectionDown) {
+                                    isFirstItemPressed.value = true
+                                    true
+                                } else {
+                                    false
+                                }
+                            }
+                            .onFocusChanged {
+                                isLayoutFocused = it.isFocused
+                            }
+                            .focusable()
+                            .clickable(
+                                indication = null,
+                                interactionSource = remember { MutableInteractionSource() }
+                            ) {
+                                toChangeServer.value = false
+                                navHostController.navigate(
+                                    ScreenTV.ServerListTV.route
+                                )
+                            }
+                            .border(
+                                border = BorderStroke(2.dp, color),
+                                shape = RoundedCornerShape(28.dp)
+                            )
+                            .background(
+                                shape = RoundedCornerShape(28.dp),
+                                color = MaterialTheme.colorScheme.onBackground
+                            )
+                            .align(Alignment.CenterHorizontally),
+                        contentAlignment = Alignment.CenterStart,
+                    ) {
+                        AddRowSelectServerTV(navHostController, isTablet())
+                    }
+                }
+                else {
+                    var isFeedbackClicked by remember { mutableStateOf(prefHelper.getFeedbackState()) }
+                    var isDelayedFeedbackClicked by remember { mutableStateOf(isFeedbackClicked) }
+                    var isThumbUpClicked by remember { mutableStateOf(App.isThumbUpClicked) }
+                    var isThumbDownClicked by remember { mutableStateOf(App.isThumbDownClicked) }
+                    var isRipple = false
+                    var isThumbUpFocused by remember { mutableStateOf(false) }
+                    var isThumbDownFocused by remember { mutableStateOf(false) }
+
+                    Box(
+                        modifier = Modifier
+                            .fillMaxWidth(fraction = 0.4f)
+                            .padding(horizontal = 0.dp)
+                            .padding(vertical = 5.dp)
+                            .height(90.dp)
+                            .align(Alignment.CenterHorizontally)
+//                    .border(
+//                        border = BorderStroke(0.dp, Color.Blue),
+//                        shape = RoundedCornerShape(28.dp)
+//                    )
+                            .background(
+                                color = Color.Transparent
+                            ),
+                    ) {
+                        Row(
+                            modifier = Modifier
+                                .padding(0.dp)
+                                .background(Color.Transparent),
+                            horizontalArrangement = Arrangement.SpaceAround,
+                            verticalAlignment = Alignment.CenterVertically
+                        ) {
+                            Surface(
+                                modifier = Modifier
+                                    .weight(1f)
+                                    .fillMaxHeight()
+                                    .padding(end = 5.dp)
+                                    .border(
+                                        width = 1.dp,
+                                        color = MaterialTheme.colorScheme.onBackground,
+                                        shape = RoundedCornerShape(24.dp)
+                                    )
+                                    .background(Color.Transparent),
+                                shape = RoundedCornerShape(24.dp)
+
+                            ) {
+                                Column(
+                                    modifier = Modifier
+                                        .background(MaterialTheme.colorScheme.onBackground)
+                                        .border(
+                                            width = 1.dp,
+                                            color = MaterialTheme.colorScheme.onBackground,
+                                            shape = RoundedCornerShape(24.dp)
+                                        ),
+                                    verticalArrangement = Arrangement.SpaceEvenly,
+                                    horizontalAlignment = Alignment.CenterHorizontally,
+                                ) {
+                                    Image(
+                                        painter = painterResource(id = R.drawable.greenarrow3x),
+                                        contentDescription = "Green Arrow",
+                                        modifier = Modifier
+                                            .size(30.dp)
+                                    )
+                                    Text(
+                                        text = "Download",
+                                        style = MaterialTheme.typography.customTypography.displayMedium.copy(
+                                            color = MaterialTheme.colorScheme.onTertiary
+                                        ),
+                                        modifier = Modifier.alpha(0.6F)
+                                    )
+                                    Row(
+                                        horizontalArrangement = Arrangement.SpaceAround,
+                                        verticalAlignment = Alignment.CenterVertically
+                                    ) {
+                                        Text(
+                                            text = String.format(Locale.US, "%.2f", StringDown.value),
+                                            style = MaterialTheme.typography.customTypography.displayLarge.copy(
+                                                color = MaterialTheme.colorScheme.primary
+                                            )
+                                        )
+                                        Text(
+                                            text = "  ${StringDownUnit.value}",
+                                            style = MaterialTheme.typography.customTypography2.labelSmall.copy(
+                                                color = MaterialTheme.colorScheme.primary
+                                            ),
+                                            modifier = Modifier.alpha(0.5F)
+                                        )
+                                    }
+                                }
+                            }
+                            Surface(
+                                modifier = Modifier
+                                    .weight(1f)
+                                    .fillMaxHeight()
+                                    .padding(start = 5.dp)
+                                    .border(
+                                        width = 1.dp,
+                                        color = MaterialTheme.colorScheme.onBackground,
+                                        shape = RoundedCornerShape(24.dp)
+                                    )
+                                    .background(Color.Transparent),
+                                shape = RoundedCornerShape(24.dp)
+                            ) {
+                                Column(
+                                    modifier = Modifier
+                                        .background(MaterialTheme.colorScheme.onBackground)
+                                        .border(
+                                            width = 1.dp,
+                                            color = MaterialTheme.colorScheme.onBackground,
+                                            shape = RoundedCornerShape(24.dp)
+                                        ),
+                                    verticalArrangement = Arrangement.SpaceEvenly,
+                                    horizontalAlignment = Alignment.CenterHorizontally
+                                ) {
+                                    Image(
+                                        painter = painterResource(id = R.drawable.yellowarrow3x),
+                                        contentDescription = "Yellow Arrow",
+                                        modifier = Modifier
+                                            .size(30.dp)
+                                    )
+                                    Text(
+                                        text = "Upload",
+                                        style = MaterialTheme.typography.customTypography.displayMedium.copy(
+                                            color = MaterialTheme.colorScheme.onTertiary
+                                        ),
+                                        modifier = Modifier.alpha(0.6F)
+                                    )
+                                    Row(
+                                        horizontalArrangement = Arrangement.SpaceAround,
+                                        verticalAlignment = Alignment.CenterVertically
+                                    ) {
+                                        Text(
+                                            text = String.format(Locale.US,"%.2f", StringUp.value),
+                                            style = MaterialTheme.typography.customTypography.displayLarge.copy(
+                                                color = MaterialTheme.colorScheme.primary
+                                            )
+                                        )
+                                        Text(
+                                            text = "  ${StringUpUnit.value}",
+                                            style = MaterialTheme.typography.customTypography2.labelSmall.copy(
+                                                color = MaterialTheme.colorScheme.primary
+                                            ),
+                                            modifier = Modifier.alpha(0.5F)
+                                        )
+                                    }
+                                }
                             }
                         }
-                        .onFocusChanged {
-                            isLayoutFocused = it.isFocused
-                        }
-                        .focusable()
-                        .clickable(
-                            indication = null,
-                            interactionSource = remember { MutableInteractionSource() }
+                    }
+
+                    val backgroundColor by animateColorAsState(
+                        targetValue = if (isDelayedFeedbackClicked) colorResource(id = R.color.yellow_feedback)
+                        else MaterialTheme.colorScheme.outlineVariant, label = "Color"
+                    )
+
+                    Box(
+                        modifier = Modifier
+                            .padding(horizontal = 0.dp)
+                            .padding(vertical = 5.dp)
+                            .fillMaxWidth(fraction = 0.4f)
+                            .height(55.dp)
+                            .background(
+                                backgroundColor,
+                                shape = RoundedCornerShape(12.dp)
+                            )
+                            .border(
+                                width = 1.dp,
+                                color = Color.Transparent,
+                                shape = RoundedCornerShape(12.dp)
+                            )
+                            .align(Alignment.CenterHorizontally)
+                    ) {
+                        Row(
+                            modifier = Modifier
+                                .fillMaxSize()
+                                .padding(16.dp),
+                            horizontalArrangement = Arrangement.SpaceBetween,
+                            verticalAlignment = Alignment.CenterVertically
                         ) {
-                            toChangeServer.value = false
-                            navHostController.navigate(
-                                ScreenTV.ServerListTV.route
+                            Text(
+                                text = "How's your connection?",
+                                style = MaterialTheme.typography.customTypography.titleSmall.copy(
+                                    color = Color.White
+                                )
                             )
+
+                            Row(
+                                modifier = Modifier
+                                    .background(Color.Transparent),
+                                horizontalArrangement = Arrangement.Center,
+                                verticalAlignment = Alignment.CenterVertically
+                            ) {
+                                Image(
+                                    imageVector = Icons.Outlined.ThumbUp,
+                                    contentDescription = "Thumb Up",
+                                    modifier = Modifier
+                                        .padding(end = 25.dp)
+                                        .size(24.dp)
+                                        .focusRequester(focusRequester2)
+                                        .onKeyEvent {
+                                            if (it.type == KeyEventType.KeyDown && it.key == Key.DirectionDown) {
+                                                isFirstItemPressed.value = true
+                                                true
+                                            }
+                                            else if (it.type == KeyEventType.KeyDown && it.key == Key.DirectionLeft) {
+                                                true
+                                            }
+                                            else {
+                                                false
+                                            }
+                                        }
+                                        .onFocusChanged {
+                                            isThumbUpFocused = it.isFocused
+                                        }
+                                        .focusable()
+                                        .clickable(
+                                            indication = rememberRipple(
+                                                bounded = true,
+                                                color = colorResource(id = R.color.switch_green)
+                                            ),
+                                            interactionSource = remember { MutableInteractionSource() }
+                                        ) {
+                                            val connectedServer =
+                                                basePreferenceHelper.getConnectedServer()
+                                            val selectedProtocol =
+                                                basePreferenceHelper.getProtocol().full_name
+
+                                            if (!isFeedbackClicked) {
+                                                isFeedbackClicked = true
+                                                prefHelper.setFeedbackState(true)
+                                                isThumbUpClicked = true
+                                                App.isThumbUpClicked = true
+                                                isRipple = true
+
+                                                homeViewModel.feedback(
+                                                    rating = 1,
+                                                    server_id = connectedServer?.id,
+                                                    server_ip = connectedServer?.ip.toString(),
+                                                    protocol = selectedProtocol
+                                                )
+                                            }
+                                        }
+                                    ,
+                                    colorFilter = ColorFilter.tint(
+                                        if (isFeedbackClicked && isThumbUpClicked) colorResource(id = R.color.switch_green)
+                                        else if (isThumbUpFocused) colorResource(id = R.color.dark_blue_gray_text)
+                                        else colorResource(id = R.color.white)
+                                    )
+                                )
+                                Image(
+                                    imageVector = Icons.Outlined.ThumbDown,
+                                    contentDescription = "Thumb Down",
+                                    modifier = Modifier
+                                        .padding(end = 10.dp)
+                                        .size(24.dp)
+                                        .onFocusChanged {
+                                            isThumbDownFocused = it.isFocused
+                                        }
+                                        .onKeyEvent {
+                                            if (it.type == KeyEventType.KeyDown && it.key == Key.DirectionDown) {
+                                                isFirstItemPressed.value = true
+                                                true
+                                            }
+                                            else if (it.type == KeyEventType.KeyDown && it.key == Key.DirectionRight) {
+                                                true
+                                            }
+                                            else {
+                                                false
+                                            }
+                                        }
+                                        .focusable()
+                                        .clickable(
+                                            indication = rememberRipple(
+                                                bounded = true,
+                                                color = colorResource(id = R.color.Red)
+                                            ),
+                                            interactionSource = remember { MutableInteractionSource() }
+                                        ) {
+                                            val connectedServer =
+                                                basePreferenceHelper.getConnectedServer()
+                                            val selectedProtocol =
+                                                basePreferenceHelper.getProtocol().full_name
+
+                                            if (!isFeedbackClicked) {
+                                                isFeedbackClicked = true
+                                                prefHelper.setFeedbackState(true)
+                                                isThumbDownClicked = true
+                                                App.isThumbDownClicked = true
+
+                                                homeViewModel.feedback(
+                                                    rating = 0,
+                                                    server_id = connectedServer?.id,
+                                                    server_ip = connectedServer?.ip.toString(),
+                                                    protocol = selectedProtocol
+                                                )
+                                            }
+                                        },
+                                    colorFilter = ColorFilter.tint(
+                                        if (isFeedbackClicked && isThumbDownClicked) colorResource(id = R.color.Red)
+                                        else if (isThumbDownFocused) colorResource(id = R.color.dark_blue_gray_text)
+                                        else colorResource(id = R.color.white)
+                                    )
+                                )
+                            }
                         }
-                        .border(
-                            border = BorderStroke(2.dp, color),
-                            shape = RoundedCornerShape(28.dp)
-                        )
-                        .background(
-                            shape = RoundedCornerShape(28.dp),
-                            color = MaterialTheme.colorScheme.onBackground
-                        )
-                        .align(Alignment.CenterHorizontally),
-                    contentAlignment = Alignment.CenterStart,
-                ) {
-                    AddRowSelectServerTV(navHostController, isTablet())
+                    }
                 }
             }
         }
@@ -1315,12 +1646,11 @@ fun BoxScope.AddRowSmartTV(
                     .onKeyEvent {
                         when (it.key) {
                             Key.DirectionLeft -> {
-//                                Toast.makeText(
-//                                    context, "DirectionLeft Change", Toast.LENGTH_SHORT
-//                                ).show()
                                 true
                             }
-
+                            Key.DirectionRight -> {
+                                true
+                            }
                             else -> {
                                 false
                             }