new: display playback state with icons and enhance accessibility in PlayerScreen

gradle/libs.versions.toml

@@ -9,6 +9,7 @@ androidxLifecycle = "2.11.0-beta01"
 media3 = "1.10.1"
 navigation3 = "1.1.1"
 composeMultiplatform = "1.11.1"
+composeIconsExtended = "1.7.3"
 kotlin = "2.4.0"
 kotlinWrappers = "2026.6.3"
 kotlinxBrowser = "0.5.0"
@@ -23,6 +24,7 @@ androidx-activity-compose = { module = "androidx.activity:activity-compose", ver
 compose-components-resources = { module = "org.jetbrains.compose.components:components-resources", version.ref = "composeMultiplatform" }
 compose-foundation = { module = "org.jetbrains.compose.foundation:foundation", version.ref = "composeMultiplatform" }
 compose-material3 = { module = "org.jetbrains.compose.material3:material3", version.ref = "material3" }
+compose-material-icons-extended = { module = "org.jetbrains.compose.material:material-icons-extended", version.ref = "composeIconsExtended" }
 compose-runtime = { module = "org.jetbrains.compose.runtime:runtime", version.ref = "composeMultiplatform" }
 compose-ui = { module = "org.jetbrains.compose.ui:ui", version.ref = "composeMultiplatform" }
 compose-uiTooling = { module = "org.jetbrains.compose.ui:ui-tooling", version.ref = "composeMultiplatform" }

shared/build.gradle.kts

@@ -64,6 +64,7 @@ kotlin {
             implementation(libs.compose.runtime)
             implementation(libs.compose.foundation)
             implementation(libs.compose.material3)
+            implementation(libs.compose.material.icons.extended)
             implementation(libs.compose.ui)
             implementation(libs.compose.components.resources)
             implementation(libs.compose.uiToolingPreview)

shared/src/commonMain/kotlin/fr/ajaury/gwenedeg/player/ui/PlayerScreen.kt

@@ -3,9 +3,16 @@ package fr.ajaury.gwenedeg.player.ui
 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.fillMaxSize
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
+import androidx.compose.material.icons.Icons
+import androidx.compose.material.icons.filled.Pause
+import androidx.compose.material.icons.filled.PlayArrow
+import androidx.compose.material.icons.filled.Replay
 import androidx.compose.material3.Button
+import androidx.compose.material3.Icon
 import androidx.compose.material3.MaterialTheme
 import androidx.compose.material3.Scaffold
 import androidx.compose.material3.Text
@@ -14,6 +21,7 @@ import androidx.compose.runtime.DisposableEffect
 import androidx.compose.runtime.getValue
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
+import androidx.compose.ui.graphics.vector.ImageVector
 import androidx.compose.ui.tooling.preview.Preview
 import androidx.compose.ui.unit.dp
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
@@ -66,15 +74,29 @@ fun PlayerScreen(
                     style = MaterialTheme.typography.headlineMedium,
                 )
 
-                Button(onClick = onMainPlayActionButtonClicked) {
+                Button(
-                    Text(text = uiState.playbackState.toActionLabel())
+                    modifier = Modifier.size(60.dp),
+                    contentPadding = PaddingValues(0.dp),
+                    onClick = onMainPlayActionButtonClicked,
+                ) {
+                    Icon(
+                        imageVector = uiState.playbackState.toActionIcon(),
+                        contentDescription = uiState.playbackState.toActionContentDescription(),
+                    )
                 }
             }
         }
     }
 }
 
-private fun PlaybackState.toActionLabel(): String =
+private fun PlaybackState.toActionIcon(): ImageVector =
+    when (this) {
+        PlaybackState.PLAYING -> Icons.Default.Pause
+        PlaybackState.ENDED -> Icons.Default.Replay
+        PlaybackState.PAUSED, PlaybackState.IDLE -> Icons.Default.PlayArrow
+    }
+
+private fun PlaybackState.toActionContentDescription(): String =
     when (this) {
         PlaybackState.PLAYING -> "Pause"
         PlaybackState.ENDED -> "Replay"