From 3a882adefa08e4f32331f39255a5706c0d06ffba Mon Sep 17 00:00:00 2001 From: Chiara Chiappini Date: Thu, 25 Apr 2024 21:45:06 +0100 Subject: [PATCH 1/6] Adds Wear specific section to README --- Jetcaster/README.md | 41 +++++++++++++++++++++++++++++++++++++++-- 1 file changed, 39 insertions(+), 2 deletions(-) diff --git a/Jetcaster/README.md b/Jetcaster/README.md index 0f8cef1423..b1b8ce41f6 100644 --- a/Jetcaster/README.md +++ b/Jetcaster/README.md @@ -14,8 +14,9 @@ project from Android Studio following the steps ## Screenshots ![readme_cover](https://github.com/android/compose-samples/assets/10263978/a58ab950-71aa-48e0-8bc7-85443a1b4f6b) +## Phone app -## Features +### Features This sample has 3 components: the home screen, the podcast details screen, and the player screen @@ -38,7 +39,7 @@ Some other notable things which are implemented: * Images are all provided from each podcast's RSS feed, and loaded using [Coil][coil] library. -## Architecture +### Architecture The app is built in a Redux-style, where each UI 'screen' has its own [ViewModel][viewmodel], which exposes a single [StateFlow][stateflow] containing the entire view state. Each [ViewModel][viewmodel] is responsible for subscribing to any data streams required for the view, as well as exposing functions which allow the UI to send events. Using the example of the home screen in the [`com.example.jetcaster.ui.home`](app/src/main/java/com/example/jetcaster/ui/home) package: @@ -58,6 +59,36 @@ This pattern is used across the different screens: - __Discover:__ [`com.example.jetcaster.ui.home.discover`](app/src/main/java/com/example/jetcaster/ui/home/discover) - __Podcast Category:__ [`com.example.jetcaster.ui.category`](app/src/main/java/com/example/jetcaster/ui/home/category) +## Wear + +This sample showcases a 2 screens pager which allows to navigate between the Player and the Library. +From the library, users can access Latest episodes from followed podcasts, followed podcasts and queue. +From the podcast, users can access to episode details and add the episode to the queue. +From the Player screen, users can access a volume screen and a playback speed screen. + +The sample implements [Wear UX best practices for media apps][mediappsbestpractices], such as: +- Support rotating side button (RSB) and Bezel for scrollable screens +- Display scrollbar on scrolling +- Display the time on top of the screens + +The sample is built using the [Media Toolkit][[mediatoolkit]] which is an open source +project part of [Horologist][horologist] to ease the development of media apps on Wear OS built on top of Compose for Wear. +It provides ready to use UI screens, such the [EntityScreen][entityscreen] +that is used in this sample to implement many screens such as Podcast, LatestEpisodes and Queue. [Horologist][horologist] also provides +a VolumeScreen that can be reused by media apps to conveniently control volume either by interacting with the rotating side button(RSB)/Bezel or by +using the provided buttons. +For simplicity, this sample uses a mock Player which is reused across form factors, +if you want to see an advanced Media sample built on Compose that uses Exoplayer and plays media content, +refer to the [Media Toolkit sample][mediatoolkitsample]. + +The [official media app guidance for Wear OS][ [wearmediaguidance]] +advices to download content on the watch before listening to preserve power, this feature will be added to this sample in future iterations. You can +refer to the [Media Toolkit sample][mediatoolkitsample] to learn how to implement the media download feature. + +### Architecture +The architecture of the Wear app is similar to the phone app architecture: each UI 'screen' has its +own [ViewModel][viewmodel] which exposes a `StateFlow` for the UI to observe. + ## Data ### Podcast data @@ -114,3 +145,9 @@ limitations under the License. [jdk8desugar]: https://developer.android.com/studio/write/java8-support#library-desugaring [coil]: https://coil-kt.github.io/coil/ [wsc]: https://developer.android.com/guide/topics/large-screens/support-different-screen-sizes#window_size_classes + [mediatoolkit]: https://google.github.io/horologist/media-toolkit/ + [mediatoolkitsample]: https://google.github.io/horologist/media-sample/ + [wearmediaguidance]: https://developer.android.com/media/implement/surfaces/wear-os#play-downloaded-content + [horologist]: https://google.github.io/horologist/ + [entityscreen]: https://github.com/google/horologist/blob/main/media/ui/src/main/java/com/google/android/horologist/media/ui/screens/entity/EntityScreen.kt + [mediappsbestpractices]: https://developer.android.com/design/ui/wear/guides/foundations/media-apps \ No newline at end of file From 40a355f3fb8b4b6c3eee928322c860f0373dfe41 Mon Sep 17 00:00:00 2001 From: Chiara Chiappini Date: Fri, 26 Apr 2024 12:04:08 +0100 Subject: [PATCH 2/6] Update Jetcaster/README.md Co-authored-by: Chris Arriola --- Jetcaster/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Jetcaster/README.md b/Jetcaster/README.md index b1b8ce41f6..627e3a07af 100644 --- a/Jetcaster/README.md +++ b/Jetcaster/README.md @@ -61,7 +61,7 @@ This pattern is used across the different screens: ## Wear -This sample showcases a 2 screens pager which allows to navigate between the Player and the Library. +This sample showcases a 2-screen pager which allows navigation between the Player and the Library. From the library, users can access Latest episodes from followed podcasts, followed podcasts and queue. From the podcast, users can access to episode details and add the episode to the queue. From the Player screen, users can access a volume screen and a playback speed screen. From de31e131badbef5b67f4bb910663d74bdf9d22fb Mon Sep 17 00:00:00 2001 From: Chiara Chiappini Date: Fri, 26 Apr 2024 12:04:21 +0100 Subject: [PATCH 3/6] Update Jetcaster/README.md Co-authored-by: Chris Arriola --- Jetcaster/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Jetcaster/README.md b/Jetcaster/README.md index 627e3a07af..f9d041f353 100644 --- a/Jetcaster/README.md +++ b/Jetcaster/README.md @@ -62,7 +62,7 @@ This pattern is used across the different screens: ## Wear This sample showcases a 2-screen pager which allows navigation between the Player and the Library. -From the library, users can access Latest episodes from followed podcasts, followed podcasts and queue. +From the Library, users can access latest episodes from subscribed podcasts, and queue. From the podcast, users can access to episode details and add the episode to the queue. From the Player screen, users can access a volume screen and a playback speed screen. From c3b367fb86591787c1bf4ffc8572010ec79323af Mon Sep 17 00:00:00 2001 From: Chiara Chiappini Date: Fri, 26 Apr 2024 12:04:29 +0100 Subject: [PATCH 4/6] Update Jetcaster/README.md Co-authored-by: Chris Arriola --- Jetcaster/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Jetcaster/README.md b/Jetcaster/README.md index f9d041f353..00aaa3904d 100644 --- a/Jetcaster/README.md +++ b/Jetcaster/README.md @@ -63,7 +63,7 @@ This pattern is used across the different screens: This sample showcases a 2-screen pager which allows navigation between the Player and the Library. From the Library, users can access latest episodes from subscribed podcasts, and queue. -From the podcast, users can access to episode details and add the episode to the queue. +From the podcast, users can access episode details and add episodes to the queue. From the Player screen, users can access a volume screen and a playback speed screen. The sample implements [Wear UX best practices for media apps][mediappsbestpractices], such as: From 420d2ef7cb47ffd7d41ec0f9908398d4910700a2 Mon Sep 17 00:00:00 2001 From: Chiara Chiappini Date: Fri, 26 Apr 2024 12:04:37 +0100 Subject: [PATCH 5/6] Update Jetcaster/README.md Co-authored-by: Chris Arriola --- Jetcaster/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Jetcaster/README.md b/Jetcaster/README.md index 00aaa3904d..6911db3f1e 100644 --- a/Jetcaster/README.md +++ b/Jetcaster/README.md @@ -72,7 +72,7 @@ The sample implements [Wear UX best practices for media apps][mediappsbestpracti - Display the time on top of the screens The sample is built using the [Media Toolkit][[mediatoolkit]] which is an open source -project part of [Horologist][horologist] to ease the development of media apps on Wear OS built on top of Compose for Wear. +project part of [Horologist][horologist] to ease the development of media apps on Wear OS built on top of Compose for Wear. It provides ready to use UI screens, such the [EntityScreen][entityscreen] that is used in this sample to implement many screens such as Podcast, LatestEpisodes and Queue. [Horologist][horologist] also provides a VolumeScreen that can be reused by media apps to conveniently control volume either by interacting with the rotating side button(RSB)/Bezel or by From 4cbf2165dd394d830e5a838407d53a849cb44a36 Mon Sep 17 00:00:00 2001 From: Chiara Chiappini Date: Fri, 26 Apr 2024 12:04:42 +0100 Subject: [PATCH 6/6] Update Jetcaster/README.md Co-authored-by: Chris Arriola --- Jetcaster/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/Jetcaster/README.md b/Jetcaster/README.md index 6911db3f1e..ee0073e81f 100644 --- a/Jetcaster/README.md +++ b/Jetcaster/README.md @@ -87,7 +87,7 @@ refer to the [Media Toolkit sample][mediatoolkitsample] to learn how to implemen ### Architecture The architecture of the Wear app is similar to the phone app architecture: each UI 'screen' has its -own [ViewModel][viewmodel] which exposes a `StateFlow` for the UI to observe. +own [ViewModel][viewmodel] which exposes a `StateFlow` for the UI to observe. ## Data