> For the complete documentation index, see [llms.txt](https://docs.hello-lisa.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.hello-lisa.com/developers/guides/integration-guide/app-integration/picture-in-picture.md).

# 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.