refactor: introduces surface as a screen top level

Author: kelsos

app/src/main/java/com/kelsos/mbrc/features/lyrics/LyricsScreen.kt

@@ -8,6 +8,7 @@ import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.foundation.lazy.items
 import androidx.compose.material.MaterialTheme
+import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.ViewHeadline
@@ -16,6 +17,7 @@ import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import com.kelsos.mbrc.R
@@ -58,7 +60,7 @@ private fun LyricsScreen(
   openDrawer: () -> Unit,
   lyrics: List<String>,
   content: @Composable () -> Unit
-) {
+) = Surface {
   Column(modifier = Modifier.fillMaxSize()) {
     RemoteTopAppBar(openDrawer = openDrawer) {}
 
@@ -93,7 +95,7 @@ private fun LyricsContent(
   }
 }
 
-@Preview
+@Preview(device = Devices.PIXEL_4)
 @Composable
 fun LyricsScreenPreview() {
   RemoteTheme {

app/src/main/java/com/kelsos/mbrc/features/player/PlayerScreen.kt

@@ -17,6 +17,7 @@ import androidx.compose.material.Icon
 import androidx.compose.material.IconButton
 import androidx.compose.material.MaterialTheme
 import androidx.compose.material.Slider
+import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.material.icons.Icons
 import androidx.compose.material.icons.filled.Favorite
@@ -43,6 +44,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalConfiguration
 import androidx.compose.ui.res.stringResource
 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.compose.ui.unit.dp
@@ -103,23 +105,25 @@ fun PlayerScreenLandscape(
   perform: (action: PlayerAction) -> Unit,
   share: (track: PlayingTrack) -> Unit,
   openDrawer: () -> Unit
-) = Column(modifier = Modifier.fillMaxSize()) {
-  PlayerScreenAppBar(openDrawer, perform, trackRating, playerStatus, share, playingTrack)
-  Row(modifier = Modifier.fillMaxWidth()) {
-    Column(modifier = Modifier.fillMaxWidth(0.6f)) {
-      Spacer(modifier = Modifier.weight(2f))
-      TrackInfo(playingTrack)
-      Spacer(modifier = Modifier.weight(1f))
-      ProgressControl(playingPosition, perform)
-      Spacer(modifier = Modifier.weight(1f))
-      PlayerActions(playerStatus, perform)
+) = Surface() {
+  Column(modifier = Modifier.fillMaxSize()) {
+    PlayerScreenAppBar(openDrawer, perform, trackRating, playerStatus, share, playingTrack)
+    Row(modifier = Modifier.fillMaxWidth()) {
+      Column(modifier = Modifier.fillMaxWidth(0.6f)) {
+        Spacer(modifier = Modifier.weight(2f))
+        TrackInfo(playingTrack)
+        Spacer(modifier = Modifier.weight(1f))
+        ProgressControl(playingPosition, perform)
+        Spacer(modifier = Modifier.weight(1f))
+        PlayerActions(playerStatus, perform)
+      }
+      TrackCover(
+        modifier = Modifier
+          .padding(16.dp)
+          .fillMaxSize(),
+        coverUrl = playingTrack.coverUrl,
+      )
     }
-    TrackCover(
-      modifier = Modifier
-        .padding(16.dp)
-        .fillMaxSize(),
-      coverUrl = playingTrack.coverUrl,
-    )
   }
 }
 
@@ -132,19 +136,21 @@ fun PlayerScreenPortrait(
   perform: (action: PlayerAction) -> Unit,
   share: (track: PlayingTrack) -> Unit,
   openDrawer: () -> Unit
-) = Column(modifier = Modifier.fillMaxSize()) {
-  PlayerScreenAppBar(openDrawer, perform, trackRating, playerStatus, share, playingTrack)
-  TrackCover(
-    modifier = Modifier
-      .padding(16.dp)
-      .fillMaxSize(),
-    coverUrl = playingTrack.coverUrl,
-  )
-  ProgressControl(playingPosition, perform)
-  Spacer(modifier = Modifier.weight(2f))
-  TrackInfo(playingTrack)
-  Spacer(modifier = Modifier.weight(1f))
-  PlayerActions(playerStatus, perform)
+) = Surface {
+  Column(modifier = Modifier.fillMaxSize()) {
+    PlayerScreenAppBar(openDrawer, perform, trackRating, playerStatus, share, playingTrack)
+    TrackCover(
+      modifier = Modifier
+        .padding(16.dp)
+        .fillMaxSize(),
+      coverUrl = playingTrack.coverUrl,
+    )
+    ProgressControl(playingPosition, perform)
+    Spacer(modifier = Modifier.weight(2f))
+    TrackInfo(playingTrack)
+    Spacer(modifier = Modifier.weight(1f))
+    PlayerActions(playerStatus, perform)
+  }
 }
 
 @Composable
@@ -385,7 +391,9 @@ private fun TrackInfo(
       overflow = TextOverflow.Ellipsis
     )
   }
-  Column(modifier = Modifier.wrapContentWidth().padding(start = 8.dp)) {
+  Column(modifier = Modifier
+    .wrapContentWidth()
+    .padding(start = 8.dp)) {
     VolumeControl()
   }
 }
@@ -407,9 +415,9 @@ private fun VolumeControl() {
   )
 }
 
-@Preview(showBackground = true)
+@Preview(device = Devices.PIXEL_4)
 @Composable
-fun PlayerScreenPreview() {
+fun PlayerScreenPortaitPreview() {
   RemoteTheme {
     PlayerScreenPortrait(
       playingTrack = PlayingTrack(
@@ -434,3 +442,31 @@ fun PlayerScreenPreview() {
     )
   }
 }
+
+@Preview(device = Devices.PIXEL_4)
+@Composable
+fun PlayerScreenLandscapePreview() {
+  RemoteTheme {
+    PlayerScreenLandscape(
+      playingTrack = PlayingTrack(
+        artist = "Caravan Palace",
+        album = "Panic",
+        title = "Rock It for Me",
+        year = "2008"
+      ),
+      playingPosition = PlayingPosition(63000, 174000),
+      playerStatus = PlayerStatusModel(
+        mute = true,
+        state = PlayerState.Paused,
+        repeat = Repeat.One,
+        scrobbling = false,
+        shuffle = ShuffleMode.AutoDJ,
+        volume = 10
+      ),
+      trackRating = TrackRating(lfmRating = LfmRating.Loved, rating = 4.5f),
+      perform = {},
+      share = {},
+      openDrawer = {}
+    )
+  }
+}

app/src/main/java/com/kelsos/mbrc/features/playlists/PlaylistScreen.kt

@@ -4,6 +4,7 @@ import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.material.SnackbarHostState
+import androidx.compose.material.Surface
 import androidx.compose.material.Text
 import androidx.compose.material.TextButton
 import androidx.compose.material.icons.Icons
@@ -14,6 +15,7 @@ import androidx.compose.runtime.collectAsState
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.res.stringResource
+import androidx.compose.ui.tooling.preview.Devices
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.paging.LoadState
 import androidx.paging.compose.LazyPagingItems
@@ -77,7 +79,7 @@ fun PlaylistScreen(
   onRefresh: () -> Unit,
   play: (path: String) -> Unit,
   content: @Composable () -> Unit,
-) {
+) = Surface {
   Column(modifier = Modifier.fillMaxSize()) {
     RemoteTopAppBar(openDrawer = openDrawer) {}
 
@@ -130,7 +132,7 @@ fun PlaylistRow(playlist: Playlist?, clicked: (path: String) -> Unit) =
     }
   }
 
-@Preview
+@Preview(device = Devices.PIXEL_4)
 @Composable
 fun PlaylistScreenPreview() {
   RemoteTheme {