create HomeEmptyScreen

matsumo0922 · Sep 11, 2023 · 23a6839 · 23a6839
1 parent 60a2bdd
commit 23a6839
Show file tree

Hide file tree

Showing 3 changed files with 133 additions and 36 deletions.
diff --git a/core/design/src/main/res/drawable/vec_empty_music.xml b/core/design/src/main/res/drawable/vec_empty_music.xml
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="utf-8"?>
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="130.0dip"
+    android:height="130.0dip"
+    android:viewportWidth="130.0"
+    android:viewportHeight="130.0">
+    <path
+        android:fillColor="?android:textColorSecondary"
+        android:pathData="M75,69.44H55a2,2 0,0 1,0 -4H75a2,2 0,0 1,0 4Z" />
+    <path
+        android:fillColor="?android:textColorSecondary"
+        android:pathData="M22.67,45.14l3,-0.11 -3,0.11q-0.06,-1.11 -0.06,-2.22c0,-0.69 0,-1.37 0.05,-2.05l6,0.29c0,0.58 0,1.17 0,1.76s0,1.28 0.05,1.92l-3,0.2Z" />
+    <path
+        android:fillColor="?android:textColorSecondary"
+        android:pathData="M107.35,44.94l-6,-0.28c0,-0.56 0,-1.12 0,-1.69s0,-1.28 -0.05,-1.92v-0.13l6,-0.3v0.08c0,0.77 0.06,1.52 0.06,2.26S107.38,44.29 107.35,44.94Z" />
+    <path
+        android:fillColor="#ffea4335"
+        android:pathData="M32.56,26.45l-5.35,-2.72A42.33,42.33 0,0 1,29.37 20l5,3.25A36.72,36.72 0,0 0,32.56 26.45Z" />
+    <path
+        android:fillColor="#ffea4335"
+        android:pathData="M97.35,26.27a35.72,35.72 0,0 0,-1.87 -3.21l5,-3.28a42.36,42.36 0,0 1,2.18 3.74Z" />
+    <path
+        android:fillColor="?android:textColorSecondary"
+        android:pathData="M45.15,12.44l-3.28,-5a41,41 0,0 1,3.74 -2.18l2.75,5.33C47.26,11.14 46.18,11.77 45.15,12.44Z" />
+    <path
+        android:fillColor="?android:textColorSecondary"
+        android:pathData="M84.69,12.34a36.72,36.72 0,0 0,-3.22 -1.85l2.72,-5.35c1.28,0.65 2.54,1.38 3.75,2.15Z" />
+    <path
+        android:fillColor="#ffea4335"
+        android:pathData="M63.12,6.61l-0.4,-6h0.08c1.45,-0.07 2.85,-0.08 4.25,0l-0.28,6A34.19,34.19 0,0 0,63.12 6.61Z" />
+    <path
+        android:fillColor="?android:textColorSecondary"
+        android:pathData="M114,51.44L16,51.44a4,4 0,0 0,-4 4v70a4,4 0,0 0,4 4h98a4,4 0,0 0,4 -4v-70A4,4 0,0 0,114 51.44ZM114,125.44L16,125.44v-70h98Z" />
+</vector>
diff --git a/core/design/src/main/res/values/strings.xml b/core/design/src/main/res/values/strings.xml
@@ -97,6 +97,8 @@
     <string name="home_title_recently_added_albums">最近追加されたアルバム</string>
     <string name="home_title_recently_played_songs">最近再生された楽曲</string>
     <string name="home_title_most_played_songs">再生回数の多い楽曲</string>
+    <string name="home_empty_title">ホームは空です</string>
+    <string name="home_empty_description">再生履歴などを解析して\nあなたにおすすめの楽曲が表示されます</string>
 
     <!-- Controller -->
     <string name="controller_menu_add_playlist">プレイリストに追加</string>

diff --git a/feature/home/src/main/java/caios/android/kanade/feature/home/HomeScreen.kt b/feature/home/src/main/java/caios/android/kanade/feature/home/HomeScreen.kt
@@ -1,23 +1,31 @@
 package caios.android.kanade.feature.home
 
 import androidx.compose.foundation.ExperimentalFoundationApi
+import androidx.compose.foundation.Image
 import androidx.compose.foundation.background
+import androidx.compose.foundation.layout.Arrangement
+import androidx.compose.foundation.layout.Column
 import androidx.compose.foundation.layout.PaddingValues
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.padding
 import androidx.compose.foundation.lazy.LazyColumn
 import androidx.compose.material3.MaterialTheme
+import androidx.compose.material3.Text
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.rememberCoroutineScope
+import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
 import androidx.compose.ui.platform.LocalContext
+import androidx.compose.ui.res.painterResource
+import androidx.compose.ui.res.stringResource
 import androidx.compose.ui.unit.Dp
 import androidx.compose.ui.unit.dp
 import androidx.hilt.navigation.compose.hiltViewModel
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import caios.android.kanade.core.design.R
+import caios.android.kanade.core.design.theme.center
 import caios.android.kanade.core.model.music.Album
 import caios.android.kanade.core.model.music.Queue
 import caios.android.kanade.core.model.music.Song
@@ -50,42 +58,48 @@ internal fun HomeRoute(
         modifier = modifier,
         screenState = screenState,
     ) { uiState ->
-        if (uiState != null && uiState.queue?.items?.isEmpty() == false) {
-            HomeScreen(
-                modifier = Modifier
-                    .fillMaxSize()
-                    .background(MaterialTheme.colorScheme.surface),
-                queue = uiState.queue,
-                songs = uiState.songs.toImmutableList(),
-                recentlyAddedAlbums = uiState.recentlyAddedAlbums.toImmutableList(),
-                recentlyPlayedSongs = uiState.recentlyPlayedSongs.toImmutableList(),
-                mostPlayedSongs = uiState.mostPlayedSongs.toImmutableList(),
-                contentPadding = PaddingValues(top = topMargin),
-                onClickRecentlyAdded = {
-                    uiState.songs.sortedBy { it.addedDate }.map { it.id }.let {
-                        navigateToSongDetail.invoke(context.getString(R.string.song_detail_title_recently_add), it)
-                    }
-                },
-                onClickHistory = {
-                    scope.launch {
-                        val songs = viewModel.getRecentlyPlayedSongs(9999999)
-                        navigateToSongDetail.invoke(context.getString(R.string.song_detail_title_history), songs.map { it.id })
-                    }
-                },
-                onClickMostPlayed = {
-                    scope.launch {
-                        val songs = viewModel.getMostPlayedSongs(9999999)
-                        navigateToSongDetail.invoke(context.getString(R.string.song_detail_title_most_played), songs.map { it.first.id })
-                    }
-                },
-                onClickPlay = viewModel::onNewPlay,
-                onClickSongMenu = navigateToSongMenu,
-                onClickAlbum = navigateToAlbumDetail,
-                onClickAlbumMenu = navigateToAlbumMenu,
-                onClickShuffle = viewModel::onShufflePlay,
-                onClickQueue = navigateToQueue,
-                onClickQueueItem = viewModel::onSkipToQueue,
-            )
+        if (uiState != null) {
+            if (uiState.recentlyAddedAlbums.isEmpty() || uiState.recentlyPlayedSongs.isEmpty() || uiState.mostPlayedSongs.isEmpty()) {
+                HomeEmptyScreen(
+                    modifier = Modifier.fillMaxSize(),
+                )
+            } else if (uiState.queue?.items?.isEmpty() == false) {
+                HomeScreen(
+                    modifier = Modifier
+                        .fillMaxSize()
+                        .background(MaterialTheme.colorScheme.surface),
+                    queue = uiState.queue,
+                    songs = uiState.songs.toImmutableList(),
+                    recentlyAddedAlbums = uiState.recentlyAddedAlbums.toImmutableList(),
+                    recentlyPlayedSongs = uiState.recentlyPlayedSongs.toImmutableList(),
+                    mostPlayedSongs = uiState.mostPlayedSongs.toImmutableList(),
+                    contentPadding = PaddingValues(top = topMargin),
+                    onClickRecentlyAdded = {
+                        uiState.songs.sortedBy { it.addedDate }.map { it.id }.let {
+                            navigateToSongDetail.invoke(context.getString(R.string.song_detail_title_recently_add), it)
+                        }
+                    },
+                    onClickHistory = {
+                        scope.launch {
+                            val songs = viewModel.getRecentlyPlayedSongs(9999999)
+                            navigateToSongDetail.invoke(context.getString(R.string.song_detail_title_history), songs.map { it.id })
+                        }
+                    },
+                    onClickMostPlayed = {
+                        scope.launch {
+                            val songs = viewModel.getMostPlayedSongs(9999999)
+                            navigateToSongDetail.invoke(context.getString(R.string.song_detail_title_most_played), songs.map { it.first.id })
+                        }
+                    },
+                    onClickPlay = viewModel::onNewPlay,
+                    onClickSongMenu = navigateToSongMenu,
+                    onClickAlbum = navigateToAlbumDetail,
+                    onClickAlbumMenu = navigateToAlbumMenu,
+                    onClickShuffle = viewModel::onShufflePlay,
+                    onClickQueue = navigateToQueue,
+                    onClickQueueItem = viewModel::onSkipToQueue,
+                )
+            }
         }
     }
 }
@@ -164,3 +178,50 @@ internal fun HomeScreen(
         )
     }
 }
+
+@Composable
+private fun HomeEmptyScreen(
+    modifier: Modifier = Modifier,
+) {
+    Column(
+        modifier = modifier,
+        horizontalAlignment = Alignment.CenterHorizontally,
+        verticalArrangement = Arrangement.Center,
+    ) {
+        Image(
+            modifier = Modifier
+                .padding(
+                    top = 24.dp,
+                )
+                .fillMaxWidth(),
+            painter = painterResource(R.drawable.vec_empty_music),
+            contentDescription = "empty music",
+        )
+
+        Text(
+            modifier = Modifier
+                .padding(
+                    top = 32.dp,
+                    start = 24.dp,
+                    end = 24.dp,
+                )
+                .fillMaxWidth(),
+            text = stringResource(R.string.home_empty_title),
+            style = MaterialTheme.typography.titleLarge.center(),
+            color = MaterialTheme.colorScheme.onSurface,
+        )
+
+        Text(
+            modifier = Modifier
+                .padding(
+                    top = 16.dp,
+                    start = 24.dp,
+                    end = 24.dp,
+                )
+                .fillMaxWidth(),
+            text = stringResource(R.string.home_empty_description),
+            style = MaterialTheme.typography.bodyMedium.center(),
+            color = MaterialTheme.colorScheme.onSurfaceVariant,
+        )
+    }
+}