android/tv: reduce layout width and fix navigation
fixes tailscale/corp#18956 fixes tailscale/corp#18964 Adds a letterboxing effect as a temporary measure to make the UI a bit more usable on AndroidTV. Fixes a few navigation peculiarities specific to TV (notably, there some padding on the user avatar so you can see when it's highlighted) Pops a QR code on AndroidTV where we have no browser to complete the flow. Signed-off-by: Jonathan Nobels <jonathan@tailscale.com>jonathan/androidTV
Jonathan Nobels
7 months ago
parent
2e237e375e
commit
ff73aad170
@ -0,0 +1,29 @@
|
|||||||
|
// Copyright (c) Tailscale Inc & AUTHORS
|
||||||
|
// SPDX-License-Identifier: BSD-3-Clause
|
||||||
|
|
||||||
|
package com.tailscale.ipn.ui.util
|
||||||
|
|
||||||
|
import android.content.pm.PackageManager
|
||||||
|
import androidx.compose.foundation.layout.padding
|
||||||
|
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.draw.clip
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
import com.tailscale.ipn.App
|
||||||
|
import com.tailscale.ipn.ui.util.AndroidTVUtil.isAndroidTV
|
||||||
|
|
||||||
|
object AndroidTVUtil {
|
||||||
|
fun isAndroidTV(): Boolean {
|
||||||
|
return (App.appInstance.packageManager.hasSystemFeature(PackageManager.FEATURE_TELEVISION) ||
|
||||||
|
App.appInstance.packageManager.hasSystemFeature(PackageManager.FEATURE_LEANBACK))
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Applies a letterbox effect iff we're running on Android TV to reduce the overall width
|
||||||
|
// of the UI.
|
||||||
|
fun Modifier.universalFit(): Modifier {
|
||||||
|
return when (isAndroidTV()) {
|
||||||
|
true -> this.padding(horizontal = 150.dp, vertical = 10.dp).clip(RoundedCornerShape(10.dp))
|
||||||
|
false -> this
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
// Copyright (c) Tailscale Inc & AUTHORS
|
||||||
|
// SPDX-License-Identifier: BSD-3-Clause
|
||||||
|
|
||||||
|
package com.tailscale.ipn.ui.view
|
||||||
|
|
||||||
|
import androidx.compose.foundation.Image
|
||||||
|
import androidx.compose.foundation.background
|
||||||
|
import androidx.compose.foundation.layout.Arrangement
|
||||||
|
import androidx.compose.foundation.layout.Box
|
||||||
|
import androidx.compose.foundation.layout.Column
|
||||||
|
import androidx.compose.foundation.layout.fillMaxSize
|
||||||
|
import androidx.compose.foundation.layout.fillMaxWidth
|
||||||
|
import androidx.compose.foundation.layout.padding
|
||||||
|
import androidx.compose.foundation.layout.size
|
||||||
|
import androidx.compose.foundation.shape.RoundedCornerShape
|
||||||
|
import androidx.compose.material3.Button
|
||||||
|
import androidx.compose.material3.ExperimentalMaterial3Api
|
||||||
|
import androidx.compose.material3.MaterialTheme
|
||||||
|
import androidx.compose.material3.Surface
|
||||||
|
import androidx.compose.material3.Text
|
||||||
|
import androidx.compose.runtime.Composable
|
||||||
|
import androidx.compose.runtime.collectAsState
|
||||||
|
import androidx.compose.ui.Alignment
|
||||||
|
import androidx.compose.ui.Modifier
|
||||||
|
import androidx.compose.ui.draw.clip
|
||||||
|
import androidx.compose.ui.res.stringResource
|
||||||
|
import androidx.compose.ui.unit.dp
|
||||||
|
import androidx.compose.ui.window.Dialog
|
||||||
|
import androidx.lifecycle.viewmodel.compose.viewModel
|
||||||
|
import com.tailscale.ipn.R
|
||||||
|
import com.tailscale.ipn.ui.viewModel.LoginQRViewModel
|
||||||
|
|
||||||
|
@OptIn(ExperimentalMaterial3Api::class)
|
||||||
|
@Composable
|
||||||
|
fun LoginQRView(onDismiss: () -> Unit = {}, model: LoginQRViewModel = viewModel()) {
|
||||||
|
Surface(color = MaterialTheme.colorScheme.scrim, modifier = Modifier.fillMaxSize()) {
|
||||||
|
Dialog(onDismissRequest = onDismiss) {
|
||||||
|
val image = model.qrCode.collectAsState()
|
||||||
|
|
||||||
|
Column(
|
||||||
|
modifier =
|
||||||
|
Modifier.clip(RoundedCornerShape(10.dp))
|
||||||
|
.background(MaterialTheme.colorScheme.surfaceContainer)
|
||||||
|
.padding(20.dp),
|
||||||
|
verticalArrangement = Arrangement.spacedBy(10.dp),
|
||||||
|
horizontalAlignment = Alignment.CenterHorizontally) {
|
||||||
|
Text(
|
||||||
|
text = stringResource(R.string.scan_to_connect_to_your_tailnet),
|
||||||
|
style = MaterialTheme.typography.titleMedium,
|
||||||
|
color = MaterialTheme.colorScheme.onSurface)
|
||||||
|
Box(
|
||||||
|
modifier =
|
||||||
|
Modifier.size(200.dp)
|
||||||
|
.background(MaterialTheme.colorScheme.onSurface)
|
||||||
|
.fillMaxWidth(),
|
||||||
|
contentAlignment = Alignment.Center) {
|
||||||
|
image.value?.let {
|
||||||
|
Image(
|
||||||
|
bitmap = it,
|
||||||
|
contentDescription = "Scan to login",
|
||||||
|
modifier = Modifier.fillMaxSize())
|
||||||
|
}
|
||||||
|
}
|
||||||
|
Button(onClick = onDismiss) { Text(text = stringResource(R.string.dismiss)) }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,62 @@
|
|||||||
|
// Copyright (c) Tailscale Inc & AUTHORS
|
||||||
|
// SPDX-License-Identifier: BSD-3-Clause
|
||||||
|
|
||||||
|
package com.tailscale.ipn.ui.viewModel
|
||||||
|
|
||||||
|
import android.graphics.Bitmap
|
||||||
|
import android.graphics.Color
|
||||||
|
import androidx.compose.ui.graphics.ImageBitmap
|
||||||
|
import androidx.compose.ui.graphics.asImageBitmap
|
||||||
|
import androidx.lifecycle.viewModelScope
|
||||||
|
import com.google.zxing.BarcodeFormat
|
||||||
|
import com.google.zxing.EncodeHintType
|
||||||
|
import com.google.zxing.WriterException
|
||||||
|
import com.google.zxing.qrcode.QRCodeWriter
|
||||||
|
import com.tailscale.ipn.ui.notifier.Notifier
|
||||||
|
import com.tailscale.ipn.ui.util.set
|
||||||
|
import kotlinx.coroutines.flow.MutableStateFlow
|
||||||
|
import kotlinx.coroutines.flow.StateFlow
|
||||||
|
import kotlinx.coroutines.launch
|
||||||
|
|
||||||
|
class LoginQRViewModel : IpnViewModel() {
|
||||||
|
|
||||||
|
val qrCode: StateFlow<ImageBitmap?> = MutableStateFlow(null)
|
||||||
|
|
||||||
|
init {
|
||||||
|
viewModelScope.launch {
|
||||||
|
Notifier.browseToURL.collect { url ->
|
||||||
|
url?.let { qrCode.set(generateQRCode(url, 200, 0)) } ?: run { qrCode.set(null) }
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
fun generateQRCode(content: String, size: Int, padding: Int): ImageBitmap? {
|
||||||
|
val qrCodeWriter = QRCodeWriter()
|
||||||
|
|
||||||
|
val encodeHints = mapOf<EncodeHintType, Any?>(EncodeHintType.MARGIN to padding)
|
||||||
|
|
||||||
|
val bitmapMatrix =
|
||||||
|
try {
|
||||||
|
qrCodeWriter.encode(content, BarcodeFormat.QR_CODE, size, size, encodeHints)
|
||||||
|
} catch (ex: WriterException) {
|
||||||
|
return null
|
||||||
|
}
|
||||||
|
|
||||||
|
val qrCode =
|
||||||
|
Bitmap.createBitmap(
|
||||||
|
size,
|
||||||
|
size,
|
||||||
|
Bitmap.Config.ARGB_8888,
|
||||||
|
)
|
||||||
|
|
||||||
|
for (x in 0 until size) {
|
||||||
|
for (y in 0 until size) {
|
||||||
|
val shouldColorPixel = bitmapMatrix?.get(x, y) ?: false
|
||||||
|
val pixelColor = if (shouldColorPixel) Color.BLACK else Color.WHITE
|
||||||
|
qrCode.setPixel(x, y, pixelColor)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return qrCode.asImageBitmap()
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue