Video player: Iterate on Play/Pause button

libraries/mediaviewer/impl/src/main/kotlin/io/element/android/libraries/mediaviewer/impl/local/video/MediaPlayerControllerView.kt

@@ -11,10 +11,13 @@ import androidx.compose.animation.AnimatedVisibility
 import androidx.compose.animation.fadeIn
 import androidx.compose.animation.fadeOut
 import androidx.compose.foundation.background
+import androidx.compose.foundation.clickable
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.padding
+import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.layout.widthIn
+import androidx.compose.foundation.shape.CircleShape
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
 import androidx.compose.runtime.mutableFloatStateOf
@@ -63,8 +66,21 @@ fun MediaPlayerControllerView(
                     .widthIn(max = 480.dp),
                 verticalAlignment = Alignment.CenterVertically,
             ) {
-                IconButton(
-                    onClick = onTogglePlay,
+                val bgColor = if (state.isPlaying) {
+                    ElementTheme.colors.bgCanvasDefault
+                } else {
+                    ElementTheme.colors.textPrimary
+                }
+                Box(
+                    modifier = Modifier
+                        .clickable { onTogglePlay() }
+                        .size(36.dp)
+                        .background(
+                            color = bgColor,
+                            shape = CircleShape,
+                        )
+                        .padding(8.dp),
+                    contentAlignment = Alignment.Center,
                 ) {
                     if (state.isPlaying) {
                         Icon(
@@ -75,7 +91,7 @@ fun MediaPlayerControllerView(
                     } else {
                         Icon(
                             imageVector = CompoundIcons.PlaySolid(),
-                            tint = ElementTheme.colors.iconPrimary,
+                            tint = ElementTheme.colors.iconOnSolidPrimary,
                             contentDescription = stringResource(CommonStrings.a11y_play)
                         )
                     }