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

  Receiver UI

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

Audio

Audio Receiver UI


  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.


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.


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.

Best practices

  • All text should be legible from a distance of 5 to 10 feet from the display unit.
 

  Receiver app 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 or less and disconnect any connected sender apps. When stopped, the device home screen appears and will help prevent screen burn.

 

  Receiver app 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.

 

  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.

 

  Receiver playback

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.

Audio

User taps screen to display player controls.

 

  Receiver paused

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

  • Stop receiver from running if idle for 20 minutes or less 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

Audio

Audio paused

 

  Receiver buffering

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

Audio

Receiver buffering

 

  Receiver stops cast

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 or less. When stopped, the receiver home screen appears and will help prevent screen burn.

 

 

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