SystemUI: Use proper media buttons for ongoing action chip and theme it

Signed-off-by: Pranav Vashi <neobuddy89@gmail.com>

Author: neobuddy89

packages/SystemUI/res/drawable/ic_media_control_pause.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+     SPDX-FileCopyrightText: crDroid Android Project
+     SPDX-License-Identifier: Apache-2.0
+-->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M360,640L440,640L440,320L360,320L360,640ZM520,640L600,640L600,320L520,320L520,640ZM480,880Q397,880 324,848.5Q251,817 197,763Q143,709 111.5,636Q80,563 80,480Q80,397 111.5,324Q143,251 197,197Q251,143 324,111.5Q397,80 480,80Q563,80 636,111.5Q709,143 763,197Q817,251 848.5,324Q880,397 880,480Q880,563 848.5,636Q817,709 763,763Q709,817 636,848.5Q563,880 480,880Z"/>
+</vector>

packages/SystemUI/res/drawable/ic_media_control_skip_next.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+     SPDX-FileCopyrightText: crDroid Android Project
+     SPDX-License-Identifier: Apache-2.0
+-->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M660,720L660,240L740,240L740,720L660,720ZM220,720L220,240L580,480L220,720Z"/>
+</vector>

packages/SystemUI/res/drawable/ic_media_control_skip_previous.xml

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+     SPDX-FileCopyrightText: crDroid Android Project
+     SPDX-License-Identifier: Apache-2.0
+-->
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="960"
+    android:viewportHeight="960"
+    android:tint="?attr/colorControlNormal">
+  <path
+      android:fillColor="@android:color/white"
+      android:pathData="M220,720L220,240L300,240L300,720L220,720ZM740,720L380,480L740,240L740,720Z"/>
+</vector>

packages/SystemUI/src/com/android/systemui/statusbar/OngoingActionProgressCompose.kt

@@ -47,8 +47,10 @@ import androidx.compose.ui.graphics.StrokeCap
 import androidx.compose.ui.graphics.drawscope.Fill
 import androidx.compose.ui.graphics.drawscope.Stroke
 import androidx.compose.ui.input.pointer.pointerInput
+import androidx.compose.ui.res.painterResource
 import androidx.compose.ui.unit.dp
 import androidx.compose.ui.window.Popup
+import com.android.systemui.res.R
 import com.android.systemui.statusbar.VibratorHelper;
 import com.android.systemui.statusbar.notification.headsup.HeadsUpManager
 import com.android.systemui.statusbar.policy.KeyguardStateController
@@ -74,6 +76,7 @@ fun OngoingActionProgress(
     val state by controller.state.collectAsState()
 
     val accentColor = MaterialTheme.colorScheme.primary
+    val surfaceColor = MaterialTheme.colorScheme.surface
 
     AnimatedVisibility(
         visible = state.isVisible,
@@ -206,49 +209,57 @@ fun OngoingActionProgress(
                             .width(140.dp)
                             .height(48.dp)
                             .shadow(8.dp, RoundedCornerShape(24.dp))
-                            .background(Color(0xFF202020), RoundedCornerShape(24.dp))
+                            .background(surfaceColor, RoundedCornerShape(24.dp))
                             .padding(horizontal = 16.dp),
                         horizontalArrangement = Arrangement.SpaceBetween,
                         verticalAlignment = Alignment.CenterVertically
                     ) {
-                        Box(modifier = Modifier.size(32.dp).clickable { controller.onMediaAction(0) }, contentAlignment = Alignment.Center) {
-                            Canvas(modifier = Modifier.size(12.dp)) {
-                                val path = Path().apply {
-                                    moveTo(size.width, 0f)
-                                    lineTo(0f, size.height / 2)
-                                    lineTo(size.width, size.height)
-                                    close()
-                                }
-                                drawPath(path, Color.White, style = Fill)
-                                drawRect(Color.White, topLeft = Offset(0f, 0f), size = Size(2.dp.toPx(), size.height))
-                            }
-                        }
+                        MediaControlButton(
+                            iconRes = R.drawable.ic_media_control_skip_previous,
+                            contentDescription = "Previous",
+                            onClick = { controller.onMediaAction(0) }
+                        )
 
-                        Box(modifier = Modifier.size(32.dp).clickable { controller.onMediaAction(1) }, contentAlignment = Alignment.Center) {
-                            Canvas(modifier = Modifier.size(14.dp)) {
-                                drawCircle(Color.White)
-                            }
-                        }
+                        MediaControlButton(
+                            iconRes = R.drawable.ic_media_control_pause,
+                            contentDescription = "Pause",
+                            onClick = { controller.onMediaAction(1) }
+                        )
 
-                        Box(modifier = Modifier.size(32.dp).clickable { controller.onMediaAction(2) }, contentAlignment = Alignment.Center) {
-                            Canvas(modifier = Modifier.size(12.dp)) {
-                                val path = Path().apply {
-                                    moveTo(0f, 0f)
-                                    lineTo(size.width, size.height / 2)
-                                    lineTo(0f, size.height)
-                                    close()
-                                }
-                                drawPath(path, Color.White, style = Fill)
-                                drawRect(Color.White, topLeft = Offset(size.width - 2.dp.toPx(), 0f), size = Size(2.dp.toPx(), size.height))
-                            }
-                        }
+                        MediaControlButton(
+                            iconRes = R.drawable.ic_media_control_skip_next,
+                            contentDescription = "Next",
+                            onClick = { controller.onMediaAction(2) }
+                        )
                     }
                 }
             }
         }
     }
 }
 
+@Composable
+private fun MediaControlButton(
+    iconRes: Int,
+    contentDescription: String,
+    onClick: () -> Unit,
+    modifier: Modifier = Modifier
+) {
+    Box(
+        modifier = modifier
+            .size(32.dp)
+            .clickable(onClick = onClick),
+        contentAlignment = Alignment.Center
+    ) {
+        Image(
+            painter = painterResource(id = iconRes),
+            contentDescription = contentDescription,
+            modifier = Modifier.size(24.dp),
+            colorFilter = ColorFilter.tint(MaterialTheme.colorScheme.onSurface)
+        )
+    }
+}
+
 /**
  * Compose-facing controller that adapts OnGoingActionProgressController state
  * into Compose-friendly ProgressState.