Player — Pass Visual Viewport

In certain situations, the LiSA Player sends a message to request the visual viewport from the host app or environment. In response to this message, the host app / environment should pass essential properties of the current Visual Viewport back to the LiSA Player.

This message is sent by the host app / environment to the LiSA Player.

Visual Viewport Properties

const visualViewport = {
  viewportHeight: window.visualViewport.height ?? window.innerHeight,
  viewportScrollX: window.visualViewport.pageLeft ?? window.scrollX,
  viewportScrollY: window.visualViewport.pageTop ?? window.scrollY,
  viewportWidth: window.visualViewport.width ?? window.innerWidth,
};

Properties

Along with all standard Message properties, a Pass Visual Viewport message includes the following additional properties:

Name	Type	Description
messageType	Literal Required.	lsc:player:viewport:pass
viewportHeight	Number Required.	The viewportHeight property represents the current height of the host app / environment's host app's visual viewport.
viewportScrollX	Number Required.	The viewportScrollX property represents the current horizontal scroll offset of the host app / environment's host app's visual viewport.
viewportScrollY	Number Required.	The viewportScrollY property represents the current vertical scroll offset of the host app / environment's host app's visual viewport.
viewportWidth	Number Required.	The viewportWidth property represents the current width of the host app / environment's host app's visual viewport.

---

Type Definition

interface PlayerPassVisualViewportMessage extends Omit<
  Message,
  'clockDriftInMs' | 'messageType' | 'recipient'
> {
  messageType: 'lsc:player:viewport:pass';
  recipient: 'LiSA';
  viewportHeight: number;
  viewportScrollX: number;
  viewportScrollY: number;
  viewportWidth: number;
}

---

Examples

{
  "messageType": "lsc:player:viewport:pass",
  "recipient": "LiSA",
  "sender": "Sender",
  "viewportHeight": 854,
  "viewportScrollX": 0,
  "viewportScrollY": 0,
  "viewportWidth": 480
}