# Player — UI Transition The LiSA Player supports a **Picture-in-Picture (PiP)-like floating mode**, allowing users to continue watching while interacting with other content. Depending on the host app / environment, the player remains in place but adjusts its controls to better suit a floating experience. {% hint style="info" %} Read the [Picture-in-Picture guide](/developers/guides/integration-guide/app-integration/picture-in-picture.md) on how to utilize the Floating Mode messages in different host apps and environments. {% endhint %} ### Floating Player States The following states describe the transition between fullscreen and floating mode: #### **`requestFloatingMode`** The player is starting the transition into floating mode. * Triggered when the user or system requests the player to enter floating mode. * The player replaces its **onscreen controls** with a more suitable UI for floating mode. * Once the transition completes, the `floating` state is entered. #### **`floating`** The player has fully entered floating mode. * The **floating mode UI** is now active, providing minimal or more compact controls. * The user can interact with other content while the video remains visible. * If the user or system requests fullscreen again, the `requestFullscreenMode` state is triggered. #### **`requestFullscreenMode`** The player is starting the transition back to fullscreen mode. * Triggered when the user or system requests the player to return to fullscreen. * The **floating mode UI** begins transitioning back to the standard fullscreen controls. * Once the transition completes, the `fullscreen` state is entered. #### **`fullscreen`** The player has fully returned to fullscreen mode. * The **default fullscreen controls** are now active. * Any floating mode interactions are reset until `requestFloatingMode` is triggered again. *** ### Properties Along with all standard [Message properties](/developers/guides/player-communication/message-api-reference.md#properties), a UI Transition message includes the following additional properties:

Name	Type	Description
`mediaItemId`	`string` Required.	The `mediaItemId` property uniquely identifies the Media Item from which this message originates.
`mediaItemType`	`MediaItemType` Required.	The `mediaItemType` property specifies the type of Media Item from which this message originates. Refer to `MediaItemType` for detailed information.
`messageType`	`Literal` Required.	`lsc:player:ui-transition`
`playerUiState`	`PlayerUiState` Required.	The `playerUiState` property represents the current UI mode of the video player, determining how its controls and interface are adapted. Possible values / transitions `fullscreen` — The player is in fullscreen mode with standard controls. `floating` — The player is in floating mode with an adapted UI. `requestFloatingMode` → switches the player to `floating`. `requestFullscreenMode` → transitions the player back to `fullscreen`.

#### Legacy Properties {% hint style="warning" %} If your integration uses **LiSA Player Version 1**, none of the properties described above will be available. For **LiSA Player Version 2**, legacy properties can be ignored. {% endhint %}

Name Type Description

Name	Type	Description
`action`	`Literal` Required.	`maximize` or `minimize` ⚠️ Please use `messageType` instead.
`target`	`Literal` Required.	`app` ⚠️ Please use `messageType` instead.

action

Literal

Required.

maximize or minimize

⚠️ Please use messageType instead.

target

Literal

Required.

app

⚠️ Please use messageType instead.

*** ### Type Definition ```typescript interface PlayerUiTransitionMessage extends Omit { mediaItemId: string; mediaItemType: MediaItemType; messageType: 'lsc:player:ui-transition'; playerUiState: | 'floating' | 'fullscreen' | 'requestFloatingMode' | 'requestFullScreenMode'; } ``` *** ### Examples #### Host App Requests Floating Mode ```json { "messageType": "lsc:player:ui-transition", "playerUiState": "requestFloatingMode", "recipient": "LiSA", "sender": "HostApp", "action": "minimize", "target": "app" } ``` #### Host App Confirms Floating Mode Entered {% hint style="warning" %} LiSA **Player Version 1** does not support externally confirming when the player host component has completed its transition. {% endhint %} ```json { "messageType": "lsc:player:ui-transition", "playerUiState": "floating", "recipient": "LiSA", "sender": "HostApp", } ``` #### LISA Player Requests Fullscreen Mode Triggered when the user taps the "Back to Fullscreen" CTA in the floating player’s onscreen controls. {% hint style="warning" %} LiSA **Player Version 1** does not support requesting the host app to exit the floating state. {% endhint %} ```json { "clockDriftInMs": 0, "mediaItemId": "9f333331-45cb-4289-8bcd-9023c1871111", "mediaItemType": "live", "messageType": "lsc:player:ui-transition", "playerUiState": "requestFullscreenMode", "recipient": "HostApp", "sender": "LiSA", } ``` #### Host App Confirms Fullscreen Mode Entered ```json { "messageType": "lsc:player:ui-transition", "playerUiState": "fullscreen", "recipient": "LiSA", "sender": "HostApp", "action": "maximize", "target": "app" } ``` --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.hello-lisa.com/developers/guides/player-communication/message-api-reference/player/player-ui-transition.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.