-
Notifications
You must be signed in to change notification settings - Fork 5.1k
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
base: main
Are you sure you want to change the base?
Conversation
Change-Id: I71ffe54e4537015201fd3411144d5f00ac5f1537
Change-Id: Ic3b3b80082c0a34f1be4cdd2f2820a978b874b02
Change-Id: Ie939e3538220769a76941b69c3c2253cb908e3fb
There was a problem hiding this 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 previousandroidx.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
, andAlertDialog
have been replaced with their Material 3 counterparts such asFilledTonalButton
,FilledIconButton
, and the Material 3AlertDialog
. - Media3 Integration: The player screen (
PlayerScreen.kt
) now integratesandroidx.media3-ui-compose
to render the player surface and uses anExoPlayer
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 useScreenScaffold
andTransformingLazyColumn
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 addedandroidx-wear-compose-material3
to version1.5.0-beta01
(lines 27-28). - Updated
horologist
to version0.7.14-beta
(line 40). - Added
media3CommonKtx
version1.7.1
(line 62). - Changed
androidx-wear-compose-material
module tocompose-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).
- Updated
- 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 forhorologist.roboscreenshots
(lines 152).
- Jetcaster/wear/src/main/java/com/example/jetcaster/MainActivity.kt
- Removed import for
installSplashScreen
(line 22). - Removed call to
installSplashScreen()
inonCreate
(line 30).
- Removed import for
- Jetcaster/wear/src/main/java/com/example/jetcaster/WearApp.kt
- Updated import for
rememberPagerState
toandroidx.wear.compose.foundation.pager
(line 28). - Updated imports for
AppScaffold
andScreenScaffold
toandroidx.wear.compose.material3
(lines 29-30). - Updated imports for Horologist navigation and VolumeScreen to use Material 3 packages (lines 53-57).
- Changed
startDestination
inSwipeDismissableNavHost
to usenavRoute
property instead ofplayerDestination()
function (line 67).
- Updated import for
- Jetcaster/wear/src/main/java/com/example/jetcaster/theme/Color.kt
- Deleted the file defining the old Wear Compose Material
Colors
.
- Deleted the file defining the old Wear Compose Material
- 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).
- Added a new file defining the Wear Compose Material 3
- Jetcaster/wear/src/main/java/com/example/jetcaster/theme/Type.kt
- Updated import for
Typography
toandroidx.wear.compose.material3
(line 19). - Replaced old typography definition with mapping to
JetcasterTypography
for Material 3 types (lines 23-36).
- Updated import for
- Jetcaster/wear/src/main/java/com/example/jetcaster/theme/WearAppTheme.kt
- Updated import for
MaterialTheme
toandroidx.wear.compose.material3
(line 20). - Changed
colors
parameter tocolorScheme
inMaterialTheme
(line 25). - Updated comment about shapes (line 28).
- Updated import for
- Jetcaster/wear/src/main/java/com/example/jetcaster/ui/JetcasterNavController.kt
- Updated import for
NavigationScreens
to use the Material 3 Horologist package (line 24).
- Updated import for
- 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 useFilledTonalButton
instead ofChip
(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).
- Added a new file defining a
- 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).
- Added a new file defining a custom
- 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
containingBox
es holding Material 3 buttons (VolumeButtonWithBadge
andPlaybackSpeedButton
) (lines 56-72). - Removed
iconRtlMode
fromPlaybackSpeedButton
(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
withScreenScaffold
andTransformingLazyColumn
(lines 104, 150, 234). - Updated screen structure to use Material 3 components for states (lines 109-134).
- Replaced
Button
withFilledIconButton
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
withScreenScaffold
andTransformingLazyColumn
(lines 82, 155, 197). - Updated screen structure to use Material 3 components for states (lines 87-114).
- Replaced
Chip
withButton
inButtonsContent
(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
andScalingLazyColumn
withScreenScaffold
andTransformingLazyColumn
(lines 84, 145, 242, 248). - Updated screen structure to use Material 3 components for states (lines 89-116).
- Replaced
Chip
withFilledTonalButton
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
withArtworkImageBackground
(line 263). - Replaced
TextMediaDisplay
withMarqueeTextMediaDisplay
for the main display (line 176). - Added
rememberPlayer
composable for ExoPlayer management (lines 275-285). - Integrated
PlayerSurface
frommedia3-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
withScreenScaffold
andTransformingLazyColumn
(lines 95, 127, 157). - Updated screen structure to use Material 3 components for states (lines 100-112).
- Replaced
Button
withFilledIconButton
inButtonsContent
(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
-
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. ↩
There was a problem hiding this 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
: ThebuttonPlaceholderState
inPlaceholderButton
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 inPlaceholderButton
: TheonClick
lambda is passed incorrectly as{ onClick }
instead ofonClick
, meaning the button click will not trigger the intended action. This is a high-severity issue. - Hardcoded Audio Output in
SettingsButtons
: TheVolumeButtonWithBadge
inSettingsButtons
uses a hardcodedAudioOutput
, which will prevent it from displaying the actual connected audio device. This is a high-severity issue. - Multiple Modifier Applications in
PlaceholderButton
: The samemodifier
parameter is applied multiple times within thelabel
,secondaryLabel
, andicon
lambdas ofPlaceholderButton
. 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
: UsingButtonGroup
withweight
modifiers on the inner buttons inEpisodeScreen
andQueueScreen
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.
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/components/PlaceholderButton.kt
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/components/PlaceholderButton.kt
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/components/SettingsButtons.kt
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/components/PlaceholderButton.kt
Outdated
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/components/PlaceholderButton.kt
Outdated
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/components/PlaceholderButton.kt
Outdated
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/episode/EpisodeScreen.kt
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/episode/EpisodeScreen.kt
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/queue/QueueScreen.kt
Outdated
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/components/MediaContent.kt
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/components/MediaContent.kt
Outdated
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/components/PlaceholderButton.kt
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/components/PlaceholderButton.kt
Outdated
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/components/PlaceholderButton.kt
Outdated
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/podcasts/PodcastsScreen.kt
Outdated
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/queue/QueueScreen.kt
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/queue/QueueScreen.kt
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/queue/QueueScreen.kt
Outdated
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/queue/QueueScreen.kt
Outdated
Show resolved
Hide resolved
7be3bef
to
99eeee1
Compare
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/components/MediaContent.kt
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/components/MediaContent.kt
Outdated
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/components/MediaContent.kt
Outdated
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/components/PlaceholderButton.kt
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/podcast/PodcastDetailsScreen.kt
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/podcast/PodcastDetailsScreen.kt
Outdated
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/podcasts/PodcastsScreen.kt
Outdated
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/podcasts/PodcastsScreen.kt
Outdated
Show resolved
Hide resolved
Jetcaster/wear/src/main/java/com/example/jetcaster/ui/queue/QueueScreen.kt
Show resolved
Hide resolved
@MagicalMeghan friendly ping |
Hello - just got back from being sick will respond in the next few days |
Update Jetcaster Wear module to Material3