# Stream Layout

In the IPC player, you can control the video layout using the `objectFit` property. It supports two modes: **fillCrop** (stretch to fill) and **contain** (fit to screen).

You can also set the `rotateZ` property to rotate the video. Supported angles are 0, 90, 180, and 270 degrees.

Below are common layout examples for different player components.

## Lite Player Component

> 💡 **Note:** Upgrade `@ray-js/ray-ipc-player` to the latest version.

### Layout

- **Aspect Ratio:** Most videos are 16:9. Other ratios can be adjusted as needed.
- **Portrait Mode:** Use `fillCrop` to fill the screen.
- **Landscape Mode:** Use `contain` to preserve the aspect ratio.
- **Display Effect:** Videos are shown in 16:9. On devices with wider aspect ratios, black bars may appear on the sides.

> 💡 **Tip:** Hide the title bar in full-screen mode.

```jsx
const [screenType, setScreenType] = useState('portrait');
<TopBar title="title" style={{display: screenType === 'portrait' ? 'block' : 'none'}} />
```

** Example Code**

```jsx
import IpcPlayer from '@ray-js/ray-ipc-player';

const deviceId = '1234567890xxxxxx';

// Define screen state. You can listen to window size changes via the onResize event to dynamically update the screen state.
const [screenType, setScreenType] = useState('portrait');

const onCtx = (ctx) => {
    console.log(ctx, 'ctx');
};

<view style={{ height: screenType === 'portrait' ? `300px` : '100vh', overflow: 'hidden' }}>
   <IpcPlayer
      objectFit={screenType === 'portrait' ? 'fillCrop' : 'contain'}
      onCtx={onCtx}
      devId={deviceId}
      onChangeStreamStatus={onChangeStreamStatus}
    />
</view>

```

### Rotation Angle

Based on the layout settings, you can add a rotation angle according to your business scenario.

```jsx
import IpcPlayer from '@ray-js/ray-ipc-player';

    <IpcPlayer
      objectFit={'contain'}
      onCtx={onCtx}
      devId={deviceId}
      onChangeStreamStatus={onChangeStreamStatus}
      rotateZ={90}
    />

```

## Fusion Player Component

> 💡 **Note** Make sure the Fusion Player component `@ray-js/ipc-player-integration` is updated to the latest version.

### Layout

The Fusion Player is a secondary encapsulation based on the Lite Player. The implementation of the layout is consistent with the Lite Player component, mainly embedding some basic functions.
Most videos have an aspect ratio of 16:9. It is recommended to use the `fillCrop` layout mode in portrait mode and the `contain` layout mode in landscape mode.

The display effect: displayed in the original 16:9 ratio. If the phone's aspect ratio is greater than 16:9, most screens will have black bars on the left and right sides.

#### objectFit Solution

```jsx
import { IPCPlayerIntegration, useCtx } from '@ray-js/ipc-player-integration';
import { useState } from 'react';

const deviceId = '1234567890xxxxxx';

// Define screen state. You can listen to window size changes via the onResize event to dynamically update the screen state.
const [screenType, setScreenType] = useState('portrait');

const instance = useCtx({
    devId: deviceId,
});

<view style={{ height: screenType === 'portrait' ? `300px` : '100vh', overflow: 'hidden' }}>
   <IPCPlayerIntegration
      instance={instance}
      objectFit={screenType === 'portrait' ? 'fillCrop' : 'contain'}
      devId={deviceId}
    />
</view>

```

#### Encapsulation Solution

- **playerFit** parameter is used to define the layout mode in portrait orientation. The default display scale is 1, with a default value of `contain`. Optional values are `contain` ｜ `cover`.
- **landscapeMode** parameter is used to define the layout mode in landscape orientation. The default display scale is 1, with a default value of `standard`. Optional values are `standard` ｜ `fill`.

> 💡 **Note** This mode customizes the layout based on portrait and landscape orientations. Do not set `objectFit` simultaneously to avoid conflicts.

```jsx
import { IPCPlayerIntegration, useCtx } from '@ray-js/ipc-player-integration';
import { useState } from 'react';

const deviceId = '1234567890xxxxxx';

// Define screen state. You can listen to window size changes via the onResize event to dynamically update the screen state.
const [screenType, setScreenType] = useState('portrait');

const instance = useCtx({
    devId: deviceId,
});

<view style={{ height: screenType === 'portrait' ? `300px` : '100vh', overflow: 'hidden' }}>
   <IPCPlayerIntegration
      instance={instance}
      devId={deviceId}
      playerFit='contain'
      landscapeMode='standard'
    />
</view>

```

### Rotation Angle

Rotation is uniformly handled using the `extend` parameter to pass through properties supported by the Lite Player.

```jsx
import { IPCPlayerIntegration, useCtx } from '@ray-js/ipc-player-integration';
import { useState } from 'react';

const deviceId = '1234567890xxxxxx';

// Define screen state. You can listen to window size changes via the onResize event to dynamically update the screen state.
const [screenType, setScreenType] = useState('portrait');

const instance = useCtx({
    devId: deviceId,
});

<view style={{ height: screenType === 'portrait' ? `300px` : '100vh', overflow: 'hidden' }}>
   <IPCPlayerIntegration
      instance={instance}
      devId={deviceId}
      playerFit='contain'
      landscapeMode='standard'
      extend={{rotateZ: 90}}
    />
</view>

```