Updates media display margins (#2165)

39 files changed, 115 insertions, 109 deletions

diff --git a/media/audio-ui/src/main/java/com/google/android/horologist/audio/ui/components/SettingsButtons.kt b/media/audio-ui/src/main/java/com/google/android/horologist/audio/ui/components/SettingsButtons.kt
index 8412a60d..ad47e1a4 100644
--- a/media/audio-ui/src/main/java/com/google/android/horologist/audio/ui/components/SettingsButtons.kt
+++ b/media/audio-ui/src/main/java/com/google/android/horologist/audio/ui/components/SettingsButtons.kt
@@ -18,6 +18,7 @@ package com.google.android.horologist.audio.ui.components
 
 import androidx.annotation.DrawableRes
 import androidx.compose.foundation.Image
+import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.size
 import androidx.compose.foundation.shape.CircleShape
@@ -48,6 +49,7 @@ public fun SettingsButtons(
     Row(
         modifier = modifier,
         verticalAlignment = Alignment.CenterVertically,
+        horizontalArrangement = Arrangement.Center,
     ) {
         SetVolumeButton(
             onVolumeClick = onVolumeClick,
diff --git a/media/sample/src/main/java/com/google/android/horologist/mediasample/ui/player/UampMediaPlayerScreen.kt b/media/sample/src/main/java/com/google/android/horologist/mediasample/ui/player/UampMediaPlayerScreen.kt
index c46003c8..2affe261 100644
--- a/media/sample/src/main/java/com/google/android/horologist/mediasample/ui/player/UampMediaPlayerScreen.kt
+++ b/media/sample/src/main/java/com/google/android/horologist/mediasample/ui/player/UampMediaPlayerScreen.kt
@@ -68,11 +68,11 @@ fun UampMediaPlayerScreen(
                 DefaultMediaInfoDisplay(playerUiState)
             }
         },
-        buttons = {
+        buttons = { state ->
             UampSettingsButtons(
                 volumeUiState = volumeUiState,
                 onVolumeClick = onVolumeClick,
-                enabled = it.connected && it.media != null,
+                enabled = state.connected && state.media != null,
             )
         },
         controlButtons = { playerUiController, playerUiState ->
@@ -109,8 +109,10 @@ fun UampMediaPlayerScreen(
 public fun PlayerScreenPodcastControlButtons(
     playerUiController: PlayerUiController,
     playerUiState: PlayerUiState,
+    modifier: Modifier = Modifier,
 ) {
     PodcastControlButtons(
+        modifier = modifier,
         playerController = playerUiController,
         playerUiState = playerUiState,
     )
diff --git a/media/sample/src/main/java/com/google/android/horologist/mediasample/ui/player/UampSettingsButtons.kt b/media/sample/src/main/java/com/google/android/horologist/mediasample/ui/player/UampSettingsButtons.kt
index 8d6fbb9a..daaa437c 100644
--- a/media/sample/src/main/java/com/google/android/horologist/mediasample/ui/player/UampSettingsButtons.kt
+++ b/media/sample/src/main/java/com/google/android/horologist/mediasample/ui/player/UampSettingsButtons.kt
@@ -18,7 +18,6 @@ package com.google.android.horologist.mediasample.ui.player
 
 import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.runtime.Composable
 import androidx.compose.ui.Alignment
 import androidx.compose.ui.Modifier
@@ -39,7 +38,7 @@ public fun UampSettingsButtons(
     enabled: Boolean = true,
 ) {
     Row(
-        modifier = modifier.fillMaxWidth(0.8124f),
+        modifier = modifier,
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.SpaceEvenly,
     ) {
diff --git a/media/ui/api/current.api b/media/ui/api/current.api
index 769cc6e4..a35837d8 100644
--- a/media/ui/api/current.api
+++ b/media/ui/api/current.api
@@ -469,9 +469,9 @@ package com.google.android.horologist.media.ui.screens.player {
 
   public final class PlayerScreenKt {
     method @androidx.compose.runtime.Composable @com.google.android.horologist.annotations.ExperimentalHorologistApi public static void DefaultMediaInfoDisplay(com.google.android.horologist.media.ui.state.PlayerUiState playerUiState, optional androidx.compose.ui.Modifier modifier);
-    method @androidx.compose.runtime.Composable @com.google.android.horologist.annotations.ExperimentalHorologistApi public static void DefaultPlayerScreenControlButtons(com.google.android.horologist.media.ui.state.PlayerUiController playerController, com.google.android.horologist.media.ui.state.PlayerUiState playerUiState);
-    method @androidx.compose.runtime.Composable @com.google.android.horologist.annotations.ExperimentalHorologistApi public static void PlayerScreen(com.google.android.horologist.media.ui.state.PlayerViewModel playerViewModel, com.google.android.horologist.audio.ui.VolumeViewModel volumeViewModel, optional androidx.compose.ui.Modifier modifier, optional kotlin.jvm.functions.Function2<? super androidx.compose.foundation.layout.ColumnScope,? super com.google.android.horologist.media.ui.state.PlayerUiState,kotlin.Unit> mediaDisplay, optional kotlin.jvm.functions.Function3<? super androidx.compose.foundation.layout.RowScope,? super com.google.android.horologist.media.ui.state.PlayerUiController,? super com.google.android.horologist.media.ui.state.PlayerUiState,kotlin.Unit> controlButtons, optional kotlin.jvm.functions.Function2<? super androidx.compose.foundation.layout.RowScope,? super com.google.android.horologist.media.ui.state.PlayerUiState,kotlin.Unit> buttons, optional kotlin.jvm.functions.Function2<? super androidx.compose.foundation.layout.BoxScope,? super com.google.android.horologist.media.ui.state.PlayerUiState,kotlin.Unit> background, optional androidx.compose.ui.focus.FocusRequester focusRequester);
-    method @androidx.compose.runtime.Composable @com.google.android.horologist.annotations.ExperimentalHorologistApi public static void PlayerScreen(kotlin.jvm.functions.Function1<? super androidx.compose.foundation.layout.ColumnScope,kotlin.Unit> mediaDisplay, kotlin.jvm.functions.Function1<? super androidx.compose.foundation.layout.RowScope,kotlin.Unit> controlButtons, kotlin.jvm.functions.Function1<? super androidx.compose.foundation.layout.RowScope,kotlin.Unit> buttons, optional androidx.compose.ui.Modifier modifier, optional kotlin.jvm.functions.Function1<? super androidx.compose.foundation.layout.BoxScope,kotlin.Unit> background);
+    method @androidx.compose.runtime.Composable @com.google.android.horologist.annotations.ExperimentalHorologistApi public static void DefaultPlayerScreenControlButtons(com.google.android.horologist.media.ui.state.PlayerUiController playerController, com.google.android.horologist.media.ui.state.PlayerUiState playerUiState, optional androidx.compose.ui.Modifier modifier);
+    method @androidx.compose.runtime.Composable @com.google.android.horologist.annotations.ExperimentalHorologistApi public static void PlayerScreen(com.google.android.horologist.media.ui.state.PlayerViewModel playerViewModel, com.google.android.horologist.audio.ui.VolumeViewModel volumeViewModel, optional androidx.compose.ui.Modifier modifier, optional kotlin.jvm.functions.Function1<? super com.google.android.horologist.media.ui.state.PlayerUiState,kotlin.Unit> mediaDisplay, optional kotlin.jvm.functions.Function2<? super com.google.android.horologist.media.ui.state.PlayerUiController,? super com.google.android.horologist.media.ui.state.PlayerUiState,kotlin.Unit> controlButtons, optional kotlin.jvm.functions.Function1<? super com.google.android.horologist.media.ui.state.PlayerUiState,kotlin.Unit> buttons, optional kotlin.jvm.functions.Function2<? super androidx.compose.foundation.layout.BoxScope,? super com.google.android.horologist.media.ui.state.PlayerUiState,kotlin.Unit> background, optional androidx.compose.ui.focus.FocusRequester focusRequester);
+    method @androidx.compose.runtime.Composable @com.google.android.horologist.annotations.ExperimentalHorologistApi public static void PlayerScreen(kotlin.jvm.functions.Function0<kotlin.Unit> mediaDisplay, kotlin.jvm.functions.Function0<kotlin.Unit> controlButtons, kotlin.jvm.functions.Function0<kotlin.Unit> buttons, optional androidx.compose.ui.Modifier modifier, optional kotlin.jvm.functions.Function1<? super androidx.compose.foundation.layout.BoxScope,kotlin.Unit> background);
   }
 
 }
diff --git a/media/ui/src/main/java/com/google/android/horologist/media/ui/components/ControlButtonLayout.kt b/media/ui/src/main/java/com/google/android/horologist/media/ui/components/ControlButtonLayout.kt
index e31dc5dd..4be14ade 100644
--- a/media/ui/src/main/java/com/google/android/horologist/media/ui/components/ControlButtonLayout.kt
+++ b/media/ui/src/main/java/com/google/android/horologist/media/ui/components/ControlButtonLayout.kt
@@ -20,7 +20,6 @@ import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.Row
 import androidx.compose.foundation.layout.fillMaxHeight
-import androidx.compose.foundation.layout.fillMaxWidth
 import androidx.compose.foundation.layout.height
 import androidx.compose.foundation.layout.size
 import androidx.compose.runtime.Composable
@@ -39,7 +38,7 @@ public fun ControlButtonLayout(
 ) {
     val middleSize = if (LocalConfiguration.current.isLargeScreen) 80.dp else 60.dp
     Row(
-        modifier = modifier.fillMaxWidth().height(middleSize),
+        modifier = modifier.height(middleSize),
         verticalAlignment = Alignment.CenterVertically,
         horizontalArrangement = Arrangement.Absolute.Center,
     ) {
diff --git a/media/ui/src/main/java/com/google/android/horologist/media/ui/components/animated/MarqueeTextMediaDisplay.kt b/media/ui/src/main/java/com/google/android/horologist/media/ui/components/animated/MarqueeTextMediaDisplay.kt
index f33f42ac..a20bf138 100644
--- a/media/ui/src/main/java/com/google/android/horologist/media/ui/components/animated/MarqueeTextMediaDisplay.kt
+++ b/media/ui/src/main/java/com/google/android/horologist/media/ui/components/animated/MarqueeTextMediaDisplay.kt
@@ -103,8 +103,11 @@ public fun MarqueeTextMediaDisplay(
             MarqueeText(
                 text = text,
                 inlineContent = inlineContent,
+                edgeGradientWidth = 8.dp,
                 modifier = Modifier
-                    .fillMaxWidth(0.7f)
+                    // 89.76% of parent equals 4.16% of screen width applied on each side when
+                    // applied on top of the 9.38% in the ConstraintLayout.
+                    .fillMaxWidth(0.8976f)
                     .padding(
                         top = if (isLargeScreen) 0.dp else 2.dp,
                         bottom = if (isLargeScreen) 3.dp else 1.dp,
@@ -123,7 +126,7 @@ public fun MarqueeTextMediaDisplay(
             Text(
                 text = currentArtist.orEmpty(),
                 modifier = Modifier
-                    .fillMaxWidth(0.8f)
+                    .fillMaxWidth()
                     .padding(top = 1.dp, bottom = .6.dp),
                 color = MaterialTheme.colors.onBackground,
                 textAlign = TextAlign.Center,
diff --git a/media/ui/src/main/java/com/google/android/horologist/media/ui/components/display/TextMediaDisplay.kt b/media/ui/src/main/java/com/google/android/horologist/media/ui/components/display/TextMediaDisplay.kt
index 38991a0a..527cc645 100644
--- a/media/ui/src/main/java/com/google/android/horologist/media/ui/components/display/TextMediaDisplay.kt
+++ b/media/ui/src/main/java/com/google/android/horologist/media/ui/components/display/TextMediaDisplay.kt
@@ -75,7 +75,9 @@ public fun TextMediaDisplay(
             text = text,
             inlineContent = inlineContent,
             modifier = Modifier
-                .fillMaxWidth(0.7f)
+                // 89.76% of parent equals 4.16% of screen width applied on each side when
+                // applied on top of the 9.38% in the ConstraintLayout.
+                .fillMaxWidth(0.8976f)
                 .padding(
                     top = if (isLargeScreen) 0.dp else 2.dp,
                     bottom = if (isLargeScreen) 3.dp else 1.dp,
@@ -88,7 +90,7 @@ public fun TextMediaDisplay(
         Text(
             text = subtitle,
             modifier = Modifier
-                .fillMaxWidth(0.8f)
+                .fillMaxWidth()
                 .padding(top = 1.dp, bottom = .6.dp),
             color = MaterialTheme.colors.onBackground,
             textAlign = TextAlign.Center,
diff --git a/media/ui/src/main/java/com/google/android/horologist/media/ui/screens/player/PlayerScreen.kt b/media/ui/src/main/java/com/google/android/horologist/media/ui/screens/player/PlayerScreen.kt
index 37b60988..b7466e8f 100644
--- a/media/ui/src/main/java/com/google/android/horologist/media/ui/screens/player/PlayerScreen.kt
+++ b/media/ui/src/main/java/com/google/android/horologist/media/ui/screens/player/PlayerScreen.kt
@@ -18,13 +18,8 @@
 
 package com.google.android.horologist.media.ui.screens.player
 
-import androidx.compose.foundation.layout.Arrangement
 import androidx.compose.foundation.layout.Box
 import androidx.compose.foundation.layout.BoxScope
-import androidx.compose.foundation.layout.Column
-import androidx.compose.foundation.layout.ColumnScope
-import androidx.compose.foundation.layout.Row
-import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.runtime.Composable
 import androidx.compose.runtime.getValue
@@ -33,6 +28,7 @@ import androidx.compose.ui.Modifier
 import androidx.compose.ui.focus.FocusRequester
 import androidx.compose.ui.platform.LocalView
 import androidx.constraintlayout.compose.ConstraintLayout
+import androidx.constraintlayout.compose.Dimension
 import androidx.lifecycle.compose.collectAsStateWithLifecycle
 import androidx.wear.compose.foundation.ExperimentalWearFoundationApi
 import androidx.wear.compose.foundation.rememberActiveFocusRequester
@@ -46,11 +42,11 @@ import com.google.android.horologist.media.ui.state.PlayerUiController
 import com.google.android.horologist.media.ui.state.PlayerUiState
 import com.google.android.horologist.media.ui.state.PlayerViewModel
 
-public typealias MediaDisplay = @Composable ColumnScope.(playerUiState: PlayerUiState) -> Unit
+public typealias MediaDisplay = @Composable (playerUiState: PlayerUiState) -> Unit
 
-public typealias ControlButtons = @Composable RowScope.(playerUiController: PlayerUiController, playerUiState: PlayerUiState) -> Unit
+public typealias ControlButtons = @Composable (playerUiController: PlayerUiController, playerUiState: PlayerUiState) -> Unit
 
-public typealias SettingsButtons = @Composable RowScope.(playerUiState: PlayerUiState) -> Unit
+public typealias SettingsButtons = @Composable (playerUiState: PlayerUiState) -> Unit
 
 public typealias PlayerBackground = @Composable BoxScope.(playerUiState: PlayerUiState) -> Unit
 
@@ -71,7 +67,7 @@ public fun PlayerScreen(
     controlButtons: ControlButtons = { playerUiController, playerUiState ->
         DefaultPlayerScreenControlButtons(playerUiController, playerUiState)
     },
-    buttons: SettingsButtons = {},
+    buttons: SettingsButtons = { },
     background: PlayerBackground = {},
     focusRequester: FocusRequester = rememberActiveFocusRequester(),
 ) {
@@ -81,9 +77,7 @@ public fun PlayerScreen(
     PlayerScreen(
         mediaDisplay = { mediaDisplay(playerUiState) },
         controlButtons = { controlButtons(playerViewModel.playerUiController, playerUiState) },
-        buttons = {
-            buttons(playerUiState)
-        },
+        buttons = { buttons(playerUiState) },
         modifier = modifier.rotaryVolumeControlsWithFocus(
             focusRequester = focusRequester,
             volumeUiStateProvider = { volumeUiState },
@@ -119,8 +113,10 @@ public fun DefaultMediaInfoDisplay(
 public fun DefaultPlayerScreenControlButtons(
     playerController: PlayerUiController,
     playerUiState: PlayerUiState,
+    modifier: Modifier = Modifier,
 ) {
     MediaControlButtons(
+        modifier = modifier,
         onPlayButtonClick = playerController::play,
         onPauseButtonClick = playerController::pause,
         playPauseButtonEnabled = playerUiState.playPauseEnabled,
@@ -139,9 +135,9 @@ public fun DefaultPlayerScreenControlButtons(
 @ExperimentalHorologistApi
 @Composable
 public fun PlayerScreen(
-    mediaDisplay: @Composable ColumnScope.() -> Unit,
-    controlButtons: @Composable RowScope.() -> Unit,
-    buttons: @Composable RowScope.() -> Unit,
+    mediaDisplay: @Composable () -> Unit,
+    controlButtons: @Composable () -> Unit,
+    buttons: @Composable () -> Unit,
     modifier: Modifier = Modifier,
     background: @Composable BoxScope.() -> Unit = {},
 ) {
@@ -160,41 +156,46 @@ public fun PlayerScreen(
             val topGuideline = createGuidelineFromTop(0.12f)
             val bottomGuideline = createGuidelineFromBottom(0.063f)
 
-            Column(
-                modifier = Modifier
-                    .constrainAs(topSection) {
-                        top.linkTo(topGuideline)
-                        start.linkTo(startGuideline)
-                        end.linkTo(endGuideline)
-                        bottom.linkTo(middleSection.top)
-                    },
-                horizontalAlignment = Alignment.CenterHorizontally,
+            Box(
+                modifier = Modifier.constrainAs(topSection) {
+                    top.linkTo(topGuideline)
+                    start.linkTo(startGuideline)
+                    end.linkTo(endGuideline)
+                    bottom.linkTo(middleSection.top)
+                    width = Dimension.fillToConstraints
+                    height = Dimension.fillToConstraints
+                },
+                contentAlignment = Alignment.Center,
             ) {
                 mediaDisplay()
             }
-            Row(
+
+            Box(
                 modifier = Modifier
                     .constrainAs(middleSection) {
                         top.linkTo(topGuideline)
                         start.linkTo(parent.start)
                         end.linkTo(parent.end)
                         bottom.linkTo(bottomGuideline)
+                        width = Dimension.fillToConstraints
+                        height = Dimension.wrapContent
                     },
-                verticalAlignment = Alignment.CenterVertically,
-                horizontalArrangement = Arrangement.SpaceAround,
+                contentAlignment = Alignment.Center,
             ) {
                 controlButtons()
             }
-            Row(
+
+            Box(
                 modifier = Modifier
                     .constrainAs(bottomSection) {
                         top.linkTo(middleSection.bottom)
                         start.linkTo(startGuideline)
                         end.linkTo(endGuideline)
                         bottom.linkTo(bottomGuideline)
+                        width = Dimension.fillToConstraints
+                        height = Dimension.fillToConstraints
                     },
-                horizontalArrangement = Arrangement.Center,
-                verticalAlignment = Alignment.CenterVertically,
+                contentAlignment = Alignment.Center,
             ) {
                 buttons()
             }
diff --git a/media/ui/src/test/java/com/google/android/horologist/media/ui/MediaPlayerTestCase.kt b/media/ui/src/test/java/com/google/android/horologist/media/ui/MediaPlayerTestCase.kt
index 575ec29d..bdbec29a 100644
--- a/media/ui/src/test/java/com/google/android/horologist/media/ui/MediaPlayerTestCase.kt
+++ b/media/ui/src/test/java/com/google/android/horologist/media/ui/MediaPlayerTestCase.kt
@@ -20,8 +20,6 @@ package com.google.android.horologist.media.ui
 
 import androidx.compose.foundation.ExperimentalFoundationApi
 import androidx.compose.foundation.layout.Box
-import androidx.compose.foundation.layout.ColumnScope
-import androidx.compose.foundation.layout.RowScope
 import androidx.compose.foundation.layout.fillMaxSize
 import androidx.compose.foundation.pager.rememberPagerState
 import androidx.compose.runtime.Composable
@@ -47,10 +45,10 @@ import kotlinx.coroutines.flow.flowOf
 @Composable
 fun MediaPlayerTestCase(
     playerUiState: PlayerUiState,
-    mediaDisplay: @Composable ColumnScope.() -> Unit = {
+    mediaDisplay: @Composable () -> Unit = {
         AnimatedMediaInfoDisplay(playerUiState.media, loading = false)
     },
-    controlButtons: @Composable RowScope.() -> Unit = {
+    controlButtons: @Composable () -> Unit = {
         AnimatedMediaControlButtons(
             onPlayButtonClick = { },
             onPauseButtonClick = { },
@@ -63,7 +61,7 @@ fun MediaPlayerTestCase(
             trackPositionUiModel = playerUiState.trackPositionUiModel,
         )
     },
-    buttons: @Composable RowScope.() -> Unit = {
+    buttons: @Composable () -> Unit = {
         SettingsButtons(
             volumeUiState = VolumeUiState(5, 10),
             onVolumeClick = { /*TODO*/ },
@@ -99,9 +97,9 @@ fun MediaPlayerTestCase(
                     if (it == 0) {
                         PlayerScreen(
                             modifier = Modifier.fillMaxSize(),
-                            mediaDisplay = { mediaDisplay() },
-                            controlButtons = { controlButtons() },
-                            buttons = { buttons() },
+                            mediaDisplay = mediaDisplay,
+                            controlButtons = controlButtons,
+                            buttons = buttons,
                             background = { RadialBackground(color = colors.primary) },
                         )
                     }
diff --git a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_LoadingMediaDisplayTest_loadingMediaDisplay_marqueeTextMediaDisplay_overlay_largeScreen.png b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_LoadingMediaDisplayTest_loadingMediaDisplay_marqueeTextMediaDisplay_overlay_largeScreen.png
index 5a614543..68fec83e 100644
--- a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_LoadingMediaDisplayTest_loadingMediaDisplay_marqueeTextMediaDisplay_overlay_largeScreen.png
+++ b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_LoadingMediaDisplayTest_loadingMediaDisplay_marqueeTextMediaDisplay_overlay_largeScreen.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:748b6cfe8319faaf6994b6e29f2f9e52575785cef76907f9539894496b3160b3
-size 8456
+oid sha256:bb103ad40672b95be9ff4a496042291da0a1dbf502d0e3d7467e741fd98a587f
+size 8548
diff --git a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_LoadingMediaDisplayTest_loadingMediaDisplay_marqueeTextMediaDisplay_overlay_smallScreen.png b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_LoadingMediaDisplayTest_loadingMediaDisplay_marqueeTextMediaDisplay_overlay_smallScreen.png
index 0f884284..5856bb4d 100644
--- a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_LoadingMediaDisplayTest_loadingMediaDisplay_marqueeTextMediaDisplay_overlay_smallScreen.png
+++ b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_LoadingMediaDisplayTest_loadingMediaDisplay_marqueeTextMediaDisplay_overlay_smallScreen.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a3238356daab866e9ddda4c8d28dd5f630b88a7f1fe6ffdf2d69327b7bf3d012
-size 8376
+oid sha256:f33750a46495e945b3a8f8d654ffcc0c7f82659a4b5ac2ce3e0ba8752e50931a
+size 8462
diff --git a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_LoadingMediaDisplayTest_loadingMediaDisplay_textMediaDisplay_overlay_largeScreen.png b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_LoadingMediaDisplayTest_loadingMediaDisplay_textMediaDisplay_overlay_largeScreen.png
index 5a614543..68fec83e 100644
--- a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_LoadingMediaDisplayTest_loadingMediaDisplay_textMediaDisplay_overlay_largeScreen.png
+++ b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_LoadingMediaDisplayTest_loadingMediaDisplay_textMediaDisplay_overlay_largeScreen.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:748b6cfe8319faaf6994b6e29f2f9e52575785cef76907f9539894496b3160b3
-size 8456
+oid sha256:bb103ad40672b95be9ff4a496042291da0a1dbf502d0e3d7467e741fd98a587f
+size 8548
diff --git a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_LoadingMediaDisplayTest_loadingMediaDisplay_textMediaDisplay_overlay_smallScreen.png b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_LoadingMediaDisplayTest_loadingMediaDisplay_textMediaDisplay_overlay_smallScreen.png
index 0f884284..5856bb4d 100644
--- a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_LoadingMediaDisplayTest_loadingMediaDisplay_textMediaDisplay_overlay_smallScreen.png
+++ b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_LoadingMediaDisplayTest_loadingMediaDisplay_textMediaDisplay_overlay_smallScreen.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a3238356daab866e9ddda4c8d28dd5f630b88a7f1fe6ffdf2d69327b7bf3d012
-size 8376
+oid sha256:f33750a46495e945b3a8f8d654ffcc0c7f82659a4b5ac2ce3e0ba8752e50931a
+size 8462
diff --git a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_MarqueeTextMediaDisplayTest_givenPaintableIcon_thenTintedIconIsDisplayed.png b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_MarqueeTextMediaDisplayTest_givenPaintableIcon_thenTintedIconIsDisplayed.png
index b5ffe546..552105f6 100644
--- a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_MarqueeTextMediaDisplayTest_givenPaintableIcon_thenTintedIconIsDisplayed.png
+++ b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_MarqueeTextMediaDisplayTest_givenPaintableIcon_thenTintedIconIsDisplayed.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ffe43303f54a6866e612fc8ba3c153c7917190e90ce0ca19dd9e93cd2a750d1a
-size 8161
+oid sha256:d6cc6f08572dcab858712c156b191e3aeeaff13ea8325a443d19ba0280013060
+size 8256
diff --git a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_MarqueeTextMediaDisplayTest_givenPaintable_thenImageIsDisplayed.png b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_MarqueeTextMediaDisplayTest_givenPaintable_thenImageIsDisplayed.png
index 8c54aaa4..362c5f70 100644
--- a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_MarqueeTextMediaDisplayTest_givenPaintable_thenImageIsDisplayed.png
+++ b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_MarqueeTextMediaDisplayTest_givenPaintable_thenImageIsDisplayed.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:faeb02cdf495d2438c0f549fca9c0a094ce7d6e6450b76bbbc49c54c6b6b590b
-size 8214
+oid sha256:4b6a3fd19fa7b3a44748d821a25026895ffbe2777652a64944d3a2d105e25bba
+size 8316
diff --git a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_MarqueeTextMediaDisplayTest_givenTitleAndArtist_thenTitleAndArtistAreDisplayed.png b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_MarqueeTextMediaDisplayTest_givenTitleAndArtist_thenTitleAndArtistAreDisplayed.png
index 083f04c8..c9997fa7 100644
--- a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_MarqueeTextMediaDisplayTest_givenTitleAndArtist_thenTitleAndArtistAreDisplayed.png
+++ b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui.components_MarqueeTextMediaDisplayTest_givenTitleAndArtist_thenTitleAndArtistAreDisplayed.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:045105e39e82d8c6d26725b6a62dfdab539d22206093f95c34e9c14d323d1794
-size 7481
+oid sha256:064d5880f1fce7ac38849fc09f56d3b354904c5159db891f26696e320d2cf6d5
+size 7559
diff --git a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerA11yScreenshotTest_mediaPlayerLargeRound.png b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerA11yScreenshotTest_mediaPlayerLargeRound.png
index 5b17d3f5..73e4de9c 100644
--- a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerA11yScreenshotTest_mediaPlayerLargeRound.png
+++ b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerA11yScreenshotTest_mediaPlayerLargeRound.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:79d9a23ba0cab0a9493e0a3ab0e63ebb5c2d72138a8988aa96d184b76dbc047a
-size 146514
+oid sha256:67e2f0fd78e1c1bf8e1555993f90916063d8f6b1362db307d2f4ce71498b443d
+size 146725
diff --git a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerA11yScreenshotTest_mediaPlayerSmallRound.png b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerA11yScreenshotTest_mediaPlayerSmallRound.png
index 7d39412f..0a04a3b8 100644
--- a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerA11yScreenshotTest_mediaPlayerSmallRound.png
+++ b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerA11yScreenshotTest_mediaPlayerSmallRound.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5a670086ba7b728c6586d7095b0b88b47907652e32a45c607f8b61fff04f5f48
-size 90999
+oid sha256:6131a00a869fcc594e2a0afe18de6e3cbd741fb73dff66e984fb54622fbd1bff
+size 90882
diff --git a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerA11yScreenshotTest_mediaPlayerSquare.png b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerA11yScreenshotTest_mediaPlayerSquare.png
index 9749cbcf..d9fe109c 100644
--- a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerA11yScreenshotTest_mediaPlayerSquare.png
+++ b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerA11yScreenshotTest_mediaPlayerSquare.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:0fa93de56a1a48da59c4563e424b53e2eddfbfa81f01225258d3310567016545
-size 76527
+oid sha256:ba6e9c89f0faefd5d48d2907cf2677f6c08b9ebde8ac4457e11d379402942fa0
+size 76502
diff --git a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerDeviceScreenTest_mediaPlayerLargeRound.png b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerDeviceScreenTest_mediaPlayerLargeRound.png
index d1ed707c..c16722e4 100644
--- a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerDeviceScreenTest_mediaPlayerLargeRound.png
+++ b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerDeviceScreenTest_mediaPlayerLargeRound.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4788fe717c31beeef99b13757a3e868d371dc23de2533ea925d49e34d43583db
+oid sha256:4bc2c165510272ac95b772c65c99d9d46e5b87c97d2b2506f7a9ca18bdc1eee4
 size 119099
diff --git a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerDeviceScreenTest_mediaPlayerScreen.png b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerDeviceScreenTest_mediaPlayerScreen.png
index d1ed707c..c16722e4 100644
--- a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerDeviceScreenTest_mediaPlayerScreen.png
+++ b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerDeviceScreenTest_mediaPlayerScreen.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:4788fe717c31beeef99b13757a3e868d371dc23de2533ea925d49e34d43583db
+oid sha256:4bc2c165510272ac95b772c65c99d9d46e5b87c97d2b2506f7a9ca18bdc1eee4
 size 119099
diff --git a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[0]_bluedefaultaecbfa.png b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[0]_bluedefaultaecbfa.png
index 8ec9c9d1..6c3f897d 100644
--- a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[0]_bluedefaultaecbfa.png
+++ b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[0]_bluedefaultaecbfa.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ec0576712800b0d805b435f582793e033020a884cd043fa5dfc6f380d6270b1c
-size 117428
+oid sha256:334058cb920d5cdfa5976ae7e991c831b4a4b37fec68d51b21801cf3efdedccf
+size 117486
diff --git a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[1]_blue7fcfff.png b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[1]_blue7fcfff.png
index 2d260cee..7284563e 100644
--- a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[1]_blue7fcfff.png
+++ b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[1]_blue7fcfff.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:a74695330333c377536b239a5a4de74214388034df88f66495aa391fda64556f
-size 115425
+oid sha256:e147e9dacb23e24e20748c56cd709c8f9d177e20b5ae235544f87b562a387475
+size 115426
diff --git a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[2]_lilacd0bcff.png b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[2]_lilacd0bcff.png
index aa626c2b..56fe85f6 100644
--- a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[2]_lilacd0bcff.png
+++ b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[2]_lilacd0bcff.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:838fb0caff982b5cd45404e8e8c05d8aea23929ca414a5264e5e68f2d40a3f64
-size 117172
+oid sha256:4adab18c9c90a442514484de4aa22a7e24611ed08a52434691468977a7704c50
+size 117117
diff --git a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[3]_green6dd58c.png b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[3]_green6dd58c.png
index 698f7d0b..d3d606d7 100644
--- a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[3]_green6dd58c.png
+++ b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[3]_green6dd58c.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:5a29e0eb4429a6078350bae807e0ecee6db99220fc7d6f47cba9500271ac1e43
-size 117311
+oid sha256:f95547b98768b06a18c4919e30eb9a9e50c73d1a8af85432bc217869b8797b3a
+size 117348
diff --git a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[4]_bluewithtext7fcfff.png b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[4]_bluewithtext7fcfff.png
index 9c20ac59..8f6bb1b1 100644
--- a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[4]_bluewithtext7fcfff.png
+++ b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[4]_bluewithtext7fcfff.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d4905993da6c9b272e23862cb164a65630868972af78a291c7c6a37c5575ea06
-size 115465
+oid sha256:0094a15636164147613eaa4352f1f1e9b0fcb04b25e31031cf04260e6cf5bc22
+size 115474
diff --git a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[5]_orangey.png b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[5]_orangey.png
index 6d6b2df6..97ca99f7 100644
--- a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[5]_orangey.png
+++ b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[5]_orangey.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:746b8b100a41d3d3f7766205d31e21383eeda189536f286fed93e2d71c88d7d5
-size 116880
+oid sha256:3d4f5e622aaa0350b7257378e637dd892cff40b97b8edb4d73e6bf9b6900ba88
+size 116933
diff --git a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[6]_uamp.png b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[6]_uamp.png
index 49f2bcff..cc188bb1 100644
--- a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[6]_uamp.png
+++ b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[6]_uamp.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:fdf51b2eb57fd550aa76ca0f3399d75a7e5909a7766b08dcf4f3989bc0433da0
-size 118105
+oid sha256:0b8f6039ff0a486cf7884bc7e07b6667a21969273c134176196c84e207901316
+size 118100
diff --git a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_PodcastPlayerScreenTest_mediaPlayerScreen[0]_seekbuttonincrement(unknown)_seekbuttonincrement(unknown).png b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_PodcastPlayerScreenTest_mediaPlayerScreen[0]_seekbuttonincrement(unknown)_seekbuttonincrement(unknown).png
index b36581ae..c042f02c 100644
--- a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_PodcastPlayerScreenTest_mediaPlayerScreen[0]_seekbuttonincrement(unknown)_seekbuttonincrement(unknown).png
+++ b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_PodcastPlayerScreenTest_mediaPlayerScreen[0]_seekbuttonincrement(unknown)_seekbuttonincrement(unknown).png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:959e685caeb27225b08c567e83ee0c1461588dc1f6be7fa63d68d1e22fbf1d6a
-size 116538
+oid sha256:0f647d4cc3fa5925aa9f37b1d632e2808d784613c4b81be85eba1b81aab6a3c6
+size 116548
diff --git a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_PodcastPlayerScreenTest_mediaPlayerScreen[1]_known(seconds=10)_known(seconds=10).png b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_PodcastPlayerScreenTest_mediaPlayerScreen[1]_known(seconds=10)_known(seconds=10).png
index b525b50e..c28b3c62 100644
--- a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_PodcastPlayerScreenTest_mediaPlayerScreen[1]_known(seconds=10)_known(seconds=10).png
+++ b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_PodcastPlayerScreenTest_mediaPlayerScreen[1]_known(seconds=10)_known(seconds=10).png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:2374d189fe2c985193d1956f99be8c57322c82c9d187f0b5ff7241f2e60b6652
-size 117222
+oid sha256:68df796ae1567dd6f6e37105495a7580e333a507c796059d550975f0f3498c85
+size 117224
diff --git a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_PodcastPlayerScreenTest_mediaPlayerScreen[2]_known(seconds=5)_known(seconds=30).png b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_PodcastPlayerScreenTest_mediaPlayerScreen[2]_known(seconds=5)_known(seconds=30).png
index 3b3b3e50..a1677a72 100644
--- a/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_PodcastPlayerScreenTest_mediaPlayerScreen[2]_known(seconds=5)_known(seconds=30).png
+++ b/media/ui/src/test/snapshots/images/com.google.android.horologist.media.ui_PodcastPlayerScreenTest_mediaPlayerScreen[2]_known(seconds=5)_known(seconds=30).png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:6968b9df915e5049ef3288916b7bf6298d821fc2e851da03caa7c1402f33c966
-size 117349
+oid sha256:20dc849a1012f5829fcbd87964328d366eb7688e91d9e7e1c07564d6ee1b5544
+size 117353
diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[0]_mobvoiticwatchpro5.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[0]_mobvoiticwatchpro5.png
index c2fbb31a..702bc23b 100644
--- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[0]_mobvoiticwatchpro5.png
+++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[0]_mobvoiticwatchpro5.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:bb047ecb9556d714a4a057d1c491f662843150eb4c541472d40a4485d511e4ce
-size 122371
+oid sha256:6eeab5acabefd909adb119769cbd7c762bad2934fa6c8af8f3e9e445ec2fbe23
+size 122109
diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[1]_samsunggalaxywatch5.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[1]_samsunggalaxywatch5.png
index ec50316c..2415584a 100644
--- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[1]_samsunggalaxywatch5.png
+++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[1]_samsunggalaxywatch5.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:1cd99ca301693a34445694175bda4282e22a3201a578281e6fb7e07b3d014d2c
-size 95033
+oid sha256:cb227c0883860eeafa8f440b770879bec427bccf5156d928e5f3fda3ec6bd221
+size 95344
diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[2]_samsunggalaxywatch6large.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[2]_samsunggalaxywatch6large.png
index f7c0e152..18c2fdca 100644
--- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[2]_samsunggalaxywatch6large.png
+++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[2]_samsunggalaxywatch6large.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:ed51151a1fd48eecec65b78b19845228efe831d52639f60a486b95ab6ff63367
-size 129116
+oid sha256:54468f8e4aeb687fe668cf087e53e2bb2ccf2bc594b5a81d49d2ec55610ad8bb
+size 129094
diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[3]_googlepixelwatch.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[3]_googlepixelwatch.png
index db1c8c25..72a089dd 100644
--- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[3]_googlepixelwatch.png
+++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[3]_googlepixelwatch.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:12a828bde18da937fd1072f8a419b76750bc89af6c84a7f759add75b2d698d52
-size 90002
+oid sha256:b740a6c53b77243ba42f83a66cc83c7900f6d8a3e0a690d9cd3d2e9d605e2021
+size 90271
diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[4]_genericsmallround.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[4]_genericsmallround.png
index db1c8c25..72a089dd 100644
--- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[4]_genericsmallround.png
+++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[4]_genericsmallround.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:12a828bde18da937fd1072f8a419b76750bc89af6c84a7f759add75b2d698d52
-size 90002
+oid sha256:b740a6c53b77243ba42f83a66cc83c7900f6d8a3e0a690d9cd3d2e9d605e2021
+size 90271
diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[5]_genericlargeround.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[5]_genericlargeround.png
index d5f7d85d..b1b61d9d 100644
--- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[5]_genericlargeround.png
+++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[5]_genericlargeround.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:c86bfd7547a175bd935cfecfc62b1d802488c2ec41abbca60aa9cf9270438a19
-size 117643
+oid sha256:ced68280e898e7275c124c3be3236c77c36923aa239159c42b8813ec9bed3233
+size 117714
diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[6]_smalldevicebigfonts.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[6]_smalldevicebigfonts.png
index 6db6fb83..032f796f 100644
--- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[6]_smalldevicebigfonts.png
+++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[6]_smalldevicebigfonts.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:d5d9da01739622d20f4430d0adf41c577c99a8cf1c28c2cbc6843b9670c90f52
-size 91256
+oid sha256:500fec0a6d9565c043227f28d4d00e8e84586464bc0d99defe0c2838da686f6a
+size 91163
diff --git a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[7]_largedevicesmallfonts.png b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[7]_largedevicesmallfonts.png
index 724624f1..6550bd3b 100644
--- a/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[7]_largedevicesmallfonts.png
+++ b/sample/src/test/snapshots/images/com.google.android.horologist.screensizes_MediaPlayerTest_screenshot[7]_largedevicesmallfonts.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:db04641cf3b52e421a4f1373e81be8bc5d35564b95e8b5c0aa1c84f31f8f4a02
-size 121942
+oid sha256:8c0569b59a9cf856ee74e46638252975775fe8532905403261804ab4bd01c719
+size 122306