Enjoy seamless access to your favorite movies, TV shows, music, and more on the big screen, anytime at home.

## Resources

|      Type      |                             Link                              |  Status   |
|----------------|---------------------------------------------------------------|-----------|
| Design         | [Design source (Figma)](https://goo.gle/jet-stream-figma)     | Available |
| Design         | [Inter (Google Fonts)](https://goo.gle/jet-stream-fonts)      | Available |
| Implementation | [Jetpack Compose (Github)](https://goo.gle/jet-stream-github) | Available |

## Theme

<br />

**Color theme**
A color theme is generated using the Material Design 3 theme generator.  
![Color theme](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/color.webp)

<br />

<br />

**Typography**
JetStream's type scale uses the Inter typeface to create a simple and clear look for TV screens.  
![Typography](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/typography.webp)

<br />

<br />

**Shape**
A subtle radius is applied to the cards and buttons to create friendly and approachable edges.  
![Shape](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/shape.webp)

<br />

<br />

**Focus**
A 3dp outline with an outline color is used in JetStream.  
![Focus](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/focus-theme.webp)

<br />

## Home

<br />

**Home**
Landing page of JetStream app.  
![Home](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/home.webp)

<br />

<br />

**Featured carousel**
A carousel with a card-style layout.  
![Featured carousel](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/home-fc-focused.webp)

<br />

<br />

**Content row**
JetStream utilizes a standard card style with a 2:3 aspect ratio in a 5-column layout.  
![Content row](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/home-trending-focused.webp)

<br />

<br />

**Immersive list**
Highlight special content in the app using the Immersive list component, such as top 10 trending movies.  
![Immersive list](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/home-top-10.webp)

<br />

## Categories

<br />

**Categories**
The Categories page displays genres in a grid format for easy navigation and access.  
![Categories](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/categories.webp)

<br />

<br />

**Category cards**  
![Category cards](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/categories-action.webp)

<br />

<br />

**Category details**
A 2:3 card grid with a header is used to create the Category details page.  
![Category details](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/categories-details.webp)

<br />

## Media

<br />

**Movies**
A standard movies tab with a 16:9 featured cards on the top with content grid on the bottom.  
![Movies](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/movies.webp)

<br />

<br />

**Shows**  
![Shows](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/shows.webp)

<br />

## Library

<br />

**Favorites**
The Favorites tab includes filter chips at the top of the screen to allow for quick content searching.  
![Favorites](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/favorities.webp)

<br />

## Search

<br />

**Search landing**
A search page features a search bar with suggested search queries based on recent searches.  
![Search landing](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/search-default.webp)

<br />

<br />

**Active search**
When the user focuses on the search bar, the keyboard pops up, and the results below dynamically update as the user types.  
![Active search](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/search-active.webp)

<br />

## Entity details

<br />

**Details landing**
The details page presents a cinematic view with a brief plot summary and a prominent call-to-action button to watch the movie.  
![Details landing](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/details.webp)

<br />

<br />

**Cast and crew**
The Cast and Crew section features a row of classic cards with titles and descriptions, each accompanied by a 2:3 image asset.  
![Cast and crew](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/cast-crew.webp)

<br />

<br />

**Ratings**
The ratings section features a custom classic wide card that includes additional information.  
![Ratings](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/ratings.webp)

<br />

## Playback

<br />

**Video player**
A standard video player with best practices.  
![Video player](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/player.webp)

<br />

<br />

**Video player settings**
A close caption popover on the video player.  
![Video player settings](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/player-closed-captions.webp)

<br />

## Settings

<br />

**Account settings**
The accounts page layout features a two-column design with a list component on the left and custom card components on the right, arranged in a grid format.  
![Account settings](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-account.webp)

<br />

<br />

**Delete account dialog**
The dialog box is designed with a contrasting background to make it stand out from the rest of the screen. The two buttons in the dialog are aligned to the left for a clean and organized look.  
![Delete account dialog](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-delete-account.webp)

<br />

<br />

**About**
The About section features a right-hand panel with a scrollable text view.  
![About](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-about.webp)

<br />

<br />

**Subtitle settings**
A list component is used to display various settings under subtitle, and uses actions such as a switch or a label.  
![Subtitle settings](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-subtitles.webp)

<br />

<br />

**History**
The search history uses a layout that displays a list of previously searched queries, along with an option to clear all the search history.  
![History](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-history.webp)

<br />

<br />

**Help**
The Help and Support section uses a custom list component to display various options, including contact information and FAQs.  
![Help](https://developer.android.com/static/design/ui/tv/samples/images/jet-stream/settings-help.webp)

<br />