# Mapping components in a chromeless UI on iOS and tvOS

A chromeless UI is made up of native controls and displays that must reflect player state and call the appropriate OptiView Player APIs. This guide maps common components to the APIs and supporting guides used to implement them.

![Chromeless UI Layout](/pr-873/assets/images/chromeless-ui-layout-3642d810cba7de946ee7cb69b7ab238b.png "Chromeless UI Layout")

## Play and pause

Show the appropriate control for the current state, as described in [tracking player states](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/ios/player/track-player-states.md). Call [`play()`](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/v11/api-reference/ios/Classes/THEOplayer#/c:@M@THEOplayerSDK@objc\(cs\)THEOplayer\(im\)play) or [`pause()`](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/v11/api-reference/ios/Classes/THEOplayer#/c:@M@THEOplayerSDK@objc\(cs\)THEOplayer\(im\)pause) when the viewer selects it.

## Mute and volume

Use the Player's [`muted`](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/v11/api-reference/ios/Classes/THEOplayer#/s:13THEOplayerSDK0A0C5mutedSbvp) property for mute controls. Apple platforms delegate volume-level changes to hardware controls, so the application should not provide an independent software volume slider.

## Current time and duration

Use [`requestCurrentTime()`](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/v11/api-reference/ios/Classes/THEOplayer#/s:13THEOplayerSDK0A0C18requestCurrentTime17completionHandleryySdSg_s5Error_pSgtc_tF) and [`setCurrentTime()`](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/v11/api-reference/ios/Classes/THEOplayer#/s:13THEOplayerSDK0A0C14setCurrentTime_17completionHandlerySd_yypSg_s5Error_pSgtcSgtF) for the playback position. Use [`duration`](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/v11/api-reference/ios/Classes/THEOplayer#/s:13THEOplayerSDK0A0C8durationSdSgvp) for duration.

For live streams, `duration` is `Infinity`. Use `currentProgramDateTime` when the interface needs an absolute program time.

## Scrub bar and buffered ranges

Only seek within the ranges exposed by `seekable`. Update the scrubber in response to [`TIME_UPDATE`](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/v11/api-reference/ios/Structs/PlayerEventTypes#/s:13THEOplayerSDK16PlayerEventTypesV11TIME_UPDATEAA0D4TypeCyAA010TimeUpdateD0CGvpZ), and represent downloaded portions using the Player's buffered ranges.

Display a loading state between seeking and seek completion when appropriate.

## Audio, subtitle, and quality selection

Use the platform guides to build track selectors:

* [Detect audio tracks](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/ios/media-tracks/detect-audio-tracks.md)
* [Enable and disable audio tracks](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/ios/media-tracks/enable-disable-audio-tracks.md)
* [Detect text tracks](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/ios/text-tracks/detect-text-tracks.md)
* [Enable and disable text tracks](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/ios/text-tracks/enable-disable-text-tracks.md)
* [Detect video-track qualities](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/ios/media-tracks/detect-video-track-qualities.md)
* [Select a video-track quality](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/ios/media-tracks/select-video-track-quality.md)

## Fullscreen and picture-in-picture

Use `presentationMode` to switch between inline and fullscreen modes. Keep custom controls within the Player view hierarchy so they remain visible during presentation changes. Use `fullscreenOrientationCoupling` when fullscreen should follow device orientation.

You can also implement presentation handling independently when the application needs more control. Picture-in-picture availability and behavior depend on the target Apple platform; see the [picture-in-picture guide](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/ios/miscellaneous/picture-in-picture.md).

## Casting

Use the [Chromecast guide](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/ios/cast/chromecast/introduction.md) and [AirPlay guide](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/ios/cast/airplay/introduction.md) to detect availability and start or stop casting sessions.

## Subtitle and advertisement overlays

You can use the SDK's subtitle rendering or [detect active text-track cues](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/ios/text-tracks/detect-active-text-track-cues.md) and render them yourself.

For advertising controls such as countdowns, skip buttons, and scrub-bar markers, subscribe to the relevant [ad events](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/ios/ads/subscribe-to-ad-events.md) and update your interface from their callbacks.