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, 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

• Product Click

• Shopping Cart View

• Sponsor Badge

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

To enhance readability and simplify implementation, the messages are streamlined to include only the essential properties required for this message flow.

Enter Floating Mode

1. LiSA Player sends the Product Click message to the Host App:

   {
     "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 Message to the Player to request floating mode:

   {
     "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 Message to the Player to confirm to the Player that floating mode is entered:

   {
     "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 message to the Host App to request fullscreen transition:

   {
     "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 Message to the Player to confirm to the Player that fullscreen mode is entered:

   {
     "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.