[TV] Add folder support to the Your Podcasts tab

modules/services/localization/src/main/res/values/strings.xml

@@ -275,6 +275,7 @@
     <string name="tv_your_podcasts_empty_title">Time to fill this up</string>
     <string name="tv_your_podcasts_empty_subtitle">Followed podcasts show up here, ready to play.</string>
     <string name="tv_your_podcasts_empty_action_title">Discover podcasts</string>
+    <string name="tv_folder_empty_message">Add podcasts to this folder in the mobile app and they’ll show up here.</string>
     <string name="unavailable">Unavailable</string>
     <string name="browse_podcasts">Browse podcasts</string>
     <string name="pocket_casts_plus_badge">Pocket Casts Plus badge</string>

tv/src/main/java/au/com/shiftyjelly/pocketcasts/component/TvEmptyState.kt

@@ -8,8 +8,13 @@ import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.widthIn
 import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.withFrameNanos
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.text.style.TextAlign
 import androidx.compose.ui.tooling.preview.Devices
@@ -31,7 +36,15 @@ fun TvEmptyState(
     actionLabel: String,
     onAction: () -> Unit,
     modifier: Modifier = Modifier,
+    autoFocusAction: Boolean = false,
 ) {
+    val focusRequester = remember { FocusRequester() }
+    if (autoFocusAction) {
+        LaunchedEffect(Unit) {
+            withFrameNanos {}
+            runCatching { focusRequester.requestFocus() }
+        }
+    }
     Box(
         contentAlignment = Alignment.Center,
         modifier = modifier,
@@ -55,6 +68,7 @@ fun TvEmptyState(
             Button(
                 onClick = onAction,
                 colors = TvButtonDefaults.filledButtonColors(),
+                modifier = if (autoFocusAction) Modifier.focusRequester(focusRequester) else Modifier,
             ) {
                 Text(actionLabel, style = TvTextStyles.ModalButtonLabel)
             }

tv/src/main/java/au/com/shiftyjelly/pocketcasts/component/TvFolderCard.kt

@@ -0,0 +1,127 @@
+package au.com.shiftyjelly.pocketcasts.component
+
+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxWithConstraints
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.Row
+import androidx.compose.foundation.layout.aspectRatio
+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.runtime.Composable
+import androidx.compose.ui.Alignment
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.draw.clip
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.text.style.TextOverflow
+import androidx.compose.ui.tooling.preview.Devices
+import androidx.compose.ui.tooling.preview.Preview
+import androidx.compose.ui.unit.dp
+import androidx.tv.material3.CardDefaults
+import androidx.tv.material3.MaterialTheme
+import androidx.tv.material3.Text
+import au.com.shiftyjelly.pocketcasts.compose.AppTheme
+import au.com.shiftyjelly.pocketcasts.compose.LocalColors
+import au.com.shiftyjelly.pocketcasts.models.entity.Folder
+import au.com.shiftyjelly.pocketcasts.models.type.PodcastsSortType
+import au.com.shiftyjelly.pocketcasts.theme.TvColors
+import au.com.shiftyjelly.pocketcasts.theme.TvTextStyles
+import au.com.shiftyjelly.pocketcasts.ui.theme.Theme
+import java.util.Date
+
+@Composable
+fun TvFolderCard(
+    folder: Folder,
+    coverUrls: List<String>,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier,
+) {
+    val folderColor = LocalColors.current.colors.getFolderColor(folder.color)
+
+    TvTile(
+        onClick = onClick,
+        colors = CardDefaults.colors(
+            containerColor = folderColor,
+            focusedContainerColor = folderColor,
+        ),
+        modifier = modifier,
+    ) {
+        BoxWithConstraints(
+            modifier = Modifier
+                .fillMaxWidth()
+                .aspectRatio(1f),
+        ) {
+            val cardWidth = maxWidth
+            val coverSize = cardWidth * COVER_SIZE_RATIO
+            val coverSpacing = cardWidth * COVER_SPACING_RATIO
+            val coverCornerRadius = cardWidth * COVER_SPACING_RATIO
+
+            Column(
+                verticalArrangement = Arrangement.spacedBy(coverSpacing),
+                modifier = Modifier
+                    .align(Alignment.TopCenter)
+                    .padding(top = cardWidth * COVERS_TOP_PADDING_RATIO),
+            ) {
+                repeat(2) { row ->
+                    Row(horizontalArrangement = Arrangement.spacedBy(coverSpacing)) {
+                        repeat(2) { column ->
+                            TvArtworkImage(
+                                model = coverUrls.getOrNull(row * 2 + column),
+                                modifier = Modifier
+                                    .size(coverSize)
+                                    .clip(RoundedCornerShape(coverCornerRadius)),
+                            )
+                        }
+                    }
+                }
+            }
+
+            Text(
+                text = folder.name,
+                style = TvTextStyles.FolderCardTitle,
+                color = Color.White,
+                maxLines = 1,
+                softWrap = false,
+                overflow = TextOverflow.Ellipsis,
+                modifier = Modifier
+                    .align(Alignment.BottomCenter)
+                    .padding(horizontal = 16.dp, vertical = cardWidth * TITLE_VERTICAL_PADDING_RATIO)
+                    .fillMaxWidth(),
+            )
+        }
+    }
+}
+
+private const val COVER_SIZE_RATIO = 0.32f
+private const val COVER_SPACING_RATIO = 0.024f
+private const val COVERS_TOP_PADDING_RATIO = 0.096f
+private const val TITLE_VERTICAL_PADDING_RATIO = 0.064f
+
+@Preview(device = Devices.TV_1080p)
+@Composable
+private fun TvFolderCardPreview() {
+    AppTheme(themeType = Theme.ThemeType.EXTRA_DARK) {
+        MaterialTheme {
+            Box(modifier = Modifier.background(TvColors.Dark).padding(32.dp)) {
+                TvFolderCard(
+                    folder = Folder(
+                        uuid = "folder",
+                        name = "Tech & Science",
+                        color = 3,
+                        addedDate = Date(0),
+                        sortPosition = 0,
+                        podcastsSortType = PodcastsSortType.NAME_A_TO_Z,
+                        deleted = false,
+                        syncModified = 0,
+                    ),
+                    coverUrls = listOf("", ""),
+                    onClick = {},
+                    modifier = Modifier.size(160.dp),
+                )
+            }
+        }
+    }
+}

tv/src/main/java/au/com/shiftyjelly/pocketcasts/component/TvPodcastGridScaffold.kt

@@ -0,0 +1,93 @@
+package au.com.shiftyjelly.pocketcasts.component
+
+import androidx.compose.foundation.focusGroup
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
+import androidx.compose.foundation.layout.PaddingValues
+import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.lazy.grid.GridCells
+import androidx.compose.foundation.lazy.grid.LazyVerticalGrid
+import androidx.compose.foundation.lazy.grid.rememberLazyGridState
+import androidx.compose.runtime.Composable
+import androidx.compose.runtime.LaunchedEffect
+import androidx.compose.runtime.getValue
+import androidx.compose.runtime.mutableStateOf
+import androidx.compose.runtime.remember
+import androidx.compose.runtime.saveable.rememberSaveable
+import androidx.compose.runtime.setValue
+import androidx.compose.runtime.snapshotFlow
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.focus.FocusRequester
+import androidx.compose.ui.focus.focusProperties
+import androidx.compose.ui.focus.focusRequester
+import androidx.compose.ui.focus.onFocusChanged
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.unit.dp
+import androidx.tv.material3.Text
+import au.com.shiftyjelly.pocketcasts.theme.TvTextStyles
+import kotlinx.coroutines.flow.first
+
+@Composable
+internal fun TvPodcastGridScaffold(
+    title: String,
+    itemKeys: List<Any>,
+    modifier: Modifier = Modifier,
+    autoFocusFirstItem: Boolean = false,
+    itemContent: @Composable (index: Int, itemModifier: Modifier) -> Unit,
+) {
+    Column(modifier = modifier) {
+        Text(
+            text = title,
+            style = TvTextStyles.ScreenTitle,
+            color = Color.White,
+            modifier = Modifier.padding(start = 32.dp, top = 8.dp, bottom = 10.dp),
+        )
+        val gridState = rememberLazyGridState()
+        var lastFocusedKey by rememberSaveable { mutableStateOf<String?>(null) }
+        val focusRequesters = remember(itemKeys.size) { List(itemKeys.size) { FocusRequester() } }
+
+        if (autoFocusFirstItem) {
+            LaunchedEffect(Unit) {
+                snapshotFlow { gridState.layoutInfo.visibleItemsInfo.isNotEmpty() }.first { it }
+                runCatching { focusRequesters.firstOrNull()?.requestFocus() }
+            }
+        }
+
+        LazyVerticalGrid(
+            state = gridState,
+            columns = GridCells.Fixed(GRID_COLUMNS),
+            horizontalArrangement = Arrangement.spacedBy(16.dp),
+            verticalArrangement = Arrangement.spacedBy(16.dp),
+            contentPadding = PaddingValues(start = 32.dp, top = 16.dp, end = 32.dp, bottom = 32.dp),
+            modifier = Modifier
+                .focusGroup()
+                .focusProperties {
+                    onEnter = {
+                        val visible = gridState.layoutInfo.visibleItemsInfo
+                        val target = itemKeys.indexOfFirst { it.toString() == lastFocusedKey }
+                            .takeIf { index -> index >= 0 && visible.any { it.index == index } }
+                            ?: visible.firstOrNull()?.index
+                        target?.let { runCatching { focusRequesters.getOrNull(it)?.requestFocus() } }
+                    }
+                },
+        ) {
+            items(
+                count = itemKeys.size,
+                key = { index -> itemKeys[index] },
+            ) { index ->
+                itemContent(
+                    index,
+                    Modifier
+                        .focusRequester(focusRequesters[index])
+                        .onFocusChanged { focusState ->
+                            if (focusState.hasFocus) {
+                                lastFocusedKey = itemKeys[index].toString()
+                            }
+                        },
+                )
+            }
+        }
+    }
+}
+
+private const val GRID_COLUMNS = 6