Skip to content

Update Jetcaster Wear module to Material3 #1568

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: main
Choose a base branch
from
Open

Conversation

kul3r4
Copy link
Contributor

@kul3r4 kul3r4 commented May 19, 2025

Update Jetcaster Wear module to Material3

kul3r4 added 3 commits May 19, 2025 16:12
Change-Id: I71ffe54e4537015201fd3411144d5f00ac5f1537
Change-Id: Ic3b3b80082c0a34f1be4cdd2f2820a978b874b02
Change-Id: Ie939e3538220769a76941b69c3c2253cb908e3fb
@kul3r4 kul3r4 requested a review from a team as a code owner May 19, 2025 16:29
Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Hello @kul3r4, I'm Gemini Code Assist1! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

Summary of Changes

Hello! gemini-code-assist here, providing a summary of this pull request.

This PR focuses on migrating the Jetcaster Wear OS module from the older Wear Compose Material library to the new Wear Compose Material 3 library. This is a significant update that involves changing dependencies, updating UI components to their Material 3 equivalents, and leveraging new features and components from the updated libraries, including Horologist Material 3 components and Media3 integration for the player screen.

Highlights

  • Material 3 Migration: The core change is the adoption of the new androidx.wear.compose.material3 library, replacing the previous androidx.wear.compose.material. This impacts theme definitions (ColorScheme, Typography) and component usage throughout the Wear module.
  • Horologist Updates: The Horologist library dependency has been updated to 0.7.14-beta, and the implementation now uses the Material 3 specific Horologist components (horologist-audio-ui-material3, horologist-media-ui-material3, etc.) and utilities (toAudioOutputUi, Material 3 navigation components).
  • Component Replacement: Various UI components from the old Material library like Chip, Button, and AlertDialog have been replaced with their Material 3 counterparts such as FilledTonalButton, FilledIconButton, and the Material 3 AlertDialog.
  • Media3 Integration: The player screen (PlayerScreen.kt) now integrates androidx.media3-ui-compose to render the player surface and uses an ExoPlayer instance managed within the composable lifecycle. This replaces the previous background artwork handling.
  • Dependency Updates: The libs.versions.toml file has been updated to include the new Wear Compose Material 3 and Horologist Material 3 dependencies, as well as adding Media3 related libraries.
  • UI Structure and Previews: Screen implementations (EpisodeScreen, LatestEpisodesScreen, LibraryScreen, PodcastsScreen, QueueScreen) have been refactored to use ScreenScaffold and TransformingLazyColumn from the new libraries, and Wear Previews have been added or updated for several screens.

Changelog

Click here to see the changelog
  • Jetcaster/gradle/libs.versions.toml
    • Updated androidx-wear-compose and added androidx-wear-compose-material3 to version 1.5.0-beta01 (lines 27-28).
    • Updated horologist to version 0.7.14-beta (line 40).
    • Added media3CommonKtx version 1.7.1 (line 62).
    • Changed androidx-wear-compose-material module to compose-material3 and updated its version reference (line 127).
    • Added new Horologist Material 3 audio and media UI dependencies (lines 142-143, 151-152).
    • Added androidx-media3-common-ktx library definition (line 171).
  • Jetcaster/wear/build.gradle
    • Removed blank line (line 76).
    • Added androidx.compose.material3 dependency (line 93).
    • Added Media3 dependencies (exoplayer, ui-compose, session, common-ktx) (lines 102-105).
    • Removed old Horologist dependencies (composables, compose-material) (lines 107, 109).
    • Added new Horologist Material 3 dependencies (media-uimaterial3, media-ui-model, audio-uimaterial3, audio-ui-model) (lines 112-116).
    • Removed exclude rule for horologist.roboscreenshots (lines 152).
  • Jetcaster/wear/src/main/java/com/example/jetcaster/MainActivity.kt
    • Removed import for installSplashScreen (line 22).
    • Removed call to installSplashScreen() in onCreate (line 30).
  • Jetcaster/wear/src/main/java/com/example/jetcaster/WearApp.kt
    • Updated import for rememberPagerState to androidx.wear.compose.foundation.pager (line 28).
    • Updated imports for AppScaffold and ScreenScaffold to androidx.wear.compose.material3 (lines 29-30).
    • Updated imports for Horologist navigation and VolumeScreen to use Material 3 packages (lines 53-57).
    • Changed startDestination in SwipeDismissableNavHost to use navRoute property instead of playerDestination() function (line 67).
  • Jetcaster/wear/src/main/java/com/example/jetcaster/theme/Color.kt
    • Deleted the file defining the old Wear Compose Material Colors.
  • Jetcaster/wear/src/main/java/com/example/jetcaster/theme/ColorScheme.kt
    • Added a new file defining the Wear Compose Material 3 ColorScheme (lines 1-72).
  • Jetcaster/wear/src/main/java/com/example/jetcaster/theme/Type.kt
    • Updated import for Typography to androidx.wear.compose.material3 (line 19).
    • Replaced old typography definition with mapping to JetcasterTypography for Material 3 types (lines 23-36).
  • Jetcaster/wear/src/main/java/com/example/jetcaster/theme/WearAppTheme.kt
    • Updated import for MaterialTheme to androidx.wear.compose.material3 (line 20).
    • Changed colors parameter to colorScheme in MaterialTheme (line 25).
    • Updated comment about shapes (line 28).
  • Jetcaster/wear/src/main/java/com/example/jetcaster/ui/JetcasterNavController.kt
    • Updated import for NavigationScreens to use the Material 3 Horologist package (line 24).
  • Jetcaster/wear/src/main/java/com/example/jetcaster/ui/components/MediaContent.kt
    • Added various imports for layout, shapes, text, previews, and Coil (lines 19-41).
    • Changed MediaContent to use FilledTonalButton instead of Chip (line 73).
    • Updated icon handling to use AsyncImage and apply clipping (lines 90-101).
    • Added Wear Preview composables (lines 108-131).
    • Changed MediumDateFormatter visibility (line 134).
  • Jetcaster/wear/src/main/java/com/example/jetcaster/ui/components/PlaceholderButton.kt
    • Added a new file defining a PlaceholderButton composable using Material 3 components (lines 1-107).
  • Jetcaster/wear/src/main/java/com/example/jetcaster/ui/components/PlayIconShape.kt
    • Added a new file defining a custom IconButtonShapes for the play button (lines 1-27).
  • Jetcaster/wear/src/main/java/com/example/jetcaster/ui/components/SettingsButtons.kt
    • Added imports for layout components (lines 20-22).
    • Updated imports for Horologist components to use Material 3 packages (lines 34-36).
    • Replaced old buttons layout with a Row containing Boxes holding Material 3 buttons (VolumeButtonWithBadge and PlaybackSpeedButton) (lines 56-72).
    • Removed iconRtlMode from PlaybackSpeedButton (line 94).
  • Jetcaster/wear/src/main/java/com/example/jetcaster/ui/episode/EpisodeScreen.kt
    • Added various imports for interaction, layout, padding, text style, previews, and Material 3 components (lines 19-58).
    • Updated imports for Horologist components to use Material 3 packages and replace old components (lines 42-47, 53-68).
    • Replaced EntityScreen with ScreenScaffold and TransformingLazyColumn (lines 104, 150, 234).
    • Updated screen structure to use Material 3 components for states (lines 109-134).
    • Replaced Button with FilledIconButton in button content composables (lines 197, 215, 263, 277).
    • Used the new PlayIconShape (lines 207, 269).
    • Adjusted button layout within a ButtonGroup (lines 195, 259).
    • Updated typography styles (lines 303, 325, 336).
    • Added Wear Preview composables (lines 345-397).
  • Jetcaster/wear/src/main/java/com/example/jetcaster/ui/latest_episodes/LatestEpisodesScreen.kt
    • Added various imports for layout, padding, painter, text style, previews, and Material 3 components (lines 19-41).
    • Updated imports for Horologist components to use Material 3 packages and replace old components (lines 30-33, 34-39, 47-48).
    • Replaced EntityScreen with ScreenScaffold and TransformingLazyColumn (lines 82, 155, 197).
    • Updated screen structure to use Material 3 components for states (lines 87-114).
    • Replaced Chip with Button in ButtonsContent (line 127).
    • Updated icon handling to use painterResource (line 135).
    • Added Wear Preview composables (lines 219-253).
  • Jetcaster/wear/src/main/java/com/example/jetcaster/ui/library/LibraryScreen.kt
    • Added various imports for background, layout, padding, shape, alignment, draw, painter, layout, previews, and Material 3 components (lines 19-58).
    • Updated imports for Horologist components to use Material 3 packages and replace old components (lines 41-44, 45-55, 65-66).
    • Replaced EntityScreen and ScalingLazyColumn with ScreenScaffold and TransformingLazyColumn (lines 84, 145, 242, 248).
    • Updated screen structure to use Material 3 components for states (lines 89-116).
    • Replaced Chip with FilledTonalButton for navigation items (lines 258, 275, 297).
    • Introduced IconWithBackground composable (lines 312-329).
    • Updated typography style (line 338).
    • Added Wear Preview composables (lines 206-230, 343-361).
  • Jetcaster/wear/src/main/java/com/example/jetcaster/ui/player/PlayerScreen.kt
    • Added various imports for context, disposable effect, remember, focus requester, layout, content scale, platform, media3 components, and Horologist Material 3 components (lines 35-78).
    • Updated imports for Horologist components to use Material 3 packages and replace old components (lines 72-77).
    • Changed focus handling (lines 110, 254).
    • Replaced ArtworkColorBackground with ArtworkImageBackground (line 263).
    • Replaced TextMediaDisplay with MarqueeTextMediaDisplay for the main display (line 176).
    • Added rememberPlayer composable for ExoPlayer management (lines 275-285).
    • Integrated PlayerSurface from media3-ui-compose (lines 166-172).
    • Updated playback speed logic to interact with ExoPlayer (lines 230-249).
  • Jetcaster/wear/src/main/java/com/example/jetcaster/ui/queue/QueueScreen.kt
    • Added various imports for interaction, layout, padding, remember, painter, previews, and Material 3 components (lines 19-49).
    • Updated imports for Horologist components to use Material 3 packages and replace old components (lines 36-39, 40-48, 56-57).
    • Replaced EntityScreen with ScreenScaffold and TransformingLazyColumn (lines 95, 127, 157).
    • Updated screen structure to use Material 3 components for states (lines 100-112).
    • Replaced Button with FilledIconButton in ButtonsContent (lines 215, 232).
    • Used the new PlayIconShape (line 225).
    • Adjusted button layout within a ButtonGroup (line 214).
    • Updated AlertDialog usage to Material 3 (lines 187-193).
    • Added Wear Preview composables (lines 254-282).
  • Jetcaster/wear/src/main/res/drawable/delete.xml
    • Added a new drawable for a delete icon (lines 1-19).
  • Jetcaster/wear/src/main/res/drawable/music.xml
    • Added a new drawable for a music note icon (lines 1-19).
  • Jetcaster/wear/src/main/res/drawable/play.xml
    • Added a new drawable for a play icon (lines 1-19).
Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

Feature Command Description
Code Review /gemini review Performs a code review for the current pull request in its current state.
Pull Request Summary /gemini summary Provides a summary of the current pull request in its current state.
Comment @gemini-code-assist Responds in comments when explicitly tagged, both in issue comments and review comments.
Help /gemini help Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist is currently in preview and may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments to provide feedback.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.


Wear OS gets a fresh coat,
Material Three sets the boat.
New buttons gleam,
A design dream,
On a wrist, the code is afloat.

Footnotes

  1. Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution.

Copy link

@gemini-code-assist gemini-code-assist bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Code Review

This pull request successfully updates the Jetcaster Wear module to use Material3 components and the corresponding Horologist Material3 libraries. This is a significant and necessary step for aligning with the latest design guidelines and components for Wear OS. The changes involve updating dependencies, replacing old Material and Horologist components with their Material3 counterparts, and refactoring screens to use the new components and patterns (like TransformingLazyColumn and ScreenScaffold).

The overall structure of the refactored screens (EpisodeScreen, LatestEpisodesScreen, LibraryScreen, PodcastsScreen, QueueScreen) seems reasonable, moving away from the generic EntityScreen towards more custom layouts using TransformingLazyColumn and Material3 components like ListHeader and FilledTonalButton. The introduction of new helper composables like PlaceholderButton and PlayIconShape is also a good approach for encapsulating specific UI elements.

However, during the review, I found a few issues, primarily related to the implementation of the new PlaceholderButton and the SettingsButtons composable, which need to be addressed before merging. I've added specific comments for these issues.

Summary of Findings

  • Incorrect Placeholder State in PlaceholderButton: The buttonPlaceholderState in PlaceholderButton is incorrectly initialized and will always be false, preventing the icon placeholder and shimmer effect from showing correctly. This is a high-severity issue.
  • Incorrect onClick Passing in PlaceholderButton: The onClick lambda is passed incorrectly as { onClick } instead of onClick, meaning the button click will not trigger the intended action. This is a high-severity issue.
  • Hardcoded Audio Output in SettingsButtons: The VolumeButtonWithBadge in SettingsButtons uses a hardcoded AudioOutput, which will prevent it from displaying the actual connected audio device. This is a high-severity issue.
  • Multiple Modifier Applications in PlaceholderButton: The same modifier parameter is applied multiple times within the label, secondaryLabel, and icon lambdas of PlaceholderButton. Modifiers should be chained and applied once.
  • Playback Speed Logic in UI Layer: The logic for cycling playback speeds and interacting directly with the ExoPlayer is located in the PlayerScreen composable instead of the ViewModel, which violates separation of concerns.
  • Layout/Weighting with ButtonGroup: Using ButtonGroup with weight modifiers on the inner buttons in EpisodeScreen and QueueScreen might lead to unexpected layout behavior. Consider alternative layout approaches if necessary.
  • Minor Style/Cleanup: Minor issues like redundant visibility modifiers (public val) were noted but not commented on directly due to review settings.

Merge Readiness

This pull request represents a significant step towards migrating the Wear module to Material3. However, the identified high-severity issues in PlaceholderButton.kt and SettingsButtons.kt are critical bugs that need to be fixed before this code can be merged. There are also several medium-severity issues related to modifier usage, logic placement, and potential layout concerns that should ideally be addressed for better code quality and maintainability. I am unable to approve this pull request, and I recommend that the author addresses the high-severity issues at a minimum before seeking further review.

@kul3r4 kul3r4 force-pushed the main branch 2 times, most recently from 7be3bef to 99eeee1 Compare May 20, 2025 15:24
@kul3r4 kul3r4 requested review from MagicalMeghan and removed request for simona-anomis May 20, 2025 19:10
@kul3r4
Copy link
Contributor Author

kul3r4 commented Jun 2, 2025

@MagicalMeghan friendly ping

@MagicalMeghan
Copy link
Contributor

@MagicalMeghan friendly ping

Hello - just got back from being sick will respond in the next few days

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants