Merge pull request #292 from boostcampwm2023/android/feature/270

이전, 다음 곡 이동 불가능 상태 UI
boostcampwm2023 · Dec 7, 2023 · ea49508 · ea49508
2 parents c231766 + f9cf62e
commit ea49508
Show file tree

Hide file tree

Showing 9 changed files with 127 additions and 53 deletions.
diff --git a/android/app/src/main/res/layout/activity_main.xml b/android/app/src/main/res/layout/activity_main.xml
@@ -40,7 +40,10 @@
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:music="@{viewModel.uiState.currentMusic}"
+            app:nextEnabled="@{viewModel.uiState.nextEnable}"
+            app:playEnabled="@{viewModel.uiState.playEnable}"
             app:playing="@{viewModel.uiState.isPlaying}"
+            app:previousEnabled="@{viewModel.uiState.previousEnable}"
             app:progress="@{viewModel.uiState.currentPositionSecond}" />
 
         <com.google.android.material.bottomnavigation.BottomNavigationView

diff --git a/android/core/ui/src/main/res/drawable/ic_next.xml b/android/core/ui/src/main/res/drawable/ic_next.xml
@@ -1,9 +1,21 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
-  <path
-      android:pathData="M3.6,5.102C3.6,3.902 4.939,3.188 5.936,3.857L16.135,10.705C16.339,10.842 16.506,11.026 16.622,11.243C16.737,11.459 16.798,11.7 16.799,11.946C16.8,12.191 16.741,12.433 16.626,12.65C16.512,12.867 16.346,13.052 16.144,13.19L5.944,20.142C5.718,20.295 5.455,20.384 5.183,20.399C4.911,20.414 4.64,20.355 4.399,20.228C4.158,20.1 3.956,19.91 3.815,19.676C3.675,19.442 3.6,19.175 3.6,18.902V5.102ZM20.4,4.2C20.4,4.041 20.337,3.888 20.224,3.776C20.112,3.663 19.959,3.6 19.8,3.6C19.641,3.6 19.488,3.663 19.376,3.776C19.263,3.888 19.2,4.041 19.2,4.2V19.8C19.2,19.959 19.263,20.112 19.376,20.224C19.488,20.337 19.641,20.4 19.8,20.4C19.959,20.4 20.112,20.337 20.224,20.224C20.337,20.112 20.4,19.959 20.4,19.8V4.2Z"
-      android:fillColor="@color/on_surface"/>
-</vector>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_enabled="true">
+        <vector
+            android:width="24dp"
+            android:height="24dp"
+            android:viewportWidth="24"
+            android:viewportHeight="24">
+            <path android:fillColor="@color/on_surface" android:pathData="M3.6,5.102C3.6,3.902 4.939,3.188 5.936,3.857L16.135,10.705C16.339,10.842 16.506,11.026 16.622,11.243C16.737,11.459 16.798,11.7 16.799,11.946C16.8,12.191 16.741,12.433 16.626,12.65C16.512,12.867 16.346,13.052 16.144,13.19L5.944,20.142C5.718,20.295 5.455,20.384 5.183,20.399C4.911,20.414 4.64,20.355 4.399,20.228C4.158,20.1 3.956,19.91 3.815,19.676C3.675,19.442 3.6,19.175 3.6,18.902V5.102ZM20.4,4.2C20.4,4.041 20.337,3.888 20.224,3.776C20.112,3.663 19.959,3.6 19.8,3.6C19.641,3.6 19.488,3.663 19.376,3.776C19.263,3.888 19.2,4.041 19.2,4.2V19.8C19.2,19.959 19.263,20.112 19.376,20.224C19.488,20.337 19.641,20.4 19.8,20.4C19.959,20.4 20.112,20.337 20.224,20.224C20.337,20.112 20.4,19.959 20.4,19.8V4.2Z" />
+        </vector>
+
+    </item>
+    <item android:state_enabled="false">
+        <vector
+            android:width="24dp"
+            android:height="24dp"
+            android:viewportWidth="24"
+            android:viewportHeight="24">
+            <path android:fillColor="@color/on_surface_variant" android:pathData="M3.6,5.102C3.6,3.902 4.939,3.188 5.936,3.857L16.135,10.705C16.339,10.842 16.506,11.026 16.622,11.243C16.737,11.459 16.798,11.7 16.799,11.946C16.8,12.191 16.741,12.433 16.626,12.65C16.512,12.867 16.346,13.052 16.144,13.19L5.944,20.142C5.718,20.295 5.455,20.384 5.183,20.399C4.911,20.414 4.64,20.355 4.399,20.228C4.158,20.1 3.956,19.91 3.815,19.676C3.675,19.442 3.6,19.175 3.6,18.902V5.102ZM20.4,4.2C20.4,4.041 20.337,3.888 20.224,3.776C20.112,3.663 19.959,3.6 19.8,3.6C19.641,3.6 19.488,3.663 19.376,3.776C19.263,3.888 19.2,4.041 19.2,4.2V19.8C19.2,19.959 19.263,20.112 19.376,20.224C19.488,20.337 19.641,20.4 19.8,20.4C19.959,20.4 20.112,20.337 20.224,20.224C20.337,20.112 20.4,19.959 20.4,19.8V4.2Z" />
+        </vector>
+    </item>
+</selector>
diff --git a/android/core/ui/src/main/res/drawable/ic_play.xml b/android/core/ui/src/main/res/drawable/ic_play.xml
@@ -1,9 +1,25 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
-    <path
-        android:fillColor="@color/surface"
-        android:pathData="M22.5,12C22.501,12.255 22.435,12.505 22.31,12.727C22.186,12.949 22.006,13.135 21.788,13.267L8.28,21.53C8.052,21.669 7.791,21.745 7.524,21.75C7.257,21.755 6.994,21.689 6.761,21.558C6.531,21.429 6.339,21.241 6.205,21.013C6.071,20.785 6,20.526 6,20.262V3.738C6,3.474 6.071,3.214 6.205,2.987C6.339,2.759 6.531,2.571 6.761,2.442C6.994,2.311 7.257,2.245 7.524,2.25C7.791,2.255 8.052,2.331 8.28,2.47L21.788,10.733C22.006,10.865 22.186,11.051 22.31,11.273C22.435,11.495 22.501,11.745 22.5,12Z" />
-</vector>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+<item android:state_enabled="true">
+    <vector
+        android:width="24dp"
+        android:height="24dp"
+        android:viewportWidth="24"
+        android:viewportHeight="24">
+        <path
+            android:fillColor="@color/on_surface"
+            android:pathData="M22.5,12C22.501,12.255 22.435,12.505 22.31,12.727C22.186,12.949 22.006,13.135 21.788,13.267L8.28,21.53C8.052,21.669 7.791,21.745 7.524,21.75C7.257,21.755 6.994,21.689 6.761,21.558C6.531,21.429 6.339,21.241 6.205,21.013C6.071,20.785 6,20.526 6,20.262V3.738C6,3.474 6.071,3.214 6.205,2.987C6.339,2.759 6.531,2.571 6.761,2.442C6.994,2.311 7.257,2.245 7.524,2.25C7.791,2.255 8.052,2.331 8.28,2.47L21.788,10.733C22.006,10.865 22.186,11.051 22.31,11.273C22.435,11.495 22.501,11.745 22.5,12Z" />
+    </vector>
+
+</item>
+<item android:state_enabled="false">
+    <vector
+        android:width="24dp"
+        android:height="24dp"
+        android:viewportWidth="24"
+        android:viewportHeight="24">
+        <path
+            android:fillColor="@color/on_surface_variant"
+            android:pathData="M22.5,12C22.501,12.255 22.435,12.505 22.31,12.727C22.186,12.949 22.006,13.135 21.788,13.267L8.28,21.53C8.052,21.669 7.791,21.745 7.524,21.75C7.257,21.755 6.994,21.689 6.761,21.558C6.531,21.429 6.339,21.241 6.205,21.013C6.071,20.785 6,20.526 6,20.262V3.738C6,3.474 6.071,3.214 6.205,2.987C6.339,2.759 6.531,2.571 6.761,2.442C6.994,2.311 7.257,2.245 7.524,2.25C7.791,2.255 8.052,2.331 8.28,2.47L21.788,10.733C22.006,10.865 22.186,11.051 22.31,11.273C22.435,11.495 22.501,11.745 22.5,12Z" />
+    </vector>
+</item>
+</selector>
diff --git a/android/core/ui/src/main/res/drawable/ic_previous.xml b/android/core/ui/src/main/res/drawable/ic_previous.xml
@@ -1,9 +1,21 @@
-<vector xmlns:android="http://schemas.android.com/apk/res/android"
-    android:width="24dp"
-    android:height="24dp"
-    android:viewportWidth="24"
-    android:viewportHeight="24">
-  <path
-      android:pathData="M20.4,5.102C20.4,3.902 19.061,3.188 18.064,3.857L7.865,10.705C7.661,10.842 7.494,11.026 7.378,11.243C7.263,11.459 7.202,11.7 7.201,11.946C7.2,12.191 7.259,12.433 7.374,12.65C7.488,12.867 7.654,13.052 7.856,13.19L18.056,20.142C18.282,20.295 18.545,20.384 18.817,20.399C19.089,20.414 19.36,20.355 19.601,20.228C19.842,20.1 20.044,19.91 20.185,19.676C20.326,19.442 20.4,19.175 20.4,18.902V5.102ZM3.6,4.2C3.6,4.041 3.663,3.888 3.776,3.776C3.888,3.663 4.041,3.6 4.2,3.6C4.359,3.6 4.512,3.663 4.624,3.776C4.737,3.888 4.8,4.041 4.8,4.2V19.8C4.8,19.959 4.737,20.112 4.624,20.224C4.512,20.337 4.359,20.4 4.2,20.4C4.041,20.4 3.888,20.337 3.776,20.224C3.663,20.112 3.6,19.959 3.6,19.8V4.2Z"
-      android:fillColor="@color/on_surface"/>
-</vector>
+<selector xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:state_enabled="true">
+        <vector
+            android:width="24dp"
+            android:height="24dp"
+            android:viewportWidth="24"
+            android:viewportHeight="24">
+            <path android:fillColor="@color/on_surface" android:pathData="M20.4,5.102C20.4,3.902 19.061,3.188 18.064,3.857L7.865,10.705C7.661,10.842 7.494,11.026 7.378,11.243C7.263,11.459 7.202,11.7 7.201,11.946C7.2,12.191 7.259,12.433 7.374,12.65C7.488,12.867 7.654,13.052 7.856,13.19L18.056,20.142C18.282,20.295 18.545,20.384 18.817,20.399C19.089,20.414 19.36,20.355 19.601,20.228C19.842,20.1 20.044,19.91 20.185,19.676C20.326,19.442 20.4,19.175 20.4,18.902V5.102ZM3.6,4.2C3.6,4.041 3.663,3.888 3.776,3.776C3.888,3.663 4.041,3.6 4.2,3.6C4.359,3.6 4.512,3.663 4.624,3.776C4.737,3.888 4.8,4.041 4.8,4.2V19.8C4.8,19.959 4.737,20.112 4.624,20.224C4.512,20.337 4.359,20.4 4.2,20.4C4.041,20.4 3.888,20.337 3.776,20.224C3.663,20.112 3.6,19.959 3.6,19.8V4.2Z" />
+        </vector>
+
+    </item>
+    <item android:state_enabled="false">
+        <vector
+            android:width="24dp"
+            android:height="24dp"
+            android:viewportWidth="24"
+            android:viewportHeight="24">
+            <path android:fillColor="@color/on_surface_variant" android:pathData="M20.4,5.102C20.4,3.902 19.061,3.188 18.064,3.857L7.865,10.705C7.661,10.842 7.494,11.026 7.378,11.243C7.263,11.459 7.202,11.7 7.201,11.946C7.2,12.191 7.259,12.433 7.374,12.65C7.488,12.867 7.654,13.052 7.856,13.19L18.056,20.142C18.282,20.295 18.545,20.384 18.817,20.399C19.089,20.414 19.36,20.355 19.601,20.228C19.842,20.1 20.044,19.91 20.185,19.676C20.326,19.442 20.4,19.175 20.4,18.902V5.102ZM3.6,4.2C3.6,4.041 3.663,3.888 3.776,3.776C3.888,3.663 4.041,3.6 4.2,3.6C4.359,3.6 4.512,3.663 4.624,3.776C4.737,3.888 4.8,4.041 4.8,4.2V19.8C4.8,19.959 4.737,20.112 4.624,20.224C4.512,20.337 4.359,20.4 4.2,20.4C4.041,20.4 3.888,20.337 3.776,20.224C3.663,20.112 3.6,19.959 3.6,19.8V4.2Z" />
+        </vector>
+    </item>
+</selector>
diff --git a/...d/feature/player/src/main/java/com/ohdodok/catchytape/feature/player/PlayerControlView.kt b/...d/feature/player/src/main/java/com/ohdodok/catchytape/feature/player/PlayerControlView.kt
@@ -47,6 +47,24 @@ class PlayerControlView(context: Context, attrs: AttributeSet) : ConstraintLayou
             binding.lpiPlayerProgress.max = value
         }
 
+    var nextEnabled: Boolean = false
+        set(value) {
+            field = value
+            binding.ibNext.isEnabled = value
+        }
+
+    var playEnabled: Boolean = false
+        set(value) {
+            field = value
+            binding.ibPlay.isEnabled = value
+        }
+
+    var previousEnabled: Boolean = false
+        set(value) {
+            field = value
+            binding.ibPrevious.isEnabled = value
+        }
+
     fun setOnPlayButtonClick(onPlayButtonClick: () -> Unit) {
         binding.ibPlay.setOnClickListener { onPlayButtonClick() }
     }

diff --git a/android/feature/player/src/main/java/com/ohdodok/catchytape/feature/player/PlayerFragment.kt b/android/feature/player/src/main/java/com/ohdodok/catchytape/feature/player/PlayerFragment.kt
@@ -52,7 +52,7 @@ class PlayerFragment : BaseFragment<FragmentPlayerBinding>(R.layout.fragment_pla
     }
 
     private fun setupButtons() {
-        binding.btnPlay.setOnClickListener {
+        binding.ibPlay.setOnClickListener {
             if (viewModel.uiState.value.isPlaying) player.pause()
             else player.play()
         }
@@ -61,11 +61,11 @@ class PlayerFragment : BaseFragment<FragmentPlayerBinding>(R.layout.fragment_pla
             findNavController().popBackStack()
         }
 
-        binding.btnNext.setOnClickListener {
+        binding.ibNext.setOnClickListener {
             player.moveNextMedia()
         }
 
-        binding.btnPrevious.setOnClickListener {
+        binding.ibPrevious.setOnClickListener {
             player.movePreviousMedia()
         }
 

diff --git a/...oid/feature/player/src/main/java/com/ohdodok/catchytape/feature/player/PlayerViewModel.kt b/...oid/feature/player/src/main/java/com/ohdodok/catchytape/feature/player/PlayerViewModel.kt
@@ -26,7 +26,13 @@ data class PlayerState(
     val isPlaying: Boolean = false,
     val currentPositionSecond: Int = 0,
     val duration: Int = 0,
-)
+    val isNextEnable: Boolean = false,
+    val isPreviousEnable: Boolean = false
+
+) {
+    val isPlayEnable: Boolean
+        get() = currentMusic != null
+}
 
 sealed interface PlayerEvent {
     data class ShowError(val error: CtErrorType) : PlayerEvent
@@ -79,7 +85,12 @@ class PlayerViewModel @Inject constructor(
     override fun onMediaItemChanged(index: Int, duration: Int) {
         currentPlaylist.value?.let { playlist ->
             _uiState.update {
-                it.copy(duration = duration, currentMusic = playlist.musics[index])
+                it.copy(
+                    duration = duration,
+                    currentMusic = playlist.musics[index],
+                    isNextEnable = playlist.musics.lastIndex != index,
+                    isPreviousEnable = index != 0
+                )
             }
             viewModelScope.launch {
                 musicRepository.updateRecentPlayedMusic(playlist.musics[index].id)

diff --git a/android/feature/player/src/main/res/layout/fragment_player.xml b/android/feature/player/src/main/res/layout/fragment_player.xml
@@ -136,38 +136,41 @@
             app:seconds="@{viewModel.uiState.duration}"
             tools:text="2:04" />
 
-        <androidx.appcompat.widget.AppCompatButton
-            android:id="@+id/btn_play"
+        <ImageButton
+            android:id="@+id/ib_play"
             android:layout_width="32dp"
             android:layout_height="32dp"
             android:layout_marginTop="@dimen/medium"
-            android:background="@{viewModel.uiState.playing ? @drawable/ic_pause : @drawable/ic_play}"
-            android:backgroundTint="@color/on_surface"
+            android:background="@android:color/transparent"
+            android:src="@{viewModel.uiState.playing ? @drawable/ic_pause : @drawable/ic_play}"
             app:layout_constraintEnd_toEndOf="parent"
             app:layout_constraintStart_toStartOf="parent"
             app:layout_constraintTop_toBottomOf="@id/tv_current_time" />
 
-        <androidx.appcompat.widget.AppCompatButton
-            android:id="@+id/btn_previous"
+        <ImageButton
+            android:id="@+id/ib_previous"
             android:layout_width="24dp"
             android:layout_height="24dp"
             android:layout_marginEnd="40dp"
-            android:background="@drawable/ic_previous"
-            android:backgroundTint="@color/on_surface"
-            app:layout_constraintBottom_toBottomOf="@id/btn_play"
-            app:layout_constraintEnd_toStartOf="@id/btn_play"
-            app:layout_constraintTop_toTopOf="@id/btn_play" />
-
-        <androidx.appcompat.widget.AppCompatButton
-            android:id="@+id/btn_next"
+            android:background="@android:color/transparent"
+            android:enabled="@{viewModel.uiState.isPreviousEnable}"
+            android:src="@drawable/ic_previous"
+            app:layout_constraintBottom_toBottomOf="@id/ib_play"
+            app:layout_constraintEnd_toStartOf="@id/ib_play"
+            app:layout_constraintTop_toTopOf="@id/ib_play" />
+
+        <ImageButton
+            android:id="@+id/ib_next"
             android:layout_width="24dp"
             android:layout_height="24dp"
             android:layout_marginStart="40dp"
-            android:background="@drawable/ic_next"
-            android:backgroundTint="@color/on_surface"
-            app:layout_constraintBottom_toBottomOf="@id/btn_play"
-            app:layout_constraintStart_toEndOf="@id/btn_play"
-            app:layout_constraintTop_toTopOf="@id/btn_play" />
+            android:background="@android:color/transparent"
+            android:enabled="@{viewModel.uiState.isNextEnable}"
+            android:src="@drawable/ic_next"
+            app:layout_constraintBottom_toBottomOf="@id/ib_play"
+            app:layout_constraintStart_toEndOf="@id/ib_play"
+            app:layout_constraintTop_toTopOf="@id/ib_play" />
+
 
     </androidx.constraintlayout.widget.ConstraintLayout>
 </layout>
diff --git a/android/feature/player/src/main/res/layout/view_player_control.xml b/android/feature/player/src/main/res/layout/view_player_control.xml
@@ -77,8 +77,7 @@
             android:src="@drawable/ic_play"
             app:layout_constraintBottom_toBottomOf="parent"
             app:layout_constraintEnd_toStartOf="@+id/ib_next"
-            app:layout_constraintTop_toTopOf="parent"
-            app:tint="@color/on_surface" />
+            app:layout_constraintTop_toTopOf="parent" />
 
         <ImageButton
             android:id="@+id/ib_next"