Add grid view for videos and folders

core/model/src/main/java/dev/anilbeesetti/nextplayer/core/model/ApplicationPreferences.kt

@@ -18,5 +18,6 @@ data class ApplicationPreferences(
     val showPathField: Boolean = true,
     val showResolutionField: Boolean = false,
     val showSizeField: Boolean = false,
-    val showThumbnailField: Boolean = true
+    val showThumbnailField: Boolean = true,
+    val showMediaInGrid: Boolean = false
 )

core/ui/src/main/res/values/strings.xml

@@ -17,6 +17,7 @@
     <string name="fast_seek_description">Seek to nearest key frame instead of exact one.</string>
     <string name="grant_permission">Grant Permission</string>
     <string name="group_videos">Group videos by folder</string>
+    <string name="media_in_grid">Show media in grid</string>
     <string name="duration">Duration</string>
     <string name="location">Location</string>
     <string name="menu">Menu</string>

feature/videopicker/src/main/java/dev/anilbeesetti/nextplayer/feature/videopicker/composables/FolderItem.kt

@@ -1,9 +1,12 @@
 package dev.anilbeesetti.nextplayer.feature.videopicker.composables
 
 import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.aspectRatio
+import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.layout.width
@@ -12,7 +15,9 @@ import androidx.compose.material3.ListItem
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Text
 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.vector.ImageVector
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.stringResource
@@ -23,6 +28,7 @@ import androidx.compose.ui.unit.min
 import dev.anilbeesetti.nextplayer.core.model.ApplicationPreferences
 import dev.anilbeesetti.nextplayer.core.model.Folder
 import dev.anilbeesetti.nextplayer.core.ui.R
+import dev.anilbeesetti.nextplayer.core.ui.designsystem.NextIcons
 import dev.anilbeesetti.nextplayer.core.ui.preview.DayNightPreview
 import dev.anilbeesetti.nextplayer.core.ui.theme.NextPlayerTheme
 
@@ -82,10 +88,78 @@ fun FolderItem(
     )
 }
 
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+fun FolderGridItem(
+    folder: Folder,
+    preferences: ApplicationPreferences,
+    modifier: Modifier = Modifier
+) {
+    Column(modifier = modifier) {
+        Box(
+            modifier = Modifier
+                .clip(MaterialTheme.shapes.medium)
+                .aspectRatio(20f / 15f)
+        ) {
+            Icon(
+                imageVector = NextIcons.Folder,
+                contentDescription = null,
+                tint = MaterialTheme.colorScheme.secondaryContainer,
+                modifier = Modifier
+                    .align(Alignment.Center)
+                    .fillMaxSize()
+            )
+        }
+        Text(
+            text = folder.name,
+            maxLines = 1,
+            style = MaterialTheme.typography.titleMedium,
+            overflow = TextOverflow.Ellipsis
+        )
+
+        if (preferences.showPathField) {
+            Text(
+                text = folder.path,
+                maxLines = 1,
+                style = MaterialTheme.typography.bodySmall,
+                overflow = TextOverflow.Ellipsis,
+                modifier = Modifier.padding(vertical = 2.dp)
+            )
+        }
+        FlowRow(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(vertical = 5.dp),
+            horizontalArrangement = Arrangement.spacedBy(5.dp),
+            verticalArrangement = Arrangement.spacedBy(5.dp)
+        ) {
+            InfoChip(
+                text = "${folder.mediaCount} " +
+                    stringResource(
+                        id = R.string.video.takeIf { folder.mediaCount == 1 }
+                            ?: R.string.videos
+                    )
+            )
+
+            if (preferences.showSizeField) {
+                InfoChip(text = folder.formattedMediaSize)
+            }
+        }
+    }
+}
+
 @DayNightPreview
 @Composable
 fun FolderItemPreview() {
     NextPlayerTheme {
         FolderItem(folder = Folder.sample, preferences = ApplicationPreferences())
     }
 }
+
+@DayNightPreview
+@Composable
+fun FolderGridItemPreview() {
+    NextPlayerTheme {
+        FolderGridItem(folder = Folder.sample, preferences = ApplicationPreferences())
+    }
+}

feature/videopicker/src/main/java/dev/anilbeesetti/nextplayer/feature/videopicker/composables/FoldersView.kt

@@ -2,6 +2,11 @@ package dev.anilbeesetti.nextplayer.feature.videopicker.composables
 
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.combinedClickable
+import androidx.compose.foundation.layout.fillMaxSize
+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.items
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material3.ExperimentalMaterial3Api
 import androidx.compose.material3.rememberModalBottomSheetState
@@ -15,6 +20,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.hapticfeedback.HapticFeedbackType
 import androidx.compose.ui.platform.LocalHapticFeedback
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.unit.dp
 import dev.anilbeesetti.nextplayer.core.model.ApplicationPreferences
 import dev.anilbeesetti.nextplayer.core.model.Folder
 import dev.anilbeesetti.nextplayer.core.ui.R
@@ -41,19 +47,44 @@ fun FoldersView(
         is FoldersState.Success -> if (foldersState.data.isEmpty()) {
             NoVideosFound()
         } else {
-            MediaLazyList {
-                items(foldersState.data, key = { it.path }) {
-                    FolderItem(
-                        folder = it,
-                        preferences = preferences,
-                        modifier = Modifier.combinedClickable(
-                            onClick = { onFolderClick(it.path) },
-                            onLongClick = {
-                                haptic.performHapticFeedback(HapticFeedbackType.LongPress)
-                                showFolderActionsFor = it
-                            }
+            if (preferences.showMediaInGrid) {
+                LazyVerticalGrid(
+                    columns = GridCells.Adaptive(minSize = 150.dp),
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .padding(horizontal = 16.dp)
+                ) {
+                    items(foldersState.data, key = { it.path }) {
+                        FolderGridItem(
+                            folder = it,
+                            preferences = preferences,
+                            modifier = Modifier
+                                .padding(8.dp)
+                                .combinedClickable(
+                                    onClick = { onFolderClick(it.path) },
+                                    onLongClick = {
+                                        haptic.performHapticFeedback(HapticFeedbackType.LongPress)
+                                        showFolderActionsFor = it
+                                    }
+                                )
                         )
-                    )
+                    }
+                }
+            } else {
+                MediaLazyList {
+                    items(foldersState.data, key = { it.path }) {
+                        FolderItem(
+                            folder = it,
+                            preferences = preferences,
+                            modifier = Modifier.combinedClickable(
+                                onClick = { onFolderClick(it.path) },
+                                onLongClick = {
+                                    haptic.performHapticFeedback(HapticFeedbackType.LongPress)
+                                    showFolderActionsFor = it
+                                }
+                            )
+                        )
+                    }
                 }
             }
         }

feature/videopicker/src/main/java/dev/anilbeesetti/nextplayer/feature/videopicker/composables/QuickSettingsDialog.kt

@@ -125,6 +125,15 @@ fun QuickSettingsDialog(
                         )
                     }
                 )
+                DialogPreferenceSwitch(
+                    text = stringResource(id = R.string.media_in_grid),
+                    isChecked = preferences.showMediaInGrid,
+                    onClick = {
+                        preferences = preferences.copy(
+                            showMediaInGrid = !preferences.showMediaInGrid
+                        )
+                    }
+                )
             }
         },
         confirmButton = {

feature/videopicker/src/main/java/dev/anilbeesetti/nextplayer/feature/videopicker/composables/VideoItem.kt

@@ -4,6 +4,7 @@ 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.ExperimentalLayoutApi
 import androidx.compose.foundation.layout.FlowRow
 import androidx.compose.foundation.layout.aspectRatio
@@ -118,6 +119,84 @@ fun VideoItem(
     )
 }
 
+@OptIn(ExperimentalLayoutApi::class)
+@Composable
+fun VideoGridItem(
+    video: Video,
+    preferences: ApplicationPreferences,
+    modifier: Modifier = Modifier
+) {
+    Column(modifier = modifier) {
+        Box(
+            modifier = Modifier
+                .clip(MaterialTheme.shapes.small)
+                .background(MaterialTheme.colorScheme.surfaceColorAtElevation(1.dp))
+                .width(min(150.dp, LocalConfiguration.current.screenWidthDp.dp * 0.50f))
+                .aspectRatio(16f / 10f)
+        ) {
+            Icon(
+                imageVector = NextIcons.Video,
+                contentDescription = null,
+                tint = MaterialTheme.colorScheme.surfaceColorAtElevation(100.dp),
+                modifier = Modifier
+                    .align(Alignment.Center)
+                    .fillMaxSize(0.5f)
+            )
+            if (preferences.showThumbnailField) {
+                Image(
+                    painter = rememberAsyncImagePainter(model = video.thumbnailPath, contentScale = ContentScale.None),
+                    contentDescription = null,
+                    alignment = Alignment.Center,
+                    contentScale = ContentScale.Crop,
+                    modifier = Modifier.fillMaxSize()
+                )
+            }
+            if (preferences.showDurationField) {
+                InfoChip(
+                    text = video.formattedDuration,
+                    modifier = Modifier
+                        .padding(5.dp)
+                        .align(Alignment.BottomEnd),
+                    backgroundColor = Color.Black.copy(alpha = 0.6f),
+                    contentColor = Color.White,
+                    shape = MaterialTheme.shapes.extraSmall
+                )
+            }
+        }
+
+        Text(
+            text = if (preferences.showExtensionField) video.nameWithExtension else video.displayName,
+            maxLines = 1,
+            style = MaterialTheme.typography.titleMedium,
+            overflow = TextOverflow.Ellipsis
+        )
+
+        if (preferences.showPathField) {
+            Text(
+                text = video.path,
+                maxLines = 1,
+                style = MaterialTheme.typography.bodySmall,
+                overflow = TextOverflow.Ellipsis,
+                modifier = Modifier.padding(vertical = 2.dp)
+            )
+        }
+        FlowRow(
+            modifier = Modifier
+                .fillMaxWidth()
+                .padding(vertical = 5.dp),
+            horizontalArrangement = Arrangement.spacedBy(5.dp),
+            verticalArrangement = Arrangement.spacedBy(5.dp)
+        ) {
+            if (preferences.showSizeField) {
+                InfoChip(text = video.formattedFileSize)
+            }
+            if (preferences.showResolutionField && video.height > 0) {
+                InfoChip(text = "${video.height}p")
+            }
+        }
+    }
+}
+
 @DayNightPreview
 @DevicePreviews
 @Composable
@@ -128,3 +207,14 @@ fun VideoItemPreview() {
         }
     }
 }
+
+@DayNightPreview
+@DevicePreviews
+@Composable
+fun GridItemPreview() {
+    NextPlayerTheme {
+        Surface {
+            VideoGridItem(video = Video.sample, preferences = ApplicationPreferences())
+        }
+    }
+}