# Mapping components in a chromeless UI A chromeless UI is made up of controls and displays that must reflect player state and call the appropriate OptiView Player APIs. This guide maps common interface components to the properties, methods, events, and supporting guides needed to implement them. A component can provide context, perform an action, or do both. For example, a play button performs an action, while a current-time display provides context. This guide covers: 1. Play and pause 2. Volume mute and level 3. Current time and duration 4. Scrubbing and buffered ranges 5. Live playback 6. Audio, subtitle, and quality selection 7. Fullscreen and picture-in-picture 8. Chromecast and AirPlay 9. Subtitle and advertisement overlays ![Chromeless UI Layout](/pr-873/assets/images/chromeless-ui-layout-3642d810cba7de946ee7cb69b7ab238b.png "Chromeless UI Layout") The [Player API interfaces and events](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/analytics/custom-analytics-integration.md) provide the underlying state and actions used by these components. ![THEOplayer API Interfaces and Events](/pr-873/assets/images/analytics-events-185d6ab52b556af08d8300b545ae5876.png "THEOplayer API Interfaces and Events") ## Play button Show the play button while the player is paused, as described in [tracking player states](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/player/track-player-states.md). When a viewer selects it, call [`player.play()`](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/v11/api-reference/web/classes/ChromelessPlayer#play). ## Pause button Show the pause button while the player is playing, as described in [tracking player states](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/player/track-player-states.md). When a viewer selects it, call [`player.pause()`](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/v11/api-reference/web/classes/ChromelessPlayer#pause). ## Volume mute button Read and update the [`muted`](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/v11/api-reference/web/classes/ChromelessPlayer#muted) property. Reflect the current value in the button and toggle it with `player.muted = !player.muted`. ## Volume control Read and update the [`volume`](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/v11/api-reference/web/classes/ChromelessPlayer#volume) property. Reflect the current level and muted state in the control. ## Current-time display Read [`currentTime`](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/v11/api-reference/web/classes/ChromelessPlayer#currentTime) to display the relative playback position in seconds. For live streams, you may prefer `currentProgramDateTime`, which provides an absolute value such as `"2022-04-01T13:37:42.666Z"`. This is also useful when implementing an electronic program guide. ## Duration display Read [`duration`](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/v11/api-reference/web/classes/ChromelessPlayer#duration). It returns the duration in seconds for video-on-demand streams and `Infinity` for live streams. Calculate the remaining duration by subtracting `currentTime` from `duration` for finite streams. ## Scrub bar Seek by setting `currentTime`. For live streams, you can use `currentProgramDateTime` to seek to absolute playback positions. Only seek within the ranges exposed by [`seekable`](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/v11/api-reference/web/classes/ChromelessPlayer#seekable). On Web, valid values remain between `player.seekable.start(0)` and `player.seekable.end(player.seekable.length - 1)`. Subscribe to [`timeupdate`](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/v11/api-reference/web/interfaces/PlayerEventMap#timeupdate) to update the scrubber position during playback. The event is dispatched approximately every 200 milliseconds. The player dispatches `seeking` when a seek starts and `seeked` when it completes. Consider showing a loading state between these events. ### Buffered ranges Use the `progress` event and [`buffered`](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/v11/api-reference/web/classes/ChromelessPlayer#buffered) ranges to indicate which portions of the stream are already available for immediate playback. ## Live button A stream is live when `duration` is `Infinity`. To move to the live edge, set `currentTime` to `player.seekable.end(player.seekable.length - 1)`. ## Audio selection Use these guides to implement an audio-track selector: * [Detect audio tracks](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/media-tracks/detect-audio-tracks.md) * [Enable and disable audio tracks](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/media-tracks/enable-disable-audio-tracks.md) * [Detect audio-track changes](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/media-tracks/detect-audio-track-changes.md) ## Subtitle selection Use these guides to implement a subtitle and closed-caption selector: * [Detect text tracks](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/text-tracks/detect-text-tracks.md) * [Enable and disable text tracks](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/text-tracks/enable-disable-text-tracks.md) * [Detect text-track changes](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/text-tracks/detect-text-track-changes.md) ## Video quality selection Use these guides to implement a quality selector: * [Detect video-track qualities](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/media-tracks/detect-video-track-qualities.md) * [Select a video-track quality](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/media-tracks/select-video-track-quality.md) * [Detect video-track quality changes](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/media-tracks/detect-video-track-quality-changes.md) ## Fullscreen button The [`Presentation API`](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/v11/api-reference/web/interfaces/Presentation) is not available for switching a chromeless player between fullscreen, inline, and picture-in-picture modes. Implement fullscreen behavior with the browser [Fullscreen API](https://developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API). For iOS browsers, you can use [`webkitEnterFullscreen()`](https://developer.apple.com/documentation/webkitjs/htmlvideoelement/1633500-webkitenterfullscreen) or resize the player container to fill the viewport. ## Picture-in-picture button Implement picture-in-picture UI and behavior independently of the Player SDK. The [Player Picture-in-Picture API](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/miscellaneous/picture-in-picture.md) is not available for chromeless players. On Web, you can locate the active video element with `player.element.querySelectorAll('video[src]')[0]`. Related resources: * [Picture-in-Picture for the Web](https://developers.google.com/web/updates/2017/09/picture-in-picture) * [Safari picture-in-picture controls](https://developer.apple.com/documentation/webkitjs/adding_picture_in_picture_to_your_safari_media_controls) * [Android picture-in-picture](https://developer.android.com/guide/topics/ui/picture-in-picture) * [Apple platform picture-in-picture](https://developer.apple.com/documentation/avkit/adopting_picture_in_picture_in_a_custom_player) ## Chromecast button Use the [Chromecast guide](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/cast/chromecast/introduction.md) to detect availability and start or stop a casting session. ## AirPlay button Use the [AirPlay guide](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/cast/airplay/introduction.md) to detect availability and start or stop an AirPlay session. ## Subtitle cues You can retain the Player SDK's default subtitle and closed-caption rendering in a chromeless UI. Depending on your design, additional styling may be required: ```css .theoplayer-texttracks * { font-size: 1em !important; } ``` For complete rendering control, [detect active text-track cues](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/text-tracks/detect-active-text-track-cues.md), then insert and remove each cue in your own interface. ## Advertisement metadata During advertisements, your UI may need to display a countdown, skip button, or ad markers on the scrub bar. When using [Google IMA](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/ads/google-ima.md), the integration may provide some interface elements. When using the Player SDK's [default client-side ad integration](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/ads/set-up-vast-and-vmap.md), subscribe to the relevant [ad events](https://docs-preview.optiview.dolby.com/pr-873/theoplayer/how-to-guides/web/ads/subscribe-to-ad-events.md) and update your UI in their callbacks. Apply the same event-driven approach to server-side ad insertion.