refactor(tv): move background gradient to theme

2023-12-31 20:54:13 +01:00 · 2023-12-31 20:54:13 +01:00 · 2b6649e0ce
commit 2b6649e0ce
parent 96288db877
22 changed files with 331 additions and 466 deletions
--- a/app/tv/src/main/java/dev/jdtech/jellyfin/MainActivity.kt
+++ b/app/tv/src/main/java/dev/jdtech/jellyfin/MainActivity.kt
@ -4,13 +4,6 @@ import android.os.Bundle
 import androidx.activity.ComponentActivity
 import androidx.activity.compose.setContent
 import androidx.activity.viewModels
-import androidx.compose.foundation.layout.fillMaxSize
-import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.RectangleShape
-import androidx.tv.material3.ExperimentalTvMaterial3Api
-import androidx.tv.material3.MaterialTheme
-import androidx.tv.material3.NonInteractiveSurfaceDefaults
-import androidx.tv.material3.Surface
 import com.ramcosta.composedestinations.DestinationsNavHost
 import dagger.hilt.android.AndroidEntryPoint
 import dev.jdtech.jellyfin.database.ServerDatabaseDao
@ -32,7 +25,6 @@ class MainActivity : ComponentActivity() {
    @Inject
    lateinit var appPreferences: AppPreferences

-    @OptIn(ExperimentalTvMaterial3Api::class)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)

@ -48,18 +40,10 @@ class MainActivity : ComponentActivity() {

        setContent {
            FindroidTheme {
-                Surface(
-                    colors = NonInteractiveSurfaceDefaults.colors(
-                        containerColor = MaterialTheme.colorScheme.background,
-                    ),
-                    shape = RectangleShape,
-                    modifier = Modifier.fillMaxSize(),
-                ) {
-                    DestinationsNavHost(
-                        navGraph = NavGraphs.root,
-                        startRoute = startRoute,
-                    )
-                }
+                DestinationsNavHost(
+                    navGraph = NavGraphs.root,
+                    startRoute = startRoute,
+                )
            }
        }
    }
--- a/app/tv/src/main/java/dev/jdtech/jellyfin/ui/AddServerScreen.kt
+++ b/app/tv/src/main/java/dev/jdtech/jellyfin/ui/AddServerScreen.kt
@ -1,6 +1,5 @@
 package dev.jdtech.jellyfin.ui

-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@ -24,8 +23,6 @@ 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.Brush
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.platform.LocalContext
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@ -39,7 +36,6 @@ import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.Icon
 import androidx.tv.material3.LocalContentColor
 import androidx.tv.material3.MaterialTheme
-import androidx.tv.material3.Surface
 import androidx.tv.material3.Text
 import com.ramcosta.composedestinations.annotation.Destination
 import com.ramcosta.composedestinations.navigation.DestinationsNavigator
@ -92,8 +88,7 @@ private fun AddServerScreenLayout(

    Box(
        modifier = Modifier
-            .fillMaxSize()
-            .background(Brush.linearGradient(listOf(Color.Black, Color(0xFF001721)))),
+            .fillMaxSize(),
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
@ -179,16 +174,13 @@ private fun AddServerScreenLayout(
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
-@Preview(widthDp = 960, heightDp = 540)
+@Preview(device = "id:tv_1080p")
@Composable
 private fun AddServerScreenLayoutPreview() {
    FindroidTheme {
-        Surface {
-            AddServerScreenLayout(
-                uiState = AddServerViewModel.UiState.Normal,
-                onConnectClick = {},
-            )
-        }
+        AddServerScreenLayout(
+            uiState = AddServerViewModel.UiState.Normal,
+            onConnectClick = {},
+        )
    }
 }
--- a/app/tv/src/main/java/dev/jdtech/jellyfin/ui/HomeScreen.kt
+++ b/app/tv/src/main/java/dev/jdtech/jellyfin/ui/HomeScreen.kt
@ -30,7 +30,6 @@ import androidx.tv.foundation.lazy.list.TvLazyRow
 import androidx.tv.foundation.lazy.list.items
 import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.MaterialTheme
-import androidx.tv.material3.Surface
 import androidx.tv.material3.Text
 import com.ramcosta.composedestinations.annotation.Destination
 import com.ramcosta.composedestinations.navigation.DestinationsNavigator
@ -179,18 +178,15 @@ private fun HomeScreenLayout(
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
-@Preview(widthDp = 960, heightDp = 540)
+@Preview(device = "id:tv_1080p")
@Composable
 private fun HomeScreenLayoutPreview() {
    FindroidTheme {
-        Surface {
-            HomeScreenLayout(
-                uiState = HomeViewModel.UiState.Normal(dummyHomeItems),
-                isLoading = {},
-                onClick = {},
-            )
-        }
+        HomeScreenLayout(
+            uiState = HomeViewModel.UiState.Normal(dummyHomeItems),
+            isLoading = {},
+            onClick = {},
+        )
    }
 }

--- a/app/tv/src/main/java/dev/jdtech/jellyfin/ui/LibrariesScreen.kt
+++ b/app/tv/src/main/java/dev/jdtech/jellyfin/ui/LibrariesScreen.kt
@ -19,7 +19,6 @@ import androidx.tv.foundation.lazy.grid.TvLazyVerticalGrid
 import androidx.tv.foundation.lazy.grid.items
 import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.MaterialTheme
-import androidx.tv.material3.Surface
 import com.ramcosta.composedestinations.annotation.Destination
 import com.ramcosta.composedestinations.navigation.DestinationsNavigator
 import dev.jdtech.jellyfin.destinations.LibraryScreenDestination
@ -102,17 +101,14 @@ private fun LibrariesScreenLayout(
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
-@Preview(widthDp = 960, heightDp = 540)
+@Preview(device = "id:tv_1080p")
@Composable
 private fun LibrariesScreenLayoutPreview() {
    FindroidTheme {
-        Surface {
-            LibrariesScreenLayout(
-                uiState = MediaViewModel.UiState.Normal(dummyCollections),
-                isLoading = {},
-                onClick = { _, _, _ -> },
-            )
-        }
+        LibrariesScreenLayout(
+            uiState = MediaViewModel.UiState.Normal(dummyCollections),
+            isLoading = {},
+            onClick = { _, _, _ -> },
+        )
    }
 }
--- a/app/tv/src/main/java/dev/jdtech/jellyfin/ui/LibraryScreen.kt
+++ b/app/tv/src/main/java/dev/jdtech/jellyfin/ui/LibraryScreen.kt
@ -1,6 +1,5 @@
 package dev.jdtech.jellyfin.ui

-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
@ -12,8 +11,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
-import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.paging.PagingData
@ -23,7 +20,6 @@ import androidx.tv.foundation.lazy.grid.TvGridItemSpan
 import androidx.tv.foundation.lazy.grid.TvLazyVerticalGrid
 import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.MaterialTheme
-import androidx.tv.material3.Surface
 import androidx.tv.material3.Text
 import com.ramcosta.composedestinations.annotation.Destination
 import com.ramcosta.composedestinations.navigation.DestinationsNavigator
@ -94,7 +90,6 @@ private fun LibraryScreenLayout(
                contentPadding = PaddingValues(horizontal = MaterialTheme.spacings.default * 2, vertical = MaterialTheme.spacings.large),
                modifier = Modifier
                    .fillMaxSize()
-                    .background(Brush.linearGradient(listOf(Color.Black, Color(0xFF001721))))
                    .focusRequester(focusRequester),
            ) {
                item(span = { TvGridItemSpan(this.maxLineSpan) }) {
@ -126,18 +121,15 @@ private fun LibraryScreenLayout(
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
-@Preview(widthDp = 960, heightDp = 540)
+@Preview(device = "id:tv_1080p")
@Composable
 private fun LibraryScreenLayoutPreview() {
    val data: Flow<PagingData<FindroidItem>> = flowOf(PagingData.from(dummyMovies))
    FindroidTheme {
-        Surface {
-            LibraryScreenLayout(
-                libraryName = "Movies",
-                uiState = LibraryViewModel.UiState.Normal(data),
-                onClick = {},
-            )
-        }
+        LibraryScreenLayout(
+            libraryName = "Movies",
+            uiState = LibraryViewModel.UiState.Normal(data),
+            onClick = {},
+        )
    }
 }
--- a/app/tv/src/main/java/dev/jdtech/jellyfin/ui/LoginScreen.kt
+++ b/app/tv/src/main/java/dev/jdtech/jellyfin/ui/LoginScreen.kt
@ -1,6 +1,5 @@
 package dev.jdtech.jellyfin.ui

-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.Spacer
@ -24,8 +23,6 @@ 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.Brush
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.text.input.ImeAction
@ -40,7 +37,6 @@ import androidx.tv.material3.Icon
 import androidx.tv.material3.LocalContentColor
 import androidx.tv.material3.MaterialTheme
 import androidx.tv.material3.OutlinedButton
-import androidx.tv.material3.Surface
 import androidx.tv.material3.Text
 import com.ramcosta.composedestinations.annotation.Destination
 import com.ramcosta.composedestinations.navigation.DestinationsNavigator
@ -124,8 +120,7 @@ private fun LoginScreenLayout(

    Box(
        modifier = Modifier
-            .fillMaxSize()
-            .background(Brush.linearGradient(listOf(Color.Black, Color(0xFF001721)))),
+            .fillMaxSize(),
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
@ -254,34 +249,28 @@ private fun LoginScreenLayout(
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
-@Preview(widthDp = 960, heightDp = 540)
+@Preview(device = "id:tv_1080p")
@Composable
 private fun LoginScreenLayoutPreview() {
    FindroidTheme {
-        Surface {
-            LoginScreenLayout(
-                uiState = LoginViewModel.UiState.Normal,
-                quickConnectUiState = LoginViewModel.QuickConnectUiState.Normal,
-                onLoginClick = { _, _ -> },
-                onQuickConnectClick = {},
-            )
-        }
+        LoginScreenLayout(
+            uiState = LoginViewModel.UiState.Normal,
+            quickConnectUiState = LoginViewModel.QuickConnectUiState.Normal,
+            onLoginClick = { _, _ -> },
+            onQuickConnectClick = {},
+        )
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
-@Preview(widthDp = 960, heightDp = 540)
+@Preview(device = "id:tv_1080p")
@Composable
 private fun LoginScreenLayoutPreviewError() {
    FindroidTheme {
-        Surface {
-            LoginScreenLayout(
-                uiState = LoginViewModel.UiState.Error(UiText.DynamicString("Invalid username or password")),
-                quickConnectUiState = LoginViewModel.QuickConnectUiState.Normal,
-                onLoginClick = { _, _ -> },
-                onQuickConnectClick = {},
-            )
-        }
+        LoginScreenLayout(
+            uiState = LoginViewModel.UiState.Error(UiText.DynamicString("Invalid username or password")),
+            quickConnectUiState = LoginViewModel.QuickConnectUiState.Normal,
+            onLoginClick = { _, _ -> },
+            onQuickConnectClick = {},
+        )
    }
 }
--- a/app/tv/src/main/java/dev/jdtech/jellyfin/ui/MainScreen.kt
+++ b/app/tv/src/main/java/dev/jdtech/jellyfin/ui/MainScreen.kt
@ -2,7 +2,6 @@ package dev.jdtech.jellyfin.ui

 import androidx.annotation.DrawableRes
 import androidx.annotation.StringRes
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@ -24,7 +23,6 @@ import androidx.compose.runtime.saveable.rememberSaveable
 import androidx.compose.runtime.setValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
-import androidx.compose.ui.graphics.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.stringResource
@ -34,7 +32,6 @@ import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.Icon
 import androidx.tv.material3.MaterialTheme
-import androidx.tv.material3.Surface
 import androidx.tv.material3.Tab
 import androidx.tv.material3.TabDefaults
 import androidx.tv.material3.TabRow
@ -102,8 +99,7 @@ private fun MainScreenLayout(

    Column(
        modifier = Modifier
-            .fillMaxSize()
-            .background(Brush.linearGradient(listOf(Color.Black, Color(0xFF001721)))),
+            .fillMaxSize(),
    ) {
        Box(
            modifier = Modifier
@ -195,16 +191,13 @@ private fun MainScreenLayout(
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
-@Preview(widthDp = 960, heightDp = 540)
+@Preview(device = "id:tv_1080p")
@Composable
 private fun MainScreenLayoutPreview() {
    FindroidTheme {
-        Surface {
-            MainScreenLayout(
-                uiState = MainViewModel.UiState.Normal(server = dummyServer, user = dummyUser),
-                navigator = EmptyDestinationsNavigator,
-            )
-        }
+        MainScreenLayout(
+            uiState = MainViewModel.UiState.Normal(server = dummyServer, user = dummyUser),
+            navigator = EmptyDestinationsNavigator,
+        )
    }
 }
--- a/app/tv/src/main/java/dev/jdtech/jellyfin/ui/MovieScreen.kt
+++ b/app/tv/src/main/java/dev/jdtech/jellyfin/ui/MovieScreen.kt
@ -43,7 +43,6 @@ import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.Icon
 import androidx.tv.material3.LocalContentColor
 import androidx.tv.material3.MaterialTheme
-import androidx.tv.material3.Surface
 import androidx.tv.material3.Text
 import coil.compose.AsyncImage
 import com.ramcosta.composedestinations.annotation.Destination
@ -335,41 +334,38 @@ private fun MovieScreenLayout(
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
-@Preview(widthDp = 960, heightDp = 540)
+@Preview(device = "id:tv_1080p")
@Composable
 private fun MovieScreenLayoutPreview() {
    FindroidTheme {
-        Surface {
-            MovieScreenLayout(
-                uiState = MovieViewModel.UiState.Normal(
-                    item = dummyMovie,
-                    actors = emptyList(),
-                    director = BaseItemPerson(
-                        id = UUID.randomUUID(),
-                        name = "Robert Rodriguez",
-                    ),
-                    writers = emptyList(),
-                    videoMetadata = VideoMetadata(
-                        resolution = listOf(Resolution.UHD),
-                        displayProfiles = listOf(DisplayProfile.HDR10),
-                        audioChannels = listOf(AudioChannel.CH_5_1),
-                        audioCodecs = listOf(AudioCodec.EAC3),
-                        isAtmos = listOf(false),
-                    ),
-                    writersString = "James Cameron, Laeta Kalogridis, Yukito Kishiro",
-                    genresString = "Action, Science Fiction, Adventure",
-                    videoString = "",
-                    audioString = "",
-                    subtitleString = "",
-                    runTime = "121 min",
-                    dateString = "2019",
+        MovieScreenLayout(
+            uiState = MovieViewModel.UiState.Normal(
+                item = dummyMovie,
+                actors = emptyList(),
+                director = BaseItemPerson(
+                    id = UUID.randomUUID(),
+                    name = "Robert Rodriguez",
                ),
-                onPlayClick = {},
-                onTrailerClick = {},
-                onPlayedClick = {},
-                onFavoriteClick = {},
-            )
-        }
+                writers = emptyList(),
+                videoMetadata = VideoMetadata(
+                    resolution = listOf(Resolution.UHD),
+                    displayProfiles = listOf(DisplayProfile.HDR10),
+                    audioChannels = listOf(AudioChannel.CH_5_1),
+                    audioCodecs = listOf(AudioCodec.EAC3),
+                    isAtmos = listOf(false),
+                ),
+                writersString = "James Cameron, Laeta Kalogridis, Yukito Kishiro",
+                genresString = "Action, Science Fiction, Adventure",
+                videoString = "",
+                audioString = "",
+                subtitleString = "",
+                runTime = "121 min",
+                dateString = "2019",
+            ),
+            onPlayClick = {},
+            onTrailerClick = {},
+            onPlayedClick = {},
+            onFavoriteClick = {},
+        )
    }
 }
--- a/app/tv/src/main/java/dev/jdtech/jellyfin/ui/SeasonScreen.kt
+++ b/app/tv/src/main/java/dev/jdtech/jellyfin/ui/SeasonScreen.kt
@ -1,8 +1,6 @@
 package dev.jdtech.jellyfin.ui

-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.PaddingValues
 import androidx.compose.foundation.layout.Row
@ -16,15 +14,12 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
-import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.tv.foundation.lazy.list.TvLazyColumn
 import androidx.tv.foundation.lazy.list.items
 import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.MaterialTheme
-import androidx.tv.material3.Surface
 import androidx.tv.material3.Text
 import com.ramcosta.composedestinations.annotation.Destination
 import com.ramcosta.composedestinations.navigation.DestinationsNavigator
@ -95,57 +90,51 @@ private fun SeasonScreenLayout(
        is SeasonViewModel.UiState.Loading -> Text(text = "LOADING")
        is SeasonViewModel.UiState.Normal -> {
            val episodes = uiState.episodes
-            Box(
-                modifier = Modifier
-                    .fillMaxSize()
-                    .background(Brush.linearGradient(listOf(Color.Black, Color(0xFF001721)))),
+            Row(
+                modifier = Modifier.fillMaxSize(),
            ) {
-                Row(
-                    modifier = Modifier.fillMaxSize(),
-                ) {
-                    Column(
-                        modifier = Modifier
-                            .weight(1f)
-                            .padding(
-                                start = MaterialTheme.spacings.extraLarge,
-                                top = MaterialTheme.spacings.large,
-                                end = MaterialTheme.spacings.large,
-                            ),
-                    ) {
-                        Text(
-                            text = seasonName,
-                            style = MaterialTheme.typography.displayMedium,
-                        )
-                        Text(
-                            text = seriesName,
-                            style = MaterialTheme.typography.headlineMedium,
-                        )
-                    }
-                    TvLazyColumn(
-                        contentPadding = PaddingValues(
+                Column(
+                    modifier = Modifier
+                        .weight(1f)
+                        .padding(
+                            start = MaterialTheme.spacings.extraLarge,
                            top = MaterialTheme.spacings.large,
-                            bottom = MaterialTheme.spacings.large,
+                            end = MaterialTheme.spacings.large,
                        ),
-                        verticalArrangement = Arrangement.spacedBy(MaterialTheme.spacings.medium),
-                        modifier = Modifier
-                            .weight(2f)
-                            .padding(end = MaterialTheme.spacings.extraLarge)
-                            .focusRequester(focusRequester),
-                    ) {
-                        items(episodes) { episodeItem ->
-                            when (episodeItem) {
-                                is EpisodeItem.Episode -> {
-                                    EpisodeCard(episode = episodeItem.episode, onClick = { onClick(episodeItem.episode) })
-                                }
-
-                                else -> Unit
+                ) {
+                    Text(
+                        text = seasonName,
+                        style = MaterialTheme.typography.displayMedium,
+                    )
+                    Text(
+                        text = seriesName,
+                        style = MaterialTheme.typography.headlineMedium,
+                    )
+                }
+                TvLazyColumn(
+                    contentPadding = PaddingValues(
+                        top = MaterialTheme.spacings.large,
+                        bottom = MaterialTheme.spacings.large,
+                    ),
+                    verticalArrangement = Arrangement.spacedBy(MaterialTheme.spacings.medium),
+                    modifier = Modifier
+                        .weight(2f)
+                        .padding(end = MaterialTheme.spacings.extraLarge)
+                        .focusRequester(focusRequester),
+                ) {
+                    items(episodes) { episodeItem ->
+                        when (episodeItem) {
+                            is EpisodeItem.Episode -> {
+                                EpisodeCard(episode = episodeItem.episode, onClick = { onClick(episodeItem.episode) })
                            }
+
+                            else -> Unit
                        }
                    }
+                }

-                    LaunchedEffect(true) {
-                        focusRequester.requestFocus()
-                    }
+                LaunchedEffect(true) {
+                    focusRequester.requestFocus()
                }
            }
        }
@ -153,18 +142,15 @@ private fun SeasonScreenLayout(
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
-@Preview(widthDp = 960, heightDp = 540)
+@Preview(device = "id:tv_1080p")
@Composable
 private fun SeasonScreenLayoutPreview() {
    FindroidTheme {
-        Surface {
-            SeasonScreenLayout(
-                seriesName = "86 EIGHTY-SIX",
-                seasonName = "Season 1",
-                uiState = SeasonViewModel.UiState.Normal(dummyEpisodeItems),
-                onClick = {},
-            )
-        }
+        SeasonScreenLayout(
+            seriesName = "86 EIGHTY-SIX",
+            seasonName = "Season 1",
+            uiState = SeasonViewModel.UiState.Normal(dummyEpisodeItems),
+            onClick = {},
+        )
    }
 }
--- a/app/tv/src/main/java/dev/jdtech/jellyfin/ui/ServerSelectScreen.kt
+++ b/app/tv/src/main/java/dev/jdtech/jellyfin/ui/ServerSelectScreen.kt
@ -1,7 +1,6 @@
 package dev.jdtech.jellyfin.ui

 import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@ -24,7 +23,6 @@ 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.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.res.pluralStringResource
@ -136,8 +134,7 @@ private fun ServerSelectScreenLayout(

    Box(
        modifier = Modifier
-            .fillMaxSize()
-            .background(Brush.linearGradient(listOf(Color.Black, Color(0xFF001721)))),
+            .fillMaxSize(),
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
@ -204,57 +201,48 @@ private fun ServerSelectScreenLayout(
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
-@Preview(widthDp = 960, heightDp = 540)
+@Preview(device = "id:tv_1080p")
@Composable
 private fun ServerSelectScreenLayoutPreview() {
    FindroidTheme {
-        Surface {
-            ServerSelectScreenLayout(
-                uiState = ServerSelectViewModel.UiState.Normal(dummyServers),
-                discoveredServersState = ServerSelectViewModel.DiscoveredServersState.Servers(
-                    dummyDiscoveredServers,
-                ),
-                onServerClick = {},
-                onAddServerClick = {},
-            )
-        }
+        ServerSelectScreenLayout(
+            uiState = ServerSelectViewModel.UiState.Normal(dummyServers),
+            discoveredServersState = ServerSelectViewModel.DiscoveredServersState.Servers(
+                dummyDiscoveredServers,
+            ),
+            onServerClick = {},
+            onAddServerClick = {},
+        )
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
-@Preview(widthDp = 960, heightDp = 540)
+@Preview(device = "id:tv_1080p")
@Composable
 private fun ServerSelectScreenLayoutPreviewNoDiscovered() {
    FindroidTheme {
-        Surface {
-            ServerSelectScreenLayout(
-                uiState = ServerSelectViewModel.UiState.Normal(dummyServers),
-                discoveredServersState = ServerSelectViewModel.DiscoveredServersState.Servers(
-                    emptyList(),
-                ),
-                onServerClick = {},
-                onAddServerClick = {},
-            )
-        }
+        ServerSelectScreenLayout(
+            uiState = ServerSelectViewModel.UiState.Normal(dummyServers),
+            discoveredServersState = ServerSelectViewModel.DiscoveredServersState.Servers(
+                emptyList(),
+            ),
+            onServerClick = {},
+            onAddServerClick = {},
+        )
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
-@Preview(widthDp = 960, heightDp = 540)
+@Preview(device = "id:tv_1080p")
@Composable
 private fun ServerSelectScreenLayoutPreviewNoServers() {
    FindroidTheme {
-        Surface {
-            ServerSelectScreenLayout(
-                uiState = ServerSelectViewModel.UiState.Normal(emptyList()),
-                discoveredServersState = ServerSelectViewModel.DiscoveredServersState.Servers(
-                    emptyList(),
-                ),
-                onServerClick = {},
-                onAddServerClick = {},
-            )
-        }
+        ServerSelectScreenLayout(
+            uiState = ServerSelectViewModel.UiState.Normal(emptyList()),
+            discoveredServersState = ServerSelectViewModel.DiscoveredServersState.Servers(
+                emptyList(),
+            ),
+            onServerClick = {},
+            onAddServerClick = {},
+        )
    }
 }

@ -324,27 +312,21 @@ private fun ServerComponent(
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
@Preview
@Composable
 private fun ServerComponentPreview() {
    FindroidTheme {
-        Surface {
-            ServerComponent(dummyDiscoveredServer)
-        }
+        ServerComponent(dummyDiscoveredServer)
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
@Preview
@Composable
 private fun ServerComponentPreviewDiscovered() {
    FindroidTheme {
-        Surface {
-            ServerComponent(
-                server = dummyDiscoveredServer,
-                discovered = true,
-            )
-        }
+        ServerComponent(
+            server = dummyDiscoveredServer,
+            discovered = true,
+        )
    }
 }
--- a/app/tv/src/main/java/dev/jdtech/jellyfin/ui/SettingsScreen.kt
+++ b/app/tv/src/main/java/dev/jdtech/jellyfin/ui/SettingsScreen.kt
@ -1,6 +1,5 @@
 package dev.jdtech.jellyfin.ui

-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
@ -12,8 +11,6 @@ import androidx.compose.runtime.remember
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
-import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringArrayResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@ -24,7 +21,6 @@ import androidx.tv.foundation.lazy.grid.TvLazyVerticalGrid
 import androidx.tv.foundation.lazy.grid.items
 import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.MaterialTheme
-import androidx.tv.material3.Surface
 import androidx.tv.material3.Text
 import com.ramcosta.composedestinations.annotation.Destination
 import com.ramcosta.composedestinations.navigation.DestinationsNavigator
@ -101,7 +97,6 @@ private fun SettingsScreenLayout(
                contentPadding = PaddingValues(horizontal = MaterialTheme.spacings.default * 2, vertical = MaterialTheme.spacings.large),
                modifier = Modifier
                    .fillMaxSize()
-                    .background(Brush.linearGradient(listOf(Color.Black, Color(0xFF001721))))
                    .focusRequester(focusRequester),
            ) {
                item(span = { TvGridItemSpan(this.maxLineSpan) }) {
@ -143,27 +138,24 @@ private fun SettingsScreenLayout(
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
-@Preview(widthDp = 960, heightDp = 540)
+@Preview(device = "id:tv_1080p")
@Composable
 private fun SettingsScreenLayoutPreview() {
    FindroidTheme {
-        Surface {
-            SettingsScreenLayout(
-                uiState = SettingsViewModel.UiState.Normal(
-                    listOf(
-                        PreferenceCategory(
-                            nameStringResource = CoreR.string.settings_category_language,
-                            iconDrawableId = CoreR.drawable.ic_languages,
-                        ),
-                        PreferenceCategory(
-                            nameStringResource = CoreR.string.settings_category_appearance,
-                            iconDrawableId = CoreR.drawable.ic_palette,
-                        ),
+        SettingsScreenLayout(
+            uiState = SettingsViewModel.UiState.Normal(
+                listOf(
+                    PreferenceCategory(
+                        nameStringResource = CoreR.string.settings_category_language,
+                        iconDrawableId = CoreR.drawable.ic_languages,
+                    ),
+                    PreferenceCategory(
+                        nameStringResource = CoreR.string.settings_category_appearance,
+                        iconDrawableId = CoreR.drawable.ic_palette,
                    ),
                ),
-                onUpdate = {},
-            )
-        }
+            ),
+            onUpdate = {},
+        )
    }
 }
--- a/app/tv/src/main/java/dev/jdtech/jellyfin/ui/SettingsSubScreen.kt
+++ b/app/tv/src/main/java/dev/jdtech/jellyfin/ui/SettingsSubScreen.kt
@ -1,7 +1,6 @@
 package dev.jdtech.jellyfin.ui

 import androidx.annotation.StringRes
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@ -20,8 +19,6 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.focus.focusRequester
 import androidx.compose.ui.focus.onFocusChanged
-import androidx.compose.ui.graphics.Brush
-import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.res.stringArrayResource
 import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.tooling.preview.Preview
@ -30,7 +27,6 @@ import androidx.tv.foundation.lazy.list.TvLazyColumn
 import androidx.tv.foundation.lazy.list.items
 import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.MaterialTheme
-import androidx.tv.material3.Surface
 import androidx.tv.material3.Text
 import com.ramcosta.composedestinations.annotation.Destination
 import com.ramcosta.composedestinations.navigation.DestinationsNavigator
@ -111,7 +107,6 @@ private fun SettingsSubScreenLayout(
            Column(
                modifier = Modifier
                    .fillMaxSize()
-                    .background(Brush.linearGradient(listOf(Color.Black, Color(0xFF001721))))
                    .padding(
                        start = MaterialTheme.spacings.large,
                        top = MaterialTheme.spacings.default * 2,
@ -223,27 +218,24 @@ private fun SettingsSubScreenLayout(
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
-@Preview(widthDp = 960, heightDp = 540)
+@Preview(device = "id:tv_1080p")
@Composable
 private fun SettingsSubScreenLayoutPreview() {
    FindroidTheme {
-        Surface {
-            SettingsSubScreenLayout(
-                uiState = SettingsViewModel.UiState.Normal(
-                    listOf(
-                        PreferenceSelect(
-                            nameStringResource = CoreR.string.pref_player_mpv_hwdec,
-                            backendName = Constants.PREF_PLAYER_MPV_HWDEC,
-                            backendDefaultValue = "mediacodec",
-                            options = CoreR.array.mpv_hwdec,
-                            optionValues = CoreR.array.mpv_hwdec,
-                        ),
+        SettingsSubScreenLayout(
+            uiState = SettingsViewModel.UiState.Normal(
+                listOf(
+                    PreferenceSelect(
+                        nameStringResource = CoreR.string.pref_player_mpv_hwdec,
+                        backendName = Constants.PREF_PLAYER_MPV_HWDEC,
+                        backendDefaultValue = "mediacodec",
+                        options = CoreR.array.mpv_hwdec,
+                        optionValues = CoreR.array.mpv_hwdec,
                    ),
                ),
-                title = CoreR.string.settings_category_player,
-                onUpdate = {},
-            )
-        }
+            ),
+            title = CoreR.string.settings_category_player,
+            onUpdate = {},
+        )
    }
 }
--- a/app/tv/src/main/java/dev/jdtech/jellyfin/ui/ShowScreen.kt
+++ b/app/tv/src/main/java/dev/jdtech/jellyfin/ui/ShowScreen.kt
@ -53,7 +53,6 @@ import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.Icon
 import androidx.tv.material3.LocalContentColor
 import androidx.tv.material3.MaterialTheme
-import androidx.tv.material3.Surface
 import androidx.tv.material3.Text
 import coil.compose.AsyncImage
 import com.ramcosta.composedestinations.annotation.Destination
@ -394,31 +393,28 @@ private fun ShowScreenLayout(
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
-@Preview(widthDp = 960, heightDp = 540)
+@Preview(device = "id:tv_1080p")
@Composable
 private fun ShowScreenLayoutPreview() {
    FindroidTheme {
-        Surface {
-            ShowScreenLayout(
-                uiState = ShowViewModel.UiState.Normal(
-                    item = dummyShow,
-                    actors = emptyList(),
-                    director = null,
-                    writers = emptyList(),
-                    writersString = "Hiroshi Seko, Hajime Isayama",
-                    genresString = "Action, Science Fiction, Adventure",
-                    runTime = "0 min",
-                    dateString = "2013 - 2023",
-                    nextUp = null,
-                    seasons = emptyList(),
-                ),
-                onPlayClick = {},
-                onTrailerClick = {},
-                onPlayedClick = {},
-                onFavoriteClick = {},
-                onSeasonClick = {},
-            )
-        }
+        ShowScreenLayout(
+            uiState = ShowViewModel.UiState.Normal(
+                item = dummyShow,
+                actors = emptyList(),
+                director = null,
+                writers = emptyList(),
+                writersString = "Hiroshi Seko, Hajime Isayama",
+                genresString = "Action, Science Fiction, Adventure",
+                runTime = "0 min",
+                dateString = "2013 - 2023",
+                nextUp = null,
+                seasons = emptyList(),
+            ),
+            onPlayClick = {},
+            onTrailerClick = {},
+            onPlayedClick = {},
+            onFavoriteClick = {},
+            onSeasonClick = {},
+        )
    }
 }
--- a/app/tv/src/main/java/dev/jdtech/jellyfin/ui/UserSelectScreen.kt
+++ b/app/tv/src/main/java/dev/jdtech/jellyfin/ui/UserSelectScreen.kt
@ -1,7 +1,6 @@
 package dev.jdtech.jellyfin.ui

 import androidx.compose.foundation.BorderStroke
-import androidx.compose.foundation.background
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Column
@ -22,7 +21,6 @@ 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.Brush
 import androidx.compose.ui.graphics.Color
 import androidx.compose.ui.layout.ContentScale
 import androidx.compose.ui.platform.LocalContext
@ -124,8 +122,7 @@ private fun UserSelectScreenLayout(

    Box(
        modifier = Modifier
-            .fillMaxSize()
-            .background(Brush.linearGradient(listOf(Color.Black, Color(0xFF001721)))),
+            .fillMaxSize(),
    ) {
        Column(
            horizontalAlignment = Alignment.CenterHorizontally,
@ -181,35 +178,29 @@ private fun UserSelectScreenLayout(
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
-@Preview(widthDp = 960, heightDp = 540)
+@Preview(device = "id:tv_1080p")
@Composable
 private fun UserSelectScreenLayoutPreview() {
    FindroidTheme {
-        Surface {
-            UserSelectScreenLayout(
-                uiState = UserSelectViewModel.UiState.Normal(dummyServer, dummyUsers),
-                baseUrl = "https://demo.jellyfin.org/stable",
-                onUserClick = {},
-                onAddUserClick = {},
-            )
-        }
+        UserSelectScreenLayout(
+            uiState = UserSelectViewModel.UiState.Normal(dummyServer, dummyUsers),
+            baseUrl = "https://demo.jellyfin.org/stable",
+            onUserClick = {},
+            onAddUserClick = {},
+        )
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
-@Preview(widthDp = 960, heightDp = 540)
+@Preview(device = "id:tv_1080p")
@Composable
 private fun UserSelectScreenLayoutPreviewNoUsers() {
    FindroidTheme {
-        Surface {
-            UserSelectScreenLayout(
-                uiState = UserSelectViewModel.UiState.Normal(dummyServer, emptyList()),
-                baseUrl = "https://demo.jellyfin.org/stable",
-                onUserClick = {},
-                onAddUserClick = {},
-            )
-        }
+        UserSelectScreenLayout(
+            uiState = UserSelectViewModel.UiState.Normal(dummyServer, emptyList()),
+            baseUrl = "https://demo.jellyfin.org/stable",
+            onUserClick = {},
+            onAddUserClick = {},
+        )
    }
 }

@ -273,16 +264,13 @@ private fun UserComponent(
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
@Preview
@Composable
 private fun UserComponentPreview() {
    FindroidTheme {
-        Surface {
-            UserComponent(
-                user = dummyUser,
-                baseUrl = "https://demo.jellyfin.org/stable",
-            )
-        }
+        UserComponent(
+            user = dummyUser,
+            baseUrl = "https://demo.jellyfin.org/stable",
+        )
    }
 }
--- a/app/tv/src/main/java/dev/jdtech/jellyfin/ui/components/EpisodeCard.kt
+++ b/app/tv/src/main/java/dev/jdtech/jellyfin/ui/components/EpisodeCard.kt
@ -98,16 +98,13 @@ fun EpisodeCard(
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
@Preview
@Composable
 private fun ItemCardPreviewEpisode() {
    FindroidTheme {
-        Surface {
-            EpisodeCard(
-                episode = dummyEpisode,
-                onClick = {},
-            )
-        }
+        EpisodeCard(
+            episode = dummyEpisode,
+            onClick = {},
+        )
    }
 }
--- a/app/tv/src/main/java/dev/jdtech/jellyfin/ui/components/ItemCard.kt
+++ b/app/tv/src/main/java/dev/jdtech/jellyfin/ui/components/ItemCard.kt
@ -127,47 +127,38 @@ fun ItemCard(
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
@Preview
@Composable
 private fun ItemCardPreviewMovie() {
    FindroidTheme {
-        Surface {
-            ItemCard(
-                item = dummyMovie,
-                direction = Direction.HORIZONTAL,
-                onClick = {},
-            )
-        }
+        ItemCard(
+            item = dummyMovie,
+            direction = Direction.HORIZONTAL,
+            onClick = {},
+        )
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
@Preview
@Composable
 private fun ItemCardPreviewMovieVertical() {
    FindroidTheme {
-        Surface {
-            ItemCard(
-                item = dummyMovie,
-                direction = Direction.VERTICAL,
-                onClick = {},
-            )
-        }
+        ItemCard(
+            item = dummyMovie,
+            direction = Direction.VERTICAL,
+            onClick = {},
+        )
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
@Preview
@Composable
 private fun ItemCardPreviewEpisode() {
    FindroidTheme {
-        Surface {
-            ItemCard(
-                item = dummyEpisode,
-                direction = Direction.HORIZONTAL,
-                onClick = {},
-            )
-        }
+        ItemCard(
+            item = dummyEpisode,
+            direction = Direction.HORIZONTAL,
+            onClick = {},
+        )
    }
 }
--- a/app/tv/src/main/java/dev/jdtech/jellyfin/ui/components/ProfileButton.kt
+++ b/app/tv/src/main/java/dev/jdtech/jellyfin/ui/components/ProfileButton.kt
@ -81,16 +81,13 @@ fun ProfileButton(
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
@Preview
@Composable
 private fun ProfileButtonPreview() {
    FindroidTheme {
-        Surface {
-            ProfileButton(
-                user = dummyUser,
-                onClick = {},
-            )
-        }
+        ProfileButton(
+            user = dummyUser,
+            onClick = {},
+        )
    }
 }
--- a/app/tv/src/main/java/dev/jdtech/jellyfin/ui/components/ProgressBadge.kt
+++ b/app/tv/src/main/java/dev/jdtech/jellyfin/ui/components/ProgressBadge.kt
@ -17,7 +17,6 @@ import androidx.compose.ui.unit.dp
 import androidx.tv.material3.ExperimentalTvMaterial3Api
 import androidx.tv.material3.Icon
 import androidx.tv.material3.MaterialTheme
-import androidx.tv.material3.Surface
 import androidx.tv.material3.Text
 import dev.jdtech.jellyfin.models.FindroidItem
 import dev.jdtech.jellyfin.ui.dummy.dummyEpisode
@ -67,28 +66,22 @@ fun ProgressBadge(
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
@Preview
@Composable
 private fun ProgressBadgePreviewWatched() {
    FindroidTheme {
-        Surface {
-            ProgressBadge(
-                item = dummyEpisode,
-            )
-        }
+        ProgressBadge(
+            item = dummyEpisode,
+        )
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
@Preview
@Composable
 private fun ProgressBadgePreviewItemRemaining() {
    FindroidTheme {
-        Surface {
-            ProgressBadge(
-                item = dummyShow,
-            )
-        }
+        ProgressBadge(
+            item = dummyShow,
+        )
    }
 }
--- a/app/tv/src/main/java/dev/jdtech/jellyfin/ui/components/SettingsCategoryCard.kt
+++ b/app/tv/src/main/java/dev/jdtech/jellyfin/ui/components/SettingsCategoryCard.kt
@ -93,18 +93,15 @@ fun SettingsCategoryCard(
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
@Preview
@Composable
 private fun SettingsCategoryCardPreview() {
    FindroidTheme {
-        Surface {
-            SettingsCategoryCard(
-                preference = PreferenceCategory(
-                    nameStringResource = CoreR.string.settings_category_player,
-                    iconDrawableId = CoreR.drawable.ic_play,
-                ),
-            )
-        }
+        SettingsCategoryCard(
+            preference = PreferenceCategory(
+                nameStringResource = CoreR.string.settings_category_player,
+                iconDrawableId = CoreR.drawable.ic_play,
+            ),
+        )
    }
 }
--- a/app/tv/src/main/java/dev/jdtech/jellyfin/ui/components/SettingsSelectCard.kt
+++ b/app/tv/src/main/java/dev/jdtech/jellyfin/ui/components/SettingsSelectCard.kt
@ -102,23 +102,20 @@ fun SettingsSelectCard(
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
@Preview
@Composable
 private fun SettingsSelectCardPreview() {
    FindroidTheme {
-        Surface {
-            SettingsSelectCard(
-                preference = PreferenceSelect(
-                    nameStringResource = CoreR.string.settings_preferred_audio_language,
-                    iconDrawableId = CoreR.drawable.ic_speaker,
-                    backendName = Constants.PREF_AUDIO_LANGUAGE,
-                    backendDefaultValue = null,
-                    options = CoreR.array.languages,
-                    optionValues = CoreR.array.languages_values,
-                ),
-                onClick = {},
-            )
-        }
+        SettingsSelectCard(
+            preference = PreferenceSelect(
+                nameStringResource = CoreR.string.settings_preferred_audio_language,
+                iconDrawableId = CoreR.drawable.ic_speaker,
+                backendName = Constants.PREF_AUDIO_LANGUAGE,
+                backendDefaultValue = null,
+                options = CoreR.array.languages,
+                optionValues = CoreR.array.languages_values,
+            ),
+            onClick = {},
+        )
    }
 }
--- a/app/tv/src/main/java/dev/jdtech/jellyfin/ui/components/SettingsSwitchCard.kt
+++ b/app/tv/src/main/java/dev/jdtech/jellyfin/ui/components/SettingsSwitchCard.kt
@ -96,64 +96,55 @@ fun SettingsSwitchCard(
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
@Preview
@Composable
 private fun SettingsSwitchCardPreview() {
    FindroidTheme {
-        Surface {
-            SettingsSwitchCard(
-                preference = PreferenceSwitch(
-                    nameStringResource = R.string.settings_use_cache_title,
-                    iconDrawableId = null,
-                    backendName = "image-cache",
-                    backendDefaultValue = false,
-                    value = false,
-                ),
-                onClick = {},
-            )
-        }
+        SettingsSwitchCard(
+            preference = PreferenceSwitch(
+                nameStringResource = R.string.settings_use_cache_title,
+                iconDrawableId = null,
+                backendName = "image-cache",
+                backendDefaultValue = false,
+                value = false,
+            ),
+            onClick = {},
+        )
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
@Preview
@Composable
 private fun SettingsSwitchCardDisabledPreview() {
    FindroidTheme {
-        Surface {
-            SettingsSwitchCard(
-                preference = PreferenceSwitch(
-                    nameStringResource = R.string.settings_use_cache_title,
-                    iconDrawableId = null,
-                    enabled = false,
-                    backendName = "image-cache",
-                    backendDefaultValue = false,
-                    value = false,
-                ),
-                onClick = {},
-            )
-        }
+        SettingsSwitchCard(
+            preference = PreferenceSwitch(
+                nameStringResource = R.string.settings_use_cache_title,
+                iconDrawableId = null,
+                enabled = false,
+                backendName = "image-cache",
+                backendDefaultValue = false,
+                value = false,
+            ),
+            onClick = {},
+        )
    }
 }

-@OptIn(ExperimentalTvMaterial3Api::class)
@Preview
@Composable
 private fun SettingsSwitchCardDescriptionPreview() {
    FindroidTheme {
-        Surface {
-            SettingsSwitchCard(
-                preference = PreferenceSwitch(
-                    nameStringResource = R.string.settings_use_cache_title,
-                    descriptionStringRes = R.string.settings_use_cache_summary,
-                    iconDrawableId = null,
-                    backendName = "image-cache",
-                    backendDefaultValue = true,
-                    value = true,
-                ),
-                onClick = {},
-            )
-        }
+        SettingsSwitchCard(
+            preference = PreferenceSwitch(
+                nameStringResource = R.string.settings_use_cache_title,
+                descriptionStringRes = R.string.settings_use_cache_summary,
+                iconDrawableId = null,
+                backendName = "image-cache",
+                backendDefaultValue = true,
+                value = true,
+            ),
+            onClick = {},
+        )
    }
 }
--- a/app/tv/src/main/java/dev/jdtech/jellyfin/ui/theme/Theme.kt
+++ b/app/tv/src/main/java/dev/jdtech/jellyfin/ui/theme/Theme.kt
@ -1,15 +1,24 @@
 package dev.jdtech.jellyfin.ui.theme

+import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Box
+import androidx.compose.foundation.layout.BoxScope
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.CompositionLocalProvider
+import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.Brush
+import androidx.compose.ui.graphics.Color
+import androidx.compose.ui.graphics.RectangleShape
 import androidx.tv.material3.ExperimentalTvMaterial3Api
+import androidx.tv.material3.NonInteractiveSurfaceDefaults
+import androidx.tv.material3.Surface
 import androidx.tv.material3.MaterialTheme as MaterialThemeTv

@OptIn(ExperimentalTvMaterial3Api::class)
@Composable
 fun FindroidTheme(
-    content: @Composable () -> Unit,
+    content: @Composable BoxScope.() -> Unit,
 ) {
    MaterialTheme(
        colorScheme = ColorScheme,
@ -23,7 +32,26 @@ fun FindroidTheme(
                colorScheme = ColorSchemeTv,
                typography = TypographyTv,
                shapes = shapesTv,
-                content = content,
+                content = {
+                    Surface(
+                        colors = NonInteractiveSurfaceDefaults.colors(
+                            containerColor = androidx.tv.material3.MaterialTheme.colorScheme.background,
+                        ),
+                        shape = RectangleShape,
+                    ) {
+                        Box(
+                            modifier = Modifier.background(
+                                Brush.linearGradient(
+                                    listOf(
+                                        Color.Black,
+                                        Color(0xFF001721),
+                                    ),
+                                ),
+                            ),
+                            content = content,
+                        )
+                    }
+                },
            )
        }
    }