Update Player screen margins (#2432)

* Update Player Screen margins to match new UX specs. * Update play button size to match new UX specs. * Update PlayerScreen.kt's bottom section margin * Update SetVolumeButton.kt * Update SetVolumeButton.kt * Revert SetVolumeButton.kt update * 🤖 Updates screenshots --------- Co-authored-by: martenxi <[email protected]>
google · Oct 24, 2024 · aa9e060 · aa9e060
1 parent 25f5252
commit aa9e060
Show file tree

Hide file tree

Showing 42 changed files with 89 additions and 87 deletions.
diff --git a/media/sample/src/test/screenshots/UampPlayerScreenshotTest_galaxy_watch_5.png b/media/sample/src/test/screenshots/UampPlayerScreenshotTest_galaxy_watch_5.png
diff --git a/media/sample/src/test/screenshots/UampPlayerScreenshotTest_galaxy_watch_6.png b/media/sample/src/test/screenshots/UampPlayerScreenshotTest_galaxy_watch_6.png
diff --git a/...ple/src/test/screenshots/UampPlayerScreenshotTest_galaxy_watch_6_small_font.png b/...ple/src/test/screenshots/UampPlayerScreenshotTest_galaxy_watch_6_small_font.png
diff --git a/media/sample/src/test/screenshots/UampPlayerScreenshotTest_large_round.png b/media/sample/src/test/screenshots/UampPlayerScreenshotTest_large_round.png
diff --git a/media/sample/src/test/screenshots/UampPlayerScreenshotTest_pixel_watch.png b/media/sample/src/test/screenshots/UampPlayerScreenshotTest_pixel_watch.png
diff --git a/...sample/src/test/screenshots/UampPlayerScreenshotTest_pixel_watch_large_font.png b/...sample/src/test/screenshots/UampPlayerScreenshotTest_pixel_watch_large_font.png
diff --git a/media/sample/src/test/screenshots/UampPlayerScreenshotTest_small_round.png b/media/sample/src/test/screenshots/UampPlayerScreenshotTest_small_round.png
diff --git a/media/sample/src/test/screenshots/UampPlayerScreenshotTest_ticwatch_pro_5.png b/media/sample/src/test/screenshots/UampPlayerScreenshotTest_ticwatch_pro_5.png
diff --git a/...ui/src/main/java/com/google/android/horologist/media/ui/components/ControlButtonLayout.kt b/...ui/src/main/java/com/google/android/horologist/media/ui/components/ControlButtonLayout.kt
@@ -36,7 +36,7 @@ public fun ControlButtonLayout(
     rightButton: @Composable () -> Unit,
     modifier: Modifier = Modifier,
 ) {
-    val middleSize = if (LocalConfiguration.current.isLargeScreen) 80.dp else 60.dp
+    val middleSize = if (LocalConfiguration.current.isLargeScreen) 72.dp else 60.dp
     Row(
         modifier = modifier.height(middleSize),
         verticalAlignment = Alignment.CenterVertically,

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
@@ -149,10 +149,12 @@ public fun PlayerScreen(
             modifier = Modifier.fillMaxSize(),
         ) {
             val (topSection, middleSection, bottomSection) = createRefs()
-            val startGuideline = createGuidelineFromStart(0.0938f)
-            val endGuideline = createGuidelineFromEnd(0.0938f)
-            val topGuideline = createGuidelineFromTop(0.12f)
-            val bottomGuideline = createGuidelineFromBottom(0.063f)
+            val startGuideline = createGuidelineFromStart(0.063f)
+            val endGuideline = createGuidelineFromEnd(0.063f)
+            val topGuideline = createGuidelineFromTop(0.073f)
+            val bottomGuideline = createGuidelineFromBottom(0.0416f)
+            val bottomSectionStartGuideline = createGuidelineFromStart(0.1248f)
+            val bottomSectionEndGuideline = createGuidelineFromEnd(0.1248f)
 
             Box(
                 modifier = Modifier.constrainAs(topSection) {
@@ -187,8 +189,8 @@ public fun PlayerScreen(
                 modifier = Modifier
                     .constrainAs(bottomSection) {
                         top.linkTo(middleSection.bottom)
-                        start.linkTo(startGuideline)
-                        end.linkTo(endGuideline)
+                        start.linkTo(bottomSectionStartGuideline)
+                        end.linkTo(bottomSectionEndGuideline)
                         bottom.linkTo(bottomGuideline)
                         width = Dimension.fillToConstraints
                         height = Dimension.fillToConstraints

diff --git a/media/ui/src/test/screenshots/MediaPlayerFontScaleTest_large_round_large.png b/media/ui/src/test/screenshots/MediaPlayerFontScaleTest_large_round_large.png
diff --git a/media/ui/src/test/screenshots/MediaPlayerFontScaleTest_large_round_small.png b/media/ui/src/test/screenshots/MediaPlayerFontScaleTest_large_round_small.png
diff --git a/media/ui/src/test/screenshots/MediaPlayerFontScaleTest_small_round_large.png b/media/ui/src/test/screenshots/MediaPlayerFontScaleTest_small_round_large.png
diff --git a/media/ui/src/test/screenshots/MediaPlayerFontScaleTest_small_round_small.png b/media/ui/src/test/screenshots/MediaPlayerFontScaleTest_small_round_small.png
diff --git a/media/ui/src/test/screenshots/MediaPlayerFontScaleTest_square_large.png b/media/ui/src/test/screenshots/MediaPlayerFontScaleTest_square_large.png
diff --git a/...oid.horologist.media.ui_MediaPlayerA11yScreenshotTest_mediaPlayerLargeRound.png b/...oid.horologist.media.ui_MediaPlayerA11yScreenshotTest_mediaPlayerLargeRound.png
diff --git a/...oid.horologist.media.ui_MediaPlayerA11yScreenshotTest_mediaPlayerSmallRound.png b/...oid.horologist.media.ui_MediaPlayerA11yScreenshotTest_mediaPlayerSmallRound.png
diff --git a/...android.horologist.media.ui_MediaPlayerA11yScreenshotTest_mediaPlayerSquare.png b/...android.horologist.media.ui_MediaPlayerA11yScreenshotTest_mediaPlayerSquare.png
diff --git a/...droid.horologist.media.ui_MediaPlayerDeviceScreenTest_mediaPlayerLargeRound.png b/...droid.horologist.media.ui_MediaPlayerDeviceScreenTest_mediaPlayerLargeRound.png
diff --git a/...e.android.horologist.media.ui_MediaPlayerDeviceScreenTest_mediaPlayerScreen.png b/...e.android.horologist.media.ui_MediaPlayerDeviceScreenTest_mediaPlayerScreen.png
diff --git a/...droid.horologist.media.ui_MediaPlayerDeviceScreenTest_mediaPlayerSmallRound.png b/...droid.horologist.media.ui_MediaPlayerDeviceScreenTest_mediaPlayerSmallRound.png
diff --git a/...e.android.horologist.media.ui_MediaPlayerDeviceScreenTest_mediaPlayerSquare.png b/...e.android.horologist.media.ui_MediaPlayerDeviceScreenTest_mediaPlayerSquare.png
diff --git a/...ogist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[0]_bluedefaultaecbfa.png b/...ogist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[0]_bluedefaultaecbfa.png
diff --git a/...d.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[1]_blue7fcfff.png b/...d.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[1]_blue7fcfff.png
diff --git a/....horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[2]_lilacd0bcff.png b/....horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[2]_lilacd0bcff.png
diff --git a/....horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[3]_green6dd58c.png b/....horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[3]_green6dd58c.png
diff --git a/...gist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[4]_bluewithtext7fcfff.png b/...gist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[4]_bluewithtext7fcfff.png
diff --git a/...roid.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[5]_orangey.png b/...roid.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[5]_orangey.png
diff --git a/...android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[6]_uamp.png b/...android.horologist.media.ui_MediaPlayerScreenTest_mediaPlayerScreen[6]_uamp.png
diff --git a/...orologist.media.ui_MediaPlayerStatesScreenTest_mediaPlayerScreen[0]_nomedia.png b/...orologist.media.ui_MediaPlayerStatesScreenTest_mediaPlayerScreen[0]_nomedia.png
diff --git a/...gist.media.ui_MediaPlayerStatesScreenTest_mediaPlayerScreen[1]_notconnected.png b/...gist.media.ui_MediaPlayerStatesScreenTest_mediaPlayerScreen[1]_notconnected.png
diff --git a/...iaPlayerScreen[0]_seekbuttonincrement(unknown)_seekbuttonincrement(unknown).png b/...iaPlayerScreen[0]_seekbuttonincrement(unknown)_seekbuttonincrement(unknown).png
diff --git a/...stPlayerScreenTest_mediaPlayerScreen[1]_known(seconds=10)_known(seconds=10).png b/...stPlayerScreenTest_mediaPlayerScreen[1]_known(seconds=10)_known(seconds=10).png
diff --git a/...astPlayerScreenTest_mediaPlayerScreen[2]_known(seconds=5)_known(seconds=30).png b/...astPlayerScreenTest_mediaPlayerScreen[2]_known(seconds=5)_known(seconds=30).png
diff --git a/...oid.horologist.screensizes_MediaPlayerTest_screenshot[0]_mobvoiticwatchpro5.png b/...oid.horologist.screensizes_MediaPlayerTest_screenshot[0]_mobvoiticwatchpro5.png
diff --git a/...id.horologist.screensizes_MediaPlayerTest_screenshot[1]_samsunggalaxywatch5.png b/...id.horologist.screensizes_MediaPlayerTest_screenshot[1]_samsunggalaxywatch5.png
diff --git a/...rologist.screensizes_MediaPlayerTest_screenshot[2]_samsunggalaxywatch6large.png b/...rologist.screensizes_MediaPlayerTest_screenshot[2]_samsunggalaxywatch6large.png
diff --git a/...droid.horologist.screensizes_MediaPlayerTest_screenshot[3]_googlepixelwatch.png b/...droid.horologist.screensizes_MediaPlayerTest_screenshot[3]_googlepixelwatch.png
diff --git a/...roid.horologist.screensizes_MediaPlayerTest_screenshot[4]_genericsmallround.png b/...roid.horologist.screensizes_MediaPlayerTest_screenshot[4]_genericsmallround.png
diff --git a/...roid.horologist.screensizes_MediaPlayerTest_screenshot[5]_genericlargeround.png b/...roid.horologist.screensizes_MediaPlayerTest_screenshot[5]_genericlargeround.png
diff --git a/...id.horologist.screensizes_MediaPlayerTest_screenshot[6]_smalldevicebigfonts.png b/...id.horologist.screensizes_MediaPlayerTest_screenshot[6]_smalldevicebigfonts.png
diff --git a/....horologist.screensizes_MediaPlayerTest_screenshot[7]_largedevicesmallfonts.png b/....horologist.screensizes_MediaPlayerTest_screenshot[7]_largedevicesmallfonts.png