Merge pull request #257 from usetrmnl/update-play

Update play
2026-04-29 13:35:26 -07:00 · 2026-02-07 21:01:29 -05:00
parent 470f2c2d2e d238d31261
commit a4e386829f
7 changed files with 114 additions and 2115 deletions
@@ -1,9 +1,8 @@
 package ink.trmnl.android.ui.aboutapp

-import androidx.compose.foundation.Image
-import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.Spacer
 import androidx.compose.foundation.layout.WindowInsets
 import androidx.compose.foundation.layout.fillMaxWidth
@@ -14,11 +13,12 @@ import androidx.compose.foundation.layout.safeDrawing
 import androidx.compose.foundation.layout.statusBars
 import androidx.compose.foundation.rememberScrollState
 import androidx.compose.foundation.verticalScroll
-import androidx.compose.material3.Button
 import androidx.compose.material3.ExperimentalMaterial3Api
+import androidx.compose.material3.HorizontalDivider
 import androidx.compose.material3.Icon
 import androidx.compose.material3.IconButton
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.OutlinedButton
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
 import androidx.compose.material3.TopAppBar
@@ -29,6 +29,7 @@ import androidx.compose.ui.platform.LocalUriHandler
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.font.FontWeight
+import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.PreviewLightDark
 import androidx.compose.ui.unit.dp
 import com.slack.circuit.codegen.annotations.CircuitInject
@@ -135,66 +136,135 @@ fun AppInfoContent(
            modifier =
                Modifier
                    .padding(innerPadding)
-                    .padding(horizontal = 32.dp)
+                    .padding(horizontal = 24.dp)
                    .verticalScroll(rememberScrollState())
                    .fillMaxWidth()
                    .navigationBarsPadding(),
            horizontalAlignment = Alignment.CenterHorizontally,
-            verticalArrangement = Arrangement.Center,
        ) {
-            Spacer(modifier = Modifier.height(24.dp))
+            Spacer(modifier = Modifier.height(32.dp))

+            // App Logo
            Icon(
                painter = painterResource(R.drawable.trmnl_logo_plain),
                contentDescription = null,
                tint = TrmnlOrange,
-                modifier = Modifier.height(64.dp),
+                modifier = Modifier.height(72.dp),
            )

-            Spacer(modifier = Modifier.height(16.dp))
+            Spacer(modifier = Modifier.height(24.dp))

+            // App Name
            Text(
                text = stringResource(R.string.app_name),
-                style = MaterialTheme.typography.headlineSmall,
+                style = MaterialTheme.typography.headlineMedium,
                fontWeight = FontWeight.Bold,
            )

            Spacer(modifier = Modifier.height(8.dp))

+            // App Description
            Text(
-                text = "Version: ${state.appVersion}",
-                style = MaterialTheme.typography.bodyLarge,
-            )
-
-            Spacer(modifier = Modifier.height(4.dp))
-
-            Text(
-                text = "Build Type: ${state.buildType}",
+                text = "Display your TRMNL device content on your Android device",
                style = MaterialTheme.typography.bodyMedium,
+                color = MaterialTheme.colorScheme.onSurfaceVariant,
+                textAlign = androidx.compose.ui.text.style.TextAlign.Center,
            )

-            Image(
-                painter = painterResource(R.drawable.trmnl_device_white_transparent),
-                contentDescription = "TRMNL Device",
+            Spacer(modifier = Modifier.height(28.dp))
+
+            // App Details Section
+            Column(
                modifier =
                    Modifier
-                        .padding(vertical = 16.dp)
-                        .clickable { state.eventSink(Event.OpenTrmnlSite) },
-            )
+                        .fillMaxWidth()
+                        .padding(16.dp)
+                        .padding(
+                            top = 16.dp,
+                            bottom = 16.dp,
+                        ),
+                horizontalAlignment = Alignment.Start,
+            ) {
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.SpaceBetween,
+                ) {
+                    Text(
+                        text = "Version",
+                        style = MaterialTheme.typography.bodyMedium,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant,
+                    )
+                    Text(
+                        text = state.appVersion,
+                        style = MaterialTheme.typography.bodyMedium,
+                        fontWeight = FontWeight.SemiBold,
+                    )
+                }
+
+                Spacer(modifier = Modifier.height(12.dp))
+
+                Row(
+                    modifier = Modifier.fillMaxWidth(),
+                    horizontalArrangement = Arrangement.SpaceBetween,
+                ) {
+                    Text(
+                        text = "Build Type",
+                        style = MaterialTheme.typography.bodyMedium,
+                        color = MaterialTheme.colorScheme.onSurfaceVariant,
+                    )
+                    Text(
+                        text = state.buildType,
+                        style = MaterialTheme.typography.bodyMedium,
+                        fontWeight = FontWeight.SemiBold,
+                    )
+                }
+            }

            Spacer(modifier = Modifier.height(8.dp))

-            Button(
+            HorizontalDivider(modifier = Modifier.fillMaxWidth())
+
+            Spacer(modifier = Modifier.height(24.dp))
+
+            // Actions Section
+            Text(
+                text = "Connect & Learn",
+                style = MaterialTheme.typography.titleMedium,
+                fontWeight = FontWeight.SemiBold,
+                modifier = Modifier.fillMaxWidth(),
+            )
+
+            Spacer(modifier = Modifier.height(16.dp))
+
+            // GitHub Button
+            OutlinedButton(
                onClick = { state.eventSink(Event.OpenGithub) },
-                modifier = Modifier.fillMaxWidth(0.7f),
+                modifier = Modifier.fillMaxWidth(),
            ) {
                Icon(
-                    painter = painterResource(R.drawable.code_24dp),
+                    painter = painterResource(R.drawable.github_filled),
                    contentDescription = null,
-                    modifier = Modifier.padding(end = 8.dp),
+                    modifier = Modifier.padding(end = 12.dp),
                )
-                Text("View Project on GitHub")
+                Text("View on GitHub / Report Issues", modifier = Modifier.weight(1f))
            }
+
+            Spacer(modifier = Modifier.height(12.dp))
+
+            // TRMNL Website Button
+            OutlinedButton(
+                onClick = { state.eventSink(Event.OpenTrmnlSite) },
+                modifier = Modifier.fillMaxWidth(),
+            ) {
+                Icon(
+                    painter = painterResource(R.drawable.outline_link_2_24),
+                    contentDescription = null,
+                    modifier = Modifier.padding(end = 12.dp),
+                )
+                Text("Visit TRMNL", modifier = Modifier.weight(1f))
+            }
+
+            Spacer(modifier = Modifier.height(32.dp))
        }
    }
 }
@@ -170,10 +170,6 @@ class TrmnlImageRefreshWorker(
            httpResponseMetadata = trmnlDisplayInfo.httpResponseMetadata,
        )

-        // DEPRECATED: Battery reporting now happens via Percent-Charged header in /api/display call
-        // Battery percentage is automatically sent when fetching the next image for BYOD devices
-        // displayRepository.reportDeviceBatteryStatus(deviceConfig)
-
        // NOTE: Image metadata caching is handled automatically by `TrmnlDisplayRepository`
        // when the API call succeeds, so we don't need to save it again here.
        // See https://github.com/usetrmnl/trmnl-android/issues/195
@@ -0,0 +1,5 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:viewportHeight="20" android:viewportWidth="20" android:width="24dp">
+      
+    <path android:fillColor="#000000" android:fillType="evenOdd" android:pathData="M10,0C15.523,0 20,4.59 20,10.253C20,14.782 17.138,18.624 13.167,19.981C12.66,20.082 12.48,19.762 12.48,19.489C12.48,19.151 12.492,18.047 12.492,16.675C12.492,15.719 12.172,15.095 11.813,14.777C14.04,14.523 16.38,13.656 16.38,9.718C16.38,8.598 15.992,7.684 15.35,6.966C15.454,6.707 15.797,5.664 15.252,4.252C15.252,4.252 14.414,3.977 12.505,5.303C11.706,5.076 10.85,4.962 10,4.958C9.15,4.962 8.295,5.076 7.497,5.303C5.586,3.977 4.746,4.252 4.746,4.252C4.203,5.664 4.546,6.707 4.649,6.966C4.01,7.684 3.619,8.598 3.619,9.718C3.619,13.646 5.954,14.526 8.175,14.785C7.889,15.041 7.63,15.493 7.54,16.156C6.97,16.418 5.522,16.871 4.63,15.304C4.63,15.304 4.101,14.319 3.097,14.247C3.097,14.247 2.122,14.234 3.029,14.87C3.029,14.87 3.684,15.185 4.139,16.37C4.139,16.37 4.726,18.2 7.508,17.58C7.513,18.437 7.522,19.245 7.522,19.489C7.522,19.76 7.338,20.077 6.839,19.982C2.865,18.627 0,14.783 0,10.253C0,4.59 4.478,0 10,0" android:strokeColor="#00000000" android:strokeWidth="1"/>
+    
+</vector>
@@ -0,0 +1,5 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:viewportHeight="48" android:viewportWidth="48" android:width="24dp">
+      
+    <path android:fillColor="#00000000" android:fillType="evenOdd" android:pathData="M24,2.5a21.5,21.5 0,0 0,-6.8 41.9c1.08,0.2 1.47,-0.46 1.47,-1s0,-1.86 0,-3.65c-6,1.3 -7.24,-2.88 -7.24,-2.88A5.7,5.7 0,0 0,9 33.68c-1.95,-1.33 0.15,-1.31 0.15,-1.31a4.52,4.52 0,0 1,3.29 2.22c1.92,3.29 5,2.34 6.26,1.79a4.61,4.61 0,0 1,1.37 -2.88c-4.78,-0.54 -9.8,-2.38 -9.8,-10.62a8.29,8.29 0,0 1,2.22 -5.77,7.68 7.68,0 0,1 0.21,-5.69s1.8,-0.58 5.91,2.2a20.46,20.46 0,0 1,10.76 0c4.11,-2.78 5.91,-2.2 5.91,-2.2a7.74,7.74 0,0 1,0.21 5.69,8.28 8.28,0 0,1 2.21,5.77c0,8.26 -5,10.07 -9.81,10.61a5.12,5.12 0,0 1,1.46 4c0,2.87 0,5.19 0,5.9s0.39,1.24 1.48,1A21.5,21.5 0,0 0,24 2.5" android:strokeColor="#000000" android:strokeLineCap="round" android:strokeLineJoin="round" android:strokeWidth="1"/>
+    
+</vector>
@@ -0,0 +1,5 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android" android:height="24dp" android:tint="#000000" android:viewportHeight="960" android:viewportWidth="960" android:width="24dp">
+      
+    <path android:fillColor="@android:color/white" android:pathData="M318,840Q236,840 178,782Q120,724 120,642Q120,602 135,566Q150,530 178,502L312,369L368,425L234,559Q217,576 208.5,597.5Q200,619 200,642Q200,691 234.5,725.5Q269,760 318,760Q341,760 363,751.5Q385,743 402,726L535,592L592,649L458,782Q430,810 394,825Q358,840 318,840ZM397,620L340,563L563,340L620,397L397,620ZM648,592L592,535L726,402Q743,385 751,364Q759,343 759,320Q759,270 725,235Q691,200 641,200Q618,200 596.5,208.5Q575,217 558,234L425,368L368,312L502,178Q530,150 566,135Q602,120 642,120Q724,120 781.5,178Q839,236 839,319Q839,358 824.5,394Q810,430 782,458L648,592Z"/>
+    
+</vector>
@@ -14,7 +14,7 @@ Utility app to display TRMNL screens on any Android device

 FULL DESCRIPTION (Max 4000 characters)
 --------------------------------------------------------------------------------
-TRMNL serves as a digital display for TRMNL e-ink devices and BYOS installations. The app connects to the TRMNL or BYOS API, fetches display data, and shows it on Android devices. It can function both as a mirror for existing TRMNL devices or as a standalone TRMNL display connected directly to a Bring-Your-Own-Server (BYOS).
+TRMNL serves as a digital display for TRMNL e-ink devices and BYOS installations. It can function both as a mirror for existing TRMNL devices or as a standalone TRMNL display connected directly to a Bring-Your-Own-Server (BYOS).

 > ⚠️ Note: TRMNL app currently requires device API key for non-BYOS based devices. TRMNL device must have a developer edition or BYOD license to enable device API key.