# Touch-enabled Receiver App The receiver plays content on devices that may or may not have touch control capabilities. The receiver must respond immediately to actions in the sender app as well as through touch controls. Examples of receiver UI feedback: - Playing - Paused - Playback position / seeking - Buffering ### [YesReceiver UI](https://developers.google.com/cast/docs/design_checklist/receiver_touch#receiver-ui-elements) **Required** A For video and audio receivers, build the receiver app to be adaptive so that it can adapt to any screen resolution and aspect ratio. ### Video Video Receiver UI ![](https://developers.google.com/static/cast/images/r/touch-receiver-adaptiveui-video.png) ### Audio Audio Receiver UI ![](https://developers.google.com/static/cast/images/r/touch-receiver-adaptiveui-audio.png) B For video and audio receivers, do not display elements that suggest touch gestures. For example, do not display peeking elements to indicate swipe gestures. C For video and audio receivers, do not display any elements that would suggest touch interactions. D For audio receivers, do not display any control-type elements like progress bars. ![](https://developers.google.com/static/cast/images/r/touch-receiver-donts-audio.png) **Don't:** Display peeking elements, icons which can look like buttons, or control-type elements. E For video receivers, do not display any metadata or control elements on the receiver during playback including while in a paused state, so that it does not conflict with the controls displayed by the system. ![](https://developers.google.com/static/cast/images/r/touch-receiver-donts-video.png) **Don't:** Display metadata and controls F For audio receivers, place all metadata elements above the protected area so that it does not overlap with the controls displayed by the system. ![](https://developers.google.com/static/cast/images/r/touch-receiver-protected-audio.png) **Best practices** - All text should be legible from a distance of 5 to 10 feet from the display unit. ### [YesReceiver app idle](https://developers.google.com/cast/docs/design_checklist/receiver_touch#receiver-ui-idle) An idle screen is displayed on the receiver when the receiver is in the foreground but no content is playing. **Required** A Identify which receiver app is loaded by using the app logo. B Place all elements including any app logos above the protected area so that it does not overlap with any controls displayed by the system. **Best practices** - Identify that the app is loaded by displaying "Ready to cast" text. - Stop the receiver from running if idle for 5 minutes and disconnect any connected sender apps. When stopped, the device home screen appears and will help prevent screen burn. ![](https://developers.google.com/static/cast/images/r/touch-receiver-idle.png) ### [YesReceiver app loading](https://developers.google.com/cast/docs/design_checklist/receiver_touch#receiver-player-loading) When a user connects to a receiver, the receiver app must first load before it can display the app idle state or begin playing content. **Required** A Identify which receiver app is loading by displaying the app logo. B Identify that the receiver app is loading by displaying an animated loading spinner. ![](https://developers.google.com/static/cast/images/r/touch-receiver-loading.gif) ### [YesReceiver content loading](https://developers.google.com/cast/docs/design_checklist/receiver_touch#receiver-content-loading) While content is loading and before playback begins, the receiver should display info to indicate content is loading. **Required** A Identify what content is being loaded by displaying the content title or artwork. B Identify that content is loading by displaying an animated loading spinner. **Best practices** When resuming content, rewind playback 5-10 seconds so the viewer doesn't miss anything during the transition from sender to receiver. ![](https://developers.google.com/static/cast/images/r/touch-receiver-content-loading.gif) ### [YesReceiver playback](https://developers.google.com/cast/docs/design_checklist/receiver_touch#receiver-ui-seek) **Required** A For video receivers, do not display any elements during playback. On screen tap, the system will display the player controls. B For audio receivers, place all metadata elements above the protected area and do not display any control elements. On screen tap, the system will display the player controls. ### Video User taps screen to display player controls. ![](https://developers.google.com/static/cast/images/r/touch-receiver-displaycontrols-video.gif) ### Audio User taps screen to display player controls. ![](https://developers.google.com/static/cast/images/r/touch-receiver-displaycontrols-audio.gif) ### [YesReceiver paused](https://developers.google.com/cast/docs/design_checklist/receiver_touch#receiver-ui-pause) **Required** A For video receivers, do not display any elements while in a paused state. The system will display the player controls with a play button to indicate playback is paused. B For audio receivers, do not display any control elements while in a paused state. The system will display the player controls with a play button to indicate playback is paused. **Best practices** - The receiver app should not continue content playback unless there is an explicit request from the user to begin playback such as resume, or skipping an item on the queue. - Stop receiver from running if idle for 20 minutes and disconnect any connected sender apps. When stopped, the device home screen appears and will help prevent screen burn. - Ensure alignment with future implementation of background sessions. - If applicable, when the receiver is stopped due to idle time, store the paused location so that the user can resume playback from that point at a later time. ### Video Video paused ![](https://developers.google.com/static/cast/images/r/touch-receiver-paused-video.png) ### Audio Audio paused ![](https://developers.google.com/static/cast/images/r/touch-receiver-paused-audio.png) ### [YesReceiver buffering](https://developers.google.com/cast/docs/design_checklist/receiver_touch#receiver-ui-buffer) Buffering on the receiver happens when network latency or other factors cause a delay in playback. **Required** A Do not display any elements even if the buffering continues for several seconds. Users can tap on the screen to display the player controls or swipe to go back. ### Video Receiver buffering ![](https://developers.google.com/static/cast/images/r/touch-receiver-buffering-video.gif) ### Audio Receiver buffering ![](https://developers.google.com/static/cast/images/r/touch-receiver-buffering-audio.gif) ### [YesReceiver stops cast](https://developers.google.com/cast/docs/design_checklist/receiver_touch#receiver-ui-complete) When playback stops or times out, the receiver will display the receiver idle UI. **Required** A Identify which receiver app is loaded or idle by displaying an app logo. B Place all elements including any app logos above the protected area so that it does not overlap with any controls displayed by the system. **Best practices** - Disconnect from the receiver app and stop it from running if idle for 5 minutes. When stopped, the receiver home screen appears and will help prevent screen burn. ![](https://developers.google.com/static/cast/images/r/touch-receiver-idle.png) **Images used in this design guide** are courtesy of the Blender Foundation, shared under copyright or Creative Commons license. - Elephant's Dream: (c) copyright 2006, Blender Foundation / Netherlands Media Art Institute / www.elephantsdream.org - Sintel: (c) copyright Blender Foundation \| www.sintel.org - Tears of Steel: (CC) Blender Foundation \| mango.blender.org - Big Buck Bunny: (c) copyright 2008, Blender Foundation / www.bigbuckbunny.org