Fix Compose UI design issues: theme tokens, a11y, lazy keys, effect keying, adaptive grids

app/smartphone/src/main/java/com/m3u/smartphone/ui/business/channel/ChannelMask.kt

@@ -102,6 +102,7 @@ import com.m3u.smartphone.ui.material.components.mask.MaskCircleButton
 import com.m3u.smartphone.ui.material.components.mask.MaskPanel
 import com.m3u.smartphone.ui.material.components.mask.MaskState
 import com.m3u.smartphone.ui.material.effects.currentBackStackEntry
+import com.m3u.smartphone.ui.material.model.FavoriteColor
 import com.m3u.smartphone.ui.material.model.LocalSpacing
 import kotlinx.coroutines.delay
 import kotlinx.coroutines.launch
@@ -303,7 +304,7 @@ fun ChannelMask(
                     MaskButton(
                         state = maskState,
                         icon = Icons.Rounded.Star,
-                        tint = if (favourite) Color(0xffffcd3c) else Color.Unspecified,
+                        tint = if (favourite) FavoriteColor else Color.Unspecified,
                         onClick = onFavorite,
                         contentDescription = if (favourite) stringResource(string.feat_channel_tooltip_unfavourite)
                         else stringResource(string.feat_channel_tooltip_favourite)

app/smartphone/src/main/java/com/m3u/smartphone/ui/business/channel/ChannelScreen.kt

@@ -179,14 +179,16 @@ fun ChannelRoute(
         }
     }
 
-    LaunchedEffect(Unit) {
+    LaunchedEffect(isSupportBrightnessGesture) {
         if (isSupportBrightnessGesture) {
             snapshotFlow { brightness }
                 .drop(1)
                 .onEach { helper.brightness = it }
                 .launchIn(this)
         }
+    }
 
+    LaunchedEffect(Unit) {
         snapshotFlow { isBarVisible }
             .onEach { isBarVisible ->
                 helper.statusBarVisibility = isBarVisible
@@ -205,7 +207,7 @@ fun ChannelRoute(
     }
 
     if (brightnessGestureEnabled) {
-        DisposableEffect(Unit) {
+        DisposableEffect(brightnessGestureEnabled) {
             val prev = helper.brightness
             onDispose {
                 helper.brightness = prev

app/smartphone/src/main/java/com/m3u/smartphone/ui/business/channel/components/DlnaDevicesBottomSheet.kt

@@ -27,7 +27,7 @@ import androidx.compose.ui.text.font.FontWeight
 import androidx.compose.ui.unit.dp
 import com.m3u.core.foundation.util.basic.title
 import com.m3u.i18n.R.string
-import com.m3u.core.foundation.components.CircularProgressIndicator
+import com.m3u.smartphone.ui.material.components.CircularProgressIndicator
 import androidx.compose.material3.Icon
 import com.m3u.smartphone.ui.material.components.mask.MaskState
 import com.m3u.smartphone.ui.material.model.LocalSpacing
@@ -115,7 +115,11 @@ internal fun DlnaDevicesBottomSheet(
                             }
                         )
                     }
-                    items(devices) { device ->
+                    items(
+                        items = devices,
+                        key = { it.udn },
+                        contentType = { "device" }
+                    ) { device ->
                         DlnaDeviceItem(
                             device = device,
                             onClick = { connectDlnaDevice(device) },

app/smartphone/src/main/java/com/m3u/smartphone/ui/business/channel/components/FormatsBottomSheet.kt

@@ -98,7 +98,11 @@ internal fun FormatsBottomSheet(
                 LazyColumn(
                     modifier = Modifier.fillMaxWidth()
                 ) {
-                    items(currentTracks) { track ->
+                    items(
+                        items = currentTracks,
+                        key = { "${it.group.hashCode()}-${it.index}" },
+                        contentType = { "track" }
+                    ) { track ->
                         val selected = selectedTrack != null &&
                                 track.group == selectedTrack.group &&
                                 track.index == selectedTrack.index

app/smartphone/src/main/java/com/m3u/smartphone/ui/business/channel/components/PlayerPanel.kt

@@ -62,7 +62,7 @@ import androidx.paging.compose.LazyPagingItems
 import androidx.paging.compose.itemKey
 import coil.compose.SubcomposeAsyncImage
 import com.m3u.core.foundation.components.AbsoluteSmoothCornerShape
-import com.m3u.core.foundation.components.CircularProgressIndicator
+import com.m3u.smartphone.ui.material.components.CircularProgressIndicator
 import com.m3u.core.foundation.ui.composableOf
 import com.m3u.core.foundation.ui.thenIf
 import com.m3u.core.foundation.util.collections.indexOf

app/smartphone/src/main/java/com/m3u/smartphone/ui/business/configuration/components/SyncProgrammesButton.kt

@@ -22,7 +22,7 @@ import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import com.m3u.core.foundation.util.basic.title
 import com.m3u.i18n.R.string
-import com.m3u.core.foundation.components.CircularProgressIndicator
+import com.m3u.smartphone.ui.material.components.CircularProgressIndicator
 import com.m3u.smartphone.ui.material.components.SelectionsDefaults
 import com.m3u.smartphone.ui.material.model.LocalSpacing
 import com.m3u.core.foundation.components.AbsoluteSmoothCornerShape

app/smartphone/src/main/java/com/m3u/smartphone/ui/business/favourite/FavouriteScreen.kt

@@ -1,6 +1,5 @@
 package com.m3u.smartphone.ui.business.favourite
 
-import android.content.res.Configuration
 import android.view.KeyEvent
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
@@ -16,7 +15,6 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.AnnotatedString
@@ -39,6 +37,7 @@ import com.m3u.i18n.R
 import com.m3u.smartphone.ui.business.favourite.components.FavoriteGallery
 import com.m3u.smartphone.ui.common.helper.Action
 import com.m3u.smartphone.ui.common.helper.LocalHelper
+import com.m3u.smartphone.ui.common.helper.adaptiveRowCount
 import com.m3u.smartphone.ui.common.helper.Metadata
 import com.m3u.smartphone.ui.material.components.EpisodesBottomSheet
 import com.m3u.smartphone.ui.material.components.MediaSheet
@@ -191,12 +190,7 @@ private fun FavoriteScreen(
     onLongClickChannel: (Channel) -> Unit,
     modifier: Modifier = Modifier
 ) {
-    val configuration = LocalConfiguration.current
-    val actualRowCount = when (configuration.orientation) {
-        Configuration.ORIENTATION_PORTRAIT -> rowCount
-        Configuration.ORIENTATION_LANDSCAPE -> rowCount + 2
-        else -> rowCount + 2
-    }
+    val actualRowCount = LocalHelper.current.adaptiveRowCount(rowCount)
     FavoriteGallery(
         contentPadding = contentPadding,
         channels = channels,

app/smartphone/src/main/java/com/m3u/smartphone/ui/business/favourite/components/FavoriteGallery.kt

@@ -15,7 +15,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.unit.dp
 import androidx.paging.compose.LazyPagingItems
 import androidx.paging.compose.itemKey
-import com.m3u.core.foundation.components.CircularProgressIndicator
+import com.m3u.smartphone.ui.material.components.CircularProgressIndicator
 import com.m3u.data.database.model.Channel
 import com.m3u.smartphone.ui.material.ktx.plus
 import com.m3u.smartphone.ui.material.model.LocalSpacing

app/smartphone/src/main/java/com/m3u/smartphone/ui/business/foryou/ForyouScreen.kt

@@ -1,6 +1,5 @@
 package com.m3u.smartphone.ui.business.foryou
 
-import android.content.res.Configuration.ORIENTATION_PORTRAIT
 import android.view.KeyEvent
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.PaddingValues
@@ -22,7 +21,6 @@ import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.graphics.Color
-import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.AnnotatedString
 import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
@@ -51,6 +49,7 @@ import com.m3u.smartphone.ui.business.foryou.components.PlaylistGallery
 import com.m3u.smartphone.ui.business.foryou.components.recommend.RecommendGallery
 import com.m3u.smartphone.ui.common.helper.Action
 import com.m3u.smartphone.ui.common.helper.LocalHelper
+import com.m3u.smartphone.ui.common.helper.adaptiveRowCount
 import com.m3u.smartphone.ui.common.helper.Metadata
 import com.m3u.smartphone.ui.material.components.EpisodesBottomSheet
 import com.m3u.smartphone.ui.material.components.MediaSheet
@@ -178,17 +177,11 @@ private fun ForyouScreen(
     onUnsubscribePlaylist: (playlistUrl: String) -> Unit,
     modifier: Modifier = Modifier
 ) {
-    val configuration = LocalConfiguration.current
     val lifecycleOwner = LocalLifecycleOwner.current
 
     var headlineSpec: Recommend.Spec? by remember { mutableStateOf(null) }
 
-    val actualRowCount = remember(rowCount, configuration.orientation) {
-        when (configuration.orientation) {
-            ORIENTATION_PORTRAIT -> rowCount
-            else -> rowCount + 2
-        }
-    }
+    val actualRowCount = LocalHelper.current.adaptiveRowCount(rowCount)
     var mediaSheetValue: MediaSheetValue.ForyouScreen by remember {
         mutableStateOf(MediaSheetValue.ForyouScreen())
     }

app/smartphone/src/main/java/com/m3u/smartphone/ui/business/foryou/components/PlaylistItem.kt

@@ -26,7 +26,7 @@ import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.text.style.TextOverflow
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.unit.sp
-import com.m3u.core.foundation.components.CircularProgressIndicator
+import com.m3u.smartphone.ui.material.components.CircularProgressIndicator
 import androidx.compose.material3.Icon
 import com.m3u.smartphone.ui.material.model.LocalSpacing
 import com.m3u.core.foundation.components.AbsoluteSmoothCornerShape

app/smartphone/src/main/java/com/m3u/smartphone/ui/business/playlist/PlaylistScreen.kt

@@ -2,8 +2,6 @@ package com.m3u.smartphone.ui.business.playlist
 
 import android.Manifest
 import android.content.Intent
-import android.content.res.Configuration.ORIENTATION_LANDSCAPE
-import android.content.res.Configuration.ORIENTATION_PORTRAIT
 import android.content.res.Configuration.UI_MODE_TYPE_APPLIANCE
 import android.content.res.Configuration.UI_MODE_TYPE_CAR
 import android.content.res.Configuration.UI_MODE_TYPE_DESK
@@ -51,7 +49,6 @@ import androidx.compose.runtime.setValue
 import androidx.compose.runtime.snapshotFlow
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.text.AnnotatedString
 import androidx.hilt.lifecycle.viewmodel.compose.hiltViewModel
@@ -80,6 +77,7 @@ import com.m3u.smartphone.ui.business.playlist.components.PlaylistTabRow
 import com.m3u.smartphone.ui.common.helper.Action
 import com.m3u.smartphone.ui.common.helper.Fob
 import com.m3u.smartphone.ui.common.helper.LocalHelper
+import com.m3u.smartphone.ui.common.helper.adaptiveRowCount
 import com.m3u.smartphone.ui.common.helper.Metadata
 import com.m3u.smartphone.ui.material.components.Destination
 import com.m3u.smartphone.ui.material.components.EpisodesBottomSheet
@@ -336,7 +334,6 @@ private fun PlaylistScreen(
         onDispose { Metadata.fob = null }
     }
 
-    val configuration = LocalConfiguration.current
 
     val sheetState = rememberModalBottomSheetState()
 
@@ -374,14 +371,7 @@ private fun PlaylistScreen(
     EventHandler(state.scrollUp) {
         gridState.scrollToItem(0)
     }
-    val orientation = configuration.orientation
-    val actualRowCount = remember(orientation, state.rowCount) {
-        when (orientation) {
-            ORIENTATION_LANDSCAPE -> state.rowCount + 2
-            ORIENTATION_PORTRAIT -> state.rowCount
-            else -> state.rowCount
-        }
-    }
+    val actualRowCount = LocalHelper.current.adaptiveRowCount(state.rowCount)
     var isExpanded by remember(state.sort == Sort.MIXED) {
         mutableStateOf(false)
     }

app/smartphone/src/main/java/com/m3u/smartphone/ui/business/playlist/components/ChannelGallery.kt

@@ -28,7 +28,7 @@ import com.m3u.business.playlist.ChannelWithProgramme
 import com.m3u.data.database.model.Channel
 import com.m3u.core.foundation.architecture.preferences.PreferencesKeys
 import com.m3u.core.foundation.architecture.preferences.preferenceOf
-import com.m3u.core.foundation.components.CircularProgressIndicator
+import com.m3u.smartphone.ui.material.components.CircularProgressIndicator
 import com.m3u.smartphone.ui.material.ktx.plus
 import com.m3u.smartphone.ui.material.model.LocalSpacing
 import kotlinx.coroutines.delay

app/smartphone/src/main/java/com/m3u/smartphone/ui/business/playlist/components/ChannelItem.kt

@@ -44,12 +44,13 @@ import coil.request.ImageRequest
 import coil.size.Size
 import com.m3u.core.foundation.architecture.preferences.PreferencesKeys
 import com.m3u.core.foundation.architecture.preferences.preferenceOf
-import com.m3u.core.foundation.components.CircularProgressIndicator
+import com.m3u.smartphone.ui.material.components.CircularProgressIndicator
 import com.m3u.data.database.model.Channel
 import com.m3u.data.database.model.Programme
 import com.m3u.i18n.R.string
 import com.m3u.smartphone.TimeUtils.formatEOrSh
 import com.m3u.core.foundation.ui.composableOf
+import com.m3u.smartphone.ui.material.model.FavoriteColor
 import com.m3u.smartphone.ui.material.model.LocalSpacing
 import com.m3u.core.foundation.components.AbsoluteSmoothCornerShape
 import kotlin.time.Clock
@@ -92,8 +93,8 @@ internal fun ChannelItem(
                 if (favourite) {
                     Icon(
                         imageVector = Icons.Rounded.Star,
-                        contentDescription = null,
-                        tint = Color(0xffffcd3c)
+                        contentDescription = stringResource(string.feat_channel_tooltip_favourite),
+                        tint = FavoriteColor
                     )
                 }
             }

app/smartphone/src/main/java/com/m3u/smartphone/ui/common/helper/Helper.kt

@@ -2,6 +2,7 @@ package com.m3u.smartphone.ui.common.helper
 
 import android.app.PictureInPictureParams
 import android.content.Context
+import android.content.res.Configuration
 import android.graphics.Color
 import android.graphics.Rect
 import android.provider.Settings
@@ -15,6 +16,7 @@ import androidx.compose.material3.windowsizeclass.calculateWindowSizeClass
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.Stable
 import androidx.compose.runtime.staticCompositionLocalOf
+import androidx.compose.ui.platform.LocalConfiguration
 import androidx.core.app.PictureInPictureModeChangedInfo
 import androidx.core.util.Consumer
 import androidx.core.view.WindowInsetsCompat
@@ -165,4 +167,17 @@ class Helper(private val activity: ComponentActivity) {
 val Helper.useRailNav: Boolean
     @Composable get() = windowSizeClass.widthSizeClass > WindowWidthSizeClass.Compact
 
+@Composable
+fun Helper.adaptiveRowCount(rowCount: Int): Int {
+    val landscapeExtra =
+        if (LocalConfiguration.current.orientation == Configuration.ORIENTATION_LANDSCAPE) 2
+        else 0
+    val widthExtra = when (windowSizeClass.widthSizeClass) {
+        WindowWidthSizeClass.Expanded -> 2
+        WindowWidthSizeClass.Medium -> 1
+        else -> 0
+    }
+    return rowCount + maxOf(landscapeExtra, widthExtra)
+}
+
 val LocalHelper = staticCompositionLocalOf<Helper> { error("Please provide helper.") }

app/smartphone/src/main/java/com/m3u/smartphone/ui/material/components/EpisodesBottomSheet.kt

@@ -35,7 +35,6 @@ import com.m3u.core.foundation.wrapper.Resource
 import com.m3u.data.database.model.Channel
 import com.m3u.data.parser.xtream.XtreamEpisodeInfo
 import androidx.compose.material3.IconButton
-import com.m3u.core.foundation.components.CircularProgressIndicator
 import com.m3u.smartphone.ui.material.model.LocalSpacing
 import com.m3u.core.foundation.components.AbsoluteSmoothCornerShape
 

app/smartphone/src/main/java/com/m3u/smartphone/ui/material/components/ProgressIndicators.kt

@@ -0,0 +1,22 @@
+package com.m3u.smartphone.ui.material.components
+
+import androidx.compose.material3.LocalContentColor
+import androidx.compose.runtime.Composable
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.Dp
+import androidx.compose.ui.unit.dp
+import com.m3u.core.foundation.components.CircularProgressIndicator as FoundationCircularProgressIndicator
+
+@Composable
+fun CircularProgressIndicator(
+    modifier: Modifier = Modifier,
+    color: Color = LocalContentColor.current,
+    size: Dp = 16.dp
+) {
+    FoundationCircularProgressIndicator(
+        modifier = modifier,
+        color = color,
+        size = size
+    )
+}

app/smartphone/src/main/java/com/m3u/smartphone/ui/material/model/Colors.kt

@@ -0,0 +1,6 @@
+package com.m3u.smartphone.ui.material.model
+
+import androidx.compose.ui.graphics.Color
+
+/** Shared semantic color for "favourite" star indicators. */
+val FavoriteColor = Color(0xFFFFCD3C)