# Picture in Picture The LiSA Player is a **web-based video streaming application** designed to be seamlessly embedded in native apps via a **WebView**. To ensure a smooth user experience, we provide a set of **UI transition messages** that allow the host app to manage fullscreen and floating modes effectively. ### **Managing UI Transitions: Fullscreen & Floating Mode** The player’s transition between fullscreen and floating mode is managed via [**UI transition messages**](/developers/guides/player-communication/message-api-reference/player/player-ui-transition.md), allowing the host app to control and stay in sync with the player’s state. #### **Float Mode Initiation** The initial request to enter float mode can be triggered by several messages, including: * [Link in Comments](/developers/guides/player-communication/message-api-reference/cta/cta-link-in-comments.md) * [Product Click](/developers/guides/player-communication/message-api-reference/products/products-click.md) * [Shopping Cart View](/developers/guides/player-communication/message-api-reference/cart-view-cart.md) * [Sponsor Badge](/developers/guides/player-communication/message-api-reference/cta/cta-sponsor-badge.md) #### **UI Transition Messages** | Message | Description | | --------------------------- | --------------------------------------------------------------------------------------- | | **`requestFloatingMode`** | The player is about to switch to floating mode, and the UI adapts accordingly. | | **`floating`** | The player has fully entered floating mode with adjusted controls. | | **`requestFullscreenMode`** | The player is about to return to fullscreen mode, and the UI begins transitioning back. | | **`fullscreen`** | The player is now in fullscreen mode with standard controls. | These messages ensure that the host app and LiSA Player can **respond** to player state changes, providing a seamless and optimized integration. ### Example Message Flow {% hint style="info" %} To enhance readability and simplify implementation, the messages are streamlined to include only the essential properties required for this message flow. {% endhint %} #### Enter Floating Mode 1. LiSA Player sends the [Product Click](/developers/guides/player-communication/message-api-reference/products/products-click.md) message to the Host App: ```json { "mediaItemId": "9f333331-45cb-4289-8bcd-9023c1871111", "mediaItemType": "live", "messageType": "lsc:product:click", "product": { ... }, "productBrand": "BLIZ", "productCurrency": "EUR", "productId": "ab016523-250c-49a3-b2b4-86487d9df813", "productReference": "f20312c0-40a2-4b20-986c-5b81ceca6eae", "productPrice": 89.95, "productTitle": "RAVE UNISEX - Ski goggles - matt black/white", "progress": { ... }, "sender": "LiSA", "action": "click", "additional": { ... }, "first": true, "item": { ... }, "target": "carousel.item" } ``` 2. Host App receives the message. 3. Host App opens the Product Detail Page based on the `productReference`. 4. Host App sends the [UI Transition](/developers/guides/player-communication/message-api-reference/player/player-ui-transition.md) Message to the Player to request floating mode: ```json { "mediaItemId": "9f333331-45cb-4289-8bcd-9023c1871111", "mediaItemType": "live", "messageType": "lsc:player:ui-transition", "playerUiState": "requestFloatingMode", "recipient": "LiSA", "sender": "HostApp", "action": "minimize", "target": "app" } ``` 5. Host App transitions the WebView component into floating state. 6. Host App sends the [UI Transition](/developers/guides/player-communication/message-api-reference/player/player-ui-transition.md) Message to the Player to confirm to the Player that floating mode is entered: ```json { "mediaItemId": "9f333331-45cb-4289-8bcd-9023c1871111", "mediaItemType": "live", "messageType": "lsc:player:ui-transition", "playerUiState": "floating", "recipient": "LiSA", "sender": "HostApp" } ``` #### Exit Floating Mode 1. LiSA Player sends the [UI Transition](/developers/guides/player-communication/message-api-reference/player/player-ui-transition.md) message to the Host App to request fullscreen transition: ```json { "mediaItemId": "9f333331-45cb-4289-8bcd-9023c1871111", "mediaItemType": "live", "messageType": "lsc:player:ui-transition", "playerUiState": "requestFullscreenMode", "sender": "LiSA" } ``` 2. Host App transitions the WebView component into floating state. 3. Host App sends the [UI Transition](/developers/guides/player-communication/message-api-reference/player/player-ui-transition.md) Message to the Player to confirm to the Player that fullscreen mode is entered: ```json { "mediaItemId": "9f333331-45cb-4289-8bcd-9023c1871111", "mediaItemType": "live", "messageType": "lsc:player:ui-transition", "playerUiState": "fullscreen", "recipient": "LiSA", "sender": "HostApp" } ``` *** ### **Native Picture-in-Picture (PiP) Is No Longer Recommended** Utilizing native **Picture-in-Picture (PiP)** is **no longer recommended** due to various limitations. Instead, we offer a **WebView-based floating mode** to ensure better compatibility and control across platforms. #### **Limitations of Native PiP** 1. **Limited to a Single Video** * Our player supports **co-streaming**, allowing multiple simultaneous video feeds. * Native PiP is restricted to **one** active video at a time. 2. **Inconsistent Platform Support** * Native PiP is **not available on all platforms**, leading to inconsistencies. * Some mobile OS versions and devices may lack PiP support altogether. 3. **Better UI Control with WebView-Based Floating Mode** * Our **floating mode** keeps the UI consistent across all devices and platforms. * Advanced **theming options** allow for an even more seamless integration into our customers apps and storefronts. * Native PiP may interfere with in-app navigation, whereas WebView-based floating mode ensures a seamless experience. By relying on **WebView-based floating mode**, the host app maintains **full control** over the player's UI and transitions, ensuring a consistent and predictable experience. --- # 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/integration-guide/app-integration/picture-in-picture.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.